Add frequency display

static/index.html

@@ -213,7 +213,7 @@
 						<div class="field is-horizontal">
 							<div class="field-label">
 								<label class="label">
-									<span data-i18n="label.rx-delay">rx delay:</span>
+									<span data-i18n="label.rx-delay">rx delay</span>:
 									<output for="rx-delay"></output>s
 								</label>
 							</div>
@@ -249,7 +249,7 @@
 						<div class="field is-horizontal">
 							<div class="field-label">
 								<label class="label">
-									<span data-i18n="label.gain">volume:</span>
+									<span data-i18n="label.gain">volume</span>:
 									<output for="masterGain"></output>%
 									<i class="mdi mdi-volume-off muted"></i>
 								</label>
@@ -272,8 +272,9 @@
 						<div class="field is-horizontal">
 							<div class="field-label">
 								<label class="label">
-									<span data-i18n="label.tx-tone">tx tone:</span>
-									<output for="tx-tone"></output>
+									<span data-i18n="label.tx-tone">tx tone</span>:
+									<output for="tx-tone" data-transform="note"></output>
+									<output for="tx-tone" data-transform="freq"></output>Hz
 								</label>
 							</div>
 							<div class="field-body">
@@ -295,8 +296,9 @@
 						<div class="field is-horizontal">
 							<div class="field-label">
 								<label class="label">
-									<span data-i18n="label.rx-tone">rx tone:</span>
-									<output for="rx-tone"></output>
+									<span data-i18n="label.rx-tone">rx tone</span>:
+									<output for="rx-tone" data-transform="note"></output>
+									<output for="rx-tone" data-transform="freq"></output>Hz
 								</label>
 							</div>
 							<div class="field-body">

static/scripts/music.mjs

@@ -31,8 +31,9 @@ const note_names = [
  * @param {Number} note MIDI note number
  * @returns {Number} Frequency (Hz)
  */
-function MIDINoteFrequency(note) {
-    return Cn1_freq * Math.pow(semitone, note)
+function MIDINoteFrequency(note, precision=0) {
+    let freq = Cn1_freq * Math.pow(semitone, note)
+    return freq.toFixed(precision)
 }
 
 /**

static/scripts/vail.mjs

@@ -90,15 +90,19 @@ class VailClient {
 		this.inputInit("#masterGain", e => {
 			this.outputs.SetGain(e.target.value / 100)
 		})
+		let toneTransform = {
+			note: Music.MIDINoteName,
+			freq: Music.MIDINoteFrequency,
+		}
 		this.inputInit(
 			"#rx-tone", 
 			e => this.outputs.SetMIDINote(false, e.target.value),
-			Music.MIDINoteName,
+			toneTransform,
 		)
 		this.inputInit(
 			"#tx-tone", 
 			e => this.outputs.SetMIDINote(true, e.target.value),
-			Music.MIDINoteName,
+			toneTransform,
 		)
 		this.inputInit("#telegraph-buzzer", e => {
 			this.setTelegraphBuzzer(e.target.checked)
@@ -328,9 +332,9 @@ class VailClient {
 	 * 
 	 * @param {string} selector CSS path to the element
 	 * @param {function} callback Callback to call with any new value that is set
-	 * @param {function} transform A function to transform the value into displayed text
+	 * @param {Object.<string, function>} transform Transform functions
 	 */
-	inputInit(selector, callback, transform=null) {
+	inputInit(selector, callback, transform={}) {
 		let element = document.querySelector(selector)
 		if (!element) {
 			console.warn("Unable to find an input to init", selector)
@@ -342,7 +346,7 @@ class VailClient {
 			element.checked = (storedValue == "on")
 		}
 		let id = element.id
-		let outputElement = document.querySelector(`[for="${id}"]`)
+		let outputElements = document.querySelectorAll(`[for="${id}"]`)
 
 		element.addEventListener("input", e => {
 			let value = element.value
@@ -351,12 +355,13 @@ class VailClient {
 			}
 			localStorage[element.id] = value
 
-			let displayValue = value
-			if (transform) {
-				displayValue = transform(value)
+			for (let e of outputElements) {
+				if (e.dataset.transform) {
+					let tf = transform[e.dataset.transform]
+					e.value = tf(value)
+				} else {
+					e.value = value
 				}
-			if (outputElement) {
-				outputElement.value = displayValue
 			}
 			if (callback) {
 				callback(e)

static/scripts/xlat.mjs

@@ -66,7 +66,7 @@ export const Xlat = {
       "wpm": "WPM",
       "ms": "ms",
       "wiki": "Help",
-      "rx-delay": "receive delay",
+      "rx-delay": "rx delay",
       "telegraph-sounds": "Telegraph sounds"
     },
     "title": {