Connecting the m5Stack to Glitch

Image for post
Image for post
The m5Stack

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.

Image for post
Image for post
It’s cute! (Image from Adafruit)

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.

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:

Arduino code for connecting to my home Wifi Network

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:

Setting and getting colors on Glitch

Switching back to the Arduino, I then continually run a GET request to Glitch to get the latest color and update the screen:

Fetching color data from Glitch in Arduino

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!

Image for post
Image for post

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():

Handling button presses in Arduino

And the corresponding code on the Glitch server for handling button GET and POST requests:

Setting and sending button press count from Glitch
Image for post
Image for post
Sending button presses to Glitch

This works…sort of. About 50% of the time. 😢 Hopefully there will be a fix soon!

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!

Here’s the Glitch app, if you want to check it out:

You can find full instructions for how it works in the README:!/m5stack-starter?

And the Arduino code here (it’s also in the linked in the Glitch repo if you want to download it directly).

Arduino Code

designing tools for making.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store