Telecomando in Lovelace con Custom: button-card (22/05/2019)
Con il passare del tempo il custom component si è aggiornato, abbiamo sostituito il file per il corretto funzionamento con le nuove versioni.
In questa guida vedremo come realizzare un telecomando tramite l’interfaccia Lovelace di Home Assitant ed un componente aggiuntivo che ne migliora le potenzialità.
La guida è stata realizzata da Mauro Cimino
INSTALLAZIONE CUSTOM COMPONENT
Per prima cosa andiamo ad installare il custom component “lovelace custom card” vedi anche la precedente guida su Lovelace:
1) scarichiamo dal seguente link di GitHub https://github.com/kuuji/button-card il file button-card.js
2) inseriamo il file appena scaricato nella cartella config/www/custom_ui del vostro raspberry (se non l’avete createla)
3) inserite il codice che segue nel file ui-lovelace.yaml o tramite interfaccia grafica all’inizio del codice:
|
1 2 3 4 |
title: Home resources: - url: /local/custom_ui/button-card.js type: module |
4) se volete che il componente si aggiorni da solo inserite anche la parte seguente
|
1 2 3 |
custom_updater: card_urls: - https://raw.githubusercontent.com/kuuji/button-card/master/tracker.json |
CONFIGURAZIONE LOVELACE
Adesso che abbiamo installato il componente aggiuntivo possiamo passare alla guida vera e propria per poter realizzare il nostro telecomando.
Vi faccio presente che personalmente comando la Tv tramite un broadlink, ma potete utilizzare anche altri sistemi, questa guida si occupa solo della parte grafica di Lovelace. Successivamente uscirà una guida per l’uso del broadlink.
Per realizzare il telecomando andremo ad utilizzare una serie di card nello specifico vertical-stack ed horizzontal-stack per cui vi consiglio di leggere la documentazione ufficiale di lovelace https://www.home-assistant.io/lovelace/:
|
1 2 3 4 5 6 7 8 9 10 11 |
- title: Salotto icon: 'mdi:sofa' path: salotto cards: - type: vertical-stack ### definisce un riquadro verticale che conterrà l'intero telecomando ### cards: - type: "custom:button-card" ### definisce la prima card sotto vertical-stack che fara da titolo ### name: Panasonic TV ### definisce il nome della card ### style: ### definisce lo stile visuale della carta ### - background-color: rgb(28, 128, 199) ### definisce il colore di sfondo della carta ### - color: white ### definisce il colore del testo ### |
come si può notare i colori si possono definire sia tramite rgb sia tramite il nome del colore, con questa parte di codice abbiamo realizzato il “titolo del telecomando” ed il risultato sarà il seguente:
Adesso andiamo a vedere come vine realizzato la prima riga di tasti:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
- type: horizontal-stack ### definisce la prima riga di tasti, quelle a seguire definiranno la seconda, la terza e cosi via## cards: - type: "custom:button-card" ### richiama il componente personalizzato ed è il primo tasto ### entity: media_player.panasonic_tv ### l'entità che il tasto deve comandare #### size: 30% ### dimensione icona ### icon: mdi:power ### icona ### style: ### stile del tasto ### - font-size: 10px ### dimensioni del testo ### show_state: true ### richiama lo stato del mediaplayer ### state: - value: 'off' ### se spento l'icona avra il colore specificato nella riga sotto ### color: red - value: 'on' ### se acceso l'icona avra il colore specificato nella riga sotto ### color: green - type: "custom:button-card" ### richiama il componente personalizzato ed è il secondo tasto ### name: TV ### nome che compare sotto l'icona ### color_off: rgb(28, 128, 199) ### colore dell'icona ### icon: mdi:television-box ### icona ### size: 30% ### dimensione icona ### entity: script.tv ### entità di riferimento ### style: - font-size: 10px tap_action: ### azione da eseguire alla pressione del tasto ### action: call-service ### specifica che bisogna chiamare un servizio ### service_data: entity_id: script.tv ### servizio da richiamare #### - type: "custom:button-card" name: AV color_off: rgb(28, 128, 199) icon: mdi:video-input-hdmi size: 30% entity: script.av style: - font-size: 10px tap_action: action: call-service service: script.turn_on service_data: entity_id: script.av - type: "custom:button-card" name: Menù color_off: rgb(28, 128, 199) icon: mdi:menu size: 30% entity: script.menu style: - font-size: 10px tap_action: action: call-service service: script.turn_on service_data: entity_id: script.menu - type: "custom:button-card" name: Apps color_off: rgb(28, 128, 199) icon: mdi:apps size: 30% entity: script.apps style: - font-size: 10px tap_action: action: call-service service: script.turn_on service_data: entity_id: script.apps |
come potete vedere sotto l’horizzontal stack sono stati aggiunti 5 custom componet questo vuol dire che in questa riga del telecomando si avrà 5 tasti:
Nel file rar telecomando_lovelace.rar troverete il codice completo del telecomando, ricordate che dovrete sostituire tutti i nomi nelle dichiarazioni entity_id: con le vostre entità. Per qualunque tipo di modifica o personalizzazione vogliate fare potete prendere di riferimento il link di GitHub dove sono riportate molte altre funzioni e personalizzazioni per i tasti.
Ecco il risultato finale
4 risposte
Ho una tv LG come faccio a sapere quali sono i codici da inserire per esempio aprire le app o le freccette ??
Poi vorrei sapere il codice dello script del tasto ?
Grazie Mille in anticipo
lo script dipente da cosa devi comandare. io per esempio comando con custom:mini-media-player e script ssh
configuration.yaml
shell_command:
num1: ‘./send_command.sh 192.168.1.87 AAAAAQAAAAEAAAAAAw==’
num2: ‘./send_command.sh 192.168.1.87 AAAAAQAAAAEAAAABAw==’
num3: ‘./send_command.sh 192.168.1.87 AAAAAQAAAAEAAAACAw==’
script:
num1:
alias: num1
sequence:
– service: shell_command.num1
num2:
alias: num2
sequence:
– service: shell_command.num2
num3:
alias: num3
sequence:
– service: shell_command.num3
poi in lovelace ho usato
artwork: cover
entity: media_player.tv_sony
hide:
controls: true
volume: true
shortcuts:
buttons:
– data:
entity_id: script.num1
icon: ‘mdi:numeric-1-box’
id: num1
service: script.num1
type: script
– data:
entity_id: script.num2
icon: ‘mdi:numeric-2-box’
id: num2
service: script.num2
type: script
– data:
entity_id: script.num3
icon: ‘mdi:numeric-3-box’
id: num3
service: script.num3
type: script
columns: 6
source: icon
type: ‘custom:mini-media-player’
Il file telecomando_lovelace.rar risulta essere protetto da password. Vorrei sapere come fare per aprirlo.
Grazie
Saluti
Il link per il download del rar non funziona 😢