🔹 hui-element - Use built-in elements in the wrong place

Funny thing about lovelace - cards, rows in the entities card, badges and elements in the picture-elements card work exactly the same behind the scenes.

That means that you can use them interchangeably if you know how, and e.g. put a button right in an entities card, a badge somewhere in the middle of your view or a markdown card (with background and border removed) right in your carefully crafted picture-elements card. Pretty neat stuff that allows for some fantastic creations.

However. Because Home Assistant cares about you and your bandwidth, not all cards and things are downloaded from the server from the start, and if you try to put a card where a row is expected or vice versa lovelace will be be confused and not know where to look for it.

Enter hui-element.
Say you have a markdown card:

type: markdown
contents: |
  Good {% if now().hour < 8 %}morning{% else %}day{% endif %}!

And you would like that to be at the top left of your daily overview picture-elements card, you can now just add it there with the addition of one (1) line of code! (And changing one slightly)

type: picture-elements
image: http://www.placekitten.com/800/600
elements:
  - type: custom:hui-element # This is the added row
    card_type: markdown # This is the slightly changed row
    contents: |
      Good {% if now().hour < 8 %}morning{% else %}day{% endif %}!
    style:
      left: 0
      top: 0
      "--ha-card-background-color": rgba(0, 0, 0, 0)
      "--ha-card-drop-shadow": none

If you want a card where there should be a row - this is the solution.

Please note, though, that this is not needed for custom things, since then are always loaded.

9 Likes

I’m currently using this solution:

Is there any advantage to using your card instead?

This is awesome ! Love it ! Thx @thomasloven !
Gives a very nice look to my dashboards :slight_smile:
image

But i’m not able to make it work with glance card :frowning: I guess because there’s no row / badges / element in this card.

I.m.o. this is easier to use.

hui-element also loads the element only when they are actually needed - which could give a minimal performance boost to a tiny fraction of users.

1 Like

Correct. The glance card does not allow changing the type of the item in the card.

Nevermind, I already got a very satisfying result ! My lovelace is full of thomasloven :smiling_face_with_three_hearts:

Edit : Coffee Hass cloud on his way to you ! :+1:

1 Like

53 instances of hui-blah-blah to replace. Went smooth as. Works very well. Better than the preloader.

Thanks Thomas.

I am learning… can you share the code of this card?

Sure. I’ll post it as soon I have access to my computer. On mobile it’s not so easy.

Thanks…

Thx for waiting. Here is the code.

type: entities
entities:
  - entity: sensor.netatmo_salon_temperature
    name: Température
    type: 'custom:multiple-entity-row'
    style: |
      .entity:not(.state)>div {
        color: var(--secondary-text-color);
      }
    state_header: Actuelle
    entities:
      - entity: sensor.netatmo_salon_min_temp
        name: Min
      - entity: sensor.netatmo_salon_max_temp
        name: Max
  - entity: sensor.netatmo_salon_humidity
    name: Humidité
  - entity: sensor.netatmo_salon_co2
    name: CO₂
  - entity: sensor.netatmo_salon_noise
    name: Niveau Sonore
  - type: 'custom:hui-element'
    card_type: horizontal-stack
    cards:
      - type: 'custom:mini-graph-card'
        align_icon: state
        color_thresholds:
          - color: '#ef1d0f'
            value: 25
          - color: '#ef5a0f'
            value: 24
          - color: '#f0da11'
            value: 22
          - color: '#11f13a'
            value: 19
          - color: '#1da4f2'
            value: 15
        entities:
          - entity: sensor.netatmo_salon_temperature
            index: 0
        hour24: true
        more_info: false
        points_per_hour: 1
        show:
          labels: true
          name: false
      - type: 'custom:mini-graph-card'
        align_icon: state
        entities:
          - entity: sensor.netatmo_salon_humidity
            index: 0
        hour24: true
        line_color: '#1da4f2'
        more_info: false
        name: Salon
        points_per_hour: 1
        show:
          labels: true
          name: false
title: Salon

To make it work, you’ll need :

  • mini-graph-card (graphs)
  • hui-element (the topic here !)
  • card Mod (another tool from thomas for CSS Styling i use in multiple entity row)
  • Multiple entity row (for the 1st entity ‘Température’ to show 3 values in a row)

All these tools are available in HACS.

1 Like

Thanks again… :pray: :ok_hand:

This is some amazing work. thank you. I have now redisigned my entire lovlace vertical stacks.
Looks much better!

A little tip: best way to thank me is with an awesome screenshot…

thanks for this, does away with all my custom stack-in-cards (which itself did away with all vertical-stack-in-card cards…) this one is for @petro to, who inspired me to do that, and use entities all over :wink:

a question for type: divider, is this the way to use that:

  - type: custom:hui-element
    row_type: divider

it does show, but has a distinct color I cant explain just yet, so maybe I’m doing it wrong? (dont know how to style that yet, I need it to use the same margins as the other styles)

btw, thank you:

