Compare commits

...

3 Commits

Author SHA1 Message Date
Neale Pickett 5b9bc0302e Even less scary 2023-03-18 13:02:04 -06:00
Neale Pickett 6c2aa40d8b Make it look less worrisome 2023-03-18 13:00:43 -06:00
Neale Pickett 2380c28584 Lots of debugging on startup 2023-03-18 12:50:34 -06:00
3 changed files with 83 additions and 12 deletions

View File

@ -42,6 +42,35 @@
</div> </div>
</nav> </nav>
<div class="modal is-active init">
<div class="modal-content">
<div class="notification is-info">
<h1 class="title has-text-centered">
Loading...
</h1>
<p>
If you can read this,
it could mean
your browser has disabled JavaScript,
a browser extension is interfering with JavaScript,
or your browser is too old to run Vail.
</p>
<p>
Please post a screen shot in a new
<a href="https://github.com/nealey/vail/discussions">Vail Discussions</a>
thread,
or in our
<a href="https://discord.gg/GBzj8cBat7">Discord instance</a>,
so we can help you out!
</p>
<ul>
<li>Starting JavaScript application...</li>
</ul>
</div>
</div>
</div>
</div>
<section class="section"> <section class="section">
<div class="columns is-multiline"> <div class="columns is-multiline">
<div class="column"> <div class="column">

View File

@ -16,6 +16,21 @@ const globalAudioContext = new AudioContext({
latencyHint: "interactive", latencyHint: "interactive",
}) })
function initLog(message) {
for (let modal of document.querySelectorAll(".modal.init")) {
if (!message) {
modal.remove()
} else {
let ul = modal.querySelector("ul")
while (ul.childNodes.length > 5) {
ul.firstChild.remove()
}
let li = ul.appendChild(document.createElement("li"))
li.textContent = message
}
}
}
/** /**
* Pop up a message, using an notification. * Pop up a message, using an notification.
* *
@ -44,34 +59,34 @@ class VailClient {
this.rxDelay = 0 * time.Millisecond // Time to add to incoming timestamps this.rxDelay = 0 * time.Millisecond // Time to add to incoming timestamps
this.beginTxTime = null // Time when we began transmitting this.beginTxTime = null // Time when we began transmitting
// Outputs initLog("Initializing outputs")
this.outputs = new Outputs.Collection(globalAudioContext) this.outputs = new Outputs.Collection(globalAudioContext)
this.outputs.connect(globalAudioContext.destination) this.outputs.connect(globalAudioContext.destination)
// Noise initLog("Starting up noise")
this.noise = new Noise.Noise(globalAudioContext) this.noise = new Noise.Noise(globalAudioContext)
this.noise.connect(globalAudioContext.destination) this.noise.connect(globalAudioContext.destination)
// App icon initLog("Setting app icon name")
this.icon = new Icon.Icon() this.icon = new Icon.Icon()
// Keyers initLog("Initializing keyers")
this.straightKeyer = new Keyers.Keyers.straight(this) this.straightKeyer = new Keyers.Keyers.straight(this)
this.keyer = new Keyers.Keyers.straight(this) this.keyer = new Keyers.Keyers.straight(this)
this.roboKeyer = new Keyers.Keyers.robo(() => this.Buzz(), () => this.Silence()) this.roboKeyer = new Keyers.Keyers.robo(() => this.Buzz(), () => this.Silence())
// Set up various input methods
// Send this as the keyer so we can intercept dit and dah events for charts // Send this as the keyer so we can intercept dit and dah events for charts
initLog("Setting up input methods")
this.inputs = new Inputs.Collection(this) this.inputs = new Inputs.Collection(this)
// If the user clicks anything, try immediately to resume the audio context initLog("Listening on AudioContext")
document.body.addEventListener( document.body.addEventListener(
"click", "click",
e => globalAudioContext.resume(), e => globalAudioContext.resume(),
true, true,
) )
// Maximize button initLog('Setting up maximize button')
for (let e of document.querySelectorAll("button.maximize")) { for (let e of document.querySelectorAll("button.maximize")) {
e.addEventListener("click", e => this.maximize(e)) e.addEventListener("click", e => this.maximize(e))
} }
@ -79,7 +94,7 @@ class VailClient {
e.addEventListener("click", e => this.reset()) e.addEventListener("click", e => this.reset())
} }
// Set up inputs initLog("Initializing knobs")
this.inputInit("#keyer-mode", e => this.setKeyer(e.target.value)) this.inputInit("#keyer-mode", e => this.setKeyer(e.target.value))
this.inputInit("#keyer-rate", e => { this.inputInit("#keyer-rate", e => {
let rate = e.target.value let rate = e.target.value
@ -122,14 +137,15 @@ class VailClient {
}) })
this.inputInit("#notes") this.inputInit("#notes")
// Fill in the name of our repeater initLog("Filling in repeater name")
document.querySelector("#repeater").addEventListener("change", e => this.setRepeater(e.target.value.trim())) document.querySelector("#repeater").addEventListener("change", e => this.setRepeater(e.target.value.trim()))
window.addEventListener("hashchange", () => this.hashchange()) window.addEventListener("hashchange", () => this.hashchange())
this.hashchange() this.hashchange()
initLog("Starting timing charts")
this.setTimingCharts(true) this.setTimingCharts(true)
// Turn off the "muted" symbol when we can start making noise initLog("Setting up mute icon")
globalAudioContext.resume() globalAudioContext.resume()
.then(() => { .then(() => {
for (let e of document.querySelectorAll(".muted")) { for (let e of document.querySelectorAll(".muted")) {
@ -483,17 +499,23 @@ class VailClient {
} }
} }
function init() { async function init() {
initLog("Starting service worker")
if (navigator.serviceWorker) { if (navigator.serviceWorker) {
navigator.serviceWorker.register("scripts/sw.js") navigator.serviceWorker.register("scripts/sw.js")
} }
I18n.Setup()
initLog("Setting up internationalization")
await I18n.Setup()
initLog("Creating client")
try { try {
window.app = new VailClient() window.app = new VailClient()
} catch (err) { } catch (err) {
console.log(err) console.log(err)
toast(err) toast(err)
} }
initLog(false)
} }

View File

@ -94,3 +94,23 @@ code {
height: 0.5em; height: 0.5em;
width: 100%; width: 100%;
} }
.loader {
width: 48px;
height: 48px;
border: 5px solid #FFF;
border-bottom-color: transparent;
border-radius: 50%;
display: inline-block;
box-sizing: border-box;
animation: rotation 1s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}