LilyGo T-Display 1,14″ TFT – CO₂ panel Home Assistant ESPHome – díl 20
| |

Home Assistant seriál s Jakubem->Díl 20: LilyGo T-Display 1,14″ TFT: CO₂ panel pro Home Assistant přes ESPHome

Úvod

V dnešním díle seriálu si ukážeme LilyGo T-Display 1,14″ TFT. Displej si nastavíme, připojíme do Home Assistantu, napíšeme pár jednoduchých automatizací a nakonec si k němu vytiskneme vlastní krabičku na 3D tiskárně.

Dlouho jsem přemýšlel, jak v pracovně zobrazovat přesné hodnoty CO₂. LEDkový strom, který jsme si ukazovali v minulých dílech, je fajn na rychlou orientaci, ale přestal mi stačit. Chtěl jsem vidět konkrétní čísla, ne jen barvu.

Velký displej mi přišel zbytečný – zabere místo a nevyužil bych ho naplno. Proto jsem sáhl právě po LilyGo T-Display. Je malý, přehledný, dostatečně výkonný a přesně splňuje to, co jsem od něj potřeboval.

Možnosti využití jsou ale mnohem širší. Spousta uživatelů ho používá například pro:

  • zobrazování údajů z 3D tiskárny (teploty, průběh tisku),
  • teploty a vlhkosti z místností,
  • stav topení,
  • hodnoty z různých senzorů v Home Assistantu.

Údaje lze nechat automaticky rotovat v nastaveném intervalu nebo přepínat obrazovky pomocí tlačítek na desce. Několik takových příkladů si dnes ukážeme a celé si to projdeme krok za krokem.

Co budeme potřebovat

Instalace ESPHome Device Builder v Home Assistant

Otevřeme si Home Assistant a v levém menu klikneme na ESPHome Builder. Pokud ho v menu nevidíte, najdete ho přes: Settings->Addons -> ESPHome Device Builder -> Open WEB UI.

Klikneme na New Device -> New Device Setup, zadáme název zařízení (např. co2-display) a klikneme na Next.

V dalším kroku:

  • klikneme na Skip this step (Wi-Fi si doplníme později v konfiguraci, nebo ji máme v secrets),
  • vybereme typ zařízení ESP32,
  • a znovu klikneme na Skip.

U nově vytvořeného zařízení klikneme na Edit a v konfiguraci najdeme část:

Řádek type: esp-idf přepíšeme na:

Konfiguraci uložíme.

Poté v pravém dolním rohu u zařízení klikneme na tři tečky a vybereme Clean Build Files (tím se vyčistí build cache a přepnutí frameworku se aplikuje “na čisto”).

Klikneme na Install → Manual download a počkáme na kompilaci.
To může trvat několik minut, zvlášť pokud ESPHome běží na Raspberry Pi a kompilujete poprvé.

Po dokončení klikneme na Download a vybereme Factory firmware.

Pro první nahrání přes USB vždy bereme Factory firmware. OTA firmware je až pro další aktualizace přes Wi-Fi.

Otevřeme stránku https://web.esphome.io/.

LilyGo T-Display připojíme k počítači pomocí datového USB-C kabelu (pozor – ne každý USB-C kabel přenáší data, některé jsou jen napájecí).

Na stránce klikneme na tlačítko Connect.

V prohlížeči se objeví okno se seznamem zařízení – vybereme náš displej (COM port) a potvrdíme.

Pokud se zařízení nezobrazí:

  • zkontrolujte kabel (častý problém),
  • případně zkuste jiný USB port,
  • ujistěte se, že používáte podporovaný prohlížeč (Chrome / Edge).

Po připojení klikneme na Install a vybereme soubor Factory firmware, který jsme před chvílí stáhli z ESPHome.

Po instalaci zařízení restartujeme (odpojíme USB a znovu připojíme). Za chvíli by se nám mělo objevit v ESPHome a následně i v Home Assistantu.

Konfigurace displeje ST7789 v ESPHome

Začneme základní částí – api, ota, wifi a logger.

Tyto bloky jsou standardní základ každého ESPHome zařízení. Díky api: komunikuje displej s Home Assistantem, ota: umožňuje budoucí aktualizace přes Wi-Fi bez nutnosti znovu připojovat USB kabel a logger: nám pomůže při ladění.

