flan/advanced-camera-card
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial version of status bar.

Browse Source
This commit is contained in:
Dermot Duffy
2024-08-16 20:08:21 -07:00
parent db9303c60d
commit e503f0e429
77 changed files with 3072 additions and 1061 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/configuration/README.md
+1 -1
View File
@@ -23,7 +23,7 @@ Only the `cameras` option is required, all other parameters are optional.
| [`cameras_global`](cameras/README.md) | Global defaults that apply to all cameras from the `cameras` section. |
| `card_id` | An optional ID to uniquely identify this card. For use when actions are being sent to card(s) via [URL actions](../usage/url-actions.md). Must exclusively consist of these characters: `[a-zA-Z0-9_]`. |
| [`dimensions`](dimensions.md) | Configures the overall card dimensions. |
| [`elements`](elements.md) | Add custom elements to the card. |
| [`elements`](elements/README.md) | Add custom elements to the card. |
| [`image`](image.md) | Configures the `image` view. |
| [`live`](live.md) | Configures the `live` view. |
| [`media_gallery`](media-gallery.md) | Configures the media gallery. |
docs/configuration/_sidebar.md
+2 -1
View File
@@ -5,7 +5,7 @@
- [`cameras`](cameras/README.md)
- [`conditions`](conditions.md)
- [`dimensions`](dimensions.md)
- [`elements`](elements.md)
- [`elements`](elements/README.md)
- [`image`](image.md)
- [`live`](live.md)
- [`media_gallery`](media-gallery.md)
@@ -14,6 +14,7 @@
- [`overrides`](overrides.md)
- [`performance`](performance.md)
- [`profiles`](profiles.md)
- [`status_bar`](status-bar.md)
- [`timeline`](timeline.md)
- [`view`](view.md)
- [Examples](../examples.md)
docs/configuration/actions/README.md
+1 -1
View File
@@ -7,7 +7,7 @@ multiple other blocks.
Actions are pre-configured activities that can be triggered in response to a
variety of circumstances (e.g. tapping on a menu icon, double tapping on an
[element](../elements.md) or holding the mouse/tap down on a particular
[element](../elements/README.md) or holding the mouse/tap down on a particular
[view](../view.md?id=supported-views)).
### Differences in actions between Frigate Card and Home Assistant
docs/configuration/actions/_sidebar.md
+3 -1
View File
@@ -7,7 +7,7 @@
- [`cameras`](../cameras/README.md)
- [`conditions`](../conditions.md)
- [`dimensions`](../dimensions.md)
- [`elements`](../elements.md)
- [`elements`](../elements/README.md)
- [`image`](../image.md)
- [`live`](../live.md)
- [`media_gallery`](../media-gallery.md)
@@ -16,8 +16,10 @@
- [`overrides`](../overrides.md)
- [`performance`](../performance.md)
- [`profiles`](../profiles.md)
- [`status_bar`](../status-bar.md)
- [`timeline`](../timeline.md)
- [`view`](../view.md)
- [Examples](../../examples.md)
- [Screenshots](../../screenshots.md)
- [Troubleshooting](../../troubleshooting.md)
- [Usage](../../usage/README.md)
docs/configuration/actions/custom/README.md
+78 -3
View File
@@ -450,15 +450,25 @@ action: custom:frigate-card-action
frigate_card_action: snapshot
```
## `snapshots`
## `status_bar`
Change to the `snapshots` view.
Add or remove items from the status bar.
```yaml
action: custom:frigate-card-action
frigate_card_action: snapshots
frigate_card_action: status_bar
# [...]
```
| Parameter | Default | Description |
| ------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `status_bar_action` | | If `add` adds `items` to the status bar, if `remove` removes items and if `reset` resets the status bar entirely (removes all dynamically added items). |
| `items` | | The items to `add` or `remove`. See below. |
### `items`
The items parameter is a list of items to `add` or `remove`. See [`custom:frigate-card-status-bar-icon`](../../elements/custom/README.md?id=status-bar-icon), [`custom:frigate-card-status-bar-image`](../../elements/custom/README.md?id=status-bar-image), [`custom:frigate-card-status-bar-string`](../../elements/custom/README.md?id=status-bar-string) for the allowable items and their parameters. See the [fully expanded reference](./README.md?fully-expanded-reference) below for a complete example.
## `timeline`
Change to the `timeline` view.
@@ -732,4 +742,69 @@ elements:
tap_action:
action: custom:frigate-card-action
frigate_card_action: unmute
- type: custom:frigate-card-menu-icon
icon: mdi:alpha-h-circle-outline
title: Add status bar contents
tap_action:
- action: custom:frigate-card-action
frigate_card_action: status_bar
status_bar_action: add
items:
- type: custom:frigate-card-status-bar-string
enabled: true
exclusive: false
expand: false
string: 'Intruder alert!'
priority: 50
sufficient: false
- type: custom:frigate-card-status-bar-icon
enabled: true
exclusive: false
expand: false
icon: 'mdi:cow'
priority: 50
sufficient: false
- type: custom:frigate-card-status-bar-image
enabled: true
exclusive: false
expand: false
image: https://my.site.com/status.png
priority: 50
sufficient: false
- type: custom:frigate-card-menu-icon
icon: mdi:alpha-i-circle-outline
title: Remove status bar contents
tap_action:
- action: custom:frigate-card-action
frigate_card_action: status_bar
status_bar_action: remove
items:
- type: custom:frigate-card-status-bar-string
enabled: true
exclusive: false
expand: false
string: 'Intruder alert!'
priority: 50
sufficient: false
- type: custom:frigate-card-status-bar-icon
enabled: true
exclusive: false
expand: false
icon: 'mdi:cow'
priority: 50
sufficient: false
- type: custom:frigate-card-status-bar-image
enabled: true
exclusive: false
expand: false
image: https://my.site.com/status.png
priority: 50
sufficient: false
- type: custom:frigate-card-menu-icon
icon: mdi:alpha-i-circle-outline
title: Reset status bar contents
tap_action:
- action: custom:frigate-card-action
frigate_card_action: status_bar
status_bar_action: reset
```
docs/configuration/actions/custom/_sidebar.md
+3 -1
View File
@@ -7,7 +7,7 @@
- [`cameras`](../../cameras/README.md)
- [`conditions`](../../conditions.md)
- [`dimensions`](../../dimensions.md)
- [`elements`](../../elements.md)
- [`elements`](../../elements/README.md)
- [`image`](../../image.md)
- [`live`](../../live.md)
- [`media_gallery`](../../media-gallery.md)
@@ -16,8 +16,10 @@
- [`overrides`](../../overrides.md)
- [`performance`](../../performance.md)
- [`profiles`](../../profiles.md)
- [`status_bar`](../../status-bar.md)
- [`timeline`](../../timeline.md)
- [`view`](../../view.md)
- [Examples](../../../examples.md)
- [Screenshots](../../../screenshots.md)
- [Troubleshooting](../../../troubleshooting.md)
- [Usage](../../../usage/README.md)
docs/configuration/actions/stock/_sidebar.md
+3 -1
View File
@@ -7,7 +7,7 @@
- [`cameras`](../../cameras/README.md)
- [`conditions`](../../conditions.md)
- [`dimensions`](../../dimensions.md)
- [`elements`](../../elements.md)
- [`elements`](../../elements/README.md)
- [`image`](../../image.md)
- [`live`](../../live.md)
- [`media_gallery`](../../media-gallery.md)
@@ -16,8 +16,10 @@
- [`overrides`](../../overrides.md)
- [`performance`](../../performance.md)
- [`profiles`](../../profiles.md)
- [`status_bar`](../../status-bar.md)
- [`timeline`](../../timeline.md)
- [`view`](../../view.md)
- [Examples](../../../examples.md)
- [Screenshots](../../../screenshots.md)
- [Troubleshooting](../../../troubleshooting.md)
- [Usage](../../../usage/README.md)
docs/configuration/cameras/_sidebar.md
+3 -1
View File
@@ -7,7 +7,7 @@
- [`engine`](engine.md)
- [`conditions`](../conditions.md)
- [`dimensions`](../dimensions.md)
- [`elements`](../elements.md)
- [`elements`](../elements/README.md)
- [`image`](../image.md)
- [`live`](../live.md)
- [`media_gallery`](../media-gallery.md)
@@ -16,8 +16,10 @@
- [`overrides`](../overrides.md)
- [`performance`](../performance.md)
- [`profiles`](../profiles.md)
- [`status_bar`](../status-bar.md)
- [`timeline`](../timeline.md)
- [`view`](../view.md)
- [Examples](../../examples.md)
- [Screenshots](../../screenshots.md)
- [Troubleshooting](../../troubleshooting.md)
- [Usage](../../usage/README.md)
docs/configuration/elements.md
-356
View File
@@ -1,356 +0,0 @@
# `elements`
This card supports the [Picture Elements configuration
syntax](https://www.home-assistant.io/lovelace/picture-elements/) to seamlessly
allow the user to add custom elements to the card.
```yaml
elements:
- [element_1]
- [element_2]
```
?> The Frigate Card allows either a single [action](actions/README.md) (as in stock Home
Assistant) or list of [actions](actions/README.md) to be defined for each class of user interaction
(e.g. `tap`, `double_tap`, `hold`, etc). See [an example of multiple actions](../examples.md?id=multiple-actions).
## `conditional`
This element will let you show its sub-elements based on entity states. See [Home Assistant elements documentation](https://www.home-assistant.io/dashboards/picture-elements/#conditional-element).
```yaml
elements:
- type: conditional
# [...]
```
## `custom`
Custom elements provided by a card. See [Home Assistant elements documentation](https://www.home-assistant.io/dashboards/picture-elements/#custom-elements).
```yaml
elements:
- type: custom
# [...]
```
## `custom:frigate-card-menu-icon`
Add an arbitrary icon to the Frigate Card menu. Configuration is ~identical to that of the [Picture Elements Icon](https://www.home-assistant.io/lovelace/picture-elements/#icon-element) except with a type name of `custom:frigate-card-menu-icon`.
```yaml
elements:
- type: custom:frigate-card-menu-icon
# [...]
```
## `custom:frigate-card-menu-state-icon`
Add a state icon to the Frigate Card menu that represents the state of a Home Assistant entity. Configuration is ~identical to that of the [Picture Elements State Icon](https://www.home-assistant.io/lovelace/picture-elements/#state-icon) except with a type name of `custom:frigate-card-menu-state-icon`.
```yaml
elements:
- type: custom:frigate-card-menu-icon
# [...]
```
## `custom:frigate-card-menu-submenu`
Add a configurable submenu dropdown.
```yaml
elements:
- type: custom:frigate-card-menu-submenu
# [...]
```
Parameters for this element are identical to the parameters of the [stock Home Assistant Icon Element](https://www.home-assistant.io/lovelace/picture-elements/#icon-element) with the exception of these parameters which differ:
| Parameter | Description |
| --------- | ------------------------------------------- |
| `type` | Must be `custom:frigate-card-menu-submenu`. |
| `items` | A list of menu items, as described below. |
### Submenu items
| Parameter | Default | Description |
| ------------------------------------------------------------------------ | ------- | ------------------------------------------------------------------------------------------------- |
| `enabled` | `true` | Whether or not to show this item as enabled / selectable. |
| `entity` | | An optional Home Assistant entity from which title, icon and style can be automatically computed. |
| `icon` | | An optional item icon to display, e.g. `mdi:car` |
| `selected` | `false` | Whether or not to show this item as selected. |
| `state_color` | `true` | Whether or not the title and icon should be stylized based on state. |
| `style` | | Position and style the element using CSS. |
| `tap_action`, `double_tap_action`, `hold_action`, `start_tap`, `end_tap` | | The [actions](actions/README.md) to take when this item is interacted with. |
| `title` | | An optional title to display. |
## `custom:frigate-card-menu-submenu-select`
Add a submenu based on a `select` or `input_select`. This element allows you to convert a [Home Assistant Select Entity](https://www.home-assistant.io/integrations/select/) or [Home Assistant Input Select Entity](https://www.home-assistant.io/integrations/input_select/) (an entity either starting with `select` or `input_select`) into an overridable submenu. This _could_ be done by hand using a regular submenu (above) -- this element is a convenience.
```yaml
elements:
- type: custom:frigate-card-menu-submenu-select
# [...]
```
Parameters for the `custom:frigate-card-menu-submenu-select` element are identical to the parameters of the [stock Home Assistant State Icon Element](https://www.home-assistant.io/dashboards/picture-elements/#state-icon) with the exception of these parameters which differ:
| Parameter | Description |
| --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `type` | Must be `custom:frigate-card-menu-submenu-select`. |
| `options` | An optional dictionary of overrides keyed by the option name that the given select entity supports. These options can be used to set or override submenu item parameters on a per-option basis. The format is as described in [Submenu Items](elements.md?id=submenu-items) above. |
See the `select` [submenu example](../examples.md?id=select-submenu).
## `custom:frigate-card-conditional`
Restrict a set of elements to only render when the card is matches a set of [conditions](conditions.md). This is analogous to [`conditional`](elements.md?id=conditional) element above, except supporting a rich set of Frigate Card [conditions](conditions.md).
```yaml
elements:
- type: custom:frigate-card-conditional
# [...]
```
Parameters for the `custom:frigate-card-conditional` element:
| Parameter | Description |
| ------------ | ---------------------------------------------------------------------------------------------------------- |
| `type` | Must be `custom:frigate-card-conditional`. |
| `conditions` | A list of [conditions](conditions.md) that must evaluate to true in order for the elements to be rendered. |
| `elements` | The elements to render. Can be any supported element. |
See the [conditional elements example](../examples.md?id=conditional-elements).
## `icon`
This element creates a static icon that is not linked to the state of an entity. See [Home Assistant elements documentation](https://www.home-assistant.io/dashboards/picture-elements/#icon-element).
```yaml
elements:
- type: icon
# [...]
```
## `image`
This creates an image element that overlays the background image. See [Home Assistant elements documentation](https://www.home-assistant.io/dashboards/picture-elements/#image-element).
```yaml
elements:
- type: image
# [...]
```
## `service-button`
This entity creates a button (with arbitrary text) that can be used to call a service. See [Home Assistant elements documentation](https://www.home-assistant.io/dashboards/picture-elements/#service-call-button).
```yaml
elements:
- type: service-button
# [...]
```
## `state-badge`
This element creates a badge representing the state of an entity. See [Home Assistant elements documentation](https://www.home-assistant.io/dashboards/picture-elements/#state-badge).
```yaml
elements:
- type: state-badge
# [...]
```
## `state-icon`
This element represents an entity state using an icon. See [Home Assistant elements documentation](https://www.home-assistant.io/dashboards/picture-elements/#state-icon).
```yaml
elements:
- type: state-icon
# [...]
```
## `state-label`
This element represents an entity’s state via text. See [Home Assistant elements documentation](https://www.home-assistant.io/dashboards/picture-elements/#state-label).
```yaml
elements:
- type: state-label
# [...]
```
## Fully expanded reference
> [Actions](actions/README.md) are omitted for simplicity.
[](common/expanded-warning.md ':include')
### Stock Home Assistant elements
Reference: [Home Assistant Picture Elements](https://www.home-assistant.io/dashboards/picture-elements/)
```yaml
elements:
- type: state-badge
entity: sensor.kitchen_dining_multisensor_air_temperature
style:
left: 100px
top: 50px
title: 'Temperature'
- type: state-icon
entity: light.office_main_lights
icon: mdi:lamp
state_color: true
style:
left: 100px
top: 100px
- type: state-label
entity: sensor.kitchen_motion_sensor_battery
attribute: battery_voltage
prefix: Volts
title: Battery Voltage
style:
left: 100px
top: 150px
- type: state-label
entity: sensor.kitchen_motion_sensor_battery
attribute: battery_voltage
prefix: 'Volts: '
title: Battery Voltage
style:
background-color: black
left: 100px
top: 200px
- type: service-button
title: Light on
service: homeassistant.turn_on
service_data:
entity: light.office_main_lights
style:
left: 100px
top: 250px
- type: icon
icon: mdi:cow
title: Moo
style:
left: 100px
top: 300px
- type: image
entity: light.office_main_lights
title: Image
state_image:
on: 'https://picsum.photos/id/1003/1181/1772'
off: 'https://picsum.photos/id/102/4320/3240'
state_filter:
'on': brightness(110%) saturate(1.2)
'off': brightness(50%) hue-rotate(45deg)
style:
left: 100px
top: 350px
height: 50px
width: 100px
- type: conditional
conditions:
- condition: state
entity: light.office_main_lights
state: on
state_not: off
- condition: numeric_state
entity: sensor.light_level
above: 20
below: 100
- condition: user
users:
- 581fca7fdc014b8b894519cc531f9a04
elements:
- type: icon
icon: mdi:dog
title: Woof
style:
left: 100px
top: 400px
```
### Frigate Card elements
```yaml
elements:
- type: custom:frigate-card-menu-icon
icon: mdi:car
title: Vroom
- type: custom:frigate-card-menu-state-icon
entity: light.office_main_lights
title: Office lights
icon: mdi:chair-rolling
state_color: true
- 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
enabled: false
tap_action:
action: url
url_path: https://www.google.com
- type: custom:frigate-card-menu-submenu-select
icon: mdi:lamps
entity: input_select.kitchen_scene
options:
scene.kitchen_cooking_scene:
icon: mdi:chef-hat
title: Cooking time!
scene.kitchen_tv_scene:
icon: mdi:television
title: TV!
# Show a pig icon if a variety of conditions are met.
- type: custom:frigate-card-conditional
elements:
- type: icon
icon: mdi:pig
title: Oink
style:
left: 300px
top: 100px
conditions:
- condition: view
views:
- live
- condition: fullscreen
fullscreen: true
- condition: expand
expand: true
- condition: camera
cameras: camera.front_door
- condition: media_loaded
media_loaded: true
- condition: display_mode
display_mode: single
- condition: triggered
triggered:
- camera.front_door
- condition: interaction
interaction: true
- condition: microphone
muted: true
connected: true
- condition: state
entity: light.office_main_lights
state: on
state_not: off
- condition: numeric_state
entity: sensor.light_level
above: 20
below: 100
- condition: user
users:
- 581fca7fdc014b8b894519cc531f9a04
```
docs/configuration/elements/README.md
+24
View File
@@ -0,0 +1,24 @@
# `elements`
## Introduction to elements <!-- {docsify-ignore} -->
This card supports the [Picture Elements configuration
syntax](https://www.home-assistant.io/lovelace/picture-elements/) to seamlessly
allow the user to add custom elements to the card.
```yaml
elements:
- [element_1]
- [element_2]
```
?> The Frigate Card allows either a single [action](../actions/README.md) (as in stock Home
Assistant) or list of [actions](../actions/README.md) to be defined for each class of user interaction
(e.g. `tap`, `double_tap`, `hold`, etc). See [an example of multiple actions](../../examples.md?id=multiple-actions).
## Elements <!-- {docsify-ignore} -->
| Option | Description |
| ------------------------------------- | --------------------------------- |
| [Custom Elements](./custom/README.md) | Custom elements. |
| [Stock Elements](./stock/README.md) | Standard Home Assistant elements. |
docs/configuration/elements/_sidebar.md
+29
View File
@@ -0,0 +1,29 @@
- [Getting Started](../../README.md)
- [Configuration](../README.md)
- [`actions`](../actions/README.md)
- [`automations`](../automations.md)
- [`cameras`](../cameras/README.md)
- [`conditions`](../conditions.md)
- [`dimensions`](../dimensions.md)
- [`elements`](README.md)
- [Custom Elements](./custom/README.md)
- [Stock Elements](./stock/README.md)
- [`image`](../image.md)
- [`live`](../live.md)
- [`media_gallery`](../media-gallery.md)
- [`media_viewer`](../media-viewer.md)
- [`menu`](../menu.md)
- [`overrides`](../overrides.md)
- [`performance`](../performance.md)
- [`profiles`](../profiles.md)
- [`status_bar`](../status-bar.md)
- [`timeline`](../timeline.md)
- [`view`](../view.md)
- [Examples](../../examples.md)
- [Screenshots](../../screenshots.md)
- [Troubleshooting](../../troubleshooting.md)
- [Usage](../../usage/README.md)
---
- [Developing](../../developing.md)
docs/configuration/elements/custom/README.md
+258
View File
@@ -0,0 +1,258 @@
# Custom Elements
## `conditional`
Restrict a set of elements to only render when the card is matches a set of [conditions](../../conditions.md). This is analogous to the stock [`conditional`](../stock/README.md?id=conditional) element except supporting a rich set of Frigate Card [conditions](../../conditions.md).
```yaml
elements:
- type: custom:frigate-card-conditional
# [...]
```
Parameters for the `custom:frigate-card-conditional` element:
| Parameter | Description |
| ------------ | ---------------------------------------------------------------------------------------------------------------- |
| `type` | Must be `custom:frigate-card-conditional`. |
| `conditions` | A list of [conditions](../../conditions.md) that must evaluate to true in order for the elements to be rendered. |
| `elements` | The elements to render. Can be any supported element. |
See the [conditional elements example](../../../examples.md?id=conditional-elements).
## `menu-icon`
Add an arbitrary icon to the Frigate Card menu. Configuration is ~identical to that of the [Picture Elements Icon](https://www.home-assistant.io/lovelace/picture-elements/#icon-element) except with a type name of `custom:frigate-card-menu-icon`.
```yaml
elements:
- type: custom:frigate-card-menu-icon
# [...]
```
## `menu-submenu`
Add a configurable submenu dropdown.
```yaml
elements:
- type: custom:frigate-card-menu-submenu
# [...]
```
Parameters for this element are identical to the parameters of the [stock Home Assistant Icon Element](https://www.home-assistant.io/lovelace/picture-elements/#icon-element) with the exception of these parameters which differ:
| Parameter | Description |
| --------- | ------------------------------------------- |
| `type` | Must be `custom:frigate-card-menu-submenu`. |
| `items` | A list of menu items, as described below. |
### Submenu items
| Parameter | Default | Description |
| ------------------------------------------------------------------------ | ------- | ------------------------------------------------------------------------------------------------- |
| `enabled` | `true` | Whether or not to show this item as enabled / selectable. |
| `entity` | | An optional Home Assistant entity from which title, icon and style can be automatically computed. |
| `icon` | | An optional item icon to display, e.g. `mdi:car` |
| `selected` | `false` | Whether or not to show this item as selected. |
| `state_color` | `true` | Whether or not the title and icon should be stylized based on state. |
| `style` | | Position and style the element using CSS. |
| `tap_action`, `double_tap_action`, `hold_action`, `start_tap`, `end_tap` | | The [actions](../../actions/README.md) to take when this item is interacted with. |
| `title` | | An optional title to display. |
## `menu-submenu-select`
Add a submenu based on a `select` or `input_select`. This element allows you to convert a [Home Assistant Select Entity](https://www.home-assistant.io/integrations/select/) or [Home Assistant Input Select Entity](https://www.home-assistant.io/integrations/input_select/) (an entity either starting with `select` or `input_select`) into an overridable submenu. This _could_ be done by hand using a regular submenu (above) -- this element is a convenience.
```yaml
elements:
- type: custom:frigate-card-menu-submenu-select
# [...]
```
Parameters for the `custom:frigate-card-menu-submenu-select` element are identical to the parameters of the [stock Home Assistant State Icon Element](https://www.home-assistant.io/dashboards/picture-elements/#state-icon) with the exception of these parameters which differ:
| Parameter | Description |
| --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `type` | Must be `custom:frigate-card-menu-submenu-select`. |
| `options` | An optional dictionary of overrides keyed by the option name that the given select entity supports. These options can be used to set or override submenu item parameters on a per-option basis. The format is as described in [Submenu Items](./README.md?id=submenu-items) above. |
See the `select` [submenu example](../../../examples.md?id=select-submenu).
## `state-icon`
Add a state icon to the Frigate Card menu that represents the state of a Home Assistant entity. Configuration is ~identical to that of the [Picture Elements State Icon](https://www.home-assistant.io/lovelace/picture-elements/#state-icon) except with a type name of `custom:frigate-card-menu-state-icon`.
```yaml
elements:
- type: custom:frigate-card-menu-icon
# [...]
```
## `status-bar-icon`
Add an arbitrary icon to the status bar.
```yaml
elements:
- type: custom:frigate-card-status-bar-icon
# [...]
```
| Parameter | Default | Description |
| ------------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `type` | | Must be `custom:frigate-card-status-bar-icon`. |
| `actions` | | Actions to performs when the status bar item is interacted with. See [actions](../../actions/README.md). |
| `enabled` | `true` | `true` to enable this status bar item, `false` to disable. |
| `exclusive` | `false` | Whether or not this item should evict non-exclusive items from the status bar. |
| `expand` | `false` | If `false` this status bar item will consume the minimum possible space, if `true` will expand to the available space. |
| `icon` | | The icon to show in the status bar, e.g. `mdi:camera-front`. |
| `priority` | `50` | The item priority. Higher priority items are ordered closer to the start of the status bar (i.e. an item with priority `70` will order further to the left than an item with priority `60`). Minimum `0`, maximum `100`. |
| `sufficient` | `false` | Whether or not this item is sufficient to display the status bar if it's otherwise hidden (e.g. with the `popup` [status bar style](../../status-bar.md)). |
## `status-bar-image`
Add an arbitrary image to the status bar.
```yaml
elements:
- type: custom:frigate-card-status-bar-image
# [...]
```
| Parameter | Default | Description |
| ------------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `type` | | Must be `custom:frigate-card-status-bar-image`. |
| `actions` | | Actions to performs when the status bar item is interacted with. See [actions](../../actions/README.md). |
| `enabled` | `true` | `true` to enable this status bar item, `false` to disable. |
| `exclusive` | `false` | Whether or not this item should evict non-exclusive items from the status bar. |
| `expand` | `false` | If `false` this status bar item will consume the minimum possible space, if `true` will expand to the available space. |
| `image` | | The image to show in the status bar, e.g. `https://my.site.com/status.png`. |
| `priority` | `50` | The item priority. Higher priority items are ordered closer to the start of the status bar (i.e. an item with priority `70` will order further to the left than an item with priority `60`). Minimum `0`, maximum `100`. |
| `sufficient` | `false` | Whether or not this item is sufficient to display the status bar if it's otherwise hidden (e.g. with the `popup` [status bar style](../../status-bar.md)). |
## `status-bar-string`
Add an arbitrary string to the status bar.
```yaml
elements:
- type: custom:frigate-card-status-bar-string
# [...]
```
| Parameter | Default | Description |
| ------------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `type` | | Must be `custom:frigate-card-status-bar-string`. |
| `actions` | | Actions to performs when the status bar item is interacted with. See [actions](../../actions/README.md). |
| `enabled` | `true` | `true` to enable this status bar item, `false` to disable. |
| `exclusive` | `false` | Whether or not this item should evict non-exclusive items from the status bar. |
| `expand` | `false` | If `false` this status bar item will consume the minimum possible space, if `true` will expand to the available space. |
| `string` | | The string to show in the status bar, e.g. `Intruder detected!` |
| `priority` | `50` | The item priority. Higher priority items are ordered closer to the start of the status bar (i.e. an item with priority `70` will order further to the left than an item with priority `60`). Minimum `0`, maximum `100`. |
| `sufficient` | `false` | Whether or not this item is sufficient to display the status bar if it's otherwise hidden (e.g. with the `popup` [status bar style](../../status-bar.md)). |
## Fully expanded reference
> [Actions](../../actions/README.md) are omitted for simplicity.
[](../../common/expanded-warning.md ':include')
```yaml
elements:
- type: custom:frigate-card-menu-icon
icon: mdi:car
title: Vroom
- type: custom:frigate-card-menu-state-icon
entity: light.office_main_lights
title: Office lights
icon: mdi:chair-rolling
state_color: true
- 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
enabled: false
tap_action:
action: url
url_path: https://www.google.com
- type: custom:frigate-card-menu-submenu-select
icon: mdi:lamps
entity: input_select.kitchen_scene
options:
scene.kitchen_cooking_scene:
icon: mdi:chef-hat
title: Cooking time!
scene.kitchen_tv_scene:
icon: mdi:television
title: TV!
# Show a pig icon if a variety of conditions are met.
- type: custom:frigate-card-conditional
elements:
- type: icon
icon: mdi:pig
title: Oink
style:
left: 300px
top: 100px
conditions:
- condition: view
views:
- live
- condition: fullscreen
fullscreen: true
- condition: expand
expand: true
- condition: camera
cameras: camera.front_door
- condition: media_loaded
media_loaded: true
- condition: display_mode
display_mode: single
- condition: triggered
triggered:
- camera.front_door
- condition: interaction
interaction: true
- condition: microphone
muted: true
connected: true
- condition: state
entity: light.office_main_lights
state: on
state_not: off
- condition: numeric_state
entity: sensor.light_level
above: 20
below: 100
- condition: user
users:
- 581fca7fdc014b8b894519cc531f9a04
- type: custom:frigate-card-status-bar-string
enabled: true
exclusive: false
expand: false
string: 'Intruder alert!'
priority: 50
sufficient: false
- type: custom:frigate-card-status-bar-icon
enabled: true
exclusive: false
expand: false
icon: 'mdi:cow'
priority: 50
sufficient: false
- type: custom:frigate-card-status-bar-image
enabled: true
exclusive: false
expand: false
image: https://my.site.com/status.png
priority: 50
sufficient: false
```
docs/configuration/elements/custom/_sidebar.md
+29
View File
@@ -0,0 +1,29 @@
- [Getting Started](../../../README.md)
- [Configuration](../../README.md)
- [`actions`](../README.md)
- [`automations`](../../automations.md)
- [`cameras`](../../cameras/README.md)
- [`conditions`](../../conditions.md)
- [`dimensions`](../../dimensions.md)
- [`elements`](../../elements/README.md)
- [Custom Actions](README.md)
- [Stock Actions](../stock/README.md)
- [`image`](../../image.md)
- [`live`](../../live.md)
- [`media_gallery`](../../media-gallery.md)
- [`media_viewer`](../../media-viewer.md)
- [`menu`](../../menu.md)
- [`overrides`](../../overrides.md)
- [`performance`](../../performance.md)
- [`profiles`](../../profiles.md)
- [`status_bar`](../../status-bar.md)
- [`timeline`](../../timeline.md)
- [`view`](../../view.md)
- [Examples](../../../examples.md)
- [Screenshots](../../../screenshots.md)
- [Troubleshooting](../../../troubleshooting.md)
- [Usage](../../../usage/README.md)
---
- [Developing](../../../developing.md)
docs/configuration/elements/stock/README.md
+173
View File
@@ -0,0 +1,173 @@
# Stock Elements
## `conditional`
This element will let you show its sub-elements based on entity states. See [Home Assistant elements documentation](https://www.home-assistant.io/dashboards/picture-elements/#conditional-element).
```yaml
elements:
- type: conditional
# [...]
```
## `custom`
Custom elements provided by a card. See [Home Assistant elements documentation](https://www.home-assistant.io/dashboards/picture-elements/#custom-elements).
```yaml
elements:
- type: custom
# [...]
```
?> See [Frigate Card custom elements](../custom//README.md) for the custom elements offered by _this_ card.
## `icon`
This element creates a static icon that is not linked to the state of an entity. See [Home Assistant elements documentation](https://www.home-assistant.io/dashboards/picture-elements/#icon-element).
```yaml
elements:
- type: icon
# [...]
```
## `image`
This creates an image element that overlays the background image. See [Home Assistant elements documentation](https://www.home-assistant.io/dashboards/picture-elements/#image-element).
```yaml
elements:
- type: image
# [...]
```
## `service-button`
This entity creates a button (with arbitrary text) that can be used to call a service. See [Home Assistant elements documentation](https://www.home-assistant.io/dashboards/picture-elements/#service-call-button).
```yaml
elements:
- type: service-button
# [...]
```
## `state-badge`
This element creates a badge representing the state of an entity. See [Home Assistant elements documentation](https://www.home-assistant.io/dashboards/picture-elements/#state-badge).
```yaml
elements:
- type: state-badge
# [...]
```
## `state-icon`
This element represents an entity state using an icon. See [Home Assistant elements documentation](https://www.home-assistant.io/dashboards/picture-elements/#state-icon).
```yaml
elements:
- type: state-icon
# [...]
```
## `state-label`
This element represents an entity’s state via text. See [Home Assistant elements documentation](https://www.home-assistant.io/dashboards/picture-elements/#state-label).
```yaml
elements:
- type: state-label
# [...]
```
## Fully expanded reference
> [Actions](../../actions/README.md) are omitted for simplicity.
[](../../common/expanded-warning.md ':include')
Reference: [Home Assistant Picture Elements](https://www.home-assistant.io/dashboards/picture-elements/)
```yaml
elements:
- type: state-badge
entity: sensor.kitchen_dining_multisensor_air_temperature
style:
left: 100px
top: 50px
title: 'Temperature'
- type: state-icon
entity: light.office_main_lights
icon: mdi:lamp
state_color: true
style:
left: 100px
top: 100px
- type: state-label
entity: sensor.kitchen_motion_sensor_battery
attribute: battery_voltage
prefix: Volts
title: Battery Voltage
style:
left: 100px
top: 150px
- type: state-label
entity: sensor.kitchen_motion_sensor_battery
attribute: battery_voltage
prefix: 'Volts: '
title: Battery Voltage
style:
background-color: black
left: 100px
top: 200px
- type: service-button
title: Light on
service: homeassistant.turn_on
service_data:
entity: light.office_main_lights
style:
left: 100px
top: 250px
- type: icon
icon: mdi:cow
title: Moo
style:
left: 100px
top: 300px
- type: image
entity: light.office_main_lights
title: Image
state_image:
on: 'https://picsum.photos/id/1003/1181/1772'
off: 'https://picsum.photos/id/102/4320/3240'
state_filter:
'on': brightness(110%) saturate(1.2)
'off': brightness(50%) hue-rotate(45deg)
style:
left: 100px
top: 350px
height: 50px
width: 100px
- type: conditional
conditions:
- condition: state
entity: light.office_main_lights
state: on
state_not: off
- condition: numeric_state
entity: sensor.light_level
above: 20
below: 100
- condition: user
users:
- 581fca7fdc014b8b894519cc531f9a04
elements:
- type: icon
icon: mdi:dog
title: Woof
style:
left: 100px
top: 400px
```
docs/configuration/elements/stock/_sidebar.md
+29
View File
@@ -0,0 +1,29 @@
- [Getting Started](../../../README.md)
- [Configuration](../../README.md)
- [`actions`](../README.md)
- [`automations`](../../automations.md)
- [`cameras`](../../cameras/README.md)
- [`conditions`](../../conditions.md)
- [`dimensions`](../../dimensions.md)
- [`elements`](../../elements/README.md)
- [Custom Actions](../custom/README.md)
- [Stock Actions](README.md)
- [`image`](../../image.md)
- [`live`](../../live.md)
- [`media_gallery`](../../media-gallery.md)
- [`media_viewer`](../../media-viewer.md)
- [`menu`](../../menu.md)
- [`overrides`](../../overrides.md)
- [`performance`](../../performance.md)
- [`profiles`](../../profiles.md)
- [`status_bar`](../../status-bar.md)
- [`timeline`](../../timeline.md)
- [`view`](../../view.md)
- [Examples](../../../examples.md)
- [Screenshots](../../../screenshots.md)
- [Troubleshooting](../../../troubleshooting.md)
- [Usage](../../../usage/README.md)
---
- [Developing](../../../developing.md)
docs/configuration/live.md
-20
View File
@@ -41,7 +41,6 @@ live:
| `next_previous` | | Configures how the "Next & Previous" controls are shown on the `live` view. See below. |
| `thumbnails` | | Configures how thumbnails are shown on the `live` view. See below. |
| `timeline` | | Configures how the mini-timeline is shown on the `live` view. See below. |
| `title` | | Configures how the camera title is shown on the `live` view. See below. |
### `next_previous`
@@ -127,22 +126,6 @@ live:
[](common/timeline-seek-info.md ':include')
### `title`
Configures how the camera title is shown on the live view.
```yaml
live:
controls:
title:
# [...]
```
| Option | Default | Description |
| ------------------ | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| `duration_seconds` | `2` | The number of seconds to display the title popup. `0` implies forever. |
| `mode` | `popup-bottom-right` | How to display the live camera title. Acceptable values: `none`, `popup-top-left`, `popup-top-right`, `popup-bottom-left`, `popup-bottom-right` . |
## `display`
Controls whether to show a single or grid `live` view.
@@ -230,9 +213,6 @@ live:
events_media_type: all
show_recordings: true
window_seconds: 3600
title:
mode: popup-bottom-right
duration_seconds: 2
microphone:
always_connected: false
disconnect_seconds: 90
docs/configuration/media-viewer.md
-20
View File
@@ -37,7 +37,6 @@ media_viewer:
| `next_previous` | | Configures how the "Next & Previous" controls are shown on the media viewer. See below. |
| `thumbnails` | | Configures how thumbnails are shown on the media viewer. See below. |
| `timeline` | | Configures how the mini-timeline is shown on the media viewer. See below. |
| `title` | | Configures how the media title is shown on the media viewer. See below. |
### `next_previous`
@@ -121,22 +120,6 @@ media_viewer:
[](common/timeline-seek-info.md ':include')
### `title`
Configures how the media title is shown on the media viewer.
```yaml
media_viewer:
controls:
title:
# [...]
```
| Option | Default | Description |
| ------------------ | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `duration_seconds` | `2` | The number of seconds to display the title popup. `0` implies forever. |
| `mode` | `popup-bottom-right` | How to display the Media viewer media title. Acceptable values: `none`, `popup-top-left`, `popup-top-right`, `popup-bottom-left`, `popup-bottom-right` . |
## `display`
Controls whether to show a single media item or grid in the media viewer.
@@ -205,9 +188,6 @@ media_viewer:
events_media_type: all
show_recordings: true
window_seconds: 3600
title:
mode: popup-bottom-right
duration_seconds: 2
display:
mode: single
grid_selected_width_factor: 2
docs/configuration/status-bar.md
+82
View File
@@ -0,0 +1,82 @@
# `status_bar`
Configures the card status bar.
```yaml
status_bar:
# [...]
```
| Option | Default | Description |
| --------------- | -------- | -------------------------------------------------------------------------------------------------------------------------- |
| `position` | `bottom` | Whether to place the status bar at the `top` or `bottom` of the card. |
| `popup_seconds` | `3` | The number of seconds to display the status bar when using the `popup` style. |
| `height` | `46` | The height of the status bar in pixels. |
| `items` | | Whether to show or hide built-in status bar items. See below. |
| `style` | `popup` | The status bar style to show by default, one of `none`, `hover`, `hover-card`, `overlay`, `outside` or `popup`. See below. |
## `items`
All configuration is under:
```yaml
status_bar:
items:
[item]:
# [...]
```
### Available Items
| Button name | Description |
| ------------ | ------------------------------------------------------ |
| `engine` | The icon of the camera engine for the relevant camera. |
| `resolution` | The detected media resolution (if any). |
| `technology` | The detected media technology (if any). |
| `title` | The media title. |
### Options for each item
| Option | Default | Description |
| ---------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `enabled` | `true` | Whether or not to show the item. |
| `priority` | `50` | The item priority. Higher priority items are ordered closer to the start of the status bar (i.e. an item with priority `70` will order further to the left than an item with priority `60`). Minimum `0`, maximum `100`. |
## `style`
This card supports several menu styles.
| Key | Description |
| ------------ | --------------------------------------------------------------------------------------------------------------------- |
| `hover-card` | Overlay the status bar over the card contents when the mouse is over the **card**, otherwise it is not shown. |
| `hover` | Overlay the status bar over the card contents when the mouse is over the **status bar**, otherwise it is not shown. |
| `none` | No status bar is shown. |
| `outside` | Render the status bar outside the card (i.e. above it if `position` is `top`, or below it if `position` is `bottom`). |
| `overlay` | Overlay the status bar over the card contents. |
## Fully expanded reference
?> To add custom status bar contents, see [status bar custom elements](elements/custom/README.md?id=status-bar-icon).
[](common/expanded-warning.md ':include')
```yaml
status_bar:
position: bottom
popup_seconds: 3
height: 46
style: popup
items:
engine:
enabled: true
priority: 50
resolution:
enabled: true
priority: 50
technology:
enabled: true
priority: 50
title:
enabled: true
priority: 50
```
docs/examples.md
+46
View File
@@ -695,6 +695,52 @@ image:
refresh_seconds: 10
```
## Status bar
### Disable status bar
This example disables the status bar.
```yaml
type: custom:frigate-card
cameras:
- camera_entity: camera.office
status_bar:
style: none
```
### Dynamic status bar contents
This example shows an icon and a message on the status bar when a camera is triggered, replacing the existing contents of the status bar through the use of `exclusive`.
```yaml
type: custom:frigate-card
cameras:
- camera_entity: camera.office
automations:
- conditions:
- condition: triggered
triggered:
- camera.office
actions:
- action: custom:frigate-card-action
frigate_card_action: status_bar
status_bar_action: add
items:
- type: custom:frigate-card-status-bar-icon
icon: mdi:alarm-light
exclusive: true
- type: custom:frigate-card-status-bar-string
string: Intruder detected!
expand: true
exclusive: true
sufficient: true
actions_not:
- action: custom:frigate-card-action
frigate_card_action: status_bar
status_bar_action: reset
```
## Submenus
You can add submenus to the menu -- buttons that when pressed reveal a dropdown submenu of configurable options.
docs/troubleshooting.md
+6 -13
View File
@@ -78,8 +78,8 @@ The Android video player swallows `double_tap` interactions in order to
rewind or fast-forward. Workarounds:
- Use `hold` instead of `double_tap` for your card-wide action.
- Use a [Frigate Card Element](configuration/elements.md) or menu icon to trigger
the action instead.
- Use a [Frigate Card Element](configuration/elements/README.md) or menu icon to
trigger the action instead.
### Dragging in carousels broken in Firefox
@@ -180,20 +180,13 @@ image to specifically allow `crossorigin` requests (which is typically not the
case for an image served from a camera, for example). The stock Home Assistant
Picture Glance card has the same limitation, for the same reasons.
### Title "Popups" continually popping up
### Status "popup" continually popping up
Title popups can be disabled for live or media viewer views with this
configuration:
Status popup can be disabled with this configuration:
```yaml
live:
controls:
title:
mode: none
media_viewer:
controls:
title:
mode: none
status_bar:
style: none
```
### Watermark shown on livestream