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

Hopefully clearer shortcuts, visual RX indicator 

This also disables the toast that tells you to press a button to turn
sound on. I'll add a "no volume" icon later, which goes away when the
AudioContext resumes.

Fixes #8
This commit is contained in:
Neale Pickett 2020-05-20 22:56:22 -06:00
parent 770674dfae
commit cd657b7149
3 changed files with 97 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
static/index.html
View File

@ -56,9 +56,10 @@
<main class="mdl-layout__content">
<div class="flex">
<div class="mdl-card mdl-shadow--4dp">
<div class="mdl-card mdl-shadow--4dp input-methods">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Input</h2>
<div id="recv"><!-- This is a little light that turns on when someone's sending --></div>
</div>
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
<div class="mdl-tabs__tab-bar">
@ -69,19 +70,28 @@
<div class="mdl-tabs__panel is-active" id="straight">
<table class="center wide">
<tr>
<td>
<td colspan="2">
<button id="key" class="key mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
Key
</button>
</td>
</tr>
<tr>
<td>
<i class="material-icons" role="presentation">keyboard</i>
</td>
<td>
<kbd>c</kbd>
<kbd>,</kbd>
<kbd>Enter</kbd>
<kbd>⇧ Shift</kbd>
<br>
</td>
</tr>
<tr>
<td>
<i class="material-icons" role="presentation">gamepad</i>
</td>
<td>
<kbd class="gamepad a" title="Gamepad A">A</kbd>
<kbd class="gamepad b" title="Gamepad B">B</kbd>
</td>
@ -91,35 +101,54 @@
<div class="mdl-tabs__panel" id="iambic">
<table class="center wide">
<tr>
<td>
<td colspan="2">
<button id="dit" class="key mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
Dit
</button>
</td>
<td>
<td colspan="2">
<button id="dah" class="key mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
Dah
</button>
</td>
</tr>
<tr>
<td>
<i class="material-icons" role="presentation">keyboard</i>
</td>
<td>
<kbd>.</kbd>
<kbd>z</kbd>
<br>
<kbd class="gamepad x" title="Gamepad X">X</kbd>
<kbd class="gamepad" title="Gamepad LB">LB</kbd>
<br>
right-click for Dah
</td>
<td>
<i class="material-icons" role="presentation">keyboard</i>
</td>
<td>
<kbd>/</kbd>
<kbd>x</kbd>
<br>
</td>
</tr>
<tr>
<td>
<i class="material-icons" role="presentation">gamepad</i>
</td>
<td>
<kbd class="gamepad x" title="Gamepad X">X</kbd>
<kbd class="gamepad" title="Gamepad LB">LB</kbd>
</td>
<td>
<i class="material-icons" role="presentation">gamepad</i>
</td>
<td>
<kbd class="gamepad y" title="Gamepad Y">Y</kbd>
<kbd class="gamepad" title="Gamepad RB">RB</kbd>
</td>
</tr>
<tr>
<td colspan="4" class="mdl-card__supporting-text" style="text-align: center;">
Second mouse button: Dah
</td>
</tr>
</table>
</div>
<div class="mdl-tabs__panel" id="tools">
@ -132,7 +161,12 @@
</td>
</tr>
<tr>
<td>Echo On</td>
<td class="mdl-card__supporting-text">
<p>
Check (CK) round-trip times and audio functionality
by sending "CK" to the repeater and playing the returned signal.
</p>
</td>
</tr>
</table>
</div>
@ -473,3 +507,4 @@
</div>
</body>
</html>
<!-- vim: set noet ts=2 sw=2 : -->

17
static/vail.css
View File

@ -97,6 +97,23 @@ img {
max-height: inherit;
}
#recv {
width: 3em;
height: 2em;
background-color: orange;
position: absolute;
right: 1em;
border-radius: 30%;
display: none;
}
#recv.rx {
display: block;
}
.input-methods td {
text-align: left;
}
#morse-tree table {
width: 100%;

43
static/vail.js
View File

@ -198,29 +198,42 @@ class Buzzer {
/**
* Begin buzzing at time
*
* @param {boolean} high High or low pitched tone
* @param {number} when Time to begin (null=now)
* @param {boolean} tx Transmit or receive tone
* @param {number} when Time to begin, in ms (null=now)
*/
Buzz(high, when=null) {
let gain = this.gain(high)
let acWhen = this.acTime(when)
this.ac.resume()
if (this.ac.state != "running") {
toast("Browser won't let me play sound yet. Try pressing a button first.")
return
Buzz(tx, when=null) {
if (! tx) {
let recv = document.querySelector("#recv")
let ms = when - Date.now()
setTimeout(e => {
recv.classList.add("rx")
}, ms)
}
let gain = this.gain(tx)
let acWhen = this.acTime(when)
this.ac.resume()
.then(() => {
gain.setTargetAtTime(this.txGain, acWhen, 0.001)
})
}
/**
* End buzzing at time
*
* @param {boolean} high High or low pitched tone
* @param {number} when Time to begin (null=now)
* @param {boolean} tx Transmit or receive tone
* @param {number} when Time to end, in ms (null=now)
*/
Silence(high, when=null) {
let gain = this.gain(high)
Silence(tx, when=null) {
if (! tx) {
let recv = document.querySelector("#recv")
let ms = when - Date.now()
setTimeout(e => {
recv.classList.remove("rx")
}, ms)
}
let gain = this.gain(tx)
let acWhen = this.acTime(when)
gain.setTargetAtTime(0, acWhen, 0.001)
@ -606,3 +619,5 @@ if (document.readyState === "loading") {
} else {
vailInit()
}
// vim: noet sw=2 ts=2