Pop up Cards?

What are the current options for pop up cards? I know browser_mod is one way but it seemed overly complicated. Then I think there is a pop up card in the HomeKit UI but I think its only for lights. Then there is thomasloven’s custom:popup-card but it seems to be deprecated for browser_mod.

Is there anything I am missing? Looking to do popups for media control and a weather radar at this point.

1 Like

What do you find overly complicated about browser_mod popups? It’s just a couple lines of yaml and works perfectly.

tap_action:
  action: fire-dom-event
  browser_mod:
    command: popup
    deviceID: this
    title: Test Popup
    card:
      type: entities
      entities:
        - sensor.some_sensor
        etc...
1 Like

I guess I never wrapped my head around deviceID because browser_mod made a bunch of entities I didn’t recognize.

From your yaml I’m guessing that deviceID: this is an actual command that creates the popup on the device you are using?

“popup” is the actual command. deviceID is the identifier for the current browser (obviously you can have more than 1 accessing your lovelace dashboard at once). “this” is just a pointer to the current browser 's device ID that only works when using fire-dom-event (there are a couple of methods to call pop-ups, this is the preferred way).

Honestly, i would just dig into browser_mod. It’s incredibly useful, not just for popups. All those entitles are sensor’s and devices to control your lovelace browser windows.

If you create a browser_mod.yaml file (see the git) you can prevent most of them from being created if you’re not planning on using them. Here’s an excerpt from my browser_mod.yaml.

prefix: "browser_" 
disable: # new browser entities
  - light
  - media_player
  - camera
  - binary_sensor

devices:
  b054fb55-7973f0e8:
    name: browser_jlaptop_chrome_local
    disable:
      - light
      - camera
      - binary_sensor

I’ll try again with browser_mod. Thanks for the advice.

Hi
I am a bit confused with the browser_mod card too. I have installed it but I can’t make it work as I wish.
I need to make it work only in companion app (android). I don’t think that is possible.

What I would like to achieve in my android phone to have popups. Like to have a Living Room Lights entity and if I click to popup a card with all the light entities of the living room.

I don’t need something complex or good looking just to be simple to setup

Popups work on in Android.

Post your code and will try to figure where you went wrong.

Well now I am confused. Yesterday I tried many times to make it work in android companion app, but it didn’t work. I make popup from my edge browser in laptop, and it worked in the browser of my android phone, but not in the HA app. Today it is working (I haven’t change anything).

I am still a little confused though. First of all I have the below code in my config.yaml

browser_mod:
  devices:
    795fcf52-a440a663:
      name: browser_makis_lenovo_laptop_edge
    bb55ba3a-5eb4f458:
      name: browser_makis_samsung_phone
    fdc476d4_9ba3f543:
      name: browser_don't_know

But in the developers tool I don’t see anywhere the names I have given. Shouldn’t I?

I also have these entities
image

Yesterday none of them worked in my android HA app. Now they are all working. I am confused.

The code I have in some random buttons is the below. Today all working everywhere. Which should I keep?

cards:
  - cards:
      - aspect_ratio: 1/1.2
        icon: mdi:sofa
        name: test
        tap_action:
          action: fire-dom-event
          browser_mod:
            command: popup
            deviceID: 795fcf52-a440a663
            title: Test Popup
            card:
              type: entities
              entities:
                - sensor.some_sensor
        show_name: true
        entity: sensor.living_room_temperature_2
        show_state: true
        styles:
          card:
            - background-color: '#00000'
            - border-radius: 10%
        type: custom:button-card
      - aspect_ratio: 1/1.2
        icon: mdi:sofa
        name: Living Room
        tap_action:
          action: fire-dom-event
          browser_mod:
            command: popup
            deviceID: bb55ba3a-5eb4f458
            title: Test Popup
            card:
              type: entities
              entities:
                - sensor.some_sensor
        show_name: true
        entity: sensor.living_room_temperature_2
        show_state: true
        styles:
          card:
            - background-color: '#00000'
            - border-radius: 10%
        type: custom:button-card
      - aspect_ratio: 1/1.2
        icon: mdi:lightbulb
        name: phone?
        tap_action:
          action: fire-dom-event
          browser_mod:
            command: popup
            deviceID: fdc476d4_9ba3f543
            title: Test Popup
            card:
              type: entities
              entities:
                - sensor.some_sensor
        type: custom:button-card
      - aspect_ratio: 1/1.2
        icon: mdi:lightbulb
        name: this
        tap_action:
          action: fire-dom-event
          browser_mod:
            command: popup
            deviceID: this
            title: Test Popup
            card:
              type: entities
              entities:
                - sensor.some_sensor
        type: custom:button-card
    type: horizontal-stack
  - cards:
      - aspect_ratio: 1/1.2
        icon: mdi:lightbulb
        name: 1/1
        tap_action:
          action: fire-dom-event
          browser_mod:
            command: popup
            deviceID: b4dcdef6_ec5cae64
            title: Test Popup
            card:
              type: entities
              entities:
                - sensor.some_sensor
        type: custom:button-card

2 days before as per an example in youtube I had add to the raw configurator editor the below code. Again it was working in the laptop browser but not in android app. Today even this is working.

