šŸ”¹ Card-mod - Add css styles to any lovelace card

May be I am wrong, then please correct me.
Regarding changing icon dynamically - there are 4 options:

  1. icon_template in template sensor.
  2. Custom UI (my guess since I know a little about it) for particular sensor.
  3. card-mod for particular sensor (using --card-mod-icon variable - but it does not work in some cases).
  4. Templating using config-template-card, template-entity-row (again my guess).

Cases 1,2 - require calculations on server side.
Cases 3,4 - require calculations on client side.
Am I right?
Sometimes a server is weak, sometimes a client is.

no not exactly.

custom-ui is completely browser side (well, except for templates that use other entities) Thats why there is no burden on the processor usage using that. JS templates are used

custom button-card uses the same js templates, hence the beauty of it on the RPi :wink:

of course, regular template sensors, in all variations use backend computations, and burden the processor.

card-mod uses jinja templates too, which , again, use backend capacity, server side. I must confess I am not 100% certain, because this is done in Lovelace, which is frontend of courseā€¦ still, jinja is backend server side. Would love to hear from the devā€™s on this. to be certain.

I suppose the same would go for all the custom cards that use jinja. backend computations.

I have RPi 3 as a HA server, iPhone 5S, iPad Air 2.
When browsing HA on a rather powerful PC, sometimes there are freezes on pages with card-mod, markdown.
When browsing on iPhone 5S companion HA app, it simply may not display a page at all - but sometimes does display. And these freezes happen less often on iPad Air 2.

For test purpose, I ran HA in VmWare on that powerful PC - and I saw no freezes when browsing HA on the same PC, but I still saw same freezes on iPhone 5S and less on iPad Air 2.

Now I do not understand why my mobile clients cause freezes.
So, the best solution is ā€œpowerful server, powerful clientā€ ))).

yep, it can be a balancing act.
from my experience, I can only say the custom-ui customizations fly as quick as one could wish, using up to date iOS devices and regular browsers. The app, they al fare extremely well.

I do have a rather high processor %:

Schermafbeelding 2021-06-27 om 11.23.06

