2b:["$","title",null,{"children":"Morse code trainer | Toph & Visnu Stream | Observable"}] 30:T64f,viewof presses = { reset; const area = htl.html`

`; area.value = []; let playing = null; const down = () => { const start = new Date(); area.value = area.value.filter((d) => start - d.end < 60e3); // keep last 1m area.value.push({ start }); area.dispatchEvent(new CustomEvent("input")); playing = tone(); }; const up = () => { const last = area.value[area.value.length - 1]; last.end = new Date(); last.duration = last.end - last.start; area.dispatchEvent(new CustomEvent("input")); if (playing) playing.stop(); }; area.addEventListener("pointerdown", (e) => { e.preventDefault(); e.target.focus(); down(); }); area.addEventListener("pointerup", up); area.addEventListener("keydown", (e) => { if (e.code === "Space" && !e.repeat) down(); }); area.addEventListener("keyup", (e) => { if (e.code === "Space") up(); }); return area; }31:[] 2e:{"id":"a9cf0760597d5079","slug":"morse-code-trainer","title":"Morse code trainer","thumbnail":"5ffabe0327755a1f7a37d1b7727946ebe7151a8261f6013e17c0b012efeb377d","access_level":"public","create_time":"$D2020-02-22T21:03:26.836Z","update_time":"$D2021-06-22T19:52:33.382Z","view_time":null,"first_public_time":"$D2021-06-18T20:55:37.406Z","fork":false,"stars":39,"starred":false,"owner":{"type":"team","id":"f0b571ae609f9fba","login":"tv-stream-dream-team","name":"Toph & Visnu Stream","avatar_url":"https://avatars-next.observableusercontent.com/158d3860b6b72c0582146cf4279ffd799932eed88ad93d5ecdbc55bdd28236b4","tier":"starter_2024"},"version":1040,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"dbf69c13a14d2f62","login":"visnup","name":"Visnu Pitiyanuvath","avatar_url":"https://avatars-next.observableusercontent.com/b847c4c49993b1df7599d355f47dc0ad9c2dcf43439ce9e8f3410e6368b3aac9","tier":null},{"type":"individual","id":"0bb2842b01e0c652","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":null}],"members":[{"type":"team","id":"f0b571ae609f9fba","login":"tv-stream-dream-team","name":"Toph & Visnu Stream","avatar_url":"https://avatars-next.observableusercontent.com/158d3860b6b72c0582146cf4279ffd799932eed88ad93d5ecdbc55bdd28236b4","tier":"starter_2024","role":"editor"},{"type":"individual","id":"dbf69c13a14d2f62","login":"visnup","name":"Visnu Pitiyanuvath","avatar_url":"https://avatars-next.observableusercontent.com/b847c4c49993b1df7599d355f47dc0ad9c2dcf43439ce9e8f3410e6368b3aac9","tier":null,"role":"editor"}],"comments":[{"id":"17208972f59804ff","reply_to_id":null,"content":"at first, when I first saw the button, I subconsciously tried to press \"spacebar\"; I don't know why. I think that could actually be an alternative way to provide input. What do you think?","create_time":"$D2021-06-19T06:45:28.964Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"8f7483a9b5b7f9ce","login":"p16i","name":"Pat Chormai","avatar_url":"https://avatars-next.observableusercontent.com/50ae30dfbb0b3a2e34678e1119b46706546ba9394dc0bb2e86489388fce89949","tier":null}},{"id":"ea34591b492e792f","reply_to_id":"17208972f59804ff","content":"ooh! I like it. wonder if we can capture focus decently enough... probably.","create_time":"$D2021-06-19T07:07:19.028Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"dbf69c13a14d2f62","login":"visnup","name":"Visnu Pitiyanuvath","avatar_url":"https://avatars-next.observableusercontent.com/b847c4c49993b1df7599d355f47dc0ad9c2dcf43439ce9e8f3410e6368b3aac9","tier":null}},{"id":"1f19533e8bdb0147","reply_to_id":"17208972f59804ff","content":"ok, you have to click it once to focus the button, then you can use spacebar afterwards.","create_time":"$D2021-06-19T07:34:53.002Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"dbf69c13a14d2f62","login":"visnup","name":"Visnu Pitiyanuvath","avatar_url":"https://avatars-next.observableusercontent.com/b847c4c49993b1df7599d355f47dc0ad9c2dcf43439ce9e8f3410e6368b3aac9","tier":null}},{"id":"78c28a7c4ee75441","reply_to_id":"17208972f59804ff","content":"👍","create_time":"$D2021-06-19T10:10:55.899Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"8f7483a9b5b7f9ce","login":"p16i","name":"Pat Chormai","avatar_url":"https://avatars-next.observableusercontent.com/50ae30dfbb0b3a2e34678e1119b46706546ba9394dc0bb2e86489388fce89949","tier":null}}],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"Morse code trainer","cells":[{"id":0,"value":"$${htl.html`

${Math.round(groupsPerMinute)}

\n letters per minute\n

`}\n\n# Morse code trainer\n\nUse the button below to practice your [Morse code](https://en.wikipedia.org/wiki/Morse_code). Sound on 🔊. Once you’ve focused the button by pressing it, you can also use the spacebar. If you’re finding it difficult to encode a dah (a.k.a. dash −), try adjusting the dit (a.k.a. dot ·) duration.\n\nBuilt with [

@tophtucker](/@tophtucker) while [streaming](https://www.twitch.tv/videos/1060462010). Let us know if you have [any ideas to add to our list](toph-and-visnu-stream) or want to join a future stream!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":262,"value":"Plot.text(decoded, { x: \"time\", text: \"letter\", fontSize: 20, fontFamily: \"monospace\" }).plot(mini)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":196,"value":"Plot.text(encoded, {\n x: (d) => d3.mean([d.start, d.end]),\n text: (d) => d.code.replaceAll(\".\", \"·\").replaceAll(\"-\", \"−\"),\n fontSize: 15,\n fontFamily: \"monospace\"\n}).plot(mini)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":60,"value":"Plot.plot({\n width,\n x: { domain, label: null },\n marks: [\n Plot.barX(presses, {\n x1: \"start\",\n x2: (d) => +d.start + dahDuration,\n fill: \"#eee\"\n }),\n Plot.barX(presses, { x1: \"start\", x2: (d) => d.end || new Date() })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":710,"value":"

\n ${text.split(\"\").map(d => htl.html`\n

\n ${d}
\n ${letters.has(d.toLowerCase()) ? letters.get(d.toLowerCase()).replaceAll(\".\", \"·\").replaceAll(\"-\", \"−\") : \"\"}\n

\n `)}\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":296,"value":"viewof text = Inputs.text({ label: \"Encode\", value: \"I know Morse code!\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":221,"value":"viewof ditDuration = Inputs.range([1, 200], {value: 70, step: 1, label: 'Dit duration (ms)'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":876,"value":"viewof reset = Inputs.button(\"Reset\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":274,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":56,"value":"Inputs.table(encoded)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":902,"value":"encoded = presses.map((p) => ({\n ...p,\n code: p.end ? (p.duration > dahDuration ? \"-\" : \".\") : \"\"\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":649,"value":"Inputs.table(decoded, {\n format: { group: (d) => d.map((d) => d.code).join(\"\") }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":142,"value":"decoded = groups.map((group) => ({\n time: new Date(d3.mean([group[0].start, group[group.length - 1].end])),\n group,\n letter: codes.get(group.map((d) => d.code).join(\"\"))\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":85,"value":"groups = {\n const groups = [];\n let current = [];\n for (const [i, p] of encoded.entries()) {\n if (i && p.start - encoded[i - 1].end > dahDuration) {\n groups.push(current);\n current = [];\n }\n current.push(p);\n }\n if (current.length) groups.push(current);\n return groups;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":406,"value":"groupsPerMinute = {\n if (presses.length === 0) return 0;\n const valid = decoded.filter((d) => d.letter).length;\n return (\n valid /\n (d3.timeMinute.count(\n presses[0].start,\n presses[presses.length - 1].end || presses[presses.length - 1].start\n ) +\n 1) // round minutes up\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":70,"value":"dahDuration = 3 * ditDuration // https://en.wikipedia.org/wiki/Morse_code","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":290,"value":"codes = new Map(morse.map(d => d.reverse()))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":280,"value":"letters = new Map(morse)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":38,"value":"// https://gist.githubusercontent.com/mohayonao/094c71af14fe4791c5dd\nmorse = Object.entries({\n \"0\": \"-----\",\n \"1\": \".----\",\n \"2\": \"..---\",\n \"3\": \"...--\",\n \"4\": \"....-\",\n \"5\": \".....\",\n \"6\": \"-....\",\n \"7\": \"--...\",\n \"8\": \"---..\",\n \"9\": \"----.\",\n \"a\": \".-\",\n \"b\": \"-...\",\n \"c\": \"-.-.\",\n \"d\": \"-..\",\n \"e\": \".\",\n \"f\": \"..-.\",\n \"g\": \"--.\",\n \"h\": \"....\",\n \"i\": \"..\",\n \"j\": \".---\",\n \"k\": \"-.-\",\n \"l\": \".-..\",\n \"m\": \"--\",\n \"n\": \"-.\",\n \"o\": \"---\",\n \"p\": \".--.\",\n \"q\": \"--.-\",\n \"r\": \".-.\",\n \"s\": \"...\",\n \"t\": \"-\",\n \"u\": \"..-\",\n \"v\": \"...-\",\n \"w\": \".--\",\n \"x\": \"-..-\",\n \"y\": \"-.--\",\n \"z\": \"--..\",\n \".\": \".-.-.-\",\n \",\": \"--..--\",\n \"?\": \"..--..\",\n \"!\": \"-.-.--\",\n \"-\": \"-....-\",\n \"/\": \"-..-.\",\n \"@\": \".--.-.\",\n \"(\": \"-.--.\",\n \")\": \"-.--.-\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":322,"value":"domain = [new Date(now - (width * ditDuration) / 2), now]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":343,"value":"mini = ({\n width,\n height: 30,\n marginBottom: 0,\n x: {\n domain,\n label: null,\n ticks: 0,\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":181,"value":"function tone() {\n const gain = ctx.createGain();\n gain.connect(ctx.destination);\n gain.gain.value = 0.5;\n gain.gain.setTargetAtTime(0, ctx.currentTime, 5);\n\n const oscillator = ctx.createOscillator();\n oscillator.frequency.value = 440;\n oscillator.connect(gain);\n oscillator.start();\n\n return {\n stop() {\n gain.gain.setTargetAtTime(0, ctx.currentTime, 0.1);\n }\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":179,"value":"ctx = new (window.AudioContext || window.webkitAudioContext)()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2f:"$2e:body" 2a:E{"digest":"NEXT_REDIRECT;replace;/@tv-stream-dream-team/morse-code-trainer;307;"}