Card Modder (Smussiamo gli spigoli della card)
Su questo articolo vediamo come installare il custom card Card-Modder che ci permette di smussare gli spigoli (e non solo) delle varie card.
1. Scarichiamo l’ultima relase del file card-modder.js dal repo di GitHub di Thomasloven QUI cliccando Clone or Download.
2. Posizioniamola nel file /config/www/custom-lovelace/card-modder/card-modder.js
3. Andiamo sul file ui-lovelace.yaml e inseriamo la configurazione come segue.
|
1 2 3 4 5 |
title: Home Assistant background: center / cover no-repeat url("/local/immagini/lovelace_wall.jpg") fixed resources: - url: /customcards/custom-lovelace/card-modder/card-modder.js type: js |
Dove:
title: e’ il nome che appare nella UI di Home Assistant (potete mettere qualsiasi nome)
background: e’ lo sfondo che noi impostiamo alla nostra UI
resources: e’ la voce che a noi interessa per la definizione dei vari costom card che vogliamo inserire, nel nostro caso card-modder.
Ora andiamo a vedere come smussare i spigoli ad una card qualsiasi che abbiamo sul file ui-lovelace.yaml.
esempio:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
title: Home Assistant background: center / cover no-repeat url("/local/immagini/lovelace_wall.jpg") fixed resources: - url: /customcards/custom-lovelace/card-modder/card-modder.js type: js views: - title: Home icon: mdi:home-assistant cards: - type: custom:card-modder style: border-radius: 25px card: type: entities title: Cucina show_header_toggle: false entities: - light.luce_cucina - light.faretto_cucina_1 - light.faretto_cucina_2 - light.faretto_cucina_3 |
dove:
– title: Home sta per la creazione del gruppo che vediamo nella UI Horizontal dove andranno inserite le varie card.
icon: icona del gruppo (se non viene definito, vedremo il nome)
cards: obbligatorio in un gruppo per accogliere le varie card che si andranno ad inserire.
– type: obbligatoria per la definizione delle varie custom-card nel nostro caso card-modder.
(seguono le varie impostazioni della custom card)
card: obbligatorio per ospitare la card che contiene dentro le varie entità.
type: entities qui comincia la nostra card esistente con una piccola modifica, come notate manca il – davanti al type, mi raccomando è importante, da non inserire.
In questo caso non abbiamo bisogno di riavviare Hassio, basta solamente un aggiornamento della UI.
Una risposta.
qualcuno puo’ aiutarmi a creare una schermata del genere? Con le card trasparenti su uno sfondo a mia scelta? Ci provo ma molte cose non coincidono, ad esempio io quel file lovelace.yaml non so proprio dove sia….