Carte différentes en mode Portrait / Paysage

Entraide Home Assistant
,
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: