Utilisation de Browser_mod

Entraide Home Assistant
37

bon perso j’arrive pas a modifier les fichiers depuis la mise à jours:

exemple:

type: custom:button-card
entity: camera.camera_entrer_low
name: Caméra
icon: mdi:cctv
styles:
  icon:
    - top: '-3%'
    - left: 8%
    - width: 45%
    - position: absolute
  name:
    - top: 80%
    - left: 15%
    - position: center
    - color: rgba(240, 240, 240, 0.8)
  card:
    - font-size: 100%
    - background-color: rgba(240, 240, 240, 0.1)
    - border-radius: 15%
    - border-style: solid
    - border-color: rgba(240, 240, 240, 0.3)
    - border-width: 1px
    - box-shadow: true
    - transition: true
    - color: >
        [[[ return (entity.state === 'on' || entity.state === 'home') ? 'rgba(0,
        0, 0, 0.6)' : 'rgba(255, 255, 255, 0.3)'; ]]]
aspect_ratio: 1/1
tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data: null
    title: Caméras
    styles:
      card:
        - top: 50px
    content:
      type: grid
      cards:
        - type: custom:button-card
          entity: camera.camera_entrer_low
          size: 100%
          show_state: false
          show_label: false
          show_name: true
          name: Entrée
          show_entity_picture: true
          aspect_ratio: 1/1
          color_type: card
          styles:
            card:
              - font-size: 80%
              - background-color: rgba(240, 240, 240, 0.1)
              - border-radius: 15%
              - border-style: solid
              - border-color: rgba(240, 240, 240, 0.3)
              - border-width: 1px
              - box-shadow: true
              - transition: true
              - color: >
                  [[[ return (entity.state === 'on' || entity.state === 'home')
                  ? 'rgba(0, 0, 0, 0.6)' : 'rgba(255, 255, 255, 0.3)'; ]]]
            name:
              - top: 80%
              - left: 15%
              - position: center
              - color: rgba(240, 240, 240, 0.8)
        - type: custom:button-card
          entity: camera.camera_jardin_low
          size: 100%
          show_state: false
          show_label: false
          show_name: true
          name: Jardin
          show_entity_picture: true
          aspect_ratio: 1/1
          color_type: card
          styles:
            card:
              - font-size: 80%
              - background-color: rgba(240, 240, 240, 0.1)
              - border-radius: 15%
              - border-style: solid
              - border-color: rgba(240, 240, 240, 0.3)
              - border-width: 1px
              - box-shadow: true
              - transition: true
              - color: >
                  [[[ return (entity.state === 'on' || entity.state === 'home')
                  ? 'rgba(0, 0, 0, 0.6)' : 'rgba(255, 255, 255, 0.3)'; ]]]
            name:
              - top: 80%
              - left: 15%
              - position: center
              - color: rgba(240, 240, 240, 0.8)
        - type: custom:button-card
          entity: camera.camera_lenzo_low
          size: 100%
          show_state: false
          show_label: false
          show_name: true
          name: Lenzo
          show_entity_picture: true
          aspect_ratio: 1/1
          color_type: card
          styles:
            card:
              - font-size: 80%
              - background-color: rgba(240, 240, 240, 0.1)
              - border-radius: 15%
              - border-style: solid
              - border-color: rgba(240, 240, 240, 0.3)
              - border-width: 1px
              - box-shadow: true
              - transition: true
              - color: >
                  [[[ return (entity.state === 'on' || entity.state === 'home')
                  ? 'rgba(0, 0, 0, 0.6)' : 'rgba(255, 255, 255, 0.3)'; ]]]
            name:
              - top: 80%
              - left: 15%
              - position: center
              - color: rgba(240, 240, 240, 0.8)
        - type: custom:button-card
          entity: camera.camera_tiago_high
          size: 100%
          show_state: false
          show_label: false
          show_name: true
          name: Tiago
          show_entity_picture: true
          aspect_ratio: 1/1
          color_type: card
          styles:
            card:
              - font-size: 80%
              - background-color: rgba(240, 240, 240, 0.1)
              - border-radius: 15%
              - border-style: solid
              - border-color: rgba(240, 240, 240, 0.3)
              - border-width: 1px
              - box-shadow: true
              - transition: true
              - color: >
                  [[[ return (entity.state === 'on' || entity.state === 'home')
                  ? 'rgba(0, 0, 0, 0.6)' : 'rgba(255, 255, 255, 0.3)'; ]]]
            name:
              - top: 80%
              - left: 15%
              - position: center
              - color: rgba(240, 240, 240, 0.8)
      columns: 2

que faut-il modifier et comment ?

Merci :slight_smile:

38 
tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:   # ===> A partir d'ici ta pas les bon espaces.
      browser_id: THIS    
      size: wide   
      title: Exemple
      content:

ton code

    data: null
    title: Caméras # manque 2 espaces.
1 « J'aime »
39

Merci pour ton retour j’ai essayer de faire les modif et cela ne fonctionne pas je doit louper quelque chose

40

voici le code complet de la button card:

type: custom:state-switch
view_layout:
  grid-area: camera
entity: mediaquery
states:
  '(min-width: 1100px)':
    type: custom:button-card
    view_layout:
      grid-area: camera
    tap_action:
      action: fire-dom-event
      browser_mod:
        command: popup
        hide_header: true
        large: false
        animation_card: |
          [[[
            const animation_speed_ms = 900;
            const animation = `card_bounce ${animation_speed_ms}ms cubic-bezier(0.22, 1, 0.36, 1)`;
            this.shadowRoot.getElementById("card").style.animation = animation;
            window.setTimeout(() => {
              this.shadowRoot.getElementById("card").style.animation = "none";
            }, animation_speed_ms)
          ]]]
        style: |
          ha-dialog {
            --mdc-dialog-min-width: 750px !important;
            --mdc-dialog-max-width: 900px !important;
          }
          .content {
            width: auto !important;
          }
          ha-card {
            --ha-card-background: rgba(85, 100, 176, 0.8);
        card:
          type: vertical-stack
          cards:
            - type: horizontal-stack
              cards:
                - type: custom:hui-element
                  card_type: horizontal-stack
                  cards:
                    - type: picture-entity
                      entity: camera.camera_jardin_low
                      camera_image: camera.camera_jardin_low
                      show_name: false
                      show_state: false
                    - type: picture-entity
                      entity: camera.camera_entrer_low
                      camera_image: camera.camera_entrer_low
                      show_name: false
                      show_state: false
            - type: horizontal-stack
              cards:
                - type: custom:hui-element
                  card_type: horizontal-stack
                  cards:
                    - type: picture-entity
                      entity: camera.camera_lenzo_low
                      camera_image: camera.camera_lenzo_low
                      show_name: false
                      show_state: false
                    - type: picture-entity
                      entity: camera.camera_tiago_high
                      camera_image: camera.camera_tiago_high
                      show_name: false
                      show_state: false
    show_icon: true
    entity_picture: /local/neon/cctv.png
    show_entity_picture: true
    entity: binary_sensor.camera_entrer_motion
    extra_styles: |
      @keyframes card_bounce {
        0% {
          transform: scale(1);
        }
        15% {
          transform: scale(0.9);
        }
        25% {
          transform: scale(1);
        }
        30% {
          transform: scale(0.98);
        }
        100% {
          transform: scale(1);
        }
      }
    show_state: true
    name: Caméra
    styles:
      custom_fields:
        graph:
          - position: absolute
          - left: 0px
          - top: 143px
      grid:
        - grid-template-areas: '"i" "n" "s"'
        - grid-template-columns: 1fr
        - grid-template-rows: 1fr min-content min-content
      card:
        - border-radius: 10px
        - background: rgb(0,0,0,0.2)
        - height: 220px
      img_cell:
        - padding-top: 30px
      icon:
        - width: 50px
      name:
        - color: var(--secondary-text-color)
      state:
        - padding-bottom: 70px
        - font-size: 12px
        - color: var(--text-primary-color)
  '(min-width: 700px)':
    type: custom:button-card
    view_layout:
      grid-area: camera
    tap_action:
      action: fire-dom-event
      browser_mod:
        command: popup
        hide_header: true
        large: false
        animation_card: |
          [[[
            const animation_speed_ms = 900;
            const animation = `card_bounce ${animation_speed_ms}ms cubic-bezier(0.22, 1, 0.36, 1)`;
            this.shadowRoot.getElementById("card").style.animation = animation;
            window.setTimeout(() => {
              this.shadowRoot.getElementById("card").style.animation = "none";
            }, animation_speed_ms)
          ]]]
        style: |
          ha-dialog {
            --mdc-dialog-min-width: 750px !important;
            --mdc-dialog-max-width: 900px !important;
          }
          .content {
            width: auto !important;
          }
          ha-card {
            --ha-card-background: rgba(240, 240, 240, 0.1);
        card:
          type: custom:swipe-card
          reset_after: 5
          parameters:
            roundLengths: true
            effect: cards
            autoplay:
              delai: 3000
            speed: 650
            spaceBetween: 20
            threshold: 7
            cubeEffect:
              slideShadows: false
            coverflowEffect:
              rotate: 80
              depth: 300
              start_card: 1
          cards:
            - type: vertical-stack
              cards:
                - type: horizontal-stack
                  cards:
                    - type: custom:hui-element
                      card_type: horizontal-stack
                      cards:
                        - type: picture-entity
                          entity: camera.camera_jardin_low
                          camera_image: camera.camera_jardin_low
                          show_name: false
                          show_state: false
                        - type: picture-entity
                          entity: camera.camera_entrer_low
                          camera_image: camera.camera_entrer_low
                          show_name: false
                          show_state: false
                - type: horizontal-stack
                  cards:
                    - type: custom:hui-element
                      card_type: horizontal-stack
                      cards:
                        - type: picture-entity
                          entity: camera.camera_lenzo_low
                          camera_image: camera.camera_lenzo_low
                          show_name: false
                          show_state: false
                        - type: picture-entity
                          entity: camera.camera_tiago_high
                          camera_image: camera.camera_tiago_high
                          show_name: false
                          show_state: false
    show_icon: true
    entity_picture: /local/neon/cctv.png
    show_entity_picture: true
    entity: binary_sensor.camera_entrer_motion
    extra_styles: |
      @keyframes card_bounce {
        0% {
          transform: scale(1);
        }
        15% {
          transform: scale(0.9);
        }
        25% {
          transform: scale(1);
        }
        30% {
          transform: scale(0.98);
        }
        100% {
          transform: scale(1);
        }
      }
    show_state: true
    name: Caméra
    styles:
      custom_fields:
        graph:
          - position: absolute
          - left: 0px
          - top: 143px
      grid:
        - grid-template-areas: '"i" "n" "s"'
        - grid-template-columns: 1fr
        - grid-template-rows: 1fr min-content min-content
      card:
        - border-radius: 10px
        - background: rgb(0,0,0,0.2)
        - height: 200px
      img_cell:
        - padding-top: 30px
      icon:
        - width: 50px
      name:
        - color: var(--secondary-text-color)
      state:
        - padding-bottom: 70px
        - font-size: 12px
        - color: var(--text-primary-color)
41

Salut @barto_95

Comme l’a dit @WarC0zes les popups ne se déclenchent plus comme avant.

Exemple de code (pas non plus un truc de foufou) :

type: custom:button-card
entity: vacuum.automower
name: Robot
icon: mdi:robot-mower
template: robot
tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:
      title: Robot
      style: |-
        --popup-header-background-color: black;
        --popup-background-color: black;
        --popup-border-radius: 10px;
        --popup-border-color: transparent;
        --popup-padding-x: 5px;
      content:
        type: vertical-stack
        cards:
          - type: entities
            entities:
              - entity: vacuum.automower
              - type: attribute
                entity: vacuum.automower
                attribute: battery_level
                suffix: '%'
                name: Automower Battery
                icon: mdi:battery-70
              - entity: sensor.automower_next_start
            card_mod:
              style: |
                ha-card{
                  background: rgb(8,68,84);
                  border-radius: 10px;
                  box-shadow: 3px 3px rgba(0,0,0,0.4);
                  --secondary-text-color: white;
                  border: solid 2px #00FFFF;
                }
          - type: horizontal-stack
            cards:
              - type: button
                name: Start
                tap_action:
                  action: call-service
                  service: vacuum.start
                  service_data:
                    entity_id: vacuum.automower
                icon: mdi:arrow-right
                icon_height: 35px
                card_mod:
                  style: |
                    ha-card{
                      background: rgb(8,68,84);
                      border-radius: 10px;
                      box-shadow: 3px 3px rgba(0,0,0,0.4);
                      --secondary-text-color: white;
                      border: solid 2px #00FFFF;
                    }                    
              - type: button
                name: Pause
                tap_action:
                  action: call-service
                  service: vacuum.pause
                  service_data:
                    entity_id: vacuum.automower
                icon: mdi:pause
                icon_height: 35px
                card_mod:
                  style: |
                    ha-card{
                      background: rgb(8,68,84);
                      border-radius: 10px;
                      box-shadow: 3px 3px rgba(0,0,0,0.4);
                      --secondary-text-color: white;
                      border: solid 2px #00FFFF;
                    }                                   
              - type: button
                name: Stop
                tap_action:
                  action: call-service
                  service: vacuum.stop
                  service_data:
                    entity_id: vacuum.automower
                icon: mdi:square-outline
                icon_height: 35px
                card_mod:
                  style: |
                    ha-card{
                      background: rgb(8,68,84);
                      border-radius: 10px;
                      box-shadow: 3px 3px rgba(0,0,0,0.4);
                      --secondary-text-color: white;
                      border: solid 2px #00FFFF;
                    }
              - type: button
                name: Home
                tap_action:
                  action: call-service
                  service: vacuum.return_to_base
                  service_data:
                    entity_id: vacuum.automower
                icon: mdi:home-lightning-bolt-outline
                icon_height: 35px
                card_mod:
                  style: |
                    ha-card{
                      background: rgb(8,68,84);
                      border-radius: 10px;
                      box-shadow: 3px 3px rgba(0,0,0,0.4);
                      --secondary-text-color: white;
                      border: solid 2px #00FFFF;
                    }

Ce qui donne en image :

button

Pour ce qui est de cacher le header, la directive hide_header: true est devenue obsolète. Pour cacher le header il suffit juste de ne plus mettre de title.

Et pour le « styling » du popup ça a pas mal changé au passage à la v2, et ça a encore évolué avec les sous-versions sorties depuis.
Par exemple à la sortie de la v2 on ne pouvait plus faire du card-mod dans le popup.
Ca a finalement été ajouté avec la v2.1.1.
Maintenant que c’est de nouveau possible je crois par contre que les anciennes div (ou selector), ne sont plus utilisables. Bref je pense qu’il faut s’adapter au nouveau frontend

De ce côté là, la doc ici a été mise à jour, mais elle reste un peu succincte.

Je sais pas si je vais t’avoir aider, mais la doc officielle le pourra surement :wink:

3 « J'aime »
42

Après 3h à tester sa fonctionne enfin:

type: custom:state-switch
view_layout:
  grid-area: camera
entity: mediaquery
states:
  '(min-width: 1100px)':
    type: custom:button-card
    view_layout:
      grid-area: camera
    tap_action:
      action: fire-dom-event
      browser_mod:
        service: browser_mod.popup
        hide_header: true
        large: false
        animation_card: |
          [[[
            const animation_speed_ms = 900;
            const animation = `card_bounce ${animation_speed_ms}ms cubic-bezier(0.22, 1, 0.36, 1)`;
            this.shadowRoot.getElementById("card").style.animation = animation;
            window.setTimeout(() => {
              this.shadowRoot.getElementById("card").style.animation = "none";
            }, animation_speed_ms)
          ]]]
        style: |
          ha-dialog {
            --mdc-dialog-min-width: 750px !important;
            --mdc-dialog-max-width: 900px !important;
          }
          .content {
            width: auto !important;
          }
          ha-card {
            --ha-card-background: rgba(85, 100, 176, 0.8);
        data:
          content:
            type: vertical-stack
            cards:
              - type: horizontal-stack
                cards:
                  - type: custom:hui-element
                    card_type: horizontal-stack
                    cards:
                      - type: picture-entity
                        entity: camera.camera_jardin_low
                        camera_image: camera.camera_jardin_low
                        show_name: false
                        show_state: false
                      - type: picture-entity
                        entity: camera.camera_entrer_low
                        camera_image: camera.camera_entrer_low
                        show_name: false
                        show_state: false
              - type: horizontal-stack
                cards:
                  - type: custom:hui-element
                    card_type: horizontal-stack
                    cards:
                      - type: picture-entity
                        entity: camera.camera_lenzo_low
                        camera_image: camera.camera_lenzo_low
                        show_name: false
                        show_state: false
                      - type: picture-entity
                        entity: camera.camera_tiago_high
                        camera_image: camera.camera_tiago_high
                        show_name: false
                        show_state: false
      show_icon: true
    entity_picture: /local/neon/cctv.png
    show_entity_picture: true
    entity: binary_sensor.camera_entrer_motion
    extra_styles: |
      @keyframes card_bounce {
        0% {
          transform: scale(1);
        }
        15% {
          transform: scale(0.9);
        }
        25% {
          transform: scale(1);
        }
        30% {
          transform: scale(0.98);
        }
        100% {
          transform: scale(1);
        }
      }
    show_state: true
    name: Caméra
    styles:
      custom_fields:
        graph:
          - position: absolute
          - left: 0px
          - top: 143px
      grid:
        - grid-template-areas: '"i" "n" "s"'
        - grid-template-columns: 1fr
        - grid-template-rows: 1fr min-content min-content
      card:
        - border-radius: 10px
        - background: rgb(0,0,0,0.2)
        - height: 220px
      img_cell:
        - padding-top: 30px
      icon:
        - width: 50px
      name:
        - color: var(--secondary-text-color)
      state:
        - padding-bottom: 70px
        - font-size: 12px
        - color: var(--text-primary-color)
  '(min-width: 700px)':
    type: custom:button-card
    view_layout:
      grid-area: camera
    tap_action:
      action: fire-dom-event
      browser_mod:
        service: browser_mod.popup
        hide_header: true
        large: false
        animation_card: |
          [[[
            const animation_speed_ms = 900;
            const animation = `card_bounce ${animation_speed_ms}ms cubic-bezier(0.22, 1, 0.36, 1)`;
            this.shadowRoot.getElementById("card").style.animation = animation;
            window.setTimeout(() => {
              this.shadowRoot.getElementById("card").style.animation = "none";
            }, animation_speed_ms)
          ]]]
        style: |
          ha-dialog {
            --mdc-dialog-min-width: 750px !important;
            --mdc-dialog-max-width: 900px !important;
          }
          .content {
            width: auto !important;
          }
          ha-card {
            --ha-card-background: rgba(240, 240, 240, 0.1);
        data:
          card:
            type: custom:swipe-card
            reset_after: 5
            parameters:
              roundLengths: true
              effect: cards
              autoplay:
                delai: 3000
              speed: 650
              spaceBetween: 20
              threshold: 7
              cubeEffect:
                slideShadows: false
              coverflowEffect:
                rotate: 80
                depth: 300
                start_card: 1
            cards:
              - type: vertical-stack
                cards:
                  - type: horizontal-stack
                    cards:
                      - type: custom:hui-element
                        card_type: horizontal-stack
                        cards:
                          - type: picture-entity
                            entity: camera.camera_jardin_low
                            camera_image: camera.camera_jardin_low
                            show_name: false
                            show_state: false
                          - type: picture-entity
                            entity: camera.camera_entrer_low
                            camera_image: camera.camera_entrer_low
                            show_name: false
                            show_state: false
                  - type: horizontal-stack
                    cards:
                      - type: custom:hui-element
                        card_type: horizontal-stack
                        cards:
                          - type: picture-entity
                            entity: camera.camera_lenzo_low
                            camera_image: camera.camera_lenzo_low
                            show_name: false
                            show_state: false
                          - type: picture-entity
                            entity: camera.camera_tiago_high
                            camera_image: camera.camera_tiago_high
                            show_name: false
                            show_state: false
    show_icon: true
    entity_picture: /local/neon/cctv.png
    show_entity_picture: true
    entity: binary_sensor.camera_entrer_motion
    extra_styles: |
      @keyframes card_bounce {
        0% {
          transform: scale(1);
        }
        15% {
          transform: scale(0.9);
        }
        25% {
          transform: scale(1);
        }
        30% {
          transform: scale(0.98);
        }
        100% {
          transform: scale(1);
        }
      }
    show_state: true
    name: Caméra
    styles:
      custom_fields:
        graph:
          - position: absolute
          - left: 0px
          - top: 143px
      grid:
        - grid-template-areas: '"i" "n" "s"'
        - grid-template-columns: 1fr
        - grid-template-rows: 1fr min-content min-content
      card:
        - border-radius: 10px
        - background: rgb(0,0,0,0.2)
        - height: 200px
      img_cell:
        - padding-top: 30px
      icon:
        - width: 50px
      name:
        - color: var(--secondary-text-color)
      state:
        - padding-bottom: 70px
        - font-size: 12px
        - color: var(--text-primary-color)
1 « J'aime »
43

Tu as pas enlever hide_header: true et changer large: false

Les options valident:

service: browser_mod.popup
data:
  [title: <string>]
  content: <string / Dashboard card configuration / ha-form schema>
  [size: <NORMAL/wide/fullscreen>]
  [right_button: <string>]
  [right_button_action: <service call>]
  [left_button: <string>]
  [left_button_action: <service call>]
  [dismissable: <TRUE/false>]
  [dismiss_action: <service call>]
  [autoclose: <true/FALSE>]
  [timeout: <number>]
  [timeout_action: <service call>]
  [style: <string>]
  [browser_id: <Browser IDs>]

Code OK:

type: custom:state-switch
view_layout:
  grid-area: camera
entity: mediaquery
states:
  '(min-width: 1100px)':
    type: custom:button-card
    view_layout:
      grid-area: camera
    tap_action:
      action: fire-dom-event
      browser_mod:
        service: browser_mod.popup
        size: normal
        animation_card: |
          [[[
            const animation_speed_ms = 900;
            const animation = `card_bounce ${animation_speed_ms}ms cubic-bezier(0.22, 1, 0.36, 1)`;
            this.shadowRoot.getElementById("card").style.animation = animation;
            window.setTimeout(() => {
              this.shadowRoot.getElementById("card").style.animation = "none";
            }, animation_speed_ms)
          ]]]
        style: |
          ha-dialog {
            --mdc-dialog-min-width: 750px !important;
            --mdc-dialog-max-width: 900px !important;
          }
          .content {
            width: auto !important;
          }
          ha-card {
            --ha-card-background: rgba(85, 100, 176, 0.8);
        data:
          content:
            type: ...
1 « J'aime »
44

Salut @WarC0zes @barto_95

Vous confirmez que cette partie fonctionne chez vous ? à priori chez moi ça n’empêche pas le popup de fonctionner mais ça ne semble pas non plus ajouter quoique ce soit ?

C’est à peu près le temps qu’il m’a fallu pour remettre mes popups d’équerre à la sortie de la V2 :wink: coriace cette V2 :stuck_out_tongue:

45

chez pas , pas tester son code chez moi. J’ai juste modifier ces erreurs.

46

C’est censé faire quoi ça ? Directement sur la carte ?
animation_card ça fait pas partie des options explicitement listées

47

C’est une partie du code de @barto_95 et je ne sais pas ce que c’est censé faire.
Bref j’ai juste voulu tester pour voir, car comme tu le dis :

Pour moi ça doit être transposable/adaptable mais dans le bloc « style » :

type: custom:button-card
entity: vacuum.automower
name: Robot
icon: mdi:robot-mower
template: robot
tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:
      title: Robot
      style: |-
        --popup-header-background-color: black;
        --popup-background-color: black;
        --popup-border-radius: 10px;
        --popup-border-color: transparent;
        --popup-padding-x: 5px;
      content:
        type: vertical-stack
48

J’ai pas trouvé des masses d’exemples :

J’ai mis le code sur une popup basique d’une carte… je vois pas de différence et ça râle dans l’editeur (en plus de casser mon animation ‹ style ›)

image
image579×694 29.5 KB

49

bonne question

config récupéré sur le forum officiel

50

Hello les gas

J’utilise ce code pour créer une animation sur un button-card, par contre il faut un autre bout de code pour qu’il fonctionne

Voici le second code à mettre au niveau 0 du code de la card :

extra_styles: |
  @keyframes card_bounce {
    0% {
      transform: scale(1);
    }
    15% {
      transform: scale(0.9);
    }
    25% {
      transform: scale(1);
    }
    30% {
      transform: scale(0.98);
    }
    100% {
  transform: scale(1);
    }
  }

Voilà pour les infos.
J’en profite pour vous montrer un exemple :

type: custom:button-card
entity: media_player.nvidia_shield
name: Shield
icon: custom
extra_styles: |
  @keyframes card_bounce {
    0% {
      transform: scale(1);
    }
    15% {
      transform: scale(0.9);
    }
    25% {
      transform: scale(1);
    }
    30% {
      transform: scale(0.98);
    }
    100% {
  transform: scale(1);
    }
  }
2 « J'aime »
51

Bonjour,
je voudrais utiliser le tap_action disponible pour la carte bar-card pour afficher une carte popup avec browser mod 2.0. Mais le popup s’affiche pas.

bar card

j’ai trouvé une issue pour bar card, le dev dit ca « The tap action option has been replaced by the integrated HA actions which allows more options. See Actions - Home Assistant » . Sauf que je n’arrive pas a trouvé la syntaxe correcte.
Quelqu’un aurait une solution ?

    cards:
      - type: custom:bar-card
        entities:
          - entity: sensor.processor_use
            name: CPU
            icon: phu:intel-cpu
            height: 27px
            min: '0'
            max: '100'
            tap_action:
              action: more-info
            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: custom:mini-graph-card
                    name: CPU Utilisé
                    icon: phu:intel-cpu
                    height: 101
                    hours_to_show: 24
                    points_per_hour: 2
                    hour24: true
                    line_width: 6
                    show:
                      fill: false
                      graph: line
                      icon: true
                      name: true
                      state: true
                      labels: false
                      extrema: true
                      average: true
                      icon_adaptive_color: true
                    entities:
                      - entity: sensor.processor_use
                    align_icon: right
                    align_state: center
                    line_color: rgb(68, 115, 158)
                    font_size: 100
                    animate: true
                    card_mod:
                      style: |
                        ha-card .header.flex .icon {
                          color: rgb(31, 111, 235);
                          --mdc-icon-size: 40px;
                        }
52

Salut @WarC0zes,

C’est quelque chose de ce genre que tu chercher à faire ?

popup

53

Oui :slight_smile: c’est bien ca, afficher un minigraph en popup .

54

Ok,

Alors en partant de la doc de browser-mod, on peut faire ça en créant 2 cartes.

La première sera visible :

type: custom:bar-card
entities:
  - entity: sensor.vulcain_cpu_temperature
    name: Cpu Temp
    icon: mdi:thermometer
    height: 27px
    min: '0'
    max: '100'

Et la deuxième (le pop-up) sera cachée, par contre il faut absolument qu’elle soit sur la même view qua la précédente (de ce que j’ai compris) :wink:

type: custom:popup-card
entity: sensor.vulcain_cpu_temperature
style: |-
  --popup-header-background-color: transparent;
  --popup-background-color: transparent;
  --popup-border-width: 0px;
  --popup-border-radius: 20px;
  --popup-border-color: transparent;
card:
  type: custom:mini-graph-card
  card_mod:
    style: |
      ha-card{
        background: rgba(8,68,84,0.8);
        border-radius: 25px;
        box-shadow: transparent;
        --secondary-text-color: white;
        border: solid 2px #00FFFF;
      } 
  entities:
    - color: white
      entity: sensor.vulcain_cpu_temperature
  font_size: 90
  hour24: true
  hours_to_show: 48
  icon: mdi:thermometer
  line_width: 3
  name: Cpu Temp
  smoothing: false
  show:
    graphe: line
    legend: false
    extrema: true

Voilà c’est comme ça que j’ai procédé, dis moi si ça le fait chez toi :wink:

55

Ouah c’est solution de contournement lol. Je test voir.

56

J’avoue :wink:

Mais ça fonctionne pas mal.

popup2

En édition sur la page on voit bien les popus :

image
image1470×912 116 KB

Une fois sortie du mode édition :

image
image1856×680 102 KB