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 Zoom Support +### Taking card actions via the URL + +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: + +Taking card actions via the URL + +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). */