Add calibration example

.gitignore

@@ -1,3 +1,5 @@
 node_modules/
 dist/
 *.log
+*.swp
+*.swo

examples/balls/Ball.ts

@@ -1,4 +1,4 @@
-import { Rect } from '@laser-dac/draw';
+import { Circle } from '@laser-dac/draw';
 import Victor = require('victor');
 
 interface BallOptions {
@@ -12,8 +12,8 @@ export class Ball {
   x: number;
   y: number;
   vector: Victor = new Victor(
-    (Math.random() - 0.5) / 200,
-    (Math.random() - 0.5) / 200
+    (Math.random() - 0.5) / 2,
+    (Math.random() - 0.5) / 2
   );
 
   constructor(options: BallOptions) {
@@ -22,41 +22,44 @@ export class Ball {
     this.radius = options.radius;
   }
 
-  update = () => {
-    this.x += this.vector.x;
-    this.y += this.vector.y;
+  update = (timeStep: number) => {
+    this.x += this.vector.x * timeStep;
+    this.y += this.vector.y * timeStep;
 
     this.updateBounds();
   };
 
   updateBounds = () => {
     // Left bound.
     if (this.x - this.radius <= 0) {
+      this.x = this.radius;
       this.vector.invertX();
     }
 
     // Right bound.
-    if (this.x + this.radius >= 1) {
+    if (this.x + this.radius > 1) {
+      this.x = 1 - this.radius;
       this.vector.invertX();
     }
 
     // Top bound.
     if (this.y - this.radius <= 0) {
+      this.y = this.radius;
       this.vector.invertY();
     }
 
     // Bottom bound.
-    if (this.y + this.radius >= 1) {
+    if (this.y + this.radius > 1) {
+      this.y = 1 - this.radius;
       this.vector.invertY();
     }
   };
 
   draw = () =>
-    new Rect({
-      x: this.x - this.radius,
-      y: this.y - this.radius,
-      width: this.radius * 2,
-      height: this.radius * 2,
+    new Circle({
+      x: this.x,
+      y: this.y,
+      radius: this.radius,
       color: [0, 1, 0]
     });
 }

examples/balls/index.ts

@@ -1,25 +1,21 @@
 import { DAC } from '@laser-dac/core';
-import { Simulator } from '@laser-dac/simulator';
-import { EtherDream } from '@laser-dac/ether-dream';
+import { getDevices } from '@laser-dac/device-selector';
 import { Scene, Rect } from '@laser-dac/draw';
 import { Ball } from './Ball';
 
 const NUMBER_OF_BALLS = 4;
 
 (async () => {
   const dac = new DAC();
-  dac.use(new Simulator());
-  if (process.env.DEVICE) {
-    dac.use(new EtherDream());
-  }
+  dac.useAll(await getDevices());
   await dac.start();
 
   const balls: Ball[] = [];
   for (let i = 0; i < NUMBER_OF_BALLS; i++) {
     balls.push(
       new Ball({
-        x: 0.5,
-        y: 0.5,
+        x: Math.random(),
+        y: Math.random(),
         radius: Math.random() / 5 + 0.05
       })
     );
@@ -28,6 +24,8 @@ const NUMBER_OF_BALLS = 4;
   const scene = new Scene({
     resolution: 70
   });
+
+  let lastTime = Date.now();
   function renderFrame() {
     const bounds = new Rect({
       x: 0,
@@ -38,10 +36,13 @@ const NUMBER_OF_BALLS = 4;
     });
     scene.add(bounds);
 
+    const curTime = Date.now();
+    const timeStep = (curTime - lastTime) / 1000;
     balls.forEach(ball => {
-      ball.update();
+      ball.update(timeStep);
       scene.add(ball.draw());
     });
+    lastTime = curTime;
   }
 
   scene.start(renderFrame);

examples/calibration/index.ts

@@ -0,0 +1,54 @@
+import * as express from 'express';
+import { Server as WebSocketServer } from 'ws';
+import * as http from 'http';
+import * as path from 'path';
+import { Renderer } from './renderer';
+
+const PORT = 8321;
+
+const renderer = new Renderer();
+
+const server = http.createServer();
+const app = express();
+app.use(express.static(path.join(__dirname, '/public')));
+const wss = new WebSocketServer({ server });
+
+server.on('request', app);
+server.listen(PORT, function() {
+  console.log(`Started Square Interactive demo on http://localhost:${PORT}`);
+});
+
+wss.on('connection', function connection(ws, req) {
+  const id = req.url!.replace('/?id=', '');
+
+  function send(type: string, data: any) {
+    ws.send(JSON.stringify({ type, data }));
+  }
+
+  function sendSettings() {
+    send("SettingsToClient", renderer.getParams());
+  }
+
+  function sendStats() {
+    send("stats", renderer.getStats());
+  };
+
+  const statsInterval = setInterval(sendStats, 300);
+  sendSettings();
+  sendStats();
+
+  ws.on('message', function incoming(message) {
+    // TODO: should handle illegal JSON so the server can't crash...
+    const payload = JSON.parse(message as string);
+    if (payload.type === 'UPDATEPARAMS') {
+      console.log('Updating Parameters', payload.data);
+      renderer.updateParams(payload.data);
+    } else {
+      console.log('Unknown websocket message', payload);
+    }
+  });
+
+  ws.on('close', function incoming(message) {
+    clearInterval(statsInterval);
+  });
+});

examples/calibration/public/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Laser Calibration</title>
+        <style>
+        </style>
+    </head>
+    <body>
+        <form id="calibration-form">
+          <label>PPS: <input id="pps" type="number" min="7" max="65535" value="" step="100"></label><br>
+          <label>Resolution: <input id="resolution" type="number" value="70"></label><br>
+          <label>Blanking Points: <input id="blankingPoints" type="number" min="0" max="100" value="24"></label><br>
+          <label>Max Wait Points: <input id="maxWaitPoints" type="number" min="0" max="50" value="10"></label><br>
+
+        </form>
+        <pre id="stats-table"></pre>
+        <script src="./index.js" type="module"></script>
+    </body>
+</html>

examples/calibration/public/index.js

@@ -0,0 +1,62 @@
+import WebsocketClient from './websocket.js';
+import uuid from './uuid.js';
+
+const host = window.document.location.host.replace(/:.*/, '');
+const ws = new WebsocketClient();
+
+const ppsInput = document.getElementById('pps');
+const resolutionInput = document.getElementById('resolution');
+const blankingPointsInput = document.getElementById('blankingPoints');
+const maxWaitPointsInput = document.getElementById('maxWaitPoints');
+
+const statsTable = document.getElementById('stats-table');
+
+function sendMessage(msg) {
+  console.log("Sending:", msg.data);
+  ws.send(JSON.stringify(msg));
+}
+
+function sendFormValues() {
+  sendMessage({
+    type: 'UPDATEPARAMS',
+    data: {
+      pps: parseInt(ppsInput.value, 10),
+      resolution: parseInt(resolutionInput.value, 10),
+      blankingPoints: parseInt(blankingPointsInput.value, 10),
+      maxWaitPoints: parseInt(maxWaitPointsInput.value, 10)
+    }
+  });
+}
+
+ws.onopen = function() {
+  console.log('Websocket connection opened.');
+
+  ppsInput.addEventListener('input', sendFormValues);
+  resolutionInput.addEventListener('input', sendFormValues);
+  blankingPointsInput.addEventListener('input', sendFormValues);
+  maxWaitPointsInput.addEventListener('input', sendFormValues);
+};
+
+function displayStats(stats) {
+  statsTable.innerText = JSON.stringify(stats, null, 2);
+}
+
+function updateSettings(settings) {
+  ppsInput.value = settings.pps;
+  resolutionInput.value = settings.resolution;
+  blankingPointsInput.value = settings.blankingPoints;
+  maxWaitPointsInput.value = settings.maxWaitPoints;
+}
+
+ws.onmessage = function(ev) {
+  const message = JSON.parse(ev.data);
+  switch (message.type) {
+    case 'stats': displayStats(message.data); break;
+    case 'SettingsToClient': updateSettings(message.data); break;
+    default: console.error("Unknown message type: " + message.type, message)
+  }
+};
+
+const uniqueId = uuid();
+
+ws.open(`ws://${host}:8321?id=${uniqueId}`);

examples/calibration/public/uuid.js

@@ -0,0 +1,24 @@
+function guid() {
+  return (
+    s4() +
+    s4() +
+    '-' +
+    s4() +
+    '-' +
+    s4() +
+    '-' +
+    s4() +
+    '-' +
+    s4() +
+    s4() +
+    s4()
+  );
+}
+
+function s4() {
+  return Math.floor((1 + Math.random()) * 0x10000)
+    .toString(16)
+    .substring(1);
+}
+
+export default guid;

examples/calibration/public/websocket.js

@@ -0,0 +1,62 @@
+function WebSocketClient() {
+  this.autoReconnectInterval = 1 * 1000; // ms
+}
+WebSocketClient.prototype.open = function(url) {
+  this.url = url;
+  this.instance = new WebSocket(this.url);
+  this.instance.onopen = this.onopen;
+  this.instance.onmessage = event => {
+    this.onmessage(event);
+  };
+  this.instance.onclose = e => {
+    switch (e.code) {
+      case 1000: // CLOSE_NORMAL
+        console.log('WebSocket: closed');
+        break;
+      default:
+        // Abnormal closure
+        this.reconnect(e);
+        break;
+    }
+    this.onclose(e);
+  };
+  this.instance.onerror = e => {
+    switch (e.code) {
+      case 'ECONNREFUSED':
+        this.reconnect(e);
+        break;
+      default:
+        this.onerror(e);
+        break;
+    }
+  };
+};
+WebSocketClient.prototype.send = function(data, option) {
+  try {
+    this.instance.send(data, option);
+  } catch (e) {
+    console.warn('Failed sending websocket msg', e);
+  }
+};
+WebSocketClient.prototype.reconnect = function(e) {
+  console.log(`WebSocketClient: retry in ${this.autoReconnectInterval}ms`, e);
+  var that = this;
+  setTimeout(function() {
+    console.log('WebSocketClient: reconnecting...');
+    that.open(that.url);
+  }, this.autoReconnectInterval);
+};
+WebSocketClient.prototype.onopen = function(e) {
+  console.log('WebSocketClient: open', arguments);
+};
+WebSocketClient.prototype.onmessage = function(e) {
+  console.log('WebSocketClient: message', arguments);
+};
+WebSocketClient.prototype.onerror = function(e) {
+  console.log('WebSocketClient: error', arguments);
+};
+WebSocketClient.prototype.onclose = function(e) {
+  console.log('WebSocketClient: closed', arguments);
+};
+
+export default WebSocketClient;