Lab 9: IoT Dashboard

Build real-time data logging and web-based IoT dashboards

Learning Goals

  • Real-time data logging in Blockly: build a Blockly program that, once per second, prints iteration, temperature, humidity to the serial terminal in comma-separated format.
  • SD-card data capture: store the same iteration/temperature/humidity records on an SD card and practice moving the card to a computer to retrieve the file.
  • HTML IoT dashboard creation: use ChatGPT to generate an HTML page that lets you upload the CSV file and displays a concise summary of the data offline.
  • Live web publishing with the WX Wi-Fi Module: update and configure the WX module, then combine Simple IDE and your HTML to serve a real-time IoT dashboard over Wi-Fi.

Software and Hardware

  • BlocklyProp Solo
  • Activity Board and Parallax USB programming cable
  • DHT22 Sensor
  • WX Wi-fi Module ESP8266
  • SD Card
  • SD Card Reader
  • Ruler or Measuring Tape
  • Notepad

DHT22 Temperature & Humidity Sensor

The DHT22 (also sold as AM2302) is a combined digital-output sensor that reports both ambient temperature (-40 °C -- 80 °C, ±0.5 °C) and relative humidity (0 -- 100 %, ±2 %). A built-in 12-bit ADC and calibrated signal processor let it stream accurate readings through a single‐wire data line---perfect for microcontroller projects that need reliable environmental data.

Connection Steps:

  1. Locate the Temp / RH socket: On the Activity Board WX, the header is silkscreened "TEMP RH" and is internally mapped to I/O-pin 14.
  2. Plug in the sensor: Slide the connector from the sensor cable straight onto the TEMP RH header.
Built-in card reader for microSD Card DHT22 connected to Activity Board WX

Blockly Coding for Saving Data

Setup and User Input

  • In terminal ask the user "How many measurements would you like to take?"
  • Drop a Terminal print text block for the question.
  • Follow it with a Terminal receive number block to capture the reply and store it in a variable (e.g., totalSamples).

Create the CSV File on SD Card

  • Insert an SD file open block: open---or create---data.csv in read-write mode.
  • Write a single header line to the file: iteration,temperature,humidity
  • Echo that same header to the Terminal so the user sees the column labels.

Main Measurement Loop

Use a repeat ... times loop that runs exactly totalSamples times. Inside the loop, in this order:

  1. Take a reading: Drop a Temp & Humidity read PIN 14 block twice---once to fetch temperature (°F) and once for relative humidity (%).
  2. Format the reading as CSV: Build a string that joins current iteration number, a comma, temperature, a comma, humidity.
  3. Show it live: Use Terminal print to send that CSV line to the screen, followed by a newline.
  4. Save it: Use SD file write to append the same line to data.csv, then add a newline so the next record starts fresh.
  5. Increment the counter: Add 1 to your iteration variable.
  6. Pause one second: Insert a pause (ms) 1000 block so readings are exactly one second apart.

Wrap-up

  • After the loop finishes, close the CSV file with SD file close---this guarantees the data is written properly.
  • Print a friendly message such as "Logging complete. File saved to SD card." so the user knows the program is done.
Terminal transcript showing logged data CSV file contents in Excel

Blockly Saving Related Blocks

SD Card Programming Blocks

SD File Open Block Create String Block Write Data Block Newline Block Close File Block

Build HTML Dashboard with ChatGPT

Now that you've collected your measurements into data.csv, it's time to generate a self-contained HTML dashboard. We'll prompt ChatGPT with everything it needs to know about our data format and desired features.

ChatGPT Optimized Prompt:

You are a frontend engineer. Write a single, self-contained HTML file (no external JS/CSS files) that fulfils all requirements below. Return only the code block -- no explanations.

Requirements:

  • The user drags-and-drops OR selects a CSV file with header: Iteration, Temperature, Humidity
  • Display two stylish cards showing the latest Temperature (°F) and Humidity (%) with animations
  • Plot two separate line charts with Chart.js 4.x: Temperature vs Iteration, Humidity vs Iteration
  • Show a summary grid with Max/Min/Avg values
  • Show a table of readings (first 50 + last 50 if >100 rows)
  • Use UC-Davis-like palette: primary #022851, secondary #FFBF00, accent blue #8FA8C5
  • Responsive layout with rounded cards and subtle shadows

Saving and Running Your Offline Dashboard:

  1. Open a plain‐text editor (e.g. Notepad)
  2. Paste the ChatGPT-generated HTML into a new file
  3. Save with an .html extension (choose "All Files" in save dialog)
  4. Name your file something like IoT_Offline_Dashboard.html
  5. Double-click the saved .html file to open in your browser
  6. Drag-and-drop your data.csv to load the dashboard
Saving HTML file Offline dashboard example 1 Offline dashboard example 2

Online Dashboard & SimpleIDE Setup

Update SimpleIDE Workspace

By default, SimpleIDE doesn't include the DHT22 library. Follow these steps to install the updated "Learn" folder:

  1. Download the updated workspace archive from: https://www.parallax.com/package/propeller-c-learn-folder/
  2. Click Learn-Folder-Updated-2021.05.27.zipside and save to your PC
  3. Launch SimpleIDE and choose Tools → Update Workspace...
  4. Select the .zipside file you downloaded and click Open
  5. Restart SimpleIDE to ensure new libraries are available
Download zipside file Update workspace menu Select zipside file

Hardware Setup

  • Move the PCB jumper so it connects 3.3 V → SEL (this powers the WX module)
  • Plug the WX Wi-Fi Module into its header on the Activity Board
  • Insert the DHT22 sensor into the TEMP/RH socket (pin 14)
  • Verify module orientation and jumper position
Hardware configuration

Configure the WX Wi-Fi Module

  1. Download firmware from: https://www.parallax.com/package/parallax-wx-downloads/
  2. Download Parallax_WiFi_Firmware_ESP8266_v1.4.zip
  3. Press the RST button four times in quick succession on Activity Board
  4. Connect to the wx-xxxxx network that appears
  5. Browser should load Parallax configuration page (or go to http://192.168.4.1)
  6. Upload new firmware: click Firmware tab, select httpd.ota, click Update
  7. Join your home network: switch to STA + AP mode, select your Wi-Fi, enter password
Download firmware WX module SSID Parallax configuration portal Firmware upload Network connection 1 Network connection 2

Launch the Online Dashboard

  1. Download mypage.html from Canvas (the course template)
  2. In Parallax web UI, switch to Files tab, upload mypage.html
  3. Preview at: http://192.168.4.1/files/mypage.html
  4. In SimpleIDE, change COM port to wx-xxxxx port
  5. Click Run with Terminal in SimpleIDE
  6. Return to dashboard and click Start button for live updates
Upload HTML file Dashboard template 1 Dashboard template 2 Select WX serial port SimpleIDE running code Live dashboard 1 Live dashboard 2

What to Submit

Offline Version (100 points total):

  1. Save your Blockly code as an .svg (showing iteration, temperature, and humidity in the terminal, and logging data to the SD card) and upload it to Canvas. (50 points)
  2. Save your CSV file---containing iteration, temperature, and humidity readings every second---and upload it to Canvas. (20 points)
  3. Save your Offline Monitoring Dashboard HTML code and upload it to Canvas. (20 points)
  4. Take screenshots of different parts of your offline dashboard and upload them to Canvas. (10 points)

Online Version (Bonus 20 points total):

  1. Take a screenshot of your WX Wi-Fi Module successfully connected to your local network or phone hotspot, showing the assigned IP address. (10 points)
  2. Take a screenshot of the live online IoT dashboard continuously logging data. (10 points)