📝 100% Templatable Lovelace Configurations

DavidFW1960 · April 14, 2021, 7:10am

px size is different on different screen sizes so I want it to be a percentage of the card width.
I’d like the say Coffee to be 25% of card width and the 4 columns to east be 25% of the rest of the width and entered in each column.

Can you show me how to do that?

Ildar_Gabdullin · April 14, 2021, 9:09am

I will try to simulate your case and post here my results.

DavidFW1960 · April 14, 2021, 9:28am

Just FWIW, on my iPad with no styling at all it looks like this:

So the Signal and RSSI are splitting onto 2 lines but perfect alignment. (Landscape mode on the iPad)
Portrait mode:

All over the place…

Ildar_Gabdullin · April 14, 2021, 9:31am

No, there are slight differences… I am trying to simulate, wait a little.

DavidFW1960 · April 14, 2021, 9:36am

Yeah you’re right… slight shift…

Ildar_Gabdullin · April 14, 2021, 10:11pm

Here 2 templates:

“Excellent” etc in "secondary_info".
In a separate column.

decluttering_templates:
  decl_test_david:
    card:
      type: 'custom:config-template-card'
      variables:
        varDEVICE: 'parseFloat(states[''[[SENSOR_DEVICE]]''].state)'
      entities:
        - '[[SENSOR_DEVICE]]'
        - '[[VALUE_DEVICE_NAME]]'
        - '[[SENSOR_DEVICE_STATUS]]'
        - '[[SENSOR_DEVICE_WIFI_CONNECT_COUNT]]'
        - '[[SENSOR_DEVICE_SIGNAL]]'
        - '[[SENSOR_DEVICE_RSSI]]'
      card:
        type: 'custom:mod-card'
        style:
          multiple-entity-row:
            $:
              hui-generic-entity-row:
                $: |
                  .info.pointer .secondary {
                    {% if states('[[SENSOR_DEVICE]]')|int >= 100 %}
                    color: green;
                    {% elif states('[[SENSOR_DEVICE]]')|int >= 80 %}
                    color: orange;
                    {% elif states('[[SENSOR_DEVICE]]')|int >= 60 %}
                    color: red;
                    {% else %}
                    color: magenta;
                    {% endif %}
                  }
        card:
          type: 'custom:multiple-entity-row'
          entity: '[[SENSOR_DEVICE]]'
          show_state: false
          name: '[[VALUE_DEVICE_NAME]]'
          icon: >-
            ${varDEVICE >= 100 ? "mdi:wifi" : (varDEVICE >= 80 ?
            "mdi:wifi-strength-3" : (varDEVICE >= 60 ? "mdi:wifi-strength-2" :
            "mdi:wifi-strength-1")) }
          secondary_info: >-
            ${ varDEVICE >= 100 ? "Excellent" : (varDEVICE >= 80 ? "Good" :
            (varDEVICE >= 60 ? "Fair" : "Weak"))}
          entities:
            - entity: '[[SENSOR_DEVICE_STATUS]]'
              name: MQTT
              styles:
                width: 23px
            - entity: '[[SENSOR_DEVICE_WIFI_CONNECT_COUNT]]'
              name: WiFi
              styles:
                width: 23px
            - entity: '[[SENSOR_DEVICE_SIGNAL]]'
              name: Signal
              styles:
                width: 48px
            - entity: '[[SENSOR_DEVICE_RSSI]]'
              name: RSSI
              styles:
                width: 38px
  decl_test_david_2:
    card:
      type: 'custom:config-template-card'
      variables:
        varDEVICE: 'parseFloat(states[''[[SENSOR_DEVICE]]''].state)'
      entities:
        - '[[SENSOR_DEVICE]]'
        - '[[VALUE_DEVICE_NAME]]'
        - '[[SENSOR_DEVICE_STATUS]]'
        - '[[SENSOR_DEVICE_WIFI_CONNECT_COUNT]]'
        - '[[SENSOR_DEVICE_SIGNAL]]'
        - '[[SENSOR_DEVICE_RSSI]]'
      card:
        type: 'custom:mod-card'
        style:
          multiple-entity-row:
            $:
              hui-generic-entity-row: |
                .entities-row div.entity:nth-child(1) div::before {
                  {% if states('[[SENSOR_DEVICE]]')|int >= 100 %}
                  color: green;
                  content: "Excellent\A";
                  {% elif states('[[SENSOR_DEVICE]]')|int >= 80 %}
                  color: orange;
                  content: "Good\A";
                  {% elif states('[[SENSOR_DEVICE]]')|int >= 60 %}
                  color: red;
                  content: "Fair\A";
                  {% else %}
                  color: magenta;
                  content: "Weak\A";
                  {% endif %}
                  line-height: var(--mdc-typography-body1-line-height, 1.5rem);
                  text-align: center;
                  white-space: pre;
                }
                .entities-row div.entity:nth-child(1) div {
                  color: transparent;
                  line-height: 0px;
                }
        card:
          type: 'custom:multiple-entity-row'
          entity: '[[SENSOR_DEVICE]]'
          show_state: false
          name: '[[VALUE_DEVICE_NAME]]'
          icon: >-
            ${varDEVICE >= 100 ? "mdi:wifi" : (varDEVICE >= 80 ?
            "mdi:wifi-strength-3" : (varDEVICE >= 60 ? "mdi:wifi-strength-2" :
            "mdi:wifi-strength-1")) }
          secondary_info: last-changed
          entities:
            - entity: '[[SENSOR_DEVICE]]'
              name: Quality
              styles:
                width: 55px
            - entity: '[[SENSOR_DEVICE_STATUS]]'
              name: MQTT
              styles:
                width: 23px
            - entity: '[[SENSOR_DEVICE_WIFI_CONNECT_COUNT]]'
              name: WiFi
              styles:
                width: 23px
            - entity: '[[SENSOR_DEVICE_SIGNAL]]'
              name: Signal
              styles:
                width: 48px
            - entity: '[[SENSOR_DEVICE_RSSI]]'
              name: RSSI
              styles:
                width: 38px