Načítání CO₂ z Home Assistantu

Nejdůležitější část v kódu je sekce:

Displej sám o sobě žádné CO₂ neměří. Hodnotu si tahá přímo z entity:

Jakmile se hodnota změní, spustí se on_value, kde si uložíme aktuální čas (millis()) do globální proměnné co2_update_ts. Tento čas používáme pro jednoduchý animační efekt (fade-in).

Displej ST7789

Definuje samotný TFT displej. Model TTGO TDISPLAY 135×240 už obsahuje většinu potřebného nastavení (rozlišení, interní zapojení).

V lamda části se pak vykresluje celý obsah displeje.

Vykreslování obsahu

Každé překreslení začíná:

Tím vyčistíme obrazovku na černé pozadí.

Poté načteme aktuální hodnotu CO₂:

Podle hodnoty nastavíme barvu textu:

  • pod 1000 ppm → zelená
  • 1000–1500 ppm → oranžová
  • nad 1500 ppm → červená

Pokud by hodnota nebyla dostupná (například po restartu), zobrazí se — ppm.

Fade-in efekt

Pomocí jednoduchého výpočtu času od poslední změny vytvoříme efekt postupného rozsvícení textu během 400 ms.

Není to nutné pro funkčnost, ale díky tomu změna hodnoty nepůsobí tvrdě a displej působí „živěji“.

Rozložení prvků

Displej má šířku 240 px, proto je střed na hodnotě 120 (cx = 120).

Nadpis „CO2“ je nahoře a samotná hodnota je vykreslena větším fontem přibližně uprostřed.


Tím máme hotový plně funkční CO₂ displej, který:

  • čerpá data z Home Assistantu,
  • barevně reaguje na kvalitu vzduchu,
  • a vizuálně zvýrazní každou změnu hodnoty.

Úprava prahových hodnot a barev

Změna prahů (ppm)

Stačí upravit hodnoty 1000 a 1500.

Například:

Tím si nastavíte vlastní hranice pro změnu barvy.

Změna barvy

Barva je definovaná pomocí RGB hodnot r, g, b v rozsahu 0–255.

Například méně výrazná červená může být:

Po úpravě konfiguraci nahrajte přes OTA a změna se projeví okamžitě.

V ukázce konfigurace jsou API klíč a OTA heslo uvedené přímo v kódu.
V praxi doporučuji tyto údaje přesunout do souboru secrets.yaml, aby:

  • nebyly veřejně viditelné (např. při sdílení kódu),
  • se omylem nedostaly do Git repozitáře,
  • a bylo možné je snadno změnit bez úpravy hlavního YAML.

Každý si tedy nahraďte:

  • API encryption key,
  • OTA heslo,
  • případně fallback AP heslo

vlastními hodnotami.

Načítání teploty a vlhkosti z Home Assistantu

V této variantě už displej nezobrazuje CO₂, ale přímo hodnoty teploty a vlhkosti z Home Assistantu.

Stejně jako u CO2 se používá:

To znamená, že ESPHome nic neměří samo – pouze si přebírá aktuální hodnoty z existujících entit v Home Assistantu.

Zpracování hodnot

V lambda části si načteme aktuální stav:

Protože se po restartu nebo při ztrátě spojení může stát, že hodnota ještě není dostupná, kontrolujeme ji pomocí:

Pokud je hodnota dostupná, zobrazí se na displeji.
Pokud ne, vykreslí se náhradní text (–.- °C nebo — %), aby bylo jasné, že data zatím nejsou k dispozici.

Rozložení na displeji

  • Horní část: název místnosti
  • Střed: velká hodnota teploty
  • Spodní část: vlhkost

Díky TextAlign::TOP_CENTER je vše zarovnané na střed displeje a přizpůsobené rozlišení 135x240px.

Automatické překreslování

Parametr:

zajišťuje, že se displej každou sekundu překreslí.
To je důležité zejména po restartu nebo při obnovení spojení s Home Assistantem.

Tohle je funkčně čistá a přehledná varianta – ideální například na noční stolek nebo do pracovny, kde člověk chce rychle vidět aktuální klima v místnosti.

Přepínání obrazovek tlačítkem

