function dragstart(element){    //Wird aufgerufen, sobald ein Element angeklickt wird.
    if (!element){element = window.event;}
    dragobjekt = element;       //Parameter element: Das zu bewegende Objekt.
    document.getElementById("picker").style.display='none';//Picker wieder ausblenden
    id = (dragobjekt.target || dragobjekt.srcElement).id; //Id des aktuellen Objektes speichern
    if(id=="smw-titel" || id=="picker" || id=="feld" || id=="canvas" || id=="color_schieber" || id=="prev" || id=="regler" || id=="gray" || id=="gray_schieber" || id=="hex" || document.getElementById(id).className == "smw_picker"){
        document.getElementById("picker").style.display='block'; //den color-picker einblenden
        dragx = posx - document.getElementById(id).offsetLeft; //Dragposition initialisieren
        dragy = posy - document.getElementById(id).offsetTop;
        if(document.getElementById(id).className == "smw_picker"){//wenn ein picker-button geklickt wurde
            document.getElementById("picker").style.display='block'; //den color-picker einblenden
            document.getElementById("picker").style.left = posx + "px"; //den color-picker an die Mausposition setzen
            document.getElementById("picker").style.top = posy + "px";
            pickbutton = id; //die ID des aktuellen Pick-buttons speichern
            pickinput = document.getElementById(id).getAttribute('for'); //ID des Input-feldes, in welches das Ergebnis geschrieben wird
        }
    }else{}
}
    
function dragstop() {       //Wird aufgerufen, wenn ein Objekt nicht mehr bewegt werden soll.
    dragobjekt=null;        //objekt etfernen
}
    
function drag(ereignis) {   //Wird aufgerufen, wenn die Maus bewegt wird und bewegt bei Bedarf das Objekt.
    posx = document.all ? window.event.clientX : ereignis.pageX;
    posy = document.all ? window.event.clientY : ereignis.pageY;
    if(dragobjekt != null){ //Wenn ein zu Bewegendes Objekt vorhanden...
        if(id == "gray_schieber"){
            var left = (posx - dragx);
            if(left < 0) {  left = 0;       }
            if(left > 271){ left = 271; }
            document.getElementById(id).style.left = left + "px";
            grayx = left; //Position des Schiebereglers in einer globalen Variable speichern
            vorschau(); //Vorschau-div und Hex-code aktuallisieren
            set_screen("canvas",left);//Farbpalette überarbeiten
        }
        if(id == "color_schieber"){
            var left = (posx - dragx);
            if(left < 0) {  left = 0;       }
            if(left > 255){ left = 255; }
            var top = (posy - dragy);
            if ( checkIE() > -1 ){top = top-23}//Nur, wenn MSIE
            if(top < 0) {   top = 0;    }
            if(top > 255){  top = 255;}
            document.getElementById(id).style.left = left + "px";
            document.getElementById(id).style.top = top + "px";
            colorx = left; //Position des Schiebereglers in einer globalen Variable speichern
            colory = top; //Position des Schiebereglers in einer globalen Variable speichern
            vorschau(); //Vorschau-div und Hex-code aktuallisieren
        }
        if(id == "picker"){
            var left = (posx - dragx);
            if(left < 0) {  left = 0;}
            var top = (posy - dragy);
            if(top < 0) {   top = 0;}
            document.getElementById(id).style.left = left + "px";
            document.getElementById(id).style.top = top + "px";
        }
    }
}
    
    
function vorschau() {       //Initialisiert und aktuallisiert das Vorschau-div und mach den Hex-code.
    var color = read_color(colorx, colory, 255, grayx); //Farbe des Vorschau-div's bestimmen
    document.getElementById("prev").style.backgroundColor = "rgb("+color[0]+", "+color[1]+", "+color[2]+")"; //Vorschau-div hintergrundfarbe
    document.getElementById(pickbutton).style.backgroundColor = "rgb("+color[0]+", "+color[1]+", "+color[2]+")"; //Vorschau-pick-button hintergrundfarbe
    var hex = rgbToHex(color[0], color[1], color[2]);
    document.getElementById("hex").value = hex; //Hex-vorschau-input
    document.getElementById(pickinput).value = hex; //Das eigentliche Input setzen 
    hex = rgbToHex(255-color[0], 255-color[1], 255-color[2]);//complimentärfarbe
    document.getElementById("color_schieber").style.border = "solid "+hex+" 2px";
}
function rgbToHex(r, g, b) {
    return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}
    
    
function setPixel(imageData, x, y, r, g, b, a) {
    index = (x + y * imageData.width) * 4;
    imageData.data[index+0] = r;
    imageData.data[index+1] = g;
    imageData.data[index+2] = b;
    imageData.data[index+3] = a;
}
Webdesigns
Powered by Veit
Lampen Designer
3D-Lampendesigner ist eine Software, mit der man im Browser über Schieberegler Lampenschirme für Deko- und Tischlampen erstellen kann, welche man anchließend kostenfrei herunterladen kann.
Die Seite arbeitet mit WebGL, um eine 3-Dimensionale Vorschau zu erstellen.
Die Ansicht kann via Gestensteuerung gedreht werden.

3D-Druck
3D-Druck ist eine informative Seite über 3D-Druckverfahren, Anwendungsbereiche und Druckmaterialien.
Zudem befindet sich dort eine Dokumentation über den Bau meines 3D-Druckers.

Stadtjugendkapelle Herzogenaurach
Die Webseite der Stadtjugendkapelle Herzogenaurach.
Die Seite wurde von Joomla auf Wordpress umgestellt und mit einem responsiven Design versehen.
Javascripts wurden, wo möglich durch CSS3 ersetzt oder ergänzt, um die Kompatibiliät zu erhöhen.

Psychotherapie Herzogenaurach
Die Seite Psychotherapie Herzogenaurach ist eine Praxiswebseite für Psychotherapie.
Sie dient dazu, einen Erstkontakt aufzubauen und im Notfall schnell dir richtigen Informationen zu finden.

Anders Reiten
Anders Reiten war eine meiner ersten Seiten.
Es handelt sich um eine einfach strukturierte Seite mit integriertem Administrationsbereich (Grafisches Content Management System), welches mittels PHP realisiert wurde.

Catherine Stabel

© Veit Götz 2012 - 2019
Impressum
Datenschutz
Statistiken