Combining IoT and footwear to find out more about my running.

Ever since I started using the Nike Running app about two years ago I was fascinated by the way I could go back and look at my runs and see my pace, distance, location and elevation. (Here are some of them.) But as neat as that is I wondered if it would be possible to get more granular data to see every movement I did over the course of a run. About six months of deep-diving into Arduino, quaternions and javascript libraries later I present to you:

An esp32 powered shoe and its online representation.

So how does it work?

The hardware:

An ESP32 (ESP32 is a series of low-cost, low-power system on a chip microcontrollers with integrated Wi-Fi and dual-mode Bluetooth.) In this case I chose a SparkFun Thing Plus — ESP32 WROOM for the ease of its Qwiic Connect System that made assembling the flex and imu sensors super easy.

An IMU Sensor that allows us to read the shoes position and translate it into quaternions that can be later used to translate the motion of our threejs model on the web. The BNO080 on the SparkFun VR IMU Breakout — BNO080 (Qwiic) works incredibly well for this purpose and also offers library addons to read steps and much more.

A flex sensor to measure the bending of the sole on impact with the ground. I went with the SparkFun Qwiic Flex Glove Controller since it offered a Qwiic connector.

The basic idea:

Our ESP32 translates our sensor data into a json string that we will send via a websocket connection over Wifi. On our PC we open a hosted webpage that connects to the ESP32 via websocket, receives the sensor data in form of quaternions for movement and strings for flex, steps and accuracy and displays this data.

The Github repository:

You can find all the necessary files for this project here: https://github.com/sinnfeinn/nkshoe

The Arduino code:

To program our ESP32 we will use Arduino IDE. To set this up simply download Arduino IDE here and follow these instructions to add the board definitions for the Adafruit feather board.

After adding the board definitions we need to add several libraries to the Arduino IDE in order to work with websockets, our sensors and so on.

Install all of these:

Open a new sketch and paste the following into it:

The webpage:

To display our shoe and flex and make it move in space we use two javascript libraries: threejs and chartjs.

Three.js is a popular JavaScript framework for displaying 3D content on the web. It offers various possibilities to draw a model of a shoe but I went with a plugin called STLLoader and a 3D model in .stl format. You can find a usable model in .stl format here: https://sketchfab.com/3d-models/shoe-stl-8bc37802b11240f6bad3bb3b60e682ae#download. Copy it into the folder called ascii named SHOE_STL.stl or change line 132 in esp32shoe.html.

Chart.js helps with displaying beautiful graphs for our flex sensor. In order to get the data from the websocket connection working I used a plugin called chartjs streaming by Nagix.

Since we load locally hosted content (the 3D model of the shoe) we need to start our browser without CORS. You can find ways to do that for the most popular browsers and OS’s here: https://medium.com/@siddhartha.ng/disable-cross-origin-on-chrome-for-localhost-c644b131db19

Connecting everything:

Now all we need to do is change the Wifi name and password in the arduino sketch (esp32shoe.ino), update the IP information of our websocket in the html file (esp32shoe.html) and open the webpage in our CORS-disabled browser. If you don’t know your IP address simply open Arduino IDE, open the serial monitor, power up the ESP32 and reset it. The IP should pop up in the serial monitor.

The result:

If everything works you should see the shoe moving and flexsensor running in realtime. Like so:

Todo:

This project is still in the making. Currently I am working on improving the code (removing second websocket connection, improving filesize of the 3D model, exploring ways to translate sole flex onto the 3D model) and adding new features (GPS, logging on SD card).

If you want to help out please see my github repo: https://github.com/sinnfeinn/nkshoe

(And no, it’s not connected to the cloud. But I liked the title.)

Austrian born copywriter and tinkerer. Portland, OR → andreaskadenbach.com

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