Displaying things in popup

[DeathByDisco]

Hello everyone,
Can someone give me a tip on how to open a popup containing 2 or 3 of my camera feeds when clicking on an SVG icon?
Is there an recommended add-on that works well with floorplan and allows me to display various things in a popup?

[OzGav]

You could use browser mod or if there is a local thumbnail available in the camera attributes you could use image_set to place that in your floor plan

[DeathByDisco]

Thank you for the hint. Browser_mod looks like a really powerfull tool.
Is there a beginner-friendly tutorial or thread that explains how to add a browser_mod popup card to HA-floorplan?

[OzGav]

Not that I am aware. Here are some excerpts from floor plans I use.

This one pops up an iframe with the url shown. It also uses card-mod to control the size of the iframe

            - element: radio_select
              tap_action:
                - action: fire-dom-event
                  browser_mod:
                    service: browser_mod.popup
                    data:
                      card_mod:
                        style: |
                          ha-dialog {
                            --mdc-dialog-min-width: 1200px !important;
                            --mdc-dialog-max-width: 1850px !important;
                          }
                          .content {
                            width: auto !important;
                          }
                      content:
                        type: iframe
                        url: http://192.168.1.166:8095/#/radios?frameless=true

This one just pops up a field to enter a value to the input_text

        - entities:
            - input_text.jukebox_search
          tap_action: 
            action: fire-dom-event
            browser_mod:
              command: call-service
              service: browser_mod.popup
              data:
                title: 'Search'
                content: 
                  type: entities
                  entities:
                    - entity: input_text.jukebox_search

[exetico]

Using browser_mod.

Here's one example with a few custom components in use, too. There's also a "standard" solution at the first one (button * 2)

hold_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:
      title: 3D Printer
      content:
          type: vertical-stack
          cards:
            - type: horizontal-stack
              cards:
                - type: button
                  entity: button.p1s_01p00a3c2400594_pause_printing
                  name: Pause print
                - type: button
                  entity: button.p1s_01p00a3c2400594_stop_printing
                  name: Stop print
            - type: custom:restriction-card
              restrictions:
                confirm:
                  text: Bekræft venligst at du vil ændre ved disse enheder!
              card:
                type: entities
                show_header_toggle: false
                entities:
                  - entity: switch.sonoffpow1
                    type: "custom:secondaryinfo-entity-row"   
                    secondary_info: 'P1S er [[ if(device_tracker.bambulab_p1s == home, "tændt", "slukket") ]]'
                  - entity: button.p1s_01p00a3c2400594_stop_printing
                    name: 'Stop print'
            - type: 'custom:auto-entities'
              card:
                type: entities
                #title: Kontor
                show_header_toggle: false
              filter:
                include:
                  - entity_id: "sensor.*bambu*"