Merge branch 'main' into plugin-digico-sd

src/assets/css/index.css

@@ -78,7 +78,10 @@ a {
 #device-list {
   box-sizing: border-box;
   width: 100%;
+  height: calc(100% - 387px);
   padding: 0px 10px;
+  overflow-x: hidden;
+  overflow-y: scroll;
 }
 #device-list div {
   pointer-events: none;
@@ -183,6 +186,15 @@ a {
 #device-settings #device-settings-rx-port {
   width: 70px;
 }
+#network-indicator-dot {
+  position: absolute;
+  left: 250px;
+  bottom: 8px;
+  background: #00ff00;
+  width: 8px;
+  height: 8px;
+  border-radius: 4px;
+}
 
 /* SECOND COL */
 #all-devices {
@@ -191,11 +203,20 @@ a {
   background-color: rgba(0, 0, 0, 0.3);
 }
 .device-pin {
+  position: absolute;
+  right: 45px;
+  top: 4px;
+  height: 20px;
+  padding: inherit;
+}
+.device-traffic-signal {
   position: absolute;
   right: 15px;
   top: 4px;
   height: 20px;
   padding: inherit;
+  opacity: 0.3;
+  transition: opacity 0.1s ease-in-out;
 }
 .device-wrapper {
   box-sizing: border-box;
@@ -350,3 +371,20 @@ select.button:focus {
 body :not(input):not(select):not(textarea) {
   user-select: none;
 }
+
+::-webkit-scrollbar {
+  /* background-color: black; */
+  width: 12px;
+}
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-corner {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+::-webkit-scrollbar-thumb {
+  background-color: #6b6b6b;
+  border-radius: 16px;
+  border: 3px solid #2b2b2b;
+}
+::-webkit-scrollbar-button {
+  display: none;
+}

src/device.js

@@ -2,7 +2,7 @@ const { v4: uuid } = require('uuid');
 const osc = require('osc');
 const net = require('net');
 const udp = require('dgram');
-
+const { Atem } = require('atem-connection');
 const PLUGINS = require('./plugins.js');
 const VIEW = require('./view.js');
 const SAVESLOTS = require('./saveSlots.js');
@@ -49,13 +49,16 @@ function registerDevice(newDevice, discoveryMethod) {
     localPort: newLocalPort,
     addresses: newDevice.addresses,
     data: {},
+    templates: {},
     fields: newDevice.fields || {},
     pinIndex: false,
     lastDrawn: 0,
     lastHeartbeat: 0,
     lastMessage: 0,
+    sendQueue: [],
     heartbeatInterval: PLUGINS.all[newDevice.type].heartbeatInterval,
     heartbeatTimeout: PLUGINS.all[newDevice.type].heartbeatTimeout,
+    trafficSignal: VIEW.trafficSignal,
     draw() {
       VIEW.draw(this);
     },
@@ -138,10 +141,16 @@ function initDeviceConnection(id) {
       } catch (err) {
         console.error(err);
       }
+      device.trafficSignal(device);
       device.lastMessage = Date.now();
     });
     device.send = (address, args) => {
-      device.connection.send({ address, args });
+      const addr = address;
+      const arg = args;
+      device.sendQueue.push({ address: addr, args: arg });
+    };
+    device.sendNow = (data) => {
+      device.connection.send(data);
     };
   } else if (plugins[type].config.connectionType === 'TCPsocket') {
     device.connection = new net.Socket();
@@ -166,10 +175,14 @@ function initDeviceConnection(id) {
       // log("SOCK IN", message);
       plugins[type].data(device, message);
       device.lastMessage = Date.now();
+      device.trafficSignal(device);
       infoUpdate(device, 'status', 'ok');
     });
     device.send = (data) => {
       // log("SOCK OUT", data);
+      device.sendQueue.push(data);
+    };
+    device.sendNow = (data) => {
       device.connection.write(data);
     };
   } else if (plugins[type].config.connectionType === 'UDPsocket') {
@@ -181,12 +194,16 @@ function initDeviceConnection(id) {
       device.connection.on('message', (msg, info) => {
         plugins[type].data(device, msg);
         device.lastMessage = Date.now();
+        device.trafficSignal(device);
         infoUpdate(device, 'status', 'ok');
       });
     });
 
     device.send = (data) => {
-      device.connection.send(Buffer.from(data), device.remotePort, device.addresses[0], (err) => {
+      device.sendQueue.push(data);
+    };
+    device.sendNow = (data) => {
+      device.connection.send(Buffer.from(data), device.port, device.addresses[0], (err) => {
         // console.log(err);
       });
     };
@@ -199,11 +216,33 @@ function initDeviceConnection(id) {
       device.connection.on('message', (msg, info) => {
         plugins[type].data(device, msg);
         device.lastMessage = Date.now();
+        device.trafficSignal(device);
         infoUpdate(device, 'status', 'ok');
       });
     });
 
     device.send = (data) => {};
+  } else if (plugins[type].config.connectionType === 'atem') {
+    device.connection = new Atem({
+      // this gets around the no workers nodejs error
+      disableMultithreaded: true,
+    });
+    device.connection.connect(device.addresses[0]);
+
+    device.connection.on('connected', () => {
+      infoUpdate(device, 'status', 'ok');
+      device.trafficSignal(device);
+      plugins[type].ready(device);
+    });
+
+    device.connection.on('stateChanged', (state, pathToChange) => {
+      device.lastMessage = Date.now();
+      plugins[type].data(device, {
+        pathToChange,
+        state,
+      });
+      infoUpdate(device, 'status', 'ok');
+    });
   }
 
   return true;
