plan to use Javascript and webpage for dashboard

geo.js

@@ -0,0 +1,214 @@
+//================= Canvas elements
+let canvas = document.getElementById('floor');
+canvas.width = window.innerWidth;
+canvas.height = window.innerHeight;
+
+let colors = ["red", "orange", "yellow", "green", "blue", "indigo", "violet"];
+let colorIndex = 0;
+
+function rotate(xy, center, rad){
+
+  let haha = [xy[0]-center[0], xy[1]-center[1]];
+
+  let kaka = [ haha[0]*Math.cos(rad) - haha[1]*Math.sin(rad),
+               haha[0]*Math.sin(rad) + haha[1]*Math.cos(rad)];
+
+  return [ kaka[0] + center[0],
+           kaka[1] + center[1]];
+}
+
+class tandemClass{
+  
+  constructor(xy, l, w){
+    this.l = l;
+    this.w = w;
+
+    this.setPos(xy);
+  }
+
+  setPos(xy){
+    this.x = xy[0];
+    this.y = xy[1];
+    delete this.shape;
+    this.shape = new Path2D();    
+    this.shape.rect(this.x - this.w/2, this.y - this.l - this.w/2, this.w, this.l);
+    this.shape.arc(this.x, this.y-this.w/2, this.w/2, 0, Math.PI);
+    this.shape.arc(this.x, this.y-this.w/2 - this.l, this.w/2, Math.PI, 2* Math.PI);
+  }
+  
+  draw(color){
+    this.clear();
+    
+    let ctx = canvas.getContext('2d');
+    ctx.fillStyle = color;    
+    ctx.fill(this.shape);
+  }
+  
+  exitPos(){ return [ this.x, this.y - this.w -this.l];}
+
+  clear(){
+    let ctx = canvas.getContext('2d');
+
+    ctx.save();
+    ctx.globalCompositeOperation = 'destination-out';
+    ctx.fill(this.shape);
+    ctx.restore();
+    //ctx.clearRect(this.x - this.w/2, this.y - this.l - this.w, this.w, this.l + this.w);
+  }
+}
+
+
+class beamLine{
+  constructor(xy, rad, l){
+    this.x = xy[0];
+    this.y = xy[1];
+    this.len = l;
+    this.rad = rad;
+
+    this.shape = null;
+    this.offset = 0;
+
+    this.lineWidth = 10;
+    
+    this.lineEnd = [xy[0] + this.len, xy[1]]; 
+    this.lineEnd = rotate(this.lineEnd, xy, rad);
+
+    this.shape = new Path2D();
+    this.shape.moveTo(this.x, this.y);
+    this.shape.lineTo(this.lineEnd[0], this.lineEnd[1]);
+  }
+
+  exitPos() {return this.lineEnd;}
+
+  draw(color){
+    this.clear();
+
+    let ctx = canvas.getContext('2d');
+    ctx.setLineDash([10,6]);
+    ctx.lineDashOffset = -this.offset;
+    ctx.lineWidth = 10;
+    ctx.strokeStyle = color;
+    ctx.stroke(this.shape);
+  }
+
+  march(color){
+    this.offset++;
+    if( this.offset > 16) this.offset = 0;
+    this.draw(color);
+    setTimeout(this.march.bind(this), 20);
+  }
+
+  clear(){
+    let ctx = canvas.getContext('2d');
+    ctx.save();
+    ctx.globalCompositeOperation = 'destination-out';
+    ctx.stroke(this.shape);
+    ctx.restore();
+
+  }
+
+}
+
+class beamRectElement{
+  constructor(xy, rad, l, w){
+    this.x = xy[0];
+    this.y = xy[1];
+    this.l = l;
+    this.w = w;
+    this.theta = rad;
+  }
+
+  draw(color){
+    delete this.shape;
+    this.shape = new Path2D();
+    
+  }
+}
+
+let tandem = new tandemClass([500, 500], 200, 100);
+
+tandem.draw('green');
+
+let b1 = new beamLine(tandem.exitPos(), Math.PI*3/2, 100);
+
+b1.march('blue');
+
+//let l1 = new beamRectElement(tandem.exitPos(), 90, 100, 10);
+//l1.draw('red');
+
+/*
+function drawTandem(x, y, l, w, color){
+  
+  ctx.beginPath();
+  ctx.arc(x, y-w/2, w/2, 0, Math.PI);
+  ctx.fillStyle = color;
+  ctx.fill();
+  
+  ctx.beginPath();
+  ctx.moveTo(x + w/2, y - w/2 );
+  ctx.lineTo(x + w/2, y - w/2 -l);
+  ctx.lineTo(x - w/2, y - w/2 -l);
+  ctx.lineTo(x - w/2, y - w/2 );
+  ctx.closePath();
+  ctx.strokeStyle = color;
+  ctx.stroke();
+  ctx.fillStyle = color;
+  ctx.fill();
+  
+  ctx.beginPath();
+  ctx.arc(x, y-w/2 - l, w/2, Math.PI, 2* Math.PI);
+  ctx.fillStyle = color;
+  ctx.fill();
+  
+  return [ x, y - w -l];
+  
+}
+
+function rotation(coor, rad){
+  let deg = Math.PI / 180;
+  
+  let xy = [];
+  xy.push(Math.cos( rad * deg ) * coor[0] - Math.sin rad * deg ) * coor[1]);
+  xy.push(Math.sin( rad * deg ) * coor[0] + Math.cos rad * deg ) * coor[1]);
+  
+  return xy;
+}
+
+function drawBeamLine(x, y, l, w, rad, color){
+  ctx.beginPath();
+  let a = rotation([+ w/2, 0], rad);
+  let b = rotation([+ w/2, l], rad);
+  let c = rotation([- w/2, l], rad);
+  let d = rotation([- w/2, 0], rad);
+  
+  ctx.moveTo(x + a[0], y + a[1]);
+  ctx.lineTo(x + b[0], y + b[1]);
+  ctx.lineTo(x + c[0], y + c[1]);
+  ctx.lineTo(x + d[0], y + d[1]);
+  ctx.closePath();
+  ctx.strokeStyle = color;
+  ctx.stroke();
+  ctx.fillStyle = color;
+  ctx.fill();
+}
+
+
+let tandemExit = drawTandem(1000, 500, 100, 100, 'red');
+
+drawBeamLine( tandemExit[0], tandemExit[1], 100, 10, 180, 'black');
+
+
+
+function drawCircle() {
+  // clear the canvas
+  // ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+  ctx.beginPath();
+  ctx.arc(100, 75, 50, 0, 2 * Math.PI);
+  ctx.fillStyle = colors[colorIndex];
+  ctx.fill();
+
+  colorIndex = (colorIndex + 1) % colors.length;
+}
+
+*/

