diff --git a/src/assets/css/index.css b/src/assets/css/index.css index 7b461ac..a574c13 100644 --- a/src/assets/css/index.css +++ b/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; diff --git a/src/assets/img/outline_link_white_18dp.png b/src/assets/img/outline_link_white_18dp.png new file mode 100644 index 0000000..ba63727 Binary files /dev/null and b/src/assets/img/outline_link_white_18dp.png differ diff --git a/src/device.js b/src/device.js index f098a97..1fe2267 100644 --- a/src/device.js +++ b/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; diff --git a/src/view.js b/src/view.js index c8e5bd0..be510fa 100644 --- a/src/view.js +++ b/src/view.js @@ -171,7 +171,10 @@ function switchDevice(id) { const $deviceWrapper = document.getElementById(`device-${i}`); if (!$deviceWrapper) { - const html = `

`;
+ html += `
`;
+ html += `