@@ -217,8 +256,14 @@ module.exports.deleteActive = function deleteActive() {
   );
 
   if (choice) {
-    if (device.plugin.connectionType === 'TCPsocket') {
+    if (device.plugin.config.connectionType === 'TCPsocket') {
       device.connection.destroy();
+    } else if (device.plugin.config.connectionType === 'UDPsocket') {
+      device.connection.close();
+    } else if (device.plugin.config.connectionType === 'multicast') {
+      device.connection.close();
+    } else if (device.plugin.config.connectionType.startsWith('osc')) {
+      device.connection.close();
     }
     VIEW.removeDeviceFromList(device);
     delete devices[device.id];
@@ -315,9 +360,27 @@ function heartbeat() {
       }
       d.lastHeartbeat = Date.now();
     }
+
+    if (d.sendQueue.length > 0 && d.sendNow) {
+      d.sendNow(d.sendQueue[0]);
+      d.sendQueue.shift();
+    }
   });
 }
-setInterval(heartbeat, 100);
+setInterval(heartbeat, 50);
+
+function networkTick() {
+  Object.keys(devices).forEach((deviceID) => {
+    const d = devices[deviceID];
+
+    if (d.sendQueue.length > 0 && d.sendNow) {
+      d.sendNow(d.sendQueue[0]);
+      d.sendQueue.shift();
+      d.trafficSignal(d);
+    }
+  });
+}
+setInterval(networkTick, 10);
 
 function isDeviceAlreadyAdded(newDevice) {
   let deviceAlreadyAdded = false;

src/search.js

@@ -5,6 +5,7 @@ const net = require('net');
 const os = require('os');
 const ip = require('ip');
 
+const { Netmask } = require('netmask');
 const DEVICE = require('./device.js');
 const PLUGINS = require('./plugins.js');
 
@@ -91,6 +92,8 @@ function searchAll() {
         searchUDP(pluginType, plugin.config);
       } else if (searchType === 'multicast') {
         searchMulticast(pluginType, plugin.config);
+      } else if (searchType === 'UDPScan') {
+        searchUDPScan(pluginType, plugin.config);
       }
     } catch (err) {
       console.error(`Unable to search for plugin ${pluginType}`);
@@ -167,6 +170,36 @@ function TCPtest(ipAddr, pluginType, pluginConfig) {
   });
 }
 
