PicoDVI Adafruit IO Feed Dashboard

by Ruiz Brothers and

published April 16, 2024, last updated April 16, 2024

posted in Sensors/ Temperature & Humidity Internet of Things - IOT/ Adafruit IO Arduino Compatibles LCDs & Displays/ HDMI Raspberry Pi/ RP2040

Save Download

Intermediate

Project guide

Overview

Watch IO feeds on a TV

You can display Adafruit IO data on any DVI or HDMI display with the Raspberry Pi Pico W and Adafruit’s Pi CowBell DVI Output.

This Pi CowBell add-on board is designed to work with the Raspberry Pi Pico W and lets you display images and graphics to any HDMI monitor or TV.

The Adafruit Proto Pi CowBell Doubler puts the Pico and an add-on board side by side with additional ports, pinouts and LiPo battery charging.

Monitor Multiple Feeds

We designed and 3D printed a mounting plate to house the Proto Doubler. We secured it to the back of our 7 inch HDMI display which has VESA compatible mounting holes.

A SCD-41 C02 and humidity sensor is set up to log data to an Adafruit IO feed. We also have a DS18B20 waterproof sensor logging our pool’s temperature.

Using this Pico DVI AIO project, we’re able to display data from both of our sensor nodes on our HDMI monitor.

This is a great way to display sensor data on any HDMI TV especially for workshops or educational office spaces.

Parts

Angled shot of green rectangular microcontroller with a Wi-Fi module and pre-soldered headers.

Raspberry Pi Pico WH - Pico Wireless with Headers Soldered

The Raspberry Pi foundation changed single-board computing when they released the Raspberry Pi computer, now they're ready to...

$7.00

In Stock

Add to Cart

DVI breakout board assembled to a microcontroller in front of a small HDMI monitor. The display shows a flying toasters screensaver.

Adafruit PiCowbell DVI Output for Pico - Works with HDMI Display

Ding dong! Hear that? It's the PiCowbell ringing, letting you know that the new Adafruit PiCowbell DVI Output for Pico is in stock and ready...

guides with product

$6.95

In Stock

Add to Cart

Angled shot of black, rectangular doubler prototyping board.

Adafruit Proto Doubler PiCowbell for Pico and PicoW

The Adafruit Proto Doubler PiCowBell is intended to be treated like a mini solder-less proto plate to simplify programming and sensor connectivity for your...

$7.50

In Stock

Add to Cart

Mini HDMI to HDMI Cable - 5 feet

Connect a device with a Mini HDMI port to a regular sized HDMI port together with this basic HDMI cable. It has nice molded grips for easy installation, and is 1.5 meter long...

$5.95

In Stock

Add to Cart

Fully Reversible Pink/Purple USB A to micro B Cable - 1m long

This cable is not only super-fashionable, with a woven pink and purple Blinka-like pattern, it's also fully reversible! That's right, you will save seconds a day by...

$3.95

In Stock

Add to Cart

7" Display 1280x800 (720p) IPS + Speakers - HDMI/VGA/NTSC/PAL

Yes, this is an adorable small HDMI television with incredibly high resolution and built in 3W stereo speakers! We tried to get the smallest possible HDMI/VGA display with...

$169.95

In Stock

Add to Cart

Text editor powered by tinymce.

Code the Dashboard

The Pico W has a relatively small amount of memory and DVI output and WiFi need a lot of it. As a result, this project is coded up using Arduino. You'll need to install the necessary libraries and add your WiFi and Adafruit IO credentials to the config.h file before uploading the code to your Pico W with the Arduino IDE.

Install the Libraries

You can install the libraries for this project using the Library Manager in the Arduino IDE.

Click the Manage Libraries... menu item, search for Adafruit PicoDVI, and select the PicoDVI - Adafruit Fork library:

If asked about dependencies, click "Install all".

Then install the Adafruit IO Arduino library. Click the Manage Libraries... menu item again, search for Adafruit IO, and select the Adafruit IO Arduino library:

If asked about dependencies, click "Install all".

Code Prep

