show selected channel data

index.html

@@ -50,6 +50,13 @@
       </label><br>
       Max Segments Displayed: <input id="max-bits-displayed-on-graph" type="number" min="1" max="2000"><br>
     </div>
+    <div>
+      <h2>Selected</h2>
+      Channel: <span id="selected-channel">N/A</span><br>
+      Segment: <span id="selected-segment">N/A</span><br>
+      Bit: <span id="selected-bit">N/A</span><br>
+      <div id="selected-samples"></div>
+    </div>
     <div>
       <h2>Configuration</h2>
       Segment Duration: <input id="bit-duration-text" type="number" min="0" max="1000" value="190">ms<br>

index.js

@@ -1357,8 +1357,106 @@ function handleReceivedChannelGraphClick(e) {
   const {channelIndex, segmentIndex} = getChannelAndSegment(e);
   CHANNEL_SELECTED = channelIndex;
   SEGMENT_SELECTED = segmentIndex;
+  const channels = getChannels();
+  const channelCount = channels.length;
+
+  const selectedSamples = document.getElementById('selected-samples');
+  selectedSamples.innerHTML = "";
+
+  function addLowHigh(info, low, high) {
+    const div = document.createElement('div');
+    div.className = 'low-high-set'
+    const infoDiv = document.createElement('div');
+    infoDiv.className = 'ingo';
+    const lowDiv = document.createElement('div');
+    lowDiv.className = 'low';
+    const highDiv = document.createElement('div');
+    highDiv.className = 'high';
+    infoDiv.innerText = info;
+    lowDiv.innerText = low;
+    highDiv.innerText = high;
+    if(low === 255) lowDiv.classList.add('max');
+    if(high === 255) highDiv.classList.add('max');
+    if(typeof low === 'number' && typeof high === 'number') {
+      if(low > high) lowDiv.classList.add('highest');
+      else highDiv.classList.add('highest');
+    }
+    div.appendChild(infoDiv);
+    div.appendChild(lowDiv);
+    div.appendChild(highDiv);
+    selectedSamples.appendChild(div);
+  }
+
+  if(CHANNEL_SELECTED !== -1) {
+    addLowHigh('', 'Low', 'High');
+    addLowHigh('Hz',
+      channels[CHANNEL_SELECTED][0].toLocaleString(),
+      channels[CHANNEL_SELECTED][1].toLocaleString()
+    )
+  }
+  if(SEGMENT_SELECTED === -1) {
+    document.getElementById('selected-segment').innerText = 'N/A';
+  } else {
+    document.getElementById('selected-segment').innerText = SEGMENT_SELECTED;
+    if(CHANNEL_SELECTED !== -1) {
+
+      const bitIndex = CHANNEL_SELECTED + (SEGMENT_SELECTED * channelCount);
+      document.getElementById('selected-bit').innerText = bitIndex.toLocaleString();
+
+      const samples = frequencyOverTime
+        .filter(fot => fot.segmentIndex === SEGMENT_SELECTED)
+        .map(fot => fot.pairs[CHANNEL_SELECTED]);
+      samples.forEach(([low, high], i) => {
+        if(i === 0) {
+          addLowHigh(`Amplitude ${i}`, low, high);
+        } else {
+          [priorLow, priorHigh] = samples[i - 1];
+          addLowHigh(`Amplitude ${i}`, 
+            priorLow === low ? '"' : low,
+            priorHigh === high ? '"' : high
+          );
+          
+        }
+      });
+
+      const expectedBit = EXPECTED_ENCODED_BITS[bitIndex];
+      const receivedBit = packetReceivedBits[bitIndex];
+      addLowHigh('Expected Bit', expectedBit === 1 ? '' : '0', expectedBit === 1 ? '1' : '')
+      addLowHigh('Received Bit', receivedBit === 1 ? '' : '0', receivedBit === 1 ? '1' : '')
+
+      const sums = samples.reduce((sum, [low, high]) => {
+        sum[0]+= low;
+        sum[1]+= high;
+        return sum;
+      }, [0, 0]);
+      addLowHigh('Total', sums[0], sums[1]);
+
+      const sorts = samples.reduce((sum, [low, high]) => {
+        sum.low.push(low);
+        sum.high.push(high)
+        return sum;
+      }, {low: [], high: []});
+      sorts.low.sort(compareNumbers);
+      sorts.high.sort(compareNumbers);
+      const middleIndex = Math.floor(samples.length / 2);
+
+      addLowHigh('Median', sorts.low[middleIndex], sorts.high[middleIndex]);
+      
+    }
+  }
+
+  if(CHANNEL_SELECTED === -1) {
+    document.getElementById('selected-channel').innerText = 'N/A';
+  } else {
+    document.getElementById('selected-channel').innerText = CHANNEL_SELECTED;
+  }
+
+
   requestAnimationFrame(drawFrequencyData.bind(null, true));
 }
+function compareNumbers(a, b) {
+  return a - b;
+}
 function getChannelAndSegment(e) {
   const {width, height} = e.target.getBoundingClientRect();
   const {x,y} = mouseXy(e);

style.css

@@ -48,3 +48,31 @@ ol {
   font-family: monospace;
   width: 250px;
 }
+
+#selected-samples {
+  width: 200px;
+}
+.low-high-set {
+  display: flex;
+  gap: 10px;
+  justify-content: space-between;
+}
+.low-high-set .max {
+  color: yellow;
+  font-style: bold;
+}
+.low-high-set .highest {
+  color: rgb(207, 207, 21);
+}
+.low-high-set .low {
+  min-width: 45px;
+  text-align: center;
+}
+.low-high-set .info {
+  min-width: 45px;
+  text-align: right;
+}
+.low-high-set .high {
+  min-width: 45px;
+  text-align: center;
+}