Utilisation de Browser_mod

Mon problème

Bonjour à tous, je viens d’installer :

Mon but est de pouvoir afficher une popup lorsque je clique sur une entité. Dans mon cas précis, je souhaite sélectionner la saison de la piscine. Pour ce faire, voila le code YAML que j’ai saisi :

title: Maison
views:
  - title: Piscine
    path: pool
    icon: 'mdi:pool'
    badges: []
    popup_cards:
      sensor.pool_season:
        title: Choix de la saison
        card:
          type: grid
          cards:
            - type: markdown
              content: >-
                Souhaitez vous changer la saison de fonctionnement de la piscine ? L'heure
                de pivot de la filtration ainsi que le fonctionnement du robot seront
                impacté.
              title: Saison
            - type: grid
              cards:
                - type: button
                  tap_action:
                    action: none
                  name: Eté
                  hold_action:
                    action: none
                - type: button
                  tap_action:
                    action: toggle
                  name: Hiver
                  show_icon: false
              columns: 2
              square: false
          columns: 1
          square: false
    cards:
      - type: entities
        entities:
          - entity: sensor.pool_season
          - entity: sensor.pool_analysed_at
          - entity: sensor.pool_temperature
          - entity: sensor.pool_ph
          - entity: sensor.pool_orp
          - entity: sensor.pool_salinity
          - entity: sensor.pool_pump
          - entity: sensor.pool_pump_hours
        title: Indicateurs piscine

Seulement, lorsque je clique sur l’entité saison, il continue à m’afficher la popup classique :

Avez vous une piste à me donner car là je vois pas trop ce que j’ai loupé…

Merci d’avance

Ma configuration


System Health

version core-2021.3.4
installation_type Home Assistant OS
dev false
hassio true
docker true
virtualenv false
python_version 3.8.7
os_name Linux
os_version 5.4.99
arch x86_64
timezone Europe/Paris
Home Assistant Community Store
GitHub API ok
Github API Calls Remaining 4985
Installed Version 1.11.3
Stage running
Available Repositories 825
Installed Repositories 8
Home Assistant Cloud
logged_in false
can_reach_cert_server ok
can_reach_cloud_auth ok
can_reach_cloud ok
Hass.io
host_os Home Assistant OS 5.12
update_channel stable
supervisor_version supervisor-2021.03.6
docker_version 19.03.13
disk_total 30.8 GB
disk_used 5.9 GB
healthy true
supported true
board ova
supervisor_api ok
version_api ok
installed_addons Grafana (6.1.3), UniFi Controller (0.20.3), Node-RED (8.1.3), Visual Studio Code (3.1.1), InfluxDB (4.0.3), File editor (5.2.0), Terminal & SSH (9.1.0), Home Assistant Google Drive Backup (0.103.1), Samba share (9.3.1)
Lovelace
dashboards 2
resources 5
views 4
mode storage
___
1 « J'aime »

Bonjour,

Je pense qu’il te manque le nom du service, soit browser_mod.popup pour répondre à ton besoin.

Regarde

Merci pour la réponse, j’étais parti de cette entrée dans la doc : GitHub - thomasloven/hass-browser_mod: 🔹 A Home Assistant integration to turn your browser into a controllable entity - and also an audio player

Je ne vois pas comment préciser le service… Désolé je suis un jeune utilisateur et la réponse doit surement être triviale mais je n’ai pas encore les bon réflexes.

Merci

Ne pas oublier de regarder le topic officiel en attendant une réponse ici :

Une vidéo Youtube m’as permis de trouver la solution, il fallait sortir le popup_cards de views

title: Maison
views:
  - title: Piscine
    path: pool
    icon: 'mdi:pool'
    badges: []
    cards:
      - type: entities
        entities:
          - entity: sensor.pool_season
          - entity: sensor.pool_analysed_at
          - entity: sensor.pool_temperature
          - entity: sensor.pool_ph
          - entity: sensor.pool_orp
          - entity: sensor.pool_salinity
          - entity: sensor.pool_pump
          - entity: sensor.pool_pump_hours
        title: Indicateurs piscine
popup_cards:
  sensor.pool_season:
    title: Choix de la saison
    card:
      type: grid
      cards:
        - type: markdown
          content: >-
            Souhaitez vous changer la saison de fonctionnement de la piscine ?
            L'heure de pivot de la filtration ainsi que le fonctionnement du
            robot seront impacté.
        - type: grid
          cards:
            - type: button
              tap_action:
                action: none
              name: Eté
              hold_action:
                action: none
            - type: button
              tap_action:
                action: toggle
              name: Hiver
              show_icon: false
          columns: 2
          square: false
      columns: 1
      square: false

1 « J'aime »

Bien joué :wink: Belle recherche
Fallait le savoir

Merci, ca marche exactement comme je veux, il me reste plus qu’un problème visuel : Le X pour fermer la popup n’est pas parfaitement aligner verticalement… Je test bcp de css de droite et de gauche mais pour le moment je bloque !!
Demo

En faite, c’est dans la documentation… (dans le lien que @Arnault à posté) :upside_down_face: :innocent:

@Arnault en prenant ton code est en le mettant dans une vue, il fonctionne correctement (peut être un problème de cache ?):

animate_1

