Ciao a tutti,
qualcuno di voi ha creato il floorplan su lovelace? Mi potrebbe dare qualche dritta o tutorial da seguire?
Ci ho provato da solo, qualcosina ho fatto ma vi spiego nei dettagli cosa:
Leggevo in giro di creare i file [font=Helvetica, Arial, sans-serif]floorplan.css e floorplan.svg, oltre al file floorplan.yaml[/font]
[font=Helvetica, Arial, sans-serif]Invece il risultato l'ho avuto mettendo in un tab l'immagine jpg della piantina di casa e nel file ui-lovelace.yaml il seguente codice (ne copio solo una parte):
[/font]
- title: Floorplan
panel: true
icon: mdi:floor-plan
cards:
# floorplan
- type: picture-elements
image: /local/images/piantina.jpg
elements:
# INGRESSO
- type: state-icon
tap_action:
action: toggle
entity: light.faretti_ingresso
style:
top: 15%
left: 37%
padding: 0px
--paper-item-icon-color: rgb(89, 89, 89)
--paper-item-icon-active-color: yellow brightness(130%) saturate(1.5)
drop-shadow(0px 0px 10px gold
# SALONE
- type: state-icon
tap_action:
action: toggle
entity: light.lampadario_salone
style:
top: 40%
left: 15%
padding: 0px
--paper-item-icon-color: rgb(89, 89, 89)
--paper-item-icon-active-color: yellow brightness(130%) saturate(1.5)
drop-shadow(0px 0px 10px gold)
- type: state-icon
tap_action:
action: toggle
entity: light.faretti_salone
style:
top: 33%
left: 19%
padding: 0px
--paper-item-icon-color: rgb(89, 89, 89)
--paper-item-icon-active-color: yellow brightness(130%) saturate(1.5)
drop-shadow(0px 0px 10px gold)
- type: state-icon
tap_action:
action: toggle
entity: light.led_esterno_salone
style:
top: 20%
left: 10%
padding: 0px
--paper-item-icon-color: rgb(89, 89, 89)
--paper-item-icon-active-color: yellow brightness(130%) saturate(1.5)
drop-shadow(0px 0px 10px gold)
- type: state-icon
tap_action:
action: toggle
entity: light.led_interno_salone
style:
top: 52%
left: 12%
padding: 0px
--paper-item-icon-color: rgb(89, 89, 89)
--paper-item-icon-active-color: yellow brightness(130%) saturate(1.5)
drop-shadow(0px 0px 10px gold)
# TAVOLO
- type: state-icon
tap_action:
action: toggle
entity: light.faretti_tavolo
style:
top: 45%
left: 37%
padding: 0px
--paper-item-icon-color: rgb(89, 89, 89)
--paper-item-icon-active-color: yellow brightness(130%) saturate(1.5)
drop-shadow(0px 0px 10px gold)
Praticamente il risultato è la piantina con le iconcine delle lampadine dove le ho posizionate. Quando provo a cliccarle, sembra che il servizio si attiva ma non mi cambia colore l'iconcina
