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.
):
Affiche les contrôle souhaités.
Se comporte comme une popup et non comme un accordéon.