Do you happen to have any updates on this.
And would you mind explaining to me how you did this?
Thanks
1 Like
I can send you what I have been using that was based off the work from @htpc2308.
card template
in the button_card_templates folder add a file named weather.yaml
#################################################
# #
# Weather #
# #
#################################################
weather:
variables:
rain: ''
entity_picture: |
[[[
return entity && entity.state
? `/local/animated-weather-icons/${entity.state}.svg`
: '?';
]]]
name: |
[[[
return entity && entity.attributes && entity.attributes?.temperature
? `${entity.attributes.temperature}<sup>°</sup>`
: '?';
]]]
custom_fields:
rain: |
[[[
return entity && entity.attributes && entity.attributes?.forecast
? `${ entity.attributes.forecast[0].precipitation_probability} % Rain`
: '?';
]]]
home: |
[[[
return entity
? `Alkimos`
: '?';
]]]
show_icon: true
show_state: false
show_label: false
show_entity_picture: true
aspect_ratio: 1/1
styles:
############################################################################
# GRID (#container)
############################################################################
grid:
- grid-template-areas: |
'i n'
'home home'
'home home'
'rain rain'
- grid-template-columns: 1fr
- grid-template-rows: min-content repeat(2, 1fr) repeat(2, min-content)
- gap: 0%
entity_picture:
- position: relative
- margin-top: 0px
- margin-left: -45%
icon:
- align-self: left
- width: 60%
- justify-self: flex-end
name:
- justify-self: flex-end
- font-size: 2.4rem
- margin-top: 10%
- font-weight: bold
- text-transform: lowercase
label:
- width: 100%
state:
- justify-self: start
card:
- border-radius: calc(var(--button-card-border-radius) / 2)
- padding: 1rem
- height: 100%
- background-position: center
- background-size: cover
- background-repeat: no-repeat
color: |
[[[
const active = 'var(--nolu-color-active, rgb(22, 22, 22))';
const inactive = 'var(--nolu-color-inactive, rgb(245, 245, 245))';
const onState = ['on', 'auto', 'home', 'active', 'enabled', 'heat', 'cool', 'heat_cool', 'fan', 'open'];
const offState = ['off', 'unknown', 'unavailable', 'disabled', 'closed', 'not_home'];
return variables && variables.state && onState.some(state => variables.state.toLowerCase() === state)
? active
: inactive;
]]]
############################################################################
# CUSTOM FIELDS
############################################################################
custom_fields:
home:
- width: 200%
- place-self: start
- margin-left: -73%
- margin-top: 0px
- font-size: 1.7rem
- font-weight: light
rain:
- justify-self: flex-end
- font-size: 1.4rem
- font-weight: light
# https://developers.home-assistant.io/docs/core/entity/weather/#recommended-values-for-state-and-condition
extra_styles: |
[[[
let is_day = states['sun.sun'].state === 'above_horizon';
let image_path = '/local/weather_back/';
let cardBgColor = '';
let cardBgImage = '';
let image_name = '';
if (entity && entity.state) {
switch(entity.state) {
case 'sunny':
case 'clear-night':
image_name = is_day ? 'sunny_small.gif':'clear_night_small.gif';
break;
case 'windy':
case 'windy-variant':
case 'cloudy':
image_name = is_day ? 'cloudy_small.gif':'cloudy_night.gif';
break;
case 'fog':
image_name = 'fog_small.gif';
break;
case 'hail':
image_name = 'hail_small.gif';
break;
case 'lightning':
case 'lightning-rainy':
image_name = 'lightning_small.gif';
break;
case 'partlycloudy':
image_name = is_day ? 'partly_cloudy_small.gif':'partlycloudy_night.gif';
break;
case 'pouring':
image_name = is_day ? 'pouring.gif':'pouring_night.gif';
break;
case 'rainy':
image_name = is_day ? 'rainy_small.gif':'rainy_night.gif';
break;
case 'snowy':
case 'snowy-rainy':
image_name = 'snowy_small.gif';
break;
default:
cardBgColor = 'rgba(43, 104, 233, 1)';
image_name = '';
break;
}
cardBgColor = 'rgb(117,121,128)';
cardBgImage = image_name != ''?'linear-gradient(to bottom, rgba(117,121,128,0.4) 10% , rgba(0,0,0,0.4) 38%), url(' + image_path + image_name + ')':none;
}
return `
#aspect-ratio {
height: 100%;
}
#name > sup {
color: rgba(255, 255, 255, 0.5);
font-size: 2rem;
}
#wind span,
#humidity span,
#visibility span {
display: block;
width: 100%;
text-align: center;
}
#wind ha-icon,
#humidity ha-icon,
#visibility ha-icon {
--mdc-icon-size: 20px;
margin-top: 0.5rem;
}
#wind #title,
#humidity #title,
#visibility #title {
font-size: 0.95rem;
font-weight: 500;
margin-top: 0.5rem;
}
#title b {
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.6);
}
#wind #subtitle,
#humidity #subtitle,
#visibility #subtitle {
color: rgba(255, 255, 255, 0.6);
font-size: 0.90rem;
margin-top: 0.5rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#card {
background-color: ${cardBgColor};
background-image: ${cardBgImage};
}
@keyframes card_bounce {
0% {
transform: scale(1);
}
15% {
transform: scale(0.9);
}
25% {
transform: scale(1);
}
30% {
transform: scale(0.98);
}
100% {
transform: scale(1);
}
}
`;
]]]
Icons are from animated-weather-icons animated-weather-card/themes/icons at master · wowgamr/animated-weather-card · GitHub
icons
Create a folder named animated-weather-icons in the www folder and add the icons there.
I also have a few more backgrounds
backgrounds
create a folder named weather_back in the www folder and add the backgrounds, i got mine from the original post and a few from google. I used this site to resize and crop the backgrounds Resize animated GIF
usage
I used the 2/2 grid so if you want it as a small card you might need to mess with the spacing
update the font size and margin in the template
#################################################
# #
# Weather #
# #
#################################################
- type: grid
title: Weather
view_layout:
grid-area: Weather
columns: 1
cards:
- type: custom:button-card
entity: weather.home_2
template:
- base
- weather
All of the credit is @htpc2308’s
TODO’s
id like to add a forecast popover eventually but im happy with it for now, my current wether integration is not the best, it can be raining outside and the integration is saying it sunny…
3 Likes
triggers_update
try adding triggers_update: [shelly entity_id] to the bulb card, that might be it, the cards are only re rendered when the entity they are linked to is updated by default, this will make the bulb card re-render when the shelly entity is updated.
automation
but I think the issue is the bulb entity is still reporting to home assistant as on, you could add an automation to toggle the bulb when the shelly is toggled.
state_on with state_display
or you could add state_on that looks for the state of the shelly when calculating the state of the bulb.
this is an example of my soundbar that is never off so if it is in “E-ARC” (linked to the TV) but the TV is off then the sounder state is off when displaying the card
edit: to have the displayed state also work you need to add state_display this should be at the same tab level as variables: not inside it, see example.
variables:
state_on: >
[[[ return entity === undefined ? false : entity.attributes.source === "E-ARC" ? states["media_player.living_room_tv"].state === "on" : entity.attributes.source !== 'unknown' ]]]
state_display: >
[[[
return entity === undefined ? "undefined" : entity.attributes.source === "E-ARC" ? states["media_player.living_room_tv"].state === "on" ? "E-ARC" : "Idel" : entity.attributes.source
]]]
Thanks. trigger_update didn’t work, but the state_on works almost 100% only the written state “on/off” in the card is still on when the lamp is off.
But it helped me a lot ––– Thanks!
Best
Sascha
oh right, you can fix that with state_display: just use the same logic but replace false with "off" and and true with "on" I have updated the above example showing how I do it for my soundbar
or
you could update the state variables but that can get confusing
Thanks again.
Finally I take the time to migrate to the new version.
But one thing that didnt work is the update for hass.
I got this windows:
Whta do I need? And I didnt need the beta-versions, what ca i delete in the config?
But do I need docker_hub if my Home Assistant run on a raspberry pi?
Edit: And “hass_version_latest_beta” is still missing.
@Mattias_Persson @slofii Yes, I would also like to know that. Maybe someone could explain it with the updates. Thanks so much
Got my Home Assistant on a Pi without Docker.
Thx
https://www.home-assistant.io/installation/#compare-installation-methods
If your installation method “Uses container” you’re running docker, which is all except “Core”. But does it really matter though? All these sensors are doing is checking for latest HA version. My installation type is “Container”, so I don’t have access to the “Supervisor”, which is why I added the update footer popup.
You need the beta sensor unless you edit the updates_hass template
Having an interesting CSS issue that I am finding it very hard to diagnose. Pretty sure it has to do with using a conditional in the footer.
That gap shouldn’t be there. Here is my button code:
- type: conditional
conditions:
- entity: input_boolean.guests
state_not: 'on'
card:
type: custom:button-card
name: >
<ha-icon icon="mdi:cannabis"></ha-icon> Weed
tap_action:
!include popup/footer/nas.yaml
variables:
notify: >
[[[
let ping = states['binary_sensor.rpi_ping'];
if (ping) {
return ping.state === 'off';
}
]]]
template: footer
Any help is helpful.
Wondering the same. Any easy way to update?
Yeah, you are right, I added sensor.docker_hub and sensor.docker_hub_beta.
Also sensor.home_assistant_versions and sensor.home_assistant_versions_beta.
And of course the sensor.current_version.
But I still get the same error. Did I miss something?
For me, the update panel worked well, I did not change anything. Today an update appeared and such an error appeared. How can this be fixed?
UPDATE: @slofii this error is due to the sensor.haas release_notes and sensor.hass_release_notes_beta sensors being unavailable
My both hass_release_notes sensors are working fine.
The state on both are 2022.8.5
Yep, I’m aware of this, the issue is that I can’t see anything granting Margin or Padding to the right.
EDIT:
Here is the culprit. It’s a constructed stylesheet that I cannot find the source for. And for whatever reason, I am not able to manipulate the styles of the conditional card here. Possibly because I am doing it wrong.
-
You can edit the styles in dev tools. Press arrow keys to quickly scroll through all options. Finding that
display: contentsworks took < 1min -
#themes.yaml card-mod-view-yaml: | grid-layout$hui-horizontal-stack-card$: | hui-conditional-card, button-card { display: contents; }
1 Like
Have you added hass-config/configuration.yaml at 92aecab7b7cfda00ab5232570703a51fa3a76dd1 · matt8707/hass-config · GitHub
It’s needed to parse the release notes