J’ai eu le soucis et je l’ai réglé avec card-mod:

    popup_cards:
      sun.sun:
        title: Météo
        style: |
          mwc-icon-button{
            margin: 0 0 .35em 0
          }
        card:

Le fonctionnement que tu as en le mettant au niveau que tu indiques n’est pas le même fonctionnement que tu essayais avec le 1er code que tu as fourni.

Le premier code remplacé la fenêtre des informations supplémentaires (more-info) seulement sur la vue alors que là où tu la mis au final remplace la fenêtre more-info partout dans ton tableau de bord.

Tu ne pourras pas avoir ce fonctionnement par exemple (fenêtre more-info qui s’affiche sur une vue et est remplacée sur une autre) :

animate

1 « J'aime »

As tu essayé en CSS un

vertical-align: middle;

En fait, ce qu’il faut réussir à attaquer c’est la classe .mdc-icon-button pour lui mettre font-size: 0;

Comme toujours, tu as la réponse à tout @Clemalex :grin:

J’ai déplacé ma popup_cards dans la vue et en effet cella fonctionne parfaitement. Pourquoi cella ne fonctionnais pas avant, aucune idée ??

Pour le css, je n’ai pas modifié les marges de mwc-icon-button car cella déplaçait le bouton vers le haut. Le X était bien centré mais au survol de la sourie, le rond n’était plus centré. Du coup j’ai changé la taille de la police de ha-icon et là tout ce centre parfaitement.

popup_cards:
  sensor.pool_season:
    title: Saison
    card:
      type: grid
      cards:
        - type: markdown
          content: >-
            {% if states.input_boolean.swimming_season.state == 'off' %} La
            piscine est en mode hivernage depuis
            {{states('input_text.swimming_season_since')}}. Dans ce mode, la
            filtration est active 3h par jour (2h avant le levé du soleil et 1h
            après le levé du soleil). Si les températures extérieures sont
            négative, la filtration est mise en route 5 minutes toutes les
            heures pour éviter la formation de glaçe à la surface de l'eau. {%
            else %}  La piscine est en mode été depuis
            {{states('input_text.swimming_season_since')}}. La piscine est
            allumé la moitié du temps avant 13h et la moitié du temps après 13h
            dans une limite maximun de 14h par jour. Le robot de piscine se met
            en marche chaque matin en même temps que la piscine pour une durée
            de 2h30. {% endif %}


            Souhaitez vous changer de saison ?
          style:
            .: |
              ha-card {
                box-shadow: none !important;
                text-align: justify;
              }
        - type: 'custom:button-card'
          entity: input_boolean.swimming_season
          tap_action:
            action: toggle
          layout: icon_label
          show_label: true
          show_name: false
          color_type: card
          state:
            - value: 'off'
              icon: 'mdi:white-balance-sunny'
              label: Passer en mode été
            - value: 'on'
              icon: 'hass:snowflake'
              label: Activer l'hivernage
          styles:
            card:
              - margin: 0px 16px 16px 16px
              - width: calc(100% - 32px)
              - background-color: 'rgb(204, 0, 0)'
              - color: white
            grid:
              - grid-template-columns: 20% 1fr
            label:
              - justify-self: start
              - padding-left: 0px
      columns: 1
      square: false
    style:
      $: |
        .mdc-dialog {
          backdrop-filter: blur(10px) !important;
          -webkit-backdrop-filter: blur(10px) !important;
        }
      .: |
        mwc-icon-button ha-icon {
          font-size: 13.3333px;
        }

Encore un énorme merci :pray:

1 « J'aime »

Moi j’ai mis :

font-size: 0 :wink: (j’aime pas les valeurs infinies)

Un message a été scindé en un nouveau sujet : Filtration piscine

Ca marche aussi, du coup j’ai tous passé à 0 :slight_smile:
J’en profite pour te demander, j’essaie de restaurer la couleur par défaut du header de la popup (je n’aime pas ce gris). Je voudrais que ca reste noir ou blanc en fonction de l’heure du thème et bleu sur mon iPhone. Du coup si je force une couleur je n’ai plus la bonne en fonction de l’heure ou du device… Tu as une idée ?

Merci

Non, pas vraiment.

Je partirais sur un modèle en fonction de l’heure pour changer la valeur et sinon directement une variable dans le thème…

Au cas où certains aurais la même problématique que moi, en forçant les couleurs de fond et de police sur celles préconfigurés cela fonctionne :slight_smile:

app-toolbar {
  color: var(--primary-text-color) !important;
  background-color: var(--primary-background-color) !important;
}

Un message a été scindé en un nouveau sujet : Synthèse Lumières

Bonjour
Mon problème ressemble à celui de Arnault :
J’ai une vue (télécommande) que j’aimerais voir apparaitre en popup lorsque je clique sur un bouton d’une autre vue…J’y arrive mais j’ai ceci d’affiché. est-il possible d’avoir la vue entière afin de voir la télécommande complète Télécommande créée sur une vue ?

Téléco7

@foxbru
salut,
tu peux peut etre utiliser le parametre large: true, si ca ne suffit pas, je ne sais pas si c’est la meilleure methode, mais perso je fais :

    style: |-

      :host .content {
        width: 35vw;
      height: 37vh;}

pour vraiment definir la taille voulue :wink:
@++

Hello
ok merci mais tu mets ces infos où ?

Cordialement