HCScreen eine Arduino Bibliothek zum Arbeiten mit einem TFT Display

Beim Arbeiten am Home-Control Projekt kam mir die Idee eine Bibliothek zu erstellen mit der man einfach das TFT Display Modul nutzen kann und den Programm Sketch von diesen Routinen frei hält.

Die Bibliothek verwaltet das Display Zeilenweise wobei die Zeilenhöhe einstellbar ist.Die erste Version enthält alle Funktionen um eine Liste von Textzeilen darzustellen und mittels eines Rotary-Encoders auswählen zu können. Der Index sowie der Inhalt der ausgewählten Zeile kann ausgelesen werden.

Der Testaufbau ist mit einem ESP32 und einem 1.8 Zoll TFT Display aufgebaut worden. Die Verwendung eines anderen Controllers oder eines anderen Displays sollte keine Probleme bereiten solange das Display mit der Adafruit-ST7735 Bibliothek kompatibel ist. Die verwendeten Pins müssen natürlich angepasst werden.

Hier die verwendete Verdrahtung mit dem ESP32-Dev Board

Zur Hardware siehe auch "Projekt HOMEControl Teil 2 Die Zentrale" in diesem Blog.

Die Bibliothek kann von  HCScreen Bibliothek heruntergeladen werden. In der Arduino IDE einfach im Bibliotheks-Manager das ZIP File vom Download importieren.

Bei Beispielen findet ihr dann unter HCScreen Beispiel Sketches

 Beschreibung:

HCScreen(tft)

Zum Anlegen einer Instanz übergibt man nur die Adresse der ST7735 Instanz.

init()

Diese Funktion muss aufgerufen werden nachdem die Ausrichtung der Anzeige (Quer- oder Hochformat) geändert wurde. Diese Funktion ermittelt den rechten, linken, oberen und unteren Rand damit die Anzeige mittig erfolgt. Es wird außerdem die gesamte Anzeigefläche mit der Hintergrundfarbe gefüllt.

 setLineHeight(höhe)

Diese Funktion setzt die Höhe für eine Zeile in Pixel. Die Zeichen sind sieben Pixel hoch. Mit einem Pixel Zwischenraum ist der minimale Wert für höhe = 8. Eine höhe=10 erhöht die Lesbarkeit reduziert aber die Anzahl der darstellbaren Zeilen. Da bei einem Aufruf dieser Funktion die Geometrie verändert wird, wird automatisch die Funktion init() aufgerufen und der Inhalt neu dargestellt.

setBaseColor(schriftfarbe, hintergrundfarbe)

Mit dieser Funktion kann die Farbe der Schrift und des Hintergrunds für die Anzeige 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. Da die Hintergrundfarbe verändert wird, füllt diese Funktion autmatisch die Anzeigefläche mit der neuen Hintergrundfarbe und stellt den Inhalt neu dar.

setSelectionColor(schriftfarbe, hintergrundfarbe)

Mit dieser Funktion kann die Farbe der Schrift und des Hintergrunds für die ausgewählte Zeile gesetzt werden. Das Format ist das gleiche wie bei setBaseColor. Der Inhalt wird erneut dargestellt.

setTitleColor(schriftfarbe, hintergrundfarbe)

Mit dieser Funktion kann die Farbe der Schrift und des Hintergrunds für die Titel Zeile gesetzt werden. Das Format ist das gleiche wie bei setBaseColor. Der Inhalt wird erneut dargestellt.

showContent()

Diese Funktion stellt einen eventuell gesetzten Titel sowie so viele Zeilen aus der Liste an Textzeilen wie auf der Anzeige platz finden, dar. Die Anzeige erfolgt ab einer variablen Startzeile, sodass das Anzeigefenster über eine größere Anzahl an Zeilen verschoben werden kann. Ist die Auswahl aktiviert wird die ausgewählte Zeile entsprechend der  eingestellten Farben für ausgewählt Zeilen dargestellt.

setTitle(text) 

setTitle(text, schriftfarbe, hintergrundfarbe)

Der angegebene Text wird als Titelzeile ganz oben in der Anzeige dargestellt. Alternativ kann auch die Farbe für Schrift und Hintergrund übergeben werden. Der Inhalt der Anzeige wird um eine Zeile nach unten verschoben.

setMenu(liste der Einträge, anzahl)

Die Inhalts Liste für die Anzeige wird mit den Menü Einträgen gefüllt und die Auswahl aktiviert. Der erste Eintrag wird automatisch ausgewählt und die Anzeige beginnt mit dem ersten Eintrag. Anzahl gibt die Anzahl der Einträge an.

selectNext()

Wenn die Auswahl aktiviert ist wird die nächste Zeile ausgewählt bis das Ende der Inhalts Liste erreicht ist. Würde die ausgewählte Zeile außerhalb des darstellbaren Bereichs liegen, wird die Startzeile erhöht sodass der angezeigte Teil der Inhalts Liste nach oben verschoben wird und die ausgewählte Zeile sichtbar bleibt. Ist die Auswahl nicht aktiviert, wird die Startzeile um eins erhöht sodass der dargestellte Textblock nach oben verschoben wird. Dies erfolgt solange bis die letzte Zeile der Inhalts Liste in der letzten Zeile des Anzeigebereichs dargestellt wird.

selectPrevious()

Wenn die Auswahl aktiviert ist wird die voherige Zeile ausgewählt bis der Anfang der Inhalts Liste erreicht ist. Würde die ausgewählte Zeile außerhalb des darstellbaren Bereichs liegen, wird die Startzeile vermindert sodass der angezeigte Teil der Inhalts Liste nach unten verschoben wird und die ausgewählte Zeile sichtbar bleibt. Ist die Auswahl nicht aktiviert, wird die Startzeile um eins vermindert sodass der dargestellte Textblock nach unten verschoben wird. Dies erfolgt solange bis die erste Zeile der Inhalts Liste in der ersten Zeile des Anzeigebereichs dargestellt wird.

 getSelection()

Diese Funktion liefert den Text Inhalt der gerade ausgewählten Zeile oder einen Leerstring falls die Auswahl nicht aktiviert ist.

getSelectionIndex()

Diese Funktion liefert die Zeilen Nummer (mit 0 beginnend)  der gerade ausgewählten Zeile oder -1 falls die Auswahl nicht aktiviert ist.

Beispiel Sketch:

Der Beispiel Sketch ESP32_Control_Center zeigt wie mit zusammen mit einem Rotary Encoder eine einfache Menü Steuerung realisiert werden kann. Zum Ansteuern des Rotary Encoders wird die Bibliothek RotaryEncoder eingesetzt.

Es  wird ein Hauptmenü mit 15 Einträgen und ein Untermenü mit drei Einträgen definiert. Am Hauptmenü kann man das Verschieben des Anzeigeblocks testen wenn man mit der Auswahl ganz nach unten geht. Klickt man den Rotary Encoder wenn die Zeile "Submenu" ausgewählt ist, so wird das Untermenü dargestellt. Klickt man den Rotary Encoder wenn die Zeile Back im Untermenü ausgewählt ist, so wird wieder das Hauptmenü dargestellt.