@skank
Sure not a problem… an example i hope is useful…
this is one of my cards (remember to set ‘panel mode’ to the view to have a full screen view):
and this is the code:
type: picture-elements
elements:
- type: conditional
conditions:
- entity: group.sensori_sicurezza
state: "on"
elements:
- type: custom:text-element
text: PERICOLO ! SENSORE ATTIVATO !
style:
top: 4%
left: 19%
color: rgb(255,41,61)
font-size: 16px
- type: conditional
conditions:
- entity: group.sensori_sicurezza
state: "off"
elements:
- type: custom:text-element
text: CASA SICURA. NESSUN ALLARME DAI SENSORI
style:
top: 4%
left: 24%
color: rgba(15, 249, 7)
font-size: 16px
- type: custom:button-card
color_type: card
aspect_ratio: 1/1
size: 65%
show_name: false
show_state: true
entity: binary_sensor.water_leak_sensor_158d0002832c30
state_display: |
[[[
if (entity.state == 'on') return 'allagato';
if (entity.state == 'off') return 'asciutto';
else return 'non disponibile';
]]]
styles:
state:
- color: white
- font-size: 9px
- font-weight: bold
- text-transform: uppercase
state:
- value: "on"
icon: mdi:pipe-leak
styles:
card:
- background-color: red
- border-radius: 10%
- color: white
icon:
- animation: blink 1s ease infinite
- value: "off"
icon: mdi:pipe-leak
styles:
card:
- background-color: rgba(19, 11, 250, 0.6)
- border-radius: 10%
- color: white
- value: unavailable
icon: mdi:pipe-leak
styles:
card:
- background-color: rgba(19, 11, 250, 0.6)
- border-radius: 10%
- color: white
style:
height: 7px
width: 55px
top: 37%
left: 72%
- type: custom:button-card
color_type: card
aspect_ratio: 1/1
size: 65%
show_name: false
show_state: true
entity: binary_sensor.smoke_sensor_158d00032ba59a
state_display: |
[[[
if (entity.state == 'on') return 'incendio';
if (entity.state == 'off') return 'sicuro';
else return 'non disponibile';
]]]
styles:
state:
- color: white
- font-size: 9px
- font-weight: bold
- text-transform: uppercase
state:
- value: "on"
icon: mdi:fire-alert
styles:
card:
- background-color: red
- border-radius: 10%
- color: white
icon:
- animation: blink 1s ease infinite
- value: "off"
icon: mdi:fire-off
styles:
card:
- background-color: rgba(250, 128, 15, 0.6)
- border-radius: 10%
- color: white
- value: unavailable
icon: mdi:fire-off
styles:
card:
- background-color: rgba(250, 128, 15, 0.6)
- border-radius: 10%
- color: white
style:
height: 7px
width: 55px
top: 31%
left: 44%
- type: custom:button-card
color_type: card
aspect_ratio: 1/1
size: 65%
show_name: false
show_state: true
entity: binary_sensor.natgas_sensor_158d000340d1f9
state_display: |
[[[
if (entity.state == 'on') return 'fuga gas';
if (entity.state == 'off') return 'sicuro';
else return 'non disponibile';
]]]
styles:
state:
- color: white
- font-size: 9px
- font-weight: bold
- text-transform: uppercase
state:
- value: "on"
icon: mdi:gas-burner
styles:
card:
- background-color: red
- border-radius: 10%
- color: white
icon:
- animation: blink 1s ease infinite
- value: "off"
icon: mdi:gas-burner
styles:
card:
- background-color: rgba(100, 188, 38, 0.6)
- border-radius: 10%
- color: white
- value: unavailable
icon: mdi:gas-burner
styles:
card:
- background-color: rgba(100, 188, 38, 0.6)
- border-radius: 10%
- color: white
style:
height: 7px
width: 55px
top: 29%
left: 36%
- type: custom:button-card
color_type: card
aspect_ratio: 1/1
size: 90%
show_name: false
entity: input_boolean.lavasciuga_attiva
tap_action:
action: navigate
navigation_path: /impianto-elettrico/4
extra_styles: |
@-webkit-keyframes swing
{
15%
{
-webkit-transform: translateX(5px);
transform: translateX(5px);
}
30%
{
-webkit-transform: translateX(-5px);
transform: translateX(-5px);
}
50%
{
-webkit-transform: translateX(3px);
transform: translateX(3px);
}
65%
{
-webkit-transform: translateX(-3px);
transform: translateX(-3px);
}
80%
{
-webkit-transform: translateX(2px);
transform: translateX(2px);
}
100%
{
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
state:
- value: "on"
icon: mdi:washing-machine
styles:
card:
- background-color: rgb(255,255,255,0.5)
- border-radius: 50%
- color: red
- animation: swing 1s ease infinite
icon:
- animation: blink 0.8s ease infinite
- value: "off"
icon: mdi:washing-machine
styles:
card:
- background-color: rgb(255,255,255,0.5)
- border-radius: 50%
- color: rgba(30, 106, 236)
style:
height: 8px
width: 60px
top: 33%
left: 80.3%
- type: custom:button-card
color_type: card
aspect_ratio: 1/1
size: 90%
show_name: false
entity: sensor.sonoff_1000ae8e4d_power
icon: mdi:fridge
tap_action:
action: navigate
navigation_path: /impianto-elettrico/2
extra_styles: |
@keyframes mymove {
50% {box-shadow: 0 0 40px blue;}
}
styles:
card:
- background-color: rgb(255,255,255,0.5)
- border-radius: 50%
- color: "[[[ if (entity.state > 5) return \"magenta\"; else return \"blue\" ]]]"
- animation: "[[[ if (entity.state > 5) return \"mymove 2s ease infinite\" ]]]"
icon:
- animation: "[[[ if (entity.state >= 5) return \"blink 1s ease infinite\"; ]]]"
style:
height: 8px
width: 60px
top: 43%
left: 43%
- type: custom:button-card
color_type: card
aspect_ratio: 1/1
size: 90%
show_name: false
entity: fan.zhimi_airpurifier_mb3
tap_action:
action: navigate
navigation_path: /lovelace/6
hold_action:
action: more-info
extra_styles: |
@keyframes ball-scale {
from {
transform: scale(1);
box-shadow: 0 10px 6px -6px #6C7A89;
}
to {
transform: scale(1.35);
box-shadow: 0 10px 6px -6px #6C7A89;
}
}
state:
- value: "on"
icon: mdi:air-filter
styles:
card:
- background-color: rgb(255,255,255,0.5)
- border-radius: 50%
- color: red
- animation: ball-scale 2s ease-in-out infinite
- value: "off"
icon: mdi:air-filter
styles:
card:
- background-color: rgb(255,255,255,0.5)
- border-radius: 50%
- color: rgba(15, 249, 7)
- value: unavailable
icon: mdi:air-filter
styles:
card:
- background-color: rgb(255,255,255,0.5)
- border-radius: 50%
- color: rgba(15, 249, 7)
style:
height: 8px
width: 60px
top: 70%
left: 76%
- type: custom:button-card
color_type: card
aspect_ratio: 1/1
size: 90%
show_name: false
entity: vacuum.roborock_vacuum_s5
tap_action:
action: navigate
navigation_path: /lovelace/5
hold_action:
action: more-info
extra_styles: |
@keyframes shifting {
0% {
transform: translate(-10px,0);
}
100% {
transform: translate(10px,0);
}
}
state:
- value: cleaning
icon: phu:roborock
styles:
card:
- background-color: rgb(255,255,255,0.5)
- border-radius: 50%
- color: red
- animation: shifting 1s linear infinite alternate
- value: returning
icon: phu:roborock
styles:
card:
- background-color: rgb(255,255,255,0.5)
- border-radius: 50%
- color: red
- animation: shifting 1s linear infinite alternate
- value: docked
icon: phu:roborock
styles:
card:
- background-color: rgb(255,255,255,0.5)
- border-radius: 50%
- color: brown
- value: pause
icon: phu:roborock
styles:
card:
- background-color: rgb(255,255,255,0.5)
- border-radius: 50%
- color: brown
- value: idle
icon: phu:roborock
styles:
card:
- background-color: rgb(255,255,255,0.5)
- border-radius: 50%
- color: brown
- value: unavailable
icon: phu:roborock
styles:
card:
- background-color: rgb(255,255,255,0.5)
- border-radius: 50%
- color: brown
- animation: blink 1s ease infinite
style:
height: 8px
width: 60px
top: 18%
left: 73%
- type: custom:button-card
color_type: card
aspect_ratio: 1/1
size: 90%
show_name: false
entity: binary_sensor.caldaia_accesa
tap_action:
action: navigate
navigation_path: /impianto-elettrico/5
extra_styles: |
@keyframes mymove {
50% {box-shadow: 0 0 40px red;}
}
state:
- value: "on"
icon: mdi:water-boiler
styles:
card:
- background-color: rgb(255,255,255,0.5)
- border-radius: 50%
- color: red
- animation: mymove 2s ease infinite
icon:
- animation: blink 1s ease infinite
- value: "off"
icon: mdi:water-boiler
styles:
card:
- background-color: rgb(255,255,255,0.5)
- border-radius: 50%
- color: green
style:
height: 8px
width: 60px
top: 45%
left: 82.2%
- type: custom:button-card
color_type: card
aspect_ratio: 1/1
size: 90%
show_name: false
entity: sensor.tv_state
tap_action:
action: navigate
navigation_path: /impianto-elettrico/3
state:
- value: Acceso
icon: mdi:television-classic
styles:
card:
- background-color: rgb(255,255,255,0.5)
- border-radius: 50%
- color: yellow
- box-shadow: 0px 0px 10px 10px yellow
- value: Stand By
icon: mdi:power-standby
styles:
card:
- background-color: rgb(255,255,255,0.5)
- border-radius: 50%
- color: purple
- value: Spento
icon: mdi:television-classic-off
styles:
card:
- background-color: rgb(255,255,255,0.5)
- border-radius: 50%
- color: black
style:
height: 8px
width: 60px
top: 77%
left: 62.5%
All the buttons are made with custom button card addon LINK
Very customizable. The most boring thing is to find the right place for button, you have to try the right coordinates with ‘top’ and ‘left’ command…
It’s a long process but not that difficult…hope it helps…
Start with this forum…LINK
My apologizes for off-topic…