Electronic Wooden Fish - Seeed Studio XIAO ESP32S3 - dumpling - CodeCraft Hub
Scene: Maker. Edge AI application on CodeCraft Hub for Maker use cases.
Devices / BOM: Seeed Studio XIAO ESP32S3, Grove - Button / Touch
Maker application on CodeCraft Hub. A Zen-inspired electronic wooden fish: press a button or hit the spacebar, and the mallet strikes the wooden fish with a crisp, realistic sound — helping you relax and focus.
Documentation
The Electronic Wooden Fish is a small interactive project that combines hardware and a web page. With just a XIAO ESP32S3 board and a button, you can see a traditionally styled wooden fish resting on a red-and-gold cushion in your browser — simple and full of Zen.
Each time you press the button, the mallet on screen swings down to strike the wooden fish. The fish gives a subtle shake, and a short, crisp wooden fish sound plays. The sound is synthesized using the Web Audio API with natural woody resonance, just like the real thing. After the strike, the mallet returns to its resting position automatically.
Even without the hardware connected, you can press the spacebar or click the wooden fish on screen to trigger a strike — perfect for quick testing and casual use.
It's great for taking a moment to relax during work, for meditation, or as a beginner-friendly project to learn Arduino and Web Serial interaction.
Deploy steps
- Preparation
XIAO ESP32S3 board × 1
XIAO expansion board × 1
Button module × 1 (connected to pin D0)
USB data cable × 1
Chrome / Edge / 360 Browser (Web Serial API support required)
CodeCraft platform: generate code online, no software installation needed — https://codecraft.seeed.cc
- Build and Test with CodeCraft
Open the CodeCraft platform at https://codecraft.seeed.cc, log in, and create a new project.
Describe your project requirements in CodeCraft — tell it you want to build an electronic wooden fish that plays a striking animation and sound on a web page when a button is pressed.
Wait for CodeCraft to generate the project code. Connect the XIAO ESP32S3 with a USB cable, select the correct board model and serial port in CodeCraft, then click to flash the firmware.
After flashing, open the generated wooden-fish.html web page. Click the "Connect Device" button at the bottom, and select the serial port for your XIAO ESP32S3 from the pop-up list. Press the button — you will see the mallet strike the wooden fish and hear the crisp sound. Without hardware, you can also press the spacebar or click the wooden fish on screen to test.
If the first result isn't quite what you expected — for example, the sound isn't crisp enough or the wooden fish doesn't look realistic — you can tell CodeCraft what needs adjusting, and it will refine the project for you.
- Quick Deploy
Flash firmware to your device (in-app tool on CodeCraft Hub).
wooden-fish.html
Quick experience steps:
1. Connect the XIAO ESP32S3 with a USB cable. Use the one-click flash plugin above, select the correct board model and serial port, and wait for flashing to complete.
2. Download index.html (i.e., wooden-fish.html) to a folder on your computer, such as D:\wooden-fish\.
3. Because the page uses Web Serial API, you must open it through a local server — double-clicking the file directly will not work. Open the command line in the file's folder (type cmd in the folder's address bar), then run:
python -m http.server 8000
Then open http://localhost:8000/wooden-fish.html in your browser.
4. Click the "Connect Device" button at the bottom of the page, and select the serial port for your XIAO ESP32S3 to establish the connection.
5. Press the button connected to pin D0 — the mallet strikes the wooden fish, the fish gives a subtle shake, and a crisp woody resonance plays. You can also press the spacebar or click the wooden fish on screen for the same effect.
Note: If you don't have Python installed, download it from https://www.python.org (check "Add Python to PATH" during installation). If port 8000…
- Q&A
Q: The device or serial port is not found during flashing?
A: First, check that the USB cable is properly connected and the XIAO ESP32S3 is powered on. If it still isn't found, try a different USB cable or port — some cables only support charging, not data transfer.
Q: Nothing happens when I click "Connect Device" on the web page?
A: Make sure you are using Chrome, Edge, or 360 Browser — Web Serial API is only supported in Chromium-based browsers. Also check that the serial port isn't already in use by another program; close any other serial tools and try again.
Q: The web page doesn't respond when I press the button?
A: First, test the web page itself by pressing the spacebar or clicking the wooden fish. If the web page works but the button doesn't, check that the button is connected to pin D0 (GPIO1) and that the pin reads HIGH when pressed. You can also open the serial debug page to see if WOODEN_FISH_HIT signals are being received.