Complete documentation overhaul.
This commit is contained in:
Dermot Duffy
@@ -0,0 +1,981 @@
|
||||
# Examples
|
||||
|
||||
## Actions on `tap`
|
||||
|
||||
You can add actions to the card to be trigger on `tap`, `double_tap`, `hold`, `start_tap` or `end_tap`.
|
||||
|
||||
In this example double clicking the card in any view will cause the card to go
|
||||
into fullscreen mode, **except** when the view is `live` in which case the
|
||||
office lights are toggled.
|
||||
|
||||
```yaml
|
||||
type: custom:frigate-card
|
||||
cameras:
|
||||
- camera_entity: camera.office
|
||||
view:
|
||||
actions:
|
||||
double_tap_action:
|
||||
action: custom:frigate-card-action
|
||||
frigate_card_action: fullscreen
|
||||
live:
|
||||
actions:
|
||||
entity: light.office_main_lights
|
||||
double_tap_action:
|
||||
action: toggle
|
||||
```
|
||||
|
||||
## Aspect ratios
|
||||
|
||||
```yaml
|
||||
type: custom:frigate-card
|
||||
cameras:
|
||||
- camera_entity: camera.office
|
||||
dimensions:
|
||||
aspect_ratio_mode: static
|
||||
aspect_ratio: '4:3'
|
||||
```
|
||||
|
||||
## Automation
|
||||
|
||||
This example will automatically turn on the first configured substream when the
|
||||
card is put in fullscreen mode, and turn off the substream when exiting
|
||||
fullscreen mode.
|
||||
|
||||
```yaml
|
||||
type: custom:frigate-card
|
||||
cameras:
|
||||
- camera_entity: camera.office
|
||||
live_provider: image
|
||||
dependencies:
|
||||
cameras:
|
||||
- office_hd
|
||||
- camera_entity: camera.office
|
||||
title: Office HD
|
||||
live_provider: go2rtc
|
||||
id: office_hd
|
||||
capabilities:
|
||||
disable_except:
|
||||
- substream
|
||||
automations:
|
||||
- conditions:
|
||||
- condition: fullscreen
|
||||
fullscreen: true
|
||||
actions:
|
||||
- action: custom:frigate-card-action
|
||||
frigate_card_action: live_substream_on
|
||||
actions_not:
|
||||
- action: custom:frigate-card-action
|
||||
frigate_card_action: live_substream_off
|
||||
```
|
||||
|
||||
## `card-mod`
|
||||
|
||||
This card allows the use of
|
||||
[card-mod](https://github.com/thomasloven/lovelace-card-mod) to style arbitrary
|
||||
card contents.
|
||||
|
||||
!> `card-mod` relies on the underlying internal DOM structure to style elements
|
||||
-- as such, while its use is possible, it's not officially supported and zero
|
||||
attempt is made to preserve backwards compatability of the internal DOM between
|
||||
any versions. It may look good, but you're on your own!
|
||||
|
||||
This example changes the color and removes the padding around a [Picture
|
||||
Elements state
|
||||
label](https://www.home-assistant.io/lovelace/picture-elements/#state-label).
|
||||
|
||||
```yaml
|
||||
type: custom:frigate-card
|
||||
cameras:
|
||||
- camera_entity: camera.office
|
||||
card_mod:
|
||||
style:
|
||||
frigate-card-elements $:
|
||||
hui-state-label-element $: |
|
||||
div {
|
||||
padding: 0px !important;
|
||||
color: blue;
|
||||
}
|
||||
```
|
||||
|
||||
## Cast a `dashboard`
|
||||
|
||||
This example will configure a Frigate card that can cast a dashboard view to a media player, which has a second Frigate card in panel mode with a low-latency live provider.
|
||||
|
||||
### Source card
|
||||
|
||||
```yaml
|
||||
type: custom:frigate-card
|
||||
cameras:
|
||||
- camera_entity: camera.office
|
||||
live_provider: image
|
||||
cast:
|
||||
method: dashboard
|
||||
dashboard:
|
||||
dashboard_path: cast
|
||||
view_path: office
|
||||
```
|
||||
|
||||
### Dashboard configuration
|
||||
|
||||
?> This dashboard is configured at the path `/cast/` (path referred to in `dashboard_path` above).
|
||||
|
||||
```yaml
|
||||
title: Frigate Card Casting
|
||||
views:
|
||||
- title: Casting
|
||||
# This path is referred to in `view_path` above.
|
||||
path: office
|
||||
# Ensure the video is "maximized" / dashboard in "panel" mode.
|
||||
type: panel
|
||||
cards:
|
||||
- type: custom:frigate-card
|
||||
cameras:
|
||||
- camera_entity: camera.office
|
||||
live_provider: go2rtc
|
||||
```
|
||||
|
||||
## Conditional elements
|
||||
|
||||
You can restrict elements to only show for certain
|
||||
[views](configuration/view.md?id=supported-views) using a
|
||||
`custom:frigate-card-conditional` element. This example shows a car icon that
|
||||
calls a service but only in the `live` view.
|
||||
|
||||
```yaml
|
||||
type: custom:frigate-card
|
||||
cameras:
|
||||
- camera_entity: camera.office
|
||||
elements:
|
||||
- type: custom:frigate-card-conditional
|
||||
conditions:
|
||||
- condition: view
|
||||
views:
|
||||
- live
|
||||
elements:
|
||||
- type: icon
|
||||
icon: mdi:car
|
||||
style:
|
||||
background: rgba(255, 255, 255, 0.25)
|
||||
border-radius: 5px
|
||||
right: 25px
|
||||
bottom: 50px
|
||||
tap_action:
|
||||
action: call-service
|
||||
service: amcrest.ptz_control
|
||||
service_data:
|
||||
entity_id: camera.kitchen
|
||||
movement: up
|
||||
```
|
||||
|
||||
## Conditional menu icons
|
||||
|
||||
You can have icons conditionally added to the menu based on entity state.
|
||||
|
||||
### Show a menu icon based on state
|
||||
|
||||
```yaml
|
||||
type: custom:frigate-card
|
||||
cameras:
|
||||
- camera_entity: camera.office
|
||||
elements:
|
||||
- type: conditional
|
||||
conditions:
|
||||
- condition: state
|
||||
entity: light.office_main_lights
|
||||
state: on
|
||||
elements:
|
||||
- type: custom:frigate-card-menu-state-icon
|
||||
entity: light.office
|
||||
tap_action:
|
||||
action: toggle
|
||||
```
|
||||
|
||||
### Show a menu icon based on camera triggering
|
||||
|
||||
This example adds a menu button to optionally activate a siren when the camera is triggered.
|
||||
|
||||
```yaml
|
||||
type: custom:frigate-card
|
||||
cameras:
|
||||
- camera_entity: camera.office
|
||||
elements:
|
||||
- type: custom:frigate-card-conditional
|
||||
elements:
|
||||
- type: custom:frigate-card-menu-icon
|
||||
icon: mdi:alarm-bell
|
||||
title: Activate alarm
|
||||
style:
|
||||
color: red
|
||||
tap_action:
|
||||
action: call-service
|
||||
service: homeassistant.toggle
|
||||
data:
|
||||
entity_id: siren.siren
|
||||
conditions:
|
||||
- condition: triggered
|
||||
triggered:
|
||||
- camera.office
|
||||
```
|
||||
|
||||
## Events from other cameras
|
||||
|
||||
`dependencies.cameras` allows events/recordings for other cameras to be shown
|
||||
along with the currently selected camera. For example, this can be used to show
|
||||
events with the `birdseye` camera (since it will not have events of its own).
|
||||
|
||||
### Using dependent cameras with birdseye
|
||||
|
||||
This example shows events for two other cameras when `birdseye` is selected.
|
||||
|
||||
```yaml
|
||||
type: custom:frigate-card
|
||||
cameras:
|
||||
- camera_entity: camera.office
|
||||
- camera_entity: camera.kitchen
|
||||
- frigate:
|
||||
camera_name: birdseye
|
||||
dependencies:
|
||||
cameras:
|
||||
- camera.office
|
||||
- camera.kitchen
|
||||
```
|
||||
|
||||
### Using dependent cameras with birdseye for all cameras
|
||||
|
||||
This example shows events for *all* other cameras when `birdseye` is selected.
|
||||
This is just a shortcut for naming all other cameras.
|
||||
|
||||
```yaml
|
||||
type: custom:frigate-card
|
||||
cameras:
|
||||
- camera_entity: camera.kitchen
|
||||
- camera_entity: camera.sitting_room
|
||||
- frigate:
|
||||
camera_name: birdseye
|
||||
dependencies:
|
||||
all_cameras: true
|
||||
```
|
||||
|
||||
## Human interaction
|
||||
|
||||
This example will automatically use a HD live substream when
|
||||
the mouse cursor interacts with the card.
|
||||
|
||||
```yaml
|
||||
type: custom:frigate-card
|
||||
cameras:
|
||||
- camera_entity: camera.office
|
||||
live_provider: image
|
||||
dependencies:
|
||||
cameras:
|
||||
- camera.office_hd
|
||||
- camera_entity: camera.office_hd
|
||||
live_provider: go2rtc
|
||||
capabilities:
|
||||
disable_except:
|
||||
- substream
|
||||
automations:
|
||||
- actions:
|
||||
- action: custom:frigate-card-action
|
||||
frigate_card_action: live_substream_on
|
||||
actions_not:
|
||||
- action: custom:frigate-card-action
|
||||
frigate_card_action: live_substream_off
|
||||
conditions:
|
||||
- condition: interaction
|
||||
interaction: true
|
||||
```
|
||||
|
||||
## Media layout
|
||||
|
||||
These examples change how the media fits and is positioned within the card dimensions.
|
||||
|
||||
### Stretch a camera into a 4:4 square
|
||||
|
||||
```yaml
|
||||
type: custom:frigate-card
|
||||
cameras:
|
||||
- camera_entity: camera.landing
|
||||
dimensions:
|
||||
aspect_ratio: '4:4'
|
||||
layout:
|
||||
fit: fill
|
||||
```
|
||||
|
||||
### Convert a landscape camera to a portrait live view
|
||||
|
||||
Take the left-hand side (position with x == `0`) and use that as the basis of a `9:16` (i.e. portrait) live view.
|
||||
|
||||
```yaml
|
||||
type: custom:frigate-card
|
||||
cameras:
|
||||
- camera_entity: camera.office
|
||||
dimensions:
|
||||
aspect_ratio: '9:16'
|
||||
layout:
|
||||
fit: cover
|
||||
position:
|
||||
x: 0
|
||||
```
|
||||
|
||||
## Menu alignment
|
||||
|
||||
This example moves the fullscreen button into its own group aligned to the
|
||||
`left`, enables the `image` button and orders it furthest to the `right`.
|
||||
|
||||
```yaml
|
||||
type: custom:frigate-card
|
||||
cameras:
|
||||
- camera_entity: camera.office
|
||||
menu:
|
||||
alignment: right
|
||||
buttons:
|
||||
image:
|
||||
enabled: true
|
||||
priority: 100
|
||||
fullscreen:
|
||||
alignment: opposing
|
||||
```
|
||||
|
||||
## Menu icons
|
||||
|
||||
You can add custom icons to the menu with arbitrary actions. This example adds
|
||||
an icon that navigates the browser to the releases page for this card:
|
||||
|
||||
```yaml
|
||||
type: custom:frigate-card
|
||||
cameras:
|
||||
- camera_entity: camera.office
|
||||
elements:
|
||||
- type: custom:frigate-card-menu-icon
|
||||
icon: mdi:book
|
||||
tap_action:
|
||||
action: url
|
||||
url_path: https://github.com/dermotduffy/frigate-hass-card/releases
|
||||
```
|
||||
|
||||
## Menu state icons
|
||||
|
||||
You can add custom state icons to the menu to show the state of an entity and
|
||||
complete arbitrary actions. This example adds an icon that represents the state
|
||||
of the `light.office_main_lights` entity, that toggles the light on double
|
||||
click.
|
||||
|
||||
```yaml
|
||||
type: custom:frigate-card
|
||||
cameras:
|
||||
- camera_entity: camera.office
|
||||
elements:
|
||||
- type: custom:frigate-card-menu-state-icon
|
||||
entity: light.office_main_lights
|
||||
tap_action:
|
||||
action: toggle
|
||||
```
|
||||
|
||||
## Multiple actions
|
||||
|
||||
This example shows how to configure multiple actions for a single Frigate card user interaction, in this case both selecting a different camera and changing the view on `tap`. Note that multiple actions are not supported on stock Picture Elements, see [actions](configuration/actions.md) for more information.
|
||||
|
||||
```yaml
|
||||
type: custom:frigate-card
|
||||
cameras:
|
||||
- camera_entity: camera.office
|
||||
elements:
|
||||
- type: custom:frigate-card-menu-icon
|
||||
icon: mdi:chair-rolling
|
||||
tap_action:
|
||||
- action: custom:frigate-card-action
|
||||
frigate_card_action: camera_select
|
||||
camera: camera.office
|
||||
- action: custom:frigate-card-action
|
||||
frigate_card_action: live
|
||||
```
|
||||
|
||||
## Multiple providers
|
||||
|
||||
Cameras can be repeated with different providers (note the required use of `id`
|
||||
to provide a separate unambiguous way of referring to that camera, since the
|
||||
`camera_entity` is shared between the two cameras).
|
||||
|
||||
```yaml
|
||||
type: custom:frigate-card
|
||||
cameras:
|
||||
- camera_entity: camera.office
|
||||
live_provider: jsmpeg
|
||||
title: Office (JSMPEG)
|
||||
- camera_entity: camera.office
|
||||
live_provider: webrtc-card
|
||||
title: Office (WebRTC)
|
||||
id: office-webrtc
|
||||
```
|
||||
|
||||
## Overriding configuration
|
||||
|
||||
You can override card configuration when certain [conditions](configuration/conditions.md) are met.
|
||||
|
||||
### Change menu position based on HA state
|
||||
|
||||
```yaml
|
||||
type: custom:frigate-card
|
||||
cameras:
|
||||
- camera_entity: camera.office
|
||||
overrides:
|
||||
- conditions:
|
||||
- condition: state
|
||||
entity: light.office_main_lights
|
||||
state: 'on'
|
||||
overrides:
|
||||
menu:
|
||||
position: bottom
|
||||
```
|
||||
|
||||
### Change default view based on HA state
|
||||
|
||||
This example changes the default card view from `live` to `image` depending on
|
||||
the value of the `binary_sensor.alarm_armed` sensor. The override alone will
|
||||
only change the _default_ when the card next is requested to change to the
|
||||
default view. By also including the `update_entities` parameter, we ask the card
|
||||
to trigger a card update based on that entity -- which causes it to use the new
|
||||
overriden default immediately.
|
||||
|
||||
```yaml
|
||||
type: custom:frigate-card
|
||||
cameras:
|
||||
- camera_entity: camera.office
|
||||
view:
|
||||
default: live
|
||||
update_entities:
|
||||
- binary_sensor.alarm_armed
|
||||
overrides:
|
||||
- conditions:
|
||||
- condition: state
|
||||
entity: binary_sensor.alarm_armed
|
||||
state: 'off'
|
||||
overrides:
|
||||
view:
|
||||
default: image
|
||||
```
|
||||
|
||||
### Change grid behavior in full screen
|
||||
|
||||
This example will always render 5 columns in fullscreen mode in both the live
|
||||
and media viewer views, and will not enlarge the selected item. The [normal auto-layout behavior](configuration/grid-layout-algorithm.md) will be used outside of fullscreen mode.
|
||||
|
||||
```yaml
|
||||
type: custom:frigate-card
|
||||
cameras:
|
||||
- camera_entity: camera.office
|
||||
overrides:
|
||||
- conditions:
|
||||
- condition: fullscreen
|
||||
fullscreen: true
|
||||
- condition: display_mode
|
||||
display_mode: grid
|
||||
overrides:
|
||||
live:
|
||||
display:
|
||||
grid_columns: 5
|
||||
grid_selected_width_factor: 1
|
||||
media_viewer:
|
||||
display:
|
||||
grid_columns: 5
|
||||
grid_selected_width_factor: 1
|
||||
```
|
||||
|
||||
### Change menu style when expanded
|
||||
|
||||
This example changes the menu style to `overlay` in expanded mode in order to
|
||||
take advantage of the extra horizontal space of the dialog/popup.
|
||||
|
||||
```yaml
|
||||
type: custom:frigate-card
|
||||
cameras:
|
||||
- camera_entity: camera.office
|
||||
menu:
|
||||
style: hidden
|
||||
overrides:
|
||||
- conditions:
|
||||
- condition: expand
|
||||
expand: true
|
||||
overrides:
|
||||
menu:
|
||||
style: overlay
|
||||
```
|
||||
|
||||
### Hide menu in fullscreen
|
||||
|
||||
This example disables the menu unless the card is in fullscreen mode, and uses a
|
||||
card-wide action to enable fullscreen mode on `double_tap`.
|
||||
|
||||
```yaml
|
||||
type: custom:frigate-card
|
||||
cameras:
|
||||
- camera_entity: camera.office
|
||||
view:
|
||||
actions:
|
||||
double_tap_action:
|
||||
action: custom:frigate-card-action
|
||||
frigate_card_action: fullscreen
|
||||
overrides:
|
||||
- conditions:
|
||||
- condition: fullscreen
|
||||
fullscreen: true
|
||||
overrides:
|
||||
menu:
|
||||
style: none
|
||||
```
|
||||
|
||||
## PTZ control
|
||||
|
||||
The card supports using PTZ controls to conveniently control pan, tilt and zoom for cameras. This example shows the PTZ controls on the `live` view. Note that if your camera engine supports it (e.g. `frigate`) this will just work out of the box with no configuration at all.
|
||||
|
||||
```yaml
|
||||
type: custom:frigate-card
|
||||
cameras:
|
||||
- camera_entity: camera.office
|
||||
live:
|
||||
ptz:
|
||||
orientation: horizontal
|
||||
service: sonoff.send_command
|
||||
data_left:
|
||||
device: '048123'
|
||||
cmd: left
|
||||
data_right:
|
||||
device: '048123'
|
||||
cmd: right
|
||||
data_up:
|
||||
device: '048123'
|
||||
cmd: up
|
||||
data_down:
|
||||
device: '048123'
|
||||
cmd: down
|
||||
```
|
||||
|
||||
## `screen` conditions
|
||||
|
||||
These examples show altering the card configuration based on device or viewport properties.
|
||||
|
||||
### Change menu position when orientation changes
|
||||
|
||||
```yaml
|
||||
type: custom:frigate-card
|
||||
cameras:
|
||||
- camera_entity: camera.office
|
||||
- camera_entity: camera.kitchen
|
||||
menu:
|
||||
style: overlay
|
||||
overrides:
|
||||
- conditions:
|
||||
- condition: screen
|
||||
media_query: '(orientation: landscape)'
|
||||
overrides:
|
||||
menu:
|
||||
position: left
|
||||
```
|
||||
|
||||
### Hide menu & controls when viewport width <= 300 (e.g. PIP mode)
|
||||
|
||||
```yaml
|
||||
type: custom:frigate-card
|
||||
cameras:
|
||||
- camera_entity: camera.office
|
||||
- camera_entity: camera.kitchen
|
||||
overrides:
|
||||
- conditions:
|
||||
- condition: screen
|
||||
media_query: '(max-width: 300px)'
|
||||
overrides:
|
||||
menu:
|
||||
style: none
|
||||
live:
|
||||
controls:
|
||||
next_previous:
|
||||
style: none
|
||||
thumbnails:
|
||||
mode: none
|
||||
```
|
||||
|
||||
## State Badges
|
||||
|
||||
You can add a state badge to the card showing arbitrary entity states. This
|
||||
example adds a state badge showing the temperature and hides the label text:
|
||||
|
||||
```yaml
|
||||
type: custom:frigate-card
|
||||
cameras:
|
||||
- camera_entity: camera.office
|
||||
elements:
|
||||
- type: state-badge
|
||||
entity: sensor.office_temperature
|
||||
style:
|
||||
right: '-20px'
|
||||
top: 100px
|
||||
color: rgba(0,0,0,0)
|
||||
opacity: 0.5
|
||||
```
|
||||
|
||||
|
||||
|
||||
## Static images
|
||||
|
||||
This example fetches a static image every 10 seconds (in this case the latest image saved on the Frigate server for a given camera).
|
||||
|
||||
```yaml
|
||||
type: custom:frigate-card
|
||||
cameras:
|
||||
- camera_entity: camera.office
|
||||
view:
|
||||
default: image
|
||||
image:
|
||||
src: https://my-friage-server/api/living_room/latest.jpg
|
||||
refresh_seconds: 10
|
||||
```
|
||||
|
||||
## Submenus
|
||||
|
||||
You can add submenus to the menu -- buttons that when pressed reveal a dropdown submenu of configurable options.
|
||||
|
||||
### Basic submenu
|
||||
|
||||
```yaml
|
||||
type: custom:frigate-card
|
||||
cameras:
|
||||
- camera_entity: camera.office
|
||||
elements:
|
||||
- type: custom:frigate-card-menu-submenu
|
||||
icon: mdi:menu
|
||||
items:
|
||||
- title: Lights
|
||||
icon: mdi:lightbulb
|
||||
entity: light.office_main_lights
|
||||
tap_action:
|
||||
action: toggle
|
||||
- title: Google
|
||||
icon: mdi:google
|
||||
tap_action:
|
||||
action: url
|
||||
url_path: https://www.google.com
|
||||
- title: Fullscreen
|
||||
icon: mdi:fullscreen
|
||||
tap_action:
|
||||
action: custom:frigate-card-action
|
||||
frigate_card_action: fullscreen
|
||||
```
|
||||
|
||||
### Conditional submenu
|
||||
|
||||
This example shows submenus conditional on the camera selected.
|
||||
|
||||
```yaml
|
||||
type: custom:frigate-card
|
||||
cameras:
|
||||
- camera_entity: camera.office
|
||||
elements:
|
||||
- type: custom:frigate-card-conditional
|
||||
conditions:
|
||||
- condition: camera
|
||||
cameras:
|
||||
- camera.office
|
||||
elements:
|
||||
- type: custom:frigate-card-menu-submenu
|
||||
icon: mdi:door
|
||||
items:
|
||||
- title: Office Lights
|
||||
icon: mdi:lightbulb
|
||||
entity: light.office_main_lights
|
||||
tap_action:
|
||||
action: toggle
|
||||
- type: custom:frigate-card-conditional
|
||||
conditions:
|
||||
- condition: camera
|
||||
cameras:
|
||||
- camera.kitchen
|
||||
elements:
|
||||
- type: custom:frigate-card-menu-submenu
|
||||
icon: mdi:sofa
|
||||
items:
|
||||
- title: Kitchen Lights
|
||||
icon: mdi:lightbulb
|
||||
entity: light.kitchen_lights
|
||||
tap_action:
|
||||
action: toggle
|
||||
- title: Kitchen Lamp
|
||||
icon: mdi:lightbulb
|
||||
entity: light.kitchen_lamp
|
||||
tap_action:
|
||||
action: toggle
|
||||
```
|
||||
|
||||
### `select` submenu
|
||||
|
||||
You can easily add a submenu to the menu based on a `select` or `input_select` entity. This example imagines the user has an `input_select` entity configured in their Home Assistant configuration like so:
|
||||
|
||||
```yaml
|
||||
input_select:
|
||||
office_scene:
|
||||
name: Office Scene Select
|
||||
options:
|
||||
- scene.office_quiet_scene
|
||||
- scene.office_party_scene
|
||||
icon: mdi:lightbulb
|
||||
```
|
||||
|
||||
The following will convert this entity into a submenu:
|
||||
|
||||
```yaml
|
||||
type: custom:frigate-card
|
||||
cameras:
|
||||
- camera_entity: camera.office
|
||||
elements:
|
||||
- type: custom:frigate-card-menu-submenu-select
|
||||
entity: input_select.office_scene
|
||||
```
|
||||
|
||||
To override 1 or more individual options (e.g. to set custom icons and titles)
|
||||
|
||||
```yaml
|
||||
type: custom:frigate-card
|
||||
cameras:
|
||||
- camera_entity: camera.office
|
||||
elements:
|
||||
- type: custom:frigate-card-menu-submenu-select
|
||||
icon: mdi:lamps
|
||||
entity: input_select.office_scene
|
||||
options:
|
||||
scene.office_quiet_scene:
|
||||
icon: mdi:volume-off
|
||||
title: Ssssssh
|
||||
scene.office_party_scene:
|
||||
icon: mdi:party-popper
|
||||
title: Party!
|
||||
```
|
||||
|
||||
## Substreams
|
||||
|
||||
The card supports configuring 'substreams' (alternative live views) a given
|
||||
camera through the use of [camera dependencies](configuration/cameras/README.md?id=dependencies).
|
||||
|
||||
This example shows two substreams for a single live camera, and uses the 'HD' icon.
|
||||
|
||||
```yaml
|
||||
type: custom:frigate-card
|
||||
cameras:
|
||||
- camera_entity: camera.office
|
||||
live_provider: image
|
||||
dependencies:
|
||||
cameras:
|
||||
- office_hd
|
||||
- camera_entity: camera.office
|
||||
title: Office HD
|
||||
live_provider: go2rtc
|
||||
id: office_hd
|
||||
# This camera serves only as a substream.
|
||||
capabilities:
|
||||
disable_except:
|
||||
- substream
|
||||
menu:
|
||||
buttons:
|
||||
substreams:
|
||||
icon: mdi:high-definition
|
||||
```
|
||||
|
||||
## Trigger actions
|
||||
|
||||
You can control the card itself with the `custom:frigate-card-action` action.
|
||||
This example shows an icon that toggles the card fullscreen mode.
|
||||
|
||||
```yaml
|
||||
type: custom:frigate-card
|
||||
cameras:
|
||||
- camera_entity: camera.office
|
||||
elements:
|
||||
- type: icon
|
||||
icon: mdi:fullscreen
|
||||
style:
|
||||
left: 40px
|
||||
top: 40px
|
||||
tap_action:
|
||||
action: custom:frigate-card-action
|
||||
frigate_card_action: fullscreen
|
||||
```
|
||||
|
||||
## Trigger fullscreen
|
||||
|
||||
The card cannot automatically natively trigger fullscreen mode without the user
|
||||
clicking, since Javascript (understandbly) prevents random websites from
|
||||
triggering fullscreen mode without the user having activated it.
|
||||
|
||||
This example uses
|
||||
[hass-browser_mod](https://github.com/thomasloven/hass-browser_mod) with an
|
||||
automation to trigger a popup. Thanks to
|
||||
[conorlap@](https://github.com/conorlap) for the following example:
|
||||
|
||||
```yaml
|
||||
alias: >-
|
||||
Doorbell Pressed OR Human Detected - Firefox browser full screen video feed
|
||||
for 15 seconds
|
||||
description: ""
|
||||
trigger:
|
||||
- platform: state
|
||||
from: "off"
|
||||
to: "on"
|
||||
entity_id:
|
||||
- binary_sensor.frontdoor_person_occupancy
|
||||
- platform: state
|
||||
entity_id:
|
||||
- binary_sensor.front_door_dahua_button_pressed
|
||||
to: "on"
|
||||
condition: []
|
||||
action:
|
||||
- service: browser_mod.popup
|
||||
data:
|
||||
size: wide
|
||||
timeout: 15000
|
||||
content:
|
||||
type: custom:frigate-card
|
||||
aspect_ratio: 55%
|
||||
cameras:
|
||||
- camera_entity: camera.frontdoor
|
||||
live_provider: ha
|
||||
menu:
|
||||
style: none
|
||||
live:
|
||||
controls:
|
||||
title:
|
||||
mode: none
|
||||
target:
|
||||
device_id:
|
||||
- d0e93101edfg44y3yt35y5y45y54y
|
||||
mode: single
|
||||
```
|
||||
|
||||
## Trigger `live`
|
||||
|
||||
This example will change to `live` when a camera is triggered, using different
|
||||
trigger conditions per camera. It will change back to the `default` view when
|
||||
untriggered.
|
||||
|
||||
```yaml
|
||||
type: custom:frigate-card
|
||||
cameras:
|
||||
# This is a Frigate camera which will automatically
|
||||
# be triggered when events occur.
|
||||
- camera_entity: camera.office
|
||||
# This is a Frigate camera which will only be triggered
|
||||
# by motion entity changes or a door being opened.
|
||||
- camera_entity: camera.kitchen
|
||||
triggers:
|
||||
occupancy: false
|
||||
motion: true
|
||||
entities:
|
||||
- binary_sensor.kitchen_door_opened
|
||||
events: []
|
||||
view:
|
||||
triggers:
|
||||
show_trigger_status: true
|
||||
filter_selected_camera: false
|
||||
actions:
|
||||
trigger: live
|
||||
untrigger: default
|
||||
```
|
||||
|
||||
## Video control from menu
|
||||
|
||||
Disable the stock video controls and add menu button equivalents.
|
||||
|
||||
```yaml
|
||||
type: custom:frigate-card
|
||||
cameras:
|
||||
- camera_entity: camera.office
|
||||
live:
|
||||
controls:
|
||||
builtin: false
|
||||
media_viewer:
|
||||
controls:
|
||||
builtin: false
|
||||
menu:
|
||||
buttons:
|
||||
play:
|
||||
enabled: true
|
||||
mute:
|
||||
enabled: true
|
||||
```
|
||||
|
||||
## URL actions
|
||||
|
||||
The card can respond to actions in the query string. See [URL Actions](usage/url-actions.md).
|
||||
|
||||
?> These examples assume the dashboard URL is `https://ha.mydomain.org/lovelace-test/0` .
|
||||
|
||||
### Choosing `clips` view on a named card
|
||||
|
||||
This example assumes that one card (of potentially multiple Frigate Cards on the dashboard) is configured with a `card_id` parameter:
|
||||
|
||||
```yaml
|
||||
type: custom:frigate-card
|
||||
cameras:
|
||||
- camera_entity: camera.office
|
||||
card_id: main
|
||||
```
|
||||
|
||||
```
|
||||
https://ha.mydomain.org/lovelace-test/0?frigate-card-action.main.clips
|
||||
|
||||
```
|
||||
|
||||
### 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.office
|
||||
- camera_entity: camera.kitchen
|
||||
```
|
||||
|
||||
Picture Elements configuration:
|
||||
|
||||
```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-test/0?frigate-card-action.camera_select=camera.office
|
||||
- type: icon
|
||||
icon: mdi:cctv
|
||||
style:
|
||||
top: 71%
|
||||
left: 42%
|
||||
tap_action:
|
||||
action: navigate
|
||||
navigation_path: /lovelace-test/0?frigate-card-action.camera_select=camera.kitchen
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
### Selecting a camera in expanded mode via query string
|
||||
|
||||
```
|
||||
https://ha.mydomain.org/lovelace-test/0?frigate-card-action.camera_select=kitchen&frigate-card-action.expand
|
||||
```
|
||||
|
||||
## WebRTC Card configuration
|
||||
|
||||
```yaml
|
||||
type: custom:frigate-card
|
||||
cameras:
|
||||
- camera_entity: camera.office
|
||||
live_provider: webrtc-card
|
||||
webrtc_card:
|
||||
ui: true
|
||||
```
|
||||
Reference in New Issue
Block a user