DJ Salad Spinner

PRAISE
CAGE

\n Speed0 RPM\n

\n Playback0.00×\n

\n \n

Hall Effect sensor OUT → Arduino pin 9

\n \n \n

\n \n Speed bands\n \n \n Connection debug\n \n

\n\n \n

\n Whole-speed band starts at RPM\n \n\n Double speed above RPM\n \n\n Lower-band playback rate\n \n\n Middle-band playback rate\n \n\n Upper-band playback rate\n \n

\n \n \n

\n \n\n \n

Waiting to connect…

\n \n

\n \n \n \n \n",[],[83],"c95a0db0-43e2-470d-a8e6-9fad3f31d2f5","app.js","369c6124-9d9e-11f1-9cd3-1607ee4eb77e",53,["D",1787626907000],37,"\"use strict\";\n\nconst connectButton = document.querySelector(\"#connect\");\nconst statusElement = document.querySelector(\"#status\");\nconst logElement = document.querySelector(\"#log\");\nconst rpmElement = document.querySelector(\"#rpm\");\nconst rateElement = document.querySelector(\"#rate\");\nconst platter = document.querySelector(\"#platter\");\nconst audio = document.querySelector(\"#audio\");\n\nconst wholeMinInput = document.querySelector(\"#whole-min\");\nconst doubleAboveInput = document.querySelector(\"#double-above\");\nconst halfRateInput = document.querySelector(\"#half-rate\");\nconst wholeRateInput = document.querySelector(\"#whole-rate\");\nconst doubleRateInput = document.querySelector(\"#double-rate\");\nconst applyBandsButton = document.querySelector(\"#apply-bands\");\nconst resetBandsButton = document.querySelector(\"#reset-bands\");\nconst bandStatusElement = document.querySelector(\"#band-status\");\nconst speedTab = document.querySelector(\"#speed-tab\");\nconst debugTab = document.querySelector(\"#debug-tab\");\nconst speedPanel = document.querySelector(\"#speed-panel\");\nconst debugPanel = document.querySelector(\"#debug-panel\");\n\nconst DEFAULT_BANDS = {\n wholeMin: 300,\n doubleAbove: 400,\n halfRate: 0.5,\n wholeRate: 1,\n doubleRate: 2,\n};\nconst bandsKey = \"dj-salad-spinner:speed-bands-v1\";\n\nlet bands = loadBands();\nlet pulseTimestamps = [];\nlet lastAcceptedPulseAt = 0;\nlet rpmTimer = 0;\nlet stopTimer = 0;\nlet currentBoard = null;\nlet currentRpm = 0;\n\nshowBandSettings();\n\nfunction selectPanel(panelName) {\n const showSpeed = panelName === \"speed\";\n speedPanel.hidden = !showSpeed;\n debugPanel.hidden = showSpeed;\n speedTab.classList.toggle(\"active\", showSpeed);\n debugTab.classList.toggle(\"active\", !showSpeed);\n speedTab.setAttribute(\"aria-selected\", String(showSpeed));\n debugTab.setAttribute(\"aria-selected\", String(!showSpeed));\n}\n\nspeedTab.addEventListener(\"click\", () => selectPanel(\"speed\"));\ndebugTab.addEventListener(\"click\", () => selectPanel(\"debug\"));\n\nfunction loadBands() {\n try {\n const saved = JSON.parse(localStorage.getItem(bandsKey));\n return saved && Number.isFinite(saved.wholeMin)\n ? { ...DEFAULT_BANDS, ...saved }\n : { ...DEFAULT_BANDS };\n } catch (_) {\n return { ...DEFAULT_BANDS };\n }\n}\n\nfunction clamp(value, min, max) {\n return Math.min(max, Math.max(min, value));\n}\n\nfunction rateForRpm(rpm) {\n if (rpm <= 0) return 0;\n if (rpm < bands.wholeMin) return bands.halfRate;\n if (rpm <= bands.doubleAbove) return bands.wholeRate;\n return bands.doubleRate;\n}\n\nfunction describeBands() {\n bandStatusElement.textContent =\n \"1–\" + (bands.wholeMin - 1) + \" RPM → \" +\n bands.halfRate.toFixed(2) + \"× · \" +\n bands.wholeMin + \"–\" + bands.doubleAbove + \" RPM → \" +\n bands.wholeRate.toFixed(2) + \"× · above \" +\n bands.doubleAbove + \" RPM → \" +\n bands.doubleRate.toFixed(2) + \"×\";\n}\n\nfunction showBandSettings() {\n wholeMinInput.value = bands.wholeMin;\n doubleAboveInput.value = bands.doubleAbove;\n halfRateInput.value = bands.halfRate;\n wholeRateInput.value = bands.wholeRate;\n doubleRateInput.value = bands.doubleRate;\n describeBands();\n}\n\nfunction setSpeed(rpm) {\n currentRpm = rpm;\n const rate = rateForRpm(rpm);\n\n rpmElement.textContent = Math.round(rpm);\n rateElement.textContent = rate.toFixed(2);\n platter.classList.toggle(\"spinning\", rpm > 0);\n\n if (rpm > 0) {\n audio.playbackRate = clamp(rate, 0.25, 2);\n if (audio.paused) {\n audio.play().catch(error => {\n statusElement.textContent =\n \"Press play once to enable audio: \" + error.message;\n });\n }\n } else {\n audio.pause();\n }\n}\n\nfunction calculateTimedRpm() {\n const now = performance.now();\n pulseTimestamps = pulseTimestamps.filter(\n timestamp => now - timestamp < 1000\n );\n\n // Original timing model: pulses during one second × 60. The window rolls\n // instead of resetting, so continuous rotation cannot land in an empty bucket.\n setSpeed(pulseTimestamps.length * 60);\n}\n\nfunction stopBoardState() {\n clearInterval(rpmTimer);\n clearTimeout(stopTimer);\n rpmTimer = 0;\n stopTimer = 0;\n pulseTimestamps = [];\n lastAcceptedPulseAt = 0;\n setSpeed(0);\n}\n\napplyBandsButton.addEventListener(\"click\", () => {\n const nextBands = {\n wholeMin: Number(wholeMinInput.value),\n doubleAbove: Number(doubleAboveInput.value),\n halfRate: Number(halfRateInput.value),\n wholeRate: Number(wholeRateInput.value),\n doubleRate: Number(doubleRateInput.value),\n };\n\n const values = Object.values(nextBands);\n if (\n values.some(value => !Number.isFinite(value)) ||\n nextBands.wholeMin < 1 ||\n nextBands.doubleAbove <= nextBands.wholeMin ||\n nextBands.halfRate < 0.25 ||\n nextBands.doubleRate > 2\n ) {\n bandStatusElement.textContent =\n \"Use valid rates from 0.25× to 2×, with the upper threshold above the lower threshold.\";\n return;\n }\n\n bands = nextBands;\n localStorage.setItem(bandsKey, JSON.stringify(bands));\n describeBands();\n setSpeed(currentRpm);\n});\n\nresetBandsButton.addEventListener(\"click\", () => {\n bands = { ...DEFAULT_BANDS };\n localStorage.removeItem(bandsKey);\n showBandSettings();\n setSpeed(currentRpm);\n});\n\nwindow.addEventListener(\"pagehide\", () => {\n stopBoardState();\n if (currentBoard) currentBoard.disconnect().catch(() => {});\n});\n\nnavigator.serial?.addEventListener(\"disconnect\", () => {\n currentBoard = null;\n stopBoardState();\n statusElement.textContent =\n \"Arduino disconnected — reconnect the USB cable.\";\n connectButton.disabled = false;\n connectButton.textContent = \"Reconnect Arduino\";\n});\n\nconnectButton.addEventListener(\"click\", async () => {\n connectButton.disabled = true;\n logElement.textContent = \"\";\n\n try {\n await audio.play();\n audio.pause();\n audio.currentTime = 0;\n } catch (_) {}\n\n try {\n const five = window.JohnnyFiveWebSerial;\n const board = await five.connect({\n onStatus(phase) {\n const labels = {\n \"selecting-port\": \"Choose your Arduino USB port…\",\n \"opening-port\": \"Opening USB serial…\",\n \"firmata-handshake\": \"Talking to StandardFirmataPlus…\",\n \"johnny-five-init\": \"Starting Johnny-Five…\",\n ready: \"Connected — spin the platter!\",\n };\n statusElement.textContent = labels[phase] || phase;\n },\n onDebug(entry) {\n const detail = entry.detail === undefined\n ? \"\"\n : \" \" + (typeof entry.detail === \"string\"\n ? entry.detail\n : JSON.stringify(entry.detail));\n logElement.textContent +=\n \"[\" + entry.time + \"] \" + entry.message + detail + \"\\n\";\n logElement.scrollTop = logElement.scrollHeight;\n },\n });\n currentBoard = board;\n\n // Read pin 9 directly. Pin 13 remains unused because it shares Firmata\n // digital port 1 with the sensor and its LED writes polluted the trace.\n board.io.pinMode(9, board.io.MODES.INPUT);\n let lastDigitalValue = null;\n\n board.io.digitalRead(9, value => {\n const digitalValue = Number(value);\n if (\n !Number.isFinite(digitalValue) ||\n digitalValue === lastDigitalValue\n ) return;\n\n lastDigitalValue = digitalValue;\n if (digitalValue !== 0) return;\n\n const now = performance.now();\n\n // Collapse the occasional double blink caused by magnet misalignment.\n if (lastAcceptedPulseAt && now - lastAcceptedPulseAt < 50) return;\n\n pulseTimestamps.push(now);\n lastAcceptedPulseAt = now;\n calculateTimedRpm();\n\n clearTimeout(stopTimer);\n stopTimer = setTimeout(() => {\n pulseTimestamps = [];\n lastAcceptedPulseAt = 0;\n setSpeed(0);\n }, 225);\n });\n\n clearInterval(rpmTimer);\n clearTimeout(stopTimer);\n pulseTimestamps = [];\n lastAcceptedPulseAt = 0;\n rpmTimer = setInterval(calculateTimedRpm, 250);\n\n connectButton.textContent = \"Arduino connected\";\n statusElement.textContent =\n \"Connected — spin the platter!\";\n } catch (error) {\n stopBoardState();\n statusElement.textContent = error.message;\n logElement.textContent +=\n \"ERROR: \" + (error.stack || error.message) + \"\\n\";\n connectButton.disabled = false;\n }\n});\n",[],[92],"93b3060a-de5a-4748-a551-ef77584e1fdd","about.html","58aee9b0-a0e8-11f1-9615-1607ee4eb77e",69,["D",1787706270813],5,"\n\n \n \n \n \n About the DJ Salad Spinner\n \n \n \n \n