The code consists of a main .ino program file and two header files. config.h configures your WiFi and Adafruit IO connection. sprites.h stores the graphics for the project. You'll need all three of these files to properly compile and run the project. These files are available in the .ZIP folder below or on GitHub.

PicoW_DVI_AIO_Display.zip

Download File

Copy Code

// SPDX-FileCopyrightText: 2024 Liz Clark for Adafruit Industries
//
// SPDX-License-Identifier: MIT

/************************** Configuration ***********************************/

// edit the config.h tab and enter your Adafruit IO credentials
// and any additional configuration needed for WiFi, cellular,
// or ethernet clients.
#include "config.h"
#include "sprites.h"
#include <PicoDVI.h>                  // Core display & graphics library
#include <Fonts/FreeSansBold18pt7b.h> // A custom font
#include <Fonts/FreeSans9pt7b.h> // A custom font

// put your four feed names here!

AdafruitIO_Feed *temp = io.feed("temperature-feed");
AdafruitIO_Feed *humid = io.feed("humidity-feed");
AdafruitIO_Feed *bat = io.feed("battery-feed");
AdafruitIO_Feed *aqi = io.feed("aqi-feed");

#define IO_LOOP_DELAY 5000
unsigned long lastUpdate = 0;
float temp_data;
float humid_data;
int bat_data;
int aqi_data;

struct outline {
  int16_t x, y; // Top-left corner
};

outline greenOutline = {159, 35};
outline yellowOutline = {204, 35};
outline redOutline = {250, 35};

DVIGFX8 display(DVI_RES_320x240p60, false, adafruit_dvibell_cfg);

void setup() {

  // start the serial connection
  Serial.begin(115200);

  // wait for serial monitor to open
  //while ( !Serial ) delay(10);

  Serial.print("Connecting to Adafruit IO");

  // start connection to io.adafruit.com
  io.connect();

  // set up a message handler for the count feed.
  // the handleMessage function (defined below)
  // will be called whenever a message is
  // received from adafruit io.
  temp->onMessage(tempMessage);
  humid->onMessage(humidMessage);
  bat->onMessage(batMessage);
  aqi->onMessage(aqiMessage);

  // wait for a connection
  while(io.status() < AIO_CONNECTED) {
    Serial.print(".");
    delay(500);
  }
  // we are connected
  Serial.println();
  Serial.println(io.statusText());

  // Because Adafruit IO doesn't support the MQTT retain flag, we can use the
  // get() function to ask IO to resend the last value for this feed to just
  // this MQTT client after the io client is connected.
  temp->get();
  humid->get();
  bat->get();
  aqi->get();

  Serial.println("starting picodvi..");
  if (!display.begin()) { // Blink LED if insufficient RAM
    pinMode(LED_BUILTIN, OUTPUT);
    for (;;) digitalWrite(LED_BUILTIN, (millis() / 500) & 1);
  }
  Serial.println("picodvi good to go");

  // Set up color palette
  display.setColor(0, 0x0000); // black
  display.setColor(1, 0x057D); // blue
  display.setColor(2, 0xB77F); // light blue
  display.setColor(3, 0xE8E4); // red
  display.setColor(4, 0x3DA9); // green
  display.setColor(5, 0xFF80); // yellow
  display.setColor(6, 0xFFFF); // white
  
}

void loop() {
  // io.run(); is required for all sketches.
  // it should always be present at the top of your loop
  // function. it keeps the client connected to
  // io.adafruit.com, and processes any incoming data.
  io.run();
  
  if (millis() > (lastUpdate + IO_LOOP_DELAY)) {
    display.fillScreen(0);
    display.drawBitmap(38, 35, airBitmap, airWidth, airHeight, 2);
    display.drawBitmap(47, 132, tempBitmap, tempWidth, tempHeight, 3);
    display.drawBitmap(145, 132, waterBitmap, waterWidth, waterHeight, 1);
    display.drawBitmap(248, 132, batBitmap, batWidth, batHeight, 6);
    drawBatterySquare(bat_data);
    displayAQI(aqi_data);
    display.setFont(&FreeSansBold18pt7b);
    display.setTextColor(6);
    display.setCursor(38 + airWidth + 15, 38 + airHeight - 10);
    display.println(aqi_data);
    display.setFont(&FreeSans9pt7b);
    display.setCursor(47 - 9, 130 + tempHeight + 25);
    display.print(temp_data, 2);
    display.println(" F");
    display.setCursor(145 - 9, 130 + tempHeight + 25);
    display.print(humid_data, 2);
    display.println("%");
    display.setCursor(248 - 5, 130 + tempHeight + 25);
    display.print(bat_data);
    display.println("%");
    // store the current time
    lastUpdate = millis();
  }

}

