Carte différentes en mode Portrait / Paysage

Entraide Home Assistant
,
1

Mon problème

Je cherche à afficher des cartes différentes en mode Portrait et Paysage.

J’ai créé une carte pour afficher une télécommande Freebox sur une tablette qui est en mode paysage :

- type: vertical-stack
  cards:
    # 1ère ligne
    - 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
          # icon: mdi:home
          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
    # 2ème ligne
    - 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
    # 3ème ligne
    - 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
    # 4ème ligne
    - 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

Et je souhaiterais pouvoir en afficher une autre en mode portrait sur mon smartphone comme celle de @escaflowne62 dans le message

télécommande d'escaflowne62
télécommande d'escaflowne62400×635 45.1 KB

Est-ce qu’il y a un moyen, sous Lovelace, d’afficher une carte ou une autre en fonction de la largeur de l’appareil qui affiche la carte ?

C’est une question pour les experts de Lovelace… :grin:

Ma configuration

System Health

version core-2021.4.3
installation_type Home Assistant Supervised
dev false
hassio true
docker true
virtualenv false
python_version 3.8.7
os_name Linux
os_version 5.10.1-v8+
arch aarch64
timezone Europe/Paris
Home Assistant Community Store
GitHub API ok
Github API Calls Remaining 4993
Installed Version 1.11.3
Stage running
Available Repositories 777
Installed Repositories 11
Home Assistant Cloud
logged_in false
can_reach_cert_server ok
can_reach_cloud_auth ok
can_reach_cloud ok
Home Assistant Supervisor
host_os Debian GNU/Linux 10 (buster)
update_channel stable
supervisor_version supervisor-2021.03.9
docker_version 20.10.1
disk_total 109.8 GB
disk_used 11.3 GB
healthy true
supported true
supervisor_api ok
version_api ok
installed_addons File editor (5.2.0), MariaDB (2.3.0), Nginx Proxy Manager (0.10.1), ESPHome (1.16.2), Zigbee2mqtt (1.18.1-1), Mosquitto broker (5.1.1), Samba share (9.3.1), Node-RED (8.2.1), InfluxDB (4.0.4), SSH & Web Terminal (8.1.1)
Lovelace
dashboards 3
resources 7
views 12
mode storage
___
2

Slt.
Si tu crées un nouveau tabeau de bord juste pour ton smartphone, c’est ce que j’ai fait pour la tablette.

Capture
Capture991×506 22.8 KB

1 « J'aime »
3

Bonjour,
Comment fais-tu ensuite pour indiquer à la tablette ou au smartphone de prendre tel ou tel Dashboard ?

4

C’est dans la vue profil :wink:

1 « J'aime »
5

Je ne suis pas un expert Lovelace mais je vais essayer de te répondre :sweat_smile:

Encore une fois, je vais utiliser card-mod :heart:

Card-mod est souvent utilisé comme module, c’est à dire qu’on ajoute la clé style: dans la carte que nous voulons personnaliser et nous pouvons grâce à elle utiliser les propriétés css.

@Sylvain_G et @escaflowne62, vous utilisez tous les deux comme base, une carte native de HA (vertical-stack pour toi @Sylvain_G et picture-elements pour toi @escaflowne62), hors ces cartes ne disposent pas forcément de l’élément primaire dont se sert card-mod pour intervenir.

Heureusement, le créateur de card-mod a pensé à ce cas, mais préviens que :

:warning: Cela n’est nécessaire que dans de très rares cas et risque de poser plus de problèmes que d’en résoudre.
Il est fort probable que votre carte contienne une autre carte, auquel cas c’est sur cette dernière que vous devez appliquer les personnalisations.

Sauf que la demande de @Sylvain_G est assez exceptionnelle pour ne pouvoir rentrer que dans ce cas (à ma connaissance, donc n’hésitez pas si vous avez une autre solution :+1: ).

On va donc utiliser la carte card-mod. Cette carte est une carte pouvant contenir une autre carte (à la même manière que stack-in-card par exemple, et j’y reviendrais :wink: )

Donc @Sylvain_G voici un exemple d’utilisation avec 2 cartes card-mod qui contiennent toutes les deux une carte Image (picture-card) suivant l’orientation Portrait et Paysage pour un rendu comme ceci (le gif est fait depuis mon téléphone avec l’application Android Créateur GIF, GIF Éditeur, Vidéo en GIF):

https://i.ibb.co/6nFT0kv/portrait-paysage.gif(taille de l'image supérieure à 4 MB)


