vail/static/vail.js

528 lines
12 KiB
JavaScript

// jshint asi:true
const lowFreq = 660
const highFreq = lowFreq * 6 / 5 // Perfect minor third
const errorFreq = 30
const DIT = 1
const DAH = 3
class Iambic {
constructor(beginTxFunc, endTxFunc) {
this.beginTxFunc = beginTxFunc
this.endTxFunc = endTxFunc
this.intervalDuration = null
this.state = this.stateBegin
this.ditDown = false
this.dahDown = false
}
/**
* Set a new interval (transmission rate)
*
* @param {number} duration New interval duration, in ms
*/
SetIntervalDuration(duration) {
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
pulse(event) {
this.state()
}
stateBegin() {
if (this.ditDown) {
this.stateDit()
} else if (this.dahDown) {
this.stateDah()
} else {
clearInterval(this.interval)
this.interval = null
}
}
stateDit() {
// Send a dit
this.beginTxFunc()
this.state = this.stateDitEnd
}
stateDitEnd() {
this.endTxFunc()
this.state = this.stateDitNext
}
stateDitNext() {
if (this.dahDown) {
this.state = this.stateDah
} else {
this.state = this.stateBegin
}
this.state()
}
stateDah() {
// Send a dah
this.beginTxFunc()
this.state = this.stateDah2
}
stateDah2() {
this.state = this.stateDah3
}
stateDah3() {
this.state = this.stateDahEnd
}
stateDahEnd() {
this.endTxFunc()
this.state = this.stateDahNext
}
stateDahNext() {
if (this.ditDown) {
this.state = this.stateDit
} else {
this.state = this.stateBegin
}
this.state()
}
/**
* Edge trigger on key press or release
*
* @param {boolean} down True if key was pressed, false if released
* @param {number} key DIT or DAH
*/
Key(down, key) {
if (key == DIT) {
this.ditDown = down
} else if (key == DAH) {
this.dahDown = down
}
// Not pulsing yet? Start right away!
if (! this.interval) {
this.interval = setInterval(e => this.pulse(), this.intervalDuration)
this.pulse()
}
}
}
class Buzzer {
// Buzzers keep two oscillators: one high and one low.
// They generate a continuous waveform,
// and we change the gain to turn the pitches off and on.
//
// This also implements a very quick ramp-up and ramp-down in gain,
// in order to avoid "pops" (square wave overtones)
// that happen with instant changes in gain.
constructor(txGain=0.3) {
this.txGain = txGain
this.ac = new AudioContext()
this.lowGain = this.create(lowFreq)
this.highGain = this.create(highFreq)
this.errorGain = this.create(errorFreq, "square")
}
create(frequency, type="sine") {
let gain = this.ac.createGain()
gain.connect(this.ac.destination)
gain.gain.value = 0
let osc = this.ac.createOscillator()
osc.type = type
osc.connect(gain)
osc.frequency.value = frequency
osc.start()
return gain
}
gain(high) {
if (high) {
return this.highGain.gain
} else {
return this.lowGain.gain
}
}
/**
* Convert clock time to AudioContext time
*
* @param {number} when Clock time in ms
* @return {number} AudioContext offset time
*/
acTime(when) {
if (! when) {
return this.ac.currentTime
}
let acOffset = Date.now() - this.ac.currentTime*1000
let acTime = (when - acOffset) / 1000
return acTime
}
/**
* Set gain
*
* @param {number} gain Value (0-1)
*/
SetGain(gain) {
this.txGain = gain
}
/**
* Play an error tone
*/
ErrorTone() {
this.errorGain.gain.setTargetAtTime(this.txGain * 0.5, this.ac.currentTime, 0.001)
this.errorGain.gain.setTargetAtTime(0, this.ac.currentTime + 0.2, 0.001)
}
/**
* Begin buzzing at time
*
* @param {boolean} high High or low pitched tone
* @param {number} when Time to begin (null=now)
*/
Buzz(high, when=null) {
let gain = this.gain(high)
let acWhen = this.acTime(when)
this.ac.resume()
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)
*/
Silence(high, when=null) {
let gain = this.gain(high)
let acWhen = this.acTime(when)
gain.setTargetAtTime(0, acWhen, 0.001)
}
/**
* Buzz for a duration at time
*
* @param {boolean} high High or low pitched tone
* @param {number} when Time to begin (ms since 1970-01-01Z, null=now)
* @param {number} duration Duration of buzz (ms)
*/
BuzzDuration(high, when, duration) {
this.Buzz(high, when)
this.Silence(high, when+duration)
}
}
class Vail {
constructor() {
this.sent = []
this.lagTimes = [0]
this.rxDurations = [0]
this.rxDelay = 0 // Milliseconds to add to incoming timestamps
this.beginTxTime = null // Time when we began transmitting
this.openSocket()
// Listen to HTML buttons
for (let e of document.querySelectorAll("button.key")) {
e.addEventListener("contextmenu", e => {e.preventDefault(); return false})
e.addEventListener("touchstart", e => this.keyButton(e))
e.addEventListener("touchend", e => this.keyButton(e))
e.addEventListener("mousedown", e => this.keyButton(e))
e.addEventListener("mouseup", e => this.keyButton(e))
}
// Listen for keystrokes
document.addEventListener("keydown", e => this.key(e))
document.addEventListener("keyup", e => this.key(e))
// Make helpers
this.iambic = new Iambic(() => this.beginTx(), () => this.endTx())
this.buzzer = new Buzzer()
// Listen for slider values
this.inputInit("#iambic-duration", e => this.iambic.SetIntervalDuration(e.target.value))
this.inputInit("#rx-delay", e => {this.rxDelay = Number(e.target.value)})
// Show what repeater we're on
let repeater = (new URL(location)).searchParams.get("repeater") || "Default"
document.querySelector("#repeater").textContent = repeater
// Request MIDI access
if (navigator.requestMIDIAccess) {
navigator.requestMIDIAccess()
.then(a => this.midiInit(a))
}
}
openSocket() {
// Set up WebSocket
let wsUrl = new URL(window.location)
wsUrl.protocol = wsUrl.protocol.replace("http", "ws")
wsUrl.pathname += "chat"
this.socket = new WebSocket(wsUrl)
this.socket.addEventListener("message", e => this.wsMessage(e))
this.socket.addEventListener("close", e => this.openSocket())
}
inputInit(selector, func) {
let element = document.querySelector(selector)
let storedValue = localStorage[element.id]
if (storedValue) {
element.value = storedValue
}
let outputElement = document.querySelector(selector + "-value")
element.addEventListener("input", e => {
localStorage[element.id] = element.value
if (outputElement) {
outputElement.value = element.value
}
func(e)
})
element.dispatchEvent(new Event("input"))
}
midiInit(access) {
this.midiAccess = access
for (let input of this.midiAccess.inputs.values()) {
input.addEventListener("midimessage", e => this.midiMessage(e))
}
this.midiAccess.addEventListener("statechange", e => this.midiStateChange(e))
}
midiStateChange(event) {
// XXX: it's not entirely clear how to handle new devices showing up.
// XXX: possibly we go through this.midiAccess.inputs and somehow only listen on new things
}
midiMessage(event) {
let data = Array.from(event.data)
let begin
let cmd = data[0] >> 4
let chan = data[0] & 0xf
switch (cmd) {
case 9:
begin = true
break
case 8:
begin = false
break
default:
return
}
switch (data[1] % 12) {
case 0: // C
this.straightKey(begin)
break
case 1: // C#
this.iambic.Key(begin, DIT)
break
case 2: // D
this.iambic.Key(begin, DAH)
break
default:
return
}
}
error(msg) {
let now = new Date()
let e = document.querySelector("#errors")
if (e) {
let p = e.appendChild(document.createElement("p"))
p.innerText = "[" + now.toLocaleTimeString() + "] " + msg
e.scrollTop = e.scrollHeight
}
this.buzzer.ErrorTone()
}
beginTx() {
this.beginTxTime = Date.now()
this.buzzer.Buzz(true)
}
endTx() {
let endTxTime = Date.now()
let duration = endTxTime - this.beginTxTime
this.buzzer.Silence(true)
this.wsSend(this.beginTxTime, duration)
this.beginTxTime = null
}
updateReading(selector, value) {
let e = document.querySelector(selector)
if (e) {
e.value = value
}
}
updateReadings() {
let avgLag = this.lagTimes.reduce((a,b) => (a+b)) / this.lagTimes.length
let longestRx = this.rxDurations.reduce((a,b) => Math.max(a,b))
let suggestedDelay = (avgLag + longestRx) * 1.2
this.updateReading("#lag-value", avgLag.toFixed())
this.updateReading("#longest-rx-value", longestRx)
this.updateReading("#suggested-delay-value", suggestedDelay.toFixed())
}
addLagReading(duration) {
this.lagTimes.push(duration)
while (this.lagTimes.length > 20) {
this.lagTimes.shift()
}
this.updateReadings()
}
addRxDuration(duration) {
this.rxDurations.push(duration)
while (this.rxDurations.length > 20) {
this.rxDurations.shift()
}
this.updateReadings()
}
wsSend(time, duration) {
let msg = [time, duration]
let jmsg = JSON.stringify(msg)
this.socket.send(jmsg)
this.sent.push(jmsg)
}
wsMessage(event) {
let now = Date.now()
let jmsg = event.data
let msg
try {
msg = JSON.parse(jmsg)
}
catch(err) {
console.log(err, msg)
return
}
let beginTxTime = msg[0]
let durations = msg.slice(1)
let sent = this.sent.filter(e => e != jmsg)
if (sent.length < this.sent.length) {
// We're getting our own message back, which tells us our lag.
// We shouldn't emit a tone, though.
let totalDuration = durations.reduce((a,b) => a+b)
this.sent = sent
this.addLagReading(now - beginTxTime - totalDuration)
return
}
let adjustedTxTime = beginTxTime+this.rxDelay
if (adjustedTxTime < now) {
this.error("Packet requested playback " + (now - adjustedTxTime) + "ms in the past. Increase receive delay!")
return
}
// Every other value is a silence duration
let tx = true
for (let duration of durations) {
duration = Number(duration)
if (tx && (duration > 0)) {
this.buzzer.BuzzDuration(false, adjustedTxTime, duration)
this.addRxDuration(duration)
}
adjustedTxTime = Number(adjustedTxTime) + duration
tx = !tx
}
}
straightKey(begin) {
if (begin) {
this.beginTx()
} else {
this.endTx()
}
}
key(event) {
if (event.repeat) {
// Ignore key repeats generated by the OS, we do this ourselves
return
}
let begin = event.type.endsWith("down")
if ((event.code == "KeyZ") || (event.code == "Period")) {
event.preventDefault()
this.iambic.Key(begin, DIT)
}
if ((event.code == "KeyX") || (event.code == "Slash")) {
event.preventDefault()
this.iambic.Key(begin, DAH)
}
if ((event.code == "KeyC") || (event.code == "Comma") || (event.key == "Shift")) {
event.preventDefault()
if (begin) {
this.beginTx()
} else {
this.endTx()
}
}
}
keyButton(event) {
let begin = event.type.endsWith("down") || event.type.endsWith("start")
event.preventDefault()
if (event.target.id == "dah") {
this.iambic.Key(begin, DAH)
} else if ((event.target.id == "dit") && (event.button == 2)) {
this.iambic.Key(begin, DAH)
} else if (event.target.id == "dit") {
this.iambic.Key(begin, DIT)
} else if (event.target.id == "key") {
this.straightKey(begin)
} else if ((event.target.id == "ck") && begin) {
this.Test()
}
}
/**
* Send "CK" to server, and don't squelch the repeat
*/
Test() {
let dit = Number(document.querySelector("#iambic-duration-value").value)
let dah = dit * 3
let s = dit
let msg = [
Date.now(),
dah, s, dit, s, dah, s, dit,
s * 3,
dah, s, dit, s, dah
]
this.wsSend(Date.now(), 0) // Get round-trip time
this.socket.send(JSON.stringify(msg))
}
}
function vailInit() {
window.app = new Vail()
}
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", vailInit)
} else {
vailInit()
}