You are awesome @RomRider! Great to know. Thanks so much!
One more question…can I set a left hand margin in a horizontal stack? I kind of like them pinned to the left but would like some space between the edge of my screen and the edge of the button.
trying to use button-card to show a still image of my camera. So far no luck. All the http address I tried (there are 2 different examples) WORK in my browser and show a still image, However, when I pass the URL to the button card, it just shows a broken picture icon.
BTW, button-card and live stream work (of course the card configuration looks different) so this doesn’t look like any credential issues.
- type: custom:button-card
entity: camera.gate
size: 100%
show_state: false
show_label: false
show_name: true
show_entity_picture: true
aspect_ratio: 1/1
color_type: card
#entity_picture: 'http://admin:[email protected]/ISAPI/Streaming/channels/01/picture'
entity_picture: 'http://admin:[email protected]/Streaming/channels/02/picture'
For now to solve this i made a transparent button on the left of the card the amount of pixels I wanted to space. May not be the best way to do it but it looks fine in the end.
Why redefine the entity_picture? It should be available in your camera entity already, no?
@RomRider good question… When i remove the entity_picture declaration, the still image is show just as expected. Go figure, I try to make the definition extensive and instead I break it.
Below is what WORKING custom-card (basic configuration) with camera still image.
Now I’ll need to figure out how to update the still image every 5 or 10 seconds. The idea is to show quick periodic camera still images, rather then continuous live-stream. I figure 14 cameras showing live stream cant been good for performance nor network.
- type: custom:button-card
entity: camera.gate
size: 100%
show_state: false
show_label: false
show_name: true
show_entity_picture: true
aspect_ratio: 1/1
color_type: card
Hello, I can’t seem to figure out how to input the state of an entity into a custom string.
Ex: I want to create a weather card that states the weather conditions as follows:
“It is (insert state) in Vancouver.”
The entity is “weather.vancouver”.
Does anyone know what template I would input in that string?
Right, I see. I did it this way (you can change the aspect ratio in the code below or not define it if you want):
show_entity_picture: false
show_icon: false
custom_fields:
camera_image: |
[[[
return html`
<hui-image
.hass=${hass}
.cameraImage=${entity.entity_id}
.entity=${entity.entity_id}
.cameraView="auto"
aspectRatio="1"
></hui-image>
`;
]]]
styles:
custom_fields:
camera_image:
- position: absolute
- width: 100%
- height: 100%
- z-index: 0
It will refresh every now and then automatically (like every 5/10 sec).
Edit: I should probably do this by default when the entity is a camera 
The template would be : '[[[ return `It is ${states["weather.vancouver"].state} in Vancouver` ]]]'
@RomRider
Interesting it works. Thanks for the guidance!!
Is there a way to make the time programmable? I was thinking of combining action with timeout, and triggers_update. no idea if it would work, just where i was going to start.
Not programable no, it’s using the default ha core hui-image that implements the refresh on itself (see here, the value is 10sec)
I was wondering if someone could help. I am trying to set an icon color based on the fan speed. I can’t figure out how to base it on attributes other than the state.
Something like this (you’ll have to change this based on your actual values):
styles:
icon:
- color: |
[[[
const attr = entity.attributes.ATTRIBUTE_NAME_OF_THE_SPEED
if (attr == "low") return "green";
else if (attr == "medium") return "orange";
else if (attr == "high") return "red";
else return "black";
]]]
Thank you it worked perfectly!
You are awesome my friend! That worked perfectly!
Can I use two conditions in javascript functions? Something like this:
name: '[[[ if (entity.state1 > 42) and (entity.state1 < 1) return "YES"; else return "NO" ]]]'
Thanks!
Google would help you also but here you go:
name: '[[[ if (entity.state > 42 && entity.state < 1) return "YES"; else return "NO" ]]]'
I tried that wont work. i tried to just copy and paste the layout of the example for the apple Homekit Style button.
entity: switch.fernsehen
type: 'custom:button-card'
name: Wohnzimmer
show_state: true
styles:
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: start
- text-align: start
name:
- justify-self: start
- padding-left: 10px
- font-weight: bold
- text-transform: lowercase
state:
- justify-self: start
- padding-left: 10px
It turns out like this:
No matter what i change up the icon wont move
The example is not up to date, sorry. That will do what you want:
styles:
img_cell:
- justify-content: start
- align-items: start
this does not work too…
this must seem ridiculously silly, but since I have apparently never consciously encountered the issue, please let me ask anyhow:
using an entity of the domain sensor, the default action ‘toggle’ doesn’t do anything obviously. Wouldn’t it be logical to have a more-info action be default for the domain sensor? Ive been taking that for granded tbh, and wondered why my speedtest sensors didn’t do anything when clicked on…
type: horizontal-stack
cards:
- type: 'custom:button-card'
entity: sensor.speedtest_download
name: Download
show_state: true
tap_action:
action: more-info
hold_action:
action: more-info
styles:
card:
- background-color: >
[[[ var state = entity.state;
if (state > 200) return 'green';
if (state > 100) return '#c78822';
return '#819662'; ]]]
- type: 'custom:button-card'
entity: sensor.speedtest_upload
name: Upload
show_state: true
tap_action:
action: more-info
hold_action:
action: more-info
styles:
card:
- background-color: >
[[[ var state = entity.state;
if (state > 30) return 'green';
if (state > 15) return '#c78822';
return '#819662'; ]]]
- type: 'custom:button-card'
entity: sensor.speedtest_ping
name: Ping
show_state: true
tap_action:
action: more-info
hold_action:
action: more-info
styles:
card:
- background-color: >
[[[ var state = entity.state;
if (state > 20) return 'green';
if (state > 8) return '#c78822';
return '#819662'; ]]]
only after adding these tap and hold action to all entities did it work as I would have thought to be obvious.
again, sorry if this is completely inadequate, has been debated before (did a quick search with 0 results in this thread), or my config above is wrong.
If the answer to all 3 above is No, then please let me file a FR for default action more-info on non toggle-able entities?
thanks