#WioTerminal – Convert and use images on the device 📺🖼️

Hi !

Time to write about Wio Terminal. Today, something that tricked me a little, so here are my lessons learned about how to use images on the device.

Using images is super simple, just follow this steps

• Installing the SD Card library for Wio Terminal
• Installing the TFT LCD Library For Wio Terminal
• Use the following code as a reference to show images

#include"TFT_eSPI.h"
#include "Seeed_FS.h" //Including SD card library
#include"RawImage.h"  //Including image processing library
TFT_eSPI tft;
 
void setup() {
    //Initialise SD card
    if (!SD.begin(SDCARD_SS_PIN, SDCARD_SPI)) {
        while (1);
    }
    tft.begin();
    tft.setRotation(3);

    //To draw on 8-bit color image on screen, starting from point (x, y):
    drawImage<uint8_t>("image1.bmp", x, y);
 
    //To draw on 16-bit color image on screen, starting from point  (x, y):
    drawImage<uint16_t>("image1.bmp", x, y); 
}
 
void loop() {
}

Super easy ! this sample is part of the [loading images] code sample in the Seeed Wiki (see references).

However, this is the moment when I start to have some questions.

Where do I store my images?

Images should be stored in a SD Card. The card must be formatted in FAT12, FAT16, FAT32 or exFAT. And then, just insert the card in the device.

Then, you can use the drawimage() function with the specific path to the images in the SD Card.

Standard BMP images won’t work

This is the tricky part, we need to preprocess the images before. There are 2 ways to do this.

1. Navigate to [Online image converter for Wio Terminal] and upload your files.
2. Download the bmp_converter.py file, and run the file locally to convert the files.

And that’s it. 5 seconds later, you can show a custom BMP in your device.

References

• Wiki Seeed – loading Images
• Wiki Seeed – Installing the File System Library
• Online image converter for Wio Terminal

¿Con ganas de ponerte al día?

En Lemoncode te ofrecemos formación online impartida por profesionales que se baten el cobre en consultoría:

• Si tienes ganas de ponerte al día con Front End (ES6, Typescript, React, Angular, Vuejs…) te recomendamos nuestros Máster Front End: https://lemoncode.net/master-frontend#inicio-banner
• Si te quieres poner al día en Backend (stacks .net y nodejs), te aconsejamos nuestro Bootcamp Backend: https://lemoncode.net/bootcamp-backend#bootcamp-backend/banner
• Y si tienes ganas de meterte con Docker, Kubernetes, CI/CD…, tenemos nuestro Bootcamp Devops: https://lemoncode.net/bootcamp-devops#bootcamp-devops/inicio