showLightPosition Done!

SVG

Author: yvonnexiong

addLight.js

@@ -76,6 +76,39 @@ $(function() {
 
     var view = {
         init: function() {
+
+            // mouse event
+
+            var canvas = document.getElementById( "gl-canvas" );
+            canvas.addEventListener("mousedown", function(evt){
+                mouseFlag = 1;
+            }, false);
+            canvas.addEventListener("mousemove", function(evt){
+                if(mouseFlag === 1){
+                    setMousePos(canvas, evt, 0);//add default light event;
+                }
+            }, false);
+            canvas.addEventListener("mouseup", function(){
+                mouseFlag = 0;
+                //mouseFlag = (mouseFlag ==0)?1:0;
+            }, false);
+
+            
+            // show light Position event
+            
+            $('#lightsPositionSelect:checkbox').click(function() {
+                var $this = $(this);
+                // $this will contain a reference to the checkbox   
+                if ($this.is(':checked')) {
+                    $('#lightPosition_container').css("display", "block");
+                } else {
+                    $('#lightPosition_container').css("display", "none");
+                }
+            });
+
+
+
+            // "Add light" button event
             var addLightBtn = $('#btn_addLight');
             addLightBtn.click(function() {
                 octopus.addLight();
@@ -85,7 +118,7 @@ $(function() {
             this.$lightList = $('ul#accordion_Lights');
             this.defaultLightTemplate = $('script[data-template="defaultLight"]').html();
             this.lightTemplate = $('script[data-template="light"]').html();
-
+            this.$lightMarkList = $('#lightPosition_container');
 
             // Delegated event to listen for removal clicks
             this.$lightList.on('click', '.myLightsTitle .destroy', function(e) {
@@ -100,24 +133,29 @@ $(function() {
         render: function() {
             // Cache vars for use in forEach() callback (performance)
             var $lightList = this.$lightList,
+                $lightMarkList = this.$lightMarkList,
                 lightTemplate = this.lightTemplate;
 
             var defaultLightTemplate = lightTemplate.replace(/{{id}}/g, 0).replace("LIGHT0","DEFAULT LIGHT");
 
             // Clear and render
             $lightList.html('');
+            $lightMarkList.html('');
             $lightList.append(defaultLightTemplate);
 
-            $("#lightPanel0 .destroy").remove();
+            $("#lightPanel0 .destroy").remove();//can not be deleted
 
-            setupLightFunctions(0);//for default light
+            //for default light
+            setupLightFunctions(0);//sliderbar checkbox etc, function in sliders.js
+            drawLightMarkPosition(0);
 
             octopus.getExistLights().forEach(function(light) {
 
                 // Replace template markers with data
                 var thisTemplate = lightTemplate.replace(/{{id}}/g, light.id);
                 $lightList.append(thisTemplate);
                 setupLightFunctions(light.id);
+                drawLightMarkPosition(light.id);
             });
 
 
@@ -130,6 +168,13 @@ $(function() {
                 $(lightContentName).addClass('in');
 
             }
+
+            //for show lights position 
+            //init default point
+            
+
+
+
         }
     };
 
@@ -141,18 +186,78 @@ $(function() {
 function addLightParameters(index){
     //init parameter
     mouseXY[index] = [Math.random()-0.5, Math.random()-0.5];     
-    lightColor[index] =[Math.random()/2+0.5, Math.random()/2+0.5, Math.random()/2+0.5];
+    lightColor[index] =[Math.random(), Math.random(), Math.random()];
     lightIntensity[index] = 0.5;
     pointLightDis[index] = 0.5;
     showDiffuse[index] = 1;
     showSpec[index] = 1;
 
-    //mouse stuff
+    //mouse 
     var canvas = document.getElementById( "gl-canvas" );
     canvas.addEventListener("mousemove", function(evt){
         if(mouseFlag === 1){
-            setMousePos(canvas, evt, index);//this function in "cube.js"
+            setMousePos(canvas, evt, index);
         }
     }, false);
 
 }
+
+
+//for show lights position
+
+function setLightMarkFill(index)
+{
+    var colorString = color2hex(lightColor[index]);
+    var lightMarkName = '#lightMark'+index;
+    $(lightMarkName).attr('fill', colorString);
+}
+
+function setLightMarkPosition(index)
+{
+    var lightPx = (mouseXY[index][0] + 0.5)*100 + "%";
+    var lightPy = (mouseXY[index][1] + 0.5)*100 + "%";
+
+    var lightMarkName = '#lightMark'+index;
+    $(lightMarkName).attr('cx', lightPx).attr('cy', lightPy);
+
+    console.log("inMark");
+}
+
+function drawLightMarkPosition(index){
+    var lightPx = (mouseXY[index][0] + 0.5)*100 + "%";
+    var lightPy = (mouseXY[index][1] + 0.5)*100 + "%";
+    var colorString = color2hex(lightColor[index]);
+    var lightMark = "lightMark" + index;
+    var circle= makeSVG('circle', {id:lightMark, cx: lightPx, cy: lightPy, fill: colorString, r:8, stroke: 'white', 'stroke-width': 1,});
+    document.getElementById('lightPosition_container').appendChild(circle);
+}
+
+function makeSVG(tag, attrs) {
+    var el= document.createElementNS('http://www.w3.org/2000/svg', tag);
+    for (var k in attrs)
+        el.setAttribute(k, attrs[k]);
+    return el;
+}
+
+//mouse functions
+
+function setMousePos(canvas, evt, i){
+    
+    if (currentLight == i)
+    {
+        mouseXY[i][0] = getMousePos(canvas, evt).x;
+        mouseXY[i][1] = getMousePos(canvas, evt).y;
+        setLightMarkPosition(i);
+        console.log(i+": "+mouseXY[i][0]+" "+mouseXY[i][1]);
+    }
+    
+}
+
+function getMousePos(canvas, evt) {
+    var rect = canvas.getBoundingClientRect();
+    return {
+        x: (evt.clientX - rect.left)/(rect.right - rect.left) - 0.5,
+        y: (evt.clientY - rect.top)/(rect.bottom - rect.top) - 0.5
+    };
+}
+

css/mock3d.css

@@ -309,13 +309,26 @@ label{margin-bottom:0;}
 
 }
 
-
 #gl-canvas {
 	position: relative;
   	top: 50%;
   	transform: translateY(-50%);
 }
 
+#lightPosition_container{
+  margin:0 auto;
+  left: 0;
+  right: 0;
+  position:absolute;
+  display: block;
+  z-index: 100;
+  top: 50%;
+  transform: translateY(-50%);
+
+  pointer-events:none; 
+  /*background: rgba(255, 0, 0, 0.5);*/
+}
+
 
 
 
@@ -354,6 +367,9 @@ label{margin-bottom:0;}
 					text-align: center;
 					position: relative;
 					}
+.imgThumb {
+  background-image: url("../img/transparentBG.jpg");
+}
 
 .btn-file {
   position: absolute;

cube.js

@@ -6,7 +6,7 @@ var lightNum = 1;
 var mouseXY = [];
 mouseXY[0] = [0.3, -0.3];     //default light
 
-
+var lightsPosition = 0;
 var lightsOnly = 0;
 
 var lightColor = [];
@@ -44,11 +44,11 @@ var FGdis = 0.5;
 var FGshiftLR = 0;
 
 
-
+//Locs
 
 var currentLightLoc;
 var lightNumLoc;
-var mouseLoc;;//, mouse1Loc, mouse2Loc;
+var mouseLoc;
 
 var lightsOnlyLoc;
 var lightColorLoc;
@@ -93,24 +93,10 @@ window.onload = function init()
     gl = WebGLUtils.setupWebGL( canvas );
     if ( !gl ) { alert( "WebGL isn't available" ); }
 
-    /* MOUSE STUFF */
-
-    var context = canvas.getContext('2d');
 
-    canvas.addEventListener("mousedown", function(evt){
-        mouseFlag = 1;
-    }, false);
-    canvas.addEventListener("mousemove", function(evt){
-        if(mouseFlag === 1){
-            setMousePos(canvas, evt, 0);//add default light event;
-        }
-
-    }, false);
-    canvas.addEventListener("mouseup", function(){
-        mouseFlag = 0;
-        //mouseFlag = (mouseFlag ==0)?1:0;
-    }, false);
+    var context = canvas.getContext('2d');
 
+
     /***************/
 
 
@@ -286,25 +272,6 @@ function handleTextureLoaded(image, texture) {
 }
 
 
-function setMousePos(canvas, evt, i){
-    
-    if (currentLight == i)
-    {
-        mouseXY[i][0] = getMousePos(canvas, evt).x;
-        mouseXY[i][1] = getMousePos(canvas, evt).y;
-        console.log(i+": "+mouseXY[i][0]+" "+mouseXY[i][1]);
-    }
-    
-}
-
-function getMousePos(canvas, evt) {
-    var rect = canvas.getBoundingClientRect();
-    return {
-        x: (evt.clientX - rect.left)/(rect.right - rect.left) - 0.5,
-        y: (evt.clientY - rect.top)/(rect.bottom - rect.top) - 0.5
-    };
-}
-
 function render() {
     gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT );
 

dragndrop.js

@@ -62,7 +62,7 @@ UPLOADinit = function()
 	//image3.src = "images/bottle/shape.png"
 	//image5.src = "images/bottle/bg.png"
 	//image6.src = "images/eye/eye_alpha.jpg";
-	image6.src = "images/Holmer/Holmer_alphaControl.jpg";
+	image6.src = "images/Holmer/Holmer_new_alphaControl.png";
 
 
 
@@ -339,19 +339,33 @@ function updateCanvasSizeandStyle(_image)
 	var canvasContainer = $('.canvas_container');
 	var ratioImage = _image.width / _image.height;
 	var ratioContainer = canvasContainer.width() / canvasContainer.height();
-			
+	
+	var lightPostionContainer = $('#lightPosition_container');
+	
 	if(ratioImage>=ratioContainer){
 		canvas.width = canvasContainer.width();
 		canvas.height = canvas.width * _image.height / _image.width;
 		canvas.style.width = "100%";
 		canvas.style.height = "auto";
+		$(lightPostionContainer).css("width", "100%");
+		$(lightPostionContainer).css("height", "auto");
+		
+		
 	}else{
 		canvas.height = canvasContainer.height() ;
 		canvas.width = canvas.height * _image.width / _image.height;
 		canvas.style.height = "100%";
 		canvas.style.width = "auto";
+		$(lightPostionContainer).css("height", "100%");
+		$(lightPostionContainer).css("width", "auto");
+		
 	}
 
+	$(lightPostionContainer).attr("width", canvas.width) ;
+	$(lightPostionContainer).attr("height", canvas.height);
+	var viewbox = "0 0 " + canvas.width + " " + canvas.height;
+	$(lightPostionContainer).attr("viewBox", viewbox);
+	
 	gl = WebGLUtils.setupWebGL( canvas );
  	gl.viewport( 0, 0, canvas.width, canvas.height );
  	gl.clearColor( 0.05, 0.05, 0.05, 1.0 );