parautenbach
August 14, 2020, 1:49pm
4342
I have an MQTT camera serving album covers as part of a shairport-sync (playing audio with Apple Airplay to an RPi) project I’m working on. I want to display this image filling all of the available area of the button.
Here is my config:
- type: custom:button-card
entity: camera.main_bedroom_audio_album
show_live_stream: true
aspect_ratio: 1/1
show_name: false
styles:
img_cell:
- margin: none
grid:
- grid-template-areas: "i"
- grid-template-rows: 100%
- grid-template-columns: 100%
For some reason that I can’t figure out, a downsized image gets displayed (it’s 512x512 and displays just fine if I use e.g. a picture-glance card). I get the same effect if I don’t use a camera entity and a combination of show_entity_picture and entity_picture.
If I specify a card width and height, then it seems to work:
- type: custom:button-card
entity: camera.main_bedroom_audio_album
show_live_stream: true
aspect_ratio: 1/1
show_name: false
styles:
card:
- height: 100px
- width: 100px
- margin: none
icon:
- height: 100px
- width: 100px
- margin: none
img_cell:
- margin: none
grid:
- grid-template-areas: "i"
- grid-template-rows: 100%
- grid-template-columns: 100%
But now my problem is that if I add another card below it the button it overlays the button (and it doesn’t seem to matter which kind of card).
- type: vertical-stack
cards:
- type: custom:button-card
entity: camera.main_bedroom_audio_album
show_live_stream: true
aspect_ratio: 1/1
show_name: false
styles:
card:
- height: 100px
- width: 100px
- margin: none
icon:
- height: 100px
- width: 100px
- margin: none
img_cell:
- margin: none
grid:
- grid-template-areas: "i"
- grid-template-rows: 100%
- grid-template-columns: 100%
- type: markdown
content: "Test!"
I figured out this has to do with specifying aspect_ratio so removing that I get this but now I sit with the white bars at the top and bottom. I’m guessing that the renderer thinks it can fit the markdown card next to the button but then doesn’t fit it properly. I don’t know how to control this.
My last question related to all of this is whether it is possible to specify both a background image and the camera entity: The reason is that if there is no camera data (i.e. no cover image when there’s no stream), I want to display a default cover image. My workaround is to have the album cover retained in mosquitto (my MQTT broker). This means I’ll always see the last cover which isn’t a terrible solution but also not ideal. I tried setting both entity_picture and entity but that doesn’t work because intuitively it makes sense to me that those are mutually exclusive options. I think it might be possible using extra_styles but the warning in the docs that if you set this on your first button it will apply for all the buttons on that view makes this an infeasible option so I didn’t even try it.
KTibow
August 14, 2020, 2:29pm
4343
Sorry if someone has asked this before, but how do I use grid with custom fields?
KTibow
August 14, 2020, 2:31pm
4344
Solved, looks like the name of your custom field is the name.
Artekus
August 14, 2020, 5:18pm
4345
I’m having trouble using the “contrast” option for “filter:” It appears to apply and then stop applying after a moment. I tried removing the transition to see if that was it but it doesn’t make a difference. Can some one help me get it to stick?
entity: switch.mud_room_lamp
icon: 'mdi:floor-lamp'
show_name: true
show_state: true
styles:
card:
- border-radius: 10px
- width: 200px
grid:
- grid-template-areas: '"n" "i" "s"'
name:
- color: white
- font-size: 20px
- text-transform: uppercase
state:
- color: white
- font-size: 20px
- text-transform: uppercase
state:
- styles:
icon:
- color: 'rgb(255,255,194)'
- filter: 'drop-shadow(0px 0px 20px rgb(255, 255, 194)) contrast(1.7)'
- transition: all 1s ease
value: 'on'
type: 'custom:button-card'
Follow-up: Looks like its related to the browser. Worked fine in Firefox just doesn’t stick with Chrome for some reason.
KTibow
August 14, 2020, 5:20pm
4346
Do you mean the ripple? It appears when you click on it. And you’re only applying the contrast to the icon, not the whole card…
Artekus
August 14, 2020, 6:23pm
4347
I’m only looking for it to apply it to the icon along side of the drop-shadow. Fine tuning so to speak. The brighter glow should remain which is what I’m after.
KTibow
August 14, 2020, 6:25pm
4348
If you want it brighter, just change the color attribute… I don’t get what you’re going for.
Artekus
August 14, 2020, 6:39pm
4349
Take look at the GIF. When it changes to on, the yellow “glow” gradually gets brighter but then abruptly reverts while still in the “ON” state. This is before the GIF resets back to the beginning which you’ll notice its back to the off state. I want that glow to stick at that level of contrast/brightness when the state is “ON” but it isn’t.
KTibow
August 14, 2020, 6:41pm
4350
Odd. Can you open devtools, use the upper-left button to select the icon, and see if the CSS is applied?
Artekus
August 14, 2020, 7:02pm
4351
It appears to be.
From developer tools of Chrome:
<ha-icon id="icon" style="color: rgb(255, 255, 194); width: 40%; position: relative; filter: drop-shadow(rgb(255, 255, 194) 0px 0px 20px) contrast(1.7); transition: all 1s ease 0s;"></ha-icon>
Hi, guys.
But without sucess:
My code:
light_button_card:
default:
- size: 30%
- lock: false
- color: auto
- spin: false
- show_state: true
- show_label: true
- show_last_changed: false
- tap_action: toggle
- hold_action: more-info
- aspect_ratio: 1/1
card:
type: custom:button-card
name: '[[name]]'
icon: 'mdi:[[icon]]'
size: '[[size]]'
color: '[[color]]'
lock: '[[lock]]'
aspect_ratio: '[[aspect_ratio]]'
entity: '[[entity]]'
show_state: '[[show_state]]'
show_label: '[[show_label]]'
show_last_changed: '[[show_last_changed]]'
tap_action:
action: '[[tap_action]]'
haptic: light
hold_action:
action: '[[hold_action]]'
haptic: success
styles:
custom_fields:
area: '[[area]]'
label: >
[[[
if (typeof(entity) === 'undefined') return;
if ('brightness' in entity.attributes)
{
if (entity.attributes
&& (entity.attributes.brightness <= 255)) {
var bri = Math.round(entity.attributes.brightness / 2.55);
return (bri ? bri : '0') + '%';
}
}
]]]
card:
- border-radius: 12px
- --paper-card-background-color: var(--homekit-white)
label:
- color: gray
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: start
state:
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: start
- text-transform: capitalize
- font-weight: bold
- padding-left: 10px
grid:
- grid-template-areas: '"i i" "n n" "area area" "s l"'
- grid-template-columns: 1fr lfr
- grid-template-rows: 1fr min-content min-content min-content
img_cell:
- align-self: start
- text-align: start
- margin-right: 60px
name:
- justify-self: start
- padding-left: 10px
- font-weight: bold
- font-family: Helvetica
- font-size: 13px
state:
- value: "on"
spin: '[[spin]]'
styles:
name:
- color: black
state:
- color: gray
lock:
- color: black
- value: "off"
styles:
card:
- opacity: 0.4
icon:
- color: gray
name:
- color: gray
state:
- color: gray
lock:
- color: black
- value: "unavailable"
styles:
card:
- opacity: 0.2
icon:
- color: gray
state:
- color: gray
name:
- color: gray
any input please?
KTibow
August 15, 2020, 5:33pm
4354
Do a browser inspect + screenshot?
yoni3210
August 15, 2020, 5:41pm
4355
Hi @ajoyce
Tx
thmry
August 16, 2020, 9:06am
4356
I haven’t touched my Home Assistant instance in a while and just upgraded from 0.106.x to 0.114.1 and all of the custom components I’m using as well. So, layout-card, button-card, etc. are all on the latest version.
The following buttons used to be the exact same size, but now on mobile (iPhone) the middle buttons are for some reason a bit smaller. It doesn’t matter if there are 3 or 4 buttons, the second and third button are always smaller. The first and fourth are the correct size. If I only have 2 buttons next to each other they are the same size.
This is the button template:
---
room_light:
size: 25%
aspect_ratio: 1/1
show_state: true
deep_press: true
tap_action:
action: toggle
haptic: light
styles:
card:
- box-shadow: none
- border-radius: 12px
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- justify-content: start
- align-items: start
icon:
- padding: 10px 10px
- height: 50%
name:
- justify-self: start
- padding: 5px 0 0 10px
- font-weight: bold
- font-size: 13px
label:
- justify-self: start
- padding: 0 10px 5px
- font-size: 11px
state:
- justify-self: start
- padding: 0 10px 5px
- font-size: 11px
state:
- value: 'unavailable'
styles:
card:
- filter: opacity(50%)
This is the card I’m using in the view:
- type: custom:mod-card
style: |
layout-card {
padding: 0 10px;
}
card:
type: custom:layout-card
layout: horizontal
justify_content: start
min_columns: 4
cards:
{% for light in room.lights %}
- type: custom:button-card
template: room_light
entity: {{ light.entity }}
icon: {{ light.icon }}
name: {{ light.name }}
label: "{{ light.label | default(' ') }}"
hold_action:
!include
- ../popups/light.yaml
- entity: {{ light.entity }}
{% endfor %}
- type: custom:button-card
color_type: blank-card
aspect_ratio: 1/1
- type: custom:button-card
color_type: blank-card
aspect_ratio: 1/1
- type: custom:button-card
color_type: blank-card
aspect_ratio: 1/1
I’m not sure whether this is an issue with button-card, layout-card or anything else. Did something cause this since 0.106? Does anyone know?
I think it’s lay-out card. I use lay-out card on my mobile view in vertical mode with a max width in order to have paddings to the sides. I used to have set that to 98%, however one of the latest updates (I think the one that came with HA 112) was suddenly wider at 98%. So I changed everything to 96%, to have the same results as before.
Perhaps there have been more changes with layout card, that causes your issue.
I gotta ask though: why do you use lay-out card to achieve that view? Wouldn’t is be easier to use the built in horizontal-stack and vertical-stack (which is what I use). Or maybe I’m just not understanding your code.
thmry
August 16, 2020, 10:08am
4358
Thanks for mentioning that, going to look into what exactly changed in layout-card around that period. @thomasloven would you maybe be able to point me to the issue immediately without me going into all of the changes?
About using layout-card instead of the core components… I’m using layout-card on other views for more complexity. It kind of became my go to layout component and haven’t been using the core ones at all except for the most outer container. I guess it just became a habit. I chose to show this page here because it is fairly simplistic to show the issue and cutting away all of the complexity of all the other views I have.
I´m trying to use your code, but i got this message:
KTibow
August 16, 2020, 8:33pm
4360
That’s a problem of decluttering card, not button card.
This is my decluttering …
room:
card:
custom_fields:
icon1: |
[[[
if (states['[[icon1_ent]]'].state == '[[icon1_state1]]')
return '<ha-icon icon="mdi:[[icon1_icon1]]" style="width: 20px; height: 20px;"></ha-icon>';
if (states['[[icon1_ent]]'].state == '[[icon1_state2]]')
return '<ha-icon icon="mdi:[[icon1_icon2]]" style="width: 20px; height: 20px;"></ha-icon>';
else
return '<ha-icon icon="mdi:[[icon1_icon3]]" style="width: 20px; height: 20px;"></ha-icon>';
]]]
icon2: |
[[[
if (states['[[icon2_ent]]'].state == '[[icon2_state1]]')
return '<ha-icon icon="mdi:[[icon2_icon1]]" style="width: 20px; height: 20px;"></ha-icon>';
if (states['[[icon2_ent]]'].state == '[[icon2_state2]]')
return '<ha-icon icon="mdi:[[icon2_icon2]]" style="width: 20px; height: 20px;"></ha-icon>';
else
return '<ha-icon icon="mdi:[[icon2_icon3]]" style="width: 20px; height: 20px;"></ha-icon>';
]]]
icon3: |
[[[
if (states['[[icon3_ent]]'].state == '[[icon3_state1]]')
return '<ha-icon icon="mdi:[[icon3_icon1]]" style="width: 20px; height: 20px;"></ha-icon>';
if (states['[[icon3_ent]]'].state == '[[icon3_state2]]')
return '<ha-icon icon="mdi:[[icon3_icon2]]" style="width: 20px; height: 20px;"></ha-icon>';
else
return '<ha-icon icon="mdi:[[icon3_icon3]]" style="width: 20px; height: 20px;"></ha-icon>';
]]]
icon4: |
[[[
if (states['[[icon4_ent]]'].state == '[[icon4_state1]]')
return '<ha-icon icon="mdi:[[icon4_icon1]]" style="width: 20px; height: 20px;"></ha-icon>';
if (states['[[icon4_ent]]'].state == '[[icon4_state2]]')
return '<ha-icon icon="mdi:[[icon4_icon2]]" style="width: 20px; height: 20px;"></ha-icon>';
else
return '<ha-icon icon="mdi:[[icon4_icon3]]" style="width: 20px; height: 20px;"></ha-icon>';
]]]
icon5: |
[[[
if (states['[[icon5_ent]]'].state == '[[icon5_state1]]')
return '<ha-icon icon="mdi:[[icon5_icon1]]" style="width: 20px; height: 20px;"></ha-icon>';
if (states['[[icon5_ent]]'].state == '[[icon5_state2]]')
return '<ha-icon icon="mdi:[[icon5_icon2]]" style="width: 20px; height: 20px;"></ha-icon>';
else
return '<ha-icon icon="mdi:[[icon5_icon3]]" style="width: 20px; height: 20px;"></ha-icon>';
]]]
icon6: |
[[[
if (states['[[temp_ent]]'].state == "heat")
return '<ha-icon icon="mdi:fire" style="width: 20px; height: 20px;"></ha-icon>';
if (states['[[temp_ent]]'].state == "cool")
return '<ha-icon icon="mdi:snowflake" style="width: 20px; height: 20px;"></ha-icon>';
else
return '<ha-icon icon="mdi:[[icon]]" style="width: 20px; height: 20px;"></ha-icon>';
]]]
stat1: |
[[[
return `<ha-icon
icon="mdi:[[stat1_icon]]"
style="width: 15px; height: 15px; color: steelblue;">
</ha-icon><span>[[stat1_pre]]<span style="color: var(--text-color-sensor);">${states['[[stat1_ent]]'].state}[[stat1_suf]]</span></span>`
]]]
stat2: |
[[[
return `<ha-icon
icon="mdi:[[stat2_icon]]"
style="width: 15px; height: 15px; color: steelblue;">
</ha-icon><span>[[stat2_pre]]<span style="color: var(--text-color-sensor);">${states['[[stat2_ent]]'].state}[[stat2_suf]]</span></span>`
]]]
entity: '[[entity]]'
name: '[[name]]'
show_icon: false
show_label: false
show_state: false
size: 70%
state:
- styles:
custom_fields:
icon6:
- animation: blink 2s ease infinite
- color: crimson
value: heat
- styles:
custom_fields:
icon6:
- animation: blink 2s ease infinite
- color: lightblue
value: cool
styles:
card:
- font-size: 12px
- padding: 5px 3px 5px 3px
custom_fields:
icon1:
- padding: 0px 0px 0px 0px
- animation: |
[[[
if (states["[[icon1_ent]]"].state == '[[icon1_state1]]') return "[[icon1_animate]]";
else return null;
]]]
- color: |
[[[
if (states["[[icon1_ent]]"].state == '[[icon1_state1]]') return "[[icon1_color1]]";
if (states["[[icon1_ent]]"].state == '[[icon1_state2]]') return "[[icon1_color2]]";
if (states["[[icon1_ent]]"].state == '[[icon1_state3]]') return "[[icon1_color3]]";
else return null;
]]]
icon2:
- padding: 0px 0px 0px 0px
- animation: |
[[[
if (states["[[icon2_ent]]"].state == '[[icon2_state1]]') return "[[icon2_animate]]";
else return null;
]]]
- color: |
[[[
if (states["[[icon2_ent]]"].state == '[[icon2_state1]]') return "[[icon2_color1]]";
if (states["[[icon2_ent]]"].state == '[[icon2_state2]]') return "[[icon2_color2]]";
if (states["[[icon2_ent]]"].state == '[[icon2_state3]]') return "[[icon2_color3]]";
else return null;
]]]
icon3:
- padding: 0px 0px 0px 0px
- animation: |
[[[
if (states["[[icon3_ent]]"].state == '[[icon3_state1]]') return "[[icon3_animate]]";
else return null;
]]]
- color: |
[[[
if (states["[[icon3_ent]]"].state == '[[icon3_state1]]') return "[[icon3_color1]]";
if (states["[[icon3_ent]]"].state == '[[icon3_state2]]') return "[[icon3_color2]]";
if (states["[[icon3_ent]]"].state == '[[icon3_state3]]') return "[[icon3_color3]]";
else return null;
]]]
icon4:
- padding: 0px 0px 0px 0px
- animation: |
[[[
if (states["[[icon4_ent]]"].state == '[[icon4_state1]]') return "[[icon4_animate]]";
else return null;
]]]
- color: |
[[[
if (states["[[icon4_ent]]"].state == '[[icon4_state1]]') return "[[icon4_color1]]";
if (states["[[icon4_ent]]"].state == '[[icon4_state2]]') return "[[icon4_color2]]";
if (states["[[icon4_ent]]"].state == '[[icon4_state3]]') return "[[icon4_color3]]";
else return null;
]]]
icon5:
- padding: 0px 0px 0px 0px
- animation: |
[[[
if (states["[[icon5_ent]]"].state == '[[icon5_state1]]') return "[[icon5_animate]]";
else return null;
]]]
- color: |
[[[
if (states["[[icon5_ent]]"].state == '[[icon5_state1]]') return "[[icon5_color1]]";
if (states["[[icon5_ent]]"].state == '[[icon5_state2]]') return "[[icon5_color2]]";
if (states["[[icon5_ent]]"].state == '[[icon5_state3]]') return "[[icon5_color3]]";
else return null;
]]]
icon6:
- padding: 0px 0px 0px 0px
stat1:
- justify-self: start
- padding: 0px 0px 0px 0px
- '--text-color-sensor': |
[[[
if (states["[[stat1_ent]]"].state < 20) return "lightblue";
if (states["[[stat1_ent]]"].state >= 20 && states["[[stat1_ent]]"].state < 28) return "mediumaquamarine";
else return "tomato";
]]]
stat2:
- justify-self: start
- padding: 0px 0px 0px 0px
- '--text-color-sensor': |
[[[
if (states["[[stat2_ent]]"].state < 30) return "lightblue";
if (states["[[stat2_ent]]"].state >= 30 && states["[[stat2_ent]]"].state < 55) return "mediumaquamarine";
else return "tomato";
]]]
grid:
- grid-template-areas: >-
". n n n n icon6 ." ". stat1 stat1 stat1 stat1 stat1 ." ". stat2
stat2 stat2 stat2 stat2 ." ". icon1 icon2 icon3 icon4 icon5 ."
- grid-template-columns: 1fr 5fr 5fr 5fr 5fr 5fr 1fr
- grid-template-rows: 2fr 1fr 1fr 3fr
- padding: 0px 0px 0px 0px
icon:
- place-self: center
- padding: 0px 0px 3px 0px
name:
- justify-self: start
- font-size: 16px
- padding: 0px 0px 0px 3px
tap_action:
action: call-service
service: browser_mod.popup
service_data:
card:
cards:
- cards:
- cards:
- cards:
- color_type: '[[pu_light1_colortype]]'
dbltap_action:
action: more-info
entity: '[[pu_light1_ent]]'
hold_action:
action: more-info
name: '[[pu_light1_name]]'
show_last_changed: true
show_state: false
size: 40%
styles:
card:
- height: 70px
- padding: 0px 0px 0px 0px
grid:
- grid-template-areas: '"i ." "i n" "i l" "i ."'
- grid-template-columns: 2fr 3fr
- grid-template-rows: 1fr 3fr 1fr 1fr
icon:
- padding: 4px 0px 8px 10px
label:
- font-size: 11px
- padding: 0px 25px 20px 0px
- justify-self: right
- color: '#7babf7'
- align-self: start
name:
- font-size: 20px
- justify-self: right
- padding: 0px 25px 0px 0px
- align-self: start
tap_action:
action: toggle
type: 'custom:button-card'
- color_type: '[[pu_light2_colortype]]'
dbltap_action:
action: more-info
entity: '[[pu_light2_ent]]'
hold_action:
action: more-info
name: '[[pu_light2_name]]'
show_last_changed: true
show_state: false
size: 40%
styles:
card:
- height: 70px
- padding: 0px 0px 0px 0px
grid:
- grid-template-areas: '"i ." "i n" "i l" "i ."'
- grid-template-columns: 2fr 3fr
- grid-template-rows: 1fr 3fr 1fr 1fr
icon:
- padding: 4px 0px 8px 10px
label:
- font-size: 11px
- padding: 0px 25px 20px 0px
- justify-self: right
- color: '#7babf7'
- align-self: start
name:
- font-size: 20px
- justify-self: right
- padding: 0px 25px 0px 0px
- align-self: start
tap_action:
action: toggle
type: 'custom:button-card'
type: horizontal-stack
type: 'custom:vertical-stack-in-card'
type: horizontal-stack
- cards:
- color_type: '[[icon1_colortype]]'
entity: '[[icon1_ent]]'
hold_action:
action: '[[icon1_holdaction]]'
icon: 'mdi:[[icon1_icon2]]'
name: '[[icon1_name]]'
show_last_changed: true
show_state: false
size: 70%
state:
- icon: 'mdi:[[icon1_icon1]]'
styles:
icon:
- color: '[[icon1_color1]]'
- animation: '[[icon1_animate]]'
value: '[[icon1_state1]]'
styles:
card:
- height: 120px
icon:
- color: null
label:
- font-size: 9px
- color: '#7babf7'
tap_action:
action: '[[icon1_tapaction]]'
type: 'custom:button-card'
- color_type: '[[icon2_colortype]]'
entity: '[[icon2_ent]]'
hold_action:
action: '[[icon2_holdaction]]'
icon: 'mdi:[[icon2_icon2]]'
name: '[[icon2_name]]'
show_last_changed: true
show_state: false
size: 70%
state:
- icon: 'mdi:[[icon2_icon1]]'
styles:
icon:
- color: '[[icon2_color1]]'
- animation: '[[icon2_animate]]'
value: '[[icon2_state1]]'
styles:
card:
- height: 120px
icon:
- color: null
label:
- font-size: 9px
- color: '#7babf7'
tap_action:
action: '[[icon2_tapaction]]'
type: 'custom:button-card'
- color_type: '[[icon3_colortype]]'
entity: '[[icon3_ent]]'
hold_action:
action: '[[icon3_holdaction]]'
icon: 'mdi:[[icon3_icon2]]'
name: '[[icon3_name]]'
show_last_changed: true
show_state: false
size: 70%
state:
- icon: 'mdi:[[icon3_icon1]]'
styles:
icon:
- color: '[[icon3_color1]]'
- animation: '[[icon3_animate]]'
value: '[[icon3_state1]]'
styles:
card:
- height: 120px
icon:
- color: null
label:
- font-size: 9px
- color: '#7babf7'
tap_action:
action: '[[icon3_tapaction]]'
type: 'custom:button-card'
- color_type: '[[icon4_colortype]]'
entity: '[[icon4_ent]]'
hold_action:
action: '[[icon4_holdaction]]'
icon: 'mdi:[[icon4_icon2]]'
name: '[[icon4_name]]'
show_last_changed: true
show_state: false
size: 70%
state:
- icon: 'mdi:[[icon4_icon1]]'
styles:
icon:
- color: '[[icon4_color1]]'
- animation: '[[icon4_animate]]'
value: '[[icon4_state1]]'
styles:
card:
- height: 120px
icon:
- color: null
label:
- font-size: 9px
- color: '#7babf7'
tap_action:
action: '[[icon4_tapaction]]'
type: 'custom:button-card'
- color_type: '[[icon5_colortype]]'
entity: '[[icon5_ent]]'
hold_action:
action: '[[icon5_holdaction]]'
icon: 'mdi:[[icon5_icon2]]'
name: '[[icon5_name]]'
show_last_changed: true
show_state: false
size: 70%
state:
- icon: 'mdi:[[icon5_icon1]]'
styles:
icon:
- color: '[[icon5_color1]]'
- animation: '[[icon5_animate]]'
value: '[[icon5_state1]]'
styles:
card:
- height: 120px
icon:
- color: null
label:
- font-size: 9px
- color: '#7babf7'
tap_action:
action: '[[icon5_tapaction]]'
type: 'custom:button-card'
type: horizontal-stack
- color_type: '[[pu_therm_colortype]]'
custom_fields:
cardy:
card:
entity: '[[pu_climate_ent]]'
hide:
state: true
icon:
cool: 'mdi:snowflake'
heating: 'mdi:fire'
'off': 'mdi:stop-circle-outline'
modes:
cool: null
heating: null
'off': null
name: Thermostat
sensors:
- attribute: hvac_action
entity: '[[pu_climate_ent]]'
name: Currently
- entity: '[[pu_climate_hum]]'
name: Humidity
type: 'custom:simple-thermostat'
entity: light.curtis
show_icon: false
show_name: false
styles:
grid:
- grid-template-areas: '"cardy"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr
type: 'custom:button-card'
- cards:
- align_header: left
align_icon: left
animate: true
entities:
- color: '#f2ab48'
entity: '[[pu_climate_temp]]'
index: 0
name: LR
font_size: 80
hours_to_show: 48
name: Temperature - 48h
points_per_hour: 0.25
show:
fill: false
labels: true
points: hover
type: 'custom:mini-graph-card'
- align_header: left
align_icon: left
animate: true
entities:
- color: '#57a5f2'
entity: '[[pu_climate_hum]]'
index: 0
name: LR
font_size: 80
hours_to_show: 48
name: Humidity - 48h
points_per_hour: 0.25
show:
fill: false
labels: true
points: hover
type: 'custom:mini-graph-card'
type: horizontal-stack
type: 'custom:vertical-stack-in-card'
deviceID:
- this
large: false
title: '[[pu_title]]'
triggers_update:
- '[[icon1_ent]]'
- '[[icon2_ent]]'
- '[[icon3_ent]]'
- '[[icon4_ent]]'
- '[[icon5_ent]]'
- '[[icon6_ent]]'
- '[[stat1_ent]]'
- '[[stat2_ent]]'
- '[[pu_light1_ent]]'
- '[[pu_light2_ent]]'
type: 'custom:button-card'
