add live graph to shure plugin

plugins/shure/channel.js

@@ -8,6 +8,7 @@ class Channel {
     this.rx_rf_lvl = 0;
     this.rf_antenna = 0;
     this.tx_type = 0;
+    this.rx_graph_bars = 0;
   }
 }
 

plugins/shure/main.js

@@ -21,6 +21,10 @@ exports.ready = function ready(_device) {
   const device = _device;
   device.data.channelCount = 0;
   device.data.channels = [{}, new Channel(), new Channel(), new Channel(), new Channel()];
+
+  device.send('< GET 0 ALL >');
+  device.send('< SET 0 METER_RATE 00100 >');
+  device.send('< SAMPLE 0 AUDIO_LVL>');
 };
 
 exports.data = function data(_device, message) {
@@ -31,6 +35,8 @@ exports.data = function data(_device, message) {
     return;
   }
 
+  // console.log(msgStr);
+
   msgStr = msgStr.slice(2).slice(0, -1);
   const msgs = msgStr.split('><');
 
@@ -84,23 +90,23 @@ exports.data = function data(_device, message) {
 exports.update = function update(device, doc, updateType, data) {
   for (let i = 1; i < data.channels.length; i++) {
     const channel = data.channels[i];
-
-    const $rf = doc.getElementById(`ch-${i}-rf`);
-    if ($rf) {
-      $rf.style.height = 90 - (channel.rx_rf_lvl + 90) * 2;
-    }
-
     const $audio = doc.getElementById(`ch-${i}-audio`);
+    const $audioText = doc.getElementById(`ch-${i}-audio-text`);
     if ($audio) {
       $audio.style.height = 90 - channel.audio_lvl * 2;
     }
+    if ($audioText) {
+      $audioText.textContent = channel.audio_lvl;
+    }
 
     const $rfA = doc.getElementById(`ch-${i}-a`);
     const $rfB = doc.getElementById(`ch-${i}-b`);
+    let rfClass = '';
 
     if ($rfA) {
       if (channel.rf_antenna.charAt(0) === 'A') {
         $rfA.style.color = '#53c3c3';
+        rfClass = 'color-1';
       } else {
         $rfA.style.color = '#333';
       }
@@ -108,10 +114,32 @@ exports.update = function update(device, doc, updateType, data) {
     if ($rfB) {
       if (channel.rf_antenna.charAt(1) === 'B') {
         $rfB.style.color = '#53c3c3';
+        rfClass = 'color-2';
       } else {
         $rfB.style.color = '#333';
       }
     }
+
+    const $rf = doc.getElementById(`ch-${i}-rf`);
+    const $rfGraph = doc.getElementById(`ch-${i}-graph`);
+    const $rfText = doc.getElementById(`ch-${i}-rf-text`);
+    const rfHeight = 90 - (channel.rx_rf_lvl + 90) * 2;
+    if ($rf) {
+      $rf.style.height = rfHeight;
+    }
+    if ($rfGraph) {
+      if ($rfGraph.childElementCount > 115) {
+        $rfGraph.removeChild($rfGraph.firstElementChild);
+      }
+      $rfGraph.insertAdjacentHTML(
+        'beforeend',
+        `<div class="rf-graph-bar ${rfClass}" style="height: ${channel.rx_rf_lvl + 100}px;"></div>`
+      );
+      channel.rx_graph_bars++;
+    }
+    if ($rfText) {
+      $rfText.textContent = channel.rx_rf_lvl;
+    }
   }
 };
 

plugins/shure/styles.css

@@ -72,7 +72,7 @@ table td {
   border-radius: 2px;
 }
 .batt-knob.green {
-  background-color: greenyellow;
+  background-color: #adff2f;
 }
 .batt-bar {
   height: 26px;
@@ -99,3 +99,25 @@ small {
 small small {
   color: #444;
 }
+
+.rf-graph {
+  height: 80px;
+  vertical-align: bottom;
+  text-align: left;
+}
+.rf-graph-bar {
+  padding: 0px;
+  margin: 0px;
+  width: 1px;
+  height: 1px;
+  background: #383943;
+  display: inline-block;
+}
+.color-1 {
+  background: #292662;
+  border-top: #554ed4 1px solid;
+}
+.color-2 {
+  background: #283636;
+  border-top: #50c3c3 1px solid;
+}

plugins/shure/template.ejs

@@ -24,7 +24,7 @@
           id="ch-<%= i %>-rf"
           style="height: <%= 90- ((ch.rx_rf_lvl + 90) * 2) %>"></div>
       </div>
-      <small><%= ch.rx_rf_lvl %><br /><small>dBm</small></small>
+      <small><span id="ch-<%= i %>-rf-text"><%= ch.rx_rf_lvl %></span><br /><small>dBm</small></small>
     </td>
     <td style="width: 40px">
       <div class="rf-indicator-wrapper">&nbsp;</div>
@@ -33,9 +33,9 @@
         <div
           class="bar"
           id="ch-<%= i %>-audio"
-          style="height: <%= 90- (ch.audio_lvl * 2) %>"></div>
+          style="height: <%= 90- (ch.rx_rf_lvl * 2) %>"></div>
       </div>
-      <small><%= ch.audio_lvl %><br /><small>dBFS</small></small>
+      <small><span id="ch-<%= i %>-audio-text"><%= ch.audio_lvl %></span><br /><small>dBFS</small></small>
     </td>
     <td style="width: 40px">
       <div class="rf-indicator-wrapper">&nbsp;</div>
@@ -43,7 +43,12 @@
       <div class="bar-wrapper pink">
         <div class="bar" style="height: <%= 60- (ch.audio_gain * 1.4) %>"></div>
       </div>
-      <small><%= ch.audio_gain %><br /><small>dB</small></small>
+      <small id=""><%= ch.audio_gain %><br /><small>dB</small></small>
+    </td>
+  </tr>
+  <tr>
+    <td colspan="3" id="ch-<%= i %>-graph" class="rf-graph">
+     
     </td>
   </tr>
   <tr>