bump macos runner version

Bump electron-builder from 26.7.0 to 26.8.1

.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
+v22.21.1

.vscode/launch.json

@@ -0,0 +1,29 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Electron: Main",
+      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
+      "runtimeArgs": ["--remote-debugging-port=9223", "."],
+      "windows": {
+        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
+      }
+    },
+    {
+      "name": "Electron: Renderer",
+      "type": "chrome",
+      "request": "attach",
+      "port": 9223,
+      "webRoot": "${workspaceFolder}",
+      "timeout": 30000
+    }
+  ],
+  "compounds": [
+    {
+      "name": "Electron: All",
+      "configurations": ["Electron: Main", "Electron: Renderer"]
+    }
+  ]
+}

.vscode/settings.json

@@ -2,7 +2,7 @@
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "eslint.validate": ["javascript"],
   "html.validate.styles": false // accept templates inside HTML style attributes

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.0",
+  "version": "1.3.0",
   "description": "A dashboard for everything in your show",
   "main": "main.js",
   "scripts": {
@@ -19,25 +19,28 @@
   "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/notarize": "3.1.1",
+    "electron": "39.8.5",
+    "electron-builder": "26.8.1",
+    "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.1"
   },
   "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.3",
+    "html-to-vdom": "0.7.0",
+    "ip": "2.0.1",
+    "lodash": "4.18.1",
+    "md5": "2.3.0",
+    "netmask": "2.0.2",
+    "osc": "2.4.5",
+    "uuid": "13.0.0",
+    "virtual-dom": "2.1.1"
   },
   "build": {
     "appId": "com.stagehacks.cueview",

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/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') {

src/device.js

@@ -257,13 +257,13 @@ module.exports.deleteActive = function deleteActive() {
 
   if (choice) {
     if (device.plugin.config.connectionType === 'TCPsocket') {
-      device.connection.destroy();
+      device.connection?.destroy();
     } else if (device.plugin.config.connectionType === 'UDPsocket') {
-      device.connection.close();
+      device.connection?.close();
     } else if (device.plugin.config.connectionType === 'multicast') {
-      device.connection.close();
+      device.connection?.close();
     } else if (device.plugin.config.connectionType.startsWith('osc')) {
-      device.connection.close();
+      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);
   }