type: entities
entities:
  - type: custom:hui-element
    card_type: markdown
    style: |
      ha-card {
        box-shadow: none;
        margin: -16px -16px 0px -16px;
        }
    content: >
      # <font color = {{states('sensor.trash_color')}}>Afvalwijzer</font>

      <ha-icon icon= {{'mdi:delete-alert' if states('sensor.saver_trash_today') != 'Geen' else 'mdi:delete-outline'}}> </ha-icon> Vandaag, {{states('sensor.vandaag')}}: <font color= {{states('sensor.trash_color')}}>**{{states('sensor.saver_trash_today')|capitalize}}</font>**

      <ha-icon icon= {{states('sensor.trash_next_icon')}}> </ha-icon> Volgende afval-ophaal over **<font color={{states('sensor.trash_next_color')}}>{{states('sensor.saver_trash_first_next_in_days')}}</font>** {{'dag' if states('sensor.saver_trash_first_next_in_days') == '1' else 'dagen'}} op:

      <ha-icon icon= 'mdi:delete-alert'> </ha-icon> {{states('sensor.trash_first_next_date_formatted')}}: **<font color={{states('sensor.trash_next_color')}}>{{states('sensor.saver_trash_first_next_item')|capitalize}}</font>**

  - type: custom:hui-element
    card_type: horizontal-stack

    cards:
      - type: picture-entity
        style: |
          ha-card {
            box-shadow: none;
            margin: 0px -16px 0px -16px;
            animation: {% if is_state('persistent_notification.trash_notification', 'notifying') and
                               states('sensor.saver_trash_today') != 'Geen' %} blink 2s linear infinite;
                       {% else %} none
                       {% endif %}
            }
          @keyframes blink {
            100% {opacity: 0;}
            }

        entity: sensor.saver_trash_today
        name: Vandaag
        show_state: false
        state_image:
          'gft': /local/mijnafvalwijzer/gft3.png
          'papier': /local/mijnafvalwijzer/papier3.png
          'restafval': /local/mijnafvalwijzer/restafval3.png
          'plastic verpakkingsafval': /local/mijnafvalwijzer/plastic3.png
          'Geen': /local/mijnafvalwijzer/kliko_geen.png
      - type: picture-entity
        style: |
          ha-card {
            box-shadow: none;
            margin: 0px -16px 0px -16px;
            animation: {% if is_state('persistent_notification.trash_notification', 'notifying') and
                               states('sensor.saver_trash_tomorrow') != 'Geen' %} blink 2s linear infinite;
                       {% else %} none
                       {% endif %}
            }
          @keyframes blink {
            100% {opacity: 0;}
            }
        entity: sensor.saver_trash_tomorrow
        name: Morgen
        show_state: false
        state_image:
          'gft': /local/mijnafvalwijzer/gft3.png
          'papier': /local/mijnafvalwijzer/papier3.png
          'restafval': /local/mijnafvalwijzer/restafval3.png
          'plastic verpakkingsafval': /local/mijnafvalwijzer/plastic3.png
          'Geen': /local/mijnafvalwijzer/kliko_geen.png
      - type: picture-entity
        style: |
          ha-card {
            box-shadow: none;
            margin: 0px -16px 0px -16px;
            }
        entity: sensor.saver_trash_day_after_tomorrow
        name: Overmorgen
        show_state: false
        state_image:
          'gft': /local/mijnafvalwijzer/gft3.png
          'papier': /local/mijnafvalwijzer/papier3.png
          'restafval': /local/mijnafvalwijzer/restafval3.png
          'plastic verpakkingsafval': /local/mijnafvalwijzer/plastic3.png
          'Geen': /local/mijnafvalwijzer/kliko_geen.png

  - type: custom:hui-element
    card_type: custom:auto-entities
    card:
      type: glance
      style: |
        ha-card {
          box-shadow: none;
          margin: 0px -16px 0px -16px;
          }
      title: Next pickups
    filter:
      include:
        - attributes:
            next_pickup_in_days: '! none'
    sort:
      attribute: next_pickup_in_days
      method: attribute
      numeric: true

  - type: custom:hui-element
    row_type: divider

  - type: custom:hui-element
    card_type: custom:auto-entities
    card:
      type: entities
      style: |
        ha-card {
          box-shadow: none;
          margin: 0px -16px 0px -16px;
          }
    filter:
      include:
        - entity_id: sensor.*_trash_timestamp
          options:
            type: custom:template-entity-row
            state: >
              {{state_attr(config.entity,'date')}}
    sort:
      method: state

  - type: custom:hui-element
    card_type: entities
    style: |
      ha-card {
        box-shadow: none;
        margin: -16px -16px -16px -16px;
        background: url('/local/mijnafvalwijzer/background.png');
        background-size: cover;
        }
    show_header_toggle: false
    entities:
     - entity: automation.afval_vandaag
       name: Notify vandaag
     - entity: automation.afval_morgen
       name: Notify morgen
     - entity: input_boolean.trash_reminder
     - entity: input_boolean.trash_outside

It looks to me (may be tricket by the indentation, though) that your divider is in the entities: section of an entities card. If, so, just

- type: divider

is enough.

well spotted!

still, I’d like it to be the full width. Think the blue color is simply the secondary card color, so wont touch the for now.

in many of my other entities cards I used type: hui-markdown-card where I now can use your hui-element. Is there a backend difference between the 2?

I can’t see how that’s related to hui-element. You’d need a plugin which can be used to modify the CSS of an entities row to do that. Maybe you could set the margins of the div in the divider row to, say, 0 -16px using something like that.

yes, as we speak, I just found your post 🔹 Card-mod - Add css styles to any lovelace card, and adjusted it to

  - type: divider
    style: |
      div {
        margin: 0px -16px 0px -16px;
        border: 1px solid white;
      }

working perfectly! your suggestion works too of course, I takeout it is shorthand for the same …

only question for now: is there a difference between the hui-element, and using the ‘old’ method of custom:hui-markdown-card (or any other are card)

Only what’s clearly stated in the readme.