but that doesnā€™t seem to harm anything (especially now I use the Argon ONE case keeping things cool.
And why wouldnā€™t one use the processorā€¦ thatā€™s what itā€™s there for isnt it?

This is on a large (devā€™s say hugeā€¦) RPI4 instance. I have 2 supporting Rpi3 instances, which only have Z-WavejS and MQTT add-ons respectively, and their temp is higher in regular cases, and I canā€™t say they use less percentage really:

So I guess its modern HA core taking its toll too, no matter the measures we take in the configurationsā€¦

Anyone able to assist?

hop over to the dedicated thread for that: šŸ”¹ Card-mod - Super-charge your themes!

another day, another challengeā€¦

trying to create a conditional badge, and it should be added to an existing card-mod. Here, display: none is suggested by Troon, but I canā€™t get it right just yet.

  - entity: sensor.state_badge
    card_mod:
      style: |
        :host {
          display: {% if config.entity is none %}none{%endif%}
        }
        ha-state-label-badge:
          $:
            ha-label-badge:
              $: |
                .badge-container .label-badge {
                  /* Top circle of the Badge (State) */
                  border-style: dashed;
                  border-color: blue;
                  color: grey;
                  background-color: yellow;
                 }
                  /* Label of the Badge (Unit) */
                .badge-container .label-badge .label span {
                  border-style: dotted;
                  border-color: pink;
                  color: red;
                  background-color: green;
                 }
                  /* Below the Badge (Name) */
                .title {
                  color: orange;
                }

So I have two challenges here:

  • on config.entity: the config.entity is none template doesnt work, (while a test in dev tools does work) tried config.entity.entity_id etc. if not config.entity which should be valid, same effect: Keep getting
    Schermafbeelding 2021-06-29 om 10.00.31

  • how to combine the display: none template with the other card_mod config settingsā€¦

as an example, this does work:

    card_mod:
      style: |
        :host {
          display: {% if states('binary_sensor.updater') == 'off' %} none {% endif %}
        }

thanks for having a look

Marius,

  1. Wrong placement for ":host" style.
  2. Should be is_state(config.entity, ā€œnoneā€).
  3. Wrong expression for "display" style.
        card_mod:
          style:
            ha-state-label-badge:
              $:
                ha-label-badge:
                  $: |
                    .badge-container .label-badge {
                      border-style: dashed;
                      border-color: blue;
                      color: grey;
                      background-color: yellow;
                     }
                    .badge-container .label-badge .label span {
                      border-style: dotted;
                      border-color: pink;
                      color: red;
                      background-color: green;
                     }
                    .title {
                      color: orange;
                    }
            .: |
              :host {
                {% if is_state(config.entity,"none") %} display: none; {% endif %}
              }

ŠøŠ·Š¾Š±Ń€Š°Š¶ŠµŠ½ŠøŠµ

1 Like

thanks, and indeed, I can now use the 2 templates. Finally see and understand the use of .: | ā€¦

still, the test for existence doesnt work:

Schermafbeelding 2021-06-29 om 13.17.23

Simply try it on an incorrect entity, and youā€™ll see.
seems the config.entity cant be tested for existence in card-mod, hence 'if config.entity is none' template doesn't work Ā· Issue #134 Ā· thomasloven/lovelace-card-mod Ā· GitHub

Try this, it works in my setup:

{% if states(config.entity) in ['unavailable','unknown','none'] %} display: none; {% endif %}

No that doesnt work either. Did you try to take out a single character of the entity? like binary_sensr.updater ?

That was exactly how I tested - with "sensor.cleargrass_1_co"

well Iā€™ll beā€¦

please dont tell me Ive got another typo here:

  - entity: sensor.state_badg
    card_mod:
      style:
        ha-state-label-badge:
          $:
            ha-label-badge:
              $: |
                .badge-container .label-badge {
                  /* Top circle of the Badge (State) */
                  border-style: dashed;
                  border-color: blue;
                  color: grey;
                  background-color: yellow;
                 }
                  /* Label of the Badge (Unit) */
                .badge-container .label-badge .label span {
                  border-style: dotted;
                  border-color: pink;
                  color: red;
                  background-color: green;
                 }
                  /* Below the Badge (Name) */
                .title {
                  color: orange;
                }
        .: |
          :host {
            display: {% if states(config.entity) in ['unavailable','unknown','none'] %} display: none; {% endif %}
          }

Here is double display word, causes error.

this is what I am trying to replicate with config.entity:

{% if states.binary_sensor.updater is defined %} none {% endif %}

or even better:

{% if states.binary_sensor.updater %} none {% endif %}

both of these work as expected, and likewise with ā€˜not is definedā€™ or is none

Regarding the condition:
if condition = true:

    card_mod:
      style: |
        :host {
          display: none
        }

if condition = false:

    card_mod:
      style: |
        :host {
          display: 
        }

The 2nd expression will not work if using this construction:

          display: {% if config.entity is none %}none{%endif%}

so this works:

      style: |
        :host {
          display: {% if states(config.entity) in ['unknown'] %} none {% endif %}
        }

and this:

      style: |
        :host {
          display: {% if states(config.entity) == 'unknown' %} none {% endif %}
        }

ā€¦ pff now thats a bit of a surprise. I mean, not that these 2 templates do the same. of course they do. but the fact we can not use config.entity, and can not use is none, but need to use the states() of the config.entity, and need to check for 'unknown'

This is anyway wrong conditional check.

A=
if(condition)
  123

What if condition is false? The value A becomes undefinedā€¦
You should specify ā€œelseā€ or put ā€œA=ā€ under the conditionā€™s check.

Seems so:
ŠøŠ·Š¾Š±Ń€Š°Š¶ŠµŠ½ŠøŠµ

yes, thats what I wrote here, and as state there, it seems to work just fine. Have just tested it with this full card-mod, and can confirm once more that is shows when the existence check is positive. (the condition isnā€™t met, iow the states(config.entity) != 'unknown'