\n \n\n

A salad spinner can be a DJ controller

\n This project turns an ordinary IKEA salad spinner into a physical\n music controller. Crank the bowl and the song plays. Stop the bowl and\n the song stops. No soldering, breadboard, or custom Arduino program is\n required. You do not need prior electronics or robotics experience to\n follow this explanation.\n

\n\n

What is hardware hacking?

\n Hardware hacking means taking an everyday object and giving it a new\n behavior with electronics and code. Here, the salad spinner still\n spins salad—but a magnet, a sensor, and an Arduino let a web page\n notice that motion.\n

\n Nothing is being broken into. “Hacking” means experimenting, adapting,\n and understanding how parts can work together.\n

\n\n

The whole idea in five steps

\n A small magnet travels around with the spinner’s rotating bowl.\n
\n A Hall-effect sensor notices whenever the magnet passes nearby.\n
\n An Arduino turns that sensor change into data the computer can read.\n
\n Johnny-Five gives JavaScript a friendly way to work with the\n Arduino.\n
\n The browser estimates the spinner’s speed and chooses a music\n playback rate.\n

\n\n

The parts

\n You need an Arduino Uno, a 49E/LM393 Hall sensor module, one magnet,\n three jumper wires, a standard USB cable, and the salad spinner. The\n parts connect directly—there is no breadboard.\n

