Utilisation de Browser_mod

barto_95 · Septembre 8, 2022, 10:09

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)

WarC0zes · Septembre 9, 2022, 2:15

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

barto_95:

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  #==> Obsolète,  a supprimer.
        large: false #==> Obsolète, remplacer par  size: <NORMAL/wide/fullscreen>
        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:

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: ...

Herbs · Septembre 9, 2022, 4:40

Salut @WarC0zes @barto_95

Institution de solution:

        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);

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 coriace cette V2

WarC0zes · Septembre 9, 2022, 6:39

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

Pulpy-Luke · Septembre 9, 2022, 10:13

Institution de solution:

        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)
          ]]]

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

github.com

thomasloven/hass-browser_mod/blob/master/documentation/services.md


## Reading guide
Service parameters are described using the following conventions:

- `<type>` in brackets describe the type of a parameter, e.g.

  - `<string>` is a piece of text
  - `<number>` is a number
  - `<TRUE/false>` means the value must be either `true` or `false` with `true` being the default
  - `<service call>` means a full service call specification. Note that this can be any service, not just Browser Mod services
  - `<Browser IDs>` is a list of BrowserIDs

- Square brackets `[ ]` indicate that a parameter is optional and can be omitted.

### `<service call>`

A service call is a combination of a service and it's data:

Ex, a `<service call>` for `browser_mod.more_info` with `light.bed_light` as entity:

This file has been truncated. show original

Herbs · Septembre 9, 2022, 10:18

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

Pulpy-Luke · Septembre 9, 2022, 10:21

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 ›)

barto_95 · Septembre 9, 2022, 4:47

bonne question

config récupéré sur le forum officiel

Guizmos · Septembre 10, 2022, 11:08

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);
    }
  }

WarC0zes · Septembre 18, 2022, 9:36

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;
                        }

Herbs · Septembre 18, 2022, 10:33

Salut @WarC0zes,

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

popup

WarC0zes · Septembre 18, 2022, 10:35

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

Herbs · Septembre 18, 2022, 10:38

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)

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

WarC0zes · Septembre 18, 2022, 10:40

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

Herbs · Septembre 18, 2022, 10:45

J’avoue

Mais ça fonctionne pas mal.

popup2

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

Une fois sortie du mode édition :

WarC0zes · Septembre 18, 2022, 10:46

Très étonner mais ca fonctionne
Merci pour l’astuce trop cool.

Mais custom:popup-card ca sort d’ou ca, je les pas c’est carte mais ca fonctionne. C’est browser mod qui l’installe ?

Herbs · Septembre 18, 2022, 10:53

Oui c’est ça.

Voir la doc ici

C’est même dispo via l’ui :

WarC0zes · Septembre 18, 2022, 10:57

Ok, j’avais pas fais gaffe. Merci tout fonctionne

Edit:
j’ai refait ma page du rpi , vu que je peu faire des popup avec bar card.

J’avais pas lu ca dans la doc sur la carte popup, et qui été utile dans mon cas avec bar card qui marche pas avec tap_action. Encore merci @Herbs

Citation
Remarque : Il est conseillé d’utiliser une fire-dom-event action, à la place dans la mesure du possible. La carte contextuelle est pour les quelques cas où ce n’est pas possible. Voir services pour plus d’informations.

Arnault · Octobre 21, 2022, 12:44

Bonjour à tous,

Je me réveille après la bataille pour le passage à la version 2.0 !!! J’ai essayé le code le plus simple du monde :

  tap_action:
    action: fire-dom-event
    browser_mod:
      service: browser_mod.popup
      size: wide
      data:
        content:
          type: entity
          entity: sensor.salon_shelly_ht_temperature
          name: Température salon

Et rien ne se passe, aucune popup ne s’affiche et je ne vois pas où trouver un message d’erreur. Si quelqu’un a une piste à me donner…

Merci d’avance

Pulpy-Luke · Octobre 21, 2022, 12:47

Salut,
Attention à bien faire restart HA et cache du navigateur… J’ai eu le coup, code correct mais pas de réaction avant ces 2 étapes