Feature requestr: Binary state icons on top

[kroon040]

Hi,

I Got it working with the code of you, thnx for that. Now I would like to add state icons (mdi) on top of the screen. For example when heating is on, hot water is on, etc. Any idea how this can be added to your code?

[albert-canfield]

At the top_layer element (line 214) you can add another label like this (line 216)

- label:
          text: "\uF0238"
          id: heating_status
          hidden: true
          align: top_left
          x: 2
          y: 2
          text_align: left
          text_color: 0xFFFFFF

and then have a homeassistant sensor that:

on_value:
      then:
        - if:
            condition:
               lambda: 'return id(YOUR_SENSOR_ID).state == true;'
            then:
               - lvgl.widget.show: heating_status
            else:
               - lvgl.widget.hide: heating_status

Do this with all the icons that you want to put at the top_layer.

[kroon040]

Hi,

Thnx for your exmaple I got it working with this. I only wnat to use mdi icons, but in text filling in the icon of MDI doesn't work (\U000F04C3)

  - label:
      text: "\U000F04C3"
      id: radio_status
      hidden: true
      align: top_left
      x: 2
      y: 2
      text_align: left
      text_color: 0xFFFFFF

`

  - platform: homeassistant
    id: radio_status_sensor
    entity_id: binary_sensor.radio_on
    on_state:
      then:
        - if:
            condition:
               lambda: 'return id(radio_status_sensor).state == true;'
            then:
               - lvgl.widget.show: radio_status
            else:
               - lvgl.widget.hide: radio_status

[albert-canfield]

Try to specify the font for the label with the option "text_font: top_icons"

and add a new font on the "font:" component:

- file: 'fonts/materialdesignicons-webfont.ttf' # http://materialdesignicons.com/cdn/7.4.47/ 
    id: top_icons
    bpp: 4
    glyphs: [
      "\U000F04C3"
    ]

And don't forget to upload the materialdesignicons-webfont.ttf file to inside your "HA Config > EspHome > fonts" folder.

ps: I will add the folder fonts and file on the repository and you can download from there.

Give a try and share a picture of the results 😉

[kroon040]

Hi,

I already downloaded the fonts for the other icons. I only get an error whit putting the text_font:top_icons , what is line 230

ERROR Error while reading config: Invalid YAML syntax:

while scanning for the next token
found character '\t' that cannot start any token
  in "ha-panel.yaml", line 230, column 1

Below label lbl_hastatus

      - label:
          text: "\U000F04C3"
          id: radio_status
          hidden: true
          align: top_left
          x: 2
          y: 2
          text_font: top_icons
          text_align: left
          text_color: 0xFFFFFF

and in fonts:

- file: 'fonts/materialdesignicons-webfont.ttf' # http://materialdesignicons.com/cdn/7.4.47/ 
    id: top_icons
    bpp: 4
    glyphs: [
      "\U000F04C3"
    ]

[kroon040]

found the issue, was some spaces/tab issue in the code. I will post later here some photos

[kroon040]

Here the screenshot with all the state icons that can be on.

1. Heating on
2. Hotwater on
3. Basementdoor open
4. garagedoor open
5. Sched locked
6. TV on
7. Radio on

I also want to change the date format. It's now 16.08.2024. I want to have it as Friday, 16.08. If you have an idea....

[albert-canfield]

I did that by creating this template sensor on my configuration.yaml that every 00:00 or every time HA restarts set the nominal week day:

template:
  - trigger: 
    - platform: time
       at: "00:00:00"
    - platform: homeassistant
       event: start
    sensor:
       - unique_id: week_day
          name: "Week Day"
         state: >-
            {{ now().strftime('%A') }}

Then, on the HA Panel/Deck yaml, you need to add a new LABEL to capture it

- label:
            align: CENTER
            id: display_week_day
            text: weekday
            text_font: roboto24
            text_color: 0xFFFFFF
            y: -100
            x: -75

and a new TEXT SENSOR that will get the week day from HA

- platform: homeassistant
    id: ha_week_day
    entity_id: sensor.week_day
    on_value:
      then:
        - lvgl.label.update:
            id: display_week_day
            text: !lambda return id(ha_week_day).state.c_str();

[kroon040]

Thx. I did a bit different:

  - platform: template 
    id: display_date_sensor
    name: ha2esp_date
    update_interval: 10s
    lambda: |-
      static const char* dagen[] = {"Zondag", "Maandag", "Dinsdag", "Woensdag", "Donderdag", "Vrijdag", "Zaterdag"};
      auto now = id(ha_date).now();
      std::string dag_van_week = dagen[now.strftime("%w").c_str()[0] - '0'];
      char buffer[20];
      sprintf(buffer, "%s, %02d.%02d", dag_van_week.c_str(), now.day_of_month, now.month);
      return std::string(buffer);
    on_value:
      then:
        - lambda: |-
            lv_label_set_text(id(display_date), x.c_str());