mirror of
https://github.com/lewismoten/data-over-audio.git
synced 2026-03-17 14:46:00 +08:00
wip: big refactor
This commit is contained in:
Lewis Moten
304
index.html
304
index.html
@@ -4,80 +4,89 @@
|
||||
<head>
|
||||
<title>Data Over Audio</title>
|
||||
<link rel="stylesheet" type="text/css" href="style.css" />
|
||||
<script src="index.js" type="text/javascript"></script>
|
||||
<script src="index.js" type="module" type="text/javascript"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Data Over Audio</h1>
|
||||
<div class="panels">
|
||||
<div>
|
||||
<h2>Message</h2>
|
||||
<label>
|
||||
<input type="checkbox" id="send-via-speaker">Speakers
|
||||
</label><br />
|
||||
<input type="text" id="text-to-send">
|
||||
<button id="send-button">Send</button><br />
|
||||
<div class="raw-data" id="sent-data"></div><br />
|
||||
</div>
|
||||
<div>
|
||||
<h2>Data</h2>
|
||||
Original Bytes: <span id="original-byte-count"></span><br>
|
||||
Packetization Bytes: <span id="packetization-byte-count"></span><br>
|
||||
Packetization Bits: <span id="packetization-bit-count"></span><br>
|
||||
Bits per Packet: <span id="packet-bit-count"></span><br>
|
||||
Data Bits per Packet: <span id="packet-data-bit-count"></span><br>
|
||||
Error Correction: <span id="packet-error-correction"></span><br>
|
||||
Error Blocks per packet: <span id="packet-error-block-count"></span><br>
|
||||
Error Bits per block: <span id="packet-error-bits-per-block"></span><br>
|
||||
Error Correcting Bits per Packet: <span id="packet-error-bit-count"></span><br>
|
||||
Unused bits per packet: <span id="packet-unused-bit-count"></span><br>
|
||||
Unused bits in last packet: <span id="last-packet-unused-bit-count"></span><br>
|
||||
Last segment unused channels in packet: <span id="last-segment-unused-channel-count"></span><br>
|
||||
Packet Count: <span id="packet-count"></span><br>
|
||||
Segments Per Packet: <span id="segments-per-packet"></span><br>
|
||||
Total Segments: <span id="total-segments"></span><br>
|
||||
Segment Duration: <span id="segment-transfer-duration"></span><br>
|
||||
Packet Duration: <span id="packet-transfer-duration"></span><br>
|
||||
Total Duration: <span id="data-transfer-duration"></span><br>
|
||||
</div>
|
||||
<div>
|
||||
<h2>Error Correcting</h2>
|
||||
<div class="raw-data" id="error-correcting-data"></div><br />
|
||||
</div>
|
||||
<div>
|
||||
<h2 >Bits Sent</h2>
|
||||
<div class="raw-data" id="actual-bits-to-send"></div><br />
|
||||
</div>
|
||||
<div>
|
||||
<label>
|
||||
<input type="checkbox" id="is-listening-checkbox">Listening
|
||||
</label>
|
||||
<h2>Bits Received</h2>
|
||||
<div class="raw-data" id="received-raw-bits"></div><br />
|
||||
Error Percent: <span id="received-raw-bits-error-percent">N/A</span>%
|
||||
</div>
|
||||
<div>
|
||||
<h2>Encoded Bits Received</h2>
|
||||
<div class="raw-data" id="received-encoded-bits"></div><br />
|
||||
Error Percent: <span id="received-encoded-bits-error-percent">N/A</span>%
|
||||
</div>
|
||||
<div>
|
||||
<h2>Decoded Bits Received</h2>
|
||||
<div class="raw-data" id="received-decoded-bits"></div><br />
|
||||
Error Percent: <span id="received-decoded-bits-error-percent">N/A</span>%<br />
|
||||
</div>
|
||||
<div>
|
||||
<h2>Decoded</h2>
|
||||
Bytes: <span id="received-packet-original-bytes">N/A</span><br>
|
||||
Length CRC-8: <span id="received-packet-original-bytes-crc">N/A</span><br>
|
||||
<div class="progress-container">
|
||||
<div id="received-progress" class="progress-bar"></div>
|
||||
<h2>Communications</h2>
|
||||
<div>
|
||||
<h4>Send</h4>
|
||||
<label>
|
||||
<input type="radio" name="send-via" id="send-via-analyzer" checked>Analyzer
|
||||
</label><br />
|
||||
<label>
|
||||
<input type="radio" name="send-via" id="send-via-speaker">Speakers
|
||||
</label><br />
|
||||
<h4>Receive</h4>
|
||||
<label>
|
||||
<input type="checkbox" id="is-listening-checkbox">Listening
|
||||
</label>
|
||||
|
||||
</div>
|
||||
Text:
|
||||
<div class="raw-data" id="decoded-text"></div><br />
|
||||
</div>
|
||||
<div>
|
||||
</div>
|
||||
<div>
|
||||
<h2>Message</h2>
|
||||
<div>
|
||||
<input type="text" id="text-to-send">
|
||||
<button id="send-button">Send</button><br />
|
||||
<h4>Received</h4>
|
||||
<div class="progress-container">
|
||||
<div id="received-progress" class="progress-bar"></div>
|
||||
</div>
|
||||
<div class="raw-data-small" id="decoded-text"></div><br />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2>Configuration</h2>
|
||||
<div>
|
||||
<h4>Audio</h4>
|
||||
Wave Form: <select id="wave-form" value="sine">
|
||||
<option value="sine">Sine Wave</option>
|
||||
<option value="square">Square Wave</option>
|
||||
<option value="sawtooth">Sawtooth Wave</option>
|
||||
<option value="triangle">Triangle Wave</option>
|
||||
</select><br>
|
||||
Minimum Frequency: <input id="minimum-frequency" type="number" min="20" max="20000" value="900"><br>
|
||||
Maximum Frequency: <input id="maximum-frequency" type="number" min="20" max="20000" value="1200"><br>
|
||||
Segment Duration: <input id="bit-duration-text" type="number" min="0" max="1000" value="190">ms<br>
|
||||
FFT Size: 2^<input id="fft-size-power-text" type="number" min="5" max="15" value="90"><br>
|
||||
Frequency Resolution Multiplier: <input id="frequency-resolution-multiplier" type="number" min="1" max="20"
|
||||
value="2"><br>
|
||||
Channel Frequency Resolution Padding: <input id="channel-frequency-resolution-padding" type="number" min="0"
|
||||
max="20"><br>
|
||||
|
||||
<h4>Packetization</h4>
|
||||
Packet Size:
|
||||
2^<input id="packet-size-power" type="number" min="0" max="16">
|
||||
<span id="packet-size"></span>
|
||||
<br>
|
||||
<h4>Receiving</h4>
|
||||
Amplitude Threshold: <input id="amplitude-threshold-text" type="number" min="0" max="100" value="75"><br>
|
||||
Last Segment Percent: <input id="last-bit-percent" type="number" min="0" max="100" value="90">%<br>
|
||||
Smoothing Time Constant: <input id="smoothing-time-constant-text" type="number" min="0.00" max="1.00"
|
||||
step="0.01" value="0.00"><br>
|
||||
<h4>Encoding</h4>
|
||||
<label>
|
||||
<input type="checkbox" id="periodic-interleaving" checked>Interleaving
|
||||
</label><br />
|
||||
<label>
|
||||
<input type="checkbox" id="error-correction-hamming" checked>Error Correction
|
||||
</label><br>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2>Channels</h2>
|
||||
<div>
|
||||
<ol id="channel-list" start="0"></ol>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart">
|
||||
<h2>Frequency Graph</h2>
|
||||
<div>
|
||||
<canvas id="received-graph" width="800" height="150"></canvas><br>
|
||||
<canvas id="received-channel-graph" width="800" height="300"></canvas><br>
|
||||
<label>
|
||||
@@ -85,80 +94,131 @@
|
||||
</label><br>
|
||||
Max Segments Displayed: <input id="max-bits-displayed-on-graph" type="number" min="1" max="2000"><br>
|
||||
</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>
|
||||
Bytes per packet: <span id="bytes-per-packet"></span><br>
|
||||
Bits per Packet: <span id="bits-per-packet"></span><br>
|
||||
<h4>Encoding</h4>
|
||||
Packet Encoding: <span id="packet-encoding"></span><br>
|
||||
Bits per block: <span id="packet-encoding-bits-per-block"></span><br>
|
||||
Blocks per packet: <span id="packet-encoding-block-count"></span><br>
|
||||
Encoding bits per Packet: <span id="packet-encoding-bit-count"></span><br>
|
||||
<h4>Utilization</h4>
|
||||
Data Bits per Packet: <span id="packet-data-bit-count"></span><br>
|
||||
Unused bits per packet: <span id="packet-unused-bit-count"></span><br>
|
||||
<h4>Segments</h4>
|
||||
Segments Per Packet: <span id="segments-per-packet"></span><br>
|
||||
Bits per segment: <span id="bits-per-segment">N/A</span><br />
|
||||
Last segment unused bits: <span id="last-segment-unused-bit-count"></span><br>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2>Data</h2>
|
||||
<div>
|
||||
Original Bytes: <span id="original-byte-count"></span><br>
|
||||
Packetization Bytes: <span id="packetization-byte-count"></span><br>
|
||||
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>
|
||||
</div>
|
||||
<div>
|
||||
<h2>Original Data to send</h2>
|
||||
<div>
|
||||
<div class="raw-data" id="sent-data"></div><br />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2>Encoded packets to send</h2>
|
||||
<div>
|
||||
<div class="raw-data" id="error-correcting-data"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2>Encoded segments to send</h2>
|
||||
<div>
|
||||
<div class="raw-data" id="actual-bits-to-send"></div><br />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2>Decoded</h2>
|
||||
<div>
|
||||
Bytes: <span id="received-packet-original-bytes">N/A</span><br>
|
||||
Length CRC-8: <span id="received-packet-original-bytes-crc">N/A</span><br>
|
||||
<h4>Errors</h4>
|
||||
Encoded Segments: <span id="received-raw-bits-error-percent">N/A</span>%<br>
|
||||
Encoded Packets: <span id="received-encoded-bits-error-percent">N/A</span>%<br>
|
||||
Decoded Packets: <span id="received-decoded-bits-error-percent">N/A</span>%<br />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2>Encoded Segments Received</h2>
|
||||
<div>
|
||||
<div class="raw-data" id="received-encoded-segment-bits"></div><br />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2>Encoded Packets Received</h2>
|
||||
<div>
|
||||
<div class="raw-data" id="received-encoded-bits"></div><br />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2>Decoded Packets Received</h2>
|
||||
<div>
|
||||
<div class="raw-data" id="received-decoded-bits"></div><br />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2>Selected</h2>
|
||||
<div>
|
||||
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>
|
||||
Wave Form: <select id="wave-form" value="sine">
|
||||
<option value="sine">Sine Wave</option>
|
||||
<option value="square">Square Wave</option>
|
||||
<option value="sawtooth">Sawtooth Wave</option>
|
||||
<option value="triangle">Triangle Wave</option>
|
||||
</select><br>
|
||||
Packet Size:
|
||||
2^<input id="packet-size-power" type="number" min="0" max="16">
|
||||
<span id="packet-size"></span>
|
||||
<br>
|
||||
Segment Duration: <input id="bit-duration-text" type="number" min="0" max="1000" value="190">ms<br>
|
||||
Amplitude Threshold: <input id="amplitude-threshold-text" type="number" min="0" max="100" value="75"><br>
|
||||
Minimum Frequency: <input id="minimum-frequency" type="number" min="20" max="20000" value="900"><br>
|
||||
Maximum Frequency: <input id="maximum-frequency" type="number" min="20" max="20000" value="1200"><br>
|
||||
Last Segment Percent: <input id="last-bit-percent" type="number" min="0" max="100" value="90">%<br>
|
||||
FFT Size: 2^<input id="fft-size-power-text" type="number" min="5" max="15" value="90"><br>
|
||||
Frequency Resolution Multiplier: <input id="frequency-resolution-multiplier" type="number" min="1" max="20"
|
||||
value="2"><br>
|
||||
Channel Frequency Resolution Padding: <input id="channel-frequency-resolution-padding" type="number" min="0" max="20"><br>
|
||||
Smoothing Time Constant: <input id="smoothing-time-constant-text" type="number" min="0.00" max="1.00" step="0.01"
|
||||
value="0.00"><br>
|
||||
</div>
|
||||
<div>
|
||||
<h2>Data Integrity</h2>
|
||||
<label>
|
||||
<input type="checkbox" id="periodic-interleaving" checked>Periodic Interleaving
|
||||
</label><br />
|
||||
<label>
|
||||
<input type="checkbox" id="error-correction-hamming" checked>Hamming Code Error Correction
|
||||
</label><br>
|
||||
</div>
|
||||
<div>
|
||||
<h2>Packet</h2>
|
||||
Data Bits: <span id="data-bits-to-send">N/A</span> Bytes: <span id="data-bytes-to-send">N/A</span><br />
|
||||
Data Size Header Bits: <span id="data-size-header-bits">N/A</span><br />
|
||||
Error Correction Bits: <span id="error-correction-bits">N/A</span><br />
|
||||
Total Bits: <span id="total-bits-to-send">N/A</span> Bytes: <span id="total-bytes-to-send">N/A</span><br />
|
||||
Channels: <span id="packet-send-channel-count">N/A</span><br />
|
||||
Segment Count: <span id="packet-send-segment-count">N/A</span><br />
|
||||
Segment Duration: <span id="packet-send-segment-duration">N/A</span>s<br />
|
||||
Total Duration: <span id="duration-to-send">N/A</span>s<br />
|
||||
</div>
|
||||
<div>
|
||||
<h2>Information</h2>
|
||||
<h2>Audio Spectrum</h2>
|
||||
<div>
|
||||
Frequency Resolution: <span id="frequency-resolution">N/A</span><br>
|
||||
Frequency Count: <span id="frequency-count">N/A</span><br>
|
||||
Samples Per Bit: <span id="samples-per-bit">0</span><br>
|
||||
Sample Rate: <span id="audio-context-sample-rate">N/A</span> per second.<br />
|
||||
Segments per second: <span id="durations-per-second">N/A</span><br />
|
||||
Bits per segment: <span id="bits-per-duration">N/A</span><br />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2>Speed</h2>
|
||||
Baud: <span id="data-transfer-speed-bits-per-second">N/A</span><br>
|
||||
Bytes/s: <span id="data-transfer-speed-bytes-per-second">N/A</span><br />
|
||||
Effective Baud: <span id="effective-speed-bits-per-second">N/A</span><br>
|
||||
Effective Bytes/s: <span id="effective-speed-bytes-per-second">N/A</span><br />
|
||||
<h2>Receiving</h2>
|
||||
<div>
|
||||
Samples Per Bit: <span id="samples-per-bit">0</span><br>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2>Channels</h2>
|
||||
<div class="panels">
|
||||
<ol id="channel-list" start="0"></ol>
|
||||
<canvas id="channel-frequency-graph" width="200" height="200"></canvas>
|
||||
<h2>Channel Tuning</h2>
|
||||
<div>
|
||||
<canvas id="channel-frequency-graph" width="160" height="160"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user