Requesting documentation update for popup_cards

[Gibby]

I have tried to go through the documentation and other issues for 3 days, however I am still totally confused on how to switch my popup_cards from 1x to 2x, 😢

It would be helpful to show the old format and the new format in the documentation side by side.

Here is my 1x ui-lovelace.yaml

---

title: Home
views: !include_dir_merge_list lovelace/
popup_cards:

  person.me:
    title: me
    large: false
    card:
      type: vertical-stack
      cards:
        - type: entities
          entities:
            - person.me
            - type: call-service
              name: Find me's Phone
              service: script.find_me_phone
        - type: custom:flex-table-card
          entities:
            include:
              - device_tracker.life360_me
          columns:
            - name: Battery
              data: battery_level
            - name: GPS Accuracy
              data: gps_accuracy
            - name: Address
              data: address
            - name: Driving
              data: driving
        - type: map
          default_zoom: 16
          entities:
            - person.me

  sensor.opensprinkler_last_run:
    title: Sprinkler
    large: false
    card:
      type: custom:opensprinkler-card
      device: 144sdf1234rfsdflskjf88u13rkfjs08
      popup_line_height: small # Spacing between entities (sensors, stations, programs) listed in the popup
      timer_line_height: medium # Spacing between progress bars (running stations) in the card
      card_line_height: small # Spacing between extra_entities (entities in the card)
      hide_disabled: true
      bars:
        icon: mdi:tortoise
        active_icon: mdi:rabbit
      input_number:
        entity: input_number.slider

  device_tracker.jarvis:
    title: Jarvis
    large: false
    card:
      type: entities
      entities:
        - entity: vacuum.jarvis
          type: custom:multiple-entity-row
          name: Jarvis
          entities:
            - attribute: battery_level
              name: Battery
              unit: '%'
            - attribute: status
              name: Status
        - entity: calendar.jarvis
          name: Schedule
        - entity: binary_sensor.jarvis_battery_charging
          name: Battery Charging
        - entity: binary_sensor.jarvis_leaving_dock
          name: Leaving Dock
        - entity: sensor.jarvis_mode
          name: Mode
        - entity: sensor.jarvis_next_start
          name: Next Start
        - entity: sensor.jarvis_problem_sensor
          name: Problem Sensor
        - entity: select.jarvis_headlight_mode
          name: Headlights

  camera.backyard_1_1_fps:
    title: Backyard 1
    large: true
    card:
      type: picture-entity
      entity: camera.backyard_1
      show_name: false
      show_state: false
      camera_view: live

  group.my_lights:
    title: Lights
    large: true
    card:
      type: custom:auto-entities
      show_empty: false
      card:
        type: glance
      sort:
        method: name
        ignore_case: true
      filter:
        include:
          - group: group.my_lights
            options:
              tap_action:
                action: toggle
              hold_action:
                action: more-info

  sensor.main_power_panel_electric_consumption_w:
    title: Home Energy Usage
    large: true
    card:
      type: history-graph
      entities:
        - sensor.main_power_panel_electric_consumption_w
        - sensor.average_energy_usage

  sensor.upstairs_temperature:
    title: Upstairs
    card:
      type: thermostat
      entity: climate.upstairs
      step_size: 1

  sensor.downstairs_temperature:
    title: Downstairs
    card:
      type: thermostat
      entity: climate.downstairs
      step_size: 1

  alarm_control_panel.home_alarm:
    title: Home Alarm System
    card:
      type: entities
      title: Actions
      show_header_toggle: false
      entities:
          - entity: alarm_control_panel.home_alarm
            name: Security State
          - entity: sensor.home_alarm_keypad
            name: Security Status
          - type: call-service
            name: Arm Stay
            service: alarm_control_panel.alarm_arm_home
            service_data:
              entity_id: alarm_control_panel.home_alarm
          - type: call-service
            name: Arm Away
            service: alarm_control_panel.alarm_arm_away
            service_data:
              entity_id: alarm_control_panel.home_alarm
          - type: call-service
            name: Arm Away - Bypass Inside Motion
            service: script.arm_away_bypass_inside_motion
          - type: call-service
            name: Arm Instant
            service: script.arm_instant
          - type: call-service
            name: Bypass Inside Motion
            service: script.bypass_inside_motion
          - type: call-service
            name: Bypass Garage Double Door
            service: script.bypass_garage_double_door
          - type: call-service
            name: Bypass Garage Single Door
            service: script.bypass_garage_single_door
          - type: call-service
            name: Bypass Crawl Space Door
            service: script.bypass_crawl_space_door
          - type: call-service
            name: Bypass Back Door
            service: script.bypass_back_door
          - type: call-service
            name: Bypass Front Door
            service: script.bypass_front_door

  binary_sensor.back_door:
    title: Back Door
    card:
      type: entities
      title: Actions
      show_header_toggle: false
      entities:
        - entity: binary_sensor.back_door
          name: Status
          secondary_info: last-changed
        - type: call-service
          name: Turn Off Alert
          service: script.alert_off_back_door
        - type: call-service
          name: Bypass for Alarm
          service: script.bypass_back_door

[igiannakas]

upvoting this as well. Not sure how to do this, and the documentation is not very helpful unfortunately.

[e2m32]

It looks like you just delete the manual popup_cards lovelace entry, and then recreate the cards using the lovelace UI in edit mode. You create each popup using the type: custom:popup-card. I think the issue is that it isn't working, at least not in 2022.9.x and 2022.10.x. See https://github.com/thomasloven/hass-browser_mod/issues/413

[e2m32]

I think the issue is that it isn't working, at least not in 2022.9.x and 2022.10.x. See #413

Just tested and it is working in 2022.10.2. See https://github.com/thomasloven/hass-browser_mod/issues/413#issuecomment-1273502775

[Gibby]

@e2m32 I'm trying to do it in yaml and not in the UI. I tried using type: custom:popup-card in yaml with no luck.

[e2m32]

Hi @Gibby

I took your first popup card entry in your shared code and changed it to a custom:popup-card. Try adding this to the same view that you want it to popup from. When you click on the entity (person.me) in another card (on the same view), this should popup instead of the basic more-info dialog. If it doesn't verify that you've installed browser_mod correctly. Also I've had issues getting this to work from other custom cards. So test with the basic Lovelace Entity Card.

type: custom:popup-card
entity: person.me
title: me
dismissable: true
card:
  type: vertical-stack
  cards:
    - type: entities
      entities:
        - person.me
        - type: call-service
          name: Find me's Phone
          service: script.find_me_phone
    - type: custom:flex-table-card
      entities:
        include:
          - device_tracker.life360_me
      columns:
        - name: Battery
          data: battery_level
        - name: GPS Accuracy
          data: gps_accuracy
        - name: Address
          data: address
        - name: Driving
          data: driving
    - type: map
      default_zoom: 16
      entities:
        - person.me
size: normal