-
Notifications
You must be signed in to change notification settings - Fork 20
/
demo.html
94 lines (87 loc) · 5.17 KB
/
demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="demo/demo.css">
<script src="demo/demo-ui.js"></script>
<script src="demo/demo.js"></script>
<script src="demo/lorem.js"></script>
<script src="afsk-filters.js"></script>
<script src="afsk-encoder.js"></script>
<script src="afsk-decoder.js"></script>
</head><body><div id=header class=fixedSimple title="modem.js">
__
/\ \ __
___ ___ ___ \_\ \ __ ___ ___ /\_\ ____
/' __` __`\ / __`\ /'_` \ /'__`\/' __` __`\ \/\ \ /',__\
/\ \/\ \/\ \/\ \L\ \/\ \L\ \/\ __//\ \/\ \/\ \ __ \ \ \/\__, `\
\ \_\ \_\ \_\ \____/\ \___,_\ \____\ \_\ \_\ \_\/\_\_\ \ \/\____/
\/_/\/_/\/_/\/___/ \/__,_ /\/____/\/_/\/_/\/_/\/_/\ \_\ \/___/
\ \____/
\/___/
</div>
<div id=subHeader class=fixed>
• An acoustic modem implemented with JavaScript and Web Audio •
</div>
<div id=info class=fixed>
INSTRUCTIONS: Select a mode (send, receive, or loopback). Then
press Power to begin sending and/or listening for data. Note that
sending data is currently packetized into bursts, instead of a
constant stream.
</div>
<br>
<div id=modeContainer class=fixed>
<a href="#" id=send class=button> Send </a>
<a href="#" id=recv class=button>Receive </a>
<a href="#" id=loop class=button>Loopback</a>
</div>
<div id=modem class=fixedSimple>
________________________________________________________
/ \
/ \
╒════════════════════════════════════════════════════════════╕
│ modem.js <span id=baudrate></span> │
<span id=inputName></span> ---► │ <span id=txLed class=led>▄▄</span> <span id=rxLed class=led>▄▄</span> <span id=cdLed class=led>▄▄</span> <span id=dataLed class=led>▄▄▄▄</span> <span id=whyLed class=led>▄▄▄</span> <span id=micLed class=led>▄▄▄</span> <span id=spkrLed class=led>▄▄▄▄</span> <span id=powerLed class=led>▄▄▄</span> │ ---► <span id=outputName></span>
│ TX RX CD Data Whm Mic Spkr Power │
╘═══╤═╤════════════════════════════════════════════════╤═╤═══╛
┕━┙ ┕━┙
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
</div>
<div id=inputFileStuff hidden=true>
<audio id=inputAudio preload=auto controls></audio>
</div>
<div id=actionContainer class=fixed>
<a href="#" id=options class=button>Options...</a>
<a href="#" id=power class=button> Power </a>
</div>
<div id=inputContainer class=fixed>
<textarea id=textInput cols=60 rows=7 placeholder="Type text to transmit here."></textarea>
<a href="#" id=randomButton class=button>Random Text</a>
</div>
<div id=outputContainer class=fixed>
┊ ┊ ┊ ┊
</div>
<br>
<div id=optionsContainer class=fixed hidden><div id=optionsDiv>░░░░░░░░░░░░░░░░░░░░░░░░░░ Options ░░░░░░░░░░░░░░░░░░░░░░░░░░
Baud rate: <a href="#" id=baud50 value=50 class=radio>50</a> <a href="#" id=baud150 value=150 class=radio>150</a> <a href="#" id=baud300 value=300 class=radio>300</a> <a href="#" id=baud1200 value=1200 class=radio>1200</a>
Input:
<a href="#" id=inputSource0 value="" class=radio>Microphone</a>
<a href="#" id=inputSource1 baud=300 value="demo/haxxorIpsum.wav" class=radio>Recorded mic (haxxorIpsum)</a>
<a href="#" id=inputSource2 baud=1200 value="demo/wikipedia_AFSK_1200_baud.ogg" class=radio>Wikipedia AFSK example</a>
<a href="#" id=inputSource3 baud=1200 value="demo/pass_0513_packet.wav" class=radio>KickSat AX.25 packet</a>
<a href="#" id=inputSource4 baud=1200 value="demo/CallerID-1.wav" class=radio>Caller ID</a>
<a href="#" id=debugCheck class=checkbox>Debug console logging</a>
<br><br><br>
<a href="#" id=optionsOK class=button> Ok </a>
</div></div>
<div id=wavStripContainer style="overflow: scroll;">
<canvas id=wavStrip width=3000 height=100 style="border: 1px solid #ddd"></canvas>
</div>
<div id=footer class=fixed>By Justin Dolske: <a href="https://dolske.wordpress.com/">Blog post</a> -- <a href="https://github.com/dolske/modem.js">Source Code</a> -- <a href="http://dolske.net/hacks/modem.js/demo.html">Demo</a>
</div>
<br>
<script>
ui.init();
</script>
</body>
</html>