This week, I was so busy with assignments from other classes that I simply didn't have time to continue working on my portfolio website. However, one course assignment required me to use a significant amount of the HTML and CSS skills I learned in that class. Therefore, I've decided to dedicate this week's blog post to my part of the Connected Device assignment.
The Connected Device assignment required us to upload data collected by sensors connected to an Arduino nano 33 IOT to a server. My responsibility was to create a webpage to display the data collected by the Arduino. I decided to use p5js to achieve the effect, combined with HTML.
First, I used Figma's layout functionality. Last week, I thought Figma would directly provide CSS files, but I was clearly wrong. It still only provides the most basic layout functionality for single elements in CSS; one frame is simply equivalent to a <div></div> in HTML.
The HTML file mainly handles the temperature and humidity display on the left, as well as the time. Of course, in the actual code, I also added a button to jump to a line graph showing the temperature and humidity changes over time. I'll explain that later.
The pot on the right will display a gradual heating effect as the temperature and humidity reach set thresholds. I wrote this code using p5js, and used the parent function to allow the HTML file to control the canvas's position and size via <div> tags.
For the line chart, I asked AI for help because I had never used code to draw statistical charts before. However, VS Code's intelligent code completion also integrates AI, so I only needed to type a few letters and a large block of code would automatically appear, which was really convenient.
The AI appears to use a chat library for easier plotting. This is because a fetch function handles processing the data from the JSON file uploaded to the server by the Arduino for data logging; the chat function only needs to handle plotting.
All the code has been uploaded to GitHub.
https://github.com/StonesGate604/Connected-Device.git
2/27/2026 updated
Although I haven't finished reading the book yet, I feel that the skills I've learned are enough to replicate my website. This week, my main tasks are creating the website's navigation bar.
And, I immediately realize that making a navigation bar is not as easy as I thought. My idea is to put the navigation bar in a separate file, and then have all other HTML files call that file. That way, if I want to change the style of the navigation bar, I can just modify that file directly.