testing.html

@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+
+<title>testing</title>
+
+</head>
+<style>
+ body{
+   //color : white;
+ }
+ canvas{
+   display:block;
+   //width: 100%;
+   //height: 50%;
+   border : nono;
+ }
+</style>
+
+<body style="background-color:white">
+
+<span id='clock' style="font-size:30px"></span>
+<p></p>
+<canvas id='floor' witdh = "2048" height = "1024"> Your browser doe snot support HTML canvas</canvas>
+
+<p id='text'></p>
+
+</body>
+
+<!-- ################################################ -->
+<script>
+
+/****
+let data;
+
+function GetMassFromAZ(){
+  let client = new XMLHttpRequest();
+  client.onreadystatechange = function() {
+    data = client.responseText;
+    alert(data);
+  }
+  client.open('GET', "/Users/user/Desktop/test.txt", false);
+  client.send();
+}
+
+GetMassFromAZ();
+
+document.getElementById('text').innerHTML = data;
+*/
+
+
+function time() {
+  let clock = document.getElementById('clock');
+
+  let d = new Date();
+  clock.textContent = d;
+  
+}
+time();
+setInterval(time, 1000);
+
+// set a timer to update the color of the circle every second
+//setInterval(drawCircle, 1000);
+
+</script>
+
+<script src="geo.js"></script>
+
+</html>