yoni3210
September 4, 2019, 7:49pm
2177
i added the “show_last_changed: true” to my template below:
sensor:
card:
type: 'custom:button-card'
color: auto
size: 30%
icon: '[[icon]]'
entity: '[[entity]]'
show_last_changed: true
aspect_ratio: 1/1
show_state: true
name: '[[name]]'
show_label: true
tap_action:
action: more-info
haptic: success
hold_action:
action: more-info
haptic: success
styles:
card:
- padding-left: 10px
- background-color: 'rgba(255,255,240,0.9)'
- border-radius: 15px
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 its working great beside one thing, you can see that it’s display last trigged, but when the state is changed to clear, it stopped showing the last motion time.
after state back to clear:
Any idea?
not yet… thinking of your sensors though, are they showing the last_changed in dev-state/template? if the last_changed isn’t available it won’t be shown on the button.
yoni3210
September 5, 2019, 8:00am
2179
it shows 16 hours ago, which is correct
and if you make a quick, unformatted button, with only icon, name, state and show: last_changed? Just to see if it gets through?
yoni3210
September 5, 2019, 9:02am
2182
i managed to solve everything, the issue was that the text was transparent.
i also changed a lot of the stuff. Thank you!
please look below.
i’m just wondering how can i change the temperatures @ AC entities to match the background of the other entities?
AC Code:
- type: custom:card-modder
style:
border-radius: 15px
card:
type: horizontal-stack
cards:
- type: custom:simple-thermostat
entity: climate.mzgn_khdr_shynh
name: AC Bedroom
step_size: 1
temps code:
- type: horizontal-stack
cards:
- type: custom:card-modder
style:
border-radius: 15px
card:
type: custom:mini-graph-card
entities:
- sensor.mi_t_4c65a8d1ee4b
name: Temperature
line_color: var(--accent-color)
line_width: 8
font_size: 75
- type: custom:card-modder
style:
border-radius: 15px
card:
type: custom:mini-graph-card
entities:
- sensor.mi_h_4c65a8d1ee4b
name: Humidity
line_color: blue
line_width: 8
font_size: 75
- type: custom:card-modder
style:
border-radius: 15px
card:
type: custom:mini-graph-card
entities:
- sensor.illumination_158d0001e50fc6
name: Illumination
line_color: '#e74c3c'
line_width: 8
font_size: 75
cool.
Ive only shared the code with you
update marked as deprecated . restored it and my icons are back!
2 Likes
yoni3210
September 5, 2019, 9:08am
2184
Mariusthvdb:
cool.
so weird, did you check the logs? maybe create a new template?
Infineghost
September 5, 2019, 9:21am
2185
Before i go in the same hassle as you, can you share the code of the transparent text change?. Facing the same as well. Save me time if you got the code ready
About your entity’s of the AC color. I don’t know how to change this in the card (maybe card modder). I got it however arranged in my theme
paper-card-background-color: "rgba(255,255,255,0.15)"
yoni3210
September 5, 2019, 9:28am
2186
no problem, please look below:
Button2:
card:
type: 'custom:button-card'
color: auto
size: 30%
icon: '[[icon]]'
entity: '[[entity]]'
show_last_changed: true
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)'
- border-radius: 15px
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
name:
- color: black
state:
- color: gray
label:
- color: black
id: on-icon
- value: 'off'
styles:
card:
- box-shadow: 0px 0px 3px 2px var
# - opacity: 0.3
label:
- color: black
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)'
2 Likes
RomRider
September 5, 2019, 12:40pm
2187
yoni3210:
Any idea?
See my inline comment:
- value: 'off'
styles:
card:
- opacity: 0.3
label:
# This line is the problem, last_changed uses the label space
# so here when the sensor is "off", the color is transparent
# which make the text disappear
- color: 'rgba(0, 0, 0, 0.0)'
icon:
- color: black
name:
- color: black
state:
- color: black
id: off-icon
yoni3210
September 5, 2019, 1:53pm
2189
Hi Rom,
i already manged to fix it thank you for trying to help, i shared to solution in earlier post, i have only one issue with spin the entity.
- type: custom:button-card
entity: fan.ceiling_fan
icon: mdi:fan
show_state: false
show_name: false
state:
- value: 'on'
spin: true
now its not, everything that i tried wasn’t working, current code:
- type: horizontal-stack
cards:
- type: custom:decluttering-card
template: Button2
variables:
- name: Bedroom TV
- entity: switch.toshiba_tv
- icon: mdi:television-box
- type: custom:decluttering-card
template: Button2
variables:
- name: Ceilling Fan
- entity: fan.ceiling_fan
- icon: mdi:fan
Any idea?
button2 template:
Button2:
card:
type: 'custom:button-card'
color: auto
size: 30%
icon: '[[icon]]'
entity: '[[entity]]'
show_last_changed: true
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)'
- border-radius: 15px
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
name:
- color: black
state:
- color: gray
label:
- color: black
id: on-icon
- value: 'off'
styles:
card:
- box-shadow: 0px 0px 3px 2px var
# - opacity: 0.3
label:
- color: black
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)'
VMCosco
September 5, 2019, 2:04pm
2190
Is there a way to completely hide/collapse a card based on its state? I got my severe weather card working and I want to hide it if there is no severe weather
yoni3210
September 5, 2019, 2:27pm
2191
yoni3210:
spin: true
solved also Thank you anyway!
here is the new design
1 Like
Maybe I missed something but there’s no spin: true in the state object for value: 'on' in your decluttering template.
1 Like
yoni3210
September 5, 2019, 4:05pm
2194
i’m trying using one of your tepmlates below :
i replace the cpu, memory, temp with the my entities, here is the code:
- type: custom:button-card
entity: 'sensor.desktop_gmml6qq_intel_core_i5_3317u_temperatures_cpu_package'
icon: 'mdi:raspberry-pi'
aspect_ratio: 1/1
name: HassOS
styles:
card:
- background-color: '#000044'
- border-radius: 10%
- padding: 10%
- color: ivory
- font-size: 10px
- text-shadow: 0px 0px 5px black
- text-transform: capitalize
grid:
- grid-template-areas: '"i temp" "n n" "cpu cpu" "ram ram" "sd sd"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
name:
- font-weight: bold
- font-size: 13px
- color: white
- align-self: middle
- justify-self: start
- padding-bottom: 4px
img_cell:
- justify-content: start
- align-items: start
- margin: none
icon:
- color: >
[[[
if (entity.state < 60) return 'lime';
if (entity.state >= 60 && entity.state < 80) return 'orange';
else return 'red';
]]]
- width: 70%
- margin-top: -10%
custom_fields:
temp:
- align-self: start
- justify-self: end
cpu:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- --text-color-sensor: '[[[ if (states["sensor.desktop_gmml6qq_intel_core_i5_3317u_load_cpu_total"].state > 80) return "red"; ]]]'
ram:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- --text-color-sensor: '[[[ if (states["sensor.memory_use_percent"].state > 80) return "red"; ]]]'
sd:
- align-self: middle
- justify-self: start
- --text-color-sensor: '[[[ if (states["sensor.disk_use_percent_home"].state > 80) return "red"; ]]]'
custom_fields:
temp: >
[[[
return `<ha-icon
icon="mdi:thermometer"
style="width: 12px; height: 12px; color: yellow;">
</ha-icon><span>${entity.state}°C</span>`
]]]
cpu: >
[[[
return `<ha-icon
icon="mdi:server"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon><span>CPU: <span style="color: var(--text-color-sensor);">${states['sensor.desktop_gmml6qq_intel_core_i5_3317u_load_cpu_total'].state}%</span></span>`
]]]
ram: >
[[[
return `<ha-icon
icon="mdi:memory"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon><span>RAM: <span style="color: var(--text-color-sensor);">${states['sensor.memory_use_percent'].state}%</span></span>`
]]]
sd: >
[[[
return `<ha-icon
icon="mdi:harddisk"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon><span>SD: <span style="color: var(--text-color-sensor);">${states['sensor.disk_use_percent_home'].state}%</span></span>`
]]]
for some reason i’m getting no data:
Here are my entities below:
petro
September 5, 2019, 4:24pm
2195
You’re telling the label to be transparent when the sensor is off
yoni3210:
- value: 'off'
styles:
card:
- opacity: 0.3
label:
- color: 'rgba(0, 0, 0, 0.0)' <-----------------------
icon:
- color: black
name:
- color: black
state:
- color: black
EDIT: seems like my browser was out of date and I didn’t see @RomRider ’s response and below.
Sanity Check - If I want to move my Button Card templates into a separate yaml file, will doing so break the lovelace refresh functionality? My ui-lovelace.yaml file is growing absurdly large and I’d like to start separating the various sections (Button Card Templates, Decluttering Card, CCH, etc.).
wxt9861
September 6, 2019, 7:38pm
2198
Shouldn’t be a problem, just reference them in your ui-lovelace.yaml
This is how I have mine setup.
button_card_templates:
!include lovelace/helpers/button_card_templates.yaml
And in the templates.yaml start the code indented 2 spaces
1 Like
yoni3210
September 6, 2019, 7:46pm
2199
would you mind share your code ? nice view
jimz011
September 6, 2019, 7:56pm
2200
No you will not break the refresh functionality, however usually it will require you to save ui-lovelace.yaml even though you didn’t make a single change in that file. So if you use includes remember to save ui-lovelace.yaml and refresh afterwards. Also if you use Notepad++ I will advise you to use Sublime Text or Visual Studio Code as a text editor as you can save that file without having to edit it. In Notepad++ you will have to put either a space or something to actually change the file before it can be saved.
1 Like