popup_cards:
  sensor.consumption_36:
    card:
      entities:
        - entity: switch.sonoff_10001bb5c7
      type: entities
    title: makis test
  input_text.living_room_lights_text:
    card:
      entities:
        - entity: switch.sonoff_10001bb5c7
        - $toggle: true
          entity: light.77626641ecfabc96e072
          name: Dim
          type: custom:slider-entity-row
        - $toggle: true
          entity: light.77626641ecfabc976395
          name: Dimmmer
          type: custom:slider-entity-row
        - entity: switch.meross_lan_1812011610829529087334298f1896a5_0
        - entity: switch.meross_lan_1811269316494129086734298f1861d1_1
        - entity: switch.meross_lan_1811269316494129086734298f1861d1_2
        - entity: light.yee_notify_lamp
        - type: divider
        - entity: switch.meross_lan_1811262418516429086734298f185fa8_1
        - entity: switch.meross_lan_1811262418516429086734298f185fa8_2
        - entity: switch.sonoff_1000a05283
        - entity: switch.sonoff_10009bd11e
        - type: divider
        - entity: light.bedside_lamp
        - entity: light.bedroom_ceiling_light
        - entity: binary_sensor.bedroom_ceiling_light_nightlight
        - type: divider
        - entity: switch.bath_light_1
        - entity: switch.bath_light_2
        - entity: switch.wc_light
        - type: divider
        - $toggle: true
          entity: light.shellydimmer2_3c6105e333cf
          name: Balcony Spots
          type: custom:slider-entity-row
        - entity: switch.meross_lan_1811264836268229086734298f1862d0_1
        - entity: switch.meross_lan_1811264836268229086734298f1862d0_2
        - entity: switch.meross_lan_1812019709838229087334298f1895fb_0
        - entity: switch.meross_lan_1812016823740829087334298f18972e_0
        - entity: switch.meross_lan_1812013756539529087334298f18976e_0
        - entity: group.night_simulation
        - entity: scene.afternoon_lights
        - entity: scene.night_casual_lighting
        - entity: scene.watch_tv
        - entity: scene.lights_all_off
        - entity: light.shellycolorbulb_e8db84a9c6b2
        - entity: light.tv_led
      type: entities
    title: LV Lights

Now my main problem is that I make it (somehow) to work but I am not sure what to do to keep the code minimum and which entities to disable etc.

Sounds like you had something going on with the browser cache. Chrome and the mobile app especially seems to be very stubborn sometimes. When something doesn’t work as expected use the developer tools to empty your cache and do a hard reload and/or empty the app cache in android settings, close and reopen browsers.

The popup_cards: method can be weird. I would stick to tap_action calls until you’ve got a good handle on how browser_mod works.

Yes, you should see named browser_mod entities. I think your entities may have been created before you created your browser mod file. Try logging out of all your browsers the log back in. You should get new named browser mod entities. Also, be aware that the device_id can change if you log out of a browser then log back in. You can either change the device_ids in your browser_mod.yaml file or you can use the various methods described in the browser mod git to set it back to the original value if required for some reason. (Clicking the device ID on the browser media player method is probably the easiest.)

For this reason, I find using fire-dom-event method with the this keyword is probably the most reliable method for popups.

Sounds like you got it mostly working now though.

I am trying to test with the below code but im not getting a pop up. thoughts?

type: button
name: Test Button
tap_action:
  action: fire-dom-event
  browser_mod:
    command: popup
    deviceID: this
    title: Test Popup
    card:
      type: entities
      entities:
        - binary_sensor.back_door_sensor_contact

I lied, I had to refresh the dashboard but the above is working now.

It happens just before a while to start adding in my buttons the right entities. Finished before a while. Now nothing is working again. I cleared the cache of my browser, and the android app, restarted the laptop and the phone. Still nothing is working

Did you fix that? I’m having the same problem and I could not find any solution

I can not say I fixed it BUT it is working. I spend a few days without knowing what’s wrong. After an update I did in HA it just started working. I know have several sensors which ideally I would like to clear, but as they say if it is working don’t fix it.

I would recommend to you just to wait a few days :slight_smile:

Ok, thanks. I’ll see what happens in a few days :wink:

1 Like

Im using this to add a pop up to a TV button… is there anyway to add certain text to the activities in the pop up? as well as icons? Here’s the code that works… attaching a screenshot of the output as well.

type: custom:button-card
entity: remote.loft_harmony
name: TV
styles:
  card:
    - border-radius: 8%
tap_action:
  action: fire-dom-event
  browser_mod:
    command: popup
    deviceID: this
    title: Do what?
    hide_header: true
    card:
      type: entities
      entities:
        - switch.loft_harmony_play_xbox
        - switch.loft_harmony_watch_movies_and_show
template:
  - base
  - icon_tv

image

I figured it out… have to add the code to the specific cards.

Is there really no way to have the android app refresh to include the card-mod without clearing data? That is really a nuclear option. I wonder if this should be a request for the android app team to be able to refresh these.

It isn’t. I just added the actual /browser_mod.js to the lovelace and it began functioning immediately.

Created a PR for the same if the author would like to include the note.

I just encountered the problem, that my browser_mod.popups and .more_info dialogs did not show anymore.
Yesterday they worked flawlessly and now nothing pops up anymore.
Rechecked the YAML - all in order.
AND: they still work in the companion app.
I did nothing, I swear! :innocent:
Just if anyone scratches his head like I did the past hour:
I updated Edge to version 106.0.1370.52 - version 106 is more strict than 105.
I had to whitelist popups for my HA instance!

1 Like