void humidMessage(AdafruitIO_Data *data) {
  //Serial.print("received <- ");
  Serial.println(data->value());
  String h = data->value();
  humid_data = h.toFloat();
}

void tempMessage(AdafruitIO_Data *data) {
  //Serial.print("received <- ");
  Serial.println(data->value());
  String d = data->value();
  temp_data = d.toFloat();
}

void batMessage(AdafruitIO_Data *data) {
  //Serial.print("received <- ");
  Serial.println(data->value());
  String b = data->value();
  bat_data = b.toInt();
}

void aqiMessage(AdafruitIO_Data *data) {
  //Serial.print("received <- ");
  Serial.println(data->value());
  String a = data->value();
  aqi_data = a.toInt();
}

void displayAQI(int data) {
  display.fillRoundRect(164, 40, 30, 30, 4, 4);
  display.fillRoundRect(209, 40, 30, 30, 4, 5);
  display.fillRoundRect(255, 40, 30, 30, 4, 3);
  if (data <= 12) { // Good
    display.drawRoundRect(greenOutline.x, greenOutline.y, 40, 40, 4, 6);
  } else if (data <= 35) { // Bad
    display.drawRoundRect(yellowOutline.x, yellowOutline.y, 40, 40, 4, 6);
  } else { // Dangerous
    display.drawRoundRect(redOutline.x, redOutline.y, 40, 40, 4, 6);
  }
}

void drawBatterySquare(int data) {
  int BASE_SQUARE_X = 252;  // Base X position
  int BASE_SQUARE_Y = 140;   // Base Y position
  int SQUARE_WIDTH = 21;    // Width is constant
  int MAX_SQUARE_HEIGHT = 35; // Maximum height for 100% charge
  // Map battery percentage to square height
  int height = map(data, 0, 100, 0, MAX_SQUARE_HEIGHT);
  // Choose color based on battery percentage
  uint16_t color;
  if (data >= 70) {
    color = 4;
  } else if (data >= 40) {
    color = 5;
  } else {
    color = 3;
  }
  // Calculate Y position based on height to draw from bottom up
  int yPos = BASE_SQUARE_Y + (MAX_SQUARE_HEIGHT - height);
  // Draw the battery square
  display.fillRect(BASE_SQUARE_X, yPos, SQUARE_WIDTH, height, color);
}

// SPDX-FileCopyrightText: 2024 Liz Clark for Adafruit Industries
//
// SPDX-License-Identifier: MIT

/************************** Configuration ***********************************/

// edit the config.h tab and enter your Adafruit IO credentials
// and any additional configuration needed for WiFi, cellular,
// or ethernet clients.
#include "config.h"
#include "sprites.h"
#include <PicoDVI.h>                  // Core display & graphics library
#include <Fonts/FreeSansBold18pt7b.h> // A custom font
#include <Fonts/FreeSans9pt7b.h> // A custom font

// put your four feed names here!

AdafruitIO_Feed *temp = io.feed("temperature-feed");
AdafruitIO_Feed *humid = io.feed("humidity-feed");
AdafruitIO_Feed *bat = io.feed("battery-feed");
AdafruitIO_Feed *aqi = io.feed("aqi-feed");

#define IO_LOOP_DELAY 5000
unsigned long lastUpdate = 0;
float temp_data;
float humid_data;
int bat_data;
int aqi_data;

struct outline {
  int16_t x, y; // Top-left corner
};

outline greenOutline = {159, 35};
outline yellowOutline = {204, 35};
outline redOutline = {250, 35};

