Button+ met ESPHome firmware topic

[DiXY]

ESPHome Button+ topic

Button+ met ESPHome als alternatieve Firmware

De orginele firmware/hardware discussie vind je hier: Button+ topic

Button+

De Button+ is een modulair bedieningspaneel voor home automation toepassingen. De hardware en de originele firmware wordt ontwikkeld en verkocht door @wijnsema @buttonplus. Het is ontworpen om te werken met MQTT. Het kan worden op gebouwd met meerdere modules: een "Base module", een "Main display" en "BAR modules" de positie van de modules kan worden aan gepast naar behoefte.

De Button+ wordt verkocht op hun website, Hier kun je ook de originele firmware downloaden voor het geval je hier naar terug wil.

Om de Button+ te laten werken met ESPHome hadden we een pinout en I-O lijst nodig van de gebruikte ESP32-S3. Ik heb hier een aantal avonden besteed aan het doorpiepen van de diverse componenten, mijn vrouw werd er gek van , Documentatie van de diverse componenten zoeken en de lijsten zo compleet mogelijk te maken. Zie hier het resultaat

De Button+ met ESPHome firmware maakt de Button+ een stuk flexibeler, maar is ook een stuk complexer om het een en ander aan de praat te krijgen. Om de complexiteit te minimaliseren heb mijn resultaten op Github geplaatst en ik ga hier ook voorbeelden verzamelen.

Dus bij deze, heb je een mooi schermpje geknutseld? Deel dan hier je display: sectie.

Status

Op dit moment werkt alles!

Nuttige links

• Display Items
• Fonts
• Icon's and images
• Material Design Icon Search
• Getting Started with ESPHome and Home Assistant
• ESPHome Homey App
• SDL2 om sneller display layouts te maken en testen

Documentatie

Het doel is documentatie te gaan schrijven hiervoor. Die wil ik hier op Github gaan verzamelen.

Mogelijke configuraties

Met ESPHome zijn alle bekende configuraties mogelijk. In het voorbeeld hieronder gebruiken we de 1 Display/1 BAR configuratie. Later meer hierover

1e keer laden van de firmware

Benodigdheden:

• Button+ Base Module
• 1x Button+ Main Display
• 1x Button+ BAR module
• USB-C kabel
• ESPHome geïnstalleerd op Home-Assistant (link)
• Chrome/Edge of een WebSerial compatible Browser

Stappen:

1. Ga naar ESPHome in Home Assistant.
2. Klik rechts onderin op "Add Device"
3. Geef je Device een logische naam (b.v. "Button Woonkamer")
4. Klik "Skip This Step"
5. Selecteer de "ESP32-S3"
6. Klik op "Skip"
7. In het ESPHome hoofdscherm klik bij je nieuwe device op "Edit"
8. Zoek in de post hieronder de bijpassende code voor jouw setup en plak deze onder de code die is gegenereerd door ESPHome in de vorige stappen.
9. Klik rechts boven in op "Save" en vervolgens op "Install"
10. Kies "Plug into this computer" en volg de instructies. Als je Firefox gebruikt kun je ook "Manual Download" kiezen en de image met ESP tool laden

Na de initiële upload met USB kun je de Button+ met de Wireless optie laden.

Resultaat (buiten temperatuur is verwijderd uit het voorbeeld, omdat dit specifiek was voor mijn HA installatie):

Voorbeelden

https://github.com/dixi83...onPlus/tree/main/Examples

[ Voor 30% gewijzigd door DiXY op 07-12-2024 20:43 ]

[DiXY]

Basis ESPHome YAML

Kopieer en plak de code uit de onderstaande links voor jouw setup onder de code die gegenereerd werd toen je het ESPHome device aanmaakte.

1 BAR / 1 Display

https://github.com/dixi83.../1BAR_1Display_Basic.yaml

2 BAR's / 1 Display

https://github.com/dixi83.../2BAR_1Display_Basic.yaml

3 BAR's / 1 Display

https://github.com/dixi83.../3BAR_1Display_Basic.yaml

[ Voor 255% gewijzigd door DiXY op 07-12-2024 20:42 ]

[DiXY]

Voorbeelden

Icoontjes

https://mdisearch.com/

YAML:

image:
  - file: mdi:lightbulb
    id: lightbulb
    resize: 80x80

display:
  - id: !extend display_j2_Left
    lambda: |-
      it.image(80, 30, id(lightbulb), ImageAlign::TOP_CENTER);

Vrije tekst

Vrij tekst vel om met een invulveld in Home Assistant of een automation de tekst op 1 van de displays te kunnen updaten.

YAML:

text:
  - platform: template
    id: textbutton
    mode: text
    name: "TitleJ3left"
    optimistic: true
    restore_value: true
    on_value: 
      - component.update: display_j3_Left

display:
  - id: !extend display_j3_Left
    update_interval: never
    lambda: |-
      it.print(80, 50, id(font_arial20), id(orange), TextAlign::TOP_CENTER, id(textbutton).state.c_str());

Bedankt: @Timonator @Septillion

toon volledige bericht

Pagina's op het main screen

Dit voorbeeld gebruikt de Main Display buttons om van pagina te wisselen. Het Main Display zit in dit voorbeeld op de 3e Positie (Connector J2)

YAML:

binary_sensor:
  - id: !extend base_j2_btn_left
    on_click:
      - display.page.show_previous: display_j2_main
      - component.update: display_j2_main
  - id: !extend base_j2_btn_right
    on_click:
      - display.page.show_next: display_j2_main
      - component.update: display_j2_main

display: 
  - id: display_j2_main
    # ....
    pages:
      - id: page1
        lambda: |-
          it.print(160, 100, id(my_font20), "This is page 1!");
      - id: page2
        lambda: |-
          it.print(160, 100, id(my_font20), "This is page 2!");
      - id: page3
        lambda: |-
          it.print(160, 100, id(my_font20), "This is page 3!");

toon volledige bericht

Meer symbolen in een font

YAML:

  - file: "gfonts://Roboto"
    id: roboto_20
    size: 20
    extras:
      - file: "gfonts://Roboto"
        glyphs: [
          ">",
          "<",
          ]

Bedankt: @balk

Display Elementen herhalen op meerdere pagina's

YAML:

script:
  - id: all_pages
    then:
      - lambda: |-
          id(display_j2_main).print(1, 220, id(roboto_20), "<");
          id(display_j2_main).print(310, 220, id(roboto_20), ">");
          id(display_j2_main).strftime(280, 2, id(roboto_15), id(orange), TextAlign::TOP_CENTER, "%d %B", id(datetime).now());
          id(display_j2_main).strftime(280, 22, id(roboto_20), TextAlign::TOP_CENTER, "%H:%M", id(datetime).now());

display:
  - id: !extend display_j2_main
    pages:
      - id: page1
        lambda: |-
          id(all_pages).execute();
          # page specific code
      - id: page2
        lambda: |-
          id(all_pages).execute();
          # page specific code
      - id: page3
        lambda: |-
          id(all_pages).execute();
          # page specific code

Bedankt @balk

toon volledige bericht

Events koppelen aan binary sensor (knoppen)

YAML:

- platform: gpio
    id: 'base_j3_btn_left'
    name: "BAR button Left"
    internal: true
    pin: 
      mcp23xxx: base_J3
      number: 6
      mode: INPUT_PULLUP
      inverted: true
    on_press:
      then:
        - event.trigger:
            id: base_j3_btn_left_event
            event_type: "press"
    on_release:
      then:
        - event.trigger:
            id: base_j3_btn_left_event
            event_type: "release"
    on_multi_click:
        - timing:
            - ON for at least 2s
          then:
            - event.trigger:
                id: base_j3_btn_left_event
                event_type: "long press"

