Pas assez de temps pour bosser sur ma domotique mais je vais faire un récapitulatif de ma configuration pour afficher cette télécommande responsive…
Tout d’abord mon fichier config/configuration.yaml point d’entrée de HA :
configuration.yaml
homeassistant:
name: Maison
latitude: !secret homeassistant_latitude
longitude: !secret homeassistant_longitude
elevation: !secret homeassistant_elevation
unit_system: metric
time_zone: !secret homeassistant_time_zone
internal_url: !secret homeassistant_url_interne
packages: !include_dir_named integrations
frontend:
extra_module_url:
- /hacsfiles/custom-sidebar/custom-sidebar.js
Cette configuration récupère toutes les intégrations du répertoire integrations via la ligne :
packages: !include_dir_named integrations
Dans mon répertoire integrations se trouve un fichier nommé lovelace.yaml qui va charger l’ensemble des ressources externes et les dashboard.
config/integrations/lovelace.yaml
#
# Intégrations de tous les dashboards
#
# https://www.home-assistant.io/lovelace/
# https://www.home-assistant.io/lovelace/dashboards-and-views
#
lovelace:
# Il s'agit du mode de stockage par défaut.
# mode: yaml
mode: storage
# Inclusion des ressources externes
# Ajouter uniquement lorsque le mode est défini à yaml
# Sinon gérer les ressources dans le panneau de configuration Lovelace.
resources:
- url: /hacsfiles/lovelace-meteofrance-weather-card/meteofrance-weather-card.js
type: module
- url: /hacsfiles/mini-graph-card/mini-graph-card-bundle.js
type: module
- url: /hacsfiles/battery-state-card/battery-state-card.js
type: module
- url: /hacsfiles/custom-sidebar/custom-sidebar.js
type: module
- url: /hacsfiles/upcoming-media-card/upcoming-media-card.js
type: module
- url: /hacsfiles/button-card/button-card.js
type: module
# Tableaux de bord Lovelace supplémentaires basés sur YAML
dashboards: !include ../lovelace/dashboards.yaml
Dans mon fichier dashboards.yaml, on trouvera les différent tableaux de bord qui seront accessible via le menu latéral.
config/lovelace/dashboards.yaml
#
# Liste tous les dashboards avec leurs fichiers respectifs
#
# https://www.home-assistant.io/lovelace/dashboards-and-views/#dashboards
#
default-yaml:
mode: yaml
title: Maison (manuel)
icon: mdi:view-dashboard
show_in_sidebar: true
filename: lovelace/default/dashboard.yaml
Dans mon cas, un seul dashboard est chargé via le fichier lovelace/default/dashboard.yaml. Ce fichier va configurer des paramètres que j’aurai besoin pour les différentes vues de ce tableau de bord (par exmple la définition de certains boutons via des classes).
config/lovelace/defaut/dashboard.yaml
#
# Liste les views pour le dashboard
#
button_card_templates:
default:
aspect_ratio: 1/1
styles:
icon:
#- box-shadow: 3px 3px 2px rgba(0,0,0,0.5)
- height: 85%
- width: 85%
card:
#- box-shadow: 3px 3px 5px 3px rgba(140,140,140,0.5);
- size: 95%
- background-color: '#72685C'
red:
template: default
styles:
icon:
- color: '#6F6959'
card:
- background-color: '#A92123'
blue:
template: default
styles:
icon:
- color: '#6F6959'
card:
- background-color: '#3F9FD1'
green:
template: default
styles:
icon:
- color: '#6F6959'
card:
- background-color: '#2EC901'
yellow:
template: default
styles:
icon:
- color: '#6F6959'
card:
- background-color: '#EDE600'
views:
- !include views/freebox_responsive.yaml
- !include ...
Je n’ai mis les !include que des vues qui étaient intérressantes pour la télécommande.
Le fichier views/freebox_responsive.yaml est donc chargé par ce fichier.
Le fichier views/freebox_responsive.yaml va définir les accès et ce qu’il contient :
config/lovelace/defaut/views/freebox_responsive.yaml
#
# Définition de la vue avec les accès autorisés
#
path: freebox_rs
icon: 'mdi:calculator'
visible: !include_dir_list ../visibility
badges: []
panel: true
cards:
- type: 'custom:mod-card'
card:
type: vertical-stack
cards:
- !include ../cards/freebox_remote_landscape.yaml
- !include ../cards/freebox_remote_portrait.yaml
Dans mon cas, cette vue sera en mode panelpour prendre la totalité de la largeur disponible et affichera 1 carte (*obligatoire en mode panel) qui contiendra 2 cartes en mode vertical.
Les 2 cartes sont définies dans les fichiers :
cards/freebox_remote_landscape.yamlcards/freebox_remote_portrait.yaml
Le fichier freebox_remote_landscape.yaml affichera la télécommande en mode paysage via ce code :
config/lovelace/defaut/cards/freebox_remote_landscape.yaml
type: 'custom:mod-card'
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: 'custom:button-card'
template: default
icon: 'mdi:volume-plus'
tap_action:
repeat: 500
action: call-service
service: freebox_player.remote
service_data:
code: vol_inc
- type: 'custom:button-card'
template: default
icon: 'mdi:volume-mute'
tap_action:
action: call-service
service: freebox_player.remote
service_data:
code: mute
- type: 'custom:button-card'
template: default
icon: 'mdi:pan-up'
tap_action:
action: call-service
service: freebox_player.remote
service_data:
code: prgm_inc
- type: 'custom:button-card'
template: default
icon: 'mdi:numeric-1'
tap_action:
action: call-service
service: freebox_player.remote
service_data:
code: '1'
- type: 'custom:button-card'
template: default
icon: 'mdi:numeric-2'
tap_action:
action: call-service
service: freebox_player.remote
service_data:
code: '2'
- type: 'custom:button-card'
template: default
icon: 'mdi:numeric-3'
tap_action:
action: call-service
service: freebox_player.remote
service_data:
code: '3'
- type: 'custom:button-card'
color_type: blank-card
- type: 'custom:button-card'
template: default
show_entity_picture: true
entity_picture: /local/lovelace/free.png
tap_action:
action: call-service
service: freebox_player.remote
service_data:
code: home
- type: 'custom:button-card'
template: default
icon: 'mdi:power'
tap_action:
action: call-service
service: freebox_player.remote
service_data:
code: power
- type: horizontal-stack
cards:
- type: 'custom:button-card'
template: default
icon: 'mdi:volume-minus'
tap_action:
repeat: 500
action: call-service
service: freebox_player.remote
service_data:
code: vol_dec
- type: 'custom:button-card'
template: default
color_type: icon
color: '#A92123'
icon: 'mdi:record-rec'
tap_action:
action: call-service
service: freebox_player.remote
service_data:
code: rec
- type: 'custom:button-card'
template: default
icon: 'mdi:pan-down'
tap_action:
action: call-service
service: freebox_player.remote
service_data:
code: prgm_dec
- type: 'custom:button-card'
template: default
icon: 'mdi:numeric-4'
tap_action:
action: call-service
service: freebox_player.remote
service_data:
code: '4'
- type: 'custom:button-card'
template: default
icon: 'mdi:numeric-5'
tap_action:
action: call-service
service: freebox_player.remote
service_data:
code: '5'
- type: 'custom:button-card'
template: default
icon: 'mdi:numeric-6'
tap_action:
action: call-service
service: freebox_player.remote
service_data:
code: '6'
- type: 'custom:button-card'
template: red
icon: 'mdi:backspace-outline'
tap_action:
action: call-service
service: freebox_player.remote
service_data:
code: red
- type: 'custom:button-card'
template: default
icon: 'mdi:arrow-up-bold-outline'
tap_action:
action: call-service
service: freebox_player.remote
service_data:
code: up
- type: 'custom:button-card'
template: blue
icon: 'mdi:card-search-outline'
tap_action:
action: call-service
service: freebox_player.remote
service_data:
code: blue
- type: horizontal-stack
cards:
- type: 'custom:button-card'
template: default
icon: 'mdi:skip-backward-outline'
tap_action:
action: call-service
service: freebox_player.remote
service_data:
code: bwd
- type: 'custom:button-card'
template: default
icon: 'mdi:play-pause'
tap_action:
action: call-service
service: freebox_player.remote
service_data:
code: play
- type: 'custom:button-card'
template: default
icon: 'mdi:skip-forward-outline'
tap_action:
action: call-service
service: freebox_player.remote
service_data:
code: fwd
- type: 'custom:button-card'
template: default
icon: 'mdi:numeric-7'
tap_action:
action: call-service
service: freebox_player.remote
service_data:
code: '7'
- type: 'custom:button-card'
template: default
icon: 'mdi:numeric-8'
tap_action:
action: call-service
service: freebox_player.remote
service_data:
code: '8'
- type: 'custom:button-card'
template: default
icon: 'mdi:numeric-9'
tap_action:
action: call-service
service: freebox_player.remote
service_data:
code: '9'
- type: 'custom:button-card'
template: default
icon: 'mdi:arrow-left-bold-outline'
tap_action:
action: call-service
service: freebox_player.remote
service_data:
code: left
- type: 'custom:button-card'
template: default
icon: 'mdi:checkbox-marked-circle-outline'
tap_action:
action: call-service
service: freebox_player.remote
service_data:
code: ok
- type: 'custom:button-card'
template: default
icon: 'mdi:arrow-right-bold-outline'
tap_action:
action: call-service
service: freebox_player.remote
service_data:
code: right
- type: horizontal-stack
cards:
- type: 'custom:button-card'
template: default
icon: 'mdi:skip-previous-outline'
tap_action:
action: call-service
service: freebox_player.remote
service_data:
code: prev
- type: 'custom:button-card'
color_type: blank-card
- type: 'custom:button-card'
template: default
icon: 'mdi:skip-next-outline'
tap_action:
action: call-service
service: freebox_player.remote
service_data:
code: next
- type: 'custom:button-card'
color_type: blank-card
- type: 'custom:button-card'
template: default
icon: 'mdi:numeric-0'
tap_action:
action: call-service
service: freebox_player.remote
service_data:
code: '0'
- type: 'custom:button-card'
color_type: blank-card
- type: 'custom:button-card'
template: green
icon: 'mdi:menu-open'
tap_action:
action: call-service
service: freebox_player.remote
service_data:
code: green
- type: 'custom:button-card'
template: default
icon: 'mdi:arrow-down-bold-outline'
tap_action:
action: call-service
service: freebox_player.remote
service_data:
code: down
- type: 'custom:button-card'
template: yellow
icon: 'mdi:information-variant'
tap_action:
action: call-service
service: freebox_player.remote
service_data:
code: yellow
style: |
@media (orientation: portrait) {
ha-card {
display: none;
}
}
Important, le bloc
style: |permet de masquer cette carte en mode portrait.
Et en mode portrait, le fichier freebox_remote_portrait.yaml se charge d’afficher la télécommande par le code suivant :
config/lovelace/defaut/cards/freebox_remote_portrait.yaml
type: 'custom:mod-card'
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: 'custom:button-card'
color_type: blank-card
- type: 'custom:button-card'
color_type: blank-card
- type: 'custom:button-card'
template: default
icon: 'mdi:power'
tap_action:
action: call-service
service: freebox_player.remote
service_data:
code: power
- type: horizontal-stack
cards:
- type: 'custom:button-card'
template: default
icon: 'mdi:numeric-1'
tap_action:
action: call-service
service: freebox_player.remote
service_data:
code: '1'
- type: 'custom:button-card'
template: default
icon: 'mdi:numeric-2'
tap_action:
action: call-service
service: freebox_player.remote
service_data:
code: '2'
- type: 'custom:button-card'
template: default
icon: 'mdi:numeric-3'
tap_action:
action: call-service
service: freebox_player.remote
service_data:
code: '3'
- type: horizontal-stack
cards:
- type: 'custom:button-card'
template: default
icon: 'mdi:numeric-4'
tap_action:
action: call-service
service: freebox_player.remote
service_data:
code: '4'
- type: 'custom:button-card'
template: default
icon: 'mdi:numeric-5'
tap_action:
action: call-service
service: freebox_player.remote
service_data:
code: '5'
- type: 'custom:button-card'
template: default
icon: 'mdi:numeric-6'
tap_action:
action: call-service
service: freebox_player.remote
service_data:
code: '6'
- type: horizontal-stack
cards:
- type: 'custom:button-card'
template: default
icon: 'mdi:numeric-7'
tap_action:
action: call-service
service: freebox_player.remote
service_data:
code: '7'
- type: 'custom:button-card'
template: default
icon: 'mdi:numeric-8'
tap_action:
action: call-service
service: freebox_player.remote
service_data:
code: '8'
- type: 'custom:button-card'
template: default
icon: 'mdi:numeric-9'
tap_action:
action: call-service
service: freebox_player.remote
service_data:
code: '9'
- type: horizontal-stack
cards:
- type: 'custom:button-card'
color_type: blank-card
- type: 'custom:button-card'
template: default
icon: 'mdi:numeric-0'
tap_action:
action: call-service
service: freebox_player.remote
service_data:
code: '0'
- type: 'custom:button-card'
color_type: blank-card
- type: horizontal-stack
cards:
- type: 'custom:button-card'
template: red
icon: 'mdi:backspace-outline'
tap_action:
action: call-service
service: freebox_player.remote
service_data:
code: red
- type: 'custom:button-card'
template: default
icon: 'mdi:arrow-up-bold-outline'
tap_action:
action: call-service
service: freebox_player.remote
service_data:
code: up
- type: 'custom:button-card'
template: blue
icon: 'mdi:card-search-outline'
tap_action:
action: call-service
service: freebox_player.remote
service_data:
code: blue
- type: horizontal-stack
cards:
- type: 'custom:button-card'
template: default
icon: 'mdi:arrow-left-bold-outline'
tap_action:
action: call-service
service: freebox_player.remote
service_data:
code: left
- type: 'custom:button-card'
template: default
icon: 'mdi:checkbox-marked-circle-outline'
tap_action:
action: call-service
service: freebox_player.remote
service_data:
code: ok
- type: 'custom:button-card'
template: default
icon: 'mdi:arrow-right-bold-outline'
tap_action:
action: call-service
service: freebox_player.remote
service_data:
code: right
- type: horizontal-stack
cards:
- type: 'custom:button-card'
template: green
icon: 'mdi:menu-open'
tap_action:
action: call-service
service: freebox_player.remote
service_data:
code: green
- type: 'custom:button-card'
template: default
icon: 'mdi:arrow-down-bold-outline'
tap_action:
action: call-service
service: freebox_player.remote
service_data:
code: down
- type: 'custom:button-card'
template: yellow
icon: 'mdi:information-variant'
tap_action:
action: call-service
service: freebox_player.remote
service_data:
code: yellow
- type: horizontal-stack
cards:
- type: 'custom:button-card'
color_type: blank-card
- type: 'custom:button-card'
template: default
show_entity_picture: true
entity_picture: /local/lovelace/free.png
tap_action:
action: call-service
service: freebox_player.remote
service_data:
code: home
- type: 'custom:button-card'
color_type: blank-card
- type: horizontal-stack
cards:
- type: 'custom:button-card'
template: default
icon: 'mdi:volume-plus'
tap_action:
repeat: 500
action: call-service
service: freebox_player.remote
service_data:
code: vol_inc
- type: 'custom:button-card'
template: default
icon: 'mdi:volume-mute'
tap_action:
action: call-service
service: freebox_player.remote
service_data:
code: mute
- type: 'custom:button-card'
template: default
icon: 'mdi:pan-up'
tap_action:
action: call-service
service: freebox_player.remote
service_data:
code: prgm_inc
- type: horizontal-stack
cards:
- type: 'custom:button-card'
template: default
icon: 'mdi:volume-minus'
tap_action:
repeat: 500
action: call-service
service: freebox_player.remote
service_data:
code: vol_dec
- type: 'custom:button-card'
template: default
color_type: icon
color: '#A92123'
icon: 'mdi:record-rec'
tap_action:
action: call-service
service: freebox_player.remote
service_data:
code: rec
- type: 'custom:button-card'
template: default
icon: 'mdi:pan-down'
tap_action:
action: call-service
service: freebox_player.remote
service_data:
code: prgm_dec
- type: horizontal-stack
cards:
- type: 'custom:button-card'
template: default
icon: 'mdi:skip-backward-outline'
tap_action:
action: call-service
service: freebox_player.remote
service_data:
code: bwd
- type: 'custom:button-card'
template: default
icon: 'mdi:play-pause'
tap_action:
action: call-service
service: freebox_player.remote
service_data:
code: play
- type: 'custom:button-card'
template: default
icon: 'mdi:skip-forward-outline'
tap_action:
action: call-service
service: freebox_player.remote
service_data:
code: fwd
style: |
@media (orientation: landscape) {
ha-card {
display: none;
}
}
Toujours un bloc style: | qui masque cette carte en mode paysage.
Ce qui me reste à trouver :
- C’est comment bloquer le mode
panelpour qu’il utilise la dimension la plus petite (hauteur ou largeur).
Actuellement il se limite à la largeur ce qui laisse dépasser les boutons en bas de l’écran en mode paysage.
Vous pouvez voir ma configuration complète sur mon Github pour les dingues de séparation de fichiers de configuration comme moi 
Et toujours un GRAANNND MERCI à @Clemalex pour ton aide si précieuse 
