Tibber Anzeige ESP32 TFT Display ESP32-2432S028R 2,8 240 x 320 Touchscreen mqtt iobroker

    ioborker adapter mqtt server installieren


    Dieser Link von Amazon ist nicht gestattet


    Das Rote ist ein Touchfeld. Erzeugt durch MQTT Datenpunkt. Kann man beliebig überall erstellen.

    Durch Drücken soll was geschaltet werden, oder was auch immer.

    Gibt keine Grenzen 😁


    https://github.com/elzershark/…ool/esp32.esp32.esp32.zip


    esp32.esp32.esp32.zip ist das Tool zum Flashen des Display.


    OTA und über COM- Port.

    Dafür die bat Dateien benutzen.

    OTAflashen.bat

    COMPortflashen.bat

    OTA nutzt man für später, wenn es updates gibt.

    Man kann sie vorher mit einem Editor öffnen und ganz oben die "Zugangsdaten" vorab eintragen.

    Startet man die bat Datei und trägt dann nichts ein, werden die eingetragenen Werte übernommen.

    OTAflashen.bat

    set IP=192.168.68.155 -> Die IP Adresse des Displays

    set PSW=meinPasswort -> Das Passwort vom MQTT Benutzer. Das ist/wird gleichzeitig das OTA Passwort

    COMPortflashen.bat

    set COMPORT=COM3 -> Der COM Port des Displays. Komplett alles angeben. Und alles Großschreiben. z.B. COM3


    ---------------------------------------


    https://github.com/elzershark/esp32tft -> Wer alles haben möchte (Arduino)

    https://github.com/esphome/esphome-flasher/releases -> Wer kein Windows hat. Ein Flashtool


    Warten bis AutoConnactAP im WLAN sichtbar ist. Kann ein bisschen dauern.

    Danach einfach sich verbinden mit WLAN -> 192.168.4.1 aufrufen und WLAN, MQTT Daten eingeben.

    Fertig.


    Resetten:

    WLAN ausschalten/verhindern.

    Am TFT "RST" Knopf drücken.

    Warten bis AutoConnactAP sichtbar ist

    Falsche Daten in Datenpunkt eingeben. Durch das dauernde neu starten geht er auch in den AP Modus.(klappt nicht immer)



    Farben Nummer erstellen:

    Diesen Link anklicken:

    // https://www.barth-dev.de/online/rgb565-color-picker/ auf Gelb stellen = 255,255,0 und suchen/merken, wo das steht = 0xFFE0;

    jetzt diesen Link

    // https://calculator.name/baseconvert/hexadecimal/decimal/ oben 0xFFE0 eintragen und auf Convert klicken.

    Unten bei Result : steht, dann diese Zahl = 6550410. Die 10 weglassen.

    Das ist dann die Zahl für einen gelben Text

    // Für Gelb = 65504


    Zum Testen in den mqtt Datenpunkt das hier eingeben beim Datenpunkt Text.

    Code
    1. 0;65504;0;0;2;hallo, was geht

    Aufbau:

    Getrennt wird mit ";"Semikolon . Also nicht nutzen als Text. 6 Datenteile gibt es


    0;65504;0;0;2;hallo, was geht

    1---2---3-4-5-------6


    1: Textfarbe für das Überschreiben (sollte die Farbe des Hintergrundes sein) (Datenpunkt fillScreen)

    Wenn ein neuer MQTT Wert (Text) kommt, wird der alte MQTT Wert (Text) mit der Textfarbe (1) erst überschrieben auf dem Display.

    Erst dann wird der neue MQTT Wert (Text) geschrieben auf das Display mit der Farbe (2).

    2: Textfarbe was man sieht

    3: Textbeginn Cursor x-Achse

    4: Textbeginn Cursor y-Achse

    5: Textgröße (0-xxx)

    6: Der Text. Leerzeichen, neue Zeile u.s.w. funzt alles. kein ; nutzen


    MQTT:

    Es darf nichts falsches drin stehen. Sonst wird der ESP immer wieder neu starten, b.z.w. in den AP Mode gehen.

    Wenn die Datenpunkte leer sind, passiert nichts.


    Zum Testen, kann das hier eingetragen werden:


    In dieser empfohlenen Reihenfolge: (z.b. auch für Blockly Aufbau)


    Datenpunkt rotation = Rotation des Display (0-3) 3

    Datenpunkt Brightness = Bildschirmhelligkeit (0-255) 50

    Datenpunkt fillScreen = Hintergrundfarbe (0 ist z.B. Schwarz) siehe oben die links 0

    Datenpunkt text /text1 /text2 = Siehe oben 0;65504;0;0;2;hallo, was geht


    Datenpunkt PosX = X Achse Position der Berührung des Touchfeldes (Nicht ändern)

    Datenpunkt Posy = Y Achse Position der Berührung des Touchfeldes (Nicht ändern)

    Datenpunkt ADC = Helligkeits Sensor am ESP32 (Nicht ändern)


    Datenpunkt fillRect = trennen mit , (Komma). 5 Teile z.b. "47,53,92,29,31"

    Datenpunkt fillRoundRect = trenne mit , (Komma). 6 Teile z.b. "60,180,200,40,8,63488" Button Rot gefüllt| 8= Radius 63488=rot

    Datenpunkt drawRoundRect = trenne mit , (Komma). 6 Teile z.b. "60,180,200,40,8,65535" Button Weißer Rand| 8= Radius 65535=weiß


    Datenpunkt Textfarbe = Textfarbe (65504 ist z.B. Gelb) (muss nicht benutzt werden. Leer lassen)


    Erklärung Datenpunkt fillRect:

    47,53,92,29,31

    -1--2---3---4--5


    1 = Abstand vom linken Bildschirmrand

    2 = Abstand vom oberen Bildschirmrand

    3 = Füllbereichsweite von links nach rechts

    4 = Füllbereichsweite von oben nach unten

    5 = Füllfarbe

    Code
    1. ↓
    2. 53
    3. *********** ↓
    4. * * ↓
    5. →47→*→→→→→→92→* ↓
    6. * * ↓
    7. *********** 29

    Touchscreen Klicks: x,y

    Code
    1. y y1
    2. x***********
    3. * *
    4. *x2 *x1
    5. * *
    6. ***********
    7. y2

    1= x

    2 = 240 - y

    3 = x1 - x2

    4 = y1 - y2


    Dieser Link von Amazon ist nicht gestattet

    https://github.com/elzershark/esp32tft


    Blockly Codes:


    Verknüpfe gewissenhaft die Datenpunkte deines Displays aus dem mqtt Adapter.

    Immer nur 1 Block aktivieren.

    Danach immer Script neu starten.

    Lese den Log, der unter dem Blockly zu sehen ist. Es ist die Anleitung, was man machen muss.


    Was wird erstellt?


    Touchscreen Daten werden angezeigt. (Datenpunkte PosX|PosY)

    Füllfläche erstellen. Rechteckig. (Datenpunkt fillRect)


    Touchfläche ermitteln.

    Der Bereich, wenn was passieren soll. Erstellen eines Blocklys

    Im Log ab <xml xmlns= kopieren und als Block einfügen


    Abgerunderter Button erstellen. (Datenpunkt fillRoundRect)

    Abgerunderter Button als Linie erstellen. (Datenpunkt drawRoundRect)