Bedankt @balk

toon volledige bericht

[ Voor 229% gewijzigd door DiXY op 04-11-2024 20:56 ]

[CrociStrike030]

Goed bezig! Misschien toch maar een button+ bestellen...

[DiXY]

CrociStrike030 schreef op vrijdag 25 oktober 2024 @ 16:50:
Goed bezig! Misschien toch maar een button+ bestellen...

Zeker doen! Zeker na wat ik in detail gezien heb zit het hardwarematig gewoon goed in elkaar!

[ Voor 3% gewijzigd door DiXY op 25-10-2024 17:26 ]

[buttonplus]

Leuk initiatief @DiXY, ik wil je graag ondersteunen hierin.

[Michel]

Goede ontwikkeling dit! Altijd mooi als er meerdere opties zijn om uit te kiezen en nog mooier dat Buttonplus hierin wil ondersteunen

[Timonator]

Ik heb even wat gespeeld met 3 bars en 1 scherm. Moest enkel wat schuiven met de J0-3 verbindingen maar alles werkt.


Op zich werkt het op dit moment prima voor een statische page en knoppen. Multipage en veranderende knoppen is niet zomaar te realiseren. De esphome library heeft support voor maximaal 3 paginas.

Ik weet niet of het mogelijk is om de lamda string als inputveld in HomeAssistant te krijgen en zo de content van de schermpjes te kunnen updaten met nodered, zodat meerdere views zichtbaar zijn.

[balk]

Timonator schreef op zondag 27 oktober 2024 @ 21:39:
Ik heb even wat gespeeld met 3 bars en 1 scherm. Moest enkel wat schuiven met de J0-3 verbindingen maar alles werkt.
[Afbeelding]

Op zich werkt het op dit moment prima voor een statische page en knoppen. Multipage en veranderende knoppen is niet zomaar te realiseren. De esphome library heeft support voor maximaal 3 paginas.

Ik weet niet of het mogelijk is om de lamda string als inputveld in HomeAssistant te krijgen en zo de content van de schermpjes te kunnen updaten met nodered, zodat meerdere views zichtbaar zijn.

Ik ben niet om de gelegenheid om te testen, maar weet je zeker dat er een maximum is van 3 pages. Heb je het getest? Kan je niet elk scherm een set pages geven en dan met display.page.show meeschakelen met het hoofd scherm?

Je kunt met printf de waarde van een sensor op het scherm toveren. Zo zou je ook pages kunnen maken.

[DiXY]

@Timonator @balk Ik heb het net even getest met 6 pages, dit werkt!

YAML:

binary_sensor:
  - id: base_j2_btn_right
    # ....
    on_click:
      - display.page.show_next: display_j2_main
  - id: base_j2_btn_left
    # ....
    on_click:
      - display.page.show_previous: display_j2_main

display: 
  - id: display_j2_main
    # ....
    pages:
      - id: page1
        lambda: |-
          it.print(160, 100, id(my_font20), "This is page 1!");
      - id: page2
        lambda: |-
          it.print(160, 100, id(my_font20), "This is page 2!");
      - id: page3
        lambda: |-
          it.print(160, 100, id(my_font20), "This is page 3!");
      - id: page4
        lambda: |-
          it.print(160, 100, id(my_font20), "This is page 4!");
      - id: page5
        lambda: |-
          it.print(160, 100, id(my_font20), "This is page 5!");
      - id: page6
        lambda: |-
          it.print(160, 100, id(my_font20), "This is page 6!");

