convert speed panel

Humanize.js

@@ -1,4 +1,5 @@
 export function byteSize(count) {
+  if(count === 0) return 'none';
   let unitIndex = 0;
   const units = ['bytes', 'kb', 'mb', 'gb', 'tb', 'pb'];
   while(count > 999) {
@@ -10,6 +11,7 @@ export function byteSize(count) {
   return `${count.toLocaleString()} ${units[unitIndex]}`
 }
 export function hertz(hz) {
+  if(hz === 0) return 'none';
   let unitIndex = 0;
   const units = ['Hz', 'kHz', 'mHz', 'gHz', 'tHz', 'pHz'];
   while(hz >= 1000) {
@@ -21,6 +23,7 @@ export function hertz(hz) {
   return `${hz.toLocaleString()} ${units[unitIndex]}`
 }
 export function bitsPerSecond(bps) {
+  if(bps === 0) return 'none';
   let unitIndex = 0;
   const units = ['baud', 'Kbps', 'Mbps', 'Gbps', 'Tbps', 'Pbps'];
   while(bps > 999) {
@@ -32,6 +35,7 @@ export function bitsPerSecond(bps) {
   return `${bps.toLocaleString()} ${units[unitIndex]}`
 }
 export function durationMilliseconds(milliseconds) {
+  if(milliseconds === 0) return 'none';
   const lookup = [
     {mod: 1000, singular: 'ms', plural: 'ms'},
     {mod: 60, singular: 's', plural: 's'},

Panels/FrequencyGraphPanel.js

@@ -104,7 +104,7 @@ class FrequencyGraphPanel extends BasePanel {
   }
 
   draw = () => {
-    const maxAmps = 280; // inflated for height
+    const maxAmps = 290; // inflated for height
     const ultimateFrequency = this.sampleRate / 2;
     const canvas = this.getElement('frequency-graph');
     const ctx = canvas.getContext('2d');
@@ -166,7 +166,7 @@ class FrequencyGraphPanel extends BasePanel {
       ctx.beginPath();
       ctx.moveTo(rightX, 0);
       ctx.lineTo(rightX, height);
-      ctx.strokeStyle = 'hsla(120, 100%, 100%, 50%)';
+      ctx.strokeStyle = 'hsla(120, 100%, 100%, 10%)';
       ctx.lineWidth = 1;
       ctx.stroke();
 
@@ -193,7 +193,7 @@ class FrequencyGraphPanel extends BasePanel {
         let size = ctx.measureText(text);
         let textX = leftX + (samplePeriodWidth / 2) - (size.width / 2);
         // far enough from prior text?
-        if(textX - lastTextX > size.width) {
+        if(textX - lastTextX > (size.width * 2)) {
           lastTextX = textX;
           ctx.lineWidth = 2;
           ctx.textBaseline = 'bottom';
@@ -226,11 +226,11 @@ class FrequencyGraphPanel extends BasePanel {
     let textX = leftX + (samplePeriodWidth / 2) - (size.width / 2);
 
     // far enough from prior text?
-    if(textX - this.lastCountX > size.width) {
+    if(textX - this.lastCountX > (size.width * 2)) {
       this.lastCountX = textX;
       ctx.lineWidth = 2;
       ctx.textBaseline = 'bottom';
-      let textY = 20;
+      let textY = 10;
       ctx.strokeStyle = 'black';
       ctx.strokeText(text, textX, textY);
       if(count === 0) {

Panels/SpeedPanel.js

@@ -0,0 +1,41 @@
+import BasePanel from './BasePanel';
+import * as Humanize from '../Humanize';
+
+class SpeedPanel extends BasePanel {
+  constructor() {
+    super('Speed');
+    this.addSection('Bits per second');
+
+    this.openField('Packetization');
+    this.addDynamicText('bps-packetization', 'n/a');
+    this.closeField();
+
+    this.openField('Data');
+    this.addDynamicText('bps-data', 'n/a');
+    this.closeField();
+
+    this.addSection('Duration');
+
+    this.openField('Transfer');
+    this.addDynamicText('transfer-duration', 'n/a');
+    this.closeField();
+
+    this.addSection('Maximum');
+
+    this.openField('Packets');
+    this.addDynamicText('max-packets', 'n/a');
+    this.closeField();
+
+    this.openField('Duration');
+    this.addDynamicText('max-duration', 'n/a');
+    this.closeField();
+  };
+
+  setMaximumPackets = (count) => this.setValueById('max-packets', count.toLocaleString());
+  setMaximumDurationMilliseconds = (milliseconds) => this.setValueById('max-duration', Humanize.durationMilliseconds(milliseconds));
+  setPacketizationBitsPerSecond = (bps) => this.setValueById('bps-packetization', Humanize.bitsPerSecond(bps));
+  setDataBitsPerSecond = (bps) => this.setValueById('bps-data', Humanize.bitsPerSecond(bps));
+  setTransferDurationMilliseconds = (milliseconds) => this.setValueById('transfer-duration', Humanize.durationMilliseconds(milliseconds))
+}
+
+export default SpeedPanel;

index.html

@@ -17,17 +17,6 @@
     </div>
     </div>
 
-    <div>
-      <h2>Packetization Configuration</h2>
-      <div>
-        Maximum Data: <span id="packetization-max-bytes"></span><br>
-        Maximum Packets: <span id="packetization-max-packets"></span><br>
-        Maximum Duration: <span id="packetization-max-duration"></span><br>
-        <h4>Speed</h4>
-        Packetization: <span id="packetization-speed-bits-per-second"></span><br>
-        Data Only: <span id="packetization-speed-effective-bits-per-second"></span><br>
-      </div>
-    </div>
     <div>
       <h2>Packet Configuration</h2>
       <div>
@@ -55,10 +44,6 @@
         Packetization Bits: <span id="packetization-bit-count"></span><br>
         Packet Count: <span id="packet-count"></span><br>
         Total Segments: <span id="total-segments"></span><br>
-        <h3>Transfer Time</h3>
-        Per Segment: <span id="segment-transfer-duration"></span><br>
-        Per Packet: <span id="packet-transfer-duration"></span><br>
-        Total: <span id="data-transfer-duration"></span><br>
         <h3>Utilization</h3>
         Unused bits in last packet: <span id="last-packet-unused-bit-count"></span><br>
       </div>

index.js

@@ -16,6 +16,7 @@ import PacketizationPanel from "./Panels/PacketizationPanel";
 import AvailableFskPairsPanel from "./Panels/AvailableFskPairsPanel";
 import FrequencyGraphPanel from "./Panels/FrequencyGraphPanel";
 import GraphConfigurationPanel from './Panels/GraphConfigurationPanel'
+import SpeedPanel from './Panels/SpeedPanel';
 import {
   bitsToInt,
   bitsToBytes,
@@ -66,9 +67,11 @@ const packetizationPanel = new PacketizationPanel();
 const availableFskPairsPanel = new AvailableFskPairsPanel();
 const frequencyGraphPanel = new FrequencyGraphPanel();
 const graphConfigurationPanel = new GraphConfigurationPanel();
+const speedPanel = new SpeedPanel();
 
 function handleWindowLoad() {
   const panelContainer = document.getElementById('panel-container');
+  panelContainer.prepend(speedPanel.getDomElement());
   panelContainer.prepend(graphConfigurationPanel.getDomElement());
   panelContainer.prepend(frequencyGraphPanel.getDomElement());
   panelContainer.prepend(availableFskPairsPanel.getDomElement());
@@ -122,6 +125,12 @@ function handleWindowLoad() {
   frequencyGraphPanel.setAmplitudeThreshold(signalPanel.getAmplitudeThreshold());
   frequencyGraphPanel.setDurationMilliseconds(graphConfigurationPanel.getDurationMilliseconds());
 
+  speedPanel.setMaximumPackets(0);
+  speedPanel.setMaximumDurationMilliseconds(0);
+  speedPanel.setDataBitsPerSecond(0);
+  speedPanel.setPacketizationBitsPerSecond(0);
+  speedPanel.setTransferDurationMilliseconds(0);
+
   AudioReceiver.setTimeoutMilliseconds(signalPanel.getTimeoutMilliseconds());
 
 
@@ -173,6 +182,7 @@ function handleWindowLoad() {
 
   availableFskPairsPanel.addEventListener('change', (event) => {
     frequencyGraphPanel.setFskPairs(event.selected);
+    configurationChanged();
   });
   graphConfigurationPanel.addEventListener('pauseAfterEndChange', (event) => {
     if(!frequencyGraphPanel.isRunning()) {
@@ -309,6 +319,14 @@ function updatePacketUtils() {
     packetEncodingBitCount: ERROR_CORRECTION_BLOCK_SIZE,
     packetDecodingBitCount: ERROR_CORRECTION_DATA_SIZE,
   });
+  speedPanel.setMaximumPackets(PacketUtils.getMaxPackets());
+  speedPanel.setMaximumDurationMilliseconds(PacketUtils.getMaxDurationMilliseconds());
+  speedPanel.setDataBitsPerSecond(PacketUtils.getEffectiveBaud());
+  speedPanel.setPacketizationBitsPerSecond(PacketUtils.getBaud());
+  speedPanel.setTransferDurationMilliseconds(PacketUtils.getDataTransferDurationMillisecondsFromByteCount(
+    textToBytes(messagePanel.getMessage()).length
+  ));
+
 }
 function updatePacketStats() {
   const text = messagePanel.getMessage();
@@ -316,14 +334,6 @@ function updatePacketStats() {
   const byteCount = text.length;
   const bitCount = PacketUtils.getPacketizationBitCountFromBitCount(bits.length);;
 
-  // # Packetization
-  document.getElementById('packetization-max-bytes').innerText = Humanize.byteSize(PacketUtils.getDataMaxByteCount());
-  document.getElementById('packetization-max-packets').innerText = PacketUtils.getMaxPackets().toLocaleString();
-  document.getElementById('packetization-max-duration').innerText = Humanize.durationMilliseconds(PacketUtils.getMaxDurationMilliseconds());
-  // ## Packetization Speed
-  document.getElementById('packetization-speed-bits-per-second').innerText = Humanize.bitsPerSecond(PacketUtils.getBaud());
-  document.getElementById('packetization-speed-effective-bits-per-second').innerText = Humanize.bitsPerSecond(PacketUtils.getEffectiveBaud());
-
   // Data
   document.getElementById('original-byte-count').innerText = textToBytes(text).length.toLocaleString();
   document.getElementById('packetization-byte-count').innerText = PacketUtils.getPacketizationByteCountFromBitCount(bits.length).toLocaleString();
@@ -345,9 +355,6 @@ function updatePacketStats() {
   document.getElementById('packet-unused-bit-count').innerText = PacketUtils.getPacketUnusedBitCount().toLocaleString();
   document.getElementById('last-packet-unused-bit-count').innerText = PacketUtils.fromByteCountGetPacketLastUnusedBitCount(byteCount).toLocaleString();
   document.getElementById('last-segment-unused-bit-count').innerText = PacketUtils.getPacketLastSegmentUnusedBitCount().toLocaleString()
-  document.getElementById('packet-transfer-duration').innerText = Humanize.durationMilliseconds(PacketUtils.getPacketDurationMilliseconds());
-  document.getElementById('segment-transfer-duration').innerText = Humanize.durationMilliseconds(PacketUtils.getSegmentDurationMilliseconds());
-  document.getElementById('data-transfer-duration').innerText = Humanize.durationMilliseconds(PacketUtils.getDataTransferDurationMilliseconds(bitCount));
   document.getElementById('segments-per-packet').innerText = PacketUtils.getPacketSegmentCount().toLocaleString();
   frequencyGraphPanel.setSamplePeriodsPerGroup(PacketUtils.getPacketSegmentCount());
   document.getElementById('total-segments').innerText = getTotalSegmentCount(bitCount).toLocaleString();