diff --git a/index.html b/index.html index 7000668..a9c9075 100644 --- a/index.html +++ b/index.html @@ -30,6 +30,7 @@ +
diff --git a/src/assets/css/index.css b/src/assets/css/index.css index 9ab1a51..3109ac9 100644 --- a/src/assets/css/index.css +++ b/src/assets/css/index.css @@ -182,6 +182,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 { diff --git a/src/device.js b/src/device.js index 9eb55f6..bd9e9c1 100644 --- a/src/device.js +++ b/src/device.js @@ -320,7 +320,10 @@ function infoUpdate(device, param, value) { } module.exports.infoUpdate = infoUpdate; +let $networkIndicatorDot; + function heartbeat() { + $networkIndicatorDot = document.getElementById('network-indicator-dot'); Object.keys(devices).forEach((deviceID) => { const d = devices[deviceID]; @@ -342,9 +345,23 @@ function heartbeat() { 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(); + $networkIndicatorDot.style.background = 'green'; + } + }); +} +setInterval(networkTick, 5); + function isDeviceAlreadyAdded(newDevice) { let deviceAlreadyAdded = false;