Positionner une carte sur toute la largeur du dashboard

@telenaze et @ramses_ramseswisse , oui j’ai déjà testé. le choix de vue modifie toute les cartes alors que je voudrais juste créer une carte qui me permette de faire une sorte d’entête au dessus de toutes les autres.
de plus, quand je sélectionne mansory layout, max_cols se limite à 3 colones alors que la valeur entrée est 10…

En fait je pensais que c’était une fonction de home assistant, mais maintenant que tu parle de l’ayout card, j’avais effectivement installé ce module.

Et en créant une carte grille et l’ayout card tu n’arriverait pas faire quelque chose d’approchant.

C’est la que je cale un peu. l’arborescence pour les grilles est pas évidente pour le débutant que je suis et tout mes essais par rapport à ça ont échoué

Je pense pourtant que c’est la solution quand je lis la documentation de layout card

je vais devoir reprendre un cours sur les grilles CSS je pense :laughing:

Moi aussi débutant, je vois pas exactement ce que tu veux faire. Sinon il y a le mode kiosk pour un dash sur tab ou show15, ou crée un dash spécial pour la show

Il faudrait que tu fasses un dessin de ce que tu veux faire exactement, cela aiderai beaucoup dans la façon de concevoir.

Ouais ou avec quelque image plus facile de comprendre pour t’aider

Oui en card mod CSS tu dois pouvoir faire quelque chose comme les floorplan 3d, mais il faut commencer à se prendre la tête


voila un exemple de ce que je voudrais en haut.
Mais comment faire pour définir la taille et la position des cartes?

Voilà un exemple de carte,

type: vertical-stack
cards:
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        color_type: blank-card
        styles:
          card:
            - width: 8px
        tap_action:
          action: toggle
        name: offset
        show_name: false
      - type: markdown
        content: ' '
        title: TV-Remote
      - type: custom:button-card
        color_type: blank-card
        styles:
          card:
            - width: 8px
        tap_action:
          action: toggle
        name: offset
        show_name: false
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        color_type: blank-card
        styles:
          card:
            - width: 8px
        tap_action:
          action: toggle
        name: offset
        show_name: false
      - type: custom:button-card
        size: 50%
        offset: 20px
        styles:
          card:
            - height: 80px
            - width: 80px
          icon:
            - color: red
        tap_action:
          action: call-service
          service: script.fernseher_an
          service_data: {}
          target: {}
        icon: mdi:power
        show_name: true
      - type: custom:button-card
        color_type: blank-card
        styles:
          card: null
        tap_action:
          action: toggle
        name: offset
        show_name: false
      - type: custom:button-card
        styles:
          card:
            - height: 80px
            - width: 80px
        tap_action:
          action: call-service
          service: script.fernseher_source
          service_data: {}
          target: {}
        icon: mdi:import
        show_name: false
        icon_height: 50px
      - type: custom:button-card
        color_type: blank-card
        styles:
          card:
            - width: 8px
        tap_action:
          action: toggle
        name: offset
        show_name: false
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        color_type: blank-card
        styles:
          card:
            - width: 8px
        tap_action:
          action: toggle
        name: offset
        show_name: false
      - type: custom:button-card
        styles:
          card:
            - height: 80px
            - width: 80px
        tap_action:
          action: call-service
          service: script.fernseher_back
          service_data: {}
          target: {}
        icon: mdi:arrow-left
        show_name: false
        icon_height: 50px
      - type: custom:button-card
        color_type: blank-card
        styles:
          card: null
        tap_action:
          action: toggle
        name: offset
        show_name: false
      - type: custom:button-card
        styles:
          card:
            - height: 80px
            - width: 80px
        tap_action:
          action: call-service
          service: script.fernseher_home
          service_data: {}
          target: {}
        icon: mdi:home
        show_name: false
        icon_height: 50px
      - type: custom:button-card
        color_type: blank-card
        styles:
          card:
            - width: 8px
        tap_action:
          action: toggle
        name: offset
        show_name: false
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        color_type: blank-card
        styles:
          card:
            - width: 8px
        tap_action:
          action: toggle
        name: offset
        show_name: false
      - type: custom:button-card
        tap_action:
          action: call-service
          service: script.amazon_prime
        show_name: false
        icon: mdi:amazon
        icon_height: 30px
      - type: custom:button-card
        tap_action:
          action: call-service
          service: script.fernseher_up
        show_name: false
        icon: mdi:chevron-up
        icon_height: 50px
        styles:
          card:
            - border-radius: 10px 0px
            - box-shadow: none
      - type: custom:button-card
        tap_action:
          action: call-service
          service: script.netflix_2
        show_name: false
        icon_height: 30px
        icon: mdi:netflix
      - type: custom:button-card
        color_type: blank-card
        styles:
          card:
            - width: 8px
        tap_action:
          action: toggle
        name: offset
        show_name: false
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        tap_action:
          action: call-service
          service: script.fernseher_left
        icon: mdi:chevron-left
        show_name: false
        styles:
          card:
            - border-radius: 0px 10px 10px 0px
            - border: 2px
            - padding: 0
            - box-shadow: none
      - type: custom:button-card
        tap_action:
          action: call-service
          service: script.fernseher_ok
        icon: mdi:circle-outline
        show_name: false
        icon_height: 50px
        styles:
          card:
            - border-radius: 0px
            - border: 2px
            - padding: 0
            - box-shadow: none
      - type: custom:button-card
        tap_action:
          action: call-service
          service: script.fernseher_right
        icon: mdi:chevron-right
        show_name: false
        styles:
          card:
            - border-radius: 0px 10px 10px 0px
            - border: 2px
            - padding: 0
            - box-shadow: none
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        color_type: blank-card
        styles:
          card:
            - width: 8px
        tap_action:
          action: toggle
        name: offset
        show_name: false
      - type: custom:button-card
        color_type: blank-card
        tap_action:
          action: toggle
        name: offset
        show_name: false
      - type: custom:button-card
        tap_action:
          action: call-service
          service: script.fernseher_down
        icon: mdi:chevron-down
        show_name: false
        icon_height: 50px
        styles:
          card:
            - border-radius: 0px 10px 10px 0px
            - border: 2px
            - padding: 0
            - box-shadow: none
      - type: custom:button-card
        color_type: blank-card
        tap_action:
          action: toggle
        name: offset
        show_name: false
      - type: custom:button-card
        color_type: blank-card
        styles:
          card:
            - width: 8px
        tap_action:
          action: toggle
        name: offset
        show_name: false
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        color_type: blank-card
        styles:
          card:
            - width: 8px
        tap_action:
          action: toggle
        name: offset
        show_name: false
      - type: custom:button-card
        color_type: blank-card
        styles: null
        tap_action:
          action: toggle
        name: offset
        show_name: false
      - type: vertical-stack
        cards:
          - type: custom:button-card
            styles:
              card:
                - height: 80px
              icon:
                - height: 30px
            tap_action:
              action: call-service
              service: script.fernseher_lauter
              service_data: {}
              target: {}
            icon: mdi:volume-plus
            show_name: false
            icon_height: 50px
          - type: custom:button-card
            styles:
              card:
                - height: 80px
              icon:
                - height: 30px
            tap_action:
              action: call-service
              service: script.fernseher_leiser
              service_data: {}
              target: {}
            icon: mdi:volume-minus
            show_name: false
            icon_height: 50px
      - type: custom:button-card
        color_type: blank-card
        tap_action:
          action: toggle
        name: offset
        show_name: false
      - type: custom:button-card
        color_type: blank-card
        styles:
          card:
            - width: 8px
        tap_action:
          action: toggle
        name: offset
        show_name: false

