Mit der HCScreen Bibliothek nähern wir uns immer mehr der Möglichkeit mit dem ESP32 und einem TFT-Display einen komfortabel bedienbaren Mikrokontroler zu bauen.
Eine große Anzahl an neuen Möglichkeiten erhalten wir durch den Einsatz von Icons. Erstens sind Icons übersichtlicher und einfach mit einer bestimmten Funktion zu assoziieren, zweitens können wir jetzt auch die X-Y Möglichkeiten des Joystick ausnutzen.
Neue Funktionen in der Bibliothek:
initIconGrid(x, y, spalten, zeilen)
An der Position x und y wird ein Gitter mit Spalten und Zeilen angelegt in dem Icons mit 31x31 Pixeln dargestellt werden können. Die Funktion überprüft dabeiob durch die Parameter Grenzen des Displays überschritten werden und korrigiert die Parameter entsprechend.
initIconGrid()
Diese vereinfachte Form der Funktion initialisiert ein Gitter, das den gesamten Bildschirm nutzt (Bei 160x128 sind das 5 x 4 Icons).
showIcon(index, *icon)
Index ist dabei die Nummer der Gitterzelle in der das Icon dargestellt werden soll. Die Nummerierung beginnt mit 0 und erfolgt zeilenweise, also bei 4 x 5 erste Zeile = 0, 1, 2, 3, 4 zweite Zeile = 5, 6, 7, 8, 9 u.s.w.
*icon ist der Zeiger auf eine Struktur vom Typ HCIcon im Programmspeicher.
showIcon(x, y, *icon)
Eine andere Variante zum setzen eines Icons, hier wird die Spalte (x) und die Zeile (y) angegeben an der das Icon platziert werden soll. *icon ist wiederum der Zeiger auf eine HCIcon Struktur.
setGridColor(Markierungsfarbe, Hintergrundfarbe)
Mit dieser Funktion kann die Farbedes Hintergrunds für das Gitter und die Farbe mit der ein ausgewähltes Icon markiert werden soll gesetzt werden. Die Farbwerte werden im 3-Byte Format (rot, grün, blau) wie es auf Web Seiten üblich ist übergeben. Also z.B. 0xFF0000 = rot, 0x00FF00 = gün oder 0x0000FF = blau. Die Farben werden dann automatisch in das 16-Bit Format für das Display umgewandelt. Zur Markierung eines ausgewählten Icons wird ein Quadrat in der Markierungsfarbe um das Icon gezeichnet.
Icons:
Im Unterverzeichnis Icons sind bereits eine größere Anzahl üblicher Icons definiert, die einfach in den Sketch inkludiert werden können. Es ist aber auch sehr einfach möglich selbst ein Icon zu erstellen. Wir benötigen dazu das Bildbearbeitungsprogramm GIMP. Als Ausgang brauchen wir irgend ein Bild, das wir auf 31 x 31 Pixel skalieren. Dann xexportieren wir das Bild und wählen als Ausgangsformat wählen wir c-Quelltext(*.c) oder c-Quelltext-Header(*.h) indem wir .c bzw. .h als Extension an den Dateinamen anhängen. Nach dem Klicken des Exportieren Knopfs erscheint ein Dialog in dem wir den Namen des Icons (z.B. icon_senden) eingeben. Keine der Checkboxen sollte ein Häkchen haben! Im angegebenen Zielordner wird nun eine Datei mit der Endung .c bzw. .h erstellt. Diese Datei öffnen wir mit einem Text-Editor. Sie sollte etwa so beginnen:
/* GIMP RGB C-Source image dump (icon_senden.c) */
static const struct {
unsigned int width;
unsigned int height;
unsigned int bytes_per_pixel; /* 2:RGB16, 3:RGB, 4:RGBA */
unsigned char pixel_data[1024 * 386 * 3 + 1];
} icon_senden = {
31, 31, 3,
"\274\273\267\272\271......
Den rot dargestellten Teil müssen wir nun durch den Strukturtyp HCIcon ersetzen, der in der Bibliothek definiert wurde.
static const HCIcon icon_senden = {
31, 31, 3,
"\274\273\267\272\271......
Wenn wir nun diese Datei in den Sketch inkludieren können wir die Adresse der Struktur icon_senden in der Funktion showIcon verwenden.
Wichtig! Icon Dateien müssen immer nach HCScreen.h importiert werden.
Beispielprogramm:
In den Beispielprogrammen der Bibliothek sollte ein Sketch mit dem Namen Esp32_Control_Center_Icon vorhanden sein. Wir öffnen diesen Sketch in der Arduino IDE und laden ihn auf den ESP32 der entsprechend er Angaben im Kommentar mit dem TFT Display und dem Joy-Stick Modul verbunden wurde.
Auf dem Display sollten wie hier am Bild alle 20 Icons zu sehen sein. Mit dem Joystick können wir nun ein Icon auswählen und den Joystick Knopf drücken. Über den seriellen Monitor wird die Nummer des Icons auf das geklickt wurde angezeigt. Im Beispiel Programm sind zwei Icons mit einer Funktion belegt. Klickt man auf das Ordner Icon so wird der Inhalt einer SD-Card im Kartenleser angezeigt. Klickt man auf das Setup Icon wird ein Beispielformular mit zwei Icons unten links angezeigt.
Die Bibliothek kann von HCScreen Bibliothek heruntergeladen werden. In der Arduino IDE einfach im Bibliotheks-Manager das ZIP File vom Download importieren.
Schaut euch auch die anderen Beiträge zum Thema HCScreen in diesem Blog an. Dort findet ihr auch detaillierte Angaben zur verwendeten Hardware.
