diff --git a/README.md b/README.md index f4ff423..eab8ddf 100755 --- a/README.md +++ b/README.md @@ -278,7 +278,7 @@ In questa Repo, le custom Cards utilizzate sono le seguenti: Vi invito a leggere la documentazione di quelle che intendete ad utilizzare. -## File Dashboard +## File Dashboard.yaml Bene, ora finalmente andremo a creare il file yaml della nostra Dashboard. Il file dovrà avere lo stesso nome inserito in *"filename:"* nel nostro [configuration.yaml](#configuration.yaml). @@ -368,7 +368,7 @@ Fate attenzione alle seguenti istruzioni: - **filter**: utile per aggiungere un filtro alla vostra luce, che cambierà colore in base a quello utilizzato (utile per lampadine/strisce led RGB); - **opacity**: utile per sfumare la quantità di luce in base alla percentuale di luminosità impostata (utile per qualsiasi lampadina/striscia led dimmerabile); -#### BONUS 1: Planimetria "di giorno" +###### BONUS 1: Planimetria "di giorno" Volendo, si può aggiungere un elemento corrispondente alla vostra planimetria scattata "di giorno". @@ -393,12 +393,12 @@ Volendo, si può aggiungere un elemento corrispondente alla vostra planimetria s ``` L'opzione **state_image** renderà trasparente l'immagine durante le ore notture (e quindi mostrando la principale), mentre la mostrerà durante le ore di luce (notare l'entità *sun.sun* ed i suoi stati *above_horizon* e *below_horizon*). -#### BONUS 2: Gif animata per la Pioggia +###### BONUS 2: Gif animate per il Meteo Nella sezione [Elaborazione Immagini](#elaborazione-immagini-photoshop-gimp-ecc) avevo menzionato un BONUS riguardante due immagini (giorno + notte) con eventuali balconi/terrazzie/giardini esclusi. Bene, lo scopo di queste due ulteriori immagini è quello di inserire nel nostro Floorplan, una o più gif raffiguranti il meteo che agiscano ovviamente solo all'esterno dell'abitazione. -Per raggiungere questo scopo, utilizzeremo questo codice: +Per raggiungere lo scopo, utilizzeremo questo codice: ```yaml - type: image @@ -431,5 +431,60 @@ Per raggiungere questo scopo, utilizzeremo questo codice: action: none ``` -> Il metodo sopra descritto è stato utilizzato con l'intento di utilizzare più di una gif. Se si volesse utilizzare solo una per, esempio, la pioggia, si potrebbe utilizzare *state_filter*. In questo modo si eviterebbe di menzionare tutti gli stati possibili dell'entità meteo. Più info sulla [doc ufficiale](https://www.home-assistant.io/lovelace/picture-elements/). +> Il metodo sopra descritto è stato utilizzato con l'intento di utilizzare più di una gif. Se si volesse utilizzarne solo una, si potrebbe utilizzare *state_filter*. In questo modo si eviterebbe di menzionare tutti gli stati possibili dell'entità meteo. Più info sulla [doc ufficiale](https://www.home-assistant.io/lovelace/picture-elements/). +#### Icone + +Arrivati a questo punto, avrete finalmente il vostro Floorplan con tutte le immagini ed eventuali gif inserite. Cosa manca? Le icone "cliccabili" per poter controllare le luci di casa vostra. + +Anche queste saranno degli elementi della Picture Elements: + +```yaml +- type: state-icon + entity: light.faretti + icon: 'mdi:string-lights' + style: + '--iron-icon-height': 1.2vw + '--iron-icon-width': 1.2vw + '--paper-item-icon-active-color': '#ffff66' + '--paper-item-icon-color': darkgrey + align-items: center + background-color: '#FFFFFF' + border-radius: 100% + box-shadow: '0px 0px 28px 0px rgba(0,0,0,0.39)' + display: flex + justify-content: center + left: 61% + margin-left: '-1.5vw' + margin-top: '-1.5vw' + top: 71% + transform: scale(1.2) + width: 2.5vw + height: 2.5vw + tap_action: + action: toggle +``` +Fatto questo, il vostro Floorplan sarà funzionante. + +#### Sidebar + +Se durante la creazione delle vostre immagini avete previsto uno spazio per la Sidebar, è arrivato il momento di inserirla. + +Anche questa, ovviamente, altro non è che un *Elemento* della Picture Elements. Quindi, il suo inserimento sarà del tutto simile agli elementi precedenti: + +```yaml +- action: none + hold_action: + action: none + image: /local/ndr_floorplan/sidebar/sidebar_xl.png + style: + height: 100% + left: 11.73828125% + top: 50% + width: 23.4765625% + tap_action: + action: none + type: image +``` +>Nota 1: il consiglio è di perfezionare la vostra sidebar nella prima vista, in modo da copiarla/incollarla tale e quale anche nelle viste successive (con eventuali piccole correzioni); +>Nota 2: tutte le card che trovate nella sidebar in questa repo, sono a loro volta degli *elementi* della Picture Elements. \ No newline at end of file