Published © CC BY-NC-SA

Wioz://a Dashboard

Due to quarantine obligations, many teachers couldn't make assigned experimental work. Build here a nice lab assistant for remote lessons.

IntermediateFull instructions provided3 hours1,107
Wioz://a Dashboard

Things used in this project

Hardware components

Wio Terminal
Seeed Wio Terminal
Seeed Tipe C to A USB Cable (For a better practical use of the Wio Terminal)
Grove - 1-Wire Thermocouple Amplifier (MAX31850K)
Seeed Grove - 1-Wire Thermocouple Amplifier (MAX31850K)
Seeed Thermocouple Temperature Sensor K Type 1M

Software apps and online services

Arduino IDE


Read more


Circuit photos

Photos of how tu plug the components.



Arduino code for a Wio Terminal UI Dashboard, inspired on the Moz://a IoT design.
//Libraries and specs for the LCD graphics
#include "seeed_line_chart.h" //include the library
TFT_eSPI tft;
#define max_size 50 //maximum size of data
doubles data; //Initilising a doubles type to store data
TFT_eSprite spr = TFT_eSprite(&tft);  // Sprite 

//Libraries and specs for the Thermocouple amplifier
#include <OneWire.h>
#include <DallasTemperature.h>
// Data wire is plugged into the GPIO D0/A0 of the wio terminal
#define ONE_WIRE_BUS 0
// Setup a oneWire instance to communicate with any OneWire devices (not just Maxim/Dallas temperature ICs)
OneWire oneWire(ONE_WIRE_BUS);
// Pass our oneWire reference to Dallas Temperature.
DallasTemperature sensors(&oneWire);

float flag,t,light,noise = 0;
auto header1 =  text(0, 0)
auto header2 =  text(0, 0)
auto header3 =  text(0, 0)

void setup(void) {
    Serial.begin(115200); //Serial baud rate
    pinMode(WIO_5S_PRESS, INPUT_PULLUP);//5-way switch press
    pinMode(WIO_KEY_A, INPUT_PULLUP);//Right button
    pinMode(WIO_KEY_B, INPUT_PULLUP);//Middle button
    pinMode(WIO_KEY_C, INPUT_PULLUP);//Left button
    pinMode(WIO_MIC, INPUT);
    pinMode(WIO_LIGHT, INPUT);
    tft.setRotation(3); //Use 0,1,2 or 3 for define the origin of the pixel coordinates
    spr.createSprite(TFT_HEIGHT,TFT_WIDTH); //Dimensions of the sprite (all the screen)

void loop(void) {
  //Flag system and conditions for the buttons
   if (digitalRead(WIO_KEY_A) == LOW) {flag = 1;} //Right button
   else if (digitalRead(WIO_KEY_B) == LOW) {flag = 2;}//Middle button
   else if (digitalRead(WIO_KEY_C) == LOW) {flag = 3;}//Left button
   else if (digitalRead(WIO_5S_PRESS) == LOW) {flag = 0;}//5-way switch press
  if (flag == 0){
   else if (flag == 1){
    graph(light, header1);
   else if (flag == 2){
    graph(t, header2);
   else if (flag == 3){
    graph(noise, header3);
void ini_screen() {
  //Intial screen design
  spr.fillSprite(0x5CD8); //Blue background
  spr.fillRect(11,217,62,18,TFT_BLACK); //black rectangle
  spr.fillCircle(160,120,28,TFT_WHITE); //wio circle
  spr.drawCircle(284,120,28,TFT_WHITE); //light circle 1
  spr.drawCircle(160,35,28,TFT_WHITE); //temperature circle 1
  spr.drawCircle(160,193,28,TFT_WHITE); //noise circle 1
  spr.fillCircle(284,120,27,0x85BA); //light circle 2
  spr.fillCircle(160,35,27,0x85BA); //temperature circle 2
  spr.fillCircle(160,193,27,0x85BA); //noise circle 2
  spr.setTextColor(TFT_WHITE); //sets color of the text
  spr.setTextSize(0.5); //sets the size of text
  spr.drawString("Wioz://a", 12, 218);
  spr.drawString("Dashboard", 12, 228);
  spr.setTextColor(0x5CD8);  //sets the text colour equals to background color
  spr.drawString("Wio", 150, 110);
  spr.drawString("Terminal", 140, 120);
  spr.setTextColor(TFT_WHITE);  //sets the text colour 
  spr.drawString("Temperature", 134, 66);
  spr.drawString("Noise", 150, 223);
  spr.drawString("Light", 273, 150);
  spr.setTextSize(2); //sets the size of text
  spr.drawNumber(light, 266, 116);
  spr.drawNumber(t, 143, 31);
  spr.drawNumber(noise, 143, 188);
  spr.pushSprite(0, 0);

void readT() {
  // request temperature to all devices on the bus
    Serial.print("Requesting temperatures...");
    sensors.requestTemperatures(); // Send the command to get temperatures
    t = sensors.getTempCByIndex(0); //Assign to the t variable the value of the temperature on C
    Serial.println("DONE"); //Serial outputs for debugging
    Serial.print("Temperature for the device 1 (index 0) is: ");

void readL() {
  // request Light value and assign to the variable light
   Serial.print("Requesting light...");
   light = analogRead(WIO_LIGHT); //analog read of the light sensor
   Serial.print("Light value: ");

void readN() {
  // request T to all devices on the bus
   Serial.print("Requesting noise...");
   noise = analogRead(WIO_MIC);//analog read of the noise sensor
   Serial.print("Noise value: ");

void graph(float v, auto h) {
  //graph v values function
    spr.fillSprite(0x5CD8); //Background Color on hex 4 digit (same of the inital screen)
    if (data.size() == max_size) {
        data.pop();//this is used to remove the first read variable
    data.push(v); //read variables and store in data
    //Settings for the line graph title
    h.align(center); //horizontal alignment of title
    h.valign(vcenter); //vertical alignment of title
    h.width(tft.width());// widht of the title
    h.thickness(3); //thinkness of the font
    h.height(h.font_height() * 2); //the height of title is the twice the height of the font
    h.draw(); //draw the header
  //Settings for the line graph
    auto content = line_chart(20, h.height()); //(x,y) where the line graph begins
                .height(tft.height() - h.height() * 1.5) //actual height of the line chart
                .width(tft.width() - content.x() * 2) //actual width of the line chart
                .based_on(0.0) //Starting point of y-axis, must be a float
                .show_circle(false) //drawing a cirle at each point, default is on.
                .value(data) //passing through the data to line graph
                .color(TFT_WHITE) //Setting the color for the line
    spr.pushSprite(0, 0);




1 project • 2 followers
Thanks to Seeed Studio.