diff --git a/README.md b/README.md
index 455962a2..a842671c 100644
--- a/README.md
+++ b/README.md
@@ -1584,6 +1584,10 @@ Pan around a large camera view to only show part of the video feed in the card a
+### Taking card actions via the URL
+
+
+
## Examples
### Illustrative Expanded Configuration Reference
@@ -3745,6 +3749,47 @@ https://ha.mydomain.org/lovelace-test/0?frigate-card-action:main:clips
```
+
+ Expand: Choosing the camera from a separate picture elements card
+
+In this example, the card will select a given camera when the user navigates from a *separate* Picture Elements card:
+
+
+
+Frigate Card configuration:
+
+```yaml
+type: custom:frigate-card
+cameras:
+ - camera_entity: camera.living_room
+ - camera_entity: camera.landing
+```
+
+Picture Elements configuration (assumes the dashboard is `/lovelace-frigate/map`):
+
+```yaml
+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-frigate/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-frigate/map?frigate-card-action:camera_select=camera.landing
+```
+
+
### Automation actions
@@ -3836,13 +3881,20 @@ view:
It is possible to pass the Frigate card one or more actions from the URL (e.g. select a particular camera, open the live view in expanded mode, etc).
-To send an action to *all* Frigate cards on a dashboard:
+The Frigate card will execute these actions in the following circumstances:
+
+* On initial card load.
+* On 'tab' change in a dashboard.
+* When a `navigate` [action](https://www.home-assistant.io/dashboards/actions/) is called on the dashboard (e.g. a button click requests navigation).
+* When the user uses the `back` / `forward` browser buttons whilst viewing a dashboard.
+
+To send an action to *all* Frigate cards:
```
[PATH_TO_YOUR_HA_DASHBOARD]?frigate-card-action:[ACTION]=[VALUE]
```
-To send an action to a named Frigate card on the dashboard:
+To send an action to a named Frigate card:
```
[PATH_TO_YOUR_HA_DASHBOARD]?frigate-card-action:[CARD_ID]:[ACTION]=[VALUE]
@@ -3854,6 +3906,10 @@ To send an action to a named Frigate card on the dashboard:
| `CARD_ID` | When specified only cards that have a `card_id` parameter will act. |
| `VALUE` | An optional value to use with the `camera_select` and `live_substream_select` actions. |
+**Note**: If a dashboard has multiple Frigate cards on it, even if they are on
+different 'tabs' within that dashboard, they will all respond to the actions
+unless the action is targeted with a `CARD_ID` as shown above.
+
#### Actions
| Action | Supported in query string | Explanation |
diff --git a/images/navigate-picture-elements.gif b/images/navigate-picture-elements.gif
new file mode 100644
index 00000000..61df1332
Binary files /dev/null and b/images/navigate-picture-elements.gif differ
diff --git a/src/card.ts b/src/card.ts
index 931dba27..31ea7ddd 100644
--- a/src/card.ts
+++ b/src/card.ts
@@ -1477,6 +1477,18 @@ class FrigateCard extends LitElement {
this._conditionController?.setState({ media_loaded: false });
}
+ protected _locationChangeHandler = (): void => {
+ // Only execute actions when the card has rendered at least once.
+ if (this.hasUpdated) {
+ getActionsFromQueryString().forEach((action) => this._cardActionHandler(action));
+ }
+ };
+
+ protected firstUpdated(): void {
+ // Execute query string actions after first render is complete.
+ this._locationChangeHandler();
+ }
+
/**
* Component connected callback.
*/
@@ -1488,6 +1500,18 @@ class FrigateCard extends LitElement {
this.addEventListener('mousemove', this._boundMouseHandler);
this.addEventListener('ll-custom', this._boundCardActionEventHandler);
this._panel = isCardInPanel(this);
+
+ // Listen for HA `navigate` actions.
+ // See: https://github.com/home-assistant/frontend/blob/273992c8e9c3062c6e49481b6d7d688a07067232/src/common/navigate.ts#L43
+ window.addEventListener('location-changed', this._locationChangeHandler);
+
+ // Listen for history state changes (i.e. user using the browser
+ // back/forward controls).
+ window.addEventListener('popstate', this._locationChangeHandler);
+
+ // Manually call the location change handler as the card will be
+ // disconnected/reconnected when dashboard 'tab' changes happen within HA.
+ this._locationChangeHandler();
}
/**
@@ -1502,6 +1526,10 @@ class FrigateCard extends LitElement {
}
this.removeEventListener('mousemove', this._boundMouseHandler);
this.removeEventListener('ll-custom', this._boundCardActionEventHandler);
+
+ window.removeEventListener('location-changed', this._locationChangeHandler);
+ window.removeEventListener('popstate', this._locationChangeHandler);
+
super.disconnectedCallback();
}
@@ -1738,11 +1766,6 @@ class FrigateCard extends LitElement {
`);
}
- protected firstUpdated(): void {
- // Execute query string actions after first render is complete.
- getActionsFromQueryString().forEach((action) => this._cardActionHandler(action));
- }
-
/**
* Return compiled CSS styles (thus safe to use with unsafeCSS).
*/