TouTje
April 20, 2023, 2:55pm
4872
Of course, I just didn’t do anything other than Mattias and experience a number of problems with this myself. that I didn’t fix yet
lovelace.yaml
- type: horizontal-stack
view_layout:
grid-area: footer
cards:
- type: custom:button-card
name: >
<ha-icon icon="mdi:home-assistant"></ha-icon> Home Assistant
tap_action: !include popup/footer/hass.yaml
template: footer
- type: custom:button-card
name: >
<ha-icon icon="mdi:arrow-up-bold-circle-outline"></ha-icon> Update
tap_action: !include popup/footer/footer_updates.yaml
variables:
notify: >
[[[
let id = states['sensor.total_update_count'];
if (id) {
return parseInt(id.state);
}
]]]
template: footer
- type: custom:button-card
name: >
<ha-icon icon="cil:roborock-vacuum-map"></ha-icon> Wall_e
tap_action: !include popup/footer/vacuum.yaml
variables:
notify: >
[[[
let id = states['sensor.wall_e_tijd_sinds_laatste_schoonmaak'];
if (id) return parseInt(id.state);
]]]
template: footer
- type: custom:button-card
name: >
<ha-icon icon="phu:dyson-floor"></ha-icon> Purifier
tap_action: !include popup/footer/purifier.yaml
template: footer
- type: custom:button-card
name: >
<ha-icon icon="mdi:raspberry-pi"></ha-icon> RPi
tap_action: !include popup/footer/rpi.yaml
variables:
notify: >
[[[
let ping = states['binary_sensor.rpi_ping'];
if (ping) {
return ping.state === 'off';
}
]]]
template: footer
footer_updates.yaml
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Updates
card_mod:
style:
#popup header
.:
content:
type: custom:mod-card
card_mod:
style:
hui-grid-card:
$: |
button-card:nth-child(2) {
margin: 0.6em 0 2.1em 0.8em;
}
button-card:nth-child(4) {
margin: 0.6em 0 0.5em 0.8em;
}
#root {
grid-gap: 0 !important;
padding: var(--tablet-popup-content-padding);
}
card:
type: grid
columns: 1
square: false
cards:
- type: custom:button-card
entity: sensor.current_version
template: updates_hass
variables:
available: sensor.template_updates_matt
latest: sensor.hass_latest_website
latest_beta: sensor.hass_latest_beta
release_notes: sensor.hass_release_notes
release_notes_beta: sensor.hass_release_notes_beta
- type: custom:button-card
entity: sensor.current_version
name: Update HASS
variables:
latest: sensor.hass_latest_website
latest_beta: sensor.hass_latest_beta
tap_action: []
template: updates_hass_icon_name
############################################
- type: custom:button-card
variables:
updates: sensor.template_updates_matt
other_updates: sensor.template_updates_matt
hacs_installed: sensor.hacs_installed
template: updates
- type: custom:button-card
entity: sensor.template_updates
name: Update
template:
- updates_icon_name
- >
[[[
return window.navigator.userAgent.match(/iPhone/i)
? 'hacs_navigate_ios'
: 'hacs_iframe';
]]]
hold_action:
action: call-service
service: browser_mod.sequence
service_data:
sequence:
- service: browser_mod.notification
data:
message: Söker efter uppdateringar...
- service: homeassistant.update_entity
data:
entity_id:
- sensor.updates_esphome_latest
- sensor.updates_kemper
rpi.yaml
update_entities:
action: >
[[[
hass.callService('homeassistant', 'update_entity', {
entity_id: [
'binary_sensor.rpi_ping',
'sensor.processor_temperature',
'sensor.processor_use',
'sensor.memory_use_percent',
'sensor.last_boot'
]
});
]]]
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Raspberry Pi 4B
content:
type: vertical-stack
cards:
- type: entities
state_color: true
card_mod:
class: content
entities:
- entity: binary_sensor.rpi_ping
secondary_info: last-changed
name: Anslutning
icon: mdi:raspberry-pi
- type: custom:bar-card
width: 55%
height: 2em
decimal: 0
unit_of_measurement: "%"
positions: &positions
icon: outside
indicator: "off"
name: outside
severity: &severity
- color: "#6d2525"
from: 90
to: 999
entity_row: true
entities:
- entity: sensor.processor_temperature
tap_action:
action: call-service
service: homeassistant.update_entity
service_data:
entity_id: sensor.processor_temperature
- entity: sensor.processor_use
tap_action:
action: call-service
service: homeassistant.update_entity
service_data:
entity_id: sensor.processor_use
- entity: sensor.memory_use_percent
tap_action:
action: call-service
service: homeassistant.update_entity
service_data:
entity_id: sensor.memory_use_percent
- entity: sensor.last_boot
tap_action:
action: call-service
service: homeassistant.update_entity
service_data:
entity_id: sensor.last_boot
Ola,
Question, when I hit a button with an entity like a light or switch the button becomes white when active.
When I click this the button won’t change color, I reckon that is due to it’s state not being “on” but rather “heat_cool”; “cool” or w/e the state is.
I tried looking in the docs and code to see where you configured the buttons to get white when state is ‘on’ but can’t find it anywhere to add those actions for my ACs.
Any help is greatly appreciated.
Thanks!
Also interessted in the yaml for the weather button
D34DC3N73R
April 20, 2023, 9:14pm
4875
That’s determined by the state_on variable in button_card_templates/base.yaml which is set to 'on', 'home', 'cool', 'fan_only', 'playing', 'unlocked'. If you don’t want to alter the base files, you can add the states to individual buttons like this:
- type: custom:button-card
entity: alarm_control_panel.home_alarm
name: Security
tap_action: !include popup/alarm.yaml
template:
- base
- icon_home_shield
variables:
state_on: >
[[[ return ['armed_night', 'armed_away', 'armed_home'].indexOf(!entity || entity.state) !== -1; ]]]
state_off: >
[[[ return ['disarmed'].indexOf(!entity || entity.state) !== -1; ]]]
state: >
[[[ return !entity || entity.state; ]]]
...
1 Like
bjortte
April 20, 2023, 9:55pm
4876
Hi Mattias! how can i add that little phone circle beeneth in the picture below?
VietNgoc
April 20, 2023, 11:06pm
4877
Hi, i have a same template, I just add some background images according weather state and modify font size.
button template:
widget_weather:
template:
- base
variables:
temp_min: ''
temp_max: ''
humidity: ''
current_weather: ''
is_bellow_horrizon: >
[[[
if (states['sun.sun'].state == 'below_horizon') {
return true;
}
]]]
aspect_ratio: 1/1
show_icon: false
show_entity_picture: true
show_name: true
show_state: true
show_label: true
tap_action:
action: more-info
styles:
grid:
- grid-template-areas: |
"n"
"temp"
"i"
"s"
"l"
- grid-template-columns: 1fr
- grid-template-rows: min-content repeat(2, 1fr) repeat(2, min-content)
- gap: 0%
- overflow: visible
card:
- padding: 11.5% 10.5% 10.5% 11.5%
- color: rgba(255, 255, 255, 0.6)
- background: >
[[[
let weather = states[variables.current_weather].state.toLowerCase();
return variables.is_bellow_horrizon
? `linear-gradient(to top, rgba(53,59,83,0.8) 0%, rgba(0,0,0,0.4) 100%) 100% / cover, url(/local/svg/weather/${weather}.png)`
: `linear-gradient(to top, rgba(155, 109, 129, 0.5) 0%, rgba(63,74,113,1) 100%) 100% / cover, url(/local/svg/weather/${weather}.png)`;
]]]
- background-size: cover
state:
- text-transform: uppercase
- margin-top: 5px
- line-height: 100%
name:
- place-self: start
- text-transform: uppercase
- font-weight: 500
- font-family: Futura
- letter-spacing: 0.1vw
- margin-top: -7%
img_cell:
- justify-content: start
- overflow: visible
icon:
- width: 35%
label:
- place-self: start
# - margin-left: -5px
- margin-top: 3%
- margin-bottom: -7%
custom_fields:
temp:
- place-self: start
# - margin-top: -5px
- font-family: Futura
- color: rgba(240, 255, 255, 0.8)
label: >
[[[
return `
<ha-icon icon="mdi:water-percent" style="width: 1em; height: 1em; margin-right: -0.3em;"></ha-icon>
<span>${states[variables.humidity].state}%</span>
<ha-icon icon="mdi:chevron-up" style="width: 1.5em; height: 1.5em; margin-right: -0.3em;"></ha-icon>
<span>${states[variables.temp_max].state}°</span>
<ha-icon icon="mdi:chevron-down" style="width: 1.5em; height: 1.5em; margin-right: -0.3em;"></ha-icon>
<span>${states[variables.temp_min].state}°</span>
`
]]]
custom_fields:
temp: >
[[[ return entity.attributes.temperature + "°"; ]]]
entity_picture: >
[[[
let weather = states[variables.current_weather].state.toLowerCase();
if ((weather == 'sunny') && (states['sun.sun'].state == 'above_horizon'))
return "/local/svg/weather/clear-day.svg";
if ((weather == 'sunny') || (weather == 'clear-night') && (states['sun.sun'].state == 'below_horizon'))
return "/local/svg/weather/clear-night.svg";
if (weather == 'fog')
return "/local/svg/weather/fog.svg";
if ((weather == 'partlycloudy') && (states['sun.sun'].state == 'above_horizon'))
return "/local/svg/weather/partly-cloudy-day.svg";
if ((weather == 'partlycloudy') && (states['sun.sun'].state == 'below_horizon'))
return "/local/svg/weather/partly-cloudy-night.svg";
if (weather == 'rainy')
return "/local/svg/weather/rain.svg";
if (weather == 'sleet')
return "/local/svg/weather/sleet.svg";
if (weather == 'snow')
return "/local/svg/weather/snow.svg";
if (weather == 'cloudy')
return "/local/svg/weather/cloudy.svg";
else (weather == 'wind')
return "/local/svg/weather/wind.svg";
]]]
extra_styles: |
[[[
return `
#name {
font-size: 0.9vw;
}
#temp {
font-size: 1.4vw;
}
#state {
font-size: 0.7vw;
}
#label {
font-size: 0.6vw;
}
@media screen and (max-width: 1500px) {
#name {
font-size: 1.3vw;
}
#temp {
font-size: 2vw;
}
#state {
font-size: 1.2vw;
}
#label {
font-size: 1.2vw;
}
@media screen and (max-width: 800px) {
#name {
font-size: 3vw;
margin-top: -5%;
}
#temp {
font-size: 6vw;
}
#state {
font-size: 2.7vw;
}
#icon {
display: none !important;
}
#label {
font-size: 1.9vw;
font-weight: 500 !important;
margin-top: 5%;
margin-bottom: 0%;
margin-left: -4%;
}
}
`
]]]
lovelace:
- type: custom:button-card
entity: weather.prague
name: Prague
variables:
temp_min: sensor.weather_min_temp
temp_max: sensor.weather_max_temp
humidity: sensor.openweathermap_humidity
current_weather: weather.prague
template:
- widget_weather
7 Likes
Thanks so much! I’m wanting to take some stuff from your sidebar so I took a dive into your config. I am trying to create the special occasions template sensor in my sensor.yaml file and it is giving me all sorts of errors. Tried pasting in the same layout you have, and this is what I’m getting. Any ideas? Thanks!
1 Like
Laffer
April 21, 2023, 4:20am
4879
My guess is that it’s probably in the wrong location/format.
The following is the correct structure:
template:
sensor:
- unique_id: special_occasions
name: 'Special Occasions'
state: >
There’s a difference between “template sensor” and “sensor template”.
Hello,
I have several templates in my configuration (from multiple source) that work but are written differently
So I wonder what is the difference/best pratrice between .
sensor:
- platform: template
sensors:
energy_return:
AND
template:
- sensor:
- name: "energy_return"
Could this be it?
GareHaan
April 21, 2023, 7:42am
4880
Thanks for that code. Could you also share the svg’s that you are using?
Dave81
April 21, 2023, 10:12am
4881
and the PNGs for the background
Thank you so much!
VietNgoc
April 21, 2023, 10:16am
4882
Here is the original post, thanks @pex81
This is my code.
Widget Calendar
i use a date sensor
- type: custom:button-card
entity: calendar.lavoro
template:
- base
- widget_calendar
button_card_template.yaml
widget_calendar:
aspect_ratio: 1/1
show_icon: false
show_name: false
show_state: false
show_label: false
tap_action:
action: more-info
styles:
grid:
- grid-template-areas: |
"giorno"
"num…
VietNgoc
April 21, 2023, 10:22am
4883
2 Likes
theRKS
April 22, 2023, 5:29pm
4884
Can u share your icons file, Like the icons you have used for Rooms, Camera, door etc.?
zs2766
April 22, 2023, 6:56pm
4885
How did you make it display gif animation? Can different gif animations be displayed based on day and night? Please share the complete code containing the gif animation. Additionally, I found that the card layout is normal on the webpage, but the layout on the mobile device may be disordered, as shown in the picture. Please share the complete code and solve the problem of disordered layout. Thank you
zs2766
April 22, 2023, 7:04pm
4886
Hello, could you share your hue Lily card template? If possible, I would also like you to share your hue Lily icon. I really like it. Thank you
1 Like
here’s the code but it’s not animated
icon_lily_two:
custom_fields:
icon: >
<svg viewBox="0 0 50 50">
<path d="M17.21 32.15c1.08-.36 1.8-.9 1.98-1.26.36-.18.54-.54.54-1.08 0-.9-1.08-1.44-1.98-1.8-1.62-.54-2.34-.54-3.06-.36C14.33 26.57 14.33 24.77 14.33 22.61l5.76-3.42 0 0 7.74-4.5 0 0 0 0 0 0c0 0 0 0 .18 0l0 0c.18-.18.36-.36.54-.54 0-.18.18-.18.18-.36 0-.18.18-.18.18-.36 0-.18.18-.36.18-.54s0-.18 0-.36c0-.18.18-.54.18-.72l0 0 0 0c0-.36 0-.72 0-1.08 0-1.62-.72-3.6-1.8-5.4S25.13 2.09 23.69 1.19c-1.62-1.08-3.06-1.26-4.32-.54l0 0 0 0L2.45 10.73l0 0c-1.26.72-1.8 2.16-1.8 3.96 0 1.62.72 3.6 1.8 5.4s2.34 3.24 3.78 4.14c.36.18 .72.36 .9.54 .18 2.52.54 4.68 1.08 5.4.54 .72 1.8 1.44 3.24 1.98C8.57 32.33 5.33 33.23 5.33 35.03v1.26c0 2.34 5.4 3.06 8.64 3.06s8.64-.72 8.64-3.06v-1.26C22.61 33.23 19.91 32.51 17.21 32.15zM19.91 2.27 19.91 2.27c.18-.18.18-.18.36-.36l0 0C20.45 1.73 20.63 1.73 20.99 1.73c.54 0 1.08.18 1.8.72 1.26.72 2.34 1.98 3.24 3.6s1.44 3.24 1.44 4.68c0 1.08-.18 1.98-.72 2.34l0 0c0 0 0 0-.18.18 0 0 0 0-.18 0l0 0c-.54.18-1.44 0-2.34-.54-1.26-.72-2.34-1.98-3.24-3.6s-1.44-3.24-1.44-4.68C19.55 3.53 19.73 2.81 19.91 2.27zM37.91 12.89c-.72-1.26-1.62-2.16-2.52-2.88-1.08-.72-1.98-.72-2.88-.36l0 0 0 0-1.44.9 0 0c.18 2.34-.72 4.14-2.16 5.22 0 0 0 0-.18.18L28.55 16.13l0 0 0 0-8.28 4.86c.18.54 .36 1.08.72 1.8.72 1.26 1.62 2.16 2.52 2.88.18 .18.36 .18.72 .36.18 1.8.36 3.06.72 3.6s1.08.9 2.16 1.26c-1.8.18-3.6.54-3.96 1.62.9 .9 1.26 1.8 1.26 2.52 1.26.54 3.06.72 4.5.72 2.16 0 5.76-.36 5.76-1.98v-.9c0-1.08-1.8-1.62-3.6-1.98.72-.18 1.08-.54 1.26-.72s.36-.36.36-.72c0-.54-.72-.9-1.26-1.08-1.08-.36-1.62-.36-1.98-.18-.18-.9-.18-2.16-.18-3.6l9-5.4 0 0 0 0 0 0 0 0 0 0c.72-.54 1.08-1.44 1.08-2.52C38.99 15.41 38.63 14.15 37.91 12.89zM37.37 18.11c-.36.18-1.08.18-1.62-.36-.72-.54-1.62-1.44-2.16-2.34-.54-1.08-.9-2.16-1.08-3.06 0-.54 0-1.08.36-1.44l0 0C32.87 10.73 33.05 10.73 33.05 10.73l0 0c.18 0 .36-.18.36-.18.36 0 .72.18 1.26.36 .72.54 1.62 1.44 2.16 2.34.54 1.08.9 2.16 1.08 3.06C37.91 17.39 37.73 17.93 37.37 18.11z" fill="#9da0a2" />
</svg>
VietNgoc
April 22, 2023, 9:41pm
4888
gif background: A different take on designing a Lovelace UI - #3277 by htpc2308
template:https://community.home-assistant.io/t/a-different-take-on-designing-a-lovelace-ui/162594/2336?u=vietngoc
This is my code.
Widget Calendar
i use a date sensor
- type: custom:button-card
entity: calendar.lavoro
template:
- base
- widget_calendar
button_card_template.yaml
widget_calendar:
aspect_ratio: 1/1
show_icon: false
show_name: false
show_state: false
show_label: false
tap_action:
action: more-info
styles:
grid:
- grid-template-areas: |
"giorno"
"num…
The name of these background images must be the same as the weather entity state. In the template you have to adjust the font size for the screen size, I don’t have the icon on my mobile app.
@media screen and (max-width: 800px) {
#icon {
display: none !important;
}
You can change the background using the sun entity state variables.
- background: >
[[[
let weather = states[variables.current_weather].state.toLowerCase();
return variables.is_bellow_horrizon
? `linear-gradient(to top, rgba(53,59,83,0.8) 0%, rgba(0,0,0,0.4) 100%) 100% / cover, url(/local/svg/weather/gif/${weather}.gif)`
: `linear-gradient(to top, rgba(155, 109, 129, 0.5) 0%, rgba(63,74,113,1) 100%) 100% / cover, url(/local/svg/weather/gif/${weather}.gif)`;
]]]
Don’t forget to empty the browser cache and also the mobile app.
zs2766
April 23, 2023, 1:45am
4889
Thank you. Can you set the font size and weather icon size for mobile devices separately?
zs2766
April 23, 2023, 1:49am
4890
Thank you. Can you share your card template? I want to implement the characters in the circle on your card.
Laffer has his full config available, its linked in his profile.
2 Likes
