first piece of html5 display

addressing of 7 segments (RGB) and windows (greyscale)
2013-08-11 21:26:50 +02:00 · 2013-08-11 21:26:50 +02:00 · 5d181539b7
parent 36e97d42e7
commit 5d181539b7
2 changed files with 108 additions and 0 deletions
--- a/displayclienthtml/building-isometric_b.jpg
+++ b/displayclienthtml/building-isometric_b.jpg
--- a/displayclienthtml/index.html
+++ b/displayclienthtml/index.html
@ -0,0 +1,108 @@
+<html><head>
+<title>Syn2lights simulator</title>
+</head>
+<body>
+    <canvas id="myCanvas" width="1437" height="1051"></canvas>
+    <script>
+      var canvas = document.getElementById('myCanvas');
+      var context = canvas.getContext('2d');
+      var imageObj = new Image();
+      imageObj.src = 'building-isometric_b.jpg';
+//      windowTab[0][0]={x:488,y:265};
+//      windowTab[1][0]={x:528,y:265};
+      function lightWindow(x,y,val) {
+        context.beginPath();
+        context.rect(488+40.3*x, 265+87.4*y, 23, 34);
+        context.fillStyle = 'rgb('+val+','+val+','+val+')';
+        context.fill();
+      }
+      function lightSegment(display,segment,r,g,b) {
+        context.beginPath();
+        segx=488+40.3*display;
+	segy=176
+	switch(segment) { 
+        case 0:  //segment 0
+	  context.moveTo(segx,segy);
+	  context.lineTo(segx+23,segy);
+	  break;
+        case 1:  
+	  context.moveTo(segx+23,segy);
+	  context.lineTo(segx+23,segy+17);
+	  break;
+        case 2:  
+	  context.moveTo(segx+23,segy+18);
+	  context.lineTo(segx+23,segy+34);
+	  break;
+        case 3:  
+	  context.moveTo(segx,segy+34);
+	  context.lineTo(segx+23,segy+34);
+	  break;
+        case 4:  
+	  context.moveTo(segx,segy+18);
+	  context.lineTo(segx,segy+34);
+	  break;
+        case 5:  
+	  context.moveTo(segx,segy);
+	  context.lineTo(segx,segy+17);
+	  break;
+        case 6:  
+	  context.moveTo(segx,segy+17);
+	  context.lineTo(segx+23,segy+17);
+	  break;
+        case 7:  
+	  context.moveTo(segx+23,segy+38);
+	  context.lineTo(segx+23,segy+42);
+	  break;
+	}
+	context.lineWidth=5;
+        context.strokeStyle = 'rgb('+r+','+g+','+b+')';
+        context.stroke();
+      }
+      imageObj.onload = function() {
+        context.drawImage(imageObj, 0, 0);
+
+      for(x=0;x<12;x++)
+        for(y=-1;y<8;y++)
+          lightWindow(x,y,0);
+
+i=0;
+j=0;
+oldi=oldj=0;
+colwave=0;
+d=0;
+s=0;
+oldd=olds=0;
+       setInterval("loop()",100);
+      };
+
+function loop() {
+  // 7 segments colorful sequence
+  lightSegment(oldd,olds,0,0,0);
+  lightSegment(d,s,255,Math.floor((Math.sin(colwave/30)+1)*127),Math.floor((Math.cos(colwave/17)+1)*127));
+  colwave++;
+  oldd=d;olds=s;
+  s++;
+  if(s>=8) {
+    s=0
+    d++
+    if(d>=12) {
+      d=0
+    }
+  }
+
+  // windows sliding light
+  lightWindow(oldi,oldj,0)   // switch off previous window
+  lightWindow(i,j,Math.floor((Math.sin(colwave/77)+1)*127))       // switch on new window
+  oldi=i;
+  oldj=j;
+  i++;  
+  if(i>=12) {
+    i=0;
+    j++;
+    if(j>=8) {
+      i=j=0
+    }
+  }
+}
+    </script>
+</body></html>