Initial commit

2023-03-13 14:50:49 +01:00
commit 0c0d82db42
9 changed files with 298 additions and 0 deletions
--- a/static/index.html
+++ b/static/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Document</title>
+
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/luxon@1.27.0"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@1.0.0"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@2.0.0"></script>
+
+    <script defer src="script.js"></script>
+  </head>
+  <style>
+    table {
+      border-collapse: collapse;
+    }
+    td,
+    tr {
+      border: 1px solid black;
+      padding: 5px;
+    }
+
+    .row {
+      display: flex;
+    }
+  </style>
+  <body>
+    <span id="data"></span>
+    <br />
+    <label for="target">
+      Target
+      <input type="range" min="0" max="100" id="target" />
+    </label>
+    <div class="row">
+      <canvas id="chart"></canvas>
+
+      <table id="table">
+        <thead>
+          <th>Time</th>
+          <th>Value</th>
+        </thead>
+        <tbody></tbody>
+      </table>
+    </div>
+  </body>
+</html>
--- a/static/script.js
+++ b/static/script.js
@@ -0,0 +1,82 @@
+const dataNode = document.getElementById('data');
+const ctx = document.getElementById('chart');
+const table = document.getElementById('table');
+const target = document.getElementById('target');
+
+const socket = new WebSocket('ws://127.0.0.1:1234');
+
+socket.addEventListener('open', (e) => {
+  console.log('connection opened');
+});
+
+socket.addEventListener('close', (e) => {
+  console.log('connection closed');
+});
+
+Chart.defaults.set('plugins.streaming', {
+  duration: 20000,
+});
+
+const data = [];
+const labels = [];
+const targets = [];
+
+const chart = new Chart(ctx, {
+  type: 'line',
+  data: {
+    labels,
+    datasets: [
+      {
+        label: 'Value',
+        data: data,
+        borderWidth: 1,
+      },
+      {
+        label: 'Target',
+        data: targets,
+        borderWidth: 1,
+      },
+    ],
+  },
+  options: {
+    animations: false,
+    scales: {
+      y: {
+        beginAtZero: true,
+      },
+    },
+  },
+});
+
+chart.resize(1300, 600);
+
+function updateTable(data) {
+  if (table.rows.length == 20) {
+    table.rows[table.rows.length - 1].remove();
+  }
+
+  const tr = table.insertRow(1);
+  tr.innerHTML = `
+    <td>${new Date().toLocaleString()}</td>
+    <td>${data}</td>
+  `;
+}
+
+socket.addEventListener('message', (e) => {
+  const value = Math.round(parseInt(e.data) / 2.83) / 100;
+
+  dataNode.innerText = value;
+  data.push(value);
+  labels.push(new Date().toLocaleString());
+  if (data.length > 100) {
+    data.shift();
+    labels.shift();
+    targets.shift();
+  }
+
+  chart.update();
+
+  updateTable(value);
+
+  targets.push(target.value);
+});