How did you handle the update panel? How do you update HASS?
Hey Alfie,
In Button_Cards_Templates, at the bottom, are where the icons are defined. It’s pretty simple to add a new one.
for you, create a new template called like “Icon-Alexa_Alfie” using a template from one of the static icons (like icon_apple_tv). Next, find an SVG online that you like and download it. Open this SVG with notepad, and copy the SVG path data like you see it in the icon_apple_tv entry.
Lastly, add “Icon-Alexa_Alfie” as a template used in the card in bedroom you want to change to use that icon, delete the old one and wualah you’re good to go.
You don’t want to use images for these for sure. SVG’s are the way to go.
Hi, are you on the latest HA Version? if so how did you handle the sidebar template? for me it’s broken…
Hey Corey, thank you for the detailed response.
I had tried previously to mess with SVG’s, and was struggling to understand the path data. Admittedly, it was very late in the evening when I attempted this, so hadn’t given it my best effort.
I will revisit the SVG’s using your advice 
Thanks again.
Alfie
Hey, sorry, not sure I understand.
I’m constantly working on my HA instance and forever changing things, so can’t remember anything specific I have done.
Happy to share my code though, what part do you need help with?
Hey, yes on the latest version.
Which part errors for you? As mentioned above, happy to share my code.
This is an extract from my includes/templates.yaml
- sensor:
- unique_id: sidebar
state: template
attributes:
time: >
{% set hours = now().strftime('%H') %}
{% set minutes = now().strftime('%M') %}
<span class="time">
{{ hours }}<span class="time-colon">:</span>{{ minutes }}
</span>
date: >
<font color='#6a7377'><b>
{% if strptime(states('sensor.date'), '%Y-%m-%d').day != null %}
{% set days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'] %}
{% set months = ['January', 'February', 'March', 'April', 'May', 'June',
'July', 'August', 'September', 'October', 'November', 'December'] %}
{{ days[now().weekday()] }}<br>
{{ strptime(states('sensor.date'), '%Y-%m-%d').day }} {{ months[now().month-1] }}
{% endif %}
</b></font>
greet: >
<b>
{% set time = now().hour %}
{% if time <= 1 %} Good night {{'\U0001F611'}}
{% elif time <= 3 %} Good night {{'\U0001F62A'}}
{% elif time <= 5 %} Good night {{'\U0001F634'}}
{% elif time <= 7 %} Good morning {{'\U0001F4A9'}}
{% elif time <= 9 %} Good morning {{'\u2615\uFE0F'}}
{% elif time <= 10 %} Good morning {{'\U0001F642'}}
{% elif time <= 13 %} Good afternoon {{'\U0001F60A'}}
{% elif time <= 15 %} Good afternoon {{'\U0001F60E'}}
{% elif time <= 17 %} Good afternoon {{'\U0001F44B\U0001F3FB'}}
{% elif time <= 19 %} Good evening {{'\U0001F44B\U0001F3FB'}}
{% elif time <= 22 %} Good evening {{'\U0001F60C'}}
{% elif time <= 23 %} Good evening {{'\U0001F974'}}
{% else %} Good evening {{'\U0001F974'}}
{% endif %}
</b>
active: >
<b>
{% set lights = [
states.light.living_room_light,
states.light.bedroom_light,
states.light.REDACTED_light,
states.light.girls_light,
states.light.pickaxe,
states.light.office_leds,
states.light.REDACTED_leds,
states.light.status_light,
states.switch.alfie_lamp,
states.switch.floor_lamp,
states.switch.kitchen_light,
states.switch.basking_lamp
] %}
{% set switches = [
states.switch.basking_lamp
] %}
{% set media_players = [
states.media_player.bedroom_tv,
states.media_player.virgin_tv
] %}
{% set lights_on = lights | selectattr('state','eq','on') | list %}
{% set lights_name = lights | selectattr('state','eq','on') | map(attribute='name') | join(', ') %}
{% set switches_on = switches | selectattr('state','eq','on') | list %}
{% set media_players_playing = media_players | selectattr('state','eq','playing') | list %}
{% set append = switches_on + media_players_playing %}
{% set switches_name = append | map(attribute='name') | join(', ') %}
{% if (lights_on | length == 0) and (switches_on | length > 0) %}
{{ switches_name | regex_replace(',([^,]*)$',' and\\1') }} are on
{% elif (lights_on | length == 1) and (switches_on | length == 1) %}
{{ lights_name }}, {{switches_name }} are on
{% elif (lights_on | length == 1) and (switches_on | length > 1) %}
{{ lights_name }}, {{ switches_name | regex_replace(',([^,]*)$',' and\\1') }} are on
{% elif (lights_on | length > 1) and (switches_on | length == 1) %}
{{ lights_on | length }} lights and {{ switches_name }} are on
{% elif (lights_on | length > 1) and (switches_on | length > 1) %}
{{ lights_on | length }} lights, {{ switches_name | regex_replace(',([^,]*)$',' and\\1') }} are on
{% elif (lights_on | length == 1) and (switches_on | length == 0) %}
{{ lights_name }} are on
{% elif (lights_on | length > 1) and (switches_on | length == 0) %}
{{ lights_on | length }} lights are on
{% else %}
<font color='#6a7377'>Everything is off</font>
{% endif %}
</b>
weather: >
{% set temperature = states('sensor.openweathermap_temperature') %}
{% set apparent = states('sensor.openweathermap_feels_like_temperature') | round %}
{% set precip = states('sensor.openweathermap_forecast_precipitation_probability') | round %}
{% if not is_state('sensor.openweathermap_temperature', 'unknown') %}
{% if temperature | float(default=0) <= 0.0 %}
Feels like {{ apparent }}° with {{ precip }}% risk of snow {{'\u2744\uFE0F'}}
{% elif temperature | float(default=0) > 0.0 %}
Feels like {{ apparent}}° with {{ precip }}% risk of rain {{ '\u2614\uFE0F' if precip > 30 }}
{% endif %}
{% else %}
Unable to load weather information ...
{% endif %}
transport: >
Commute to work is {{ states('sensor.commute_to_work') }} mins
battery: >
{% set entities = states.sensor
| selectattr('entity_id', 'search', 'level')
| rejectattr('entity_id', 'search', 'REDACTED')
| map(attribute = 'entity_id') | list %}
{% for sensor in entities if states(sensor) != 'unknown' and states(sensor) !=
'unavailable' and states(sensor) != 'None' and states(sensor) | int(default=0) <= 20 %}
{% if loop.first %} {{'\u26A0\uFE0F'}} {% else %}| {% endif %}
{{ state_attr(sensor, 'friendly_name') }} {{ states(sensor) }}%
{% endfor %}
internet: >
{% if is_state('binary_sensor.archer_ax11000_wan_status', 'off') %}
{{'\u26A0\uFE0F'}} Check Internet Access
{% endif %}
- unique_id: hass_version
state: >
{{ 'Latest' if states('sensor.template_hass_version') ==
states('sensor.template_hass_version') else states('sensor.template_hass_version') }}
attributes:
friendly_name: >
Installed {{ states('sensor.template_hass_version') }}
icon: mdi:home-assistant
- unique_id: hass_dev_release
state: >
{% set start_time = state_attr('calendar.home_assistant_devs', 'start_time') %}
{{ (as_timestamp(start_time, default=0) + 60*60*20.5) | timestamp_local(default) }}
attributes:
friendly_name: >
{% set release = state_attr('calendar.home_assistant_devs','message') %}
{% if release == 'Home Assistant Core Beta Release' %}
Next beta
{% elif release == 'Home Assistant Core Release' %}
Next release
{% else %}
{{ release }}
{% endif %}
icon: mdi:dev-to
device_class: timestamp
I’m interested in the popup / footer / update.yaml file
This is my current popup/footer/updater.yaml
action: fire-dom-event
browser_mod:
command: popup
title: Updates
style:
.: |
:host .content {
width: 100%;
}
hui-grid-card:
$: |
button-card:nth-child(2),
button-card:nth-child(4) {
margin: 0.6em 0 2.1em 0.8em;
}
button-card:nth-child(6) {
margin: 0.6em 0 0.5em 0.8em;
}
#root {
grid-gap: 0 !important;
padding: var(--card-content-padding);
width: max-content;
}
card:
type: grid
columns: 1
square: false
cards:
- type: custom:button-card
entity: sensor.template_hass_version
template: updater_hass
- type: custom:button-card
entity: sensor.template_hass_version
triggers_update:
- sensor.template_hass_version
- sensor.template_hass_dev_version
name: Update HASS
icon: mdi:update
styles:
card:
- width: max-content
- filter: >
[[[
return `[[[
if (entity) {
return entity.state === states['sensor.template_hass_version'].state ||
entity.state === states['sensor.template_hass_dev_version'].state
? 'opacity(30%)'
: 'drop-shadow(3px 3px 5px #00000050)';
}
]]]`
]]]
- display: >
[[[
return `[[[
return entity
? 'flex'
: 'none';
]]]`
]]]
tap_action:
services: |
[[[
return `[[[
hass.callService('browser_mod', 'toast', {
message: 'Start watchtower...'
});
hass.callService('switch', 'turn_on', {
entity_id: 'switch.docker_watchtower'
});
]]]`
]]]
template: icon_name
- type: custom:button-card
entity: sensor.hacs
template: updater_hacs
- type: custom:button-card
entity: sensor.hacs
name: Open HACS
icon: mdi:open-in-new
styles:
card:
- width: max-content
- filter: >
[[[
return `[[[
if (entity) {
return entity.state === '0'
? 'opacity(30%)'
: 'drop-shadow(3px 3px 5px #00000050)';
}
]]]`
]]]
- display: >
[[[
return `[[[
return entity && entity.state !== 'unknown'
? 'flex'
: 'none';
]]]`
]]]
template: >
[[[
return window.navigator.userAgent.match(/iPhone/i)
? 'hacs_navigate_ios'
: 'hacs_iframe';
]]]
# - type: custom:button-card
# entity: sensor.template_updates
# template: updater_other
Do you have switch.docker_watchtower ? It doesn’t work for me. I have a watchtower installed
how would i fix the scaling on the solarcard
#################################################
# #
# SOLAR #
# #
#################################################
- type: grid
title: Solar & Power
view_layout:
grid-area: solar
columns: 1
cards:
- type: 'custom:tesla-style-solar-power-card'
generation_icon: 'mdi:solar-power'
house_without_appliances_values: 1
show_w_not_kw: 1
show_gap: true
###Grid Power###
grid_to_house_entity: sensor.solax_apf_grid2house
grid_to_battery_entity: sensor.solax_apf_grid2batt
###Solar Power###
generation_to_grid_entity: sensor.solax_apf_solar2grid
generation_to_battery_entity: sensor.solax_apf_solar2batt
generation_to_house_entity: sensor.solax_apf_solar2house
###Battery Power###
battery_to_house_entity: sensor.solax_apf_batt2house
battery_to_grid_entity: sensor.solax_apf_batt2grid
grid_entity: sensor.solax_measured_power
house_entity: sensor.solax_apf_real_house_load
house_extra_entity: sensor.solax_inverter_temperature
generation_entity: sensor.solax_pv_total_power_2
generation_extra_entity: sensor.solax_apf_mode_short
battery_entity: sensor.solax_battery_power_charge
battery_extra_entity: sensor.solax_battery_capacity
# extra values to show as text above icons
#battery_extra_entity: sensor.solax_x1h_batpower
generation_extra_entity: sensor.openweathermap_cloud_coverage
grid_extra_entity: sensor.electric_cost_today
# optional appliances with consumption and extra values
appliance1_consumption_entity: sensor.psl_247045_current_energy_2
appliance1_extra_entity: sensor.i3_120_remaining_battery_percent
appliance2_consumption_entity: sensor.psl_247045_current_energy_2
appliance2_extra_entity: sensor.i3_120_remaining_battery_percent
appliance2_icon: 'mdi:car-sports'
# optional 4 main bubble icons for clickable entities
#grid_entity: sensor.smart_meter_electricity_import
#house_entity: sensor.solax_house_load
#generation_entity: sensor.solax_inverter_power
#battery_entity: sensor.solax_x1h_batpower
template:
- base
No, unfortunately this is not something I am using atm
You don’t need to always use SVGs. Here’s an example on how to use just a simple icon:
chandelier_icon:
styles:
custom_fields:
icon:
- width: 78%
- margin-left: -5%
- color: >
[[[ return variables.state === 'on' ? '#000000' : '#9da0a2'; ]]]
custom_fields:
icon: >
<ha-icon icon="mdi:chandelier"></ha-icon>
1 Like
someone has a way to update HASS from the update.yaml panel?
hi @AlfieJ04 my sidebar is completely missing on the latest version. the code looks the same as yours.
I don’t know what to do anymore…
I had the same problem. When I put the system back, it works
put the system back means?
This is exactly what I was looking for! Thank you
Have you checked the ha log and tried developer tools on your dashboard to check for any errors?
If I remember correctly, there was an earlier post that mentioned about renaming the sidebar template temporarily and then changing it back
EDIT: Added link to post
I put the whole HA system up again
Did you fix it ? I am having the same Issue.
THX a lot