Both templates use the "config-template-card":

For displaying an icon dependingly on the state.
For displaying those “Excellent” etc words in the "secondary-info" section (the 1st template).

Alternatively you may change the icon in the Config in an "icon_template" section (if possible).

How to use the templates:

type: entities
entities:
  - type: 'custom:decluttering-card'
    template: decl_test_david
    variables:
      - SENSOR_DEVICE: sensor.test_david_1_device
      - VALUE_DEVICE_NAME: Coffee
      - SENSOR_DEVICE_STATUS: sensor.test_david_1_device_status
      - SENSOR_DEVICE_WIFI_CONNECT_COUNT: sensor.test_david_1_wifi_connect_count
      - SENSOR_DEVICE_SIGNAL: sensor.test_david_1_signal
      - SENSOR_DEVICE_RSSI: sensor.test_david_1_rssi

How it looks like on desktop (Chrome) for both templates:

How it looks like in iPhone 5s (Safari):

Since the 2nd option is a kind of trick, I would recommend you to use the 1st option - it is more reliable.
Of course, those "::before" & "content" CSS things are supported with many browsers, but you decide yourself which option to choose.

P.S. I really like the "multiple-entity-row" - but it does not show "last-changed" for every item, this is rather important for me.

DavidFW1960 · April 14, 2021, 10:23pm

Omg!!!

I will give it a whirl. I do like the look of the second one and I don’t need secondary_info but can just leave that off… I will report back

THANK YOU

Ildar_Gabdullin · April 14, 2021, 10:26pm

David, welcome!

If you decide to proceed with the 2nd option - consider changing the icon in the sensor itself (Config → icon_template) and then do not use the "config-template-card".
You may even decide to create a new template sensor with values “Excellent” etc instead of using those "::before" & "content" CSS things. Then the "card-mod" will be used only for colourizing the “Excellent” etc column.
The simpler - the better, I think…

DavidFW1960 · April 15, 2021, 12:35am

Ummm… why? I don’t see an option to do that. The sensor is created by the Tasmota integration.

Hmm yes but why?

DavidFW1960 · April 15, 2021, 1:20am

Tried this:

decluttering_templates:
  dec_sonoff:
    card:
      type: 'custom:config-template-card'
      variables:
        varDEVICE: 'parseFloat(states[''[[SENSOR_DEVICE_RSSI]]''].state)'
      entities:
        - '[[SENSOR_DEVICE]]'
        - '[[VALUE_DEVICE_NAME]]'
        - '[[SENSOR_DEVICE_STATUS]]'
        - '[[SENSOR_DEVICE_WIFI_CONNECT_COUNT]]'
        - '[[SENSOR_DEVICE_SIGNAL]]'
        - '[[SENSOR_DEVICE_RSSI]]'
      card:
        type: 'custom:mod-card'
        style:
          multiple-entity-row:
            $:
              hui-generic-entity-row: |
                .entities-row div.entity:nth-child(1) div::before {
                  {% if states('[[SENSOR_DEVICE_RSSI]]')|int >= 100 %}
                  color: green;
                  content: "Excellent\A";
                  {% elif states('[[SENSOR_DEVICE_RSSI]]')|int >= 80 %}
                  color: orange;
                  content: "Good\A";
                  {% elif states('[[SENSOR_DEVICE_RSSI]]')|int >= 60 %}
                  color: red;
                  content: "Fair\A";
                  {% else %}
                  color: magenta;
                  content: "Weak\A";
                  {% endif %}
                  line-height: var(--mdc-typography-body1-line-height, 1.5rem);
                  text-align: center;
                  white-space: pre;
                }
                .entities-row div.entity:nth-child(1) div {
                  color: transparent;
                  line-height: 0px;
                }
        card:
          type: 'custom:multiple-entity-row'
          entity: '[[SENSOR_DEVICE]]'
          show_state: false
          name: '[[VALUE_DEVICE_NAME]]'
          icon: >-
            ${varDEVICE >= 100 ? "mdi:wifi" : (varDEVICE >= 80 ?
            "mdi:wifi-strength-3" : (varDEVICE >= 60 ? "mdi:wifi-strength-2" :
            "mdi:wifi-strength-1")) }
          secondary_info: last-changed
          entities:
            - entity: '[[SENSOR_DEVICE]]'
              name: Quality
              styles:
                width: 55px
            - entity: '[[SENSOR_DEVICE_STATUS]]'
              name: MQTT
              styles:
                width: 23px
            - entity: '[[SENSOR_DEVICE_WIFI_CONNECT_COUNT]]'
              name: WiFi
              styles:
                width: 23px
            - entity: '[[SENSOR_DEVICE_SIGNAL]]'
              name: Signal
              styles:
                width: 48px
            - entity: '[[SENSOR_DEVICE_RSSI]]'
              name: RSSI
              styles:
                width: 38px
