show packet error stats

Panels/BasePanel.js

@@ -162,20 +162,32 @@ class BasePanel {
     canvas.height = height;
     return this.append(canvas);
   }
-  addProgressBar = (id, percent) => {
+  addProgressBar = (id, ...percents) => {
     const progressBar = document.createElement('div');
     progressBar.className = 'progress-container';
-    const bar = document.createElement('div');
-    bar.id = this.childId(id);
-    bar.className = 'progress-bar';
-    bar.style.width = `${clamp(percent, 0, 1) * 100}%`;
-    progressBar.append(bar);
+    let sum = 0;
+    for(let i = 0; i < percents.length; i++) {
+      let percent = percents[i];
+      percent = clamp(percent, 0, 1 - sum);
+      sum += percent;
+      const bar = document.createElement('div');
+      bar.id = this.childId(`${id}-${i}`);
+      bar.className = 'progress-bar';
+      bar.style.width = `${clamp(percent, 0, 1) * 100}%`;
+      progressBar.append(bar);
+    }
     this.append(progressBar);
   }
-  setProgressById = (id, percent) => {
-    const element = document.getElementById(this.childId(id));
-    if(!element) throw new Error(`Unable to find ${id}`);
-    element.style.width = `${clamp(percent, 0, 1) * 100}%`;
+  setProgressById = (id, ...percents) => {
+    let sum = 0;
+    for(let i = 0; i < percents.length; i++) {
+      let percent = percents[i];
+      percent = clamp(percent, 0, 1 - sum);
+      sum += percent;
+      const element = document.getElementById(this.childId(`${id}-${i}`));
+      if(!element) throw new Error(`Unable to find ${id}`);
+      element.style.width = `${clamp(percent, 0, 1) * 100}%`;
+    }
   }
   childId = id => `${this.id}-${id}`;
 

Panels/PacketErrorPanel.js

@@ -0,0 +1,52 @@
+import BasePanel from './BasePanel';
+
+class PacketErrorPanel extends BasePanel {
+  constructor() {
+    super('Packet Errors');
+
+    this.openField('CRC Check');
+    this.addDynamicText('crc', 'N/A');
+    this.closeField();
+
+    this.openField('CRC Size Check');
+    this.addDynamicText('crc-size', 'N/A');
+    this.closeField();
+
+    this.openField('Failed Packets');
+    this.addDynamicText('failed-packet-count', 'N/A');
+    this.addDynamicText('failed-packet-count-percent', '');
+    this.closeField();
+
+    this.addSection('Packet Retransmission')
+
+    this.addRadios('repeat', [
+      { text: 'Automatic Repeat Request', value: 'arq', checked: true, eventName: 'hi' },
+      { text: 'Manual Repeat Request', value: 'manual', checked: true, eventName: 'hi' }
+    ]);
+  
+    this.openField('Packets');
+    this.addInputText('request-packet-indexes', '');
+    this.closeField();
+
+    this.addButton('request-button', 'Request', 'requestPackets');
+  }
+  reset = () => {
+    this.setFailedPacketIndeces([]);
+    this.setSizeCrcUnavailable();
+    this.setCrcUnavailable();
+  }
+  setFailedPacketIndeces = (packetIndexes) => {
+    this.setValueById('request-packet-indexes', packetIndexes.join(', '));
+    this.setValueById('failed-packet-count', packetIndexes.length.toLocaleString());
+  }
+  getFailedPacketIndeces = () => {
+    let text = this.getValueById('request-packet-indexes');
+    return text.replace(/\s+/g, '').split(',').map(Number);
+  }
+  setCrcPassed = (passed) => this.setValueById('crc', passed ? 'Pass' : 'Fail');
+  setCrcUnavailable = () => this.setValueById('crc', 'N/A');
+  setSizeCrcPassed = (passed) => this.setValueById('crc-size', passed ? 'Pass' : 'Fail');
+  setSizeCrcUnavailable = () => this.setValueById('crc-size', 'N/A');
+}
+
+export default PacketErrorPanel;

Panels/ReceivePanel.js

@@ -15,7 +15,7 @@ class ReceivePanel extends BasePanel {
     this.addNewLine();
     this.addDynamicText('id-state', 'Offline.');
 
-    this.addProgressBar('progress', .50);
+    this.addProgressBar('progress', .50, .25);
 
     this.addCode('text', '', 'small');
     this.addImage('image', undefined, {width: 32, height: 32});
@@ -69,7 +69,9 @@ class ReceivePanel extends BasePanel {
   // stopWaitingForSignal = () => {
   //   AudioReceiver.stop();
   // }
-  setProgress = percent => this.setProgressById('progress', percent);
+  setProgress = (percent, percent2 = 0) => {
+    this.setProgressById('progress', percent, percent2);
+  }
   setReceivedHtml = (html) => this.setHtmlById('text', html);
   setReceivedBytes = bytes => {
     if(this.dataType === 'text') {
@@ -84,6 +86,30 @@ class ReceivePanel extends BasePanel {
     this.display('text', value === 'text');
     this.display('image', value === 'image');
   }
+
+  setSuccessfulPacketCount = (count) => {
+    this.successfulPacketCount = count;
+    this.updateProgressBar();
+  }
+  setExpectedPacketCount = (count) => {
+    this.expectedPacketCount = count;
+    this.updateProgressBar();
+  }
+  setFailedPacketCount = (count) => {
+    this.failedPacketCount = count;
+    this.updateProgressBar();
+  }
+  updateProgressBar = () => {
+    const total = this.expectedPacketCount;
+    if(total === 0) {
+      this.setProgress(0, 0);
+    }
+    this.setProgress(
+      this.successfulPacketCount/total,
+      this.failedPacketCount/total
+    )
+  }
+
 }
 
 export default ReceivePanel;