Knob Color Picker - 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. Turn the knob on the Grove Beginner Kit to control the color displayed on a web page in real time — color swatches, color codes, and RGB values all change as you turn.
Documentation
Turn the knob on the Grove Beginner Kit and the color on the web page changes instantly. You'll see the current color swatch, its color code, and the red, green, and blue channel values all update together. The hue, saturation, and brightness also shift at the same time, making it easy to explore different color effects.
Great for anyone who wants to try controlling a web page with hardware, or for design color picking and color teaching.
Deploy steps
- What You Need
Chrome / Edge / 360 Browser — requires Web Serial API support
CodeCraft — generate code online, no installation needed: https://codecraft.seeed.cc
USB Cable — for connecting the device and uploading firmware
Grove Beginner Kit — includes Seeeduino Lotus board, the knob is built-in, no wiring needed
- Build and Test with CodeCraft
1. Open CodeCraft at CodeCraft , sign in, and create a new project .
2. Enter your project requirements
3. Wait for CodeCraft to generate the project, then connect the device with the USB cable, select the correct board and port in CodeCraft, and click upload
4. Once the upload finishes, open the generated web page, click connect, select the matching port, and turn the knob — the color on the page will change in real time
5.If the first result isn't quite right, tell CodeCraft what the problem is and what you want instead. For example, if the gradient bar doesn't match the knob position, say "the gradient bar should reflect the actual color mapping." The more specific you are, the better CodeCraft can adjust.
- Quick Start
Connect the Grove Beginner Kit to your computer using a USB cable. Click ‘Flash Firmware’ , select the correct device and port, and wait for the upload to finish.
Flash firmware to your device (in-app tool on CodeCraft Hub).
After flashing is complete, open KnobColorPicker.html. Click the Connect Device button on the webpage and select the corresponding port. Once connected, turn the knob on the board and check whether the color, color code, and values on the webpage change in real time.
KnobColorPicker.html
You can also use prompt.txt to regenerate the project in CodeCraft.
KnobColorPickerprompt.txt
- Q&A
Check that your USB cable supports data transfer — some cables are charge-only. Make sure the correct board and port are selected, reconnect the device, and try again.
Use Chrome, Edge, or 360 Browser. Close any other web pages or software that might be using the device's serial port, then reconnect.
Keep telling CodeCraft what the problem is and what you'd like to see instead. The more specific your feedback, the closer the next result will be to what you want.