DVIGFX8 display(DVI_RES_320x240p60, false, adafruit_dvibell_cfg);

void setup() {

  // start the serial connection
  Serial.begin(115200);

  // wait for serial monitor to open
  //while ( !Serial ) delay(10);

  Serial.print("Connecting to Adafruit IO");

  // start connection to io.adafruit.com
  io.connect();

  // set up a message handler for the count feed.
  // the handleMessage function (defined below)
  // will be called whenever a message is
  // received from adafruit io.
  temp->onMessage(tempMessage);
  humid->onMessage(humidMessage);
  bat->onMessage(batMessage);
  aqi->onMessage(aqiMessage);

  // wait for a connection
  while(io.status() < AIO_CONNECTED) {
    Serial.print(".");
    delay(500);
  }
  // we are connected
  Serial.println();
  Serial.println(io.statusText());

  // Because Adafruit IO doesn't support the MQTT retain flag, we can use the
  // get() function to ask IO to resend the last value for this feed to just
  // this MQTT client after the io client is connected.
  temp->get();
  humid->get();
  bat->get();
  aqi->get();

  Serial.println("starting picodvi..");
  if (!display.begin()) { // Blink LED if insufficient RAM
    pinMode(LED_BUILTIN, OUTPUT);
    for (;;) digitalWrite(LED_BUILTIN, (millis() / 500) & 1);
  }
  Serial.println("picodvi good to go");

  // Set up color palette
  display.setColor(0, 0x0000); // black
  display.setColor(1, 0x057D); // blue
  display.setColor(2, 0xB77F); // light blue
  display.setColor(3, 0xE8E4); // red
  display.setColor(4, 0x3DA9); // green
  display.setColor(5, 0xFF80); // yellow
  display.setColor(6, 0xFFFF); // white
  
}

void loop() {
  // io.run(); is required for all sketches.
  // it should always be present at the top of your loop
  // function. it keeps the client connected to
  // io.adafruit.com, and processes any incoming data.
  io.run();
  
  if (millis() > (lastUpdate + IO_LOOP_DELAY)) {
    display.fillScreen(0);
    display.drawBitmap(38, 35, airBitmap, airWidth, airHeight, 2);
    display.drawBitmap(47, 132, tempBitmap, tempWidth, tempHeight, 3);
    display.drawBitmap(145, 132, waterBitmap, waterWidth, waterHeight, 1);
    display.drawBitmap(248, 132, batBitmap, batWidth, batHeight, 6);
    drawBatterySquare(bat_data);
    displayAQI(aqi_data);
    display.setFont(&FreeSansBold18pt7b);
    display.setTextColor(6);
    display.setCursor(38 + airWidth + 15, 38 + airHeight - 10);
    display.println(aqi_data);
    display.setFont(&FreeSans9pt7b);
    display.setCursor(47 - 9, 130 + tempHeight + 25);
    display.print(temp_data, 2);
    display.println(" F");
    display.setCursor(145 - 9, 130 + tempHeight + 25);
    display.print(humid_data, 2);
    display.println("%");
    display.setCursor(248 - 5, 130 + tempHeight + 25);
    display.print(bat_data);
    display.println("%");
    // store the current time
    lastUpdate = millis();
  }

}

void humidMessage(AdafruitIO_Data *data) {
  //Serial.print("received <- ");
  Serial.println(data->value());
  String h = data->value();
  humid_data = h.toFloat();
}

void tempMessage(AdafruitIO_Data *data) {
  //Serial.print("received <- ");
  Serial.println(data->value());
  String d = data->value();
  temp_data = d.toFloat();
}

void batMessage(AdafruitIO_Data *data) {
  //Serial.print("received <- ");
  Serial.println(data->value());
  String b = data->value();
  bat_data = b.toInt();
}

void aqiMessage(AdafruitIO_Data *data) {
  //Serial.print("received <- ");
  Serial.println(data->value());
  String a = data->value();
  aqi_data = a.toInt();
}

