Site icon TátaGeek.blog

MDI ikony na e-Paperu přes ESPHome

Když něco baslím, už dlouho k tomu používám platformu ESPHome. Je to rychlý a velice univerzální pomocník při výrobě vlastních IoT hraček. Výhodou ESPHome je také to, že lze velmi snadno integrovat do centra chytré domácnosti Home Assistant. Poslední dobou zkouším e-Paper displeje a kromě textu na nich zobrazuji i různé obrázky, spíše ikony. Tento článek je o tom, kde ikony stáhnout a jak na e-Paper displeji zobrazit pomocí ESPHome.

MDI ikony

MDI (Material Design Icons) je neustále se rozrůstající kolekce obrázků, které může kterýkoliv designer použít ve svém projektu. Jsou ke stažení v různých formátech (obrázek, vektor, font) nebo barvách.

MDI ikony jsou k dispozici na https://github.com/google/material-design-icons nebo je stáhneme z webu https://materialdesignicons.com/ (modré tlačítko Download vpravo nahoře). My budeme používat ikony ve formátu font. Nejenom, že se na displej snadno vypisují, ale také se ikonám tak snadno mění velikost, aniž by utrpěla kvalita.

MDI ikony stáhneme z webu materialdesignicons.com

Ve vyskakovacím okně následně klikneme na Download the Webfont.

Výsledkem je stažený soubor, ZIP archiv. Po jeho rozbalení jsou pro nás zajímavá 2 místa.

  1. složka fonts – ve které se nachází soubory písma v různých formátech
  2. soubor preview – který nám zobrazí všechny MDI ikony, které máme k dispozici, včetně jejich kódů pro zobrazení na disleji
Obsah staženého ZIP archivu

Soubor „fonts/materialdesignicons-webfont.ttf“ ze složky „fonts“ nakopírujeme do složky ESPhome v Home Assistant (nejlépe do /config/esphome/fonts). Pokud používáte rozšíření File editor, bude nakopírování otázkou několika kliknutí.

.ttf font uložený ve složce config/esphome/

Následně můžeme spustit soubor preview nebo na webu https://materialdesignicons.com/ kliknout na Cheatscheet a vyber si ikonku, kterou potřebujeme. Zajímá nás její bytecode, který použijeme později v kódu.

Přes odkaz Cheatsheet se dostaneme na snadné kopírování bytecode MDI ikon
Kliknutím na bytecode ho zkopírujeme

Kód pro ESPHome

Když už máme připravené MDI ikony, můžeme přejít k jejich zobrazování pomocí ESPHome. Návod předpokládá, že o ESPHome něco málo víte.

Síla signálu Wi-Fi

Jako první příklad jsem si vybral sílu signálu Wi-Fi. To je určitě zajímavý údaj, na který jsme na displeji zvyklí z každého bezdrátového zařízení. První, co budeme potřebovat, je zjistit sílu signálu. K tomu nám poslouží senzor s paltformou „wifi_signal“. Zde je první část kódu.

sensor:
  - platform: wifi_signal
    name: "WiFi Signal Sensor"
    id: wifi_sila_signalu
    update_interval: 60s

Jako další potřebuje font, naše MDI ikony, které budeme zobrazovat. Protože do zařízení nepotřebujeme nahrávat všechny MDI ikony, v části glyphs definujeme pouze ty, které budeme používat. K tomu slouží již zmíněný bytecode. Nahrazujte pouze posledních 5 znaků bytecode, začátek \U000 musí vždy zůstat.

font:
  - file: 'fonts/materialdesignicons-webfont.ttf'
    id: font_wifi
    size: 20
    glyphs:
      - "\U000F092E" # mdi-wifi-strength-off-outline
      - "\U000F092F" # mdi-wifi-strength-outline
      - "\U000F091F" # mdi-wifi-strength-1
      - "\U000F0922" # mdi-wifi-strength-2
      - "\U000F0925" # mdi-wifi-strength-3
      - "\U000F0928" # mdi-wifi-strength-4

Nakonec vytvoříme příkaz k zobrazení ikony na ePaper displeji. Níže uvedený kód je funkční pro desku LilyGO TTGO T5 2.13″ E-Paper ESP32. Pokud používáte jiný typ ePaper displeje, zvolte odpovídající model, podle doporučené konfigurace na ESPHome.

Část v lambda vyhodnocuje hodnotu wifi_sila_signalu a podle toho zobrazí odpovídající MDI ikonu.

spi:
  clk_pin: 18
  mosi_pin: 23

