Is someone able to provide the code for make an icon chnage colour depending if its a negative or positive?
I can do the icon colour changing part, just dont know how to the negative or positive??
Thanks
You can’t change colors of icons in native home assistant. This requires custom frontend cards, like card mod.
1 Like
not even using a template inside a card. Im doing the below inside the mushroom chips
type: custom:mushroom-chips-card
chips:
- type: template
entity: alarm_control_panel.aarlo_arlo_hub
icon: |
{% set state=states('alarm_control_panel.aarlo_arlo_hub') %}
{% if state=='disarmed' %}
mdi:shield-off
{% elif state=='armed' %}
mdi:shield-lock
{% else %}
mdi:shield-alert-outline
{% endif %}
icon_color: |-
{% set state=states('alarm_control_panel.aarlo_arlo_hub') %}
{% if state=='disarmed' %}
red
{% elif state=='armed' %}
green
{% else %}
red
{% endif %}
content: |-
{% set state=states('alarm_control_panel.aarlo_arlo_hub') %}
{% if state=='disarmed' %}
Arlo Disarmed
{% elif state=='armed' %}
Arlo Armed
{% else %}
Unavailable
{% endif %}
tap_action:
action: more-info
- type: template
entity: binary_sensor.garage_door_status
icon: |
{% set state=states('binary_sensor.garage_door_status') %}
{% if state=='off' %}
mdi:garage-variant-lock
{% elif state=='on' %}
mdi:garage-open-variant
{% else %}
mdi:garage-alert-variant
{% endif %}
icon_color: |-
{% set state=states('binary_sensor.garage_door_status') %}
{% if state=='off' %}
green
{% elif state=='on' %}
red
{% else %}
orange
{% endif %}
content: |-
{% set state=states('binary_sensor.garage_door_status') %}
{% if state=='off' %}
Garage Closed
{% elif state=='on' %}
Garage Open
{% else %}
Neither
{% endif %}
tap_action:
action: call-service
service: browser_mod.popup
service_data:
large: false
hide_header: false
title: Open/Close Garage Door?
card:
type: custom:mushroom-entity-card
entity: switch.garage_door_opener
tap_action:
action: call-service
service: switch.toggle
service_data: {}
target:
entity_id: switch.garage_door_opener
1 Like
Im trying to have so when the number in the entity goes to a negative, that the icon changes Green and when its positive its red
type: entity
entity: sensor.power_to_from_grid
icon_color: |-
{% set state = states('sensor.power_to_from_grid') %}
{% if is_number(state) and (state | float < 1 and state | float > 0) %}
Green
{% elif is_number(state) and state | float < 0 %}
Blue
{% else %}
Red
{% endif %}
That’s a custom card, it may allow for that. Again, that’s not native home assistant.
yeah i get that dude?
im just asking for some help to complete this template
Yes, I’m looking at the docs to see if those fields allow templates. give me a moment. Not everything allows templates. Unfortunately, the documentation for these cards is rather lacking.
First thing I notice is that you’re using capitals for your colors. You’ll want to use lowercase.
1 Like
So, looking at the docs, you have to use template type. the other types do not accept templates. so the type entity will not work, that’s your first problem.
Then when using the template card…
type: template
icon: "{{ state_attr('sensor.power_to_from_grid', 'icon') }}"
icon_color: >
{% set state = states('sensor.power_to_from_grid') %}
{% if state | is_number and 0 < state | float < 1 %}
green
{% elif state | is_number and state | float < 0 %}
blue
{% else %}
red
{% endif %}
it’s not clear if the template card accepts entity, if it does, you can remove the icon: and it’s template and supplement it with entity: ...
ok way off lol
im just stumbing in the dark here with templates… I have lost the number? is there a way to see the number next to the icon pls??
see my previous response
1 Like
well, assuming it’s just a templating card…
type: template
icon: "{{ state_attr('sensor.power_to_from_grid', 'icon') }}"
icon_color: >
{% set state = states('sensor.power_to_from_grid') %}
{% if state | is_number and 0 < state | float < 1 %}
green
{% elif state | is_number and state | float < 0 %}
blue
{% else %}
red
{% endif %}
primary: "{{ state_attr('sensor.power_to_from_grid', 'friendly_name') }}"
secondary: "{{ states('sensor.power_to_from_grid') }}"
its inside a Mushroom Chip card. I have highlighted the bold part im adding the template code to
type: vertical-stack
title: Todays Energy Overview
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.daily_solar_energy_produced_converted_to_kwh
icon: mdi:solar-power
icon_color: orange
tap_action:
action: call-service
service: browser_mod.popup
service_data:
large: false
title: Daily Solar Produced
card:
type: vertical-stack
cards:
- type: energy-date-selection
- type: custom:tesla-style-solar-power-card
name: My Current Energy Flow
grid_to_house_entity: sensor.power_to_from_grid
house_consumption_entity: sensor.power_consumed
grid_consumption_entity: sensor.power_to_from_grid
generation_to_house_entity: sensor.inverter_utilisation
house_extra_entity: sensor.average_downstairs_temperature_rounded
generation_extra_entity: sensor.openweathermap_cloud_coverage
generation_icon: mdi:solar-power
grid_entity: sensor.power_to_from_grid
house_entity: sensor.power_consumed_as_a_negative
generation_entity: sensor.inverter_utilisation
- type: energy-sources-table
title: Energy sources table
- type: vertical-stack
cards:
- type: energy-solar-graph
title: Solar Production Graph
- type: custom:mushroom-title-card
subtitle: >-
The solar production graph card shows the amount of
energy your solar panels have produced per source, and
if setup and available the forecast of the solar
production.
- type: vertical-stack
cards:
- type: energy-usage-graph
title: Energy Usage
- type: custom:mushroom-title-card
subtitle: >-
The energy usage graph shows per hour how much energy
you used from the grid, how much energy you produced and
how much of that energy went back to the grid.
- type: energy-distribution
title: Energy distribution
link_dashboard: true
hold_action:
action: call-service
service: browser_mod.popup
service_data:
large: true
title: Daily Solar Produced
card:
type: custom:tesla-style-solar-power-card
name: Where does my Solar Enegy Go?
grid_to_house_entity: sensor.power_to_from_grid
house_consumption_entity: sensor.power_consumed
grid_consumption_entity: sensor.power_to_from_grid
generation_to_house_entity: sensor.inverter_utilisation
house_extra_entity: sensor.average_downstairs_temperature_rounded
generation_extra_entity: sensor.openweathermap_cloud_coverage
generation_icon: mdi:solar-power
grid_entity: sensor.power_to_from_grid
house_entity: sensor.power_consumed_as_a_negative
generation_entity: sensor.inverter_utilisation
- type: entity
entity: sensor.metered_real_energy_consumed_converted_to_kwh
icon: mdi:transmission-tower-import
icon_color: red
- type: entity
entity: sensor.metered_real_energy_produced_converted_to_kwh
icon: mdi:transmission-tower-export
icon_color: green
- type: entity
entity: sensor.net_grid_total_converted_to_kwh
icon_color: green
icon: mdi:transmission-tower
**- type: entity**
** entity: sensor.power_to_from_grid**
** icon_color: >-**
** {% set state = states('sensor.power_to_from_grid') %}**
** {% if is_number(state) and (state | float < 1 and state | float > 0)**
** %}**
** Green**
** {% elif is_number(state) and state | float < 0 %}**
** Blue**
** {% else %}**
** Red**
** {% endif %}**
alignment: justify
- type: energy-distribution
link_dashboard: true
yes and? Have you tried using what I just responded with?
Sorry, you’re going to have to bare with me here because there’s 0 documentation on how to configure a chip properly, and he has 8 chips that can be configured. I can’t tell if they mirror the cards or not.
mate no need to apologise
I wish i knew what i was doing or understood half of this lol
so the number is back but i lost the icon
type: vertical-stack
title: Todays Energy Overview
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.daily_solar_energy_produced_converted_to_kwh
icon: mdi:solar-power
icon_color: orange
tap_action:
action: call-service
service: browser_mod.popup
service_data:
large: false
title: Daily Solar Produced
card:
type: vertical-stack
cards:
- type: energy-date-selection
- type: custom:tesla-style-solar-power-card
name: My Current Energy Flow
grid_to_house_entity: sensor.power_to_from_grid
house_consumption_entity: sensor.power_consumed
grid_consumption_entity: sensor.power_to_from_grid
generation_to_house_entity: sensor.inverter_utilisation
house_extra_entity: sensor.average_downstairs_temperature_rounded
generation_extra_entity: sensor.openweathermap_cloud_coverage
generation_icon: mdi:solar-power
grid_entity: sensor.power_to_from_grid
house_entity: sensor.power_consumed_as_a_negative
generation_entity: sensor.inverter_utilisation
- type: energy-sources-table
title: Energy sources table
- type: vertical-stack
cards:
- type: energy-solar-graph
title: Solar Production Graph
- type: custom:mushroom-title-card
subtitle: >-
The solar production graph card shows the amount of
energy your solar panels have produced per source, and
if setup and available the forecast of the solar
production.
- type: vertical-stack
cards:
- type: energy-usage-graph
title: Energy Usage
- type: custom:mushroom-title-card
subtitle: >-
The energy usage graph shows per hour how much energy
you used from the grid, how much energy you produced and
how much of that energy went back to the grid.
- type: energy-distribution
title: Energy distribution
link_dashboard: true
hold_action:
action: call-service
service: browser_mod.popup
service_data:
large: true
title: Daily Solar Produced
card:
type: custom:tesla-style-solar-power-card
name: Where does my Solar Enegy Go?
grid_to_house_entity: sensor.power_to_from_grid
house_consumption_entity: sensor.power_consumed
grid_consumption_entity: sensor.power_to_from_grid
generation_to_house_entity: sensor.inverter_utilisation
house_extra_entity: sensor.average_downstairs_temperature_rounded
generation_extra_entity: sensor.openweathermap_cloud_coverage
generation_icon: mdi:solar-power
grid_entity: sensor.power_to_from_grid
house_entity: sensor.power_consumed_as_a_negative
generation_entity: sensor.inverter_utilisation
- type: entity
entity: sensor.metered_real_energy_consumed_converted_to_kwh
icon: mdi:transmission-tower-import
icon_color: red
- type: entity
entity: sensor.metered_real_energy_produced_converted_to_kwh
icon: mdi:transmission-tower-export
icon_color: green
- type: entity
entity: sensor.net_grid_total_converted_to_kwh
icon_color: green
icon: mdi:transmission-tower
- type: entity
entity: sensor.power_to_from_grid
icon: "{{ state_attr('sensor.power_to_from_grid', 'icon') }}"
icon_color: >
{% set state = states('sensor.power_to_from_grid') %}
{% if state | is_number and 0 < state | float < 1 %}
green
{% elif state | is_number and state | float < 0 %}
blue
{% else %}
red
{% endif %}
primary: "{{ state_attr('sensor.power_to_from_grid', 'friendly_name') }}"
secondary: "{{ states('sensor.power_to_from_grid') }}"
alignment: justify
- type: energy-distribution
link_dashboard: true
reading the code… it looks like this is what the config needs to be:
- type: template
icon: "{{ state_attr('sensor.power_to_from_grid', 'icon') }}"
icon_color: >
{% set state = states('sensor.power_to_from_grid') %}
{% if state | is_number and 0 < state | float < 1 %}
green
{% elif state | is_number and state | float < 0 %}
blue
{% else %}
red
{% endif %}
content: "{{ states('sensor.power_to_from_grid') }}"
1 Like
yeah sorry!