Bump fast-uri from 3.1.2 to 3.1.4

Bumps [fast-uri](https://github.com/fastify/fast-uri) from 3.1.2 to 3.1.4.
- [Release notes](https://github.com/fastify/fast-uri/releases)
- [Commits](https://github.com/fastify/fast-uri/compare/v3.1.2...v3.1.4)

---
updated-dependencies:
- dependency-name: fast-uri
  dependency-version: 3.1.4
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

.github/workflows/release.yaml

@@ -9,25 +9,25 @@ jobs:
   build-linux:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
+      - uses: actions/checkout@v6
+      - uses: actions/setup-node@v6
         with:
-          node-version: 20
+          node-version-file: .nvmrc
           cache: 'npm'
       - run: npm ci
       - run: npm run release
   build-windows:
     runs-on: windows-latest
     steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
+      - uses: actions/checkout@v6
+      - uses: actions/setup-node@v6
         with:
-          node-version: 20
+          node-version-file: .nvmrc
           cache: 'npm'
       - run: npm ci
       - run: npm run release
   build-macos:
-    runs-on: macos-13
+    runs-on: macos-14
     env:
       CSC_LINK: ${{ secrets.MACOS_CSC_LINK }}
       CSC_KEY_PASSWORD: ${{ secrets.MACOS_CSC_KEY_PASSWORD }}
@@ -35,10 +35,10 @@ jobs:
       APPLE_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
       APPLE_APP_SPECIFIC_PASSWORD: ${{ secrets.APPLE_ID_PASSWORD }}
     steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
+      - uses: actions/checkout@v6
+      - uses: actions/setup-node@v6
         with:
-          node-version: 20
+          node-version-file: .nvmrc
           cache: 'npm'
       - run: npm ci
       - run: npm run release

.nvmrc

@@ -1 +1 @@
-v20.12.1
+v24.11.1

README.md

@@ -25,4 +25,4 @@ A dashboard for everything in your show.
 - Shure ULXD Wireless
 - DiGico SD Consoles
 - PosiStageNet
-- Livestream Studio (soon)
+- Livestream Studio

main.js

@@ -40,6 +40,7 @@ const menuTemplate = [
       { role: 'togglefullscreen' },
       {
         label: 'Toggle Sidebar',
+        accelerator: 'CommandOrControl+B',
         id: 'toggleSidebar',
         click(menuItem, window, event) {
           mainWindow.webContents.send('toggleSidebar');
@@ -151,9 +152,7 @@ const menuTemplate = [
 const windowMac = {
   width: 1500,
   height: 900,
-  titleBarStyle: 'customButtonsOnHover',
   transparent: false,
-  frame: false,
   show: false,
   vibrancy: 'window',
   visualEffectState: 'followWindow',

package.json

@@ -1,7 +1,7 @@
 {
   "name": "cue-view",
   "productName": "Cue View",
-  "version": "1.2.1",
+  "version": "1.4.0",
   "description": "A dashboard for everything in your show",
   "main": "main.js",
   "scripts": {
@@ -19,25 +19,27 @@
   "homepage": "https://github.com/stagehacks/Cue-View",
   "repository": "https://github.com/stagehacks/Cue-View",
   "devDependencies": {
-    "@electron/notarize": "^2.5.0",
-    "electron": "^33.0.2",
-    "electron-builder": "^25.1.8",
-    "eslint": "^8.57.0",
-    "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-import": "^2.31.0",
-    "prettier": "^3.3.3"
+    "electron": "40.10.0",
+    "electron-builder": "26.15.3",
+    "eslint": "8.57.0",
+    "eslint-config-airbnb-base": "15.0.0",
+    "eslint-config-prettier": "10.1.8",
+    "eslint-plugin-import": "2.32.0",
+    "prettier": "3.8.4"
   },
   "dependencies": {
-    "@jwetzell/posistagenet": "^1.1.0",
-    "atem-connection": "^3.5.0",
-    "bonjour": "^3.5.0",
-    "electron-updater": "^6.3.9",
-    "lodash": "^4.17.21",
-    "md5": "^2.3.0",
-    "netmask": "^2.0.2",
-    "osc": "^2.4.5",
-    "uuid": "^11.0.1"
+    "@jwetzell/posistagenet": "2.1.1",
+    "atem-connection": "3.9.0",
+    "bonjour": "3.5.1",
+    "electron-updater": "6.8.9",
+    "html-to-vdom": "0.7.0",
+    "ip": "2.0.1",
+    "lodash": "4.18.1",
+    "md5": "2.3.0",
+    "netmask": "2.1.1",
+    "osc": "2.4.5",
+    "uuid": "14.0.0",
+    "virtual-dom": "2.1.1"
   },
   "build": {
     "appId": "com.stagehacks.cueview",

plugins/dpa/info.html

@@ -0,0 +1,8 @@
+<h2>DPA N-Series Digital Wireless</h2>
+<p>Connects to a DPA N-Series wireless receiver (e.g. N-DR1) via OSC over TCP.</p>
+<ul>
+  <li>Default TCP port: <strong>1993</strong> (configurable on device)</li>
+  <li>Shows both channels with audio level, RF strength (A/B), battery status and active warnings</li>
+  <li>Audio level, RF strength and battery data are read from the device via OSC subscriptions and <code>/settings/retrieve</code></li>
+</ul>
+<p>Enable TCP control on the device under <em>Advanced → LAN</em>.</p>

plugins/dpa/main.js

@@ -0,0 +1,155 @@
+const osc = require('osc');
+
+exports.config = {
+  defaultName: 'DPA N-Series',
+  connectionType: 'osc-tcp',
+  defaultPort: 1993,
+  mayChangePorts: true,
+  heartbeatInterval: 5000,
+  heartbeatTimeout: 10000,
+  searchOptions: {
+    type: 'TCPport',
+    // OSC /model message with SLIP framing: END + "/model\0\0" + ",\0\0\0" + END
+    searchBuffer: Buffer.from([
+      0xc0, 0x2f, 0x6d, 0x6f, 0x64, 0x65, 0x6c, 0x00, 0x00, 0x2c, 0x00, 0x00, 0x00, 0xc0,
+    ]),
+    testPort: 1993,
+    validateResponse(msg) {
+      const str = msg.toString();
+      return str.includes('/model') || str.includes('N-DR');
+    },
+  },
+};
+
+function makeChannel() {
+  return {
+    name: '–',
+    audioLevel: -80,
+    txActive: false,
+    txName: '',
+    battCapacity: null,
+    battTimeMin: null,
+    battHealth: null,
+    rfA: -130,
+    rfB: -130,
+    warnings: {},
+  };
+}
+
+function subscribeToAddress(device, address, intervalMs) {
+  const msgBlob = osc.writePacket({ address, args: [] });
+  device.send('/subscribe', [
+    { type: 'i', value: intervalMs },
+    { type: 'i', value: 0 },
+    { type: 'b', value: msgBlob },
+  ]);
+}
+
+exports.ready = function ready(_device) {
+  const device = _device;
+  device.data.model = '';
+  device.data.channels = [null, makeChannel(), makeChannel()];
+  device.data.warnings = {};
+
+  device.send('/settings/retrieve');
+  device.send('/model');
+
+  subscribeToAddress(device, '/ch/1/audiolevel', 100);
+  subscribeToAddress(device, '/ch/2/audiolevel', 100);
+  subscribeToAddress(device, '/advanced/1/antenna/rfstrength', 200);
+  subscribeToAddress(device, '/advanced/2/antenna/rfstrength', 200);
+  subscribeToAddress(device, '/ch/1/tx/active', 500);
+  subscribeToAddress(device, '/ch/2/tx/active', 500);
+  subscribeToAddress(device, '/ch/1/tx/name', 5000);
+  subscribeToAddress(device, '/ch/2/tx/name', 5000);
+  subscribeToAddress(device, '/ch/1/tx/batterystatus', 1000);
+  subscribeToAddress(device, '/ch/2/tx/batterystatus', 1000);
+};
+
+exports.data = function data(_device, message) {
+  const device = _device;
+  this.deviceInfoUpdate(device, 'status', 'ok');
+
+  const { address, args } = message;
+  if (!address) return;
+
+  const parts = address.split('/').filter(Boolean);
+
+  if (address === '/model') {
+    if (args && args[0]) {
+      device.data.model = args[0];
+      this.deviceInfoUpdate(device, 'defaultName', args[0]);
+    }
+  } else if (address === '/heartbeat') {
+    device.draw();
+  } else if (parts[0] === 'ch' && parts.length >= 3) {
+    const chNum = parseInt(parts[1], 10);
+    if (chNum < 1 || chNum > 2) return;
+    const ch = device.data.channels[chNum];
+    const sub = parts.slice(2).join('/');
+
+    if (sub === 'name') {
+      ch.name = (args && args[0]) ? args[0] : '–';
+      device.draw();
+    } else if (sub === 'audiolevel') {
+      ch.audioLevel = (args && args[0] !== undefined) ? args[0] / 10 : -80;
+      device.update('meterUpdate', { channels: device.data.channels });
+    } else if (sub === 'tx/active') {
+      ch.txActive = args && args[0] === 1;
+      device.draw();
+    } else if (sub === 'tx/name') {
+      ch.txName = (args && args[0]) ? args[0] : '';
+      device.draw();
+    } else if (sub === 'tx/batterystatus') {
+      if (args) {
+        ch.battCapacity = args[0] !== undefined ? args[0] : null;
+        ch.battTimeMin = args[1] !== undefined ? args[1] : null;
+        ch.battHealth = args[2] !== undefined ? args[2] : null;
+      }
+      device.draw();
+    }
+  } else if (parts[0] === 'advanced' && parts[2] === 'antenna' && parts[3] === 'rfstrength') {
+    const chNum = parseInt(parts[1], 10);
+    if (chNum < 1 || chNum > 2) return;
+    const ch = device.data.channels[chNum];
+    ch.rfA = (args && args[1] !== undefined) ? args[1] / 10 : -130;
+    ch.rfB = (args && args[2] !== undefined) ? args[2] / 10 : -130;
+    device.update('meterUpdate', { channels: device.data.channels });
+  } else if (parts[0] === 'warning') {
+    if (parts.length === 2) {
+      device.data.warnings[parts[1]] = args && args[0] === 1;
+      device.draw();
+    } else if (parts.length === 3) {
+      const chNum = parseInt(parts[1], 10);
+      if (chNum >= 1 && chNum <= 2) {
+        device.data.channels[chNum].warnings[parts[2]] = args && args[0] === 1;
+        device.draw();
+      }
+    }
+  }
+};
+
+exports.update = function update(device, doc, updateType, data) {
+  for (let i = 1; i <= 2; i++) {
+    const ch = data.channels[i];
+
+    // Audio level bar: -126 dBFS = empty, 0 dBFS = full
+    const audioOverlay = Math.max(0, Math.min(90, (1 - (ch.audioLevel + 126) / 126) * 90));
+    const $audio = doc.getElementById(`ch-${i}-audio`);
+    if ($audio) $audio.style.height = `${audioOverlay}px`;
+    const $audioText = doc.getElementById(`ch-${i}-audio-text`);
+    if ($audioText) $audioText.textContent = `${ch.audioLevel}`;
+
+    // RF bars: -130 to -50 dBm range (80 dBm span)
+    const rfANorm = Math.max(0, Math.min(1, (ch.rfA + 130) / 80));
+    const rfBNorm = Math.max(0, Math.min(1, (ch.rfB + 130) / 80));
+    const $rfA = doc.getElementById(`ch-${i}-rfa`);
+    if ($rfA) $rfA.style.height = `${(1 - rfANorm) * 90}px`;
+    const $rfB = doc.getElementById(`ch-${i}-rfb`);
+    if ($rfB) $rfB.style.height = `${(1 - rfBNorm) * 90}px`;
+  }
+};
+
+exports.heartbeat = function heartbeat(device) {
+  device.send('/settings/retrieve');
+};

plugins/dpa/styles.css

@@ -0,0 +1,180 @@
+/* DPA color palette: #202020 bg, #333 surface, #5b5b5b secondary,
+   #a0a0a0 border/muted text, #ddd primary text, #cedc00 brand accent */
+
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 300;
+  src: url(../../src/assets/font/Lato-Light.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 400;
+  src: url(../../src/assets/font/Lato-Regular.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 700;
+  src: url(../../src/assets/font/Lato-Bold.ttf) format('truetype');
+}
+
+table.channel {
+  width: 140px;
+  table-layout: fixed;
+  height: 340px;
+  background-color: #333;
+  border: 1px solid #a0a0a0;
+  border-collapse: collapse;
+  color: #ddd;
+  font-family: Lato, Roboto, sans-serif;
+  text-align: center;
+  float: left;
+  margin: 2px;
+  margin-bottom: 20px;
+}
+
+table td {
+  border: 1px solid #5b5b5b;
+  vertical-align: top;
+}
+
+.chan-name {
+  color: #cedc00;
+  font-size: 18px;
+  font-weight: bold;
+  padding: 2px 4px;
+}
+
+.tx-row {
+  font-size: 11px;
+  padding: 2px 4px;
+  color: #a0a0a0;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.tx-dot {
+  color: #5b5b5b;
+}
+
+.tx-dot.active {
+  color: #cedc00;
+}
+
+.bar-wrapper {
+  width: 20px;
+  height: 90px;
+  margin: 4px auto;
+  border-radius: 4px;
+  outline: #202020 2px solid;
+  outline-offset: -1px;
+  overflow: hidden;
+}
+
+.bar-value {
+  font-variant-numeric: tabular-nums;
+  display: block;
+}
+
+/* RF bars: DPA blue */
+.bar-wrapper.rf-color {
+  background: linear-gradient(0deg, #1a2a80, #485CE5 40%, #485CE5 80%, #6b7fff);
+}
+
+/* Audio bars: subtle green to accent */
+.bar-wrapper.audio-color {
+  background: linear-gradient(0deg, #6b7a00, #a8b400 30%, #cedc00 100%);
+}
+
+.bar {
+  width: 100%;
+  background-color: #202020;
+  outline: rgba(255, 255, 255, 0.05) 1px solid;
+}
+
+.batt-wrapper {
+  width: 104px;
+  height: 35px;
+  margin: 8px auto;
+  border: 2px solid #5b5b5b;
+  border-radius: 4px;
+  padding: 2px;
+  position: relative;
+  box-sizing: content-box;
+}
+
+.batt-wrapper.low {
+  border-color: red;
+}
+
+.batt-knob {
+  background-color: #5b5b5b;
+  position: absolute;
+  right: -5px;
+  top: 10px;
+  width: 5px;
+  height: 16px;
+  border-radius: 2px;
+}
+
+.batt-knob.low {
+  background-color: red;
+}
+
+.batt-bar {
+  height: 100%;
+  background: linear-gradient(90deg, #a8b400, #cedc00);
+  border-radius: 2px;
+  font-size: 10px;
+  color: #202020;
+  font-weight: bold;
+  white-space: nowrap;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  padding-left: 3px;
+  box-sizing: border-box;
+}
+
+.batt-wrapper.low .batt-bar {
+  background: red;
+  color: #fff;
+}
+
+.warnings {
+  padding: 2px 3px;
+  height: 32px;
+}
+
+.warn {
+  display: inline-block;
+  font-size: 12px;
+  font-weight: bold;
+  border-radius: 2px;
+  padding: 1px 3px;
+  margin: 1px;
+}
+
+.warn.alert {
+  background-color: red;
+  color: #fff;
+}
+
+.warn.warning {
+  background-color: #c07000;
+  color: #fff;
+}
+
+.warn.notify {
+  background-color: #5b5b5b;
+  color: #ddd;
+}
+
+.device-warnings {
+  clear: both;
+  padding: 4px;
+  margin-top: 4px;
+  font-family: Lato, Roboto, sans-serif;
+}

plugins/dpa/template.ejs

@@ -0,0 +1,85 @@
+<header>
+  <h1><%= listName %></h1>
+  <h2><%= data.model %></h2>
+</header>
+
+<% for (var i = 1; i <= 2; i++) { %>
+<% var ch = data.channels[i]; %>
+<table class="channel">
+  <tr>
+    <td colspan="3"><small>CH <%= i %></small></td>
+  </tr>
+  <tr>
+    <td colspan="3" class="chan-name"><%= ch.name %></td>
+  </tr>
+  <tr>
+    <td colspan="3" class="tx-row">
+      <% if (ch.txActive) { %>
+        <span class="tx-dot active">&#9679;</span> <%= ch.txName || 'TX' %>
+      <% } else { %>
+        <span class="tx-dot">&#9675;</span> <small>No TX</small>
+      <% } %>
+    </td>
+  </tr>
+  <tr>
+    <td style="width:40px">
+      <small>A</small>
+      <div class="bar-wrapper rf-color">
+        <div class="bar" id="ch-<%= i %>-rfa" style="height:<%= Math.round(Math.max(0, Math.min(90, (1 - Math.max(0, Math.min(1, (ch.rfA + 130) / 80))) * 90))) %>px"></div>
+      </div>
+      <small class="bar-value"><%= Math.round(ch.rfA) %></small>
+    </td>
+    <td style="width:40px">
+      <small>B</small>
+      <div class="bar-wrapper rf-color">
+        <div class="bar" id="ch-<%= i %>-rfb" style="height:<%= Math.round(Math.max(0, Math.min(90, (1 - Math.max(0, Math.min(1, (ch.rfB + 130) / 80))) * 90))) %>px"></div>
+      </div>
+      <small class="bar-value"><%= Math.round(ch.rfB) %></small>
+    </td>
+    <td style="width:60px">
+      <small>audio</small>
+      <div class="bar-wrapper audio-color">
+        <div class="bar" id="ch-<%= i %>-audio" style="height:<%= Math.round(Math.max(0, Math.min(90, (1 - (ch.audioLevel + 126) / 126) * 90))) %>px"></div>
+      </div>
+      <small><span id="ch-<%= i %>-audio-text" class="bar-value"><%= ch.audioLevel %></span><br /><small>dBFS</small></small>
+    </td>
+  </tr>
+  <tr>
+    <td colspan="3">
+      <% if (ch.battCapacity !== null) { %>
+        <div class="batt-wrapper<%= ch.battCapacity < 20 ? ' low' : '' %>">
+          <div class="batt-bar" style="width:<%= ch.battCapacity %>%">
+            <% if (ch.battTimeMin !== null && ch.battTimeMin < 65535) { %>
+              <%= Math.floor(ch.battTimeMin / 60) %>:<%= String(ch.battTimeMin % 60).padStart(2, '0') %>
+            <% } else { %>
+              <%= ch.battCapacity %>%
+            <% } %>
+          </div>
+          <div class="batt-knob<%= ch.battCapacity < 20 ? ' low' : '' %>"></div>
+        </div>
+      <% } else { %>
+        <div class="batt-wrapper"><div class="batt-knob"></div></div>
+      <% } %>
+    </td>
+  </tr>
+  <tr>
+    <td colspan="3" class="warnings">
+      <% if (ch.warnings.txdropout) { %><span class="warn alert">DROPOUT</span><% } %>
+      <% if (ch.warnings.lowbattery) { %><span class="warn warning">LOW BATT</span><% } %>
+      <% if (ch.warnings.interference) { %><span class="warn warning">INTERF</span><% } %>
+      <% if (ch.warnings.afoverload) { %><span class="warn warning">OVERLOAD</span><% } %>
+      <% if (ch.warnings.antennashorted) { %><span class="warn warning">ANT SHORT</span><% } %>
+      <% if (ch.warnings.txsyncmismatch) { %><span class="warn notify">SYNC MISM</span><% } %>
+    </td>
+  </tr>
+</table>
+<% } %>
+
+<% if (data.warnings.hightemp || data.warnings.criticaltemp || data.warnings.rfoverload || data.warnings.fan) { %>
+<div class="device-warnings">
+  <% if (data.warnings.criticaltemp) { %><span class="warn alert">CRIT TEMP</span><% } %>
+  <% if (data.warnings.hightemp) { %><span class="warn warning">HIGH TEMP</span><% } %>
+  <% if (data.warnings.rfoverload) { %><span class="warn warning">RF OVERLOAD</span><% } %>
+  <% if (data.warnings.fan) { %><span class="warn warning">FAN</span><% } %>
+</div>
+<% } %>

plugins/eos/cue.ejs

@@ -11,7 +11,9 @@
       </tr>
 	  <% } %> 
 
-  	<% if(isActive){ %>
+  	<% if(isRunning){ %>
+  		<tr class="running-cue scroll-position">
+	  <% }else if(isComplete || isActive){ %>
   		<tr class="active-cue scroll-position">
 	  <% }else{ %>
       </tr>
@@ -53,7 +55,8 @@
       <td class="black hide-medium">
         <%= part.prettyDuration(part.beamTimeDuration, true) %>
       </td>
-      <td class="hide-small"><%= part.prettyDuration(part.duration) %></td>
+      <% var durValue = (isRunning && remainingDuration !== null && remainingDuration !== undefined) ? remainingDuration : part.duration %>
+      <td class="hide-small"><%= part.prettyDuration(durValue) %></td>
 
     <% }else{ %>
       <td class="black" colspan="2"></td>
@@ -63,13 +66,23 @@
       <td class="hide-small"></td>
     <% } %>
 
-    <td class="black hide-small"><%= part.mark %></td>
-    <td class="black hide-small"><%= part.block %></td>
-    <td class="black hide-small"><%= part.assert %></td>
-    <td class="black hide-small">
-      <%= (part.follow>=0)? "F"+part.prettyDuration(part.follow) : "" %> 
-      <%= (part.hang>=0)? "H"+part.prettyDuration(part.hang) : "" %>
-    </td>
+	    <td class="black hide-small"><%= part.mark %></td>
+	    <td class="black hide-small"><%= part.block %></td>
+	    <td class="black hide-small"><%= part.assert %></td>
+	    <% var followDisplay = (part.follow>=0)? "F"+part.prettyDuration(part.follow) : "" %>
+	    <% var hangDisplay = (part.hang>=0)? "H"+part.prettyDuration(part.hang) : "" %>
+	    <% var followHangDisplay = followDisplay + hangDisplay %>
+	    <% var isFollowHangOnlyRunning = (followHangRemainingDuration !== null && followHangRemainingDuration !== undefined && followHangRemainingDuration > 0 && !isRunning) %>
+	    <% if(followHangRemainingDuration !== null && followHangRemainingDuration !== undefined && followHangRemainingDuration > 0){ %>
+	      <% if(part.follow >= 0){ %>
+	        <% followHangDisplay = "F"+part.prettyDuration(followHangRemainingDuration) %>
+	      <% }else if(part.hang >= 0 && !isRunning){ %>
+	        <% followHangDisplay = "H"+part.prettyDuration(followHangRemainingDuration) %>
+	      <% } %>
+	    <% } %>
+	    <td class="black hide-small <%= isFollowHangOnlyRunning ? 'running-follow-hang' : '' %>">
+	      <%= followHangDisplay %>
+	    </td>
     <td class="black" style="text-align: left">
       <%= (partNumber==0 ? "": "&nbsp;&nbsp;&nbsp;") %> 
       <%= part.label %>

plugins/eos/main.js

@@ -27,6 +27,9 @@ exports.config = {
       action(_device) {
         const device = _device;
         device.data.cueListFilter = device.fields.cueListFilter;
+        if (device.data.EOS) {
+          subscribeToCueList(device);
+        }
         device.draw();
       },
     },
@@ -40,10 +43,14 @@ exports.ready = function ready(_device) {
     cue: _.template(fs.readFileSync(path.join(__dirname, `cue.ejs`))),
   };
   device.data.cueListFilter = device.fields.cueListFilter;
+  device.data.EOS.progressCueList = resolveConfiguredCueList(device);
 
   device.send('/eos/get/cuelist/count');
   device.send('/eos/get/version');
   device.send('/eos/subscribe', [{ type: 'i', value: 1 }]);
+
+  // subscribe to the selected cue list specifically
+  subscribeToCueList(device);
 };
 
 exports.data = function data(_device, osc) {
@@ -80,6 +87,7 @@ exports.data = function data(_device, osc) {
 
     device.update('cueData', {
       cue: device.data.EOS.cueLists[addressParts[4]][addressParts[5]],
+      cueListNumber: addressParts[4],
       cueNumber: addressParts[5],
       uid: osc.args[1],
     });
@@ -92,9 +100,88 @@ exports.data = function data(_device, osc) {
     if (osc.args.length === 3) {
       device.data.EOS.cueLists[addressParts[4]][addressParts[5]][0].extLinks = osc.args[2];
     }
+  } else if (match(addressParts, ['eos', 'out', 'cuelist', '8001', '1'])) {
+    const cueListNumber = resolveConfiguredCueList(device);
+    const cueNumber = cueNumberValue(osc.args[1]);
+    const totalMs = nonNegativeInt(osc.args[6]);
+    const cueRemainingMs = nonNegativeInt(osc.args[7]);
+    const previousCueNumber = cueNumberValue(device.data.EOS.activeCueByList[cueListNumber]);
+
+    if (cueNumber !== undefined) {
+      device.data.EOS.activeCueByList[cueListNumber] = cueNumber;
+      device.data.EOS.activeCue = cueNumber;
+    }
+
+    if (cueNumber !== undefined || cueRemainingMs !== null || totalMs !== null) {
+      const progress = device.data.EOS.progressByList[cueListNumber] || {};
+      if (cueNumber !== undefined) {
+        progress.cueNumber = cueNumber;
+      }
+      if (cueRemainingMs !== null) {
+        progress.cueRemainingMs = cueRemainingMs;
+      }
+      if (totalMs !== null) {
+        progress.totalMs = totalMs;
+      }
+      device.data.EOS.progressByList[cueListNumber] = progress;
+    }
+
+    if (previousCueNumber !== undefined && previousCueNumber !== cueNumber) {
+      device.update('cueState', {
+        cueListNumber,
+        cueNumber: previousCueNumber,
+      });
+    }
+
+    if (cueNumber !== undefined) {
+      device.update('cueState', {
+        cueListNumber,
+        cueNumber,
+      });
+    }
+  } else if (match(addressParts, ['eos', 'out', 'cuelist', '8001'])) {
+    const cueListNumber = resolveConfiguredCueList(device);
+    const followHangRemainingMs = nonNegativeInt(osc.args[2]);
+    if (followHangRemainingMs !== null) {
+      const progress = device.data.EOS.progressByList[cueListNumber] || {};
+      const activeCueForList = cueNumberValue(device.data.EOS.activeCueByList[cueListNumber]);
+      if (progress.cueNumber === undefined && activeCueForList !== undefined) {
+        progress.cueNumber = activeCueForList;
+      }
+      progress.followHangRemainingMs = followHangRemainingMs;
+      device.data.EOS.progressByList[cueListNumber] = progress;
+      if (progress.cueNumber !== undefined) {
+        device.update('cueState', {
+          cueListNumber,
+          cueNumber: progress.cueNumber,
+        });
+      }
+    }
   } else if (match(addressParts, ['eos', 'out', 'event', 'cue', '*', '*', 'fire'])) {
-    device.data.EOS.activeCue = addressParts[5];
-    device.draw();
+    const cueListNumber = cueNumberValue(addressParts[4]);
+    const cueNumber = cueNumberValue(addressParts[5]);
+    const previousCueNumber = cueNumberValue(device.data.EOS.activeCueByList[cueListNumber]);
+
+    device.data.EOS.activeCue = cueNumber;
+    device.data.EOS.activeCueByList[cueListNumber] = cueNumber;
+    device.data.EOS.progressByList[cueListNumber] = {
+      cueNumber,
+      cueRemainingMs: null,
+      followHangRemainingMs: null,
+      totalMs: null,
+    };
+
+    if (previousCueNumber !== undefined && previousCueNumber !== cueNumber) {
+      device.update('cueState', {
+        cueListNumber,
+        cueNumber: previousCueNumber,
+      });
+    }
+    device.update('cueState', {
+      cueListNumber,
+      cueNumber,
+    });
+
     const cues = device.data.EOS.cueLists[addressParts[4]][addressParts[5]];
     if (cues) {
       device.update('activeCue', {
@@ -115,18 +202,48 @@ exports.data = function data(_device, osc) {
 exports.update = function update(device, doc, updateType, data) {
   if (updateType === 'cueData') {
     const $elem = doc.getElementById(data.uid);
+    const cueState = cueRenderState(device, data.cueListNumber, data.cueNumber);
     if ($elem) {
       $elem.outerHTML = device.templates.cue({
         q: data.cue,
         cueNumber: data.cueNumber,
-        isActive: false,
+        isActive: cueState.isComplete,
+        isComplete: cueState.isComplete,
+        isRunning: cueState.isRunning,
+        remainingDuration: cueState.remainingDuration,
+        followHangRemainingDuration: cueState.followHangRemainingDuration,
+      });
+    } else {
+      device.draw();
+    }
+  } else if (updateType === 'cueState') {
+    const cueListNumber = cueNumberValue(data.cueListNumber);
+    const cueNumber = cueNumberValue(data.cueNumber);
+    const cues = device.data.EOS.cueLists?.[cueListNumber]?.[cueNumber];
+    if (!cues || !cues[0]) {
+      device.draw();
+      return;
+    }
+    const $elem = doc.getElementById(cues[0].uid);
+    if ($elem) {
+      const cueState = cueRenderState(device, cueListNumber, cueNumber);
+      $elem.outerHTML = device.templates.cue({
+        q: cues,
+        cueNumber,
+        isActive: cueState.isComplete,
+        isComplete: cueState.isComplete,
+        isRunning: cueState.isRunning,
+        remainingDuration: cueState.remainingDuration,
+        followHangRemainingDuration: cueState.followHangRemainingDuration,
       });
     } else {
       device.draw();
     }
   } else if (updateType === 'activeCue') {
     const $elem = doc.getElementById(data.uid);
-    $elem.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    if ($elem) {
+      $elem.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
   }
 };
 
@@ -134,6 +251,62 @@ exports.heartbeat = function heartbeat(device) {
   device.send('/eos/ping');
 };
 
+function resolveConfiguredCueList(device) {
+  const cueListFilter = cueNumberValue(device.data.cueListFilter);
+  return cueListFilter || '1';
+}
+
+function subscribeToCueList(device) {
+  const cueListNumber = resolveConfiguredCueList(device);
+  const eosState = device.data.EOS;
+  eosState.progressCueList = cueListNumber;
+  device.send(`/eos/cuelist/8001/config/${cueListNumber}/0/0`);
+}
+
+function cueRenderState(device, cueListNumber, cueNumber) {
+  const list = cueNumberValue(cueListNumber);
+  const cue = cueNumberValue(cueNumber);
+  const progress = device.data.EOS.progressByList[list];
+  const activeCue = cueNumberValue(device.data.EOS.activeCueByList[list]);
+  const cueRemainingMs = progress?.cueRemainingMs;
+  const followHangRemainingMs = progress?.followHangRemainingMs;
+  const isComplete = cue === activeCue;
+  const isRunning =
+    isComplete &&
+    progress !== undefined &&
+    cue === cueNumberValue(progress.cueNumber) &&
+    cueRemainingMs !== null &&
+    cueRemainingMs > 0;
+  const hasFollowHangCountdown = isComplete && followHangRemainingMs !== null && followHangRemainingMs > 0;
+
+  return {
+    isRunning,
+    isComplete,
+    remainingDuration: isRunning ? cueRemainingMs : null,
+    followHangRemainingDuration: hasFollowHangCountdown ? followHangRemainingMs : null,
+  };
+}
+
+function cueNumberValue(value) {
+  if (value === undefined || value === null) {
+    return undefined;
+  }
+  return `${value}`.trim();
+}
+
+function nonNegativeInt(value) {
+  if (value === undefined || value === null) {
+    return null;
+  }
+
+  const numericValue = Number(value);
+  if (!Number.isFinite(numericValue)) {
+    return null;
+  }
+
+  return Math.max(0, Math.round(numericValue));
+}
+
 function match(testArray, patternArray) {
   let out = true;
   if (testArray.length !== patternArray.length) {
@@ -152,5 +325,8 @@ class EOS {
     this.showName = '';
     this.cueLists = {};
     this.activeCue = undefined;
+    this.activeCueByList = {};
+    this.progressByList = {};
+    this.progressCueList = '1';
   }
 }

plugins/eos/styles.css

@@ -63,6 +63,25 @@ tr.active-cue .time {
   border-color: #c78b07;
 }
 
+tr.running-cue {
+  color: #ae0009;
+}
+tr.running-cue td.num div {
+  margin: 0px;
+  padding: 1px 6px;
+  background-color: #ae0009;
+  border-radius: 4px;
+  color: white;
+}
+tr.running-cue .time {
+  border-color: #ae0009;
+}
+
+td.running-follow-hang {
+  color: #ae0009;
+  font-weight: 700;
+}
+
 .list_name {
   color: lightgray;
   margin-left: 5px;

plugins/eos/template.ejs

@@ -25,15 +25,30 @@
 			</tr>
 
 			<% var cues = Object.keys(data.EOS.cueLists[i]).sort(function(a, b){return Number(a)-Number(b)}) %>
+			<% var activeCueByList = data.EOS.activeCueByList || {} %>
+			<% var progressByList = data.EOS.progressByList || {} %>
+			<% var activeCueNumber = (activeCueByList[i] !== undefined) ? (activeCueByList[i] + "") : undefined %>
+			<% var progressState = progressByList[i] || {} %>
+			<% var progressCueNumber = (progressState.cueNumber !== undefined && progressState.cueNumber !== null) ? (progressState.cueNumber + "") : undefined %>
+			<% var hasCueRemaining = (progressState.cueRemainingMs !== undefined && progressState.cueRemainingMs !== null) %>
+			<% var hasFollowHangRemaining = (progressState.followHangRemainingMs !== undefined && progressState.followHangRemainingMs !== null) %>
 
 			<% for(var j=0; j<cues.length; j++){ %>
 				<% var q = data.EOS.cueLists[i][cues[j]] %>
-				
+				<% var isComplete = (activeCueNumber !== undefined && cues[j] == activeCueNumber) %>
+				<% var isRunning = isComplete && hasCueRemaining && progressCueNumber === cues[j] && progressState.cueRemainingMs > 0 %>
+				<% var remainingDuration = isRunning ? progressState.cueRemainingMs : null %>
+				<% var followHangRemainingDuration = (isComplete && !isRunning && hasFollowHangRemaining && progressState.followHangRemainingMs > 0) ? progressState.followHangRemainingMs : null %>
+
 				<%= templates.cue({
 					q: q,
 					cues: cues,
 					cueNumber: cues[j],
-					isActive: (cues[j]==data.EOS.activeCue+"")
+					isActive: isComplete,
+					isComplete: isComplete,
+					isRunning: isRunning,
+					remainingDuration: remainingDuration,
+					followHangRemainingDuration: followHangRemainingDuration
 				}) %>
 
 			<% } %>

plugins/ontime/info.html

@@ -0,0 +1,3 @@
+<p>Connects to <strong>Ontime</strong> via WebSocket.</p>
+<p>Default port: <strong>4001</strong></p>
+<p>Displays the current timer, playback state, and event information from the active rundown.</p>

plugins/ontime/main.js

@@ -0,0 +1,60 @@
+exports.config = {
+  defaultName: 'Ontime',
+  connectionType: 'websocket',
+  remotePort: 4001,
+  mayChangePorts: true,
+  heartbeatInterval: 500,
+  heartbeatTimeout: 15000,
+  fields: [
+    {
+      key: 'wsPath',
+      label: 'WS Path',
+      type: 'textinput',
+      value: '/ws',
+      action: () => {},
+    },
+  ],
+};
+
+exports.ready = function ready(device) {
+  const d = device;
+  d.data = {
+    timer: { current: null, playback: 'stop', addedTime: 0, duration: null, elapsed: null },
+    eventNow: null,
+    eventNext: null,
+    clock: null,
+  };
+  d.send({ tag: 'poll' });
+};
+
+exports.data = function data(_device, msg) {
+  const device = _device;
+
+  if (!device.data) {
+    device.data = {
+      timer: { current: null, playback: 'stop', addedTime: 0, duration: null, elapsed: null },
+      eventNow: null,
+      eventNext: null,
+      clock: null,
+    };
+  }
+
+  // Ontime v4 sends all state updates as { tag: "runtime-data", payload: Partial<RuntimeStore> }
+  // Poll responses arrive as { tag: "poll", payload: Partial<RuntimeStore> }
+  if (msg.tag !== 'runtime-data' && msg.tag !== 'poll') return;
+
+  const p = msg.payload;
+  if (!p) return;
+  if (p.timer !== undefined) device.data.timer = p.timer;
+  if (p.eventNow !== undefined) device.data.eventNow = p.eventNow;
+  if (p.eventNext !== undefined) device.data.eventNext = p.eventNext;
+  if (p.clock !== undefined) device.data.clock = p.clock;
+
+  device.draw();
+};
+
+exports.heartbeat = function heartbeat(device) {
+  device.send({ tag: 'poll' });
+};
+
+exports.update = function update(_device, _doc, _updateType, _data) {};

plugins/ontime/styles.css

@@ -0,0 +1,177 @@
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 300;
+  src: url(../../src/assets/font/OpenSans-Light.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: url(../../src/assets/font/OpenSans-Regular.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 600;
+  src: url(../../src/assets/font/OpenSans-SemiBold.ttf) format('truetype');
+}
+
+body {
+  background-color: #161616;
+  color: #e0e0e0;
+  font-family: 'Open Sans', sans-serif;
+}
+
+.ontime-top-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 10px 14px;
+  background-color: #222;
+  border-bottom: 2px solid #333;
+}
+
+.ontime-top-bar.play {
+  border-bottom-color: #4caf50;
+}
+
+.ontime-top-bar.pause {
+  border-bottom-color: #ff9800;
+}
+
+.ontime-top-bar.armed {
+  border-bottom-color: #2196f3;
+}
+
+.ontime-top-bar.roll {
+  border-bottom-color: #9c27b0;
+}
+
+.ontime-top-bar.overtime {
+  border-bottom-color: #f44336;
+}
+
+.ontime-top-section {
+  display: flex;
+  flex-direction: column;
+}
+
+.ontime-top-clock {
+  align-items: flex-end;
+}
+
+.ontime-top-label {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: #666;
+  margin-bottom: 2px;
+}
+
+.ontime-timer-value {
+  font-size: 52px;
+  font-weight: 300;
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+  color: #ffffff;
+}
+
+.ontime-top-bar.overtime .ontime-timer-value {
+  color: #f44336;
+}
+
+.ontime-top-bar.stop .ontime-timer-value,
+.ontime-top-bar.armed .ontime-timer-value {
+  color: #888;
+}
+
+.ontime-clock-value {
+  font-size: 52px;
+  font-weight: 300;
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+  color: #888;
+}
+
+.ontime-progress-bar {
+  height: 3px;
+  background-color: #333;
+  margin: 0;
+}
+
+.ontime-progress-fill {
+  height: 100%;
+  background-color: #4caf50;
+  transition: width 0.5s linear;
+}
+
+.ontime-added-time {
+  font-size: 12px;
+  color: #ff9800;
+  margin-top: 4px;
+}
+
+.ontime-event {
+  margin: 8px 0;
+  padding: 10px 12px;
+  border-radius: 4px;
+  background-color: #1e1e1e;
+  border-left: 3px solid #444;
+}
+
+.ontime-event-now {
+  border-left-color: #4caf50;
+}
+
+.ontime-event-next {
+  border-left-color: #444;
+  opacity: 0.7;
+}
+
+.ontime-event-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-bottom: 4px;
+}
+
+.ontime-event-cue {
+  font-size: 11px;
+  color: #aaa;
+  font-family: monospace;
+}
+
+.ontime-event-label {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: #666;
+}
+
+.ontime-event-title {
+  font-size: 16px;
+  color: #fff;
+  font-weight: 400;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ontime-event-note {
+  font-size: 12px;
+  color: #888;
+  margin-top: 4px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ontime-event-times {
+  font-size: 11px;
+  color: #666;
+  margin-top: 3px;
+  font-variant-numeric: tabular-nums;
+}
+
+

plugins/ontime/template.ejs

@@ -0,0 +1,81 @@
+<%
+function formatMs(ms) {
+  if (ms === null || ms === undefined) return '--:--';
+  var neg = ms < 0;
+  var abs = Math.abs(ms);
+  var h = Math.floor(abs / 3600000);
+  var m = Math.floor((abs % 3600000) / 60000);
+  var s = Math.floor((abs % 60000) / 1000);
+  var result = h > 0
+    ? h + ':' + String(m).padStart(2, '0') + ':' + String(s).padStart(2, '0')
+    : m + ':' + String(s).padStart(2, '0');
+  return (neg ? '-' : '') + result;
+}
+function formatClock(ms) {
+  if (ms === null || ms === undefined) return '';
+  var h = Math.floor(ms / 3600000) % 24;
+  var m = Math.floor((ms % 3600000) / 60000);
+  return String(h).padStart(2, '0') + ':' + String(m).padStart(2, '0');
+}
+var playback = data.timer ? data.timer.playback : 'stop';
+var current = data.timer ? data.timer.current : null;
+var duration = data.timer ? data.timer.duration : null;
+var overtime = current !== null && current < 0;
+%>
+
+<header>
+  <h1><%= listName %></h1>
+</header>
+
+<div class="ontime-top-bar <%= playback %><%= overtime ? ' overtime' : '' %>">
+  <div class="ontime-top-section">
+    <div class="ontime-top-label">Running timer</div>
+    <div class="ontime-timer-value"><%= formatMs(current) %></div>
+    <% if (data.timer && data.timer.addedTime && data.timer.addedTime !== 0) { %>
+    <div class="ontime-added-time"><%= data.timer.addedTime > 0 ? '+' : '' %><%= Math.round(data.timer.addedTime / 1000) %>s</div>
+    <% } %>
+  </div>
+  <% if (data.clock !== null && data.clock !== undefined) { %>
+  <div class="ontime-top-section ontime-top-clock">
+    <div class="ontime-top-label">Time now</div>
+    <div class="ontime-clock-value"><%= formatClock(data.clock) %></div>
+  </div>
+  <% } %>
+</div>
+<% if (duration !== null && duration !== undefined && duration > 0) { %>
+<%   var elapsed = data.timer && data.timer.elapsed !== null && data.timer.elapsed !== undefined ? data.timer.elapsed : null; %>
+<%   var pct = elapsed !== null ? Math.max(0, Math.min(100, (elapsed / duration) * 100)) : 0; %>
+<div class="ontime-progress-bar"><div class="ontime-progress-fill" style="width:<%= Math.round(pct) %>%"></div></div>
+<% } %>
+
+<% if (data.eventNow) { %>
+<div class="ontime-event ontime-event-now" style="<%= data.eventNow.colour ? 'border-left-color:' + data.eventNow.colour : '' %>">
+  <div class="ontime-event-header">
+    <span class="ontime-event-cue"><%= data.eventNow.cue || '' %></span>
+    <span class="ontime-event-label">Now</span>
+  </div>
+  <div class="ontime-event-title"><%= data.eventNow.title || '' %></div>
+  <% if (data.eventNow.timeStart !== undefined && data.eventNow.timeEnd !== undefined) { %>
+  <div class="ontime-event-times"><%= formatClock(data.eventNow.timeStart) %> – <%= formatClock(data.eventNow.timeEnd) %></div>
+  <% } %>
+  <% if (data.eventNow.note) { %>
+  <div class="ontime-event-note"><%= data.eventNow.note %></div>
+  <% } %>
+</div>
+<% } %>
+
+<% if (data.eventNext) { %>
+<div class="ontime-event ontime-event-next" style="<%= data.eventNext.colour ? 'border-left-color:' + data.eventNext.colour : '' %>">
+  <div class="ontime-event-header">
+    <span class="ontime-event-cue"><%= data.eventNext.cue || '' %></span>
+    <span class="ontime-event-label">Next</span>
+  </div>
+  <div class="ontime-event-title"><%= data.eventNext.title || '' %></div>
+  <% if (data.eventNext.timeStart !== undefined && data.eventNext.timeEnd !== undefined) { %>
+  <div class="ontime-event-times"><%= formatClock(data.eventNext.timeStart) %> – <%= formatClock(data.eventNext.timeEnd) %></div>
+  <% } %>
+  <% if (data.eventNext.note) { %>
+  <div class="ontime-event-note"><%= data.eventNext.note %></div>
+  <% } %>
+</div>
+<% } %>

plugins/posistagenet/main.js

@@ -43,15 +43,32 @@ exports.data = function data(_device, buf, info) {
   device.decoders[info.address].decode(buf);
 
   Object.keys(device.decoders).forEach((address) => {
+    console.log(device.decoders[address].trackers)
     device.data[address] = {
       trackers: device.decoders[address].trackers,
       system_name: device.decoders[address].system_name,
-      fields: device.decoders[address].getTrackerFields(),
+      fields: getTrackerFields(device.decoders[address].trackers),
     };
   });
   device.draw();
 };
 
+function getTrackerFields(trackers) {
+    const keys = new Set(
+      Object.values(trackers)
+        .map((tracker) => Object.keys(tracker))
+        .flat(1)
+    );
+
+    // NOTE(jwetzell): remove fields that definitely exist
+    keys.delete('id');
+    keys.delete('has_subchunks');
+    keys.delete('data_len');
+    keys.delete('chunk_data');
+
+    return keys;
+}
+
 exports.heartbeat = function heartbeat(device) {};
 
 exports.update = function update(_device, doc, updateType, updateData) {};

plugins/posistagenet/template.ejs

@@ -14,7 +14,7 @@
   <table>
     <tr>
       <th></th>
-      <% if(instanceData.fields.has('tracker_name')) { %>
+      <% if(instanceData.fields.has('name')) { %>
         <th></th>
       <% } %>
 
@@ -30,7 +30,7 @@
         <th colspan="3" class="bg-ori border-right">ORI</th>
       <% } %>
 
-      <% if(instanceData.fields.has('status')) { %>
+      <% if(instanceData.fields.has('validity')) { %>
         <th class="border-right"></th>
       <% } %>
 
@@ -48,7 +48,7 @@
     </tr>
     <tr>
       <th>ID</th>
-      <% if(instanceData.fields.has('tracker_name')) { %>
+      <% if(instanceData.fields.has('name')) { %>
         <th>Name</th>
       <% } %>
 
@@ -70,7 +70,7 @@
         <th class="bg-ori border-right">z</th>
       <% } %>
 
-      <% if(instanceData.fields.has('status')) { %>
+      <% if(instanceData.fields.has('validity')) { %>
         <th class="border-right">validity</th>
       <% } %>
 
@@ -96,51 +96,51 @@
 
     <tr>
       <td><%= trackerId %></td>
-      <% if(instanceData.fields.has('tracker_name')) { %>
-        <td><%= trackerData.tracker_name?.tracker_name%></td>
+      <% if(instanceData.fields.has('name')) { %>
+        <td><%= trackerData.name%></td>
       <% } %>
       
       <% if(instanceData.fields.has('pos')) { %>
         <!-- pos -->
-        <td class="bg-pos"><%= trackerData.pos?.pos_x?.toFixed(2) %></td>
-        <td class="bg-pos"><%= trackerData.pos?.pos_y?.toFixed(2) %></td>
-        <td class="bg-pos border-right"><%= trackerData.pos?.pos_z?.toFixed(2) %></td>
+        <td class="bg-pos"><%= trackerData.pos?.x?.toFixed(2) %></td>
+        <td class="bg-pos"><%= trackerData.pos?.y?.toFixed(2) %></td>
+        <td class="bg-pos border-right"><%= trackerData.pos?.z?.toFixed(2) %></td>
       <% } %>
 
       <% if(instanceData.fields.has('speed')) { %>
         <!-- speed -->
-        <td class="bg-speed"><%= trackerData.speed?.speed_x?.toFixed(2) %></td>
-        <td class="bg-speed"><%= trackerData.speed?.speed_y?.toFixed(2) %></td>
-        <td class="bg-speed border-right"><%= trackerData.speed?.speed_z?.toFixed(2) %></td>
+        <td class="bg-speed"><%= trackerData.speed?.x?.toFixed(2) %></td>
+        <td class="bg-speed"><%= trackerData.speed?.y?.toFixed(2) %></td>
+        <td class="bg-speed border-right"><%= trackerData.speed?.z?.toFixed(2) %></td>
       <% } %>
 
       <% if(instanceData.fields.has('ori')) { %>
         <!-- ori -->
-        <td class="bg-ori"><%= trackerData.ori?.ori_x?.toFixed(2) %></td>
-        <td class="bg-ori"><%= trackerData.ori?.ori_y?.toFixed(2) %></td>
-        <td class="bg-ori border-right"><%= trackerData.ori?.ori_z?.toFixed(2) %></td>
+        <td class="bg-ori"><%= trackerData.ori?.x?.toFixed(2) %></td>
+        <td class="bg-ori"><%= trackerData.ori?.y?.toFixed(2) %></td>
+        <td class="bg-ori border-right"><%= trackerData.ori?.z?.toFixed(2) %></td>
       <% } %>
 
-      <% if(instanceData.fields.has('status')) { %>
-        <td class="border-right"><%= trackerData.status?.validity?.toFixed(2) %></td>
+      <% if(instanceData.fields.has('validity')) { %>
+        <td class="border-right"><%= trackerData.validity?.toFixed(2) %></td>
       <% } %>
 
       <% if(instanceData.fields.has('accel')) { %>
         <!-- accel -->
-        <td class="bg-accel"><%= trackerData.accel?.accel_x?.toFixed(2) %></td>
-        <td class="bg-accel"><%= trackerData.accel?.accel_y?.toFixed(2) %></td>
-        <td class="bg-accel border-right"><%= trackerData.accel?.accel_z?.toFixed(2) %></td>
+        <td class="bg-accel"><%= trackerData.accel?.x?.toFixed(2) %></td>
+        <td class="bg-accel"><%= trackerData.accel?.y?.toFixed(2) %></td>
+        <td class="bg-accel border-right"><%= trackerData.accel?.z?.toFixed(2) %></td>
       <% } %>
 
       <% if(instanceData.fields.has('trgtpos')) { %>
         <!-- trgtpos -->
-        <td class="bg-trgtpos"><%= trackerData.trgtpos?.trgtpos_x?.toFixed(2) %></td>
-        <td class="bg-trgtpos"><%= trackerData.trgtpos?.trgtpos_y?.toFixed(2) %></td>
-        <td class="bg-trgtpos border-right"><%= trackerData.trgtpos?.trgtpos_z?.toFixed(2) %></td>
+        <td class="bg-trgtpos"><%= trackerData.trgtpos?.x?.toFixed(2) %></td>
+        <td class="bg-trgtpos"><%= trackerData.trgtpos?.y?.toFixed(2) %></td>
+        <td class="bg-trgtpos border-right"><%= trackerData.trgtpos?.z?.toFixed(2) %></td>
       <% } %>
 
       <% if(instanceData.fields.has('timestamp')) { %>
-        <td><%= trackerData.timestamp?.tracker_timestamp %></td>
+        <td><%= trackerData.timestamp %></td>
       <% } %>
 
     </tr>

plugins/qlab/main.js

@@ -73,7 +73,7 @@ exports.data = function data(_device, oscData) {
       return;
     }
     if (json.status === 'error') {
-      device.send('/workspaces');
+      // device.send('/workspaces');
       return;
     }
   }
@@ -101,7 +101,11 @@ exports.data = function data(_device, oscData) {
     } else {
       device.data.workspaces[json.workspace_id].permission = 'ok';
       device.send(`/workspace/${msgAddr[2]}/cueLists`);
-      device.send(`/workspace/${msgAddr[2]}/updates`, [{ type: 'i', value: 1 }]);
+      if (device.data?.version?.startsWith('5')) {
+        device.send(`/updates`, [{ type: 'i', value: 1 }]);
+      } else {
+        device.send(`/workspace/${msgAddr[2]}/updates`, [{ type: 'i', value: 1 }]);
+      }
     }
   } else if (/reply\/workspace\/.*\/cueLists/.test(oscData.address)) {
     insertChildCues(device, device.data.workspaces[msgAddr[2]].cueLists, json.data, '[root group of cue lists]');
@@ -158,7 +162,19 @@ exports.data = function data(_device, oscData) {
           device.data.cueKeys[msgAddr[2]].cueInWorkspace
         );
       }
-      device.draw();
+
+      if (cue.type === 'Cue List') {
+        // draw cue list right away
+        device.draw();
+      } else {
+        // set up a timeout in case more messages come along to avoid fast re-drawing
+        if (device.drawTimeout !== undefined) {
+          clearTimeout(device.drawTimeout);
+        }
+        device.drawTimeout = setTimeout(() => {
+          device.draw();
+        }, 250);
+      }
     }
 
     if (cue.type !== 'Cue List' && cue.type !== 'Cart') {

plugins/shure/main.js

@@ -78,7 +78,7 @@ exports.data = function data(_device, message) {
       channel.rf_antenna = msgParts[3];
       channel.rx_rf_lvl = Number(msgParts[4]) - 128;
       channel.audio_lvl = Number(msgParts[5]);
-      if (channelNumber === 4) {
+      if (channelNumber === device.data.channelCount) {
         device.update('updateSample', {
           channels: device.data.channels,
         });

src/assets/css/index.css

@@ -347,6 +347,24 @@ select.button:focus {
   outline: none;
 }
 
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 300;
+  src: url(../font/OpenSans-Light.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: url(../font/OpenSans-Regular.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 600;
+  src: url(../font/OpenSans-SemiBold.ttf) format('truetype');
+}
 @font-face {
   font-family: 'Material Icons';
   font-style: normal;

src/assets/font/Lato-OFL.txt

@@ -0,0 +1,93 @@
+Copyright (c) 2010-2014 by tyPoland Lukasz Dziedzic (team@latofonts.com) with Reserved Font Name "Lato"
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

src/assets/font/MaterialIcons-LICENSE.txt

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

src/assets/font/OpenSans-OFL.txt

@@ -0,0 +1,92 @@
+Copyright 2020 The Open Sans Project Authors (https://github.com/googlefonts/opensans)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://scripts.sil.org/OFL
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font
+creation efforts of academic and linguistic communities, and to
+provide a free and open framework in which fonts may be shared and
+improved in partnership with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply to
+any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software
+components as distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to,
+deleting, or substituting -- in part or in whole -- any of the
+components of the Original Version, by changing formats or by porting
+the Font Software to a new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed,
+modify, redistribute, and sell modified and unmodified copies of the
+Font Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components, in
+Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the
+corresponding Copyright Holder. This restriction only applies to the
+primary font name as presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created using
+the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

src/device.js

@@ -110,7 +110,55 @@ function initDeviceConnection(id) {
   const { type } = devices[id];
   const plugins = PLUGINS.all;
 
-  if (plugins[type].config.connectionType.includes('osc')) {
+  if (plugins[type].config.connectionType === 'osc-tcp') {
+    // OSC over TCP with 4-byte big-endian size prefix
+    device.connection = new net.Socket();
+    let recvBuf = Buffer.alloc(0);
+    device.connection.connect({ port: device.remotePort, host: device.addresses[0] });
+    device.connection.on('error', () => {
+      device.connection.destroy();
+    });
+    device.connection.on('connect', () => {
+      plugins[type].ready(device);
+      if (Object.keys(devices).length === 1) {
+        VIEW.switchDevice(device.id);
+      }
+    });
+    device.connection.on('data', (chunk) => {
+      recvBuf = Buffer.concat([recvBuf, chunk]);
+      while (recvBuf.length >= 4) {
+        const msgLen = recvBuf.readUInt32BE(0);
+        if (recvBuf.length < 4 + msgLen) break;
+        const msgBytes = recvBuf.slice(4, 4 + msgLen);
+        recvBuf = recvBuf.slice(4 + msgLen);
+        try {
+          const message = osc.readPacket(msgBytes, {});
+          plugins[type].data(device, message);
+        } catch (err) {
+          console.error(err);
+        }
+        device.trafficSignal(device);
+        device.lastMessage = Date.now();
+      }
+    });
+    device.connection.on('close', () => {
+      infoUpdate(device, 'status', 'broken');
+    });
+    device.send = (address, args) => {
+      device.sendQueue.push({ address, args });
+    };
+    device.sendNow = (data) => {
+      try {
+        const bytes = osc.writePacket(data, {});
+        const buf = Buffer.allocUnsafe(4 + bytes.length);
+        buf.writeUInt32BE(bytes.length, 0);
+        Buffer.from(bytes).copy(buf, 4);
+        device.connection.write(buf);
+      } catch (err) {
+        console.error(err);
+      }
+    };
+  } else if (plugins[type].config.connectionType.includes('osc')) {
     if (plugins[type].config.connectionType.includes('udp')) {
       device.connection = new osc.UDPPort({
         localAddress: '0.0.0.0',
@@ -122,6 +170,7 @@ function initDeviceConnection(id) {
       device.connection = new osc.TCPSocketPort({
         address: device.addresses[0],
         port: device.remotePort,
+        useSLIP: true,
       });
     }
     device.connection.open();
@@ -243,6 +292,46 @@ function initDeviceConnection(id) {
       });
       infoUpdate(device, 'status', 'ok');
     });
+  } else if (plugins[type].config.connectionType === 'websocket') {
+    const wsPath = (device.fields && device.fields.wsPath) ? device.fields.wsPath : '/ws';
+    const wsUrl = `ws://${device.addresses[0]}:${device.remotePort}${wsPath}`;
+    device.connection = new WebSocket(wsUrl);
+
+    device.connection.onopen = () => {
+      device.lastMessage = Date.now();
+      infoUpdate(device, 'status', 'ok');
+      plugins[type].ready(device);
+      if (Object.keys(devices).length === 1) {
+        VIEW.switchDevice(device.id);
+      }
+    };
+
+    device.connection.onmessage = (event) => {
+      try {
+        const msg = JSON.parse(event.data);
+        plugins[type].data(device, msg);
+      } catch (err) {
+        console.error(err);
+      }
+      device.lastMessage = Date.now();
+      device.trafficSignal(device);
+      infoUpdate(device, 'status', 'ok');
+    };
+
+    device.connection.onerror = () => {};
+
+    device.connection.onclose = () => {
+      device.lastMessage = 0;
+    };
+
+    device.send = (data) => {
+      device.sendQueue.push(data);
+    };
+    device.sendNow = (data) => {
+      if (device.connection.readyState === WebSocket.OPEN) {
+        device.connection.send(JSON.stringify(data));
+      }
+    };
   }
 
   return true;
@@ -264,6 +353,8 @@ module.exports.deleteActive = function deleteActive() {
       device.connection?.close();
     } else if (device.plugin.config.connectionType.startsWith('osc')) {
       device.connection?.close();
+    } else if (device.plugin.config.connectionType === 'websocket') {
+      device.connection?.close();
     }
     VIEW.removeDeviceFromList(device);
     delete devices[device.id];

src/view.js

@@ -2,6 +2,13 @@ const { ipcRenderer } = require('electron');
 const DEVICE = require('./device.js');
 const PLUGINS = require('./plugins.js');
 const { saveAll } = require('./saveSlots.js');
+const { h, diff, patch, create } = require('virtual-dom');
+const VNode = require('virtual-dom/vnode/vnode');
+const VText = require('virtual-dom/vnode/vtext');
+const convertHtml = require('html-to-vdom')({
+  VNode,
+  VText,
+});
 
 const pinnedDevices = [];
 module.exports.pinnedDevices = pinnedDevices;
@@ -40,17 +47,17 @@ function drawDeviceFrame(id) {
         </style>
         <link href='src/assets/css/plugin_default.css' rel='stylesheet' type='text/css'>
       </head>
-      <body>
-        ${generateBodyHTML(d)}
-      </body>
     </html>
   `;
 
+  d.contentBodyElement = create(h('body', convertHtml(generateBodyHTML(d))));
+
   $deviceDrawArea.setAttribute('class', `${d.type} draw-area`);
   $deviceDrawArea.contentWindow.document.open();
   $deviceDrawArea.contentWindow.document.write(str);
+  $deviceDrawArea.contentWindow.document.body = d.contentBodyElement;
   $deviceDrawArea.contentWindow.document.close();
-  $deviceDrawArea.contentWindow.document.onclick = function (e) {
+  $deviceDrawArea.contentWindow.document.onclick = (e) => {
     switchDevice(d.id);
   };
 
@@ -74,7 +81,7 @@ function generateBodyHTML(d) {
         listName: d.displayName || d.defaultName,
       });
     } catch (err) {
-      console.log(err);
+      console.error(err);
       return '<h3>Plugin Template Error</h3>';
     }
   } else {
@@ -98,11 +105,11 @@ function generateBodyHTML(d) {
 
 module.exports.draw = function draw(device) {
   const d = device;
-  const $deviceDrawArea = document.getElementById(`device-${d.id}-draw-area`);
 
-  if ($deviceDrawArea) {
-    const scriptEl = $deviceDrawArea.contentWindow.document.createRange().createContextualFragment(generateBodyHTML(d));
-    $deviceDrawArea.contentWindow.document.body.replaceChildren(scriptEl);
+  if (d.contentBodyElement) {
+    const newVNode = h('body', convertHtml(generateBodyHTML(d)));
+    const domPatches = diff(d.contentBodyElement, newVNode);
+    d.contentBodyElement = patch(d.contentBodyElement, domPatches);
   } else {
     drawDeviceFrame(d.id);
   }
@@ -303,6 +310,10 @@ module.exports.resetPinned = function resetPinned() {
   pinnedDevices.length = 0;
   activeDevice = false;
 
+  Object.keys(DEVICE.all).forEach((id) => {
+    DEVICE.all[id].frameDrawn = false;
+  });
+
   try {
     document.querySelector('#device-list .active-device').classList.remove('active-device');
   } catch (err) {