From b24a63b5c8e312cc7afb879c239e717de803a724 Mon Sep 17 00:00:00 2001 From: Neale Pickett Date: Wed, 21 Nov 2018 20:19:31 +0000 Subject: [PATCH] Start trying to do some PWA action --- _layouts/default.html | 4 ++ assets/css/default.css | 17 +++-- toys/starship/index.html | 122 +++++++----------------------------- toys/starship/manifest.json | 15 +++++ toys/starship/starship.js | 62 ++++++++++++++++++ toys/starship/sw.js | 26 ++++++++ 6 files changed, 142 insertions(+), 104 deletions(-) create mode 100644 toys/starship/manifest.json create mode 100644 toys/starship/starship.js create mode 100644 toys/starship/sw.js diff --git a/_layouts/default.html b/_layouts/default.html index 0623872..ed46bad 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -9,6 +9,9 @@ {% if page.scripts %}{% for js_file in page.scripts %} +{% endfor %}{% endif %} +{% if page.headers %}{% for header in page.headers %} + {{ header }} {% endfor %}{% endif %} {{ page.title }} @@ -37,6 +40,7 @@ diff --git a/assets/css/default.css b/assets/css/default.css index 2e336ff..f370084 100644 --- a/assets/css/default.css +++ b/assets/css/default.css @@ -14,18 +14,19 @@ body { padding: 1em; border-radius: 1em; max-width: 35em; - font-family: "Roboto", sans-serif; + font-family: "Lato", "Roboto", sans-serif; } #title, td.main { background-color: #e0e4cc; - border-radius: 0.5em; - padding: 0em 1em; + border-radius: 0.25em; + padding: 0.1em 0.5em; margin-top: 0; + box-shadow: 0.2em 0.2em 1em rgba(0,0,0,0.1); } h1, h2, h3, h4, h5, h6 { - color: #fa6900; + color: #e64; } a { @@ -117,3 +118,11 @@ pre { font-size: small; text-indent: inherit; } + +button.big { + padding: 0; + border: 0; + margin: 1em; + font-size: 2em; + background: inherit; +} diff --git a/toys/starship/index.html b/toys/starship/index.html index 178b742..95ff699 100644 --- a/toys/starship/index.html +++ b/toys/starship/index.html @@ -1,13 +1,9 @@ - - - - - - - - - - +
+ + 🔉 + + 🔊 +
- Starship Noise Generator - - - - -

- Starship Noise Generator -

- -
-
- - 🔉 - - 🔊 -
- -

I work in a building with no HVAC, - which means we can hear everything people are saying, - anywhere in the building.

- -

This page is a low-CPU noise generator that runs entirely in JavaScript. - Once it starts, - you don’t need an Internet connection to keep it going. - You can leave it running forever, if you like.

- -

For those interested, - it uses the new (in 2017) and seriously perfect for this application - Web Audio API.

-
- - +This page is a low-CPU noise generator that runs entirely in JavaScript. +Once it starts, +you don’t need an Internet connection to keep it going. +You can leave it running forever, if you like. +For those interested, +it uses the new (in 2017) and seriously perfect for this application +[Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API) diff --git a/toys/starship/manifest.json b/toys/starship/manifest.json new file mode 100644 index 0000000..58ad8a3 --- /dev/null +++ b/toys/starship/manifest.json @@ -0,0 +1,15 @@ +{ + "name": "Starship Noise Generator", + "short_name": "Starship", + "start_url": ".", + "display": "standalone", + "background_color": "#fff", + "description": "Generates brown noise similar to a futuristic starship engine (or a modern HVAC system)", + "icons": [ + { + "src": "icon.svg", + "sizes": "any" + } + ] +} + diff --git a/toys/starship/starship.js b/toys/starship/starship.js new file mode 100644 index 0000000..c236c98 --- /dev/null +++ b/toys/starship/starship.js @@ -0,0 +1,62 @@ +function whiteNoise(audioCtx) { + var bufferSize = 17 * audioCtx.sampleRate, + noiseBuffer = audioCtx.createBuffer(1, bufferSize, audioCtx.sampleRate), + output = noiseBuffer.getChannelData(0); + for (var i = 0; i < bufferSize; i++) { + output[i] = Math.random() * 2 - 1; + } + var whiteNoise = audioCtx.createBufferSource(); + whiteNoise.buffer = noiseBuffer; + whiteNoise.loop = true; + whiteNoise.start(0); + return whiteNoise; +} + +function bandpassFilter(audioCtx, freq, gain) { + var filt = audioCtx.createBiquadFilter(); + filt.type = "bandpass"; + filt.frequency.value = freq; + filt.gain.value = gain; + return filt; +} + +function init() { + var audioCtx = new window.AudioContext(); + var synth = whiteNoise(audioCtx); + var filterA = bandpassFilter(audioCtx, 100, 20); + var filterB = bandpassFilter(audioCtx, 50, 20); + var gainA = audioCtx.createGain(); + + whiteNoise(audioCtx).connect(filterA); + filterA.connect(filterB); + filterB.connect(gainA); + gainA.connect(audioCtx.destination); + audioCtx.suspend(); + + function setFade() { + var faderPos = document.querySelector("#fader").value; + gainA.gain.value = faderPos; + } + document.querySelector("#fader").addEventListener("input", setFade); + setFade(); + + document.querySelector("#play").addEventListener("click", e => { + if (audioCtx.state == "running") { + audioCtx.suspend(); + } else { + audioCtx.resume(); + } + }); + + console.log(navigator.serviceWorker); + console.log("moo"); + if ("serviceWorker" in navigator) { + navigator.serviceWorker.register("sw.js"); + } +} + +if (document.readyState === "loading") { + document.addEventListener("DOMContentLoaded", init); +} else { + init(); +} diff --git a/toys/starship/sw.js b/toys/starship/sw.js new file mode 100644 index 0000000..c464415 --- /dev/null +++ b/toys/starship/sw.js @@ -0,0 +1,26 @@ +var cacheName = "starship-v1"; +var content = [ + "index.html", + "starship.js" +]; + + +self.addEventListener("install", e => { + e.waitUntil(caches.Open(cacheName).then(cache => cache.addAll(content))); +}); + +// Have mercy, this is a horror show +self.addEventListener("fetch", e => { + e.respondWith( + caches.match(e.request).then(r => { + console.log("[Service Worker] Fetching resource:", e.request.url); + return r || fetch(e.request).then(response => { + return caches.open(cacheName).then(cache => { + console.log("[Service Worker] Caching new resource:", e.request.url); + cache.put(e.request, respone.clone()); + return response; + }); + }); + }) + ); +}); \ No newline at end of file