jeells102
January 19, 2024, 8:25pm
941
Thanks for this. I’ve added it into my code but it doesn’t appear to be changing anything on mobile. Any ideas?
type: custom:stack-in-card
cards:
- type: custom:button-card
entity: light.living_room_light_switch
icon: '[[[ return entity.attributes.icon ]]]'
show_icon: false
name: Living Room
tap_action:
action: navigate
navigation_path: /lovelace/living-room
haptic: medium
styles:
card:
- background: var(--contrast2)
- padding: 16px
- '--mdc-ripple-press-opacity': 0
icon_cells:
- justify-self: start
- margin-top: 12px
- margin-left: 15px
- animation: |
[[[
var state = states['light.living_room_light_switch'].state;
return state === 'on' ? 'bounce 2s infinite' : 'none';
]]]
img_cell:
- justify-self: start
- width: 24px
custom_fields:
temp:
- align-self: start
- justify-self: end
- font-size: 13px
- font-weight: 500
- margin: 4px 0 0px 0
- color: var(--contrast8)
- font-family: Montserrat
hum:
- align-self: start
- justify-self: end
- font-size: 13px
- font-weight: 500
- margin: 1px 0 12px 0
- color: var(--contrast8)
- font-family: Montserrat
graph:
- padding-top: 0%
- width: 100%
- height: 100%
icon_cells:
- width: 24px
- height: 24px
- color: var(--contrast8)
- animation: |
[[[
var state = states['light.living_room_light_switch'].state;
return state === 'on' ? 'bounce 2s infinite' : 'none';
]]]
name:
- justify-self: start
- font-size: 14px
- overflow: visible
- margin: 1px 0 1px 0
- color: |
[[[
var state = states['light.living_room_light_switch'].state;
return state === 'on' ? 'white' : 'grey';
]]]
- font-family: Montserrat
- font-weight: 600
grid:
- grid-template-areas: '"icon_cells slider temp" "n slider hum"'
- grid-template-columns: 1fr min-content 1fr
- grid-template-rows: 1fr min-content min-content
custom_fields:
icon_cells: |
[[[
var state = states['light.living_room_light_switch'].state;
if(state == "on")
return `<ha-icon
icon="mdi:sofa"
style="width: 25px; height: 25px; color: yellow;">
</ha-icon>
`;
else
return `<ha-icon
icon="mdi:sofa-outline"
style="width: 25px; height: 25px; color: grey;">
</ha-icon>
`;
]]]
temp: |
[[[
return `<ha-icon
icon="mdi:thermometer"
style="width: 18px; height: 18px; color: var(--orange);">
</ha-icon><span>${parseFloat(states['sensor.everything_presence_one_dacc08_temperature'].state).toFixed(0)}°C</span>`
]]]
hum: |
[[[
return `<ha-icon
icon="mdi:water-percent"
style="width: 18px; height: 18px; color: var(--blue);">
</ha-icon> <span>${parseFloat(states['sensor.everything_presence_one_dacc08_humidity'].state).toFixed(0)}%</span>`
]]]
card_mod:
style: |
ha-card {
z-index: 1;
height: 70px;
}
extra_styles: |
@keyframes bounce {
0% { transform: scale3d(1, 1, 1); }
7% { transform: scale3d(1.25, 0.75, 1); }
10% { transform: scale3d(0.75, 1.25, 1); }
12% { transform: scale3d(1.15, 0.85, 1); }
16% { transform: scale3d(0.95, 1.05, 1); }
19% { transform: scale3d(1.05, 0.95, 1); }
25% { transform: scale3d(1, 1, 1); }
}
@media screen and (max-width: 800px) {
#name {
font-size: 0.5em;
}
- type: custom:mini-graph-card
tap_action:
action: navigate
navigation_path: /lovelace/living-room
haptic: medium
entities:
- entity: sensor.everything_presence_one_dacc08_temperature
name: Temperature
color: '#ff8c00'
show_points: false
legend: false
- entity: sensor.everything_presence_one_dacc08_humidity
name: Humidity
color: '#3399ff'
y_axis: secondary
show_points: false
legend: false
height: 40
hours_to_show: 24
line_width: 3
font_size: 50
show:
name: false
icon: false
state: false
legend: false
animate: true
labels: false
labels_secondary: false
card_mod:
style: |
ha-card {
position: absolute;
height: 100%;
width: 100%;
top: 0px;
--ha-card-border-width: 0;
}
ha-card:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
}
VietNgoc
January 20, 2024, 12:07am
942
VietNgoc:
}
You must close in the end }
jeells102
January 20, 2024, 1:37pm
943
Sorry my mistake. However, it’s still not adjust the font size
type: custom:stack-in-card
cards:
- type: custom:button-card
entity: light.living_room_light_switch
icon: '[[[ return entity.attributes.icon ]]]'
show_icon: false
name: Living Room
tap_action:
action: navigate
navigation_path: /lovelace/living-room
haptic: medium
styles:
card:
- background: var(--contrast2)
- padding: 16px
- '--mdc-ripple-press-opacity': 0
icon_cells:
- justify-self: start
- margin-top: 12px
- margin-left: 15px
- animation: |
[[[
var state = states['light.living_room_light_switch'].state;
return state === 'on' ? 'bounce 2s infinite' : 'none';
]]]
img_cell:
- justify-self: start
- width: 24px
custom_fields:
temp:
- align-self: start
- justify-self: end
- font-size: 13px
- font-weight: 500
- margin: 4px 0 0px 0
- color: var(--contrast8)
- font-family: Montserrat
hum:
- align-self: start
- justify-self: end
- font-size: 13px
- font-weight: 500
- margin: 1px 0 12px 0
- color: var(--contrast8)
- font-family: Montserrat
graph:
- padding-top: 0%
- width: 100%
- height: 100%
icon_cells:
- width: 24px
- height: 24px
- color: var(--contrast8)
- animation: |
[[[
var state = states['light.living_room_light_switch'].state;
return state === 'on' ? 'bounce 2s infinite' : 'none';
]]]
name:
- justify-self: start
- font-size: 14px
- overflow: visible
- margin: 1px 0 1px 0
- color: |
[[[
var state = states['light.living_room_light_switch'].state;
return state === 'on' ? 'white' : 'grey';
]]]
- font-family: Montserrat
- font-weight: 600
grid:
- grid-template-areas: '"icon_cells slider temp" "n slider hum"'
- grid-template-columns: 1fr min-content 1fr
- grid-template-rows: 1fr min-content min-content
custom_fields:
icon_cells: |
[[[
var state = states['light.living_room_light_switch'].state;
if(state == "on")
return `<ha-icon
icon="mdi:sofa"
style="width: 25px; height: 25px; color: yellow;">
</ha-icon>
`;
else
return `<ha-icon
icon="mdi:sofa-outline"
style="width: 25px; height: 25px; color: grey;">
</ha-icon>
`;
]]]
temp: |
[[[
return `<ha-icon
icon="mdi:thermometer"
style="width: 18px; height: 18px; color: var(--orange);">
</ha-icon><span>${parseFloat(states['sensor.everything_presence_one_dacc08_temperature'].state).toFixed(0)}°C</span>`
]]]
hum: |
[[[
return `<ha-icon
icon="mdi:water-percent"
style="width: 18px; height: 18px; color: var(--blue);">
</ha-icon> <span>${parseFloat(states['sensor.everything_presence_one_dacc08_humidity'].state).toFixed(0)}%</span>`
]]]
card_mod:
style: |
ha-card {
z-index: 1;
height: 70px;
}
extra_styles: |
@keyframes bounce {
0% { transform: scale3d(1, 1, 1); }
7% { transform: scale3d(1.25, 0.75, 1); }
10% { transform: scale3d(0.75, 1.25, 1); }
12% { transform: scale3d(1.15, 0.85, 1); }
16% { transform: scale3d(0.95, 1.05, 1); }
19% { transform: scale3d(1.05, 0.95, 1); }
25% { transform: scale3d(1, 1, 1); }
}
@media screen and (max-width: 800px) {
#name {
font-size: 0.5em;
}
}
- type: custom:mini-graph-card
tap_action:
action: navigate
navigation_path: /lovelace/living-room
haptic: medium
entities:
- entity: sensor.everything_presence_one_dacc08_temperature
name: Temperature
color: '#ff8c00'
show_points: false
legend: false
- entity: sensor.everything_presence_one_dacc08_humidity
name: Humidity
color: '#3399ff'
y_axis: secondary
show_points: false
legend: false
height: 40
hours_to_show: 24
line_width: 3
font_size: 50
show:
name: false
icon: false
state: false
legend: false
animate: true
labels: false
labels_secondary: false
card_mod:
style: |
ha-card {
position: absolute;
height: 100%;
width: 100%;
top: 0px;
--ha-card-border-width: 0;
}
ha-card:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
}
pedolsky
January 20, 2024, 2:25pm
944
Delete the line font-size in your styles: section for name.
1 Like
jeells102
January 20, 2024, 3:09pm
945
Legend thank you so much
gyle
January 26, 2024, 8:11am
946
trying to call a service with a variable “einschaltdauer” which needs to be set like this in order to work:
"{{ ((float(states('input_number.bewasserung_manuell_dauer_beet_links_hecke'))) * 60)|int }}"
If i put this into the card-config it won’t let me save it > after saving the quotes “” are removed automatically!?
any idea?
hold_action:
action: call-service
service: script.1706098602333
data:
sensor_smart_irrigation: sensor.smart_irrigation_beet_rechts
homematic_kanal_entity: switch.bewasserung_garage_ch1
einschaltdauer: >-
{{
(float(states('input_number.bewasserung_manuell_dauer_beet_links_hecke'))*
60) | int }}
cismarine
January 26, 2024, 11:07am
947
Hi,
status X: move from C to B
status Y: move from B to A
status Z: move from A to C
ramin
January 27, 2024, 6:45pm
948
Having lots of fun with custom:buttom-card, I have a goal I try to reach.
Code from raw configuration editor:
button_card_templates:
container:
color_type: label-card
color: dimgray
styles:
card:
- padding: 0
name:
- border-radius: 0.4em 0.4em 0 0
- padding: 0.1em
- width: 100%
- font-weight: bold
- font-size: 1.2em
grid:
- grid-template-areas: '"i" "n" "buttons"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
custom_fields:
buttons:
- background-color: rgba(0,0,0,0.3)
- margin: 0
- padding: 0.3em
kiosk_mode:
user_settings:
- users:
- john
hide_sidebar: true
- users:
- Testt
kiosk: true
ignore_entity_settings: true
views:
- title: Home
color-type: label
color: '#0000cc'
cards:
- type: custom:button-card
template: container
color: '#0000cc'
name: Climate
custom_fields:
buttons:
card:
type: horizontal-stack
cards:
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
entity: climate.bedroom_airco
show_icon: true
show_state: true
state:
- value: 'off'
icon: mdi:air-conditioner
color: blue
styles:
icon:
- animation: null
- value: cool
icon: mdi:fan
color: yellow
styles:
icon:
- animation: rotating 2s linear infinite
- type: custom:button-card
icon: mdi:fan
spin: true
color: yellow
entity: switch.office_airco
show_icon: true
show_state: true
state:
- value: 'off'
icon: mdi:air-conditioner
color: blue
styles:
icon:
- animation: null
- value: 'on'
icon: mdi:fan
color: yellow
styles:
icon:
- animation: rotating 2s linear infinite
- type: custom:button-card
icon: mdi:fan
spin: true
color: yellow
entity: switch.guest_airco
show_icon: true
show_state: true
state:
- value: 'off'
icon: mdi:air-conditioner
color: blue
styles:
icon:
- animation: null
- value: 'on'
icon: mdi:fan
color: yellow
styles:
icon:
- animation: rotating 2s linear infinite
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
template: container
color: '#ffff00'
name: Upstairs
custom_fields:
buttons:
card:
type: horizontal-stack
cards:
- type: custom:button-card
color_type: icon
color: yellow
entity: light.living_room
show_icon: true
show_state: true
state:
- value: 'off'
color: white
- type: custom:button-card
color_type: icon
color: yellow
entity: light.dining_room
show_icon: true
show_state: true
state:
- value: 'off'
color: white
- type: custom:button-card
color_type: icon
color: yellow
entity: light.kitchen
show_icon: true
show_state: true
state:
- value: 'off'
color: white
- type: custom:button-card
color_type: icon
color: yellow
entity: light.porch
show_icon: true
show_state: true
state:
- value: 'off'
color: white
- type: custom:button-card
color_type: icon
color: yellow
entity: light.toilet
show_icon: true
show_state: true
state:
- value: 'off'
color: white
- type: custom:button-card
template: container
color: '#ffff00'
name: Downstairs
custom_fields:
buttons:
card:
type: horizontal-stack
cards:
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
color_type: icon
color: yellow
entity: light.bedroom
show_icon: true
show_state: true
state:
- value: 'off'
color: white
- type: custom:button-card
color_type: icon
color: yellow
entity: light.office
show_icon: true
show_state: true
state:
- value: 'off'
color: white
- type: custom:button-card
color_type: icon
color: yellow
entity: light.guestroom
show_icon: true
show_state: true
state:
- value: 'off'
color: white
- type: custom:button-card
color_type: blank-card
Your help is much appreciated.
Do you have card_mod: installed?
FilipeOS
January 28, 2024, 2:47pm
950
Hi!
I need your help guys.
I have 4 button, 2 are scripts and 2 are switch. The switch are working fine but the scripts I need to change the state/color based on for example X camera privacy mode is on. How can I do this?
- show_name: false
show_icon: true
type: custom:button-card
tap_action:
action: call-service
service: script.turn_off_cameras_privacy_mode
target: {}
icon: mdi:cctv
styles:
icon:
- width: 21px
- height: 21px
- color: '#44739E'
- padding: 10.5px
- border-radius: 100%
- background: rgba(111,111,111,0.2)
name:
- font-size: 14px
- padding-top: 10px
- color: white
- font-weight: bold
- color: '#e1e1e1'
state:
- font-size: 12px
- padding-top: 10px
- padding-bottom: 5px
- color: '#9b9b9b'
- font-weight: bold
state:
- value: 'on'
styles:
icon:
- color: '#d18a26'
- background: rgba(255,187,130,0.25)
card_mod:
style: |
ha-card {
border: none;
}
I don’t have enough info on your camera, but you would add code similar to the code for the icon background below
- background: |
[[[
if (states['light.pc_hue_bar'].state == 'on')
return "red";
else
return "grey";
]]]
I used a light entity as an example, replace with your device. . If the status your are trying to retrieve is an attribute, we will need to make a slight adjustment.
A screenshot of the state/attribute from the developer tool would help build the entire card.
example
type: custom:button-card
tap_action:
action: call-service
service: script.turn_off_cameras_privacy_mode
target: {}
icon: mdi:cctv
styles:
card:
- border-radius: 24px
- background-color: black
icon:
- width: 21px
- height: 21px
- color: white
- padding: 10.5px
- border-radius: 100%
- background: |
[[[
if (states['light.pc_hue_bar'].state == 'on')
return "red";
else
return "grey";
]]]
1 Like
dbrunt
January 31, 2024, 7:42am
953
I’ve been reading and reading, and more reading but came up empty handed.custom:button-card edited ] but change it from below_horizonBelow Horizon . Might that be possible without creating a templated entity??
@dbrunt Without your code I’m guessing a bit here, but it’s a start.
type: entities
entities:
- entity: sun.sun
secondary_info: last-changed
card_mod:
style: |
:host {
text-transform: capitalize;
color: lime;
}
dbrunt
January 31, 2024, 9:43am
955
Thanks. I was hopeful but no cigar!
Here’s my card:
type: custom:button-card
aspect_ratio: 1/0.6
show_label: true
show_name: true
show_state: true
entity: sensor.moon
card_mod:
style: |
:host {
text-transform: capitalize;
}
styles:
card:
- color: |
[[[
if (states['sun.sun'].state == 'below_horizon')
return "white";
else return "darkblue"
]]]
- background-color: |
[[[
if (states['sun.sun'].state == 'below_horizon')
return "black";
else return "lightblue"
]]]
label: |
[[[
if (states['sensor.moon_phase'].state == 'new_moon') return "New Moon";
if (states['sensor.moon_phase'].state == 'waxing_crescent') return "Waxing Crescent";
if (states['sensor.moon_phase'].state == 'first_quarter') return "First Quarter";
if (states['sensor.moon_phase'].state == 'waxing_gibbous') return "Waxing Gibbous";
if (states['sensor.moon_phase'].state == 'waning_gibbous') return "Waning Gibbous";
if (states['sensor.moon_phase'].state == 'last_quarter') return "Last Quarter";
if (states['sensor.moon_phase'].state == 'waning_crescent') return "Waning Crescent";
else return "Full Moon"
]]]
entity_picture: |
[[[
if (states['sensor.moon_phase'].state == 'new_moon') return "/local/images/moon/new_moon.jpg";
if (states['sensor.moon_phase'].state == 'waxing_crescent') return "/local/images/moon/waxing_crescent.jpg";
if (states['sensor.moon_phase'].state == 'first_quarter') return "/local/images/moon/first_quarter.jpg";
if (states['sensor.moon_phase'].state == 'waxing_gibbous') return "/local/images/moon/waxing_gibbous.jpg";
if (states['sensor.moon_phase'].state == 'waning_gibbous') return "/local/images/moon/waning_gibbous.jpg";
if (states['sensor.moon_phase'].state == 'last_quarter') return "/local/images/moon/last_quarter.jpg";
if (states['sensor.moon_phase'].state == 'waning_crescent') return "/local/images/moon/waning_crescent.jpg";
else return "/local/images/moon/full_moon.jpg";
]]]
show_entity_picture: true
and sensor.moon is:
{{ iif(states('sensor.astroweather_moon_altitude')|int(0) > 0, 'above_horizon', 'below_horizon') }}
I know I could just change the state in the templated sensor but wanted to mimic sun.sun…
give me a few… Didn’t realize it was inside a button card. That changes the mod a bit.
1 Like
Please try this
type: custom:button-card
aspect_ratio: 1/0.6
show_label: true
show_name: true
show_state: true
entity: sensor.moon
styles:
card:
- text-transform: capitalize
- color: |
[[[
if (states['sun.sun'].state == 'below_horizon')
return "white";
else return "darkblue"
]]]
- background-color: |
[[[
if (states['sun.sun'].state == 'below_horizon')
return "black";
else return "lightblue"
]]]
label: |
[[[
if (states['sensor.moon_phase'].state == 'new_moon') return "New Moon";
if (states['sensor.moon_phase'].state == 'waxing_crescent') return "Waxing Crescent";
if (states['sensor.moon_phase'].state == 'first_quarter') return "First Quarter";
if (states['sensor.moon_phase'].state == 'waxing_gibbous') return "Waxing Gibbous";
if (states['sensor.moon_phase'].state == 'waning_gibbous') return "Waning Gibbous";
if (states['sensor.moon_phase'].state == 'last_quarter') return "Last Quarter";
if (states['sensor.moon_phase'].state == 'waning_crescent') return "Waning Crescent";
else return "Full Moon"
]]]
entity_picture: |
[[[
if (states['sensor.moon_phase'].state == 'new_moon') return "/local/images/moon/new_moon.png";
if (states['sensor.moon_phase'].state == 'waxing_crescent') return "/local/images/moon/waxing_crescent.png";
if (states['sensor.moon_phase'].state == 'first_quarter') return "/local/images/moon/first_quarter.jpg";
if (states['sensor.moon_phase'].state == 'waxing_gibbous') return "/local/images/moon/waxing_gibbous.jpg";
if (states['sensor.moon_phase'].state == 'waning_gibbous') return "/local/images/moon/waning_gibbous.jpg";
if (states['sensor.moon_phase'].state == 'last_quarter') return "/local/images/moon/last_quarter.jpg";
if (states['sensor.moon_phase'].state == 'waning_crescent') return "/local/images/moon/waning_crescent.jpg";
else return "/local/images/moon/full_moon.png";
]]]
show_entity_picture: true
pedolsky
January 31, 2024, 12:22pm
958
dbrunt:
to Below Horizon
You could also use the localize feature for sun and moon:
show_label: true
label: |
[[[
let x = states['sun.sun']
return helpers.localize(x);
]]]
or if entity == label entity:
label: |
[[[ return helpers.localize(entity); ]]]
If the moon pics are named the same as the moon states, the entity picture part can be shortened using
show_entity_picture: true
entity_picture: |
[[[ return `/local/images/moon/${entity.state}.png`; ]]]
dbrunt
January 31, 2024, 9:13pm
959
Only the 1st character of the state is capitalized…
I managed to figure out what I wanted to achieve though by using state_display: plus I decided to switch the state_display: and label: usage…
type: custom:button-card
aspect_ratio: 1/0.6
show_name: true
show_state: true
show_label: true
entity: sensor.moon
styles:
card:
- color: |
[[[
if (states['sun.sun'].state == 'below_horizon')
return "white";
else return "darkblue";
]]]
- background-color: |
[[[
if (states['sun.sun'].state == 'below_horizon')
return "black";
else return "cyan";
]]]
name: "Moon Phase"
state_display: |
[[[
if (states['sensor.moon_phase'].state == 'new_moon') return "New Moon";
if (states['sensor.moon_phase'].state == 'waxing_crescent') return "Waxing Crescent";
if (states['sensor.moon_phase'].state == 'first_quarter') return "First Quarter";
if (states['sensor.moon_phase'].state == 'waxing_gibbous') return "Waxing Gibbous";
if (states['sensor.moon_phase'].state == 'waning_gibbous') return "Waning Gibbous";
if (states['sensor.moon_phase'].state == 'last_quarter') return "Last Quarter";
if (states['sensor.moon_phase'].state == 'waning_crescent') return "Waning Crescent";
else return "Full Moon"
]]]
label: |
[[[
if (states['sensor.moon'].state == 'below_horizon')
return "(Below Horizon)";
else return "(Above Horizon)";
]]]
entity_picture: |
[[[ return `/local/images/moon/${entity.state}.jpg`; ]]]
show_entity_picture: true
That is because it thinks below_horizion is one word. Glad you found a solution!
Made a small change with the screen breakpoints so that it would look normal on desktop/tablets but I got my end goal. Thanks for the assist
