Merge branch 'main' of https://github.com/stagehacks/Cue-View

src/assets/css/index.css

@@ -185,6 +185,15 @@ a {
 #device-settings #device-settings-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 {
@@ -193,11 +202,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;

src/device.js

@@ -44,8 +44,10 @@ function registerDevice(newDevice, discoveryMethod) {
     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);
     },
@@ -130,7 +132,12 @@ function initDeviceConnection(id) {
       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();
@@ -159,6 +166,9 @@ function initDeviceConnection(id) {
     });
     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') {
@@ -175,6 +185,9 @@ function initDeviceConnection(id) {
     });
 
     device.send = (data) => {
+      device.sendQueue.push(data);
+    };
+    device.sendNow = (data) => {
       device.connection.send(Buffer.from(data), device.port, device.addresses[0], (err) => {
         // console.log(err);
       });
@@ -324,9 +337,28 @@ function heartbeat() {
       }
       d.lastHeartbeat = Date.now();
     }
+
+    if (d.sendQueue.length > 0 && d.sendNow) {
+      d.sendNow(d.sendQueue[0]);
+      d.sendQueue.shift();
+    }
+  });
+  document.getElementById('network-indicator-dot').style.background = '#111';
+}
+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(heartbeat, 100);
+setInterval(networkTick, 10);
 
 function isDeviceAlreadyAdded(newDevice) {
   let deviceAlreadyAdded = false;

src/view.js

@@ -171,7 +171,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);
   }
 
@@ -305,6 +308,13 @@ module.exports.selectNextDevice = function selectNextDevice() {
   switchDevice(keys[prevIndex]);
 };
 
+module.exports.trafficSignal = function trafficSignal(device) {
+  document.querySelector(`#device-${device.id} .device-traffic-signal`).style.opacity = 1;
+  setTimeout(() => {
+    document.querySelector(`#device-${device.id} .device-traffic-signal`).style.opacity = 0.3;
+  }, 50);
+};
+
 function populatePluginLists() {
   let typeSelect = '';
   let addSelect = '<option value="" disabled selected hidden>&nbsp;+&nbsp;</option>';