martikainen
August 30, 2019, 3:49pm
2139
How would I change this template code to apply different icons/colors based on different states?
Take this washer as an examle, it has 3 different states, Off, Running and Clean.
washer: >
[[[
var icon = states['input_select.diskmaskin_status'].state === 'Off' ? 'mdi:dishwasher' : 'mdi:dishwasher';
var icon_color = states['input_select.diskmaskin_status'].state === 'Running' ? 'yellow' : 'grey';
return '<ha-icon icon="' + icon +'" style="width: 40px; color:' + icon_color +';"></ha-icon>'
]]]
yoni3210
August 30, 2019, 4:48pm
2140
Looks great! Would you mind sharing the code?
1 Like
That’s how I would do it.
washer: >
[[[
var icon = 'mdi:dishwasher';
var icon_color = 'grey'; // Off
if (states['input_select.diskmaskin_status'].state === 'Running') icon_color = 'yellow';
else if (states['input_select.diskmaskin_status'].state === 'unavailable') icon_color = 'black';
return `<ha-icon icon="${icon}" style="width: 40px; color: ${icon_color};"></ha-icon>`
]]]
1 Like
Infineghost
September 2, 2019, 5:46am
2143
I’m not using the yaml mode “yet” thinking of doing it quite soon though, still use the GUI.
I stole the base code from @Mariusthvdb (sorry my friend). And adjusted it to my own liking
decluttering_templates:
button:
card:
type: 'custom:button-card'
- color: auto
size: 30%
entity: '[[entity]]'
aspect_ratio: 1/1
show_state: true
name: '[[name]]'
show_label: true
tap_action:
action: toggle
haptic: light
hold_action:
action: more-info
haptic: success
styles:
card:
- padding-left: 10px
- background-color: 'rgba(255,255,240,0.9)'
name:
- justify-self: start
- font-weight: bold
- font-size: 13px
label:
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: start
state:
- font-size: 11px
- font-family: Helvetica
- padding: 1px 10px
- justify-self: start
- text-transform: capitalize
- font-weight: bold
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- justify-content: start
- align-items: start
state:
- value: 'on'
styles:
card:
- box-shadow: 0px 0px 3px 2px var(--paper-item-icon-active-color)
name:
- color: black
state:
- color: gray
label:
- color: red
id: on-icon
- value: 'off'
styles:
card:
- opacity: 0.3
label:
- color: 'rgba(0, 0, 0, 0.0)'
icon:
- color: black
name:
- color: black
state:
- color: black
id: off-icon
- value: unavailable
styles:
card:
- opacity: 0.2
- color: grey
- '--paper-item-icon-color': grey
label:
- color: 'rgba(0, 0, 0, 0.0)'
1 Like
yoni3210
September 2, 2019, 9:49am
2144
i’ve copied the code and created a template “decluttering_templates.yaml” under lovelace folder.
would mind show how i need to write the code in lovelace?
Infineghost
September 2, 2019, 9:51am
2145
In your lovelace view you simply add
- type: custom:decluttering-card
template: button
variables:
- name: licht links
- entity: light.yeelight_color2_04cf8c842719
yoni3210
September 2, 2019, 3:18pm
2146
i’m receiving the following error in lovelace,
This is what i have done for now:
in love lace under resources:
- url: /local/custom_cards/decluttering-card.js
type: module
under folder lovelace added the file with following text:
decluttering_templates:
button:
card:
type: 'custom:button-card'
- color: auto
size: 30%
entity: '[[entity]]'
aspect_ratio: 1/1
show_state: true
name: '[[name]]'
show_label: true
tap_action:
action: toggle
haptic: light
hold_action:
action: more-info
haptic: success
styles:
card:
- padding-left: 10px
- background-color: 'rgba(255,255,240,0.9)'
name:
- justify-self: start
- font-weight: bold
- font-size: 13px
label:
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: start
state:
- font-size: 11px
- font-family: Helvetica
- padding: 1px 10px
- justify-self: start
- text-transform: capitalize
- font-weight: bold
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- justify-content: start
- align-items: start
state:
- value: 'on'
styles:
card:
- box-shadow: 0px 0px 3px 2px var(--paper-item-icon-active-color)
name:
- color: black
state:
- color: gray
label:
- color: red
id: on-icon
- value: 'off'
styles:
card:
- opacity: 0.3
label:
- color: 'rgba(0, 0, 0, 0.0)'
icon:
- color: black
name:
- color: black
state:
- color: black
id: off-icon
- value: unavailable
styles:
card:
- opacity: 0.2
- color: grey
- '--paper-item-icon-color': grey
label:
- color: 'rgba(0, 0, 0, 0.0)'
the error i’m receiving when adding the following in lovelace:
- type: custom:decluttering-card
template: button
variables:
- name: licht links
- entity: light.bedroom_lights
error:
any idea?
Emphyrio
September 2, 2019, 6:18pm
2147
Can anyone help me to format this ‘time’ to format H:mm?
custom_fields:
timex: >
[[[
return `${states['input_datetime.alarm_time'].state}`
]]]
This gets me ‘07:00:00’. But I would like it to output ‘07:00’. Is this possible? Thanks in advance!
Infineghost
September 2, 2019, 6:40pm
2148
Did you include your decluttering template under your config.yaml? The errors shows it can’t find the button template
1 Like
yoni3210
September 2, 2019, 7:49pm
2149
This is in the lovelace.yaml
resources:
- url: /local/custom_cards/mini-graph-card-bundle.js?v=0.4.3
type: module
- url: /local/custom_cards/canvas-gauge-card.js
type: module
- url: /local/custom_cards/slider-entity-row.js
type: module
- url: /local/custom_cards/simple-thermostat.js?v=1
type: module
- url: /customcards/github/nervetattoo/simple-thermostat.js?track=true
type: module
- url: /local/custom_cards/mini-media-player-bundle.js?v=1.0.2
type: module
- url: https://cdn.jsdelivr.net/gh/bramkragten/custom-ui@master/weather-card/weather-card.min.js
type: module
- url: /local/custom_cards/forked-daapd-card.js?v=0.0.2
type: module
- url: /local/custom_cards/monster-card.js?v=1
type: js
- url: /local/custom_cards/battery-entity.js?v=1
type: module
- url: /customcards/github/custom-cards/button-card.js?track=true
type: module
- url: /local/custom_cards/tracker-card.js?track=true
type: module
- url: /local/custom_cards/compact-custom-header.js?track=true
type: module
- url: /local/custom_cards/card-modder.js?v=1
type: js
- url: /local/custom_cards/card-tools.js?track=true
type: js
- url: /customcards/github/thomasloven/more-info-card.js
type: js
- url: /customcards/github/custom-cards/tracker-card.js?track=true
type: module
- url: /local/custom_cards/multiple-entity-row.js?v=1.1.0
type: js
- url: /local/custom_cards/fold-entity-row.js?v=1.1.0
type: js
- url: /customcards/github/thomasloven/popup-card.js?track=true
type: js
- url: /local/custom_cards/multiple-entity-row.js?v=1.1.0
type: js
- url: /local/custom_cards/popup-card?v=1.1.0
type: js
- url: /local/custom_cards/banner-card.js?v=1
type: module
- url: /customcards/github/nervetattoo/banner-card.js?track=true
type: module
- url: /local/custom_cards/bar-card.js?v=1.0.0
type: js
- url: /customcards/github/thomasloven/layout-card.js?track=true
type: js
- url: /community_plugin/compact-custom-header/compact-custom-header.js
type: module
- url: 'https://fonts.googleapis.com/css?family=Quicksand:300,400'
type: css
- url: /local/lovelace-fullykiosk.js
type: js
- url: /local/kiosk-config.js
type: js
- url: /local/custom_cards/vertical-stack-in-card.js?v=0.1.3
type: js
- url: /community_plugin/vertical-stack-in-card/vertical-stack-in-card.js
type: js
- url: /community_plugin/swipe-card/swipe-card.js
type: module
- url: /community_plugin/lovelace-card-mod/card-mod.js
type: module
- url: /local/custom_cards/decluttering-card.js
type: module
decluttering_templates: include lovelace/decluttering_templates.yaml!
This is in the decluttering_templates.yaml
decluttering_templates:
button:
card:
type: 'custom:button-card'
- color: auto
size: 30%
entity: '[[entity]]'
aspect_ratio: 1/1
show_state: true
name: '[[name]]'
show_label: true
tap_action:
action: toggle
haptic: light
hold_action:
action: more-info
haptic: success
styles:
card:
- padding-left: 10px
- background-color: 'rgba(255,255,240,0.9)'
name:
- justify-self: start
- font-weight: bold
- font-size: 13px
label:
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: start
state:
- font-size: 11px
- font-family: Helvetica
- padding: 1px 10px
- justify-self: start
- text-transform: capitalize
- font-weight: bold
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- justify-content: start
- align-items: start
state:
- value: 'on'
styles:
card:
- box-shadow: 0px 0px 3px 2px var(--paper-item-icon-active-color)
name:
- color: black
state:
- color: gray
label:
- color: red
id: on-icon
- value: 'off'
styles:
card:
- opacity: 0.3
label:
- color: 'rgba(0, 0, 0, 0.0)'
icon:
- color: black
name:
- color: black
state:
- color: black
id: off-icon
- value: unavailable
styles:
card:
- opacity: 0.2
- color: grey
- '--paper-item-icon-color': grey
label:
- color: 'rgba(0, 0, 0, 0.0)'
This would make the trick:
custom_fields:
timex: >
[[[
const result = states['input_datetime.alarm_time'].state.split(':').slice(0, 2).join(':');
return `${result}`
]]]
1 Like
yoni3210
September 2, 2019, 7:55pm
2151
This is in the lovelace.yaml
resources:
- url: /local/custom_cards/mini-graph-card-bundle.js?v=0.4.3
type: module
- url: /local/custom_cards/canvas-gauge-card.js
type: module
- url: /local/custom_cards/slider-entity-row.js
type: module
- url: /local/custom_cards/simple-thermostat.js?v=1
type: module
- url: /customcards/github/nervetattoo/simple-thermostat.js?track=true
type: module
- url: /local/custom_cards/mini-media-player-bundle.js?v=1.0.2
type: module
- url: https://cdn.jsdelivr.net/gh/bramkragten/custom-ui@master/weather-card/weather-card.min.js
type: module
- url: /local/custom_cards/forked-daapd-card.js?v=0.0.2
type: module
- url: /local/custom_cards/monster-card.js?v=1
type: js
- url: /local/custom_cards/battery-entity.js?v=1
type: module
- url: /customcards/github/custom-cards/button-card.js?track=true
type: module
- url: /local/custom_cards/tracker-card.js?track=true
type: module
- url: /local/custom_cards/compact-custom-header.js?track=true
type: module
- url: /local/custom_cards/card-modder.js?v=1
type: js
- url: /local/custom_cards/card-tools.js?track=true
type: js
- url: /customcards/github/thomasloven/more-info-card.js
type: js
- url: /customcards/github/custom-cards/tracker-card.js?track=true
type: module
- url: /local/custom_cards/multiple-entity-row.js?v=1.1.0
type: js
- url: /local/custom_cards/fold-entity-row.js?v=1.1.0
type: js
- url: /customcards/github/thomasloven/popup-card.js?track=true
type: js
- url: /local/custom_cards/multiple-entity-row.js?v=1.1.0
type: js
- url: /local/custom_cards/popup-card?v=1.1.0
type: js
- url: /local/custom_cards/banner-card.js?v=1
type: module
- url: /customcards/github/nervetattoo/banner-card.js?track=true
type: module
- url: /local/custom_cards/bar-card.js?v=1.0.0
type: js
- url: /customcards/github/thomasloven/layout-card.js?track=true
type: js
- url: /community_plugin/compact-custom-header/compact-custom-header.js
type: module
- url: 'https://fonts.googleapis.com/css?family=Quicksand:300,400'
type: css
- url: /local/lovelace-fullykiosk.js
type: js
- url: /local/kiosk-config.js
type: js
- url: /local/custom_cards/vertical-stack-in-card.js?v=0.1.3
type: js
- url: /community_plugin/vertical-stack-in-card/vertical-stack-in-card.js
type: js
- url: /community_plugin/swipe-card/swipe-card.js
type: module
- url: /community_plugin/lovelace-card-mod/card-mod.js
type: module
- url: /local/custom_cards/decluttering-card.js
type: module
decluttering_templates: include lovelace/decluttering_templates.yaml!
This is in the decluttering_templates.yaml
decluttering_templates:
button:
card:
type: 'custom:button-card'
- color: auto
size: 30%
entity: '[[entity]]'
aspect_ratio: 1/1
show_state: true
name: '[[name]]'
show_label: true
tap_action:
action: toggle
haptic: light
hold_action:
action: more-info
haptic: success
styles:
card:
- padding-left: 10px
- background-color: 'rgba(255,255,240,0.9)'
name:
- justify-self: start
- font-weight: bold
- font-size: 13px
label:
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: start
state:
- font-size: 11px
- font-family: Helvetica
- padding: 1px 10px
- justify-self: start
- text-transform: capitalize
- font-weight: bold
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- justify-content: start
- align-items: start
state:
- value: 'on'
styles:
card:
- box-shadow: 0px 0px 3px 2px var(--paper-item-icon-active-color)
name:
- color: black
state:
- color: gray
label:
- color: red
id: on-icon
- value: 'off'
styles:
card:
- opacity: 0.3
label:
- color: 'rgba(0, 0, 0, 0.0)'
icon:
- color: black
name:
- color: black
state:
- color: black
id: off-icon
- value: unavailable
styles:
card:
- opacity: 0.2
- color: grey
- '--paper-item-icon-color': grey
label:
- color: 'rgba(0, 0, 0, 0.0)'
Infineghost
September 2, 2019, 8:21pm
2152
Try !include. And not the “!” At the end
yoni3210
September 2, 2019, 8:37pm
2153
After i change to this:
resources:
- url: /local/custom_cards/mini-graph-card-bundle.js?v=0.4.3
type: module
- url: /local/custom_cards/canvas-gauge-card.js
type: module
- url: /local/custom_cards/slider-entity-row.js
type: module
- url: /local/custom_cards/simple-thermostat.js?v=1
type: module
- url: /customcards/github/nervetattoo/simple-thermostat.js?track=true
type: module
- url: /local/custom_cards/mini-media-player-bundle.js?v=1.0.2
type: module
- url: https://cdn.jsdelivr.net/gh/bramkragten/custom-ui@master/weather-card/weather-card.min.js
type: module
- url: /local/custom_cards/forked-daapd-card.js?v=0.0.2
type: module
- url: /local/custom_cards/monster-card.js?v=1
type: js
- url: /local/custom_cards/battery-entity.js?v=1
type: module
- url: /customcards/github/custom-cards/button-card.js?track=true
type: module
- url: /local/custom_cards/tracker-card.js?track=true
type: module
- url: /local/custom_cards/compact-custom-header.js?track=true
type: module
- url: /local/custom_cards/card-modder.js?v=1
type: js
- url: /local/custom_cards/card-tools.js?track=true
type: js
- url: /customcards/github/thomasloven/more-info-card.js
type: js
- url: /customcards/github/custom-cards/tracker-card.js?track=true
type: module
- url: /local/custom_cards/multiple-entity-row.js?v=1.1.0
type: js
- url: /local/custom_cards/fold-entity-row.js?v=1.1.0
type: js
- url: /customcards/github/thomasloven/popup-card.js?track=true
type: js
- url: /local/custom_cards/multiple-entity-row.js?v=1.1.0
type: js
- url: /local/custom_cards/popup-card?v=1.1.0
type: js
- url: /local/custom_cards/banner-card.js?v=1
type: module
- url: /customcards/github/nervetattoo/banner-card.js?track=true
type: module
- url: /local/custom_cards/bar-card.js?v=1.0.0
type: js
- url: /customcards/github/thomasloven/layout-card.js?track=true
type: js
- url: /community_plugin/compact-custom-header/compact-custom-header.js
type: module
- url: 'https://fonts.googleapis.com/css?family=Quicksand:300,400'
type: css
- url: /local/lovelace-fullykiosk.js
type: js
- url: /local/kiosk-config.js
type: js
- url: /local/custom_cards/vertical-stack-in-card.js?v=0.1.3
type: js
- url: /community_plugin/vertical-stack-in-card/vertical-stack-in-card.js
type: js
- url: /community_plugin/swipe-card/swipe-card.js
type: module
- url: /community_plugin/lovelace-card-mod/card-mod.js
type: module
- url: /local/custom_cards/decluttering-card.js
type: module
decluttering_templates: !include lovelace/decluttering_templates.yaml
This is the error i get when i’m trying refresh :
mistrovly
September 2, 2019, 9:05pm
2154
try it this way to see:
decluttering_templates:
button:
card:
type: 'custom:button-card'
color: auto
size: 30%
entity: '[[entity]]'
aspect_ratio: 1/1
show_state: true
name: '[[name]]'
show_label: true
tap_action:
action: toggle
haptic: light
hold_action:
action: more-info
haptic: success
styles:
card:
- padding-left: 10px
- background-color: 'rgba(255,255,240,0.9)'
name:
- justify-self: start
- font-weight: bold
- font-size: 13px
label:
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: start
state:
- font-size: 11px
- font-family: Helvetica
- padding: 1px 10px
- justify-self: start
- text-transform: capitalize
- font-weight: bold
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- justify-content: start
- align-items: start
state:
- value: 'on'
styles:
card:
- box-shadow: 0px 0px 3px 2px var(--paper-item-icon-active-color)
name:
- color: black
state:
- color: gray
label:
- color: red
id: on-icon
- value: 'off'
styles:
card:
- opacity: 0.3
label:
- color: 'rgba(0, 0, 0, 0.0)'
icon:
- color: black
name:
- color: black
state:
- color: black
id: off-icon
- value: unavailable
styles:
card:
- opacity: 0.2
- color: grey
- '--paper-item-icon-color': grey
label:
- color: 'rgba(0, 0, 0, 0.0)'
yoni3210
September 2, 2019, 9:33pm
2156
tried, now back to the original error.
This is the only i have in the folder… do i need yo have more files in order it to work?
mistrovly
September 2, 2019, 9:36pm
2157
Can you post the config for the card
yoni3210
September 2, 2019, 10:01pm
2159
Here you go:
- type: custom:decluttering-card
template: button
variables:
- name: licht links
- entity: light.bedroom_lights
mistrovly
September 2, 2019, 10:08pm
2160
on your ui-lovelace.yaml file, if you have your “decluttering_templates” defined like that
decluttering_templates: !include lovelace/decluttering_templates.yaml
then your button template should be:
button:
card:
type: 'custom:button-card'
color: auto
size: 30%
entity: '[[entity]]'
aspect_ratio: 1/1
show_state: true
name: '[[name]]'
show_label: true
tap_action:
action: toggle
haptic: light
hold_action:
action: more-info
haptic: success
styles:
card:
- padding-left: 10px
- background-color: 'rgba(255,255,240,0.9)'
name:
- justify-self: start
- font-weight: bold
- font-size: 13px
label:
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: start
state:
- font-size: 11px
- font-family: Helvetica
- padding: 1px 10px
- justify-self: start
- text-transform: capitalize
- font-weight: bold
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- justify-content: start
- align-items: start
state:
- value: 'on'
styles:
card:
- box-shadow: 0px 0px 3px 2px var(--paper-item-icon-active-color)
name:
- color: black
state:
- color: gray
label:
- color: red
id: on-icon
- value: 'off'
styles:
card:
- opacity: 0.3
label:
- color: 'rgba(0, 0, 0, 0.0)'
icon:
- color: black
name:
- color: black
state:
- color: black
id: off-icon
- value: unavailable
styles:
card:
- opacity: 0.2
- color: grey
- '--paper-item-icon-color': grey
label:
- color: 'rgba(0, 0, 0, 0.0)'
and your card will be:
- type: custom:decluttering-card
template: button
variables:
- name: licht links
- entity: light.bedroom_lights