\n \n

\n Red supplies 5 volts, black is ground, and yellow carries the\n sensor’s digital signal to Arduino pin 9.\n

\n \n

\n\n

Beginner safety

Unplug the Arduino before moving wires.
Double-check 5V and GND before reconnecting USB.
Secure the magnet so it cannot fly loose while spinning.
Keep loose wires away from the rotating bowl.
\n This project uses the Arduino’s low-voltage 5V power—not household\n electricity.\n

\n\n

What does Johnny-Five do?

\n Johnny-Five is a JavaScript library for robotics and electronics. It\n gives hardware familiar JavaScript concepts such as objects, events,\n and callbacks. Instead of writing a full embedded program for every\n interaction, JavaScript can listen for changes on an Arduino pin.\n

\nboard.io.pinMode(9, board.io.MODES.INPUT);\n\nboard.io.digitalRead(9, value => {\n  if (value === 0) {\n    // The magnet passed the sensor.\n  }\n});

\n This project runs a browser-compatible version of Johnny-Five and\n communicates over Web Serial. The Arduino runs StandardFirmataPlus, a\n general-purpose firmware that lets the browser configure and read its\n pins.\n

\n\n

How does the app know the speed?

\n Each magnet pass is one pulse. The app counts accepted pulses from the\n previous second and multiplies by 60 to estimate revolutions per\n minute. Very fast duplicate pulses are ignored because the physical\n sensor can occasionally blink twice during one pass.\n

\n The result selects one of three adjustable music speeds: half speed,\n normal speed, or double speed. If another pulse does not arrive\n quickly, the app pauses the music and freezes the illustrated record\n exactly where it stopped.\n

\n\n

Quick glossary

Arduino: \n A small programmable board that connects electronic parts to a\n computer.\n
Hall-effect sensor: \n An electronic part that detects a nearby magnetic field without\n touching the magnet.\n
Digital pin: \n An Arduino connection that reads a simple on-or-off electrical\n signal.\n
Firmata: \n The general-purpose Arduino firmware that lets software on the\n computer read and control pins.\n
Web Serial: \n A browser feature that lets a web page communicate with an\n authorized USB serial device.\n
Johnny-Five: \n A JavaScript library that provides approachable APIs for robotics\n and electronics.\n

\n\n

Try changing one thing

\n Hardware hacking becomes approachable when you change one variable at\n a time. Move the sensor slightly, adjust its potentiometer, or change\n an RPM threshold in the Speed bands panel. Observe what changes, then\n keep notes.\n

\n When you want the implementation details, wiring notes,\n troubleshooting, and complete algorithm, continue to the\n technical README.\n

\n\n \n

\n \n \n",[],[101],"0ba2fa27-5096-4d8f-b5e5-b9fce92a580a","README.md","e5a5a05c-a0b6-11f1-9310-1607ee4eb77e",70,["D",1787706470395],"# DJ Salad Spinner\n\nA browser-based DJ controller that turns an IKEA-style salad spinner into a physical music transport. A magnet attached to the rotating bowl passes a Hall-effect sensor once per revolution. An Arduino reports those pulses through Firmata and Web Serial; the browser estimates RPM and selects an audio playback-rate band.\n\n**Live app:** https://djsally.val.run/\n\n**Original Node/Johnny-Five prototype:** https://github.com/pchinjr/sit-and-spin-music-player\n\n## What it does\n\n- Connects directly to an Arduino from a Chromium browser using Web Serial.\n- Reads a digital Hall-sensor signal on Arduino pin 9.\n- Filters the occasional double pulse caused by magnet alignment and comparator chatter.\n- Estimates RPM from pulses observed during a rolling one-second window.\n- Maps RPM into configurable half-, whole-, and double-speed playback bands.\n- Stops playback promptly when the spinner stops.\n- Preserves the record platter's visual angle while stopped and resumes from that position.\n- Stores custom speed-band settings in browser `localStorage`.\n\nA single Hall sensor measures pulse frequency but not direction. This version cannot distinguish clockwise from counterclockwise rotation and therefore cannot implement rewind.\n\n## Hardware\n\n### Components\n\n- Arduino Uno\n- 49E linear Hall-effect sensor module with LM393 comparator\n- Permanent magnet\n- Salad spinner with a rotating bowl\n- Jumper wires\n- USB cable between the Arduino and computer\n\n### Bill of materials\n\nEstimated US retail prices as of August 2026, before tax and shipping:\n\n| Part | Quantity | Estimated cost | Notes |\n| --- | ---: | ---: | --- |\n| [IKEA UPPFYLLD salad spinner](https://www.ikea.com/us/en/p/uppfylld-salad-spinner-white-00521948/) | 1 | $9.99 | The physical crank and rotating bowl. |\n| Arduino Uno Rev3 | 1 | $30–35 | A genuine Uno; compatible boards may cost less. |\n| 49E Hall sensor module with LM393 comparator | 1 | $2–6 | Use the module's digital output. |\n| Small permanent magnet | 1 | $1–3 | Mounted to the rotating bowl. |\n| Male-to-female jumper wires | 3 | $1–3 allocated | One each for 5V, ground, and digital output; normally purchased as a pack. |\n| [USB 2.0 Type-A-to-Type-B cable](https://store-usa.arduino.cc/collections/cables-wires) | 1 | $6.50 | Standard Arduino Uno USB data cable. |\n| Breadboard | 0 | $0 | Not used; the module connects directly to the Uno. |\n| **Estimated total** | | **$50–64** | Buying every component new. |\n\nIf you already own the Arduino, jumper wires, and USB cable, the spinner, sensor module, and magnet add approximately **$13–19**.\n\nPrices are estimates and may vary by seller. The IKEA US listing showed the UPPFYLLD spinner at $9.99, while Arduino listed its official USB 2.0 cable at $6.50 when this BOM was written.\n\nThe module combines two stages:\n\n1. The **49E Hall sensor** produces an analog voltage based on magnetic-field strength and polarity.\n2. The **LM393 comparator** compares that voltage with a reference voltage set by the module's potentiometer and exposes a digital output.\n\nThe potentiometer changes the comparator threshold; it does not amplify the magnet or debounce the signal.\n\n### Wiring\n\n![Fritzing wiring diagram showing the 49E LM393 Hall sensor module connected to an Arduino Uno](https://djsally.val.run/wiring-diagram.png)\n\n| Hall module | Arduino |\n| --- | --- |\n| VCC | 5V |\n| GND | GND |\n| DO / D0 | Digital pin 9 |\n| AO / A0 | Not used |\n\nUse the module's digital output, not its analog output, with the current software.\n\nArduino pin 13 is deliberately unused. Pins 9 and 13 share Firmata digital port 1; toggling an LED on pin 13 added outgoing port messages to the sensor trace and complicated input behavior. The Hall module's onboard LED already provides a physical trigger indicator.\n\n### Magnet and sensor placement\n\n- Mount the magnet so its face passes the sensitive face of the Hall sensor.\n- Keep the sensor and magnet mounts mechanically stable.\n- Start with a small gap, roughly 2–5 mm, and adjust as needed.\n- Tune the potentiometer until one physical pass produces one clean LED blink.\n- A tilted magnet or the curved path of the bowl can make the magnetic field cross the comparator threshold twice during one pass.\n\nThe observed hardware occasionally produces a sequence like:\n\n```text\nHIGH → LOW → HIGH → LOW → HIGH\n```\n\nThe second low transition may occur only a few milliseconds after the first. The software treats that as one physical pass.\n\n## Arduino firmware\n\nThe Arduino runs **StandardFirmataPlus**. The tested connection reported Firmata 2.5 at 57,600 baud.\n\nThe browser connection performs the Firmata handshake, configures pin 9 as a digital input, and subscribes to its values. No project-specific Arduino sketch is required after StandardFirmataPlus is installed.\n\n## Core algorithm\n\n### 1. Detect a magnet pass\n\nThe browser reads pin 9 directly through the Firmata I/O adapter:\n\n```js\nboard.io.pinMode(9, board.io.MODES.INPUT);\nboard.io.digitalRead(9, value => {\n // Process digital transitions.\n});\n```\n\nThe software ignores repeated reports of the same digital state and considers a transition to `LOW` a candidate magnet pass.\n\n### 2. Filter double pulses\n\nA candidate low transition is accepted only if it occurs at least 50 ms after the previous accepted pulse:\n\n```js\nif (lastAcceptedPulseAt && now - lastAcceptedPulseAt < 50) {\n return;\n}\n```\n\nThis is a refractory period. It filters the observed 3–8 ms duplicate transitions while leaving substantial room for legitimate rotations. A 50 ms minimum interval corresponds to a theoretical ceiling of 1,200 RPM, well above the spinner's observed operating range.\n\n### 3. Calculate RPM\n\nThe original prototype counted pulses for one second and multiplied the count by 60:\n\n```text\nRPM = pulses per second × 60\n```\n\nThe current app preserves that timing-based formula but uses a **rolling** one-second window. Each accepted pulse receives a `performance.now()` timestamp. Old timestamps are removed, and the remaining count is converted to RPM:\n\n```js\npulseTimestamps = pulseTimestamps.filter(\n timestamp => now - timestamp < 1000\n);\n\nconst rpm = pulseTimestamps.length * 60;\n```\n\nThe calculation runs immediately after an accepted pulse and every 250 ms. A rolling window prevents continuous rotation from appearing as alternating nonzero and zero fixed buckets.\n\nBecause the window is exactly one second, displayed RPM is quantized in 60-RPM increments: 60, 120, 180, 240, 300, 360, 420, and so on.\n\n### 4. Detect a stop\n\nEvery accepted pulse restarts a 225 ms timer. If another pulse does not arrive before it expires, the app:\n\n- Clears the pulse history.\n- Sets RPM to zero.\n- Pauses the audio.\n- Pauses the visual platter.\n\nAt observed top speed, legitimate pulses arrive roughly 130–150 ms apart, so 225 ms represents approximately one missed expected rotation. This makes the stop feel responsive rather than waiting for the full one-second RPM window to empty.\n\n### 5. Select a playback band\n\nThe default mapping is discrete:\n\n| Measured RPM | Playback rate |\n| ---: | ---: |\n| 0 | Stopped |\n| 1–299 | 0.5× |\n| 300–400 | 1× |\n| Above 400 | 2× |\n\nThe settings panel allows both thresholds and all three nonzero rates to be changed. Applied settings are saved under `dj-salad-spinner:speed-bands-v1` in browser `localStorage`.\n\nThis is deliberately a banded controller rather than a continuously variable pitch calculation. The rolling RPM measurement has 60-RPM resolution, and discrete bands produce steadier, more intentional musical behavior.\n\n## Software architecture\n\n```text\nHall module\n │ digital LOW/HIGH\n ▼\nArduino Uno + StandardFirmataPlus\n │ USB serial at 57,600 baud\n ▼\nWeb Serial transport\n │ Firmata messages\n ▼\nBrowserified Johnny-Five / Firmata adapter\n │ board.io.digitalRead(9)\n ▼\napp.js\n ├── pulse filtering\n ├── rolling RPM window\n ├── stop detection\n ├── playback-band selection\n ├── local settings\n └── platter state\n │\n ├── HTMLAudioElement\n └── DOM/CSS interface\n```\n\n### Val Town files\n\n| File | Responsibility |\n| --- | --- |\n| `main.ts` | Hono HTTP entry point; serves the HTML, client script, vendored bundle, and source redirect. |\n| `index.html` | Page structure, audio element, meters, platter, styles, speed settings, and debug UI. |\n| `app.js` | Web Serial connection, Firmata input, filtering, RPM calculation, playback control, settings, and UI state. |\n| `vendor/johnny-five-web-serial.min.js` | Browserified Johnny-Five/Firmata compatibility layer. |\n\nVal Town serves these files directly. There is no frontend bundler or build step. The browser loads:\n\n```html\n\n\n\n```\n\nThe first script reports client-side errors to Val Town logs. The vendored bundle exposes `window.JohnnyFiveWebSerial`, and `app.js` contains the application logic.\n\n### Server layer\n\n`main.ts` is intentionally small. Hono routes requests to `serveFile`:\n\n- `/` → `index.html`\n- `/app.js` → browser application code\n- `/johnny-five-web-serial.min.js` → vendored hardware library\n- `/source` → Val Town source page\n\nThe server does not proxy serial data or control the Arduino. Hardware communication occurs locally between the browser and the USB device.\n\n## Visual platter behavior\n\nThe CSS rotation animation is always attached to the platter. The app changes only `animation-play-state`:\n\n- Nonzero RPM → `running`\n- Zero RPM → `paused`\n\nPausing instead of removing the animation preserves the exact rotation angle. When spinning resumes, “PRAISE CAGE” continues from where it stopped instead of jumping back to the zero-degree position.\n\n## Browser requirements\n\n- A Chromium-based browser with Web Serial support, such as Chrome or Edge\n- A secure context\n- User interaction to select and authorize the serial port\n- User interaction to satisfy browser audio autoplay requirements\n\nThe page briefly starts and pauses the audio inside the Connect button gesture so later sensor events can control playback.\n\n## Settings and debugging\n\nThe combined control panel has two tabs:\n\n- **Speed bands** edits RPM thresholds and playback rates.\n- **Connection debug** displays Web Serial, Firmata handshake, transmit, and receive messages.\n\nSettings are local to the current browser profile. They are not stored on the Arduino or in Val Town.\n\n## Known limitations\n\n- One sensor cannot determine direction.\n- RPM resolution is 60 RPM because the algorithm counts pulses in a one-second window.\n- The 50 ms duplicate filter is fixed rather than adaptive.\n- The 225 ms stop timeout is tuned to the currently observed spinner cadence.\n- Comparator behavior depends on magnet alignment, sensor distance, potentiometer threshold, mechanical vibration, and electrical noise.\n- `HTMLMediaElement.playbackRate` changes both speed and perceived pitch according to browser behavior; this is not a time-stretching audio engine.\n\n## Troubleshooting\n\n### The module LED blinks, but the app receives nothing\n\n- Confirm `DO` is connected to Arduino pin 9.\n- Confirm StandardFirmataPlus is installed and running.\n- Reconnect the USB port from the browser.\n- Check the Connection debug tab for Firmata pin-9 messages.\n\n### One rotation is counted twice\n\n- Adjust the module potentiometer in small increments.\n- Improve magnet alignment and mount rigidity.\n- Narrow the detection zone while preserving reliable full-speed detection.\n- Compare the duplicate interval with the 50 ms software filter.\n\n### Playback stops while the spinner is still moving\n\n- Confirm legitimate pulse gaps remain below the 225 ms stop timeout.\n- Move the sensor closer or retune the threshold if some rotations are missed.\n- Inspect the debug trace for missing `LOW` transitions.\n\n### RPM seems too high\n\n- Confirm there is only one accepted low transition per physical revolution.\n- Look for duplicate blinks on the module LED.\n- Remember that readings change in 60-RPM increments.\n\n### RPM changes but playback does not behave as expected\n\n- Open Speed bands and verify the thresholds.\n- Reset the bands to restore 0.5× / 1× / 2× defaults.\n- Browser audio playback rate is clamped to the supported 0.25×–2× range.\n",[],[110],["D",1787343776296],[120],[19],{"_34":35,"_13":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":121,"_17":49,"_50":51,"_52":53,"_54":55,"_56":-5,"_79":122,"_18":123},["D",1787345386559],[],[19,36],"4b32b025-5337-4bec-a657-b4ee2629b9b6",["D",1787343586883],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Browser Johnny-Five DJ turntable demo","imageUrl","userId","40e69d1a-3254-4858-920b-7b1449761575","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","54bae3d1-8223-41e5-b22d-81eb28a263c7","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_177":173},"org",{"_11":12,"_171":-5,"_172":173,"_134":135,"_174":175,"_176":55},"branch",{"_17":112,"_13":16,"_34":42,"_163":124,"_164":-5,"_165":-5,"_166":-5,"_167":-5,"_168":-5,"_169":14,"_170":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://images.clerk.dev/oauth_github/img_2OaSpooJk6yZ5KFqyjtIVA4z3SH.jpeg","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_34":124,"_13":14,"_47":231,"_126":-5,"_127":55,"_128":129,"_130":129,"_131":132,"_133":-5,"_134":135,"_136":72,"_137":46,"_138":-5,"_139":-5,"_140":60,"_141":142,"_143":-5,"_144":-5,"_145":-5,"_146":-5,"_147":148,"_149":148,"_150":151,"_152":151,"_153":151,"_154":148,"_155":148,"_156":232,"_158":233,"_160":234,"_162":55},[210,212,213,214,215,216],"files",[210,211,212,213,214,215,216],"counts",{"_201":60,"_202":49,"_203":60,"_32":204,"_205":206},[199],{"_34":58,"_13":19,"_37":40,"_39":-5,"_41":42,"_43":62,"_45":46,"_47":197,"_17":60,"_50":59,"_52":-5,"_54":55,"_56":-5,"_18":198},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1787343776296],[19],{"_34":35,"_13":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_17":49,"_50":51,"_52":53,"_54":55,"_56":-5,"_18":200},[19,36],"pulls","branches","forks",{"_207":60,"_209":60},"connections",{"_207":60,"_208":60},"count","unfilledCount","emptyCount",{"_34":58,"_13":19,"_37":40,"_39":-5,"_41":42,"_43":62,"_45":46,"_47":117,"_17":60,"_50":59,"_52":-5,"_54":55,"_56":-5,"_79":229,"_18":230},{"_34":35,"_13":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":121,"_17":49,"_50":51,"_52":53,"_54":55,"_56":-5,"_79":227,"_18":228},{"_34":109,"_13":110,"_37":111,"_39":-5,"_41":42,"_43":112,"_45":46,"_47":113,"_17":75,"_50":24,"_52":114,"_54":55,"_56":-5,"_79":225,"_18":226},{"_34":100,"_13":101,"_37":102,"_39":-5,"_41":42,"_43":103,"_45":46,"_47":104,"_17":105,"_50":24,"_52":106,"_54":55,"_56":-5,"_79":223,"_18":224},{"_34":91,"_13":92,"_37":93,"_39":-5,"_41":42,"_43":94,"_45":46,"_47":95,"_17":96,"_50":51,"_52":97,"_54":55,"_56":-5,"_79":221,"_18":222},{"_34":82,"_13":83,"_37":84,"_39":-5,"_41":42,"_43":85,"_45":46,"_47":86,"_17":87,"_50":24,"_52":88,"_54":55,"_56":-5,"_79":219,"_18":220},{"_34":70,"_13":71,"_37":72,"_39":-5,"_41":42,"_43":73,"_45":46,"_47":74,"_17":75,"_50":76,"_52":77,"_54":55,"_56":78,"_79":217,"_18":218},[],[71],[],[83],[],[92],[],[101],[],[110],[],[19,36],[211],[19],["D",1787343586883],{"_11":12,"_177":173},{"_11":12,"_171":-5,"_172":173,"_134":135,"_174":175,"_176":55},{"_17":112,"_13":16,"_34":42,"_163":124,"_164":-5,"_165":-5,"_166":-5,"_167":-5,"_168":-5,"_169":14,"_170":12},"ctx",{"_156":-5,"_194":268,"_269":270,"_271":272,"_273":55,"_274":55,"_275":55,"_276":46,"_277":-5,"_278":-7,"_279":-7,"_280":60,"_281":55,"_282":55,"_283":-5,"_284":55,"_285":55,"_286":55,"_287":-5},"ENV",{"_239":240,"_241":242,"_243":16,"_244":245,"_246":247,"_248":249,"_250":251,"_252":253,"_254":255,"_256":257,"_258":259,"_260":261,"_262":263,"_264":265,"_266":267},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]