Grafiken für M5StickC/C Plus

Sparsam ausgestattet Mikrocontroller mit kleinen Grafikdisplays müssen nicht auf die Darstellung von Bildern o.ä. verzichten.

Das Anzeigen eines Eröffnungsscreens beim Programmstart oder eines Bilds als Hintergrund ist bei der Gestaltung eines grafischen User-Interfaces (GUI) sehr verbreitet. Die Libraries zu den beliebten M5StickC/C Plus unterstützten die Darstellung von Bitmaps. Die folgende Abbildung zeigt ein Beispiel für den Eröffnungsscreen eines Programms zur Messung der Wassertemperatur.

In meinem Blogbeitrag Messung der Wassertemperatur habe mit einem M5StickC und einem wasserdichten DS18B20-Temperatursensor mit einer Zuleitungslänge von 1 m ein portables Messgerät aufgebaut, mit dem die Wassertemperatur in 1 m Tiefe gemessen werden kann.

Neben einer numerischen Anzeige der gemessenen Wassertemperatur ist es schön, wenn sich auf der Anzeige des Thermometers nach dem Einschalten ein sogenannter Eröffnungsscreen zeigt, der beispielsweise die Initialisierung o.ä. überbrückt.

Was ist also zu tun, um das nebenstehende Bild als Eröffnungsscreen auf dem M5StickC/C Plus zur Verfügung zu stellen?

Komplexer ausgestattete Mikrocontroller haben oft eine microSD-Card, auf die Grafikdateien als BMP oder JPG ausgelagert werden können. Der M5StickC/C Plus weist keine solche microSD-Card auf, weshalb das darzustellende Bild im Codebereich gespeichert werden muss. Hierzu gibt es mit dem LCD Image Converter ein sehr komfortables Tool, welches die Bilddaten in Quelltext konvertiert.

Anhand des oben gezeigten Bildes möchte ich das Vorgehen schrittweise erläutern. Das Bild selbst habe ich als JPG-Datei mit einem Bildverarbeitungsprogramm in der Dimension 80 x 160 Pixel, also passend für das LCD des M5StickC erstellt. Beim M5StickC Plus wären hier 135 x 240 Pixel möglich. Die Unterschiede in der grafischen Darstellung der beiden Displays können Sie unter M5StickC Plus vs. M5StickC betrachten.

Nach dem Herunterladen und Entpacken des LCD Image Converters kann dieser gestartet werden. Nach dem Start öffnet sich das folgende Fenster und die Option New Image ist auszuwählen.

Im nächsten Schritt ist dem neu zu erzeugenden Bild ein Name zu geben. Der Einfachheit halber nenne ich das Bild image.

Durch den Import der vorgängig erzeugten JPG-Datei werden dem LCD Image Converter die zu bearbeitenden Daten zur Verfügung gestellt.

Mit der Darstellung des geladenen Bilds im LCD Image Converter sind alle Vorkehrungen getroffen und die Konvertierung kann noch konfiguriert werden.

Nach Auswahl des Menus Options>Conversion sind im Tab Prepare die ersten Schritte der Konfiguration zu sehen. Ich habe die zu setzenden Optionen eingerahmt.

Im Tab Image werden die nächsten Schritte der Konfiguration vorgenommen. Ich habe die zu setzenden Optionen wiederum eingerahmt. Die Einhaltung dieser Optionen ist wichtig, da sonst die im M5StickC-Anwendungsprogramm verwendete Funktion drawBMP() nicht erwartungsgemäß arbeiten kann.

Nach diesen Vorbereitungen kann die Konvertierung gestartet und das Ergebnis als Datei image.c abgespeichert werden.

Die erzeugte Datei ist stark gekürzt im folgenden Listing wiedergegeben. Für uns von weiterem Interesse sind nur die im Array image_data_image[12800] abgelegten Bilddaten, die nun in das M5StickC-Anwendungsprogramm eingearbeitet werden können.

/*******************************************************************************
* image
* filename: unsaved
* name: image
*
* preset name: Color R5G6B5
* data block size: 16 bit(s), uint16_t
* RLE compression enabled: no
* conversion type: Color, not_used not_used
* bits per pixel: 16
*
* preprocess:
*  main scan direction: top_to_bottom
*  line scan direction: forward
*  inverse: no
*******************************************************************************/
/*
 typedef struct {
     const uint16_t *data;
     uint16_t width;
     uint16_t height;
     uint8_t dataSize;
     } tImage;
*/