Dans la vue du tableau de bord, on a bien les deux cartes (l’une est déjà masquée car je travaille en paysage :wink: ) :


image
image1555×485 49.6 KB

Code de la carte affichée en mode Paysage 
type: 'custom:mod-card'
card:
  type: vertical-stack
  cards:
    - type: picture
      image: /local/hacf/telecommande_paysage.png
      tap_action:
        action: none
      hold_action:
        action: none
style: |
  @media (orientation: portrait) {
    ha-card {
      display: none;
    }
  }

Code de la carte affichée en mode Portrait 
type: 'custom:mod-card'
card:
  type: vertical-stack
  cards:
    - type: picture
      image: /local/hacf/telecommande_portrait.png
      tap_action:
        action: none
      hold_action:
        action: none
style: |
  @media (orientation: landscape) {
    ha-card {
      display: none;
    }
  }

La logique dans les cartes est la suivante :

  • Si l’orientation est en mode portrait on n’affiche pas la carte paysage
  • Si l’orientation est en mode paysage on n’affiche pas la carte portrait

:information_source: j’avais prévenu que je voulais parler plus longtemps de stack-in-card :wink:
Du fait de l’avertissement du développeur à l’utilisation de la carte card-mod, une bonne alternative aurait était d’imbriquer vos cartes de télécommande dans une carte stack-in-card afin de lui appliquer une personnalisation à l’aide de card-mod. Cela aurait eu pour effet de respecter les recommandations du développeur du module, malheureusement ce n’est pas possible car card-mod commence à s’appliquer trop bas dans la liste des éléments…

portrait_paysage_stack-in-card

Si vous avez des questions, n’hésitez pas :+1:

:hacf:

8

Pour tester, j’ai mis 2 fichiers telecommande_portrait.png et telecommande_paysage.png dans le répertoire config/www/lovelace via le partage Samba.

Puis dans une page de « Media-Query » sous HA, j’ai ajouter les 2 cartes via

Ce qui donne comme code :

views:
  - title: Media-Query
    path: media-query
    panel: false
    badges: []
    cards:
      - type: 'custom:mod-card'
        card:
          type: vertical-stack
          cards:
            - type: picture
              image: lovelace/telecommande_paysage.png
              tap_action:
                action: none
              hold_action:
                action: none
        style: |
          @media (orientation: portrait) {
            ha-card {
              display: none;
            }
          }
      - type: 'custom:mod-card'
        card:
          type: vertical-stack
          cards:
            - type: picture
              image: lovelace/telecommande_portrait.png
              tap_action:
                action: none
              hold_action:
                action: none
        style: |
          @media (orientation: landscape) {
            ha-card {
              display: none;
            }
          }

J’ai essayé plusieurs chemin d’accès au fichiers .png mais je n’arrive pas à les afficher que je sois en portrait ou en paysage.
Quand je suis en mode développeur sur Chrome (F12), je vois bien le basculement de « l’affichage de l’image » quand je change d’orientation :

Mode paysage :

image
image778×586 23.9 KB

Mode portrait :

image
image436×581 9.53 KB

L’icône d’un fichier non trouvé bascule bien entre la 1ère et la 2nde carte.

Je penche pour un problème dans le chemin d’accès au fichiers png. :thinking:

9

:roll_eyes:

Ce post devrait t’aider :

:wink:

11

Merci @Clemalex, le chemin à mettre était /local/lovelace/... (très bien expliqué dans ton message)

ce qui donne :

views:
  - title: Media-Query
    path: media-query
    panel: false
    badges: []
    cards:
      - type: 'custom:mod-card'
        card:
          type: vertical-stack
          cards:
            - type: picture
              image: /local/lovelace/telecommande_paysage.png
              tap_action:
                action: none
              hold_action:
                action: none
        style: |
          @media (orientation: portrait) {
            ha-card {
              display: none;
            }
          }
      - type: 'custom:mod-card'
        card:
          type: vertical-stack
          cards:
            - type: picture
              image: /local/lovelace/telecommande_portrait.png
              tap_action:
                action: none
              hold_action:
                action: none
        style: |
          @media (orientation: landscape) {
            ha-card {
              display: none;
            }
          }

Je vais remodeler les images de fond des télécommandes (en portrait et paysage) puis générer les boutons « transparents » qui exécuteront les actions.
Je posterais le résultat (code et images) pour ceux qui seront intéressés une fois fait. :grin:

