How we powered a Halloween puppet with React Native and Arduino
Thank you for reading my first blog post! Feedback of any kind is greatly appreciated!
Sometimes a special occasion needs that something extra.. a stand-out centerpiece that makes it all-the-more memorable. This is a story of such an event, where we, a pair of techie housemates, were on the hook to host a Halloween party. Rather than settle for the out-of-the-box conveniences, we made it our mission to create something so ghoulishly novel, so over-the-top, so… D.I.Y., that it just might blur the lines between machine and magic.
We give you: Count Oinkula!
OK, so maybe one can only expect so much out of a 10 day budget.. But under the snout, oink, I mean, uh, hood, a lot of cool technology went into the build, and we’d love to share with you our journey through it all.
Getting started
Full disclosure: we had some embedded sand-boxing materials lying around.. c’mon, this idea didn’t just fall out of the sky! Only now, we had the audacity to cobble them together into a Halloween showpiece. The tools at our disposal were: a 3-servo “puppet harness” (pan-tilt combo with mouth actuator), a WiFi-enabled Arduino (MKR WiFi 1010), and a knowledge of full stack web development, including React Native for mobile.
Scoping out the project
After some deliberation, bargaining, and acceptance, we settled on the following design:
- Connect servo assembly to Arduino
- Develop Arduino sketch to:
1. Connect to WiFi.
2. Broadcast IP over UDP to become discoverable.
3. Host a TCP server for receiving servo commands from a client.
4. Parse a motor control signal to be received from the app. - Develop React Native application to:
1. Connect a TCP client to the Arduino TCP server.
2. Generate motor control signal and stream it over the TCP socket.
Connect servo assembly to Arduino (fig1).
Develop Arduino sketch to Connect to local WiFi, to broadcast its IP over UDP, to host a TCP server to listen for clients, and to parse a motor control signal received from the client (fig 2).
This example shows a hard-coded login for a local WiFi network. In a future article, we will show you how you might dynamically configure network credentials for the Arduino.
The signal string, formatted as XXXXYYYYZZZZ, sends a 4 digit set-point to each of the 3 servo motors every frame. In this particular case, the range of operations for the servos is roughly 1200–1800, with 1500 being the midpoint. This implementation is using the writeMicroseconds() method from the Arduino Servo library to generate the PCM signal.
Develop a React Native application to discover the Arduino’s IP via UDP, to connect to that IP as a TCP client, and to stream a motor control signal to the Arduino (fig 3).
A lot of ground to cover for a 10 day window, let’s put our snouts to the grindstone!
Really fun progress right off the bat! We have a TCP buffer feeding a string for motor control to the Arduino.
We’re on our way! The React app is now streaming our motor control signal over a TCP buffer.
And for convenience and fun, we’re generating the signal string with the phone’s gyroscopes. How novel!
Fabricating a head and body for our puppet Count Oinkula.
Pushing pins into his mouth… Close your eyes, it just hurts for a second!
Placing him upon the altar…
And, he has arrived! Welcome, Count Oinkula!
In Closing
Lots of candy was eaten, lots of fun was had, and the party was a blast for the kids and the adults! But we’re not stopping here. Now that we have this framework in place, we’re going to expand our project into a more theatrical presentation, including props and more puppets! Stay tuned for more upcoming articles on this subject (including technical deep dives on the topics mentioned here), and thanks for reading!!