#include <stdint.h>

static const uint16_t image_data_image[12800] = {
0xe73c, 0xe73c, 0xe71c, 0xe71c, 0xe71c, 0xe71c, 0xe71c, 0xe71c, 0xe71c, 0xe73c, 0xe75c, 0xef5d, 0xef5d, 0xf75e, 0xef5d, 0xef7c, 0xef9d, 0xf77e, 0xef7e, 0xef9d, 0xef5e, 0xf77e, 0xef7e, 0xef7e, 0xef7d, 0xef7e, 0xef7e, 0xef7e, 0xef7e, 0xf79e, 0xef7e, 0xef7e, 0xef7e, 0xef7e, 0xef7e, 0xef7e, 0xef7e, 0xef7d, 0xef7d, 0xef7d, 0xf79e, 0xf79e, 0xf79e, 0xf79e, 0xf79e, 0xf79e, 0xf79e, 0xef7d, 0xef7d, 0xf79e, 0xf79e, 0xf79e, 0xf79e, 0xf79e, 0xf79e, 0xf79e, 0xef7d, 0xef7d, 0xef7d, 0xef7d, 0xef7d, 0xef7d, 0xef7d, 0xef7d, 0xf79e, 0xf79e, 0xf79e, 0xf79e, 0xf79e, 0xf79e, 0xf79e, 0xf79e, 0xf79e, 0xf79e, 0xf79e, 0xf79e, 0xf79e, 0xef7d, 0xef7d, 0xf79e, 
…
0xf79d, 0xef9d, 0xf79e, 0xf79e, 0xf7bd, 0xf7be, 0xf79d, 0xf79e, 0xf7be, 0xf7be, 0xf7be, 0xf7be, 0xf7be, 0xf7be
};

const tImage image = { image_data_image, 80, 160, 16 };

Im Anwendungsprogramm ist die Integration der Bilddaten selbst sehr einfach. Wie der folgende Quelltext zeigt, sind nach der Initialisierung nur zwei Instruktionen dafür vorhanden. Mit der ersten Instruktion M5.Lcd.fillScreen(TFT_BLACK) wird der Bildschirm gelöscht. Die zweite Instruktion M5.Lcd.drawBitmap(0, 0, image_width, image_height, image) stellt die Bilddaten beginnend oben links auf dem LCD dar. Die Bilddaten sind in der Datei bmp.h abgelegt, die in der ersten Zeile eingebunden wurde.

#include "bmp.h"             // Sketch tab header for bmp image
#include <M5StickC.h>

void setup() 
{
  M5.begin();

  M5.Lcd.fillScreen(TFT_BLACK);
  M5.Lcd.drawBitmap(0, 0, image_width, image_height, image);
  ...
}
 
void loop() 
{
  ...
}

In der Datei bmp.h sind die durch den LCD Image Converter erzeugten Bilddaten im Array image[] abgelegt. Diese umfangreichen statischen Daten werden durch PROGMEM im Flash abgelegt. Außerdem sind noch die Dimensionen des Bildes in den beiden #defines abgelegt. Damit sind in der Datei bmp.h alle für die Instruktion M5.Lcd.drawBitmap(0, 0, image_width, image_height, image) erforderlichen Daten vorhanden.

#include <pgmspace.h>  // PROGMEM support header

#define image_width 80
#define image_height 160

PROGMEM static const uint16_t image[12800] = {
0xe73c, 0xe73c, 0xe71c, 0xe71c, 0xe71c, 0xe71c, 0xe71c, 0xe71c, 0xe71c, 0xe73c, 0xe75c, 0xef5d, 0xef5d, 0xf75e, 0xef5d, 0xef7c, 0xef9d, 0xf77e, 0xef7e, 0xef9d, 0xef5e, 0xf77e, 0xef7e, 0xef7e, 0xef7d, 0xef7e, 0xef7e, 0xef7e, 0xef7e, 0xf79e, 0xef7e, 0xef7e, 
…
0xf79d, 0xef9d, 0xf79e, 0xf79e, 0xf7bd, 0xf7be, 0xf79d, 0xf79e, 0xf7be, 0xf7be, 0xf7be, 0xf7be, 0xf7be, 0xf7be
};

Zum Abschluss möchte ich noch das ausgegebene Bild vorstellen, das in der Realität durchaus besser als im Screenshot ausschaut.

Erstellt: 2020-10-25