[Midterm] Data dashboard for a Wifi-connected Arduino

Github repos:

Arduino sensor code
Dashboard webapp </aside>

Live project: https://justinjohnso-itp.github.io/cdev-iot-dashboard-app/

</aside>

Process

I began by using the example that we went over in class as a starting point to accomplish a few basic things:

Getting the Arduino to send data via TCP to my computer over localhost
Fetching that data as JSON
Displaying it on a (very simple) webpage

Adding a sensor

I’m using the VL53L0X time-of-flight (TOF) distance sensor for this project

</aside>

It took a bit to find a library for the sensor and get the settings dialed in, but I eventually got the Arduino + TOF to only send data if a change is detected. This will be much better for sending over the web than having a continuous stream of data.

Sending it to a web interface

Since I’m running this locally, I need to both spin up the netcat process and make sure the sensor data is writing to the correct place.

cd ~/Dropbox/NYU/Semester\\ 2\\ \\(\\'25\\ Spring\\)/Connected\\ Devices\\ \\&\\ Networked\\ Interaction/cdev-iot-dashboard-app/ && nc -klw 2 8080 >> dist/log.json &

Making the interface pretty!

First attempt using Chart.js to map the data coming in from the sensor

Despite (maybe because of) having a background in web development, I’m not a fan of manually coding stuff in HTML and CSS. Soooo we’re using Chart.js to take care of pretty displays!

Wibbly-wobbly timey-wimey stuff

Once I visualized the data with Chart.js, I realized that the millis ”timestamp” I was sending from the Arduino isn’t actually very helpful if it’s outside of the context of the current time. I was just sending “however many milliseconds from when the Arduino turned on”.

In thinking about how to approach this, I realized that I should go with a method where I get the current time at the sensor – not the web client. From there, I landed on the NTPClient Arduino library, and implemented it with help from this example. This sets up a connection to an NPT server (in our case, pool.npt.org ), and requests the current time whenever the Arduino sends a message to the web client. Here’s what the updated dashboard looks like now: