Change text of the the entity using card_mod

Configuration Frontend
1

I’m trying to update/change the text of the entity of card using card-mod.
I managed to do the icon and color change but not sure how to do update the text.

 - type: entities
    entities:
      - entity: switch.momentary_garage_door_open
        icon: mdi:garage-open
        name: Garage door open
        state_color: false
        card_mod:
          style: |
            :host {
              {% if states('binary_sensor.zone_9')=='off' %}
                --card-mod-icon-color: rgba(70,113,148,255);
                --card-mod-icon: mdi:garage-lock;
              {% else %}
                --card-mod-icon-color: rgba(254,195,7,255);
                --card-mod-icon: mdi:garage-open;
              {% endif %};
            }

for example when {% if states('binary_sensor.zone_9')=='off' %} then the the text of the entity should be ‘door is close’
while for the other state … ’ door is open’
any idea what property should I use in the card-mod schema to switch the text.
I have tried ‘name’ and ‘content’ but that doesn’t work.

2

card-mod is about CSS, so style, not content.

if you want to change the state of the entity (the part on the right) then it is already included in the binary_sensor depending on class

e.g.: if class is door, the state will be open and closed

But In your configuration, you are using a switch so …

What I would do but I’m the king of workaround (you are warned):

  1. Create a binary_sensor, class “door”.
  2. Create an automation that
    a. if the switch is turned on(resp. off), it on (resp. off) the binary_sensor
    b. if the binary_sensoris turned on(resp. off), it on (resp. off) the switch

If you want to change the text of the entity itself (on the left), I’ve no solution for you.

P.S.: I know about virtual switch but it is still confusing me.

3

I’m guessing you are trying to do this?

image

Simple to do with mushroom cards - here’s my Garage Door tile :

type: custom:mushroom-template-card
primary: |2-
         {% if is_state('sensor.garage_door_status','open') %}
              Door Open
            {% else %}
              Door Closed
            {% endif %}
secondary: ''
icon: |2-
         {% if is_state('sensor.garage_door_status','open') %}
              mdi:garage-open
            {% else %}
              mdi:garage
            {% endif %}
entity: sensor.garage_door_status
icon_color: |2-
         {% if is_state('sensor.garage_door_status','open') %}
              red
            {% else %}
              grey
            {% endif %}
tap_action:
  action: more-info

Hope this helps :slight_smile:

4

:frowning: yes, I’m looking for the second option … on the left which is the name

5

Exactly… but it seems to be not working for entities :frowning: have you tried that ?

6

Not tried that - I just use the mushroom template card I’m afraid :frowning:

7

I’ve a solution but it is a terrible workaround.
You create 2 sensors (instead of one)
Exactly the same solution as my first post.
But name one “Door closed”, the other one “Door open”.
Then you can do a conditional card, which will display one or the other depending on state. (told you I was the king of workarounds)

1 Like
8

in my opinion, you’re going about this the wrong way. binary_sensor domain has a series of device_classes that support different icon and state names without any coding.

The benefit of going these 2 routes is that, no matter what, your entity will have a state of Open or Closed in your native language, everywhere in the UI. Not just 1 single spot.

Option 1

You can customize this via yaml…

homeassistant:
  customize:
    binary_sensor.zone_9:
      friendly_name: Garage Door
      device_class: garage

Then just just put that in your entities card.

  - type: entities
    entities:
      - entity: binary_sensor.zone_9
        state_color: false
        tap_action:
          action: call-service
          service: switch.toggle
          data:
            entity_id: switch.momentary_garage_door_open
        card_mod:
          style: |
            :host {
              {% if is_state('binary_sensor.zone_9', 'off') %}
                --card-mod-icon-color: rgba(70,113,148,255);
              {% else %}
                --card-mod-icon-color: rgba(254,195,7,255);
              {% endif %};
            }

Option 2

Your other option is to make a template sensor that uses zone_9.

template:
- binary_sensor:
  - name: Garage Door
    device_class: garage
    state: "{{ states('binary_sensor.zone_9') }}"
    attributes:
      color: >
        rgba({{ iff(is_state('binary_sensor.zone_9', 'on'), '254,195,7', '70,113,148') }},255)

Then use that in your frontend.

   - type: entities
    entities:
      - entity: binary_sensor.garage_door
        state_color: false
        tap_action:
          action: call-service
          service: switch.toggle
          data:
            entity_id: switch.momentary_garage_door_open
        card_mod:
          style: |
            :host {
              --card-mod-icon-color: {{ state_attr('binary_sensor.garage_door', 'color') }};
            }
2 Likes
9

Another option if you haven’t seen it is:

This would let you template the name, for example, on the entity and get you what you’re after?

10

Hi Petro,
thanks for the suggestions but I don’t want to tamper binary_zone.9 sensor. It is just a cue of what name the garage door (momentary switch) should have

image
image1353×350 12 KB

In the below picture the same toggle will be used but the label (name) should now change to ‘Garage door is closed’ instead of ‘Garage door open’ since the name is static that is why its displaying that.

image
image1348×360 11.5 KB

I’m leaning towards card-templater

Some how name_template is not working :frowning:

11

End up using this

type: custom:card-templater
card:
  type: entities
  entities:
    - entity: switch.momentary_garage_door_open
      icon: mdi:garage-open
      state_color: true
      card_mod:
        style: |
          :host {
              {% if states('binary_sensor.zone_9')=='off' %}
                --card-mod-icon-color: rgba(70,113,148,255);
                --card-mod-icon: mdi:garage-lock;
              {% else %}
                --card-mod-icon-color: rgba(254,195,7,255);
                --card-mod-icon: mdi:garage-open;
              {% endif %};
            }
      name_template: |-
        {% if states('binary_sensor.zone_9')=='off' %}
            Garage is close
        {% else %}
           Garege is open
        {% endif %}
entities:
  - switch.momentary_garage_door_open
  - binary_sensor.zone_9

However, I’m not happy as card-templater is slow, I wish card-mod could accommodate this simple name issue.

12

I don’t even understand why you’re doing this when you have

image
image781×217 12.2 KB

You can simply add a tap action to that icon and it will open and close the garage door without the need for that extra entity row or this template.

13

It was a tap action previously. Now that I can control HA via Android auto, at times the tap action is not registered and I end up standing in the drive way and opening it. By momentary switch it’s more reliable.

14

Just pull down on the page to refresh and it’ll work again

15

what I meant was the tapping the icon on the vehicle screen at time shows that its been tapped but its not which at times me tapping it twice which reverses the door action, hence, the switch.

Irrespective of that I don’t see why so many other things can be customized on the entity card and not the one that I needed :frowning:

16

The switch will have the same behavior. As soon as it flips state, it’ll bounce back because the sensor will not change.

17

Its a toggle switch

switch:
  - platform: momentary
    name: garage door open
    mode: "on"
    toggle_for: 2
    cancellable: True

the automation script run when its toggle

alias: Garage door open
description: ""
trigger:
  - platform: state
    entity_id:
      - switch.momentary_garage_door_open
    for:
      hours: 0
      minutes: 0
      seconds: 0
    to: "on"
condition: []
action:
  - service: script.disarm_garage_sequence
    data: {}
    enabled: true
mode: single

And on the vehicle screen I can see that switch has been toggled. Hope this makes sense.