neale/vail
neale
/
vail
mirror of https://github.com/nealey/vail.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Final touches, ready for production

This commit is contained in:
Neale Pickett 2022-05-14 21:17:44 -06:00
parent f23ea76a4f
commit dec3959b66
6 changed files with 177 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

157
static/1992.html Normal file
View File

@ -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>

6
static/index.html
View File

@ -27,7 +27,7 @@
</div> </div>
<div class="navbar-menu"> <div class="navbar-menu">
<div class="navbar-end"> <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>
</div> </div>
</nav> </nav>
@ -145,7 +145,9 @@
<div class="field is-horizontal"> <div class="field is-horizontal">
<div class="field-label"> <div class="field-label">
<label class="label"> <label class="label">
<output for="keyer-rate"></output> WPM <output for="keyer-rate"></output>&nbsp;WPM
/
<span data-fill="keyer-ms"></span>ms
</label> </label>
</div> </div>
<div class="field-body"> <div class="field-body">

5
static/inputs.mjs
View File

@ -65,7 +65,7 @@ export class Keyboard extends Input{
(event.code == "KeyX") (event.code == "KeyX")
|| (event.code == "Period") || (event.code == "Period")
|| (event.code == "BracketLeft") || (event.code == "BracketLeft")
|| (event.code == "ControlLeft" && this.iambic) // VBand || (event.code == "ControlLeft")
|| (event.key == "[") || (event.key == "[")
) { ) {
// Dit // Dit
@ -78,7 +78,7 @@ export class Keyboard extends Input{
(event.code == "KeyZ") (event.code == "KeyZ")
|| (event.code == "Slash") || (event.code == "Slash")
|| (event.code == "BracketRight") || (event.code == "BracketRight")
|| (event.code == "ControlRight" && this.iambic) // VBand || (event.code == "ControlRight")
|| (event.key == "]") || (event.key == "]")
) { ) {
if (this.dahDown != down) { if (this.dahDown != down) {
@ -90,7 +90,6 @@ export class Keyboard extends Input{
(event.code == "KeyC") (event.code == "KeyC")
|| (event.code == "Comma") || (event.code == "Comma")
|| (event.key == "Enter") || (event.key == "Enter")
|| (event.key == "Control" && !this.iambic) // VBand
|| (event.key == "NumpadEnter") || (event.key == "NumpadEnter")
) { ) {
if (this.straightDown != down) { if (this.straightDown != down) {

BIN
static/space.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.5 KiB

3
static/vail.css
View File

@ -3,7 +3,7 @@
} }
.key { .key {
width: 95%; width: 95%;
height: 6em; height: 6em;
} }
@ -53,6 +53,7 @@ input[type=range] {
kbd { kbd {
background-color: #eee; background-color: #eee;
color: black;
border: 1px solid #bbb; border: 1px solid #bbb;
border-radius: 3px; border-radius: 3px;
font-size: 66%; font-size: 66%;

18
static/vail.mjs
View File

@ -63,15 +63,18 @@ class VailClient {
this.inputInit("#keyer-mode", e => this.setKeyer(e.target.value)) this.inputInit("#keyer-mode", e => this.setKeyer(e.target.value))
this.inputInit("#keyer-rate", e => { this.inputInit("#keyer-rate", e => {
let rate = e.target.value let rate = e.target.value
let ditDuration = Minute / rate / 50 this.ditDuration = Minute / rate / 50
this.keyer.SetDitDuration(ditDuration) for (let e of document.querySelectorAll("[data-fill='keyer-ms']")) {
this.roboKeyer.SetDitDuration(ditDuration) e.textContent = this.ditDuration.toFixed(0)
}
this.keyer.SetDitDuration(this.ditDuration)
this.roboKeyer.SetDitDuration(this.ditDuration)
for (let i of Object.values(this.inputs)) { for (let i of Object.values(this.inputs)) {
i.SetDitDuration(ditDuration) i.SetDitDuration(this.ditDuration)
} }
}) })
this.inputInit("#rx-delay", e => { this.inputInit("#rx-delay", e => {
this.rxDelay = Number(e.target.value) this.rxDelay = e.target.value * Second
}) })
this.inputInit("#telegraph-buzzer", e => { this.inputInit("#telegraph-buzzer", e => {
this.setTelegraphBuzzer(e.target.checked) this.setTelegraphBuzzer(e.target.checked)
@ -193,6 +196,9 @@ class VailClient {
// XXX: UI code shouldn't be in the Keyer class. // XXX: UI code shouldn't be in the Keyer class.
// Actually, the charts calls should be in vail // Actually, the charts calls should be in vail
let chartsContainer = document.querySelector("#charts") let chartsContainer = document.querySelector("#charts")
if (!chartsContainer) {
return
}
if (enable) { if (enable) {
chartsContainer.classList.remove("hidden") chartsContainer.classList.remove("hidden")
this.keyCharts = [ this.keyCharts = [
@ -415,7 +421,7 @@ class VailClient {
*/ */
test() { test() {
let when = Date.now() let when = Date.now()
let dit = Number(document.querySelector("#iambic-duration-value").value) let dit = this.ditDuration
let dah = dit * 3 let dah = dit * 3
let s = dit let s = dit
let message = [ let message = [