Aide Popup Browser mod

Bonjour a tous,

J’essaye de faire une carte popup qui ouvre une autre carte.
J’ai parcouru le forum, je me suis notemment inspiré du sujet :

https://forum.hacf.fr/t/popup-dacquittement-y-n-idealement-sur-un-devise-specifique/4385/3

Je precise que j’ai vidé le cache du navigateur, et suivi le tuto d’installation de browser mod.
Lorsque je passe par « outils de dev »->« Services » et que je teste un appel browser_mod.popup cela fonctionne
J’ai travaillé sur un seul onglet de navigateur. essayé sur plusieurs navigateurs.

voilà le code de ma carte :

show_name: true
show_icon: true
type: button
name: Test Button
hold_action:
  action: fire-dom-event
  browser_mod:
    command: call-service
    service: browser_mod.popup
    service_data:
      deviceID:
        - THIS
      title: test
      card:
        type: horizontal-stack
        cards:
          - type: custom:button-card
            color: auto
            color_type: icon
            name: mode Home
            show_icon: true
            show_label: false
            show_last_changed: false
            show_name: true
            show_state: false
            styles:
              card:
                - border-radius: 10px
                - height: 75px
                - width: 85px
                - margin: 5px 5px 5px 5px
                - padding: 0px 0px
              grid:
                - position: relative
              icon:
                - position: absolute
                - left: 2px
                - top: '-15px'
              name:
                - display: flex
                - justify-content: center
                - font-variant: small-caps
                - font-size: 14px
            tap_action:
              action: call-service
              service: rest_command.mode_home_yeelight1

Et ce que j’obtiens :

Peek 01-04-2023 14-57

Merci pour vos lumières!

Bonjour;
y a un soucis dans ton code. Ta une ancienne config de browser mod, les options sont différentes.

un exemple:

          tap_action:
            action: fire-dom-event
            browser_mod:
              service: browser_mod.popup
              data:
                browser_id: THIS
                size: normal
                style: |-
                  --popup-min-width: 900px;
                  --popup-max-width: 1000px;
                  --popup-border-radius: 10px;
                  --popup-padding-y: -15px;
                  --popup-padding-x: 5px;
                content:
                  type: custom:stack-in-card

Ton exemple, corriger:

show_name: true
show_icon: true
type: button
name: Test Button
hold_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:
      browser_id: THIS
      size: normal
      style: '--popup-border-radius: 10px'
      content:
        type: horizontal-stack
        cards:
          - type: custom:button-card
            color: auto
            color_type: icon
            name: mode Home
            show_icon: true
            show_label: false
            show_last_changed: false
            show_name: true
            show_state: false
            styles:
              card:
                - border-radius: 10px
                - height: 75px
                - width: 85px
                - margin: 5px 5px 5px 5px
                - padding: 0px 0px
              grid:
                - position: relative
              icon:
                - position: absolute
                - left: 2px
                - top: '-15px'
              name:
                - display: flex
                - justify-content: center
                - font-variant: small-caps
                - font-size: 14px
            tap_action:
              action: call-service
              service: rest_command.mode_home_yeelight1

sur ce post , tu trouvera plein d’exemple Utilisation de Browser_mod

@WarC0zes : super ! Merci! ca marche bien!

En revanche j’ai essayé d’alléger la carte en suivant un excellent tuto de @Clemalex

j’ai donc essayer d’integrer des template a l’aide de l’editeur de configuration du dashboard
le code :

button_card_templates:
  mode:
    size: normal
    style: '--popup-border-radius: 10px'
    title: test
    content:
      type: custom:hui-horizontal-stack-card
      cards:
        - type: custom:button-card
          color: auto
          color_type: icon
          name: mode Home
          show_icon: true
          show_label: false
          show_last_changed: false
          show_name: true
          show_state: false
          styles:
            card:
              - border-radius: 10px
              - height: 45px
              - width: 85px
              - margin: 5px 5px 5px 5px
              - padding: 0px 0px
            grid:
              - position: relative
            icon:
              - position: absolute
              - left: 2px
              - top: '-15px'
            name:
              - display: flex
              - justify-content: center
              - font-variant: small-caps
              - font-size: 14px
          tap_action:
            action: call-service
            service: rest_command.mode_home_yeelight1
        - type: custom:button-card
          color: auto
          color_type: icon
          name: mode TeaTime
          show_icon: true
          show_label: false
          show_last_changed: false
          show_name: true
          show_state: false
          styles:
            card:
              - border-radius: 10px
              - height: 45px
              - width: 85px
              - margin: 5px 5px 5px 5px
              - padding: 0px 0px
            grid:
              - position: relative
            icon:
              - position: absolute
              - left: 2px
              - top: '-15px'
            name:
              - display: flex
              - justify-content: center
              - font-variant: small-caps
              - font-size: 14px
          tap_action:
            action: call-service
            service: rest_command.mode_teatime_yeelight1

