Daily Quote Screen on Seeed Studio Wio Terminal

Notes

This project is created by DIYODE Magazine and is originally published on DIYODE Magazine where they also did an informative review on Seeed Studio's Wio Terminal. I personally love this project and decided to share it here on Hackster. Please do note the following documentation is written by DIYODE Magazine Team.

--------------------------------

For our first project, we’re using both the inbuilt LCD screen and WiFi module to get text data of famous quotes. Since we’re all nerds at DIYODE, we’ve of course chosen to choose famous programming quotes. The center button of the Wio Terminal will be used to load a new quote and display it on the screen.

WiFi is involved here because we’re using a simple Web API to gather data and display it live. Since it’s connecting to WiFi, we could connect it with virtually any other web interface and make it work.

If you’re new to programming, this code may appear daunting, but it’s really just our Wio Terminal pretending to be a computer sending a web request and reading the response. An API is just an ‘application programming interface’ and is a fancy way of saying it’ll be the source of our data.

We found Skolakola’s ‘Programming Quotes’ API from this big list of public APIs:

https://github.com/public-apis/public-apis

After installing the required WiFi libraries, we can open a new Arduino sketch and pop in the following initialization code. Unless your WiFi network so happens to be named “YOUR_WIFI_NAME” and has the password “YOUR_WIFI_PASSWORD”, you’ll want to change them to your home network details!

Parts Required:

1 x Wio Terminal (can be purchased on Jaycar and PAKRONICS)

#include <ArduinoJson.h>
#include <rpcWiFi.h>
#include <HTTPClient.h>
#include "TFT_eSPI.h"
TFT_eSPI tft;
const char* ssid = "YOUR_WIFI_NAME";
const char* password =  "YOUR_WIFI_PASSWORD";
bool wasPressed = false; 
HTTPClient http;

There isn’t a ton of libraries we need to import here. We’re using the Arduino JSON, rpcWiFi and HTTPClient libraries to handle the internet connection and data, and the TFT_eSPI library to handle the screen on the Wio Terminal.

The ‘wasPressed’ variable will be used during the main loop to ensure we only display one new quote when the button is pressed, and not to continue looking for quotes when the button is held. This is typically referred to as state detection, and we’ll talk about this shortly.

void setup() {
  tft.begin();
  tft.setRotation(3);
  tft.fillScreen(TFT_WHITE);
  tft.setTextSize(2);
  tft.setTextColor(TFT_BLACK);
  tft.drawString("Connecting...", 20, 20);
  Serial.begin(115200);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
      delay(500);
      Serial.println("Connecting to WiFi..");
  }
  tft.fillScreen(TFT_WHITE);
  Serial.println("Connected to the WiFi network");
  Serial.print("IP Address: ");
  Serial.println (WiFi.localIP());
  pinMode(WIO_5S_PRESS, INPUT_PULLUP);
  getQuoteResponse();
}

Our setup code is verbose but should be fairly self-explanatory as we read through it. We’re starting the TFT screen and setting its rotation, background settings and a placeholder text while we wait for a connection to the WiFi.

Flashing Firmware

To make the WiFi and networking features work, you’ll need to reflash the WiFi firmware on the Wio Terminal. The official Seeed guide can be found here: https://wiki.seeedstudio.com/Wio-Terminal-Wi-Fi/

Note that if you haven’t already, you’ll need to also install Git.

It’s not as difficult as it sounds, and it only took us 10 minutes. If you’re wondering why the WiFi isn’t working on your Wio Terminal, there’s a good chance that this will fix the problem.

Also notice that there is a considerable number of calls to the Serial command, which essentially allows us to debug and inspect the functionality of the Wio Terminal by opening the Serial Monitor (Shortcut – Ctrl+Shift+M).

void loop() {
  if(!digitalRead(WIO_5S_PRESS)) {
    if(!wasPressed) {
      wasPressed = true;
      getQuoteResponse();
    }
  } else {
    wasPressed = false;
  }
}
void getQuoteResponse() {
    const uint16_t port = 80; // Default port
    const char* host = 
"http://programming-quotes-api.herokuapp.com";  
    // Target Server IP Address
    Serial.print("Connecting to ");
    Serial.println(host);
    WiFiClient client;
    http.begin(client, 
"http://programming-quotes-api.
herokuapp.com/quotes/random");
    http.GET();
    DynamicJsonDocument doc(2048);
    deserializeJson(doc, http.getStream());
    String author = doc["author"].as<String>();
    String quote  = doc["en"].as<String>();
…

This is where the real heavy lifting happens! In our loop function, we’re using that ‘wasPressed’ variable mentioned before to respond only when the button is pressed, and not continuously held.

The getQuoteResponse() function is where the request actually happens, which consists of opening our URL (feel free to visit the URL shown, it will show a random programming quote in your browser), and loading it from a JSON format. We won’t go into JSON formats and the specifics of it in this project, but essentially its a field and value-based system where attributes are given names. Our response usually comes in this format:

{"id":"5a6ce86f2af929789500e824","author":"Ken Thompson","en":"One of my most productive days was throwing away 1,000 lines of code."}

In this case, if we refer to the field “author”, it’s value is “Ken Thompson”. That’s why in our code, we can refer to fields to get their values.

int len = 23;
  tft.fillScreen(TFT_WHITE);
  ft.setTextSize(2);
  tft.setTextColor(TFT_BLACK);
  for(int i = 0; i < 10; i++) {
    tft.drawString(quote.
substring(len*i,len*(i+1)),20,20+i*18);
  }
  tft.setTextColor(TFT_BLUE);     
  tft.drawString(" - " + author, 20, 210);
  http.end();
}

Finally, we can actually draw the quote text on the Wio Terminal’s screen! This isn’t that tricky, except for that weird for loop with the numbers in it. The purpose of this is to provide some basic text wrapping.

Text wrapping is the process of bringing text fields down to the next line on the screen if it’s too long – which is often the case with quotes. The LCD library does have this function built-in, but it wasn’t cooperating for us, so we wrote it ourselves!

Essentially, we’re taking ‘chunks’ out of the text with the substring function and writing each to one line of the Wio Terminal’s LCD screen. The ‘len’ variable describes the number of characters on each line. If the function is confusing, just change some values and observe the effects!

We’re all done! Now just hit the upload button, ensuring that the Wio Terminal is switched on. After a couple of seconds of letting it connect to our WiFi…

…and boom! It’s all working. Inspiring programming quotes at the press of a button. Obviously, this isn’t the most practical program ever – but it’s a good starting program to experiment with the Wio Terminal and to demonstrate its capabilities with precisely zero external wiring required.