Ik ben bezig om er een ESPHome Package (zie "package"-branch) van te maken dit is bijna klaar om te mergen met de main repo. Ik heb alleen in de 3BAR/1Display setup net mijn B+ ge-soft-brickt. Ik kon hem een herstellen met een USB<>TTL converter.
Ik had veel display warnings en ik heb die proberen op te lossen met een "platformio_build_option"....(was niet zo'n succes ) Als ik het zeker weet dat het hier aan lag ga ik de boel mergen en de instructies updaten. De warnings heb ik nu stabiel.

[ Voor 3% gewijzigd door DiXY op 28-10-2024 15:07 ]

[Timonator]

Mooi ik ga ermee aan de slag, had het nog niet daadwerkelijk geprobeerd, maar had vertrouwd op de display documentatie van ESPhome.

Ik heb nog niet super veel ervaring met ESPhome, aldoende leert men. Screen switching werkt wel lekker snappy.

Ik ga wel nog kijken naar een oplossing om knoppendisplays aan te sturen via HA, dan kan ik gebruik maken van meer complexere functies voor de knoppen, zoals bv knop inhouden van verlichting en dat andere knoppen dan veranderen in scenes die je dan kunt kiezen. Dat gaat niet als ik knoppen vasthang aan de mainscreen pages.

[DiXY]

Ik ben de hele middag en avond al aan het prutsen om de 2 en 3 BAR + Display stabiel te krijgen op de Wifi, helaas nog geen succes de 1BAR+display lijkt wel stabiel. De plek waar ik met de originele firmware prima wifi ontvangst heb, duurt het met ESPHome 10 min voordat hij weer verbindt, en dan is de verbinding te zwak om draadloos te updaten...

Ik heb het idee dat het zoeken is naar de juiste mix is tussen de maximale PWM niveau's en frequentie van de display achtergrond verlichting. Bij maximale output van de achtergrond verlichting doet de wifi helemaal niks...
Wat zou nog meer van invloed kunnen zijn hierop?
Iemand een idee? Misschien kan @buttonplus hier een lichtje op schijnen?

@Timonator Ik kwam er achter dat ik de kleur volgorde niet goed had... als je "color_order: bgr" toevoegt aan je display sectie kloppen de kleurtjes weer!

TS heeft nu een nieuwe link naar het nieuwe voorbeeld

[Timonator]

Ik krijg firmware ook niet via wifi geupload en krijg een timeout, lukt alleen via de kabel.

Ik het mijn code even omgerommeld, zodat ik ook de packe_yaml gebruik, maakt de code wat overzichtelijker.
Ik zag dat de "colors" nu wel goed staan in de code, heb hiervoor mijn kleurtjes aangepast.
Maar ik denk niet dat de main_display van het BGR type is.

Mijn orangje is FFC300

Dit wordt correct weergegeven op de bar-displays.
Maar op de main display krijg ik een lichtblauwe kleur. waarschijnlijk 00C3FF
Dus lijkt me dat main display gewoon RGB moet zijn.

[ Voor 72% gewijzigd door Timonator op 28-10-2024 22:29 ]

[DiXY]

Timonator schreef op maandag 28 oktober 2024 @ 22:02:
Dus lijkt me dat main display gewoon RGB moet zijn.

je hebt helemaal gelijk, ik heb naar het resultaat gewerkt zonder mezelf goed te controleren Henk zag altijd al wat pips en is nu weer mooi geel van kleur!
Ik heb het aan gepast in het package op GitHub

> de "1BAR/1Display" setup is stabiel en daarmee kan ik ook probleem loos wireless uploaden. de andere 2 configuraties willen (nog) niet.

[Timonator]

Thanks, ik heb de kleuren even getest vlak voordat ik naar het werk vertrok, en ze zijn goed nu .

Ik ben een beetje aan het worstelen met extra inputs in ESPHome te krijgen. Misschien weet iemand hier hoe ik dat vlot kan integreren.
Ik heb een listbox in Home Assistant gekregen, maar zou bijvoorbeeld ook een textbox willen hebben, om custom titels te geven aan knoppen.



Ik zou dan echter het resultaat van de listbox/textveld willen oproepen in de Lambda string van ESPHome.


Misschien dat iemand hier direct een antwoord op heeft.

[DiXY]

@Timonator volgens mij moet je dan met een "Text Component" aan de slag
https://esphome.io/components/text/#text-component

[f.welvering]

code:

text_sensor:
  - platform: homeassistant
    id: sensor_id
    name: "sensor_name"
    entity_id: entity_id
    internal: true

lambda: |
    it.printf(80, 20, id(my_font20), TextAlign::TOP_LEFT, id(sensor_id).state);

zoiets, entity value kan je in hassio vervolgens aanpassen, dan zou het display dit moeten volgen denk ik

[ Voor 16% gewijzigd door f.welvering op 29-10-2024 15:11 ]

[Timonator]

code:

text_sensor:
  - platform: homeassistant
    name: "TitleJ1Left"
    id: titlej1left
    entity_id: text_sensor.titlej1left
    internal: False

Wat ik ook probeer, ik krijg geen text input toegevoegd aan het device in Home Assistant. Internal heb ik zowel op true als false geprobeerd, maar true zou betekenen dat deze verborgen zou worden van HA. Voor entity_id heb ik ook al allerlei pre-fixes gebruikt, zoals text. text_input en text_sensor.
Als ik andere entities bekijk in HA, dan lijkt de entitiy die ik wil text. te zijn.

[balk]

Timonator schreef op dinsdag 29 oktober 2024 @ 23:02:

code:

text_sensor:
  - platform: homeassistant
    name: "TitleJ1Left"
    id: titlej1left
    entity_id: text_sensor.titlej1left
    internal: False

Wat ik ook probeer, ik krijg geen text input toegevoegd aan het device in Home Assistant. Internal heb ik zowel op true als false geprobeerd, maar true zou betekenen dat deze verborgen zou worden van HA. Voor entity_id heb ik ook al allerlei pre-fixes gebruikt, zoals text. text_input en text_sensor.
Als ik andere entities bekijk in HA, dan lijkt de entitiy die ik wil text. te zijn.

Moet je niet een text input entity aanmaken in HA en die gebruiken ipv text_sensor.titlej1left? Een text sensor bestaat niet in ha. Daar gebruik je een gewone sensor voor, maar daarvan kan je de waarde als gebruiker niet aanpassen. Alles waarbij je gebruikers invoer wilt begint met input. Die kan je aanmaken onder helpers.

[ Voor 12% gewijzigd door balk op 30-10-2024 07:47 ]

[balk]

Ik twijfel overigens nog waar ik mijn menu logica ga plaatsen, in esphome of in home assistant. Het eerste is logischer in mijn hoofd maar minder flexibel.

[Septillion]

@Timonator Als je in HA bij je device tekst wilt invullen kan je daar een template text aanmaken:

YAML:

text:
  - platform: template
    name: "TitleJ3left"
    optimistic: true
    restore_value: true
    mode: text

Ennuhh, ook hier is het veeeeeel handiger als je code als text plaats ipv een plaatje

[DiXY]

Ik heb de TS aangepast en in de 2e post de basis codes voor de 3 bekende setups toegevoegd.
De 3 verschillende setups heb ik allemaal getest, als er 2 of meer BAR's op zitten duurt het starten en verbinden met WiFi langer maar eenmaal verbonden is de verbinding stabiel. Helaas werkt draadloos updaten bij deze setups niet... de ESPHome firmware lijkt erg druk te zijn met het aansturen van de displays, @Septillion heb jij nog ideeën hoe we dit kunnen temmen?

dit is hoe ik de displays heb geconfigureerd [github]:

YAML:

  ####################
  ### Main Display ###
  ####################
  - id: display_j0_main
    platform: ili9xxx
    model: ili9341
    invert_colors: false
    color_order: rgb
    dc_pin: 
      number: GPIO37
      allow_other_uses: true
    cs_pin: 
      mcp23xxx: base_J0
      number: 5
      mode:
        output: true
      inverted: false
    update_interval: 200ms
    show_test_card: false
    dimensions: 
      height: 240
      width: 320
    rotation: 180
  ####################
  ### BAR module 1 ###
  ####################
  - id: display_j1_Left
    platform: ili9xxx
    model: ST7735
    color_order: bgr
    dc_pin: 
      number: GPIO37
      allow_other_uses: true
    cs_pin: 
      mcp23xxx: base_J1
      number: 5
      mode:
        output: true
      inverted: false
    invert_colors: false
    show_test_card: false
    dimensions: 
      height: 160
      width: 80
      offset_width: 24
    rotation: 270
    update_interval: 1s

toon volledige bericht

De 3e post wil ik voorbeelden geen plaatsen. @Timonator heb jij het invul veld al werkend? zo ja zou je de code / handelingen kunnen plaatsen? dan neem ik die daar ook in op.

[ Voor 62% gewijzigd door DiXY op 01-11-2024 10:53 . Reden: code en link toegevoegd ]

[Timonator]

Ik heb de invulvelden werkend. Dus in Home Assistant > Settings > Devices & Services > Helpers > Create Helper.
Dan neem je een "text helper", je geeft het een naam en klikt "create", de nieuwe helper krijgt dan normaal de Entity ID: input_text.[name helper]

In ESPhome moet dan de textsensor aangemaakt worden, die zien er als volgt uit bij mij:

YAML:

text_sensor:
  - platform: homeassistant
    name: "TitleJ1Left"
    id: titlej1left
    entity_id: input_text.TitleJ1Left
  - platform: homeassistant
    id: titlej1right
    name: "TitleJ1Right"
    entity_id: input_text.TitleJ1Right
  - platform: homeassistant
    id: titlej2left
    name: "TitleJ2Left"
    entity_id: input_text.TitleJ2Left
  - platform: homeassistant
    id: titlej2right
    name: "TitleJ2Right"
    entity_id: input_text.TitleJ2Right
  - platform: homeassistant 
    id: titlej3left
    name: "TitleJ3Left"
    entity_id: input_text.TitleJ3Left
  - platform: homeassistant
    id: titlej3right
    name: "TitleJ3Right"
    entity_id: input_text.TitleJ3Right

En dan dienen ze nog ingevuld te worden in de code van de displays zelf:

YAML:

  - id: !extend display_j1_Left
    lambda: |-
      std::string val = to_string(id(titlej1left).state);
      it.print(80, 20, id(my_font20),id(orange),TextAlign::BASELINE_CENTER, id(titlej1left).state.c_str());
      it.image(80, 30, id(lightbulb), ImageAlign::TOP_CENTER);
      
      //it.image(80, 0, id(lightbulb), ImageAlign::TOP_CENTER, id(red));
  - id: !extend display_j1_Right
    lambda: |-
      std::string val = to_string(id(titlej1right).state);
      it.print(80, 20, id(my_font20),id(orange),TextAlign::BASELINE_CENTER, id(titlej1right).state.c_str());
      it.image(80, 30, id(lightbulb), ImageAlign::TOP_CENTER);
  - id: !extend display_j2_Left
    lambda: |-
      std::string val = to_string(id(titlej2left).state);
      it.print(80, 20, id(my_font20),id(orange),TextAlign::BASELINE_CENTER, id(titlej2left).state.c_str());
      it.image(80, 30, id(lightbulb), ImageAlign::TOP_CENTER);
  - id: !extend display_j2_Right
    lambda: |-
      std::string val = to_string(id(titlej2right).state);
      it.print(80, 20, id(my_font20),id(orange),TextAlign::BASELINE_CENTER, id(titlej2right).state.c_str());
      it.image(80, 30, id(alert), ImageAlign::TOP_CENTER);
  - id: !extend display_j3_Left
    lambda: |-
      std::string val = to_string(id(titlej3left).state);
      it.print(80, 20, id(my_font20),id(orange),TextAlign::BASELINE_CENTER, id(titlej3left).state.c_str());
      it.image(80, 30, id(lightbulb), ImageAlign::TOP_CENTER, id(red));
  - id: !extend display_j3_Right
    lambda: |-
      std::string val = to_string(id(titlej3right).state);
      it.print(80, 20, id(my_font20),id(orange),TextAlign::BASELINE_CENTER, id(titlej3right).state.c_str());
      it.image(80, 30, id(lock), ImageAlign::TOP_CENTER);

edit:

De entities willen maar moeilijk updaten, dus heb wat pagina's weggegooid, maar nu zie ik dat er een foutje staat in de base.yaml: line 33
blijkbaar mag ignore_strapping_warning niet gebruikt worden.

[ Voor 3% gewijzigd door Septillion op 01-11-2024 18:13 ]

[Septillion]

@Timonator Waarom niet gewoon direct een template text in ESPhome ipv het zo omslachtig te doen?

[Septillion]

@DiXY Ik zie een update interval van 1s, dat zal de boel aardig bezighouden. Mooiste is als je alleen een update doet als dat nodig is, zeker voor alle kleine schermpjes waar niet heel vaak iets zal gebeuren denk ik.

[Timonator]

Septillion schreef op vrijdag 1 november 2024 @ 18:16:
@Timonator Waarom niet gewoon direct een template text in ESPhome ipv het zo omslachtig te doen?

Dat was ook eerst de bedoeling, echter kreeg ik dan een soort text_sensor in Home Assistant die ik niet kan aanpassen in homeassistant

[Septillion]

@Timonator Klinkt alsof je de template text en de template text sensor door de war hebt gehaald Eerste is aanpasbaar, tweede niet.

[ Voor 7% gewijzigd door Septillion op 01-11-2024 18:57 ]

[DiXY]

Septillion schreef op vrijdag 1 november 2024 @ 18:18:
@DiXY Ik zie een update interval van 1s, dat zal de boel aardig bezighouden. Mooiste is als je alleen een update doet als dat nodig is, zeker voor alle kleine schermpjes waar niet heel vaak iets zal gebeuren denk ik.

Bedankt voor de schop in de juiste richting, dit kan inderdaad slimmer! Ik heb nu de update tijd op 10s staan, dit is voldoende om de sensoren en de tijd te updaten, Als ik met paging ga werken moet er wel een extra action aan de knop: "component.update: <display_id>" eens kijken hoe ik dit makkelijker kan verpakken...

Ik ga zo de 3 BAR / 1 Display eens op 10 seconden zetten, eens kijken hoe hij dan reageert.

[DiXY]

Timonator schreef op vrijdag 1 november 2024 @ 17:01:
De entities willen maar moeilijk updaten, dus heb wat pagina's weggegooid, maar nu zie ik dat er een foutje staat in de base.yaml: line 33
blijkbaar mag ignore_strapping_warning niet gebruikt worden.

Klopt ik had per ongeluk met een test de main branch geüpdatet... zou nu weer goed moeten staan

[balk]

Het lijkt er ook op dat de update interval aanpasbaar is: https://community.home-as...ge-update-interval/108074

[DiXY]

Bedoel je dat "dynamisch" ik ben al even aan het spelen hier met een statische update (main op 10s en mini's op "never") dit werkt erg goed! Met de 3BAR/1display is het nu zelfs mogelijk draadloos de firmware te laden. Je moet er even rekening mee houden dat als je pagina wisselt met een knop, dat je dan een component update uitvoert.

YAML:

binary_sensor:
  - id: !extend base_j2_btn_left
    on_click:
      - display.page.show_previous: display_j2_main
      - component.update: display_j2_main
      - display.page.show_previous: display_j3_Left
      - component.update: display_j3_Left
      - display.page.show_previous: display_j3_Right
      - component.update: display_j3_Right
  - id: !extend base_j2_btn_right
    on_click:
      - display.page.show_next: display_j2_main
      - component.update: display_j2_main
      - display.page.show_next: display_j3_Left
      - component.update: display_j3_Left
      - display.page.show_next: display_j3_Right
      - component.update: display_j3_Right

display:
  - id: !extend display_j2_main
    update_interval: 30s
    pages:
      - id: page1
        lambda: |-
          //>>> make a border arround the display
          it.filled_rectangle(  0,   0, 320,   3, id(red));
          it.filled_rectangle(  0,   0,   3, 240, id(red));
          it.filled_rectangle(  0, 237, 320,   3, id(red));
          //it.filled_rectangle(  0, 206, 320,   3, id(red));
          it.filled_rectangle(317,   0,   3, 240, id(red));
          //
          //>>> prev/next icons next to butotns
          it.image(0, 208, id(icon_prev_page), ImageAlign::TOP_LEFT, id(orange));
          it.image(320, 208, id(icon_next_page), ImageAlign::TOP_RIGHT, id(orange));
          //
          //>>> temperature inside:
          it.image(36, 15, id(icon_temp_inside), ImageAlign::TOP_CENTER, id(orange));
          it.printf(36, 85, id(font_arial20), id(white), TextAlign::BASELINE_CENTER , "%.1f°", id(inside_temperature).state);
          //
          //>>> vertical line:
          it.filled_rectangle(70, 0, 3, 115, id(red));
          //
          //>>> print time and date
          it.strftime(160, 5, id(font_clock), TextAlign::TOP_CENTER, "%H:%M", id(datetime).now());
          it.strftime(160, 80, id(font_date), TextAlign::TOP_CENTER, "%d-%m-%Y", id(datetime).now());
          //
          //>>> vertical line:
          it.filled_rectangle(250, 0, 3, 115, id(red));
          //
          //>>> outside temperature
          it.image(285, 15, id(icon_temp_outside), ImageAlign::TOP_CENTER, id(orange));
          it.printf(285, 85, id(font_arial20), id(white), TextAlign::BASELINE_CENTER , "%.1f°", id(outside_temperature).state);
          //
          //>>> horizontal line:
          it.filled_rectangle(0, 115, 320, 3, id(red));
          it.print(100, 160, id(font_arial20), "This is page 1!");
      - id: page2
        lambda: |-
          //>>> make a border arround the display
          it.filled_rectangle(  0,   0, 320,   3, id(red));
          it.filled_rectangle(  0,   0,   3, 240, id(red));
          it.filled_rectangle(  0, 237, 320,   3, id(red));
          //it.filled_rectangle(  0, 206, 320,   3, id(red));
          it.filled_rectangle(317,   0,   3, 240, id(red));
          //
          //>>> prev/next icons next to butotns
          it.image(0, 208, id(icon_prev_page), ImageAlign::TOP_LEFT, id(orange));
          it.image(320, 208, id(icon_next_page), ImageAlign::TOP_RIGHT, id(orange));
          //
          //>>> temperature inside:
          it.image(36, 15, id(icon_temp_inside), ImageAlign::TOP_CENTER, id(orange));
          it.printf(36, 85, id(font_arial20), id(white), TextAlign::BASELINE_CENTER , "%.1f°", id(inside_temperature).state);
          //
          //>>> vertical line:
          it.filled_rectangle(70, 0, 3, 115, id(red));
          //
          //>>> print time and date
          it.strftime(160, 5, id(font_clock), TextAlign::TOP_CENTER, "%H:%M", id(datetime).now());
          it.strftime(160, 80, id(font_date), TextAlign::TOP_CENTER, "%d-%m-%Y", id(datetime).now());
          //
          //>>> vertical line:
          it.filled_rectangle(250, 0, 3, 115, id(red));
          //
          //>>> outside temperature
          it.image(285, 15, id(icon_temp_outside), ImageAlign::TOP_CENTER, id(orange));
          it.printf(285, 85, id(font_arial20), id(white), TextAlign::BASELINE_CENTER , "%.1f°", id(outside_temperature).state);
          //
          //>>> horizontal line:
          it.filled_rectangle(0, 115, 320, 3, id(red));
          it.print(100, 160, id(font_arial20), "This is page 2!");
      - id: page3
        lambda: |-
          //>>> make a border arround the display
          it.filled_rectangle(  0,   0, 320,   3, id(red));
          it.filled_rectangle(  0,   0,   3, 240, id(red));
          it.filled_rectangle(  0, 237, 320,   3, id(red));
          //it.filled_rectangle(  0, 206, 320,   3, id(red));
          it.filled_rectangle(317,   0,   3, 240, id(red));
          //
          //>>> prev/next icons next to butotns
          it.image(0, 208, id(icon_prev_page), ImageAlign::TOP_LEFT, id(orange));
          it.image(320, 208, id(icon_next_page), ImageAlign::TOP_RIGHT, id(orange));
          //
          //>>> temperature inside:
          it.image(36, 15, id(icon_temp_inside), ImageAlign::TOP_CENTER, id(orange));
          it.printf(36, 85, id(font_arial20), id(white), TextAlign::BASELINE_CENTER , "%.1f°", id(inside_temperature).state);
          //
          //>>> vertical line:
          it.filled_rectangle(70, 0, 3, 115, id(red));
          //
          //>>> print time and date
          it.strftime(160, 5, id(font_clock), TextAlign::TOP_CENTER, "%H:%M", id(datetime).now());
          it.strftime(160, 80, id(font_date), TextAlign::TOP_CENTER, "%d-%m-%Y", id(datetime).now());
          //
          //>>> vertical line:
          it.filled_rectangle(250, 0, 3, 115, id(red));
          //
          //>>> outside temperature
          it.image(285, 15, id(icon_temp_outside), ImageAlign::TOP_CENTER, id(orange));
          it.printf(285, 85, id(font_arial20), id(white), TextAlign::BASELINE_CENTER , "%.1f°", id(outside_temperature).state);
          //
          //>>> horizontal line:
          it.filled_rectangle(0, 115, 320, 3, id(red));
          it.print(100, 160, id(font_arial20), "This is page 3!");
  - id: !extend display_j3_Left
    update_interval: never
    pages:
      - id: j3_l_page1
        lambda: |-
          it.image(80, 0, id(lightbulb), ImageAlign::TOP_CENTER, id(red));
      - id: j3_l_page2
        lambda: |-
          it.image(80, 0, id(alert), ImageAlign::TOP_CENTER, id(orange));
      - id: j3_l_page3
        lambda: |-
          it.image(80, 0, id(icon_temp_inside), ImageAlign::TOP_CENTER, id(white));
  - id: !extend display_j3_Right
    update_interval: never
    pages:
      - id: j3_r_page1
        lambda: |-
          it.image(80, 0, id(alert), ImageAlign::TOP_CENTER, id(red));
      - id: j3_r_page2
        lambda: |-
          it.image(80, 0, id(lightbulb), ImageAlign::TOP_CENTER, id(orange));
      - id: j3_r_page3
        lambda: |-
          it.image(80, 0, id(icon_temp_outside), ImageAlign::TOP_CENTER, id(white));

toon volledige bericht

[ Voor 1% gewijzigd door DiXY op 02-11-2024 10:25 . Reden: typo's ]

[balk]

Mooi werk DiXY. Ik heb ook wat gespeeld. Mijn toevoegingen:

1) meer symbolen in een font:

YAML:

  - file: "gfonts://Roboto"
    id: roboto_20
    size: 20
    extras:
      - file: "gfonts://Roboto"
        glyphs: [
          ">",
          "<",
          ]

2) Display elementen die je kan herhalen, komen dus op elke page terug:

YAML:

script:
  - id: all_pages
    then:
      - lambda: |-
          id(display_j2_main).print(1, 220, id(roboto_20), "<");
          id(display_j2_main).print(310, 220, id(roboto_20), ">");
          id(display_j2_main).strftime(280, 2, id(roboto_15), id(orange), TextAlign::TOP_CENTER, "%d %B", id(datetime).now());
          id(display_j2_main).strftime(280, 22, id(roboto_20), TextAlign::TOP_CENTER, "%H:%M", id(datetime).now());

en dan verderop, in elk page block:

YAML:

display:
  - id: !extend display_j2_main
    pages:
      - id: page1
        lambda: |-
          id(all_pages).execute();
          ....
      - id: page2
        lambda: |-
          id(all_pages).execute();
          ....
      - id: page3
        lambda: |-
          id(all_pages).execute();
          ....

3) Als laatste ben ik van mening dat binary_sensors te beperkt zijn en dat events een betere manier zijn om clicks naar Home Assistant te brengen. Dit is uit te breiden met double/tripple clicks.