celui de la carte :

show_name: true
show_icon: true
type: button
name: Test Button
hold_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:
      deviceID: THIS
      template: mode

et a nouveau ca :

Peek 01-04-2023 14-57

merci!

tu mélange du code de boutton-card et browser-mod dans ton template. Les templates de button card, servent que pour bouton card. C’est utile pour le style du button, alignement icone, taille de police …

comme indiquer dans le doc:

Si tu veut faire des templates avec plusieurs card faut passer par Decluttering Card GitHub - custom-cards/decluttering-card: 🧹 Declutter your lovelace configuration with the help of this card

Attention c’est pas button-card, mais button ( par defaut sur HA, pas les mêmes options )

arf…ca se complexifie encore plus…

Si je comprends bien :
- les template_button_card ne servent que bour les bouttun_card ET que pour le « style »
Cela fonctionne t’il avec les mushroom card en mettant dans l’editeur de configuration du dashborad un « template_mushroom_card » ou un truc du style?
- je pourrais utiliser le service browser mod popup avec « decludering »? sur n’importe quel type de cartes? (personnalisées, mushroom…)

J’avance pas bien vite dans la compréhension de HA!!!

La carte mushroom n’a pas de système de template a ma connaissance, je vois rien qui en parle sur la doc.

Oui.

Pourquoi tu utilise pas button-card avec des templates et juste ajouter les popups sur ton button-card.
Au lieu de vouloir tout faire dans un template.
Honnêtement tu verra aucune différence niveau performance. Puis faut y aller en douceur sur HA au début, apprendre petit a petit et pas ce lancer dans des choses compliquer comme decludering card.

Ok. Je vais potasser un peu (beaucouop)…
Merci pour vos reponses!

J’aime bien les mushroom-card… mais j!ai besoin de certaines customisations comme les popup…
Je vais travailler ca…
Et ne vous inquitez pas…je rebiendrai vers vous!
Merci a la communauté !

Bon j’ai réussi grâce a vos conseil a faire ce que je voulais.
Merci encore!
Voici le resultat et les codes si cela peut aider :

Peek 02-04-2023 17-30

Code du dashboard :

decluttering_templates:
  mode:
    card:
      type: custom:button-card
      color: auto
      color_type: icon
      name: '[[name]]'
      show_icon: true
      show_label: false
      show_last_changed: false
      show_name: true
      show_state: false
      styles:
        card:
          - border-radius: 10px
          - height: 45px
          - width: 95px
          - margin: 5px 5px 5px 5px
          - padding: 0px 0px
        grid:
          - position: relative
        icon:
          - position: absolute
          - left: 2px
          - top: '-15px'
        name:
          - display: flex
          - justify-content: center
          - font-variant: small-caps
          - font-size: 14px
      tap_action:
        action: call-service
        service: '[[command]]'
views:
  - theme: ios-dark-mode-dark-green
    title: Home
    badges: [].....
.....

Code de la carte, qui est donc considerablement simplifiée :

type: custom:mushroom-light-card
entity: light.yeelight_1
fill_container: true
primary_info: name
secondary_info: state
icon_type: icon
use_light_color: true
show_brightness_control: true
show_color_temp_control: true
show_color_control: true
collapsible_controls: false
name: Yeelight 1
layout: horizontal
hold_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:
      browserID: THIS
      size: normal
      style: '--popup-border-radius: 10px'
      content:
        type: horizontal-stack
        cards:
          - type: custom:decluttering-card
            template: mode
            variables:
              - name: mode home
              - command: rest_command.mode_home_yeelight1
          - type: custom:decluttering-card
            template: mode
            variables:
              - name: mode teatime
              - command: rest_command.mode_teatime_yeelight1
          - type: custom:decluttering-card
            template: mode
            variables:
              - name: mode reading
              - command: rest_command.mode_reading_yeelight1
          - type: custom:decluttering-card
            template: mode
            variables:
              - name: mode films
              - command: rest_command.mode_films_yeelight1

voilà!

2 « J'aime »

Un petit up.
Depuis aujourd’hui, les decluttering_template ne fonctionnent plus.
J’ai refait un test simple avec le tuto de @Clemalex

code du dashboard :

decluttering_templates:
  entity:
    default:
      - name: Soleil
      - entity: sun.sun
      - icon: weather-sunny
    card:
      type: entities
      entities:
        - entity: '[[entity]]'
          name: '[[name]]'
          icon: mdi:[[icon]]
          secondary_info: last-updated

et voilà ce que j’obtiens:

Screenshot 2023-04-07 at 01-54-09 Aperçu – Home Assistant

