Frigate card query args not working when used with Bubble Card #1276

NickM-27 · 2023-09-20T18:30:55Z

I am using the bubble card to have a popup using the navigate action. This is basically a card that is in the dashboard but hidden and when the navigation is called with the hash #cameras a popup will show with the card inside.

Running frigate card 5.2.0

Here is the yaml for the view that is calling this:

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: sensor.frigate_status
    content: |-
      {% if (states("binary_sensor.back_deck_cam_person_occupancy") == 'on')  %}
        Person @ Back Deck
      {% elif states('binary_sensor.back_deck_cam_dog_occupancy') == 'on' %}
        Dog @ Back Deck
      {% else %}
        Back Deck
      {% endif %}
    icon: |-
      {% if (states("binary_sensor.back_deck_cam_person_occupancy") == 'on')  %}
        mdi:account-alert-outline
      {% elif states('binary_sensor.back_deck_cam_dog_occupancy') == 'on' %}
        mdi:dog-service
      {% else %}
        mdi:cctv
      {% endif %}
    icon_color: |-
      {% if (states("binary_sensor.back_deck_cam_person_occupancy") == 'on')  %}
        red
      {% elif states('binary_sensor.back_deck_cam_dog_occupancy') == 'on' %}
        red
      {% else %}
        white
      {% endif %}
    tap_action:
      action: navigate
      navigation_path: '#cameras?frigate-card-action:camera_select=back_deck_cam'
alignment: center

I have also tried

navigation_path: '#cameras?frigate-card-action:popup:camera_select=back_deck_cam'
navigation_path: '#cameras?frigate-card-action:camera_select=camera.back_deck_cam'

but they also do not seem to work.

Here is the yaml for the frigate card in a popup

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: '#cameras'
    name: Cameras
    icon: mdi:cctv
    margin_top_mobile: 0px
    margin_top_desktop: 28px
    width_desktop: 90%
  - type: custom:vertical-stack-in-card
    cards:
      - type: custom:frigate-card
        card_id: popup
        cameras:
          - camera_entity: camera.front_cam
            live_provider: go2rtc
            go2rtc:
              modes:
                - webrtc
            frigate:
              labels:
                - person
                - dog
                - cat
            id: front_cam
          - camera_entity: camera.back_gate_cam
            live_provider: go2rtc
            go2rtc:
              modes:
                - webrtc
            frigate:
              labels:
                - person
            id: back_gate_cam
          - camera_entity: camera.back_deck_cam
            live_provider: go2rtc
            go2rtc:
              modes:
                - webrtc
            frigate:
              labels:
                - person
            id: back_deck_cam
          - camera_entity: camera.garage_cam
            live_provider: go2rtc
            go2rtc:
              modes:
                - webrtc
            frigate:
              labels:
                - person
          - camera_entity: camera.front_doorbell_cam
            live_provider: go2rtc
            go2rtc:
              modes:
                - webrtc
            frigate:
              labels:
                - person
          - camera_entity: camera.office_cam
            live_provider: go2rtc
            go2rtc:
              modes:
                - webrtc
            frigate:
              labels:
                - dog
        live:
          lazy_unload: all
          auto_play: all
          auto_mute: all
          auto_unmute: never
          controls:
            title:
              mode: none
            thumbnails:
              mode: below
              media: snapshots
              show_details: false
            next_previous:
              style: none
          zoomable: false
          auto_pause: all
        media_viewer:
          controls:
            title:
              mode: none
            next_previous:
              style: none
        menu:
          style: outside
          position: bottom
          buttons:
            frigate:
              enabled: false
            snapshots:
              enabled: false
            download:
              enabled: false
            camera_ui:
              enabled: false
            fullscreen:
              enabled: false
            media_player:
              enabled: false
            microphone:
              enabled: true
            timeline:
              enabled: false
        performance:
          profile: high
        timeline: {}

I can see the url properly showing the query args, and the card opens but it always opens to front_cam

example: http://HA_IP:8123/dashboard-draft/default-view#cameras?frigate-card-action:camera_select=back_deck_cam

The text was updated successfully, but these errors were encountered:

kirsch33 · 2023-09-21T13:46:56Z

i could be wrong, but it could be related to this. while the issue is closed, per my latest comment and @dermotduffy response, it is still being addressed

#1259

kirsch33 · 2023-09-21T13:48:00Z

also see this for context

#1253 (comment)

NickM-27 · 2023-09-21T13:51:01Z

