Doh, we had that originally but I put a semicolon on the first line… 
1 Like
No worries, I probably didn’t describe it well enough. I seem to be 10 degrees below what actually happens. So if tomorrow says it will be 80 it actually is closer to 90 or 95 most of the time. How accurate is your future forecast when you tap on the card. I guess is a better way to ask.
I have noticed that sometimes the days don’t display correctly and are off by one.
Clear your browser cache, you’re not using the latest version.
Yes, with custom fields and that would be as easy as: entity.state / 1000 
someone has an idea how to help ?
Just recently started trying out this card, looks very powerful! Thanks!
I’m wanting to use this card’s Configuration Template, and do a few overrides in the entity’s config.
In particular I wanted to change icons based on the state of the entity within the entity’s configuration, but no luck.
I came up with a simple test that, rather than change the icon, instead simply change the spin state of the icon.
The Config template:
button_card_templates:
bc_template_test:
state:
- value: 'on'
spin: true
The entity config:
- title: test
cards:
- type: custom:button-card
template: bc_template_test
name: test
entity: light.br30_1
state:
- value: 'on'
spin: false
The result is when I turn the light ‘on’ the icon spins.
I was expecting the entity config’s spin state to override the template’s spin state which would have been to not spin. Any suggestions?
Absolutely, there’s a lot of improvements that can be made, especially with the am/pm variance (I haven’t figured that out yet) I set this as a template while testing it so you could remove the weather: if not needed. let me know if you make any improvements.
weather:
color: rgb(0,0,0)
color_type: label-card
aspect_ratio: 2/1
show_entity_picture: true
layout: icon_name
show_name: true
tap_action:
action: more-info
haptic: heavy
show_state: false
show_label: true
styles:
grid:
- grid-template-areas: '"n i" "s i" "l i"'
- grid-template-columns: 1fr 50%
card:
- border-radius: 5px
- margin: 5px 5px 0px 0px
- padding: 0px 0px
- background-color: rgb(0,0,0)
- box-shadow: 1px 1px 12px 2px rgb(255,0,0)
icon:
- height: 120px
- width: 120px
- justify-self: center
name:
- justify-self: start
- padding: 0px 10px
- font-size: 10px
label:
- padding: 7px
- font-size: 20px
- font-weight: bold
- font-family: Helvetica
- color: rgb(255,255,255)
entity: weather.dark_sky
label_template: >
var options = { hour: 'numeric', minute: 'numeric' };
var sunrise_date = new Date(states['sun.sun'].attributes.next_rising);
var sunrise_time = sunrise_date.toLocaleDateString("en-US", options).split(",")[1];
var sunset_date = new Date(states['sun.sun'].attributes.next_setting);
var sunset_time = sunset_date.toLocaleDateString("en-US", options).split(",")[1];
return '<div align="left">' +
'<div style="font-weight: normal; font-size: 15px; margin-top: 10px;">' +
'<ha-icon icon="mdi:weather-sunset-up" style="width: 15px; color: #f4e842; padding-bottom: 0px;"></ha-icon> ' +
sunrise_time +
'</div>' +
'<div style="font-weight: normal; font-size: 15px; margin-top: -10px;">' +
'<ha-icon icon="mdi:weather-sunset-down" style="width: 15px; color: #f4e842; padding-bottom: -5px;"></ha-icon> ' +
sunset_time +
'</div>' +
'</div>';
name_template: >
var degree = 45;
var angle = entity.attributes.wind_bearing + 22.5;
var direction = (angle >= 0 * degree && angle < 1 * degree) ? "N" :
(angle >= 1 * degree && angle < 2 * degree) ? "NE" :
(angle >= 2 * degree && angle < 3 * degree) ? "E" :
(angle >= 3 * degree && angle < 4 * degree) ? "SE" :
(angle >= 4 * degree && angle < 5 * degree) ? "S" :
(angle >= 5 * degree && angle < 6 * degree) ? "W" :
(angle >= 6 * degree && angle < 7 * degree) ? "NW" : "N";
return '<div align="start" style="padding-top: 20px;">' +
'<div style="font-size: 20px;">' + entity.attributes.temperature + '°F</div>' +
'<div style="font-size: 10px;">High ' + entity.attributes.forecast[0].temperature + '°F <br>Low ' + entity.attributes.forecast[0].templow + '°F </div>' +
'</div>' +
'</div>' +
'</div>';
icon: mdi:weather-sunny
state:
- value: clear-night
entity_picture: /local/icons/weather_icons/animated/night.svg
- value: cloudy
entity_picture: /local/icons/weather_icons/animated/cloudy.svg
styles:
card:
- box-shadow: 0px 0px 10px 3px purple
icon:
- color: purple
- value: overcast
entity_picture: /local/icons/weather_icons/animated/cloudy.svg
styles:
card:
- box-shadow: 0px 0px 10px 3px purple
icon:
- color: purple
- value: fog
entity_picture: /local/icons/weather_icons/animated/cloudy.svg
styles:
card:
- box-shadow: 0px 0px 10px 3px purple
icon:
- color: purple
- value: hail
entity_picture: /local/icons/weather_icons/animated/rainy-7.svg
styles:
card:
- box-shadow: 0px 0px 10px 3px white
icon:
- color: white
- value: lightning
entity_picture: /local/icons/weather_icons/animated/thunder.svg
styles:
card:
- box-shadow: 0px 0px 10px 3px #03a9f4
icon:
- color: #03a9f4
- value: lightning-rainy
entity_picture: /local/icons/weather_icons/animated/thunder.svg
styles:
card:
- box-shadow: 0px 0px 10px 3px #03a9f4
icon:
- color: #03a9f4
- value: partlycloudy
entity_picture: /local/icons/weather_icons/partlycloundynight.png
- value: pouring
icon: mdi:weather-pouring
styles:
card:
- box-shadow: 0px 0px 10px 3px #03a9f4
icon:
- color: #03a9f4
- value: rainy
entity_picture: /local/icons/weather_icons/animated/rainy-7.svg
styles:
card:
- box-shadow: 0px 0px 10px 3px #03a9f4
icon:
- color: #03a9f4
- value: snowy
entity_picture: /local/icons/weather_icons/animated/snowy-6.svg
styles:
card:
- box-shadow: 0px 0px 10px 3px white
icon:
- color: white
- value: snowy-rainy
entity_picture: /local/icons/weather_icons/animated/snowy-6.svg
styles:
card:
- box-shadow: 0px 0px 10px 3px white
icon:
- color: white
- value: sunny
entity_picture: /local/icons/weather_icons/animated/day.svg
styles:
card:
- box-shadow: 0px 0px 10px 3px yellow
icon:
- color: yellow
- value: windy
entity_picture: /local/icons/weather_icons/animated/cloudy.svg
- value: windy-variant
entity_picture: /local/icons/weather_icons/animated/cloudy.svg
2 Likes
Try this for your setup, it’s simplified version without any templates needed:
Post screenshot if not working.
1 Like
Thank for trying help out, unforetentaly still now working, maybe i’m doing something wrong ,
please look at ui-lovelace config:
- title: Info
icon: mdi:cctv
cards:
- type: picture-entity
entity: camera.camera
camera_view: live
name: Camera
- type: picture-entity
entity: camera.camera_wyze
camera_view: live
name: Wyze
- type: "custom:button-card"
aspect_ratio: 1/1
styles:
card:
- padding: 5%
- color: #1E2747
- font-size: 11px
- text-shadow: 0px 0px 5px black
- text-transform: capitalize
- border-radius: 15px
grid:
- grid-template-areas: '"icn icn" "n n" "i i"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr 1fr 3fr
name:
- font-weight: bold
- font-size: 15px
- align-self: middle
- justify-self: start
- padding-bottom: 4px
img_cell:
- margin: none
- align-items: flex-end
- justify-content: center
icon:
- width: 100%
label:
- align-self: middle
custom_fields:
icn:
- align-self: start
tap_action:
action: more-info
custom_fields:
icn: >
[[[
return "<div style='text-align: start;'><ha-icon icon='mdi:cctv' style='color: lime; width: 30px; height: 30px;'></ha-icon></div>";
]]]
entity: camera.camera_wyze
show_entity_picture: "true"
thanks,for share it
1 Like
Yea, I know. It’s a lot to take in, this card is the best but it does have a big learning curve. I’m persistent I’ll eventually understand it all. This button should be a part of the core ui in home assistant. Thanks for all you have done up to this point RomRider!
1 Like
This card will never be part of core, for what’s worth. But I think that’s for the best as it really is for advanced users. Can you imagine a UI editor for this beast? Doable, sure, but boy would it be crazy.
3 Likes
No doubt! I’m still amazed by what this card can do. The only real limitation is your imagination.
Without people like you @iantrich and @RomRider and so many others this platform wouldn’t be as advanced as it is today.
Seriously thanks for all you guys do! For all the time you spend helping others. For donating your time and skills and never asking for anything in return. It’s truly awe inspiring.
This community is the best!
3 Likes
Yes that worked! Thanks. 
@RomRider I have a crazy feature request. I know you hate Apple but I have been told that not trying will result in a guaranteed loss.
Anyways I use @roflcoopter great mod to have 3d touch on the buttons. For me it doesn’t work really well but that aside it is a great feature and I think it would suit this button-card best.
So my request is: could you add 3d touch features to the button? Answer is probably yes, though my real question is: would you be willing to? 
1 Like
I can probably have a look.
I’m wondering 2 things though:
- Why isn’t it working correctly with @roflcoopter’s card?
- Would that be a different action than
hold? I mean does the device manage to differentiate aholdfrom adeep press?
Ah, his card works well, but it has the same problem as yours (and core one for that matter) had with iOS 13. Basically when you use a deep_press action it will immediately tap the button which pops up. For example, if a light gets deep_pressed with a colorwheel it will immediately turn on the light with a set color which is beneath it.
Second it doesn’t work with iPhones and Androids mixed, if deep_press is true than Androids can not use a hold_action anymore. And I know you are an Android guy XD.
The configuration seems okay.
Could you please inspect the element with your browser debugger tool please? Then right click on the link displayed and select “open in a new tab”, is the image displaying there?
Also, could you please share the full state of your camera entity? Obfuscate the token if there is one in the entity_picture attribute.
1 Like
I can probably embed that feature directly into button-card, but that seems to be something which should be fixed in the deep-press card, don’t you think so?
I can have a look there and maybe PR something. Thoughts? @roflcoopter what do you think?