A part une mise a jour de HA, je vois pas ce qui a changé.
Je vois rien dans les logs, mais peut tre que je cherche mal…
Tres embetant, je suis en train de contruire la majorité de mon dashboard par cette méthode…

Merci a vous!

System Information

version core-2023.4.1
installation_type Home Assistant OS
dev false
hassio true
docker true
user root
virtualenv false
python_version 3.10.10
os_name Linux
os_version 5.15.90
arch aarch64
timezone Europe/Paris
config_dir /config
Home Assistant Cloud
logged_in false
can_reach_cert_server ok
can_reach_cloud_auth ok
can_reach_cloud ok
Home Assistant Supervisor
host_os Home Assistant OS 9.5
update_channel stable
supervisor_version supervisor-2023.04.0
agent_version 1.4.1
docker_version 20.10.22
disk_total 27.9 GB
disk_used 11.2 GB
healthy true
supported true
board odroid-n2
supervisor_api ok
version_api ok
installed_addons Terminal & SSH (9.6.1), File editor (5.5.0), TasmoAdmin (0.24.0), Studio Code Server (5.5.6), Mosquitto broker (6.2.0), Node-RED (14.1.3), InfluxDB (4.6.0), ESPHome (2023.3.2), Grafana (8.2.1), Samba Backup (5.2.0)
Dashboards
dashboards 3
resources 17
views 7
mode storage
Recorder
oldest_recorder_run 27 mars 2023 à 12:21
current_recorder_run 7 avril 2023 à 02:06
estimated_db_size 516.86 MiB
database_engine sqlite
database_version 3.38.5

Salut

J’ai pas vu d’anomalie dans les decluttering_template et pourtant j’ai plus de 50 (facile)
Tu es certain que c’est pas plutôt une erreur de syntaxe ?
Perso je trouve que nommer son template ‹ entity › c’est pas judicieux… C’est un mot clé important et le meilleur moyen de perturber le parsing

Celui que j’ai mis en exemple etait donné par clemalex.
J’en ai d’autre qui ne fonctionnent plus non plus.
Testé sur plusieurs navigateurs.
Ce qui est etrange c’est que sur l’appli mobile android cela fonctionne parfaitement.
J’ai vu ca sur le forum officiel

J’ai uploader la nouvelle version de la cartevet rebooté mais rien…

Du coup si l’erreur correspond pas au code comment on fait ? Certaines cartes marchent pas d’autres ?
Et puis c’est pas lié directement au navigateur. L’application n’est pas un navigateur et tourne probablement encore avec un cache…

Aucune idee.
Il est aussi dit ca :
https://community.home-assistant.io/t/lovelace-decluttering-card/118625/418
Ce qui est bizarre c’est que je ne l’ai jamis trouvée (la carte) via HACS. Je l’ai installée manuellement. Le gars dit aussi qu’il faut changer le numéro de verison dans les ressources??..je n’ai pas de numero de version juste : /local/decluttering_card.js…

Bon ben si installation manuelle : tu es pas à jour très probablement.
A ta place je passerai un peu de temps à l’installer via hacs le temps que le bug soit corrigé plutôt que de bidouiller à la main et éditer le code. C’est un coup à ne plus jamais comprendre quoique ce soit.
Sur une installation manuelle, le numéro de version n’a pas d’effet d’ailleurs

Pourtant elle est disponible par défaut dans HACS, même pas besoin d’ajouter le dépot.
Decluttering card hacs

Puis il y a une nouvelle maj, pour le core 2023.4.0.

1 « J'aime »

@WarC0zes : Ouais j’ai telechargé le .js a jour depuis github et l’ai mis a la place de l’ancien. Rebooté mais rien. Il doit y avoir une manipulation supplementaire a faire que je ne connais pas.
Effectivement je l’ai trouvé dans HACS. Je devais avoir de la me…de dans les yeux quand je l’ai cherché la premiere fois. Je debute sous HA ne m’en veuillez pas!

@Pulpy-Luke : bidouiller le code… avec l’installation a la main je n’ai pas bidouillé grand chose. Juste copié la carte dans le dossier config et ajouté la ressource au tableau de bord.

Mais effectivement passer par HACS facilite les choses.
Ce soir je supprime la carte et les ressources et je recommence par HACS.

Mais y’a vraiment un truc qui m’echappe : pourquoi ca fonctionne sous l’appli android?..?

Ton cache sur android qui c’est vider , contrairement a ton navigateur sur pc. Je vois pas autrement.
Il y a un soucis avec le cache decluttering-card references appear broken with Core 2023.4.0 · Issue #65 · custom-cards/decluttering-card · GitHub

Ok je teste ca ce soir!
Merci!

Pour info, comme toi, je ne vois pas Declutering template dans HACS et j’ai été obligé de l’installer à la « main ». Strange :
Capture d’écran 2023-04-07 à 09.57.24