display:
  - platform: waveshare_epaper
    cs_pin: 5
    dc_pin: 17
    busy_pin: 4
    reset_pin: 16
    model: 2.13in-ttgo-b74
    rotation: 90°
    full_update_every: 30
    update_interval: 120s
    
    lambda: |-
      if (isnan(id(wifi_sila_signalu).state)) {
        it.print(0,5, id(font_wifi), "\U000F092E");
      } else if (id(wifi_sila_signalu).state > -50) {
        it.print(0,5, id(font_wifi), "\U000F0928");
      } else if ((id(wifi_sila_signalu).state > -60) and (id(wifi_sila_signalu).state <= -50)) {
        it.print(0,5, id(font_wifi), "\U000F0925");
      } else if ((id(wifi_sila_signalu).state > -70) and (id(wifi_sila_signalu).state <= -60)) {
        it.print(0,5, id(font_wifi), "\U000F0922");
      } else if ((id(wifi_sila_signalu).state > -80) and (id(wifi_sila_signalu).state <= -70)) {
        it.print(0,5, id(font_wifi), "\U000F091F");
      } else {
        it.print(0,5, id(font_wifi), "\U000F092F");
      }

Pro zobrazení textové informace o síle signálu, musíme přidat další font, kterým budeme psát normální text. Dále přidáme odpovídající příkaz print, který text vypíše na displej. Například:

font:
  - file: 'fonts/arial.ttf'
    id: font1
    size: 18
  - file: 'fonts/materialdesignicons-webfont.ttf'
    ...
it.printf(25, 5, id(font1), "%.0f dBm", id(wifi_sila_signalu).state);
MDI ikony na ePaper displeji

Napětí baterie

Stejným způsobem, jako zobrazujeme sílu signálu Wi-Fi, můžeme zobrazovat i napětí baterie. Potřebujeme k tomu senzor s platformou ADC a sadu MDI ikon.

Opět platí, že níže uvedený kód je funkční pro desku LilyGO TTGO T5 2.13″ E-Paper ESP32. Napětí baterie je připojené na pin 35, přes odporový dělič 100K/100K. Takže je potřeba naměřenou hodnotu vynásobit 2*.

Schéma zapojení měření napětí baterie u LilyGO TTGO T5 2.13″ E-Paper ESP32
sensor:
  - platform: adc
    id: VBat
    pin: 35
    name: "Ložnice baterie"
    update_interval: 60s
    attenuation: 11db
    filters:
      - lambda: return x * 2.0;
font:
  - file: 'fonts/materialdesignicons-webfont.ttf'
    id: font_bat
    size: 20
    glyphs:
      - "\U000F008E" # mdi-battery-00
      - "\U000F007A" # mdi-battery-10
      - "\U000F007B" # mdi-battery-20
      - "\U000F007C" # mdi-battery-30
      - "\U000F007D" # mdi-battery-40
      - "\U000F007E" # mdi-battery-50
      - "\U000F007F" # mdi-battery-60
      - "\U000F0080" # mdi-battery-70
      - "\U000F0081" # mdi-battery-80
      - "\U000F0082" # mdi-battery-90
      - "\U000F0079" # mdi-battery-100
      - "\U000F125E" # mdi-battery-off-outline
spi:
  clk_pin: 18
  mosi_pin: 23

display:
  - platform: waveshare_epaper
    cs_pin: 5
    dc_pin: 17
    busy_pin: 4
    reset_pin: 16
    model: 2.13in-ttgo-b74
    rotation: 90°
    full_update_every: 30
    update_interval: 120s
    
    lambda: |-
      it.printf(200, 5, id(font1), "%.2f V", id(VBat).state);
      
      if (isnan(id(VBat).state)) {
        it.print(180,5, id(font_bat), "\U000F125E");
      } else if (id(VBat).state >= 4.19) {
        it.print(180,5, id(font_bat), "\U000F0079");
      } else if ((id(VBat).state > 4.11) and (id(VBat).state <= 4.18)) {
        it.print(180,5, id(font_bat), "\U000F0082");
      } else if ((id(VBat).state > 4.02) and (id(VBat).state <= 4.11)) {
        it.print(180,5, id(font_bat), "\U000F0081");
      } else if ((id(VBat).state > 3.95) and (id(VBat).state <= 4.02)) {
        it.print(180,5, id(font_bat), "\U000F0080");
      } else if ((id(VBat).state > 3.87) and (id(VBat).state <= 3.95)) {
        it.print(180,5, id(font_bat), "\U000F007F");
      } else if ((id(VBat).state > 3.84) and (id(VBat).state <= 3.87)) {
        it.print(180,5, id(font_bat), "\U000F007E");
      } else if ((id(VBat).state > 3.80) and (id(VBat).state <= 3.84)) {
        it.print(180,5, id(font_bat), "\U000F007D");
      } else if ((id(VBat).state > 3.77) and (id(VBat).state <= 3.80)) {
        it.print(180,5, id(font_bat), "\U000F007C");
      } else if ((id(VBat).state > 3.73) and (id(VBat).state <= 3.77)) {
        it.print(180,5, id(font_bat), "\U000F007B");
      } else if ((id(VBat).state > 3.69) and (id(VBat).state <= 3.73)) {
        it.print(180,5, id(font_bat), "\U000F007A");
      } else if (id(VBat).state <= 3.69) {
        it.print(180,5, id(font_bat), "\U000F008E");
      } else {
        it.print(180,5, id(font_bat), "\U000F125E");
      }
Exit mobile version