#WioTerminal – Display a #DigitalTwin Door 🚪 state using XBitmap with #AzureIoT ☁️.

Hi !

In today’s post I’ll share an scenario about:

Display the state of a door (open / closed) using an XBitmap in Wio Terminal. The door state information come from an Azure Function interacting with Azure Digital Twin.

In my previous posts I wrote on how to get data from an Azure Function and parse a JSON response to get the door state. I also wrote how to display full screen images in the Wio Terminal. However, for this scenario, I planned to learn something new:

Wikipedia – X BitMap

It seems to be a faster solution, and when we work with these small devices, fast and efficient is the key. So at the end, I wanted to show a display like this one.

A complete demo video is available here:

How to use XBitmap in Wio Terminal

And XBitmap (XBMP) is an old format, that describes a plain text binary image format, for storing cursor and icon bitmaps. The Wio Terminal TFT library have a function to automatically draw a XBMP image. The following code shows how to use the drawXBitmap() function and the important note is that we need to define

• location, top / left of the image.
• width, length of the image.
• byte array with the image content.
• colors for the background (black) and for the draw content. I use green for the open door and red for the closed door.

if(last_state != state){
  Serial.println ("State and Last state are different, process the changes");
  last_state = state;
  if(state == 0){
    tft.drawXBitmap(logo_x, logo_y, closedlogo_bits, logo_width, logo_width, TFT_RED, TFT_BLACK );          
  }
  else if (state == 1){
    tft.drawXBitmap(logo_x, logo_y, openlogo_bits, logo_width, logo_width, TFT_GREEN, TFT_BLACK );
  }
  else if (state == -1){
          tft.drawXBitmap(logo_x, logo_y, openlogo_bits, logo_width, logo_width, TFT_BLACK, TFT_BLACK);          
   }
   tftPrintLine(row3, "Source: ", state_source);      
   tftPrintLine(row4, "Door: ", state_desc);              
}

For this sample, I added a new C++ header file (.h) where I define all this information. This file has a couple of hundred lines, so I added the content at the end.

How to create a XBmp file content

And now the tricky part, which is not tricky at all.

In order to create an XBmp file, I use the following online conversion tool.

Convert Image to XBM

Once you convert an image, it will download a XBMP file. You can open this file with any text editor, and find information like this one

#define 1635773788571_width 96
#define 1635773788571_height 96
static char 1635773788571_bits[] = {
  0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
  0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
  0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
  0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
  0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
  0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
  0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
  ...
  ...
}

Time to create a custom .h file to be used on the Wio Terminal and we are ready to go!

Open / Closed XBmp definition file

I’m close to finish the Wio Terminal application. Next step, let’s interact with the Digital Twin using the Wio Terminal buttons.

References

• Download Arduino IDE
• Wiki Seeed – Historgram
• Wiki Seeed – loading Images
• Wiki Seeed – Installing the File System Library
• Wiki Seed – Wifi Connectivity
• GitHub – Arduino_JSON
• Wikipedia – X BitMap

¿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