Edit: Decided to change the icon colour instead which was quick and easy. Marking this as solved
Hi, hoping I’ve missed a simple error in this or approach. I have my graphs appearing well in my button cards. The bit I am hoping to achieve is to have the lines change colour when the motion sensor is active in the room. A simple teal when empty, orange when motion detected.
There are other dynamic elements to the cards, and they work just fine but I can’t for the life of me sort out how to add in this change.
type: custom:swipe-card
card_mod:
style: |
ha-card {
--ha-card-background: rgba(0, 0, 0, 0.2);
color: var(--primary-color);
}
resources:
- url: /local/custom_icon.js
type: module
cards:
- type: custom:button-card
entity: automation.livingroom_lights
show_icon: false
tap_action:
action: call-service
service: automation.trigger
service_data:
entity_id: automation.livingroom_lights
double_tap_action:
action: navigate
navigation_path: '#livingroom'
name: Living Room
styles:
card:
- border-radius: 20px
- border-style: none
- box-shadow: 0px 0px 10px -9px black
custom_fields:
icon_cells:
- justify-self: start
- margin-top: 12px
- margin-left: 15px
devices:
- justify-self: end
- margin-right: 10px
- margin-top: '-17px'
temp:
- filter: opacity(80%)
- justify-self: start
- margin-left: 10px
- margin-top: '-2px'
- padding-bottom: 10%
graph:
- padding-top: 0%
- width: 100%
- height: 0%
- margin-bottom: '-1%'
icon:
- width: 25px
- color: auto
name:
- font-size: 90%
- font-weight: bold
- justify-self: start
- margin-top: 6px
- margin-left: 12px
grid:
- grid-template-areas: '"icon_cells devices" "n n" "temp temp" "graph graph"'
- grid-template-columns: 1fr min-content
- grid-template-rows: 1fr min-content min-content min-content
custom_fields:
icon_cells: |
[[[
return `<ha-icon
icon="mdi:sofa-outline"
style="width: 25px; height: 25px; color: auto;">
</ha-icon>
`
]]]
devices: |
[[[
var codeBlk = "";
if (states['light.f1_livingroom_fairylights'].state == 'on')
codeBlk = codeBlk + " " + `<ha-icon
icon="mdi:string-lights"
style="width: 23px; height: 23px; color: auto;">
</ha-icon>
`;
if (states['media_player.video_receiver'].state == 'playing')
codeBlk = codeBlk + " " + `<ha-icon
icon="mdi:television"
style="width: 23px; height: 23px; color: auto;">
</ha-icon>
`;
return codeBlk;
]]]
temp: |
[[[
return `<ha-icon
icon="mdi:thermometer"
style="width: 19px; height: 21px; color: #DC0000;">
</ha-icon><span style="font-size:75%; font-weight: normal;">
${states['sensor.f1_livingroom_temp'].state}°C</span>
<ha-icon
icon="mdi:water-percent"
style="width: 19px; height: 21px; color: #1F8A70;">
</ha-icon><span style="font-size:75%; font-weight: normal; text-align: center;">
${states['sensor.f1_livingroom_humidity'].state}%</span>`
]]]
graph:
card:
type: custom:mini-graph-card
entities:
- entity: sensor.f1_livingroom_temp
line_color: blue
color: '#ff7f24'
line_width: 6
show:
icon: false
name: false
legend: false
state: false
lower_bound: 15
card_mod:
style: |
ha-card {
background: none;
border-style: none;
margin-top: -40px;
}
That’s the card and my attempt to edit colour is
line_color: |-
{% if is_state('light.f1_livingroom_fairylights', 'on) %}
orange
{% else %}
teal
{% endif %}
With the light sensor acting as a placeholder while I experiment.
Thanks for any advice