-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathMorseMotivator.html
188 lines (171 loc) · 11.7 KB
/
MorseMotivator.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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>HB9UF MorseMotivator</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<link href="styles.css" rel="stylesheet" />
</head>
<body>
<header data-bs-theme="dark" class="mb-5">
<div class="navbar navbar-dark bg-dark">
<div class="container">
<span class="navbar-brand">
<strong><a href="#" onclick="help_modal.toggle()" class="nav-link">HB9UF MorseMotivator (Betaversion)</a></strong>
<!-- TODO: Separate link to intro -->
</span>
</div>
</div>
</header>
<div class="modal modal-xl fade" id="help_modal" tabindex="-1" role="dialog" aria-labelledby="help_modal_label" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="help_modal_label">MorseMotivator Intro</h5>
</div>
<div class="modal-body">
<p>Wer morsen mit der Koch-Methode lernt, der weiss: Man übt und übt und übt das Lesen der
Zeichen, zuerst <code>K</code> und <code>M</code>, dann <code>U</code> und <code>R</code>,
und wenn die bereits bekannten Zeichen sitzen, dann kommt das nächste Zeichen hinzu. Das
kann ganz schön aufreibend sein, denn die Texte, mit denen man morsen lernt, bestehen in der
Regel aus zufällig zusammengewürfelten Zeichen, die keinen Sinn ergeben.</p>
<p>Der MorseMotivator ist eine kleine Browser-Applikation, die man zur eigenen Motivation
<b>zusätzlich</b> zu den bereits bekannten Werkzeugen nutzen kann. MorseMotivator nutzt
Worte aus der deutschen Sprache, wie <code>KUR</code>, <code>RUM</code> und <code>MUMM</code>.
Dass man in der Trainigsphase beim Lesen von Morsezeichen bekannte Worte erkennt, war
zumindest bei mir immer ein schönes Erlebnis, denn es zeigt einem den eigenen Fortschritt
unmittelbar auf. Zum Beispiel beim Lernen mit Rufzeichenlisten fehlt dieses Erlebnis, denn
es bleibt ungewiss, ob das Rufzeichen richtig aufgenommen wurde. Man könnte auch mit Freitexten
und QSOs arbeiten, aber beides setzt bereits Kenntnisse über eine Mehrheit der Zeichen des
Morse-Alphabets voraus. MorseMotivator hingegen funktioniert bereits mit den ersten vier
Zeichen der Koch-Methode (eben <code>K</code>, <code>M</code>, <code>U</code> und <code>R</code>)
und unterstützt auch Farnsworth-Timing. Es ist ausserdem möglich, die Wortlänge zu begrenzen.</p>
<p>Nachdem du MorseMotivator nach Wunsch eingestellt hast, kannst du die Schaltfläche
<button class="btn btn-primary btn-sm">Morsetext generieren</button> betätigen. Damit wird der
Text generiert und ein Player wird angezeigt. Ein weiterer Klick auf den Play-Button spielt
dann die Morsezeichen ab und du kannst auf einem Blatt Papier die Worte mitschreiben. Die
Schaltfläche <button class="btn btn-primary btn-sm">Morsetext anzeigen</button> zeigt den Text an,
so dass du ihn mit deinen Notizen vergleichen kannst.</p>
<p>MorseMotivator wurde von Mitgliedern der
<a href="https://www.hb9uf.ch">«UHF-Gruppe der USKA« (HB9UF)</a> erdacht und implementiert
und steht unter der <a href="https://www.gnu.org/licenses/agpl-3.0.html">GNU AGPL Lizenz 3</a>
allen <a href="https://github.com/HB9UF/MorseMotivator">auf github</a> frei zur Verfügung.
Ein besonderer Dank gebührt Alex HB9FZW für die Hilfe beim UI-Design!
Die Software ist als Ergänzung zu anderen Morse-Trainern oder zu Kursen gedacht und nutzt zur
Generierung der Morsetöne die Library <a href="https://fkurz.net/ham/jscwlib.html#0.3.0">jscwlib</a> von Fabian Kurz.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" onclick="help_modal.hide();">Intro schliessen</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="d-flex flex-column flex-md-wrap justify-content-center my-4">
<div class="input-group mb-3 w-100 w-md-auto">
<span class="input-group-text flex-wrap">WPM:<output id="output_wpm"></output> </span>
<input id="input_wpm" type="range" class="form-range form-control px-1" min="15" max="40" oninput="this.previousElementSibling.children[0].value = this.value" />
</div>
<div class="input-group mb-3 w-100 w-md-auto">
<span class="input-group-text flex-wrap">WPM effektiv:<output id="output_effective_wpm"></output></span>
<input id="input_effective_wpm" type="range" class="form-range form-control px-1" min="15" max="40" oninput="this.previousElementSibling.children[0].value = this.value" />
</div>
</div>
<div class="d-flex flex-column flex-md-wrap justify-content-center my-4">
<div class="input-group mb-3 w-100 w-md-auto">
<span class="input-group-text flex-wrap">Begrenzung Wortlänge:<output id="output_maxlength"></output></span>
<input id="input_maxlength" type="range" class="form-range form-control px-1" min="2" max="20" oninput="this.previousElementSibling.children[0].value = this.value" />
</div>
<div class="input-group mb-3 w-100 w-md-auto">
<span class="input-group-text flex-wrap">Frequenz CW Ton (Hz):<output id="output_freq"></output></span>
<input id="input_freq" type="range" class="form-range form-control px-1" min="400" max="2000" oninput="this.previousElementSibling.children[0].value = this.value; jscwlib_update_frequency()" />
</div>
</div>
<div class="d-flex flex-column flex-md-wrap justify-content-center my-4">
<div class="input-group mb-3 w-100 w-md-auto">
<span class="input-group-text flex-wrap">Anzahl Worte:<output id="output_n_words"></output></span>
<input id="input_n_words" type="range" class="form-range form-control px-1" min="1" max="30" oninput="this.previousElementSibling.children[0].value = this.value" />
</div>
<div class="input-group mb-3 w-100 w-md-auto">
<!-- TODO: Change color to red -->
<span class="input-group-text flex-wrap">Buchstaben gemäss Koch:<output id="output_n_chars"></output></span>
<input id="input_n_chars" type="range" class="form-range form-control px-1" min="4" max="26" oninput="this.previousElementSibling.children[0].value = this.value; update_koch_chars()" />
</div>
</div>
<div class="py-3 my-4 fs-4 w-100 text-center border rounded">
<span id="koch_chars" class="p-2">
<span class="mx-1 fw-bold">K</span>
<span class="mx-1 fw-bold">M</span>
<span class="mx-1 fw-bold">U</span>
<span class="kochline mx-1 fw-bold" onclick="koch_char_clicked(this)">R</span>
<span class="kochline mx-1 fw-bold" onclick="koch_char_clicked(this)">E</span>
<span class="kochline mx-1 fw-bold" onclick="koch_char_clicked(this)">S</span>
<span class="kochline mx-1 fw-bold" onclick="koch_char_clicked(this)">N</span>
<span class="kochline mx-1 fw-bold" onclick="koch_char_clicked(this)">A</span>
<span class="kochline mx-1 fw-bold" onclick="koch_char_clicked(this)">P</span>
<span class="kochline mx-1 fw-bold" onclick="koch_char_clicked(this)">T</span>
<span class="kochline mx-1 fw-bold" onclick="koch_char_clicked(this)">L</span>
<span class="kochline mx-1 fw-bold" onclick="koch_char_clicked(this)">W</span>
<span class="kochline mx-1 fw-bold" onclick="koch_char_clicked(this)">I</span>
<span class="kochline mx-1 fw-bold" onclick="koch_char_clicked(this)">J</span>
<span class="kochline mx-1 fw-bold" onclick="koch_char_clicked(this)">Z</span>
<span class="kochline mx-1 fw-bold" onclick="koch_char_clicked(this)">F</span>
<span class="kochline mx-1 fw-bold" onclick="koch_char_clicked(this)">O</span>
<span class="kochline mx-1 fw-bold" onclick="koch_char_clicked(this)">Y</span>
<span class="kochline mx-1 fw-bold" onclick="koch_char_clicked(this)">V</span>
<span class="kochline mx-1 fw-bold" onclick="koch_char_clicked(this)">G</span>
<span class="kochline mx-1 fw-bold" onclick="koch_char_clicked(this)">Q</span>
<span class="kochline mx-1 fw-bold" onclick="koch_char_clicked(this)">H</span>
<span class="kochline mx-1 fw-bold" onclick="koch_char_clicked(this)">B</span>
<span class="kochline mx-1 fw-bold" onclick="koch_char_clicked(this)">C</span>
<span class="kochline mx-1 fw-bold" onclick="koch_char_clicked(this)">D</span>
<span class="kochline mx-1 fw-bold" onclick="koch_char_clicked(this)">X</span>
</span>
</div>
</div>
<div class="row mt-4">
<div class="col-sm-6">
<button type="button" class="btn btn-primary btn-lg w-100 fw-bold mb-4" onclick="jscwlib_generate_morse();">
<span id="spinner" class="spinner-border spinner-border-sm invisible" role="status" aria-hidden="true"></span>
Morsetext generieren
<!-- dummy spinner to maintain symmetry -->
<span class="spinner-border spinner-border-sm invisible" role="status" aria-hidden="true"></span>
</button>
</div>
<div class="col-sm-6">
<button id="show_cw_text" type="button" class="btn btn-primary btn-lg w-100 fw-bold mb-4 disabled" onclick="show_cw_text();">Morsetext anzeigen</button>
<button id="hide_cw_text" type="button" class="btn btn-primary btn-lg w-100 fw-bold mb-4 d-none" onclick="hide_cw_text();">Morsetext verstecken</button>
</div>
<div class="col-sm-6">
<!-- TODO: implement store_settings() -->
<button type="button" class="btn btn-warning btn-lg w-100 mb-4" onclick="store_settings();">Einstellungen in Cookie speichern</button>
</div>
<div class="col-sm-6">
<button type="button" class="btn btn-warning btn-lg w-100 mb-4" onclick="reset_settings();">Cookie löschen und Reset</button>
</div>
<div class="d-flex justify-content-center my-4">
<div class="px-5"><div id="player"></div></div>
</div>
<div class="d-flex justify-content-center my-4">
<div id="cw_text" class="px-5 fs-4 border invisible"></div>
</div>
</div>
</div>
<div class="container-fluid bg-dark">
<div class="row">
<div class="col-sm-12 text-center text-white mt-2">
<!-- TODO: Make sure this aligns with the bottom of the browser even when zoomed out -->
<p>© <span id="year"></span> <a href="#" class="text-white">HB9UF MorseMotivator</a></p>
<script>
document.getElementById("year").textContent = new Date().getFullYear();
</script>
</div>
</div>
</div>
<script src="https://lcwo.net/js/jscwlib.js"></script>
<script src="MorseMotivator_ui.js"></script>
</body>
</html>