diff --git a/static/index.html b/static/index.html index 91c1588..91beffe 100644 --- a/static/index.html +++ b/static/index.html @@ -213,7 +213,7 @@
@@ -249,7 +249,7 @@
@@ -272,8 +272,9 @@
@@ -295,8 +296,9 @@
diff --git a/static/scripts/music.mjs b/static/scripts/music.mjs index 8f4f4ee..451acf7 100644 --- a/static/scripts/music.mjs +++ b/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) } /** diff --git a/static/scripts/vail.mjs b/static/scripts/vail.mjs index 3953bd1..e87b4eb 100644 --- a/static/scripts/vail.mjs +++ b/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.} 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 @@ -350,13 +354,14 @@ class VailClient { value = element.checked?"on":"off" } localStorage[element.id] = value - - let displayValue = value - if (transform) { - displayValue = transform(value) - } - if (outputElement) { - outputElement.value = displayValue + + for (let e of outputElements) { + if (e.dataset.transform) { + let tf = transform[e.dataset.transform] + e.value = tf(value) + } else { + e.value = value + } } if (callback) { callback(e) diff --git a/static/scripts/xlat.mjs b/static/scripts/xlat.mjs index 2408d23..f4b40ea 100644 --- a/static/scripts/xlat.mjs +++ b/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": {