[ITP: Connected Devices] Device Data Dashboard IV

This is a continuation of my device data dashboard, see my previous blog post here.

Getting the Ball Rolling Again

I tried getting my sensor set up sending MQTT data at home and got my local webpage running and I got an error I hadn’t seen before running Tom’s mqtt.js example: “mqtt.js test.mosquitto.org failed: The certificate for this server is invalid”. I remembered that I wasn’t able to get my Arduino to connect to the broker with a “WiFiSSLClient” so I changed that to just “WiFiClient” in my Arduino sketch. I changed this in my script.js file to use the unencrypted port 8080:

I also needed to get reasonable RGB values from my sensor because the getRaw() function returned some 16-bit value read straight from the TCS34725’s registers. I looked through the Adafruit Arduino library and its getRGB() function returns the RGB values normalized to 0-255, exactly right for web colors.

Dashboard Construction

So I thought about it and the reason this dashboard is so important to me is because I find myself stuck indoors too much (almost all the time) and I could run this webpage in the background to check the color of the sky during the day. I placed my Arduino + sensor on a window sill in my apartment that gets direct sunlight during the day. Fingers crossed the roommates don’t mess with it!

I modified Tom’s code by removing the stuff that wasn’t necessary to my dashboard; at this point I do not need to publish to the broker. I am super rusty with web stuff so my first goal was to change the background of the webpage to match the RGB sensor value. Then I referenced the amazing Bianca Gan’s “Thesis Clock” code to see how she drew different shapes with JavaScript. I used the html canvas element to draw rectangles with the RGB values from my sensor.

Since this dashboard will be acting as a kind of clock, I want to track the changes in sunlight over the course of a day. We know that the MQTT broker doesn’t hold on to any data over time so it is up to the JavaScript client to hold on to relevant data. I created three arrays to hold on to past RGB values. I made the array 100 elements long because of the following rationale: check sensor every 15 mins * 24 hours a day = 96 data points —> make it a perfect square of 100. If the array fills up, the script replaces the oldest data point with the newest one. Thanks Tom!

Next I wrote the logic to draw the grid of squares and loop through the RGB data to assign the fill colors. I started small with a grid of 9. I also made a dummy array to test the fill of the grid. Looks like the logic is correct!

Here’s what the dashboard looks like working to scale and with the sensor data. The newest data reading is always in the top left and the oldest is the last rectangle. I did some minimal CSS to get the dashboard looking better. I also got a timestamp for the last data point using the Date() object in JavaScript.

The pink is when someone turns on the living room light in my apartment!

For the time being, my code lives here if anyone is interested in peeking.

Going Live

Put all web files into “public” folder
Write the server.js and package.json files. I stole this server code from Bianca.
ssh into digital ocean server in computer terminal.
I already had my ITP repo cloned to my droplet, navigate into it and “sudo git pull [url]”.
Follow this tutorial like we’ve done in the past to use PM2 to run the server and set up Nginx as a reverse proxy.

IT’S ALIVE! I’m amazing!

Questions

Why?

Why can’t I get my system working with SSL?

Using test.mosquitto, I had issues connecting to the broker on the web page side. I switched over to shiftr.io and I didn’t have those problems anymore. Why is that?!

Here’s a link to my next blog post about this project.