mirror of https://github.com/nealey/vail.git
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:
parent
770674dfae
commit
cd657b7149
|
|
@ -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 : -->
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
|
|
@ -120,4 +137,4 @@ img {
|
|||
background: #eee;
|
||||
margin: 1px;
|
||||
padding: 0.4em;
|
||||
min-width: 4em;
|
||||
min-width: 4em;
|
||||
|
|
|
|||
|
|
@ -36,11 +36,11 @@ class Iambic {
|
|||
* @param {number} duration New interval duration, in ms
|
||||
*/
|
||||
SetIntervalDuration(duration) {
|
||||
this.intervalDuration = duration
|
||||
if (this.interval) {
|
||||
this.intervalDuration = duration
|
||||
if (this.interval) {
|
||||
clearInterval(this.interval)
|
||||
this.interval = setInterval(e => this.pulse(), duration)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// An interval has passed, call whatever the current state function is
|
||||
|
|
@ -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)
|
||||
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()
|
||||
if (this.ac.state != "running") {
|
||||
toast("Browser won't let me play sound yet. Try pressing a button first.")
|
||||
return
|
||||
}
|
||||
gain.setTargetAtTime(this.txGain, acWhen, 0.001)
|
||||
.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
|
||||
|
|
|
|||
Loading…
Reference in New Issue