Mqtt Light, how to change icon or background?

Configuration
1

Hello, I’m trying to create an Mqtt Light entity. I’m doing the following: In my config.yaml:

mqtt:
  - light:
       name: "Buero"
       unique_id: "Buero"
       command_topic: "modbus/LightButton/set/Buero"
       state_topic: "modbus/LightActualLevel/state/Buero"
       payload_on: "100.0"
       payload_off: "0.0"
       on_command_type: 'first'
       optimistic: false
       state_value_template: "{{ 'on' if value == '100.0' else 'off' }}"

This creates an entity for me which I can also see in the developer tools under States.

entwicklerw
entwicklerw886×778 38.4 KB

Here is my first question, why state Unknown?
I can also control the light with the switch using a small script:

alias: mqttButtonBuero
sequence:
  - service: mqtt.publish
    metadata: {}
    data:
      qos: 0
      retain: false
      topic: modbus/LightButton/set/Buero
      payload: "True"
  - delay:
      hours: 0
      minutes: 0
      seconds: 0
      milliseconds: 200
  - service: mqtt.publish
    metadata: {}
    data:
      qos: 0
      retain: false
      topic: modbus/LightButton/set/Buero
      payload: "False"
mode: single

which is called in the custom:button-card:

type: custom:button-card
name: Mqtt_Button
icon: |
  [[[
    if (states['light.buero'].value == 'on')
    return 'mdi:lightbulb-on-outline';
    else return 'mdi:lightbulb-outline';
  ]]]
tap_action:
  action: call-service
  service: script.mqttbuttonbuero
styles:
  card:
    - background-color: |
        [[[
          if (states['light.buero'].value == 'off')
            return 'red';       
        ]]]

When the button is pressed, the state of the topic changes from 0.0 to 100.0:

pakethoeren
pakethoeren612×570 21.9 KB

And so I thought the custom:button-card would change color.
But it doesn’t, and I can’t figure out why.
Maybe someone can help me.
Best regards,
Patrick

2

Your commands to control the Light are “True” and “False”. These are the payloads you need to define so that is what the integration will send on the command topic.

Then you need to match the returned state mqtt messages that are received on the state topic to these payloads, see:

https://www.home-assistant.io/integrations/light.mqtt/#state_value_template
Screenshot 2024-06-11 at 10-02-15 MQTT Light

Try this:

mqtt:
  - light:
       name: "Buero"
       unique_id: "Buero"
       command_topic: "modbus/LightButton/set/Buero"
       state_topic: "modbus/LightActualLevel/state/Buero"
       payload_on: "True"
       payload_off: "False"
       on_command_type: 'first'
       optimistic: false
       state_value_template: "{{ 'True' if value == '100.0' else 'False' }}"
1 Like
3

Thanks,thats it, now the State changes from off to on.
But how can i change the Icon or background?

type: custom:button-card
name: Mqtt_Button
icon: |
  [[[
    if (states['light.buero'].value == 'on')
    return 'mdi:lightbulb-on-outline';
    else return 'mdi:lightbulb-outline';
  ]]]
tap_action:
  action: call-service
  service: script.mqttbuttonbuero
styles:
  card:
    - background-color: |
        [[[
          if (states['light.buero'].value == 'off')
            return 'red';       
        ]]]

doesn’t work?

4

This should work for you

type: custom:button-card
name: Mqtt_Button
entity: light.buero
icon: |
  [[[ return entity.state === 'on' ? 'mdi:lightbulb-on-outline' : 'mdi:lightbulb-outline';
           ]]]
tap_action:
  action: call-service
  service: script.mqttbuttonbuero
styles:
  card:
    - background-color: |
        [[[ return entity.state === 'on' ? 'grey' : 'red';
           ]]]
1 Like
5

Thank you so much!
The solution is:

mqtt:
  - light:
       name: "Buero"
       unique_id: "Buero"
       command_topic: "modbus/LightButton/set/Buero"
       state_topic: "modbus/LightActualLevel/state/Buero"
       payload_on: "True"
       payload_off: "False"
       on_command_type: 'first'
       optimistic: false
       state_value_template: "{{ 'True' if value == '100.0' else 'False' }}"

And my Card:

type: custom:button-card
name: Mqtt_Button
entity: light.buero
icon: >
  [[[ return entity.state === 'on' ? 'mdi:lightbulb-on-outline' :
  'mdi:lightbulb-outline';
           ]]]
tap_action:
  action: call-service
  service: script.mqttbuttonbuero
styles:
  card:
    - background-color: |
        [[[ return entity.state === 'on' ? 'grey' : 'red';
           ]]]
1 Like