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();