Connecting the m5Stack to Glitch
I recently got an m5Stack, a small wi-fi-enabled development board with a built in screen, IMU (for measuring tilt and acceleration), buttons, and a speaker.
I think it can be a really cool platform for building web-connected games (or even just an ambient display that’s controlled by the web) since it’s super portable. And it cost $40, which is pretty reasonable! I got mine from Adafruit, and you can buy a version without the 9 DOF motion sensor for $35.
Before investing the time into building a full-fledged app, I wanted to build a MVP API on Glitch that would let me test receiving and sending data between the m5Stack and a web app.
This tutorial covers how to program the m5stack to connect to the web, and a basic API on Glitch for getting started.
Connecting to Wifi
First, I had to test connecting the m5Stack to my home Wi-Fi Network, which in theory should have been straightforward, except that the Arduino WiFi library doesn’t support SSIDs with special characters or spaces (not super-well documented, or at least the special characters part). After I changed my Wi-Fi network name, I was able to successfully connect my M5Stack to the network:
Grabbing Colors from Glitch
Then I spent some time in Glitch to build a node-based app with a sqlite database, used to store data sent from the m5Stack. Since the m5Stack has a full color display, I decided to create an interface for controlling the color of the screen. I created a route for adding an RGB array to the database (/setColor) and one for fetching the latest color (/getColor) to then show on the m5Stack display:
Switching back to the Arduino, I then continually run a GET request to Glitch to get the latest color and update the screen:
The most challenging part was converting the RGB color array from Glitch to uint_16, which is the required color format. I found some helpful documentation about how to do that on the Adafruit forums, after much fruitless searching!
Sending Button Presses to Glitch
Once I got fetching data from Glitch working on the m5Stack, I then tried sending data to Glitch by way of button presses. Whenever a button on the m5Stack is pressed, I increase a counter on Glitch. (You refresh the webpage to view the latest button count).
Unfortunately, while I think my code in theory should work, there are known bugs with the way the m5Stack buttons respond when connected to Wi-Fi (more on that here). I ended up adding this to my Arduino loop():
And the corresponding code on the Glitch server for handling button GET and POST requests:
This works…sort of. About 50% of the time. 😢 Hopefully there will be a fix soon!
Overall Impressions
I like the idea of the m5stack, though it was more finicky to prototype with than I expected.
Uploading code to the m5stack is not super fast (on the order of 30 seconds to build), and it only seems to work every second time I try it (it hangs on `Hard resetting via RTS pin…` frequently).
And having the buttons not work consistently when connected to Wi-Fi is a huge problem, and I hope the library maintainers update the library to resolve this issue.
Still, the m5stack may be a fun device to display info from the web (and perhaps the other sensors like the IMU work better — I haven’t tested it yet).
Also — I tested out the speaker, and the buzzer is just as annoying as you’d imagine it’d be!
Resources
Here’s the Glitch app, if you want to check it out:
You can find full instructions for how it works in the README: https://glitch.com/edit/#!/m5stack-starter?path=README.md:1:0
And the Arduino code here (it’s also in the linked in the Glitch repo if you want to download it directly).
