Charts

A continuation of Pi Pico SD Card. With the addition of humidity and barometric pressure and more fun with the charting.

See additions 2025-05 Additions

I added the following device:

A CANADUINO® 3 x AHT20 + BMP280 Sensor Module that replaces the BME280
https://a.co/d/9adFADM

This device contains two modules:

AHT which measures temperature and humidity (https://learn.adafruit.com/adafruit-aht20/python-circuitpython)

BMP which measures temperature and atmospheric pressure (https://www.instructables.com/How-to-Connect-BMP280-to-Raspberry-Pi-PicoPico-W/)

So, we now have 3 temperature readings and a humidity and pressure reading, as the original DS18B20 is still attached.

Photo showing the additional module.

Pi Pico Python Code excerpt - showing the setup and reading of the new sensors.

# ----Software Setup for the devices----

# Set up DS18B11 temperature sensor, there is only 1, but this code finds them all.
ds_pin = machine.Pin(16)
ds_sensor = ds18x20.DS18X20(onewire.OneWire(ds_pin))
roms = ds_sensor.scan()
rom = roms[0]

#Set up I2C (I squared C) The Inter-Integrated Circuit (I²C) bus
# sda is serial data
# scl is serial clock

i2c = I2C(0, scl=Pin(21), sda=Pin(20))

# Create the aht sensor object using I2C
sensor = ahtx0.AHT10(i2c)

# Create the BMP280 object
bmp280_i2c = BMP280I2C(0x77, i2c)

# ----------- Read the sensors ----------------------

def getTimeTemperature():
    # get the time
    gmt = time.gmtime()

    # ask for the temperature from DS18B20
    ds_sensor.convert_temp()
    time.sleep_ms(750)
    # ds18b11 get the temperature in Celsius
    tempC = round(ds_sensor.read_temp(rom), 2)

    # AHT data
    ahtT = sensor.temperature
    ahtH = sensor.relative_humidity

    #BMP data
    readout = bmp280_i2c.measurements
    bmpT = readout['t']
    bmpP = readout['p'] * 1.008 # Calibrate

    # Format the response and return as a string.
    tt = f"{gmt[0]}-{gmt[1]:02d}-{gmt[2]:02d} {gmt[3]:02d}:{gmt[4]:02d}:{gmt[5]:02d},{tempC:.2f},{ahtT:.2f},{ahtH:.2f},{bmpT:.2f},{bmpP:.2f}\r\n"
    return str(tt)

The data looks like:

2025-05-13 16:26:16,22.50,21.72,43.83,22.06,1016.28
2025-05-13 16:27:16,22.56,21.71,43.84,22.07,1016.24

Complete Pi Pico Code

Creating Charts (graphs)

Using javascript canvas

Problem

Solution?

Lets talk about:

specifically the code that displays the end point values:

function annotate(t, h, p) { // turn the 3 end points into a 2d array var ta = [t, h, p]; // Start a new path ctx.beginPath(); // Sort the end point by Y position and spread the Y points if required. ta = ta.sort(sort2); if (ta[1][2] - ta[0][2] < 25){ ta[1][2] = ta[1][2] + 20; } if (ta[2][2] - ta[1][2] < 25){ ta[2][2] = ta[2][2] + 20; } // Make sure a point does not run outside the canvas if (ta[0][2] < 20) { ta[0][2] += 20; ta[1][2] += 20; ta[2][2] += 20; } if (ta[2][2] >= height) { ta[0][2] -= 20; ta[1][2] -= 20; ta[2][2] -= 20; } // Draw the numbers number, x, y ctx.font = "20px Arial"; for (i = 0; i < 3; i++) { ctx.fillText(ta[i][0], ta[i][1], ta[i][2]); console.log("Ypoint", ta[i][2]); }}

Complete JavaScript Code

This displays the data and draws the graphs.

Additions

# RTC hardware module https://randomnerdtutorials.com/raspberry-pi-pico-ds3231-rtc-micropython/

# MicroPython real time clock https://docs.micropython.org/en/latest/library/machine.RTC.html

After I presented this on in May there were several suggestions from the audience.

Eliminate the web server and serve the javascript graph page from the Pi Pico - Done.
If there is no network set the Pico as an Access Point so that the web page can be accessed - Done.
Ask for the time if there is no network to access the NTP servers. Not Done.
Add a battery backed up Real Time Clock Module to use for time if there is no network. Done.