void displayAQI(int data) {
  display.fillRoundRect(164, 40, 30, 30, 4, 4);
  display.fillRoundRect(209, 40, 30, 30, 4, 5);
  display.fillRoundRect(255, 40, 30, 30, 4, 3);
  if (data <= 12) { // Good
    display.drawRoundRect(greenOutline.x, greenOutline.y, 40, 40, 4, 6);
  } else if (data <= 35) { // Bad
    display.drawRoundRect(yellowOutline.x, yellowOutline.y, 40, 40, 4, 6);
  } else { // Dangerous
    display.drawRoundRect(redOutline.x, redOutline.y, 40, 40, 4, 6);
  }
}

void drawBatterySquare(int data) {
  int BASE_SQUARE_X = 252;  // Base X position
  int BASE_SQUARE_Y = 140;   // Base Y position
  int SQUARE_WIDTH = 21;    // Width is constant
  int MAX_SQUARE_HEIGHT = 35; // Maximum height for 100% charge
  // Map battery percentage to square height
  int height = map(data, 0, 100, 0, MAX_SQUARE_HEIGHT);
  // Choose color based on battery percentage
  uint16_t color;
  if (data >= 70) {
    color = 4;
  } else if (data >= 40) {
    color = 5;
  } else {
    color = 3;
  }
  // Calculate Y position based on height to draw from bottom up
  int yPos = BASE_SQUARE_Y + (MAX_SQUARE_HEIGHT - height);
  // Draw the battery square
  display.fillRect(BASE_SQUARE_X, yPos, SQUARE_WIDTH, height, color);
}

After downloading the files and opening them in the Arduino IDE, navigate to the config.h file. At the top replace the following variables with your connection information:

IO_USERNAME with your Adafruit IO username
IO_KEY with your Adafruit IO key
WIFI_SSID with your WiFi SSID name
WIFI_PASS with your WiFi SSID password

If you don't put your information in the config.h file, you won't be able to connect to WiFi or Adafruit IO!

The main code file connects to four different Adafruit IO feeds to pull data to display. You can update the feed names at the top of the file:

After updating the files with your information, you can upload the code to your Pico W. It takes a few seconds to establish the connection with Adafruit IO, but after that you should see the data and graphics displayed thru the DVI output on the PiCowbell.

Text editor powered by tinymce.

3D Printing

3D Printed Parts

STL files for 3D printing are oriented to print "as-is" on FDM style machines.

Parts are designed to 3D print without any support material using PLA filament.

Original design source files may be downloaded using the links above.

Edit Design

Download STLs

Slice with Settings for PLA material

The parts were sliced using CURA using the slice settings below.

PLA filament 200c extruder
0.2 layer height
10% gyroid infill
60mm/s print speed
60c heated bed

3D Models on GitHub

Text editor powered by tinymce.

Assemble

Assemble DVI CowBell and Pi Pico

Solder headers onto the Pico and DVI PiCowBell to fit both boards on the Proto Doubler. The Pi Pico USB port aligns to the JST port on the doubler. DVI CowBell STEMMA port aligns to the reset button on the doubler.

Align Doubler to Printed Plate

Use M2.5x6mm screws to attach the doubler to the stand-offs on the printed plate.

Optional top grill

The top grill is used to mount additional STEMMA sensors.

Use M2.5x12mm long M-F hex standoffs to attach to the printed mount.

The printed grill is secured to the stand-offs with M2.5x6mm screws.

Connect mini HDMI + Power

Use a mini HDMI to HDMI cable to connect to a TV.

Most TVs include a powered USB port on the back that can be used to power the Pi Pico and DVI CowBell.

Mini DVI monitor

The printed plate is compatible with the 7" IPS monitor

Use M4 screws to mount to the back of the monitor.

Make wires compact by using a combination of our DIY HDMI / DVI and USB ribbon cables

PicoDVI Adafruit IO Feed Dashboard

Overview

Watch IO feeds on a TV

Monitor Multiple Feeds

Parts

Code the Dashboard

Install the Libraries

Code Prep

3D Printing

3D Printed Parts

Slice with Settings for PLA material

Assemble

Assemble DVI CowBell and Pi Pico

Align Doubler to Printed Plate

Optional top grill

Connect mini HDMI + Power

Mini DVI monitor

Search

Categories