Détail masquable façon fold-entity-row

Bonjour,

Je souhaite mettre en place pour mes vues smartphone, la possibilité de masquer certaines cartes, puis avec un clic les afficher.

L’add on fold-entity-row fais cela très bien pour les cartes « entities », mais ce n’est pas possible pour toutes les cartes (comme des iframe, ou des cartes media_player).

Une solution un peu crade serais de mettre un switch avec une conditionnal card (avec du coup à gérer la réinitialisation du statut), mais je suppose qu’il y a une meilleure solution.

Quelqu’un a-t-il déjà fait cela?

Réponse courte : oui.

Réponse moins courte :

Réponse moins, mais alors vraiment moins courte

Je réponds sur la partie masquage uniquement. En effet, pour mon besoin, je me suis rendu compte que je me prenait la tête pour rien à vouloir cacher/afficher au bon vouloir des cartes sur mobile. Actuellement, soit je les vire tout simplement, soit je réorganise mon layout pour les foutre en bas de page et je n’y pense même plus.

La dernière version de lovelace-layout-card rend la chose possible et aisée.

Précédemment, on devait utiliser un vieux state-switch et injecter un template avec lovelace-gen en fonction de la vue.

Maintenant, c’est simple. Tu configures une vue globale, pour tous les périphériques. Je prends un exemple de ma vue stock tiens :

# lovelace_gen
# ------------------------------------------------------------------------------
# File: lovelace/02_views/view_stock.yaml
# Desc: Used by lovelace_gen to generate Lovelace ui.
#       This is the stock view used with grocy/barcode buddy.
# ------------------------------------------------------------------------------
# Jinja stuff
{% set viewName = "stock" %}
# ------------------------------------------------------------------------------
# View settings.
icon: 'mdi:cart'
id: {{ viewName }}
path: {{ viewName }}
title: {{ viewName|capitalize }}
type: custom:grid-layout
layout:
  !include {{ "../03_layouts/layout_ " ~ viewName ~ ".yaml" }}
# ------------------------------------------------------------------------------
# Lovelace cards.
cards:
  # Add to stock
  - !include 
    - ../04_elements/e_header.yaml
    - gridarea: 'header1'
      title: '➕ Ajouter'
  - type: picture
    image: /local/pictures/barcodes/purchase.gif
    view_layout:
      grid-area: barcode1
[...]

Le morceau important, c’est celui-ci :

layout:
  !include ../03_layouts/layout_stock.yaml

Avec ca, tu injectes une configuration pour ton layout, dans laquelle tu peux définir comme bon te semble tes mediaqueries (mon layout est crade, mais en ce moment j’ai la flemme) :

# lovelace_gen
grid-template-columns: 1fr 1fr 1fr 1fr
grid-template-rows: auto
grid-gap: 5%
grid-template-areas: |
  "header1 header2 header3 header4"
  "barcode1 barcode2 barcode3 barcode4"
mediaquery:
  "(max-width: 600px)":
    grid-template-columns: 100%
    grid-template-areas: |
      "header1"
      "barcode1"
      "header2"
      "barcode2"
      "header3"
      "barcode3"
      "header4"
      "barcode4"
  "(max-width: 980px)":
    grid-template-columns: 50% 1fr
    grid-template-areas: |
      "header1 header2"
      "barcode1 barcode2"
      "header3 header4"
      "barcode3 barcode4"

Ca te permet de réorganiser la vue en fonctiondes périphériques. On ne masque rien pour le moment, mais ca peut être intéressant de faire figurer en premier, sur mobile, une carte avec les raccourci les plus utilisés tandis que sur desktop, on peut afficher la météo par exemple.

Pour cacher les cartes non désirées, suffit d’utiliser l’exemple de la doc :

- type: markdown
  content: |
    This is only shown on screens more than 800 px wide
  view_layout:
    show:
      mediaquery: "(min-width: 800px)"

La ou mon exemple peut, et doit être amélioré, c’est par l’utilisation de variables globales pour les mediqueries. Si tu as 5 vues par exemple, tu ne vas pas te taper une copie de « (max-width: 980px): » dans chaque fichier layout … mais c’est une autre histoire.

1 J'aime

Merci pour le partage, il est grand temps que je me relance dans lovelace-layout-card qui n’était pas aussi étoffé quand j’ai régardé (il y a 1,5 an)

:+1:

Bonjour,

Tout d’abord, merci pour cette réponse détaillée.

Mon objectif est bien de pouvoir afficher / masquer à la volée (peu importe le support ou résolution).
En gros par défaut je souhaite afficher certaines infos, puis avec soit un « + », ou « détail » ou genre une flèche vers le bas (façon fold-entity-row), afficher des choses en plus.

La solution proposée avec le state-switch est semblable à ce que je proposais avec un switch bidon + une conditional card (c’est ce que j’ai déjà mis en oeuvre avec un affichage qui dépend de mon input select de mon hamony hub), la problématique du switch en lui même reste valable. Même si visuellement je peux faire un bouton qui fasse toggle, cela reste une entité au sens HA du terme, et non lié juste à la page (il faut qu’a chaque ouverture de page les cartes cachés soient bien cachées, et je ne souhaite pas que si un user affiche, cela affiche sur un autre user, même si le cas est rare).

Un exemple visuel, j’ai aujourd’hui cet affichage:

Et je souhaite par défaut masquer le bloc du bas (dans le cas présent c’est une carte « iframe », mais cela pourrait être une autre), et avoir quelque chose du style (c’est biensur un photomontage du coup :slight_smile: ):
image

C’est assez spécifique en effet. Je ne sais pas si c’est actuellement faisable sans passer par une entité, ou sans rentrer dans un dev spécifique.

Alternative qui arrive quasiment au résultat voulu, tout en restant aisé à mettre en place :

  1. Une layout card avec des mediaqueries configurées.
  2. Une button-card qui s’affiche sur mobile uniquement, avec le css qui va bien pour la faire ressembler à image
    (c’est tout à fait possible).
  3. En tap-action de la carte bouton un appel de service popup pour browser-mod, quelque chose du style :
service: browser_mod.popup
data:
  title: Recherche avancée
  card:
    type: iframe
    url: <urlQuiVaBien>
  deviceID:
    - this

Avec ca on obtient un résultat qui :

  • :white_check_mark: Affiche les contrôle souhaités.
  • :white_check_mark: Ne fait pas appel à une entité spécifique ou que sais-je.
  • :x: Se comporte comme une popup et non comme un accordéon.

Si les contrôles doivent être affichés sur desktop aussi, alors on évite les doublons et on utilise un !include pour transformer le :

card:
    type: iframe
    url: <urlQuiVaBien>

en

card:
    !incude ./maCarteDeControle.yaml

et ainsi pourvoir réutiliser l’élément dans d’autres parties de l’UI sans devoir dupliquer quoi que ce soit. Je précise qu’il faut lovelace-gen pour cela.

J’avais aussi cette solution en tête (que j’utilise déjà pour d’autres besoins), mais ce n’est pas le même rendu.

Merci pour ton aide, je vais continuer un peu mes investigations, et le cas échéant je changerai mon besoin si il est trop compliqué.