totalsync-webinterface 0.1.1__py3-none-any.whl

totalsync_webinterface/web/CanvasPlot.js

@@ -0,0 +1,71 @@
+import {WebglPlot, ColorRGBA, WebglLine} from "./webgl-plot/dist/webglplot.esm.js";
+
+// TODO: Input buffer + downsampling for extended periods
+// TODO: Interactivity (pause, zoom, select, time on axis)
+
+export class Plot {
+    constructor(canvasID, numX, cfg) {
+        this.canvasID = canvasID;
+        this.canvas = document.getElementById(`canvas_${canvasID}`);
+        const devicePixelRatio = window.devicePixelRatio || 1;
+        this.canvas.width = this.canvas.clientWidth * devicePixelRatio;
+        this.canvas.height = this.canvas.clientHeight * devicePixelRatio;
+        console.log(`Plot on canvas ${canvasID}: ${this.canvas.width} x ${this.canvas.height}`);
+
+        this.numX = numX;
+        this.cfg = cfg[this.canvasID];
+
+        this.numLines = this.cfg.numLines;
+
+        this.plot = new WebglPlot(this.canvas);
+        this.plot.removeAllLines();
+        this.lines = [];
+
+        let nLine = 0;
+        for (const [partitionID, partition] of Object.entries(this.cfg.partitions)) {
+            for (let i = 0; i < partition.numLines; i++) {
+                const rgb = getColor(document.getElementById(`${partitionID}_${i}`).style.backgroundColor)
+                const color = new ColorRGBA(rgb[0], rgb[1], rgb[2], 1);
+
+                const line = new WebglLine(color, this.numX);
+                line.lineSpaceX(-1, 2 / this.numX); // fill x with numX -1...1 array
+                line.offsetY = 2*(this.numLines-nLine-1)/(this.numLines)-1;
+                line.scaleY = partition.scaleFactors ? partition.scaleFactors[i] : 1;
+                this.plot.addLine(line);
+                this.lines.push(line);
+                nLine++;
+            }
+        }
+
+        // fill with zeros at start
+        let data = new Array(numX).fill(0);
+        this.lines.forEach((line) => {
+            line.shiftAdd(data);
+        });
+        this.plot.gScaleX = 1;
+    }
+
+    update_data(packets) {
+        if (packets == null) return;
+        let nLine = 0;
+        for (const [partitionID, partition] of Object.entries(this.cfg.partitions)) {
+            for (let i=0; i < partition.numLines; i++) {
+                const data = [];
+                packets.forEach((packet) => {
+                    data.push(packet[partition.dataID][i]);
+                });
+                this.lines[nLine].shiftAdd(data);
+                nLine++;
+            }
+        }
+    }
+}
+
+function getColor(rgb) {
+    let sep = rgb.indexOf(",") > -1 ? "," : " ";
+    rgb = rgb.substring(4).split(")")[0].split(sep);
+    let r = parseInt(rgb[0]),
+        g = parseInt(rgb[1]),
+        b = parseInt(rgb[2]);
+    return [r / 255, g / 255, b / 255];
+}

totalsync_webinterface/web/index.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+
+<meta charset="UTF-8">
+
+<html lang="en-us">
+    <script type="text/javascript" src="reconnecting-websocket/reconnecting-websocket.js"></script>
+    <head>
+        <link rel="stylesheet" href="style.css">
+        <title>Data logger interface</title>
+    </head>
+    <body>
+        <div class="container-grid">
+            <div class="chart" id="chart_analog">
+                <canvas id="canvas_analog"></canvas>
+            </div>
+            <div class="label-grid" id="grid_analog" style="background-color:#ccc"></div>
+
+            <div class="videoStreamContainer">
+                <img id="videoStream" src="" alt="No Stream" style="width: 100%; height:100%;object-fit:contain">
+                <button id="videoStreamButton">Reconnect</button>
+            </div>
+
+            <div class="chart" id="chart_digital">
+                <canvas id="canvas_digital"></canvas>
+            </div>
+            <div class="label-grid" id="grid_digital" style="background-color:#ccc"></div>
+
+            </div>
+    </body>
+    <script type="module" src="interface.js"></script>
+</html>

totalsync_webinterface/web/interface.js

