From 838761ae82665d5127f688a600ad930d951183ab Mon Sep 17 00:00:00 2001 From: Lewis Moten Date: Sun, 12 May 2024 18:37:06 -0400 Subject: [PATCH] convert speed panel --- Humanize.js | 4 ++++ Panels/FrequencyGraphPanel.js | 10 ++++----- Panels/SpeedPanel.js | 41 +++++++++++++++++++++++++++++++++++ index.html | 15 ------------- index.js | 29 +++++++++++++++---------- 5 files changed, 68 insertions(+), 31 deletions(-) create mode 100644 Panels/SpeedPanel.js diff --git a/Humanize.js b/Humanize.js index c2ead57..743955b 100644 --- a/Humanize.js +++ b/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'}, diff --git a/Panels/FrequencyGraphPanel.js b/Panels/FrequencyGraphPanel.js index 4d4ef16..7396464 100644 --- a/Panels/FrequencyGraphPanel.js +++ b/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) { diff --git a/Panels/SpeedPanel.js b/Panels/SpeedPanel.js new file mode 100644 index 0000000..ade17a0 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/index.html b/index.html index f9504c3..326d05d 100644 --- a/index.html +++ b/index.html @@ -17,17 +17,6 @@ -
-

Packetization Configuration

-
- Maximum Data:
- Maximum Packets:
- Maximum Duration:
-

Speed

- Packetization:
- Data Only:
-
-

Packet Configuration

@@ -55,10 +44,6 @@ Packetization Bits:
Packet Count:
Total Segments:
-

Transfer Time

- Per Segment:
- Per Packet:
- Total:

Utilization

Unused bits in last packet:
diff --git a/index.js b/index.js index 7867161..fe36de7 100644 --- a/index.js +++ b/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();