vail/static/vail.js

699 lines
16 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
// iOS kludge
if (!window.AudioContext) {
window.AudioContext = window.webkitAudioContext
}
function toast(msg) {
let el = document.querySelector("#snackbar")
el.MaterialSnackbar.showSnackbar({
message: msg,
timeout: 2000
})
}
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.6) {
this.txGain = txGain
this.ac = new AudioContext()
this.lowGain = this.create(lowFreq)
this.highGain = this.create(highFreq)
this.errorGain = this.create(errorFreq, "square")
this.noiseGain = this.whiteNoise()
this.ac.resume()
.then(() => {
document.querySelector("#muted").classList.add("hidden")
})
}
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
}
whiteNoise() {
let bufferSize = 17 * this.ac.sampleRate
let noiseBuffer = this.ac.createBuffer(1, bufferSize, this.ac.sampleRate)
let output = noiseBuffer.getChannelData(0)
for (let i = 0; i < bufferSize; i++) {
output[i] = Math.random() * 2 - 1;
}
let whiteNoise = this.ac.createBufferSource();
whiteNoise.buffer = noiseBuffer;
whiteNoise.loop = true;
whiteNoise.start(0);
let filter = this.ac.createBiquadFilter()
filter.type = "lowpass"
filter.frequency.value = 100
let gain = this.ac.createGain()
gain.gain.value = 0.1
whiteNoise.connect(filter)
filter.connect(gain)
gain.connect(this.ac.destination)
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} tx Transmit or receive tone
* @param {number} when Time to begin, in ms (null=now)
*/
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()
.then(() => {
gain.setTargetAtTime(this.txGain, acWhen, 0.001)
})
}
/**
* End buzzing at time
*
* @param {boolean} tx Transmit or receive tone
* @param {number} when Time to end, in ms (null=now)
*/
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)
}
/**
* 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.clockOffset = 0 // How badly our clock is off of the server's
this.rxDelay = 0 // Milliseconds to add to incoming timestamps
this.beginTxTime = null // Time when we began transmitting
this.debug = localStorage.debug
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))
}
for (let e of document.querySelectorAll("button.maximize")) {
e.addEventListener("click", e => this.maximize(e))
}
// Listen for keystrokes
document.addEventListener("keydown", e => this.keyboard(e))
document.addEventListener("keyup", e => this.keyboard(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") || "General Chaos"
document.querySelector("#repeater").textContent = repeater
// Request MIDI access
if (navigator.requestMIDIAccess) {
navigator.requestMIDIAccess()
.then(a => this.midiInit(a))
}
// Set up for gamepad input
window.addEventListener("gamepadconnected", e => this.gamepadConnected(e))
}
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) {
toast(msg)
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())
this.updateReading("#clock-off-value", this.clockOffset)
}
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 - this.clockOffset, 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)
if (this.debug) {
console.log("recv", beginTxTime, durations)
}
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
}
// Server is telling us the current time
if (durations.length == 0) {
let offset = now - beginTxTime
if (this.clockOffset == 0) {
this.clockOffset = offset
this.updateReadings()
}
return
}
// Why is this happening?
if (beginTxTime == 0) {
return
}
// Add rxDelay
let adjustedTxTime = beginTxTime + this.rxDelay
if (adjustedTxTime < now) {
console.log("adjustedTxTime: ", adjustedTxTime, " now: ", 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()
}
}
iambicDit(begin) {
this.iambic.Key(begin, DIT)
}
iambicDah(begin) {
this.iambic.Key(begin, DAH)
}
keyboard(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 == "KeyX") ||
(event.code == "Period") ||
(event.code == "ControlLeft") ||
(event.code == "BracketLeft") ||
(event.key == "[")) {
event.preventDefault()
this.iambicDit(begin)
}
if ((event.code == "KeyZ") ||
(event.code == "Slash") ||
(event.code == "ControlRight") ||
(event.code == "BracketRight") ||
(event.key == "]")) {
event.preventDefault()
this.iambicDah(begin)
}
if ((event.code == "KeyC") ||
(event.code == "Comma") ||
(event.key == "Shift") ||
(event.key == "Enter") ||
(event.key == "NumpadEnter")) {
event.preventDefault()
this.straightKey(begin)
}
}
keyButton(event) {
let begin = event.type.endsWith("down") || event.type.endsWith("start")
event.preventDefault()
if (event.target.id == "dah") {
this.iambicDah(begin)
} else if ((event.target.id == "dit") && (event.button == 2)) {
this.iambicDah(begin)
} else if (event.target.id == "dit") {
this.iambicDit(begin)
} else if (event.target.id == "key") {
this.straightKey(begin)
} else if ((event.target.id == "ck") && begin) {
this.Test()
}
}
gamepadConnected(event) {
// Polling could be computationally expensive,
// especially on devices with a power budget, like phones.
// To be considerate, we only start polling if a gamepad appears.
if (!this.gamepadButtons) {
this.gamepadButtons = {}
this.gamepadPoll(event.timeStamp)
}
}
gamepadPoll(timestamp) {
let currentButtons = {}
for (let gp of navigator.getGamepads()) {
if (gp == null) {
continue
}
for (let i in gp.buttons) {
let pressed = gp.buttons[i].pressed
if (i < 2) {
currentButtons.key |= pressed
} else if (i % 2 == 0) {
currentButtons.dit |= pressed
} else {
currentButtons.dah |= pressed
}
}
}
if (currentButtons.key != this.gamepadButtons.key) {
this.straightKey(currentButtons.key)
}
if (currentButtons.dit != this.gamepadButtons.dit) {
this.iambicDit(currentButtons.dit)
}
if (currentButtons.dah != this.gamepadButtons.dah) {
this.iambicDah(currentButtons.dah)
}
this.gamepadButtons = currentButtons
requestAnimationFrame(e => this.gamepadPoll(e))
}
/**
* 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))
}
maximize(e) {
let element = e.target
while (!element.classList.contains("mdl-card")) {
element = element.parentElement
if (!element) {
console.log("Maximize button: couldn't find parent card")
return
}
}
element.classList.toggle("maximized")
console.log(element)
}
}
function vailInit() {
if (navigator.serviceWorker) {
navigator.serviceWorker.register("sw.js")
}
try {
window.app = new Vail()
} catch (err) {
console.log(err)
toast(err)
}
}
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", vailInit)
} else {
vailInit()
}
// vim: noet sw=2 ts=2