1 « J'aime »
16

J’ai essayé de reprendre les images de fond pour qu’elles s’adaptent à la dimension des différents écrans sur lesquels je peux afficher cette télécommande mais je n’arrive pas à afficher la card-mod en mode panel puisqu’il y a plusieurs cards sur ce tableau de bord.

Comme faire pour que chaque image de fond (paysage ou portrait) puissent utiliser la surface maximum de la page sans afficher d’ascenseur (horizontal ou vertical) ?

J’ai la possibilité d’afficher cette télécommande sur les appareils suivants :

  • Samsung Galaxy A8 (2018) : 1080 x 2220 px (utilisé en mode portrait)
  • Samsung Galaxy S7 Edge : 2560 x 1440 px (utilisé en mode portrait)
  • Asus Zenpad 10 : 1280 x 800 px (utilisé en mode paysage)
1 « J'aime »
17

J’ai réussi à afficher 2 card-mod en fonction de l’orientation mais comme je ne peux pas utiliser le mode panel les card utilisent un max-width de 500px :

image
image952×733 35.2 KB

Si je désactive le max-width de 500px, c’est ce que je veux obtenir sur l’orientation paysage:

image
image953×735 47 KB

Comment je peux désactiver ce max-width par lovelace ?

18

:x:

Tu te méprends car on peut très bien le faire… :+1:

Je savais pertinemment que tu en aurais besoin et j’avais glisser la semi-solution dans mon post qui explique comment faire l’affichage portrait/paysage :

Code de la carte affichée en mode Paysage

type: 'custom:mod-card'
card:
  type: vertical-stack
  cards:
    - type: picture
      image: /local/hacf/telecommande_paysage.png
      tap_action:
        action: none
      hold_action:
        action: none
style: |
  @media (orientation: portrait) {
    ha-card {
      display: none;
    }
  }

Pour pouvoir masquer complètement la carte comme tu le veux, on a vu qu’il fallait passer par card-mod et l’utilisation de sa carte qui doit en contenir une autre.

Dans le code que j’ai partagé, on cherche à masquer une carte image (picture) donc le fait de l’insérer dans une carte pile verticale n’a aucun intérêt… :wink:

tu vois où je veux en venir ? Non ? Oui ?

On va simplement utiliser comme carte principale pour le mode panneau de la vue la carte card-mod dans laquel on va mettre une carte pile verticale dans laquelle on va mettre les deux cartes images :+1: (bien sûr, il faudra déplacer les balises style: de card-mod pour chaque carte image) :

Schématiquement ça donne ça :

Carte Card-mod
              |___Carte Pile Verticale
                                     |__Carte Image (portrait)
                                     |__Carte Image (paysage)

Et dans Lovelace :

type: 'custom:mod-card'
card:
  type: vertical-stack
  cards:
    - type: picture
      image: /local/lovelace/portrait.png
      tap_action:
        action: none
      hold_action:
        action: none
      style: |
        @media (orientation: landscape) {
          ha-card {
            display: none;
          }
        }
    - type: picture
      image: /local/lovelace/paysage.png
      tap_action:
        action: none
      hold_action:
        action: none
      style: |
        @media (orientation: portrait) {
          ha-card {
            display: none;
          }
        }

Pour avoir un rendu :

animate

Du coup, crois tu que l’utilisation de la carte card-mod (qui est déconseillée) soit toujours utile maintenant que la carte que l’on veut masquer se trouve englober dans une autre ?

:wink: :grin:

19

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.yaml
  • cards/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 panel pour 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 :grin:

Et toujours un GRAANNND MERCI à @Clemalex pour ton aide si précieuse :ok_hand: :clap: :clap:

1 « J'aime »
20

Et voici ce que cela donne :
CUSxgcdg1w

Désolé pour la latence entre les changement d’appareil mais j’ai l’impression que mon chrome est à genoux :disappointed_relieved:

21

Voir par ici → Floorplan full size card - Floorplan - Home Assistant Community

22

Voici je que j’ai mis dans le style du portrait :

      style: |
        @media (orientation: landscape) {
          ha-card {
            display: none;
          }
        }
        ha-card {
          height: auto !important;
          max-height: 90vh !important;
        }

Et dans le mode paysage :

      style: |
        @media (orientation: portrait) {
          ha-card {
            display: none;
          }
        }
        ha-card {
          width: auto !important;
          max-width: 90vw !important;
        }

Mais évidemment, ça ne fonctionne pas … :thinking: