add atem transition bar

plugins/atem/main.js

@@ -21,8 +21,17 @@ exports.ready = function ready(_device) {
   console.log('atem ready');
 };
 
+exports.update = function update(device, _document, updateType, data) {
+  const document = _document;
+
+  if (updateType === 'tbar' && document.getElementById('tbar-pos')) {
+    document.getElementById('tbar-pos').value = data;
+  }
+};
+
 exports.data = function data(_device, msg) {
   const device = _device;
+  this.deviceInfoUpdate(device, 'status', 'ok');
   switch (msg.event) {
     case 'sourceConfiguration':
       if (device.data.source === undefined) {
@@ -38,6 +47,7 @@ exports.data = function data(_device, msg) {
       }
 
       device.data.source[msg.sourceID] = {
+        ...device.data.source[msg.sourceID],
         ...msg.sourceConfiguration,
       };
       break;
@@ -57,9 +67,7 @@ exports.data = function data(_device, msg) {
       break;
 
     case 'rawCommand':
-      if (msg.cmd.name === '_ver') {
-        console.log(msg);
-      } else if (msg.cmd.name === '_pin') {
+      if (msg.cmd.name === '_pin') {
         if (msg.cmd.data !== undefined) {
           infoUpdate(device, 'defaultName', msg.cmd.data.toString().trim());
         }
@@ -74,7 +82,9 @@ exports.data = function data(_device, msg) {
           DVEs: msg.cmd.data[6],
           superSources: msg.cmd.data[7],
         };
-        console.log(device);
+      } else if (msg.cmd.name === 'TrPs') {
+        const tbarPos = msg.cmd.data.readUint16BE(4);
+        device.update('tbar', tbarPos);
       }
       break;
     default:

plugins/atem/styles.css

@@ -37,3 +37,9 @@ h3 {
   justify-content: center;
   height: 100%;
 }
+
+.tbar-progress {
+  width: 100%;
+  height: 40px;
+  accent-color: limegreen;
+}

plugins/atem/template.ejs

@@ -6,7 +6,7 @@
     <h3>Program</h3>
     <div class="source-wrapper">
         <% Object.entries(data.source).forEach(([sourceID, state])=>{ %>
-            <% if (state.tally.program) { %>
+            <% if (state.tally && state.tally.program) { %>
                 <div id="atem-program-source-<%= sourceID %>" class="atem-input program-active">
                     <div class="source-label">
                         <%= state.abbreviation %>
@@ -21,13 +21,13 @@
             <% } %>
         <% }) %>
     </div>
-  </div>
-  
-  <div class="preview">
+</div>
+
+<div class="preview">
     <h3>Preview</h3>
     <div class="source-wrapper">
         <% Object.entries(data.source).forEach(([sourceID, state])=>{ %>
-            <% if (state.tally.preview) { %>
+            <% if (state.tally && state.tally.preview) { %>
                 <div id="atem-preview-source-<%= sourceID %>" class="atem-input preview-active">
                     <div class="source-label">
                         <div><%= state.abbreviation %></div>
@@ -41,5 +41,9 @@
                 </div>            
             <% } %>
         <% }) %>
-    </div>
-  </div>
+    </div>          
+</div>
+
+<div class="source-wrapper">
+    <progress id="tbar-pos" max="10000" value="0" class="tbar-progress"></progress>
+</div>

src/device.js

@@ -230,6 +230,10 @@ function initDeviceConnection(id) {
       };
       plugins[type].data(device, msg);
     });
+
+    device.connection.on('connectionLost', () => {
+      console.log('connection lost');
+    });
   }
 
   return true;