custom_card_imswel_person card not showing popup

[vandenbogerd]

browser_mod is working fine in my installation, but for "custom_card_imswel_person" it doesn't show the popup as intended

Edit: the same goes for the "Thermostat popup"...

[JoshSald]

Having the same issue

[vandenbogerd]

Think I have found the culprit...

I had installed all dependancy packages through HACS manually. Then I read this important message:

"Activate "Include Custom Cards" only if you have not already installed the required Lovelace resources yourself, or if you dont want to install them by yourself. Otherwise this can currently lead to a freeze of the frontend due to double loaded lovelace resources."

I unchecked that one, restarted HA, and now the popups are working (on a mobile phone at least, not in my browser)

[FlyingPersian]

I have the same issue. The fix mentioned above worked, but then I had to manually re-install all the custom cards needed. I did so and now the popup isn't working again. Also, the language is in polish now. It just shows my name, picture and "W domu" (= home in polish).

I have the following Frontend components installed:

• button-card
• simple weather card
• auto-entities
• mini-graph-card
• mini media player
• light entity card
• card-mod (lovelace-card-mod)
• my cards bundle (my-slider)

I have the following integrations installed:

• browser_mod
• UI Lovelace Minimalist
• HACS

Here my ui-lovelace.yaml:

---
button_card_templates: !include_dir_merge_named "../../custom_components/ui_lovelace_minimalist/__ui_minimalist__/ulm_templates/"

title: "UI Lovelace Minimalist"
theme: "minimalist-desktop"
background: "var(--background-image)"
# views: !include_dir_merge_list "views/"
views:
  - title: "Example View"
    path: 0
    icon: "mdi:flower"
    cards:
      - type: "vertical-stack"
        cards:
        - type: "custom:button-card"
          template: custom_card_imswel_person
          variables:
            ulm_card_imswel_person_entity: person.test
            ulm_card_imswel_person_wifi_tracker: device_tracker.oneplus8 #WiFi tracking via my router
            ulm_card_imswel_person_gps_tracker: device_tracker.oneplus_8_app #HA companion app
            ulm_card_imswel_person_findmy_script: script.find_my_oneplus_6t #a script that sends a message via telegram
            ulm_card_imswel_person_use_entity_picture: true
            ulm_card_imswel_person_zones: 
              - zone.home

[adriaanh]

I have the same problem, also polish language while the Home Assistant and UI minimalist settings are set on English

[FlyingPersian]

I have the same problem, also polish language while the Home Assistant and UI minimalist settings are set on English

Try moving the language file to the root directory of the card (so the custom_card_imswel_person folder)

[nielseulink]

Same issue, anyone with an fix ?

[roschi02]

I found a fix you have to delete all the languages except the one you want from this folder: config\custom_components\ui_lovelace_minimalist\__ui_minimalist__\ulm_templates\custom_cards\custom_card_imswel_person\languages you also have to do this in the default folder config\ui_lovelace_minimalist\custom_cards\custom_card_imswel_person\languages I assume if you don't have a language folder, you should create one.

I fixt the popup issue by adding this to my configuration.yaml:

browser_mod:
  prefix: 'browser_mod_'

and delete all browser data from the HA side. For the mobile app, I had to delete the Cache

[nicojmb]

With browser_mod 2.0 this solution do not work, popup do not show.

[JoshSald]

Can confirm. The aforementioned solution worked previously, but ever since I updated to 2.0, the popup seems to have completely stopped working.

After reading through the browser mod Readme, I seem to have found a solution. Just replace your custom_popup_imswel_person with this:

custom_popup_imswel_person:
  tap_action:
    action: "fire-dom-event"
    browser_mod:
      service: "browser_mod.popup"
      data:
        title: "[[[ return states[variables.ulm_card_imswel_person_entity].attributes.friendly_name ]]]"
        style:
          $: >
            [[[
              if (hass.themes.theme.includes("desktop")){
                var dialog = `
                  .mdc-dialog__surface{
                    border-radius: var(--border-radius) !important;
                  }
                `;
              } else{
                var dialog = "";
              }
              return `
                *{
                  --secondary-background-color: none !important;
                }
                ${dialog}
              `;
            ]]]
          hui-vertical-stack-card:
            $: >
              button-card {
                align-self: center;
                padding: 0.2em 0 2.3em 0;
              }
              hui-entities-card{
                padding: 0.8em 1.4em;
              }
            $hui-entities-card$: >
              ha-card{
                box-shadow: none;
              }
            $hui-history-graph-card$: >
              .content {
                padding: 0 2.4em !important;
              }
              ha-card{
                box-shadow: none;
              }
            $hui-glance-card$: >
              ha-card{
                box-shadow: none;
              }
            $hui-map-card:
              $: >
                ha-icon-button {
                  color: rgba(var(--color-blue),1);
                }
              $ha-map:
                $: >
                  .leaflet-control-attribution {
                    display: none;
                  }
                  .leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar {
                    border: 2px solid rgba(var(--color-blue),0.4) !important;
                  }
                  .leaflet-bar a {
                    background-color: rgba(var(--color-blue),0.2) !important;
                    color: rgba(var(--color-blue),1) !important;
                  }
                  .leaflet-bar a:first-child {
                    border-bottom: 2px solid rgba(var(--color-blue),0.4) !important;
                  }
                  .leaflet-pane.leaflet-tile-pane {
                    filter: contrast(95%);
                  }
        content:
          type: "vertical-stack"
          cards:
            - type: "entities"
              entities:
                - entity: "[[[ return variables.ulm_card_imswel_person_entity; ]]]"
                  secondary_info: "last-changed"
            - type: "history-graph"
              entities:
                - entity: "[[[ return variables.ulm_card_imswel_person_entity; ]]]"
            - type: "glance"
              show_state: false
              entities:
                - entity: "[[[ return variables.ulm_card_imswel_person_wifi_tracker; ]]]"
                  name: "WiFi"
                  icon: "mdi:wifi"
                  style: &state >
                    state-badge{
                      color: {{ 'rgba(var(--color-blue),1)' if is_state(config.entity, 'home') }};
                      filter: {{ 'opacity(100%)' if is_state(config.entity, 'home') else 'opacity(40%)'}};
                    }
                - entity: "[[[ return variables.ulm_card_imswel_person_gps_tracker; ]]]"
                  name: "GPS"
                  icon: "mdi:map-marker"
                  style: *state
            - type: "custom:button-card"
              template:
                - "find_my_phone_button"
              entity: "[[[ return variables.ulm_card_imswel_person_findmy_script; ]]]"
            - type: "map"
              aspect_ratio: "12x10"
              default_zoom: 16
              entities: "[[[ return [variables.ulm_card_imswel_person_gps_tracker]; ]]]"

I still need to fix the styling, but thought I'd share if anyone wants a quickfix.