V této variantě využíváme hardwarové tlačítko na desce LilyGo T-Display a pomocí něj přepínáme mezi dvěma obrazovkami.

Používáme globální proměnnou page, která určuje, co se má právě zobrazit

  • 0 -> CO2 obrazovka
  • 1 -> teplota a vlhkost

Po stisku tlačítka se hodnota zvýší a díky operátoru % 2 se vždy vrátí zpět na 0 nebo 1. Tím vznikne jednoduché přepínání mezi dvěma stránkami.

CO₂ obrazovka

První obrazovka zůstává stejná jako v předchozí variantě:

  • hodnota CO₂ se načítá z Home Assistantu
  • podle prahových hodnot se mění barva:
    • zelená – dobrý vzduch
    • oranžová – zvýšená koncentrace
    • červená – je čas větrat
  • při změně hodnoty se spustí krátký fade-in efekt

Díky tomu displej nepůsobí „digitálně tvrdě“, ale má jemnou animaci.

Teplota a vlhkost

Druhá obrazovka zobrazuje:

  • aktuální teplotu v °C
  • relativní vlhkost v %

Obě hodnoty jsou opět brány přímo z Home Assistantu pomocí platform: homeassistant, takže zde není žádný fyzický senzor připojený k ESP32 – zařízení slouží čistě jako zobrazovací jednotka.

Tip: místo dvou stránek můžete přidat třetí (např. tlak, čas, stav okna…) – stačí změnit % 2 na % 3 a doplnit další větev v lambda.

Automatické rotování obrazovky

V této variantě ponecháváme jak tlačítko, tak automatické přepínání. Displej se tak sám rotuje v intervalu, ale kdykoliv jej lze ručně přepnout. Jedinou nevýhodou může být situace, kdy uživatel přepne obrazovku těsně před automatickým intervalem – v takovém případě dojde k dalšímu přepnutí téměř okamžitě.

Rotování nám zajišťuje tento kód:

3D tištěná krabička

Chtěl jsem, aby displej nepůsobil jako vývojová deska z laboratoře, ale hotové zařízení. Proto jsem pro LilyGo T-Display navrhnul vlastní tištěnou krabičku.

Nejde jen o ochranu elektroniky, ale šlo mi i o vzhled a praktičnost.

Model je navržen přímo pro verzi 1,14″ TFT a respektuje:

  • přesné usazení desky
  • přístup ke všem tlačítkům a USB portu
  • čistý vzhled bez rušivých prvků

Model najdete na MakerWorldu.

FAQ – často kladené otázky:


1) Jaký USB kabel potřebuji pro LilyGo T-Display?Datový USB-C kabel (ne pouze napájecí).

2) Musím mít fyzický CO₂ senzor připojený k ESP32?Ne, ESPHome načítá hodnoty přímo z entit v Home Assistantu.

3) Funguje LilyGo T-Display s Arduino frameworkem? Ano, v konfiguraci ESPHome je nutné přepnout z esp-idf na arduino.

4) Kde najdu 3D model krabičky? → Na MakerWorldu .

Shrnutí závěrem: Co všechno zvládne LilyGo T-Display s ESPHome

LilyGo T-Display je přesně ten typ zařízení, který mě baví. Je malý, levný a jednoduchý a přitom si s ním můžete vyhrát prakticky do nekonečna.

Za jeden večer jsme z obyčejné ESP32 vývojové desky s displejem udělali:

  • CO2 panel s barevným displejem
  • displej na teplotu a vlhkost
  • přepínání tlačítkem
  • automatické rotování obrazovek
  • a nakonec i hotové zařízení v 3D tištěné krabičce

Upřímně – tohle je přesně důvod, proč mám rád ESPHome. Není to hotový produkt z obchodu. Je to stavebnice a výsledek si uděláte přesně podle sebe.

Můžete si tam dát stav oken, výkon fotovoltaiky, notifikace z Home Assistantu, stav 3D tiskárny nebo cokoliv dalšího, co vás napadne.

Já ho mám aktuálně jako CO2 panel v ložnici. Možná z něj časem udělám vícestránkový informační panel. Možná přidám animace. Možná ho úplně předělám. A to je na tom to nejlepší.

Tak displejům zdar!

Podobné příspěvky

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *