mirror of https://github.com/nealey/vail.git
Final touches, ready for production
This commit is contained in:
parent
f23ea76a4f
commit
dec3959b66
|
|
@ -0,0 +1,157 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Vail</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<!-- Vail stuff -->
|
||||
<link rel="manifest" href="manifest.json">
|
||||
<link rel="icon" href="vail.png" sizes="256x256" type="image/png">
|
||||
<link rel="icon" href="vail.svg" sizes="any" type="image/svg+xml">
|
||||
<script type="module" src="vail.mjs"></script>
|
||||
<link rel="stylesheet" href="vail.css">
|
||||
<style>
|
||||
.is-hidden {
|
||||
display: none;
|
||||
}
|
||||
body {
|
||||
color: white;
|
||||
background: #000 url("space.png")
|
||||
}
|
||||
h1, h2 {
|
||||
color: yellow;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Vail</h1>
|
||||
<h2>A Morse Code Chat Server</h2>
|
||||
|
||||
<p>
|
||||
Hi! You've reached Vail, a morse code chat server on the internet!
|
||||
To get started, just click on the "key" button, and you'll be transmitting to whoever out there is listening!
|
||||
</p>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<button class="button key is-primary" data-key="0" title="right click for Key">
|
||||
Key
|
||||
</button>
|
||||
(shortcuts:
|
||||
<kbd title="keyboard button">.</kbd>
|
||||
<kbd title="keyboard button">x</kbd>
|
||||
)
|
||||
</td>
|
||||
<td>
|
||||
<button class="button key is-primary" data-key="1" title="right click for Key">
|
||||
Key
|
||||
</button>
|
||||
(shortcuts:
|
||||
<kbd title="keyboard button">/</kbd>
|
||||
<kbd title="keyboard button">z</kbd>
|
||||
)
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p>
|
||||
Your current repeater is
|
||||
<input class="input" type="text" id="repeater" list="repeater-list">
|
||||
<datalist id="repeater-list">
|
||||
<option>General</option>
|
||||
<option value="1">Channel 1</option>
|
||||
<option value="2">Channel 2</option>
|
||||
<option value="3">Channel 3</option>
|
||||
<option value="Null">No transmit</option>
|
||||
<option>Echo</option>
|
||||
<option>Echo 5s</option>
|
||||
<option>Echo 10s</option>
|
||||
<option>Fortunes</option>
|
||||
<option>Fortunes: Pauses ×2</option>
|
||||
<option>Fortunes: Pauses ×4</option>
|
||||
<option>Fortunes: Pauses ×8</option>
|
||||
</datalist>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button id="recv">rx</button>
|
||||
<output class="has-text-info" id="note"></output>
|
||||
<br>
|
||||
<i id="muted">
|
||||
If you can read this, it means the browser needs you to click somewhere on this page
|
||||
before it will start beeping!
|
||||
</i>
|
||||
</p>
|
||||
|
||||
|
||||
<p>
|
||||
Keyer mode:
|
||||
<select id="keyer-mode">
|
||||
<option value="cootie">Straight Key / Cootie</option>
|
||||
<option value="bug">Bug</option>
|
||||
<option value="elbug">ElBug</option>
|
||||
<option value="singledot">Single Dot</option>
|
||||
<option value="ultimatic">Ultimatic</option>
|
||||
<option value="iambic">Iambic (Plain)</option>
|
||||
<option value="iambica">Iambic A</option>
|
||||
<option value="iambicb">Iambic B</option>
|
||||
<option value="keyahead">Keyahead</option>
|
||||
</select>
|
||||
|
||||
<br>
|
||||
|
||||
Keyer speed:
|
||||
<input
|
||||
id="keyer-rate"
|
||||
type="number"
|
||||
min="5"
|
||||
max="40"
|
||||
step="1"
|
||||
value="12">
|
||||
WPM
|
||||
</p>
|
||||
|
||||
<h2>Knobs</h2>
|
||||
|
||||
<p>
|
||||
<button id="ck" class="button is-primary">
|
||||
CK
|
||||
</button>
|
||||
Send <code>CK</code> (check) to the repeater, and play when it comes back.
|
||||
|
||||
<br>
|
||||
|
||||
|
||||
<button id="reset" class="button">
|
||||
Reset
|
||||
</button>
|
||||
Reset all Vail preferences to default.
|
||||
|
||||
<br>
|
||||
|
||||
Receive delay:
|
||||
<input
|
||||
id="rx-delay"
|
||||
type="number"
|
||||
min="0"
|
||||
max="10"
|
||||
value="4"
|
||||
step="0.1">
|
||||
seconds
|
||||
|
||||
<br>
|
||||
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" id="telegraph-buzzer">
|
||||
Telegraph sounds
|
||||
</label>
|
||||
|
||||
</p>
|
||||
|
||||
<div class="bottom">
|
||||
<div id="errors"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
</div>
|
||||
<div class="navbar-menu">
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item" href="https://github.com/nealey/vail/">Source Code</a>
|
||||
<a class="navbar-item" href="https://github.com/nealey/vail/wiki" target="_blank">Help</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
@ -145,7 +145,9 @@
|
|||
<div class="field is-horizontal">
|
||||
<div class="field-label">
|
||||
<label class="label">
|
||||
<output for="keyer-rate"></output> WPM
|
||||
<output for="keyer-rate"></output> WPM
|
||||
/
|
||||
<span data-fill="keyer-ms"></span>ms
|
||||
</label>
|
||||
</div>
|
||||
<div class="field-body">
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@ export class Keyboard extends Input{
|
|||
(event.code == "KeyX")
|
||||
|| (event.code == "Period")
|
||||
|| (event.code == "BracketLeft")
|
||||
|| (event.code == "ControlLeft" && this.iambic) // VBand
|
||||
|| (event.code == "ControlLeft")
|
||||
|| (event.key == "[")
|
||||
) {
|
||||
// Dit
|
||||
|
|
@ -78,7 +78,7 @@ export class Keyboard extends Input{
|
|||
(event.code == "KeyZ")
|
||||
|| (event.code == "Slash")
|
||||
|| (event.code == "BracketRight")
|
||||
|| (event.code == "ControlRight" && this.iambic) // VBand
|
||||
|| (event.code == "ControlRight")
|
||||
|| (event.key == "]")
|
||||
) {
|
||||
if (this.dahDown != down) {
|
||||
|
|
@ -90,7 +90,6 @@ export class Keyboard extends Input{
|
|||
(event.code == "KeyC")
|
||||
|| (event.code == "Comma")
|
||||
|| (event.key == "Enter")
|
||||
|| (event.key == "Control" && !this.iambic) // VBand
|
||||
|| (event.key == "NumpadEnter")
|
||||
) {
|
||||
if (this.straightDown != down) {
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 8.5 KiB |
|
|
@ -3,7 +3,7 @@
|
|||
}
|
||||
|
||||
.key {
|
||||
width: 95%;
|
||||
width: 95%;
|
||||
height: 6em;
|
||||
}
|
||||
|
||||
|
|
@ -53,6 +53,7 @@ input[type=range] {
|
|||
|
||||
kbd {
|
||||
background-color: #eee;
|
||||
color: black;
|
||||
border: 1px solid #bbb;
|
||||
border-radius: 3px;
|
||||
font-size: 66%;
|
||||
|
|
|
|||
|
|
@ -63,15 +63,18 @@ class VailClient {
|
|||
this.inputInit("#keyer-mode", e => this.setKeyer(e.target.value))
|
||||
this.inputInit("#keyer-rate", e => {
|
||||
let rate = e.target.value
|
||||
let ditDuration = Minute / rate / 50
|
||||
this.keyer.SetDitDuration(ditDuration)
|
||||
this.roboKeyer.SetDitDuration(ditDuration)
|
||||
this.ditDuration = Minute / rate / 50
|
||||
for (let e of document.querySelectorAll("[data-fill='keyer-ms']")) {
|
||||
e.textContent = this.ditDuration.toFixed(0)
|
||||
}
|
||||
this.keyer.SetDitDuration(this.ditDuration)
|
||||
this.roboKeyer.SetDitDuration(this.ditDuration)
|
||||
for (let i of Object.values(this.inputs)) {
|
||||
i.SetDitDuration(ditDuration)
|
||||
i.SetDitDuration(this.ditDuration)
|
||||
}
|
||||
})
|
||||
this.inputInit("#rx-delay", e => {
|
||||
this.rxDelay = Number(e.target.value)
|
||||
this.rxDelay = e.target.value * Second
|
||||
})
|
||||
this.inputInit("#telegraph-buzzer", e => {
|
||||
this.setTelegraphBuzzer(e.target.checked)
|
||||
|
|
@ -193,6 +196,9 @@ class VailClient {
|
|||
// XXX: UI code shouldn't be in the Keyer class.
|
||||
// Actually, the charts calls should be in vail
|
||||
let chartsContainer = document.querySelector("#charts")
|
||||
if (!chartsContainer) {
|
||||
return
|
||||
}
|
||||
if (enable) {
|
||||
chartsContainer.classList.remove("hidden")
|
||||
this.keyCharts = [
|
||||
|
|
@ -415,7 +421,7 @@ class VailClient {
|
|||
*/
|
||||
test() {
|
||||
let when = Date.now()
|
||||
let dit = Number(document.querySelector("#iambic-duration-value").value)
|
||||
let dit = this.ditDuration
|
||||
let dah = dit * 3
|
||||
let s = dit
|
||||
let message = [
|
||||
|
|
|
|||
Loading…
Reference in New Issue