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-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.