Cookbook

Here are some example uses. More to come!

Please let me know if you come up with something cool!

An automation which displays a camera feed when a human is detected:

By @scstraus

- id: popup_camera_when_human_detected
  alias: Popup Camera When Human Detected
  hide_entity: true
  initial_state: 'true'
  trigger:
    platform: state
    entity_id: binary_sensor.human
    to: 'on'
  action:
    - service: browser_mod.command
      data:
        command: more-info
        entity_id: camera.main
        deviceID:
          - 12345678-12345678

Displaying a popup via a script

Browser_mod will replace this with the current deviceID in the deviceID field of any service call from the frontend. That can let e.g. a script know which device called it:

scripts.yaml

test_popup:
  sequence:
    - service: browser_mod.command
      data_template:
        command: close-popup
        deviceID: ["{{ ','.join(deviceID) }}"]
    - service: browser_mod.command
      data_template:
        command: popup
        deviceID: ["{{ ','.join(deviceID) }}"]
        title: Testing script
        card:
          type: entities
          entities:
            - light.bed_light

ui-lovelace.yaml

...
  - type: entity-button
    entity: sun.sun
    tap_action:
      action: call-service
      service: script.test_popup
      service_data:
        deviceID:
          - this
...

Reusing popup-cards

If you've moved from popup card, you may already have some cards defined in your lovelace configuration that you want to use with browser_mods popup command. This can be done using node anchors.

Note that node anchors only work in yaml mode and can only be called in the same file as they are defined.

ui-lovelace.yaml

title: My awesome lovelace interface
views:
  - title: My view
    icon: mdi:home-assistant
    popup_cards:
      light.bed_light: &bed_light_card
        title: Bedside lamp settings
        card:
          type: entities
          entities:
            - light.bed_light
            - type: custom:time-input-row
              entity: input_datetime.on_time
            - type: custom:time-input-row
              entity: input_datetime.off_time
            - input_boolean.weekdays_only
    cards:
      - type: entity-button
        entity: light.bed_light
        tap_action:
          action: call-service
          service: browser_mod.command
          service_data:
            command: popup
            deviceID: [this]
            <<: *bed_light_card