type: entities
entities:
  - type: 'custom:decluttering-card'
    template: dec_sonoff
    variables:
      - SENSOR_DEVICE: sensor.coffee_maker_firmware
      - VALUE_DEVICE_NAME: Coffee
      - SENSOR_DEVICE_STATUS: sensor.coffee_maker_status
      - SENSOR_DEVICE_WIFI_CONNECT_COUNT: sensor.sonoff1_2914_wifi_connect_count
      - SENSOR_DEVICE_SIGNAL: sensor.sonoff1_2914_signal
      - SENSOR_DEVICE_RSSI: sensor.sonoff1_2914_rssi

And get this:

I cut and pasted all those entities into dev-tools states and they are all there

Ildar_Gabdullin · April 15, 2021, 8:09am

I see… Of course, you may create a template sensor which repeats the original one. But may be using the "config-template-card" is better - you decide!
I heard that using custom cards with templating based on JS, Ninjia2 needs more CPU usage, and this may be crucial on slow systems.

This is just an option.
I’m afraid that using "card-mod" for some particular card one day may stop working - just because an internal structure of the card is changed. So I prefer to choose a “usual” way of doing something rather than those CSS tricks with "::after", "::before" & "content".

Regarding “Cannot read property”.
Do you have the "decluttering-card" & "card-mod" installed?

Also, I see that the template & the card are in one “code page” - are they in one file?
In GUI mode (which is not yaml mode) the template must be before the “dashboard” section, and the code for a card must be inside some “view” section.

DavidFW1960 · April 15, 2021, 8:38am

Ah that will explain it. I have them exactly as shown and both are installed. So I need to move the template to the top?
I use GUI mode but store and edit the raw file.
So I need to move the template above view:

title: Home
swipe_nav:
  wrap: true
  animate: swipe        # could also use fade or flip
  swipe_amount: 15
views:

Here?

DavidFW1960 · April 15, 2021, 8:44am

Oh yeah that works…
Template 1

I probably need to adjust the spacing for portrait mode but I will have a go at this tomorrow and template 2 as well…

Ildar_Gabdullin · April 15, 2021, 9:44am

Like this:

decluttering_templates:
  decl_test_david:
    card:
      type: 'custom:config-template-card'
      .................
views:
  - title: '-----'
    path: '-----'
    badges: []
    cards:
      - type: entities
        entities:
          - entity: sensor.test_timestamp
            format: total
            ...................

Ildar_Gabdullin · April 15, 2021, 10:49am

Also, David, if you like, you may display "last-changed" for every item:

DavidFW1960 · April 15, 2021, 10:52am

Thanks but it’s not really useful for my use here… the signal and RSSI jump around like a drunken sailor…

SeLLeRoNe · April 15, 2021, 10:59am

I have actually a question here… Where (or how) did you get that _firmware entity?
I’ve checked my Tasmota Integration and I don’t have such entity (not even in the disabled list).

I’m trying to replicate your same config (the goal was to provide you an even more shorter amount of code), but I am struggling to find that piece (not really important, but now I’m curious )

Thanks

DavidFW1960 · April 15, 2021, 11:16am

Hahaha! It’s a hack. I think it’s STATUS2 and I publish that to the group topic and then use a mqtt sensor with json_attributes to read it it. It’s an upper PITA compared to the old MQTT discovery method. Check my github for the githun_sensors package. home-assistant/github_version_sensors.yaml at 81d01e00944884a724ef5deaa5af0a2a0f41c056 · DavidFW1960/home-assistant · GitHub Line 111…

SeLLeRoNe · April 15, 2021, 11:21am

Ah! That’s what I thought!

Thanks!

DavidFW1960 · April 15, 2021, 11:29am

I do a status 11 as well because that returns interesting info as well… even though the state I’m getting is the same as one of the ones provided by the integration - but if I use that then when I click on the row I get all the other info as well in the pop up as I showed way up above… (I’m only saying this because it’s not immediately obvious why I’m doing that so if you suggest a new config just remember my end goal is the information in the pop ups as well as the formatting of the rssi etc)