@@ -0,0 +1,342 @@
+// noinspection DuplicatedCode
+
+import {Plot} from "./CanvasPlot.js";
+//import {Game} from "./CanvasGame.js";
+import {CameraView} from "./CanvasCamera.js";
+
+
+let countUpdateTextDisplay = 0;
+let updateModulator = 1; // only update every xth time the update function is called
+let allLabels = [];
+let numPoints = 2000;
+const downsamplingFactor = 5;
+const numAnalogIn = 8;
+const numStates = 8;
+const numDigitalIn = 16;
+const numDigitalOut = 16;
+
+const plotConfig = {
+    analog: {
+        numLines: numAnalogIn + numStates,
+        partitions: {
+            analog_input: {
+                dataID: 'analog',
+                numLines: numAnalogIn,
+                hasButton: false,
+                hasIndicator: false,
+                scaleFactors: new Array(numAnalogIn).fill(2 ** -13 * -0.9),
+                units: new Array(numAnalogIn).fill('V'),
+                unitFormat: (x) => `${(x * 2 ** -12 * 3.3).toFixed(2)}`,
+                colorFormat: (i, numLines) => `hsl(${180 / numLines * i}, 80%, 60%)`
+            },
+            states: {
+                dataID: 'states',
+                numLines: numStates,
+                hasButton: false,
+                hasIndicator: false,
+                scaleFactors: new Array(numAnalogIn).fill(2 ** -15 * 0.9), //[2 ** -16.5, 2 ** -10, 2 ** -12, 2 ** -12, 1 / 25, 2 ** -22, 2 ** -22, 2 ** -22],
+                units: ['turn', '', '', '', '', '', '', ''],
+                unitFormat: (x) => `${x >= 0 ? '0' : ''}${(x).toFixed(2)}`,
+                colorFormat: (i, numLines) => `hsl(${180 / numLines * i + 180}, 40%, 50%)`
+            },
+        }
+    },
+    digital: {
+        numLines: numDigitalIn + numDigitalOut,
+        partitions: {
+            digital_input: {
+                dataID: 'digitalIn',
+                numLines: numDigitalIn,
+                hasButton: false,
+                hasIndicator: '#0F0',
+                colorFormat: (i, numLines) => `hsl(${90 / numLines * i}, 80%, 60%)`,
+                scaleFactors: new Array(numDigitalIn).fill(1 / (15))
+            },
+            digital_output: {
+                dataID: 'digitalOut',
+                numLines: numDigitalOut,
+                hasButton: true,
+                hasIndicator: '#F00',
+                colorFormat: (i, numLines) => `hsl(${120 / numLines * i + 120}, 80%, 60%)`,
+                scaleFactors: new Array(numDigitalIn).fill(1 / (15))
+            },
+        }
+    }
+};
+
+let wgl_plots = [];
+//let game_plot = new GamePlot();
+
+let host_url;
+let ws;
+let message_queue = [];
+
+//let game;
+let camera;
+
+// Labels from the pin sheet totalsync was started with, keyed by channel name:
+// {"digital_input_2": "Wheel Encoder A", ...}. The server bakes these into
+// index.html (see web_interface.send_index), so they are here before the first line
+// is drawn; empty when totalsync was started without --pinsheet.
+const channelLabels = window.CHANNEL_LABELS ?? {};
+// Says in the console whether the labels reached the page, so "the names are not
+// showing" can be told apart from "totalsync was started without --pinsheet" without
+// having to read the DOM.
+console.info(`Channel labels from pin sheet: ${Object.keys(channelLabels).length}`);
+
+createUI(channelLabels);
+init();
+
+// Resize Handling, to prevent recalculation spam during event
+let resizeId;
+window.addEventListener("resize", () => {
+    window.clearTimeout(resizeId);
+    resizeId = window.setTimeout(doneResizing, 500);
+});
+
+function processMessages() {
+    // are we buffering too much?
+    if (message_queue.length > 10000) {
+        message_queue = [];
+    }
+    let packets = [];
+    let dsPackets = [];
+    while (message_queue.length >= downsamplingFactor) {
+        packets = message_queue.splice(0, downsamplingFactor);
+        dsPackets.push(packets[packets.length - 1]);
+    }
+
+    if (!dsPackets.length) return;
+    updateTextDisplay(dsPackets[dsPackets.length - 1]);
+    //game.update(dsPackets[dsPackets.length - 1]);
+    wgl_plots.forEach((plot) => {
+        plot.update_data(dsPackets);
+        plot.plot.update();
+    });
+}
+
+// Animation/update_data ticks, maybe lower to 30 fps?
+function newFrame() {
+    processMessages();
+    requestAnimationFrame(newFrame);
+}
+
+requestAnimationFrame(newFrame);
+
+function add_label(grid, channel_name, color, box = null, buttons = null, labels = {}) {
+    const div = document.createElement("div");
+    div.className = "label";
+    div.id = channel_name;
+    div.style.backgroundColor = color;
+    // Hovering the row still tells you which channel it is when a pin sheet label
+    // has replaced the name. It goes on the row, not on the text: .channel_name is
+    // pointer-events:none, and an element that takes no pointer events shows no
+    // tooltip either.
+    div.title = channel_name;
+    const p = document.createElement("div");
+    p.className = "channel_name";
+    p.id = channel_name;
+    // What the pin is wired to, when the pin sheet says so. Only the displayed text
+    // changes: the element ids stay as they are, because the buttons and the value
+    // fields are addressed through them, and so is the channel order in the plot.
+    p.textContent = labels[channel_name] ?? channel_name;
+
+    if (box != null) {
+        div.appendChild(box);
+    }
+    div.appendChild(p);
+    if (buttons != null) {
+        for (const btn of buttons) div.appendChild(btn);
+    }
+    grid.appendChild(div);
+    return div;
+}
+
+function add_spaceholder(grid, channel_name, numLines, numLines_max) {
+    const div = document.createElement("div");
+    div.className = "generalLabel";
+    div.id = channel_name;
+    div.style.backgroundColor = '#000';
+    if (channel_name.includes('analog')){
+        div.style.gridRow = "span " + numLines + " / " + numLines;
+        div.innerHTML = "Analog In";
+    }else if(channel_name.includes('states')){
+        div.style.gridRow = "span " + numLines + " / " + numLines_max;
+        div.innerHTML = "States";
+    }else if(channel_name.includes('digital_input')){
+        div.style.gridRow = "span " + numLines + " / " + numLines;
+        div.innerHTML = "Digital In";
+    }else if(channel_name.includes('digital_output')){
+        div.style.gridRow = "span " + numLines + " / " + numLines_max;
+        div.innerHTML = "Digital Out";
+    }
+    div.style.gridColumn = "2";
+    grid.appendChild(div);
+    return div;
+}
+
+function createUI(labels = {}) {
+    let addholder = true;
+    for (const [canvasID, cfg] of Object.entries(plotConfig)) {
+        let numLines_max = cfg.numLines;
+        const label_grid = document.querySelector(`#grid_${canvasID}`);
+        for (const [partitionID, partition] of Object.entries(cfg.partitions)) {
+            for (let i = 0; i < partition.numLines; i++) {
+                if (!i){
+                    add_spaceholder(label_grid, `${partitionID}_merge`, partition.numLines, numLines_max);
+                }
+                let color = partition.colorFormat(i, partition.numLines);
+                let box;
+                let buttons;
+
+                // unit labels for analog channels and states
+                if (partition.units) {
+                    box = document.createElement('div');
+                    box.id = `${partitionID}_${i}`;
+                    box.className = `unit_field ${partitionID}`
+                }
+
+                // digital indicator box
+                if (partition.hasIndicator) {
+                    box = document.createElement('div');
+                    box.className = "indicator";
+                    box.id = `${partitionID}_${i}`;
+                }
+
+                // toggle buttons for digital output channels
+                if (partition.hasButton) {
+                    const button_labels = {'toggle': 'TOGGLE', 'low': 'OFF', 'high': 'ON'};
+                    buttons = Object.entries(button_labels).map(([btn_type, btn_label]) => {
+                        const btn = document.createElement('button');
+                        let text = document.createTextNode(btn_label);
+                        btn.appendChild(text);
+                        btn.className = "digital_button";
+                        btn.id = `${partitionID}_${btn_type}_${i}`;
+                        btn.onmousedown = btn_clicked;
+                        return btn;
+                    });
+                }
+                add_label(label_grid, `${partitionID}_${i}`, color, box, buttons, labels);
+
+
+            }
+
+        }
+    }
+}
+
+function init() {
+    host_url = window.location.hostname;
+    // One Plot per Canvas
+    for (const canvasID of Object.keys(plotConfig)) {
+        const webgl_plot = new Plot(canvasID, numPoints, plotConfig);
+        wgl_plots.push(webgl_plot);
+    }
+
+    // Start Game
+    //game = new Game();
+    camera = new CameraView("169.254.1.97");
+
+
+    // start accepting messages
+    ws = start_websocket(5678);
+    ws.onmessage = ws_message_receive;
+
+
+    getLabels();
+}
+
+function doneResizing() {
+    //wglp.viewport(0, 0, canv.width, canv.height);
+}
+
+
+function start_websocket(ws_port) {
+    const ws = new ReconnectingWebSocket(`ws://${host_url}:${ws_port.toString()}`);
+    ws.reconnectInterval = 500;
+    ws.maxReconnectInterval = 1000;
+    ws.timeoutInterval = 400;
+    return ws;
+}
+
+function ws_message_receive(event) {
+    if (typeof event.data !== 'string') return;
+
+    let packet;
+    try {
+        packet = JSON.parse(event.data);
+    } catch (e) {
+        console.error(e);
+        console.log(event.data);
+        return;
+    }
+    message_queue.push(packet);
+}
+
+function getLabels(){
+    let j = 0;
+    for (const [canvasID, cfg] of Object.entries(plotConfig)) {
+        for (const [partitionID, partition] of Object.entries(cfg.partitions)) {
+            let labelarray = [];
+            for (let i = 0; i < partition.numLines; i++) {
+                // let x;
+                // try {
+                //     x = packet[partition.dataID][i];
+                // } catch (e) {
+                //     console.error(e);
+                //     console.debug(partition.dataID);
+                //     console.debug(partition)
+                // }
+                if (partition.units) {
+                    const lbl = document.querySelector(`.unit_field#${partitionID}_${i}`);
+                    labelarray.push(lbl);
+                }
+                if (partition.hasIndicator) {
+                    const indicator = document.querySelector(`.indicator#${partitionID}_${i}`);
+                    labelarray.push(indicator);
+                }
+            }
+            allLabels[j] = {partitionId: partitionID, partition: partition, label: labelarray};
+            j += 1;
+        }
+    }
+}
+
+function updateTextDisplay(packet) {
+    countUpdateTextDisplay += 1;
+    if (countUpdateTextDisplay%updateModulator) return;
+    if (!packet) return;
+
+    for (let z = 0; z < allLabels.length; z++) {
+        for (let i = 0; i < allLabels[z].partition.numLines; i++) {
+            let x;
+            try {
+                x = packet[allLabels[z].partition.dataID][i];
+            } catch (e) {
+                console.error(e);
+                console.debug(allLabels[z].partition.dataID);
+                console.debug(allLabels[z].partition)
+            }
+            if (allLabels[z].partition.units) {
+                const lbl = allLabels[z].label[i];
+                let lblText = allLabels[z].partition.unitFormat ? allLabels[z].partition.unitFormat(x) : x.toFixed(2);
+                if (allLabels[z].partition.units) {
+                    lblText = lblText + ' ' + allLabels[z].partition.units[i];
+                }
+                lbl.textContent = lblText;
+            }
+            if (allLabels[z].partition.hasIndicator) {
+                let bg_color = x ? allLabels[z].partition.hasIndicator : '#000'; // hasIndicator is flag and ON color
+                const indicator = allLabels[z].label[i];
+                indicator.style.backgroundColor = bg_color;
+            }
+        }
+    }
+}
+
+function btn_clicked(event) {
+    console.log(event.target.id);
+    if (ws) {
+        ws.send(event.target.id);
+    }
+}

totalsync_webinterface/web/reconnecting-websocket/LICENSE.txt

@@ -0,0 +1,21 @@
+MIT License:
+
+Copyright (c) 2010-2012, Joe Walnes
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

totalsync_webinterface/web/reconnecting-websocket/README.md

@@ -0,0 +1,149 @@
+ReconnectingWebSocket
+=====================
+
+A small JavaScript library that decorates the WebSocket API to provide a WebSocket connection that will automatically reconnect if the connection is dropped.
+
+It is API compatible, so when you have:
+
+```javascript
+var ws = new WebSocket('ws://....');
+```
+
+you can replace with:
+
+```javascript
+var ws = new ReconnectingWebSocket('ws://....');
+```
+
+Minified library with gzip compression is less than 600 bytes.
+
+How reconnections occur
+-----------------------
+
+With the standard `WebSocket` API, the events you receive from the WebSocket instance are typically:
+
+    onopen
+    onmessage
+    onmessage
+    onmessage
+    onclose // At this point the WebSocket instance is dead.
+
+With a `ReconnectingWebSocket`, after an `onclose` event is called it will automatically attempt to reconnect. In addition, a connection is attempted repeatedly (with a small pause) until it succeeds. So the events you receive may look something more like:
+
+    onopen
+    onmessage
+    onmessage
+    onmessage
+    onclose
+    // ReconnectingWebSocket attempts to reconnect
+    onopen
+    onmessage
+    onmessage
+    onmessage
+    onclose
+    // ReconnectingWebSocket attempts to reconnect
+    onopen
+    onmessage
+    onmessage
+    onmessage
+    onclose
+
+This is all handled automatically for you by the library.
+
+## Parameters
+
+```javascript
+var socket = new ReconnectingWebSocket(url, protocols, options);
+```
+
+#### `url`
+- The URL you are connecting to.
+- https://html.spec.whatwg.org/multipage/comms.html#network
+
+#### `protocols`
+- Optional string or array of protocols per the WebSocket spec.
+- https://tools.ietf.org/html/rfc6455
+
+#### `options`
+- Options (see below)
+
+## Options
+
+Options can either be passed as the 3rd parameter upon instantiation or set directly on the object after instantiation:
+
+```javascript
+var socket = new ReconnectingWebSocket(url, null, {debug: true, reconnectInterval: 3000});
+```
+
+or
+
+```javascript
+var socket = new ReconnectingWebSocket(url);
+socket.debug = true;
+socket.timeoutInterval = 5400;
+```
+
+#### `debug`
+- Whether this instance should log debug messages or not. Debug messages are printed to `console.debug()`.
+- Accepts `true` or `false`
+- Default value: `false`
+
+#### `automaticOpen`
+- Whether or not the websocket should attempt to connect immediately upon instantiation. The socket can be manually opened or closed at any time using ws.open() and ws.close().
+- Accepts `true` or `false`
+- Default value: `true`
+
+#### `reconnectInterval`
+- The number of milliseconds to delay before attempting to reconnect.
+- Accepts `integer`
+- Default: `1000`
+
+#### `maxReconnectInterval`
+- The maximum number of milliseconds to delay a reconnection attempt.
+- Accepts `integer`
+- Default: `30000`
+
+####`reconnectDecay`
+- The rate of increase of the reconnect delay. Allows reconnect attempts to back off when problems persist.
+- Accepts `integer` or `float`
+- Default: `1.5`
+
+#### `timeoutInterval`
+- The maximum time in milliseconds to wait for a connection to succeed before closing and retrying.
+- Accepts `integer`
+- Default: `2000`
+
+#### `maxReconnectAttempts`
+- The maximum number of reconnection attempts that will be made before giving up. If null, reconnection attempts will be continue to be made forever.
+- Accepts `integer` or `null`.
+- Default: `null`
+
+#### `binaryType`
+- The binary type is required by some applications.
+- Accepts strings `'blob'` or `'arraybuffer'`.
+- Default: `'blob'`
+
+---
+
+## Methods
+
+#### `ws.open()`
+- Open the Reconnecting Websocket
+
+#### `ws.close(code, reason)`
+- Closes the WebSocket connection or connection attempt, if any. If the connection is already CLOSED, this method does nothing.
+- `code` is optional the closing code (default value 1000). [https://tools.ietf.org/html/rfc6455#section-7.4.1](https://tools.ietf.org/html/rfc6455#section-7.4.1)
+- `reason` is the optional reason that the socket is being closed. [https://tools.ietf.org/html/rfc6455#section-7.1.6](https://tools.ietf.org/html/rfc6455#section-7.1.6)
+
+#### `ws.refresh()`
+- Refresh the connection if still open (close and then re-open it).
+
+#### `ws.send(data)`
+- Transmits data to the server over the WebSocket connection.
+- Accepts @param data a text string, ArrayBuffer or Blob
+
+Like this? Check out [websocketd](https://github.com/joewalnes/websocketd) for the simplest way to create WebSocket backends from any programming language.
+
+[Follow @joewalnes](https://twitter.com/joewalnes)
+
+[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/joewalnes/reconnecting-websocket/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

totalsync_webinterface/web/reconnecting-websocket/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "ReconnectingWebSocket",
+  "version": "1.0.1",
+  "description": "A small JavaScript library that decorates the WebSocket API to provide a WebSocket connection that will automatically reconnect if the connection is dropped.",
+  "main": "reconnecting-websocket.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/joewalnes/reconnecting-websocket.git"
+  },
+  "author": "Joe Walnes",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/joewalnes/reconnecting-websocket/issues"
+  },
+  "homepage": "https://github.com/joewalnes/reconnecting-websocket"
+}