This week, Week 11, we reached an important milestone in the IoT learning journey. Building upon the foundations established in Weeks 9 and 10, this week’s activity focused on visualising sensor data through dashboards, using two different approaches:
-
-
-
A cloud-hosted dashboard using Adafruit IO
-
A self-hosted dashboard using HTML served directly from the Raspberry Pi Pico W (LilEx3)
-
-
By the end of this session, you no longer just reading sensors — but you’ve design a complete IoT data pipelines, from sensing to networking to visualisation.
This week is we transit our attention from collecting data to presenting data.
Using the BME280 environmental sensor, you are able to work with:
-
-
-
-
Temperature
-
Humidity
-
Atmospheric pressure
-
-
-
The same sensor data was then visualised using two different dashboard approaches, highlighting important design choices in IoT systems.
Approach 1: Cloud Dashboard Using Adafruit IO – Refer to Act 7 in TINTA and Google Classsroom
This method introduces students to cloud-based IoT platforms, a common industry practice.
Key concepts:
-
-
-
-
WiFi connectivity
-
MQTT protocol
-
Publishing data to a third-party server
-
Remote access and visualisation
-
-
-


Code Explanation (Adafruit IO Method)
-
-
-
Imports modules for hardware control, networking, MQTT communication, and the BME280 sensor.
-
-
-
-
-
Initializes the I2C bus and the BME280 sensor.
-
-
-
-
-
Connects the Pico W to a WiFi network.
-
-
-
-
-
Configures the MQTT client for communication with Adafruit IO.
-
-
-
-
-
Reads sensor values and publishes temperature data to the cloud dashboard.
-
-
This approach shows how sensor data can be accessed anywhere in the world, but depends on external services and internet connectivity.


Approach 2: Self-Hosted HTML Dashboard on Pico W
This method shifts learning toward edge computing and embedded web servers.
Key concepts:
-
-
-
-
HTTP client–server model
-
Serving HTML from a microcontroller
-
JSON data exchange
-
JavaScript-based live updates
-
Local network dashboards
-
-
-

Code Explanation (HTML Dashboard Method)
-
-
-
Enables the Pico W to act as a web server.
-
-
-
-
-
Stores the dashboard webpage directly in Python memory.
-
-
-
-
-
Starts an HTTP server on port 80.
-
-
-
-
-
Distinguishes between:
-
Page requests (
/) -
Data requests (
/data)
-
-
-
-
-
-
Reads temperature, humidity, and pressure in real time.
-
-
-
-
-
JavaScript on the webpage periodically requests new sensor data and updates the display without refreshing the page.
-
-
This approach emphasizes system integration, where the device itself becomes the dashboard — similar to ground stations and embedded monitoring panels.

Comparing Both Dashboard Approaches
| Feature | Adafruit IO | HTML on Pico W |
|---|---|---|
| Hosting | Cloud | Local (device) |
| Internet required | Yes | Local WiFi only |
| Protocol | MQTT | HTTP |
| Complexity | Lower | Higher |
| Control | Limited | Full |
| Educational value | Intro to IoT cloud | Full-stack IoT |
Both approaches are valuable, and understanding when to use each is an important engineering skill.
Bringing It All Together
By connecting:
-
-
Weeks 9 & 10 (MPU6050 motion sensing & data logging)
-
Week 11 (IoT dashboards and networking)
-
you are now capable of:
-
-
-
Interfacing multiple sensors
-
Logging and processing data
-
Transmitting data over networks
-
Designing dashboards (cloud and local)
-
Building complete IoT systems
-
-
At this stage, you are no longer following isolated tutorials, but are now ready to design and execute their own IoT projects.





































































































































