To be clear I'm testing this on web so not sure what the specific issue is, but sounds like this is being refactored so sounds good to me

dermotduffy · 2023-09-22T14:36:20Z

To be clear I'm testing this on web so not sure what the specific issue is, but sounds like this is being refactored so sounds good to me

That's right -- this is what I'm currently working on in my development time. I will specifically test the examples in this bug as I'm doing so. It's part of a much larger refactor of the main card.ts file which has grown beyond maintainability.

dermotduffy · 2023-10-04T02:58:14Z

@NickM-27 Since it seems you tried out the refactored PR, did the querystring work as you expected now?

This should be the correct format to select a camera: ?frigate-card-action:camera_select=camera.front_door

NickM-27 · 2023-10-04T11:50:27Z

Haven't tried the new version yet, but it has just been sitting on this regardless of what I do

NickM-27 · 2023-10-04T11:57:05Z

when I load the editor the card works fine but then I save and it just shows the above

NickM-27 · 2023-10-04T12:45:22Z

it appears the issue is the card does not like being inside vertical-stack-in-card

however, once I removed that, it still does not seem to be working with the query args, the first camera is always opened

NickM-27 · 2023-10-04T12:47:02Z

and interestingly, when the card is shown like this the camera switcher icon does not work, nothing pops up to select other cameras

dermotduffy · 2023-10-04T14:56:58Z

Looks like more than 1 issue here. Mind sharing the non-vertical-stack config (whatever the smallest config you have that shows the problem), with that I think the only issue is the query string doesn't work, right?

And with the vertical stack (config as shown earlier in this issue?), it gets stuck at the ha reconnection?

NickM-27 · 2023-10-04T15:41:11Z

Looks like more than 1 issue here. Mind sharing the non-vertical-stack config (whatever the smallest config you have that shows the problem), with that I think the only issue is the query string doesn't work, right?

right, just that the query args don't seem to work AND when using query args the camera selector popup doesn't seem to work.

example: http://192.168.50.106:8123/dashboard-draft/default-view#cameras?frigate-card-action:camera_select=camera.front_cam

  - type: custom:frigate-card
    cameras:
      - camera_entity: camera.front_cam
        live_provider: go2rtc
        go2rtc:
          modes:
            - webrtc
        frigate:
          labels:
            - person
            - dog
            - cat
        id: front_cam
      - camera_entity: camera.back_gate_cam
        live_provider: go2rtc
        go2rtc:
          modes:
            - webrtc
        frigate:
          labels:
            - person
        id: back_gate_cam
      - camera_entity: camera.back_deck_cam
        live_provider: go2rtc
        go2rtc:
          modes:
            - webrtc
        frigate:
          labels:
            - person
        id: back_deck_cam
      - camera_entity: camera.garage_cam
        live_provider: go2rtc
        go2rtc:
          modes:
            - webrtc
        frigate:
          labels:
            - person
      - camera_entity: camera.front_doorbell_cam
        live_provider: go2rtc
        go2rtc:
          modes:
            - webrtc
        frigate:
          labels:
            - person
      - camera_entity: camera.office_cam
        live_provider: go2rtc
        go2rtc:
          modes:
            - webrtc
        frigate:
          labels:
            - dog
    live:
      lazy_unload: all
      auto_play: all
      auto_mute: all
      auto_unmute: never
      controls:
        title:
          mode: none
        thumbnails:
          mode: below
          media: snapshots
          show_details: false
        next_previous:
          style: none
      zoomable: false
      auto_pause: all
      transition_effect: none
    media_viewer:
      controls:
        title:
          mode: none
        next_previous:
          style: none
    menu:
      style: outside
      position: bottom
      buttons:
        frigate:
          enabled: false
        snapshots:
          enabled: false
        download:
          enabled: false
        camera_ui:
          enabled: false
        fullscreen:
          enabled: false
        media_player:
          enabled: false
        microphone:
          enabled: true
        timeline:
          enabled: false
    performance:
      profile: high

And with the vertical stack (config as shown earlier in this issue?), it gets stuck at the ha reconnection?

I believe so, or at least that's what the card text implies. To be clear, this is with the custom:vertical-stack-in-card and not the built in stack

dermotduffy · 2023-10-05T02:27:52Z

example: http://192.168.50.106:8123/dashboard-draft/default-view#cameras?frigate-card-action:camera_select=camera.front_cam

In this example, your card doesn't have a camera with an id camera.front_cam, as you've explicitly set the id to front_cam, i.e. I would expect this to work:

http://192.168.50.106:8123/dashboard-draft/default-view#cameras?frigate-card-action:camera_select=front_cam

Don't suppose that could be the issue? On my end this appears to work reliably :-(

NickM-27 · 2023-10-05T02:44:46Z

I'll try it again but that was actually how it was before but I changed it. I'll give it another go

dermotduffy · 2023-10-05T02:59:20Z

On the vertical stack issue, I install this which I think is what you're referring to, and used your same config at the start of the issue. It seems to work fine. But when I add the bubble card, it behaves erratically, sometimes renders nothing at all, sometimes (rarely though) shows the reconnection message you had. If I change custom:bubble-card to xxxcustom:bubble-card it seems to go back to normal (except the bubble bit has the expected error message). Can't tell if the issue is in the bubble card or Frigate card...

dermotduffy · 2023-10-05T04:37:52Z

On the vertical stack issue

OK, think I figured the vertical stack/bubble issue out somewhat. One of the bubble card, or more likely the vertical stack card, is passing in an undefined HA state object to the Frigate card, which should not happen. This is causing the Frigate card to think the connection is lost, and it is incorrectly detecting the "reconnection". Working on a fix. I see other issues with using the Frigate card in the bubble card though, but one thing at a time...

NickM-27 · 2023-10-05T12:00:35Z

unfortunately this still doesn't seem to be working for me. If I have a button with navigate action and navigation_path: '#cameras?frigate-card-action:camera_select=back_deck_cam' it is still opening with the front_cam (which is the first cam in the list) selected

dermotduffy · 2023-10-05T13:49:51Z

If I have a button

Aha. OK. You're not just going to the URL in the browser (bet that works), you're using a navigate action. I have reproduced the navigate action case not working -- phew.

NickM-27 · 2023-10-05T14:01:14Z

Sorry I didn't make that clear

dermotduffy · 2023-10-06T03:11:19Z

@NickM-27 OK, with those two merged changes on the dev branch I think this will be better for you. Note that the other issue I found is addressed with this non-merged PR:

ofekashery/vertical-stack-in-card#126

Vertical stack card will cut off the camera selector menu if you position it at the bottom, since it uses overflow: hidden.

NickM-27 · 2023-10-06T12:52:17Z

not sure if I am doing something wrong but it still doesn't work for me. I also copied the full address and tried to open it directly in the browser and it still opens to the front camera.

dermotduffy · 2023-10-07T22:50:11Z

not sure if I am doing something wrong but it still doesn't work for me.

Oh dear, sorry this is consuming your time.

Would you mind checking your Javascript console (F12 in Chrome) while you're loading the page with the query string and see if anything interesting is happening.
I found and fixed a different bug impacting the carousel not scrolling correctly in certain cases. It's possible this was what you were seeing, although I suspect unlikely.

For full transparency, here is how I am testing. Please let me know if I'm not testing the right thing:

Test Case 1: Simple navigation actions

Picture elements config:

type: picture-elements
image: https://demo.home-assistant.io/stub_config/floorplan.png
elements:
  - type: icon
    icon: mdi:cctv
    style:
      top: 22%
      left: 30%
    tap_action:
      action: navigate
      navigation_path: /lovelace-test/map?frigate-card-action:camera_select=camera.living_room
  - type: icon
    icon: mdi:cctv
    style:
      top: 71%
      left: 42%
    tap_action:
      action: navigate
      navigation_path: /lovelace-test/map?frigate-card-action:camera_select=camera.landing

Card config:

type: custom:frigate-card
cameras:
  - camera_entity: camera.living_room
  - camera_entity: camera.landing

Test Case 2: Bubble + Vertical Stack

Button:

type: button
show_name: true
show_icon: true
tap_action:
  action: navigate
  navigation_path: >-
    /lovelace-test/vsic?frigate-card-action:camera_select=camera.living_room#cameras
show_state: false
icon: mdi:cctv

Stack/Card:

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: '#cameras'
    name: Cameras
    icon: mdi:cctv
    margin_top_mobile: 0px
    margin_top_desktop: 28px
    width_desktop: 90%
  - type: custom:vertical-stack-in-card
    cards:
      - type: custom:frigate-card
        card_id: popup
        cameras:
          - camera_entity: camera.landing
          - camera_entity: camera.living_room

NickM-27 · 2023-10-08T12:22:46Z

okay so it appears the #cameras must come after the query args, not before. When it comes after things work as expected

NickM-27 · 2023-10-08T12:25:23Z

by the way I am noticing the (what seems new) grid media gallery with live camera views, is there a way to default to this view?

dermotduffy · 2023-10-08T19:50:33Z

okay so it appears the #cameras must come after the query args, not before. When it comes after things work as expected

Great, phew. Yes: the frigate card is using true query string parameters. Looks like bubble card is using anchor references like #whatever, this must come after a query string in a URL. This makes some sense, since anchor references are typically used to move particular content on a long page into view, which is (kind of?) what is happening with the popup: the content is already rendered, just not visible until it's "popped" into view.

by the way I am noticing the (what seems new) grid media gallery with live camera views, is there a way to default to this view?

You mean the multi-camera grid? Yes, you can enable it by default for either (or both) of the live view or media view like the below. There's also a menu button to switch back and forth dynamically.

[...]
live:
  display:
    mode: grid
media_viewer:
  display:
    mode: grid

NickM-27 · 2023-10-08T20:40:09Z

Awesome, that is working great and I see what you are saying now, that makes sense

NickM-27 added the bug Something isn't working label Sep 20, 2023

NickM-27 mentioned this issue Sep 25, 2023

Ignore query args in url Clooos/Bubble-Card#43

Closed

dermotduffy mentioned this issue Oct 2, 2023

Refactor card.ts and types.ts and add tests #1279

Merged

This was referenced Oct 6, 2023

Fix query string handling for navigation calls #1281

Merged

Safely handle invalid null hass objects #1282

Merged

NickM-27 closed this as completed Oct 8, 2023

github-actions bot locked and limited conversation to collaborators Oct 4, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Frigate card query args not working when used with Bubble Card #1276

Frigate card query args not working when used with Bubble Card #1276

NickM-27 commented Sep 20, 2023

kirsch33 commented Sep 21, 2023

kirsch33 commented Sep 21, 2023

NickM-27 commented Sep 21, 2023

dermotduffy commented Sep 22, 2023

dermotduffy commented Oct 4, 2023

NickM-27 commented Oct 4, 2023

NickM-27 commented Oct 4, 2023

NickM-27 commented Oct 4, 2023

NickM-27 commented Oct 4, 2023

dermotduffy commented Oct 4, 2023 •

edited

Loading

NickM-27 commented Oct 4, 2023

dermotduffy commented Oct 5, 2023 •

edited

Loading

NickM-27 commented Oct 5, 2023

dermotduffy commented Oct 5, 2023

dermotduffy commented Oct 5, 2023

NickM-27 commented Oct 5, 2023

dermotduffy commented Oct 5, 2023

NickM-27 commented Oct 5, 2023

dermotduffy commented Oct 6, 2023

NickM-27 commented Oct 6, 2023

dermotduffy commented Oct 7, 2023

NickM-27 commented Oct 8, 2023

NickM-27 commented Oct 8, 2023

dermotduffy commented Oct 8, 2023

NickM-27 commented Oct 8, 2023

Frigate card query args not working when used with Bubble Card #1276

Frigate card query args not working when used with Bubble Card #1276

Comments

NickM-27 commented Sep 20, 2023

kirsch33 commented Sep 21, 2023

kirsch33 commented Sep 21, 2023

NickM-27 commented Sep 21, 2023

dermotduffy commented Sep 22, 2023

dermotduffy commented Oct 4, 2023

NickM-27 commented Oct 4, 2023

NickM-27 commented Oct 4, 2023

NickM-27 commented Oct 4, 2023

NickM-27 commented Oct 4, 2023

dermotduffy commented Oct 4, 2023 • edited Loading

NickM-27 commented Oct 4, 2023

dermotduffy commented Oct 5, 2023 • edited Loading

NickM-27 commented Oct 5, 2023

dermotduffy commented Oct 5, 2023

dermotduffy commented Oct 5, 2023

NickM-27 commented Oct 5, 2023

dermotduffy commented Oct 5, 2023

NickM-27 commented Oct 5, 2023

dermotduffy commented Oct 6, 2023

NickM-27 commented Oct 6, 2023

dermotduffy commented Oct 7, 2023

Test Case 1: Simple navigation actions

Test Case 2: Bubble + Vertical Stack

NickM-27 commented Oct 8, 2023

NickM-27 commented Oct 8, 2023

dermotduffy commented Oct 8, 2023

NickM-27 commented Oct 8, 2023

dermotduffy commented Oct 4, 2023 •

edited

Loading

dermotduffy commented Oct 5, 2023 •

edited

Loading