Connecting the m5Stack to Glitch

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.

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!

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
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



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