Web LED Dimmer Tutorial · Grove Beginner Kit - Grove Beginner Kit for Arduino - dumpling—li - CodeCraft Hub
Scene: Maker. Edge AI application on CodeCraft Hub for Maker use cases.
Devices / BOM: Grove Beginner Kit for Arduino
Maker application on CodeCraft Hub. An interactive hardware project controlled entirely from your browser. Drag a slider (0–255) and the Grove Beginner Kit's onboard LED dims in real time. No Arduino IDE required — both firmware and web UI are generated by AI in one go.
Documentation
Brightness Slider — Web - based PWM LED dimmer for the Grove Beginner Kit . Drag a 0 – 255 slider in the browser ; the onboard LED ( D4 ) follows in real time via Web Serial , using software PWM at ~ 60Hz . No hardware modification needed .
Try CodeCraft conversational programming now: codecraft
Deploy steps
- Open CodeCraft, Enter the Prompt
I'm using Grove Beginner Kit. Please implement:
Arduino firmware: onboard LED on D4, use software PWM for 0–255 brightness.Receive brightness values via serial (115200), format: number + newline.
Interactive web page: a range slider (0–255) that sends values in real time via Web Serial API. Include a circular LED preview that syncs with the slider.
Compile the firmware and provide the flash page and interactive page.
- Flash the Firmware
Open flash-ui-v0001.html:
Click "Connect Device" → select the serial port
Click "Flash Firmware" → wait for completion
"Flash Successful" means it's done
Flashing takes about 30 seconds. Do not unplug the USB or close the page during this time.
- Real-Time Dimming Test
Open led-dimmer-control.html:
Click "Connect Device" → select the serial port
Drag the slider (0–255) — LED brightness changes in real time
The circular preview on the page glows in sync
- One-Click Web Experience
No coding, no setup — run the full project in three steps:
Preview the UI — Open led-dimmer-control.html in your browser. See the interface, drag the slider, and watch the LED preview glow — no hardware needed yet.
Flash the firmware — Open flash-ui-v0001.html, connect your board, and click "Flash Firmware".
Start using it — Switch back to led-dimmer-control.html, connect the serial port, and drag the slider. The project is now running on your machine.
Flash firmware to your device (in-app tool on CodeCraft Hub).
- FAQ
Q: D4 isn't a PWM pin — how does dimming work?
A: The firmware uses software PWM at 100Hz. The CPU rapidly toggles the LED to simulate a duty cycle. The human eye can't see the flicker — it looks identical to hardware PWM.
Q: Can't find the serial port in the browser?
A: Make sure the USB cable supports data transfer (some are charge-only). Use Chrome or Edge (Firefox/Safari don't support Web Serial API).
Q: LED doesn't respond when I drag the slider?
A: Confirm the firmware was flashed successfully. Make sure no other page is holding the serial port. Try serial-debug-v0001.html: type 128 and press Enter to test.
Q: Slight flicker at very low brightness?
A: Software PWM at brightness < 10 may have minor jitter due to micros() precision and interrupt overhead. This is normal.
Q: Can I use a Grove LED module on a PWM pin instead?
A: Yes. Break off the LED module, connect it to D3/D5/D6/D9/D10/D11 via a Grove cable, change LED_PIN in the firmware, and you can use analogWrite() directly.