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

static/index.html

@@ -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>
+										</td>
-											<kbd class="gamepad x" title="Gamepad X">X</kbd> 
+										<td>
-											<kbd class="gamepad" title="Gamepad LB">LB</kbd>
+											<i class="material-icons" role="presentation">keyboard</i>
-											<br>
-											right-click for Dah
 										</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 : -->

static/vail.css

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

static/vail.js

@@ -198,29 +198,42 @@ class Buzzer {
 	/**
 	  * Begin buzzing at time
 	  *
-	  * @param {boolean} high High or low pitched tone
+	  * @param {boolean} tx Transmit or receive tone
-	  * @param {number} when Time to begin (null=now)
+	  * @param {number} when Time to begin, in ms (null=now)
 	  */
-	Buzz(high, when=null) {
+	Buzz(tx, when=null) {
-		let gain = this.gain(high)
+		if (! tx) {
-		let acWhen = this.acTime(when)
+			let recv = document.querySelector("#recv")
-
+			let ms = when - Date.now()
-		this.ac.resume()
+			setTimeout(e => {
-        if (this.ac.state != "running") {
+				recv.classList.add("rx")
-            toast("Browser won't let me play sound yet. Try pressing a button first.")
+			}, ms)
-            return
 		}
+
+		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 {boolean} tx Transmit or receive tone
-	  * @param {number} when Time to begin (null=now)
+	  * @param {number} when Time to end, in ms (null=now)
 	  */
-	Silence(high, when=null) {
+	Silence(tx, when=null) {
-		let gain = this.gain(high)
+		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