YAML:

event:
  - platform: template
    name: BAR button Left event
    id: base_j3_btn_left_event
    event_types:
      - "press"
      - "release"
      - "long press"
  - platform: template
    name: BAR button Right event
    id: base_j3_btn_right_event
    event_types:
      - "press"
      - "release"
      - "long press"

en dan voor elke binary sensor:

YAML:

- platform: gpio
    id: 'base_j3_btn_left'
    name: "BAR button Left"
    internal: true
    pin: 
      mcp23xxx: base_J3
      number: 6
      mode: INPUT_PULLUP
      inverted: true
    on_press:
      then:
        - event.trigger:
            id: base_j3_btn_left_event
            event_type: "press"
    on_release:
      then:
        - event.trigger:
            id: base_j3_btn_left_event
            event_type: "release"
    on_multi_click:
        - timing:
            - ON for at least 2s
          then:
            - event.trigger:
                id: base_j3_btn_left_event
                event_type: "long press"

[DiXY]

Ik heb de TS aan gepast en de voorbeelden toegevoegd.

Is dit formaat OK/duidelijk zo?

[balk]

Ik was het compileren en uploaden een beetje zat. Ik probeer nu dit aan de praat te krijgen: https://esphome.io/components/display/sdl.html zodat ik de scherm layout op mijn macbook kan zien.
-edit-
Het werkt!

