Week 12 - Interface and Application Programming

Our task this week is to write an application that interfaces a user with an input &/or output device that you made, so I will continue to build on top of the Heart Rate monitor from Network and Communications Week and add some nice visualization to the output of the sensor! As a recap, I’m using an ESP32C3, together with the MAX30102 pulse oximeter sensor to read the heart rate of the user and send it to a web server through an access point. For my final project, I will use this biometric data to assign a possible “aura” or “mood” to the user, which will be displayed on a web server with a text excerpt and also in a lamp resembling a crystal ball.

Up until this point, my implementation of the HTML code was done through the Arduino code itself, meaning I would create a String HTML on my .ino code and then edit as I needed. This is a quick and dirty implementation of a webpage that can work if you’re only displaying text, but lacks the possibilities enabled by integrating CSS and JS files into your webpage. One solution for that would be to upload external HTML, CSS, and JS files to the microcontroller, which is enabled by the Serial Peripheral Interface Flash File System (SPIFFS), a light-weight file system for microcontrollers that let us access the flash memory to save and delete files. I used an online tutorial to guide me through the process, and I was able to create a new tool in the ArduinoIDE that lets me save the data into an ESP32C3. As seen below, I was able to save a .txt file and display its content on the Serial Monitor.

Next, I searched in CodePen (online open source repository of CSS/JS scripts) for relevant heartbeat animations, and found this one which I liked. I then incorporated the animation to my project from week 11, where I used my the pulse sensor on my board to read and transmit my BPM to a webpage via Access Point. Below you can see the animation of a heart in my results page, which HTML, CSS and JS files were all uploaded through SPIFFS.

Files for this week can be found here