+function searchUDPScan(pluginType, pluginConfig) {
+  for (let i = 0; i < Object.keys(validInterfaces).length; i++) {
+    const interfaceID = Object.keys(validInterfaces)[i];
+    const interfaceObj = validInterfaces[interfaceID];
+    interfaceObj.forEach((netInterface) => {
+      const udpSocket = dgram.createSocket('udp4');
+      udpSocket.bind(pluginConfig.searchOptions.listenPort, netInterface.address);
+
+      udpSocket.on('message', (msg, info) => {
+        if (pluginConfig.searchOptions.validateResponse(msg, info, DEVICE.all)) {
+          udpSocket.close();
+          DEVICE.registerDevice(
+            {
+              type: pluginType,
+              defaultName: pluginConfig.defaultName,
+              port: pluginConfig.defaultPort,
+              addresses: [info.address],
+            },
+            'fromSearch'
+          );
+        }
+      });
+      const interfaceBlock = new Netmask(netInterface.cidr);
+      interfaceBlock.forEach((address, long, index) => {
+        udpSocket.send(pluginConfig.searchOptions.searchBuffer, pluginConfig.searchOptions.devicePort, address);
+      });
+    });
+  }
+}
+
 function searchUDP(pluginType, pluginConfig) {
   for (let i = 0; i < Object.keys(validInterfaces).length; i++) {
     const interfaceID = Object.keys(validInterfaces)[i];

src/view.js

@@ -21,23 +21,26 @@ function drawDeviceFrame(id) {
 
   const d = DEVICE.all[id];
 
-  let str = '<html><head>';
-  str += `<link href='./plugins/${d.type}/styles.css' rel='stylesheet' type='text/css'>`;
+  const str = `
+    <html>
+      <head>
+        <link href='./plugins/${d.type}/styles.css' rel='stylesheet' type='text/css'>
 
-  // scrollbar styles are inline to prevent the styles flickering in
-  str += '<style>';
-  str += '::-webkit-scrollbar {background-color: black;width: 12px;}';
-  str += '::-webkit-scrollbar-track, ::-webkit-scrollbar-corner {background-color: #2b2b2b;}';
-  str += '::-webkit-scrollbar-thumb {background-color: #6b6b6b;border-radius: 16px;border: 3px solid #2b2b2b;}';
-  str += '::-webkit-scrollbar-button {display:none;}';
-  str += 'body{visibility: hidden;}';
-  str += '</style>';
-  str += "<link href='src/assets/css/plugin_default.css' rel='stylesheet' type='text/css'>";
-  str += '</head><body>';
-
-  str += generateBodyHTML(d);
-
-  str += '</body></html>';
+        <!--scrollbar styles are inline to prevent the styles flickering in-->
+        <style>
+            ::-webkit-scrollbar {background-color: black;width: 12px;}
+            ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner {background-color: #2b2b2b;}
+            ::-webkit-scrollbar-thumb {background-color: #6b6b6b;border-radius: 16px;border: 3px solid #2b2b2b;}
+            ::-webkit-scrollbar-button {display:none;}
+            body{visibility: hidden;}
+        </style>
+        <link href='src/assets/css/plugin_default.css' rel='stylesheet' type='text/css'>
+      </head>
+      <body>
+        ${generateBodyHTML(d)}
+      </body>
+    </html>
+  `;
 
   $deviceDrawArea.setAttribute('class', `${d.type} draw-area`);
   $deviceDrawArea.contentWindow.document.open();
@@ -57,29 +60,34 @@ function drawDeviceFrame(id) {
 }
 
 function generateBodyHTML(d) {
-  let str = '';
-
   if (d.status === 'ok') {
     try {
-      str += PLUGINS.all[d.type].template({
+      return PLUGINS.all[d.type].template({
+        templates: d.templates,
         data: d.data,
         listName: d.displayName || d.defaultName,
       });
     } catch (err) {
       console.log(err);
-      str += '<h3>Plugin Template Error</h3>';
+      return '<h3>Plugin Template Error</h3>';
     }
   } else {
-    str += `<header><h1>${d.displayName || d.defaultName}</h1></header>`;
-    str += "<div class='not-responding'>";
-    str += `<h2><em>${d.type}</em> is not responding to requests for data.</h2>`;
-    str += `<h3>IP <em>${d.addresses[0]}</em></h3>`;
-    str += `<h3>Port <em>${d.remotePort}</em></h3>`;
-    str += '<hr></div>';
-    str += `<div class="device-info">${PLUGINS.all[d.type].info()}<div>`;
-  }
+    return `
+      <header>
+        <h1>${d.displayName || d.defaultName}</h1>
+      </header>
 
-  return str;
+      <div class='not-responding'>
+        <h2><em>${d.type}</em> is not responding to requests for data.</h2>
+        <h3>IP <em>${d.addresses[0]}</em></h3>
+        <h3>Port <em>${d.port}</em></h3>
+        <hr>
+      </div>
+      <div class="device-info">
+        ${PLUGINS.all[d.type].info()}
+      </div>
+    `;
+  }
 }
 
 module.exports.draw = function draw(device) {
@@ -114,8 +122,10 @@ module.exports.addDeviceToList = function addDeviceToList(device) {
     html += "<div class='status material-icons red'>clear</div>";
   }
 
-  html += `<div class='type'><img height='18px' src='plugins/${d.type}/icon.png'></div>`;
-  html += `<div class='name'>${d.displayName || d.defaultName}</div>`;
+  html += `
+    <div class='type'><img height='18px' src='plugins/${d.type}/icon.png'></div>
+    <div class='name'>${d.displayName || d.defaultName}</div>
+  `;
 
   const elem = document.getElementById(d.id);
   if (elem == null) {
@@ -152,6 +162,10 @@ function switchDevice(id) {
   if (id === undefined) {
     document.getElementById('refresh-device-button').disabled = true;
     document.getElementById('device-settings-table').style.display = 'none';
+    const $activeDevice = document.querySelector('.active-device');
+    if ($activeDevice) {
+      $activeDevice.classList.remove('active-device');
+    }
     return;
   }
 
@@ -161,7 +175,10 @@ function switchDevice(id) {
   const $deviceWrapper = document.getElementById(`device-${i}`);
 
   if (!$deviceWrapper) {
-    const html = `<div class="col device-wrapper" id="device-${i}"><img id="device-${i}-pinned" class="device-pin" src="src/assets/img/outline_push_pin_white_18dp.png"><iframe id="device-${i}-draw-area" class="draw-area"></iframe></div>`;
+    let html = `<div class="col device-wrapper" id="device-${i}">`;
+    html += `<img id="device-${i}-pinned" class="device-pin" src="src/assets/img/outline_push_pin_white_18dp.png">`;
+    html += `<img id="device-${i}-traffic" class="device-traffic-signal" src="src/assets/img/outline_link_white_18dp.png">`;
+    html += `<iframe id="device-${i}-draw-area" class="draw-area"></iframe></div>`;
     document.getElementById('all-devices').insertAdjacentHTML('afterbegin', html);
   }
 
@@ -213,8 +230,8 @@ function updateFields() {
     const fields = activeDevice.plugin.config.fields;
 
     fields.forEach((field) => {
+      // generic input setup
       const $elem = document.createElement('input');
-      $elem.type = 'text';
       $elem.value = activeDevice.fields[field.key];
       $elem.name = field.key;
       $elem.onchange = function onchange(e) {
@@ -223,7 +240,9 @@ function updateFields() {
         saveAll();
       };
 
+      // type specific setup
       if (field.type === 'textinput') {
+        $elem.type = 'text';
         const rowHTML = `<tr><th>${field.label}:</th><td colspan="3" id="${field.key}"></td></tr>`;
         document.getElementById('device-settings-fields').insertAdjacentHTML('beforeend', rowHTML);
         document.getElementById(field.key).appendChild($elem);
@@ -310,6 +329,16 @@ module.exports.selectNextDevice = function selectNextDevice() {
   switchDevice(keys[prevIndex]);
 };
 
+module.exports.trafficSignal = function trafficSignal(device) {
+  const $signal = document.querySelector(`#device-${device.id} .device-traffic-signal`);
+  if ($signal) {
+    $signal.style.opacity = 1;
+    setTimeout(() => {
+      $signal.style.opacity = 0.3;
+    }, 50);
+  }
+};
+
 function populatePluginLists() {
   let typeSelect = '';
   let addSelect = '<option value="" disabled selected hidden>&nbsp;+&nbsp;</option>';