(maar ik moest wel alle hardware gerelateerde code wegslopen)

[ Voor 33% gewijzigd door balk op 05-11-2024 20:19 ]

[DiXY]

Of, @balk je maakt een nieuw "SDL device" aan en je gaat hierin je display layout maken. Eenmaal tevreden, knal je de code in je Button+

Goede Tip, ik zal de link even in de TS gooien. Ik moet even kijken hoe ik dit ga doen, ik kan namelijk geen WSL op mijn Windows PC draaien (voor VM's in VMware/Virtualbox moet Hyper-V uit), maar een Linux VM is geen punt. dus zal wel zoiets worden

[DiXY]

Ik ben nu zelf aan het bouwen met de eerste setup voor in de keuken, de bedoeling id hier 3 pagina's in te maken:
1: "Verlichting" (na 1min automatisch terug naar dit scherm)
1e BAR: 2 scenes selecteren.
2e BAR: 2 scenes selecteren.
3e BAR: (kort drukken)aan/uit, (lang drukken) dimmen +/-
2: "Muziek"
1e BAR: Volume omhoog/omlaag
2e BAR: Volgende / Vorige nummer/radio station
3e BAR: (Links, toggle)Play/Pause, (Rechts, toggle)Aan/Uit
3: "Robotzuiger"
1e BAR: Selecteer Keuken en Woonkamer
2e BAR: Selecteer Hal en Kantoor
3e BAR: Bakje legen en Starten/Stoppen

De muziek pagina heb ik bijna klaar, ik wil voor het hoofd scherm met scripts een soort "kaarten" gaan bouwen die ik kan gaan her gebruiken op andere buttons in huis. Alleen loop ik er nu tegenaan dat de id benaming die ik initieel gekozen heb niet handig is... omdat ik verschillende setups gebruik moet ik dan iedere keer alles nalopen. Ik wil daarom de benaming in het package gaan aanpassen voorstel is
main_screen
bar1_left
bar1_right
etc...
Door deze naming aan te houden heb je een main_screen en heeft in alle setups de zelfde naam, de bar er onder ook. Dit is makkelijker om code te delen en voorbeelden over te nemen.

Dan weten jullie dat al vast dit gaat een breaking change worden voor de mensen die het huidige package gebruiken. Misschien moet ik gebruik gaan maken van versioning...

[dog4life]

DiXY schreef op zondag 10 november 2024 @ 16:36:
Ik ben nu zelf aan het bouwen met de eerste setup voor in de keuken, de bedoeling id hier 3 pagina's in te maken:
1: "Verlichting" (na 1min automatisch terug naar dit scherm)
1e BAR: 2 scenes selecteren.
2e BAR: 2 scenes selecteren.
3e BAR: (kort drukken)aan/uit, (lang drukken) dimmen +/-
2: "Muziek"
1e BAR: Volume omhoog/omlaag
2e BAR: Volgende / Vorige nummer/radio station
3e BAR: (Links, toggle)Play/Pause, (Rechts, toggle)Aan/Uit
3: "Robotzuiger"
1e BAR: Selecteer Keuken en Woonkamer
2e BAR: Selecteer Hal en Kantoor
3e BAR: Bakje legen en Starten/Stoppen

De muziek pagina heb ik bijna klaar, ik wil voor het hoofd scherm met scripts een soort "kaarten" gaan bouwen die ik kan gaan her gebruiken op andere buttons in huis. Alleen loop ik er nu tegenaan dat de id benaming die ik initieel gekozen heb niet handig is... omdat ik verschillende setups gebruik moet ik dan iedere keer alles nalopen. Ik wil daarom de benaming in het package gaan aanpassen voorstel is
main_screen
bar1_left
bar1_right
etc...
Door deze naming aan te houden heb je een main_screen en heeft in alle setups de zelfde naam, de bar er onder ook. Dit is makkelijker om code te delen en voorbeelden over te nemen.

Dan weten jullie dat al vast dit gaat een breaking change worden voor de mensen die het huidige package gebruiken. Misschien moet ik gebruik gaan maken van versioning...

toon volledige bericht

Cool idee met die kaarten, lijkt me dat het zo makkelijk wordt om kaarten toe te voegen dmv community kaarten oid? En is je main display per kaarten verschillend?
Ik kijk vanaf de zijlijn mee, zoiets is namelijk precies wat ik zoek, zo responsief mogelijk.
Goed bezig

[DiXY]

Het schiet helaas nog niet echt op.... ik was goed op weg en was druk alles wat meer te ordenen in diverse bestanden, om dingetjes wat makkelijker te maken voor mensen met minder programmeer ervaring. Alleen heb ik alles getest op een 1BAR/1Display setup. en nu loop ik tegen ram issues aan, de displays reserveren een stukje ram geheugen om (als ik het goed begrepen heb) de frames sneller te kunnen laden. Echter met 3 BARs en de wijzigingen die ik tot nu toe gemaakt heb, is er nu niet genoeg ruimte meer. Het lijkt erop dat de gekozen ESP32-S3 geen PSRAM heeft. Als ik dit probeer aan te zetten geeft de log aan dat het niet beschikbaar is:

code:

[19:59:03][C][psram:020]: PSRAM:
[19:59:03][C][psram:021]:   Available: NO

Dit zijn de meldingen die ik krijg als ik een component update uitvoer op de displays:

code:

[19:59:21][E][display:017]: Could not allocate buffer for display!
[19:59:21][E][component:119]: Component display was marked as failed.

Mijn werk tot zover staat onder de 'dev'-branch van de github Repo mocht iemand nog ideeën hebben... hoor ik het graag.

Ik heb een ESP32-S3 met 8MB PSRAM besteld, eens kijken wat dat brengt. Tot die tijd gooi ik het even aan de kant. De voorbeelden uit de TS doen het wel.

[dog4life]

DiXY schreef op donderdag 14 november 2024 @ 20:33:
Het lijkt erop dat de gekozen ESP32-S3 geen PSRAM heeft. Als ik dit probeer aan te zetten geeft de log aan dat het niet beschikbaar is:

Op de chip staat linksonder MON16, zonder toevoeging (maw geen PSRAM). Als ik het datasheet bekijk, lijkt er iets van R2 of R8 achter te moeten staan, zie:

Helaas, want dat geheugen lijkt centenwerk te zijn.

[DiXY]

Ik ben ondertussen met Ronald aan het berichten over een mogelijke oplossing voor de actuele hardware. Zijn voorstel was om 1 mini display te defineren en dan 1 voor 1 naar het display te schrijven. Wat ik een goed idee vind! IK weet alleen op dit moment nog niet hoe ik verwacht met een script wel wat te kunnen maar of dit ook lukt? komend weekend ben ik erg druk met werk, op zijn vroegst heb ik in de loop van volgende week pas weer echt tijd. @balk jij hebt al meer script tover werk laten zien! Heb jij komende dagen eens tijd om hier eens naar te kijken?

Ik twijfel of ik de PSRAM in de huidige hardware revisie aan de praat krijg, gezien GPIO37 (deze weet ik zeker) al gebruikt wordt. In de datasheet geven ze wel aan GPIO35-37 deze niet te gebruiken als je PSRAM wil gebruiken. Ik denk niet dat het een hele bewuste $$ keuze is geweest... aan de andere kant... 1000x 15 cent

[DiXY]

Stiekem heb ik gauw al even gekeken:
https://esphome.io/compon...x#configuration-variables
de cs_pin (chipselect) en rotation zijn optioneel, als ik die niet definieer bij het aanmaken van het display component, maar defineer als "ordinaire" GPIO zou ik hem kunnen "hoog" schrijven display updaten en vervolgens weer laag schrijven. Zoiets...

En dat zou dat er voor de 1bar/display setup zo uit kunnen zien (ongeteste code!!):

YAML:

output:
  - id: display_bar1_left
    platform: gpio
    internal: true
    pin:
      mcp23xxx: base_J3
      number: 5
      mode:
        output: true
      inverted: false
  - id: display_bar1_right
    platform: gpio
    internal: true
    pin:
      mcp23xxx: base_J3
      number: 1
      mode:
        output: true
      inverted: false

display:
  - id: bar_display
    platform: ili9xxx
    model: ST7735
    color_order: bgr
    update_interval: never
    dc_pin: 
      number: GPIO37
      allow_other_uses: true
    invert_colors: false
    show_test_card: false
    dimensions: 
      height: 160
      width: 80
      offset_width: 24

script:
  - id: update_bars
    then:
      - lambda:
            // update display left:
            id(display_bar1_left).turn_on();
            id(bar_display).set_rotation(270);
            id(bar1_left_page1).execute()
            id(bar_display).update();
            id(display_bar1_left).turn_off();
            // update display right:
            id(display_bar1_right).turn_on();
            id(bar_display).set_rotation(90);
            id(bar_display).update();
            id(display_bar1_right).turn_off();
  - id: bar1_left_page1
    then:
      - lambda:
            id(bar_display).image(80, 0, id(icon_temp_inside), ImageAlign::TOP_CENTER, id(orange));
  - id: bar1_left_page2
    then:
      - lambda:
            id(bar_display).image(80, 0, id(icon_temp_outside), ImageAlign::TOP_CENTER, id(orange));
  - id: bar1_right_page1
    then:
      - lambda:
            id(bar_display).image(80, 0, id(icon_temp_inside), ImageAlign::TOP_CENTER, id(orange));
  - id: bar1_right_page2
    then:
      - lambda:
            id(bar_display).image(80, 0, id(icon_temp_outside), ImageAlign::TOP_CENTER, id(orange));

toon volledige bericht

EDIT: het gaat nog niet zo simpel als hoog/laag schrijven van de cs pin... er komt een stukje timing bij kijken.... Ik denk dat we moeten gaan kijken naar het "her"-defineren van de CS pin. https://esphome.io/api/cl...107b5bfb96481961c1d6cf687 maar dat wordt hem niet meer vanavond

[ Voor 6% gewijzigd door DiXY op 15-11-2024 20:12 ]

[balk]

DiXY schreef op vrijdag 15 november 2024 @ 13:04:
Ik ben ondertussen met Ronald aan het berichten over een mogelijke oplossing voor de actuele hardware. Zijn voorstel was om 1 mini display te defineren en dan 1 voor 1 naar het display te schrijven. Wat ik een goed idee vind! IK weet alleen op dit moment nog niet hoe ik verwacht met een script wel wat te kunnen maar of dit ook lukt? komend weekend ben ik erg druk met werk, op zijn vroegst heb ik in de loop van volgende week pas weer echt tijd. @balk jij hebt al meer script tover werk laten zien! Heb jij komende dagen eens tijd om hier eens naar te kijken?

Ik twijfel of ik de PSRAM in de huidige hardware revisie aan de praat krijg, gezien GPIO37 (deze weet ik zeker) al gebruikt wordt. In de datasheet geven ze wel aan GPIO35-37 deze niet te gebruiken als je PSRAM wil gebruiken. Ik denk niet dat het een hele bewuste $$ keuze is geweest... aan de andere kant... 1000x 15 cent

Dat klinkt niet heel goed! Ik hoop dat het mogelijk gaat zijn om met 3 bars te werken! Ik heb weinig kunnen doen; ik heb net een nieuwe huisserver en ben nu druk net het inrichten er van. En werk/gezin niet te vergeten

[DiXY]

@balk Geen punt! maar dan wordt het niet eerder dan donderdag dat ik er mee verder kan Ik heb wel goed hoop dat het kan lukken met de methode die @wijnsema voorstelde. Helaas gaan dit soortdingen nu eenmaal niet zonder slag of stoot We moeten verwacht ik nu alleen de juiste manier en timing vinden

Dit is wat ik tot nu toe heb: de displays geven geen "sneeuw" meer maar worden zwart na de update, maar er komt nog niks in beeld:

YAML:

display:
  - id: bar_display
    platform: ili9xxx
    model: ST7735
    color_order: bgr
    update_interval: never
    dc_pin: 
      number: GPIO37
      allow_other_uses: true
    invert_colors: false
    show_test_card: false
    dimensions: 
      height: 160
      width: 80
      offset_width: 24

output:
  - id: cs_pin_3
    platform: gpio
    pin:
      mcp23xxx: base_J3
      number: 5
      mode:
        output: true
      inverted: false
  - id: cs_pin_4
    platform: gpio
    pin:
      mcp23xxx: base_J3
      number: 1
      mode:
        output: true
      inverted: false

script:
  - id: update_display_left
    then:
      - lambda: |-
          id(cs_pin_3).turn_on();
          id(cs_pin_4).turn_off();

          id(bar1_left_page1).execute();
          id(bar_display).update();
          delay(10);
          id(cs_pin_3).turn_off();
  - id: update_display_right
    then:
      - lambda: |-
          id(cs_pin_3).turn_off();
          id(cs_pin_4).turn_on();

          id(bar1_right_page1).execute();
          id(bar_display).update();
          delay(10);
          id(cs_pin_4).turn_off();
  - id: update_all
    then:
      - component.update: main_display
      - script.execute: update_display_left
      - script.execute: update_display_right

het kan zijn dat in dit stukje on en off nog verkeerd om staan.

[ Voor 9% gewijzigd door DiXY op 19-11-2024 06:38 . Reden: voor de compleetheid "display:" toegevoegd ]

[buttonplus]

Voor de zekerheid meld ik nog even dat de CS pin (van alle displays, ook de grote) active low is, dus om te schrijven naar de display zet je eerst de CS pin op 0 (low).

[DiXY]

Ik heb advies gevraagd op het ESPHome forum:
https://community.home-as...e-display-instance/798220

[DiXY]

Ok, dit ziet er goed uit! de sleutel was een een display.setup() uitvoeren
Ik ga ook nog de LVGL library bekijken

[balk]

DiXY schreef op zondag 24 november 2024 @ 22:32:

[Afbeelding]

Ok, dit ziet er goed uit! de sleutel was een een display.setup() uitvoeren
Ik ga ook nog de LVGL library bekijken

Dat is mooi nieuws! Dankjewel! Ik had ook al naar lvgl gekeken maar dat is vooral gericht op Touch screens, met dikke knoppen en duidelijke kleuren enzo. Ik persoonlijk prefereer een rustige interface.

[DiXY]

Je kunt de LVGL compleet stylen op een CSS-achtige manier. Niet alles is bruikbaar maar het is wel een redelijk simpele manier van mooie schermen te bouwen, en... het is heel effectief opgebouwd. Misschien een leuk zijspoor maar nu nog even niet, eerst even focussen op wat werkt . Vanaf nu ga ik ook standaard testen met de 3BAR/1 Display setup.

Ik verwacht er vandaag nog wel een paar uurtjes aan te kunnen werken.

[ Voor 21% gewijzigd door DiXY op 25-11-2024 12:38 ]

[balk]

@DiXY is er al iets te delen/testen? Ik ben wel benieuwd naar de voortgang

[DiXY]

@balk Ik heb er afgelopen maandag even aan kunnen besteden maar niet veel verder gekomen. 2 1 probleem, 1 is tijd en 2 is: Ik heb het idee dat als ik mijn "package" test de ESPHome add-on de versies cached. Hier zijn een paar GitHub issues over, maar nog niet een met een oplossing of überhaupt een bevestiging dat dit zo is. Maar als ik een "log" regel toevoeg en deze push naar GitHub en vervolgens mijn B+ update dan komt die log regel niet in beeld, er veranderd gewoon niks... Op het moment ben ik erg druk met werk, ik doe mijn best maar even geen beloftes

EDIT: ik zat vanuit de verkeerde branch te updaten....

[ Voor 6% gewijzigd door DiXY op 30-11-2024 11:11 ]

[DiXY]

Grote update!

Alle setups heb ik kunnen testen en werken. De TS is geüpdate de initiele code is een stuk langer geworden maar op dit moment zie ik nog niet hoe ik dit anders moet doen. Misschien dat ik het nog ombouw naar een echt component. Dan is het mogelijk veel code te genereren en device specifieke configuratie aan te maken. Misschien iets voor tussen kerst en oud&nieuw

[Wouter2403]

Dat ziet er al heel goed uit. Mijn skills zijn denk ik niet toereikend om dit werkend te krijgen, maar mijn Button+ zou hier wel van opknappen. Is nu toch allemaal een beetje basic met alleen tekst op de kleine displays.

[DiXY]

@Wouter2403 ik ga proberen de komende dagen de initiële code van commentaar te voorzien misschien dat ik het een en ander kan verduidelijken. In principe kun als je de stappen uit de TS volgt, de code redelijk straffeloos uploaden naar je B+. Daarna kun je beginnen met de code uit te bouwen. Opzicht is ESPHome redelijk recht-toe recht-aan, maar het kent wel een bepaald tweak-niveau aan de andere kant denk ik dat het wel te doen is

[balk]

Wouter2403 schreef op zaterdag 7 december 2024 @ 22:00:
Dat ziet er al heel goed uit. Mijn skills zijn denk ik niet toereikend om dit werkend te krijgen, maar mijn Button+ zou hier wel van opknappen. Is nu toch allemaal een beetje basic met alleen tekst op de kleine displays.

Kan dit helpen?
https://github.com/balk77/ESPhome_ButtonPlus/tree/main/Docs

Pull request staat klaar

[Wouter2403]

balk schreef op dinsdag 17 december 2024 @ 22:29:
[...]

Kan dit helpen?
https://github.com/balk77/ESPhome_ButtonPlus/tree/main/Docs

Pull request staat klaar

Zeker! Ik zal er eens wat mee hobbyen van et weekend.

[DiXY]

balk schreef op dinsdag 17 december 2024 @ 22:29:
[...]

Kan dit helpen?
https://github.com/balk77/ESPhome_ButtonPlus/tree/main/Docs

Pull request staat klaar

Gaat zeker helpen! Ik zal ze een dezer dagen even door zetten! Bedankt!

[balk]

DiXY schreef op zondag 8 december 2024 @ 14:40:
@Wouter2403 ik ga proberen de komende dagen de initiële code van commentaar te voorzien misschien dat ik het een en ander kan verduidelijken. In principe kun als je de stappen uit de TS volgt, de code redelijk straffeloos uploaden naar je B+. Daarna kun je beginnen met de code uit te bouwen. Opzicht is ESPHome redelijk recht-toe recht-aan, maar het kent wel een bepaald tweak-niveau aan de andere kant denk ik dat het wel te doen is

Ik heb de afgelopen dagen een beetje zitten spelen. Je code zit mooi in elkaar. Ik denk/hoop wel dat er nog wat meer naar een package kan om zo de code wat overzichtelijker te maken. Ik zal kijken wat ik daartoe kan bijdragen via GitHub. Ik ben nu met de inrichting bezig van de schermen. Met de kerstvakantie voor de deur heb ik vast wel tijd voor wat meer pielerij

[balk]

Ik heb de afgelopen dagen samen met @DiXY hard gewerkt om de ESPhome versie te verbeteren.
Nieuwe features

• Slider vanuit Home Assistant waarmee je pages kan veranderen (dit gaat nog wat veranderen waarschijnlijk)
• Sensors in HA die de huidige page en page name aangeven
• Displayitem module, je geeft wat parameters op zoals de coordinaten, font size, kleur, labels text, value sensor etc. En dan wordt er een keurig aligned setje gemaakt zoals "Gemeten" in de video. Op page "Overdag" in de video is zo'n beetje alles hiermee gebouwd (behalve de navigatie en het woordje Pollen, en regeltje "Electra, E/kWh)

Toestemming nodig voor bekijken van YouTube

Op deze plek staat ingesloten content die van YouTube afkomstig is. Het tonen van deze inhoud kan ertoe leiden dat YouTube persoonlijke gegevens zoals je IP-adres verwerkt en/of cookies op jouw computer of ander apparaat zet. Hiervoor moet je eerst expliciet toestemming geven voor Sociale media.

Open cookievoorkeurenBekijk op YouTube

Button+ with ESPhome

Een displayitem roep je zo aan:

code:

id(displayitem).execute(2,2,"Gemeten","size_3_label","orange",id(inside_temperature2).state,1,"","size_3_value","white","°C","size_3_unit","grey","TOP_LEFT");

Parameters, in deze volgorde:

code:

- id: displayitem
    parameters: 
      x: int
      y: int
      label: string
      labelfont: string
      labelcolor: string
      valuenum: float
      decimals: int
      valuestr: string
      valuefont: string
      valuecolor: string
      unit: string
      unitfont: string
      unitcolor: string
      align: string

[ Voor 12% gewijzigd door balk op 29-12-2024 12:36 ]

[DiXY]

Alles wat @balk hierboven noemt, werkt op dit moment alleen vanuit de dev branch. Wat ik tot zover getest heb werkt en is stabiel.

Wil je dit testen? Geen probleem, we horen graag je bevindingen! Maar, houd even rekening met de volgende punten:

0.2.0_dev:

NEW:

• added display item card (thanks @balk77)
• menu can now be controlled from HA and has page naming (thanks @balk77)
• the music card now changed icon when play/pause changes (thanks @balk77)

BREAKING:

• global nr_of_pages is now replaced by nr_of_pages substitution, if you have compile errors please see the basic examples
• paging is now indexed by 1 > first page has number 1. Page 0>1, 1>2 etc.

Deze substitution moet worden toegevoegd:

YAML:

substitutions:
  nr_of_pages: '1'

onder packages moet "main" in "dev" veranderd worden. Wil je de card van @balk testen voeg dan bij files:

YAML:

      - 'package/cards/display_item.yaml'

de totale package config zou er dan zo uit zien:

YAML:

packages:
  remote_package_files:
    url: https://github.com/dixi83/ESPHome_ButtonPlus
    files: 
      - 'package/3bar_1display.yaml'
      - 'package/cards/music.yaml'
      - 'package/cards/display_item.yaml'
    ref: dev
    refresh: 1d

en bij globals moet "nr_of_pages" verwijderd worden en "page_names" moet worden toegevoed, zoals hieronder.

YAML:

globals:
  - id: !extend page_names
    initial_value: '{"Naam Pagina 1","Naam Pagina 2","Naam Pagina 3"}'

@balk kun jij in de display_item card de juiste font en font size nog aanpassen, deze info zat helaas niet in je PR

[Michel]

Hele gave ontwikkeling dit! Wacht even tot hij wat verder getest is, maar die menu structuur is fantastisch!