Oui mais c’est à l’échelle d’une carte. Comment mettre cette mise en forme à l’échelle du dashboard?

Avec l’ayout en mode panneau 1 carte

Ce que j’explique plus haut, c’est que quand je tente le mode panneau, toute mes cartes disparaissent à l’exception de la première :cry:

Tu dois faire une erreur quelque part, voici ce que cela donne sur ma tablette.
J’ai bien l’ensemble de la carte avec ses sous cartes en plein écran.

Bonjour

Regarde ici :
https://community.home-assistant.io/t/custom-layout-card-grid-layout-please-help/334526

Je commence à regarder ce type de tableau de bord

1 « J'aime »

C’est normal dans le sens ou le mode panneau est fait pour n’afficher qu’une seule carte (en plein écran). Si tu veux afficher les autres cartes actuelles, il faut fusionner l’ensemble de toutes les carte en une seule grosse carte (avec stack horizontal/vertical, grid ou autres)

Bon, j’ai compris le fond, reste à comprendre la forme.

Je suis tombé sur un site qui explique le fonctionnement basic de la grille css, je vais chercher un peu mieux pour trouver des explications complementaires sur le fonctionnement des grids areas et la gestion du placement des colonnes et lignes ou gestion des cellules.

Donc si je comprend bien, le type de vue dans la config de ma vue, peut rester sur tuiles (par defaut) tout va se jouer sur la façon dont je partitionne ma grille?

Bon et bien, j’ai réussi a avoir quelque chose qui me plait enfin!:partying_face:

Merci a vous 4 pour vos aides précieuses​:slightly_smiling_face::slightly_smiling_face:

Un apercu du test et son code😉

type: custom:layout-card
layout_type: custom:grid-layout
layout:
  grid-template-columns: 1fr 1fr 1fr
  grid-template-rows: auto
  grid-template-areas: |
    "header header header"
    "salon vie chambres"
cards:
  - type: entity
    entity: sensor.time
    view_layout:
      grid-area: chambres
  - type: entities
    entities:
      - sensor.time
      - sensor.date
      - sensor.date_time
    view_layout:
      grid-area: salon
  - type: entities
    entities:
      - sensor.time
      - sensor.date
      - sensor.date_time
    view_layout:
      grid-area: vie
  - show_state: true
    show_name: true
    camera_view: auto
    type: picture-entity
    entity: light.piece_de_vie
    image: https://demo.home-assistant.io/stub_config/bedroom.png
    view_layout:
      grid-area: header

Maintent je comprends un peut mieux la forme. Il ne me reste plus qu’à travailler là dessus :upside_down_face:

3 « J'aime »

Cool,
Tu as réussi à faire quelque chose de sympathique. :+1:

1 « J'aime »