32 KiB
Custom Elements
conditional
Restrict a set of elements to only render when the card is matches a set of conditions. This is analogous to the stock conditional element except supporting a rich set of Frigate Card conditions.
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 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.
menu-icon
Add an arbitrary icon to the Frigate Card menu.
elements:
- type: custom:frigate-card-menu-icon
# [...]
Configuration is similar to a stock Picture Elements Icon.
| Parameter | Default | Description |
|---|---|---|
type |
Must be custom:frigate-card-menu-icon. |
|
enabled |
true |
Whether or not to show this menu item. |
entity |
An optional Home Assistant entity for use with actions. | |
icon |
An required icon to display, e.g. mdi:car |
|
permanent |
false |
If false the menu item is hidden when the menu has the hidden style and the menu is closed, otherwise it is shown (and sorted to the front). |
priority |
50 |
The menu item priority. Higher priority item are ordered closer to the start of the menu alignment (i.e. a button with priority 70 will order further to the left than a button with priority 60, when the menu alignment is left). Minimum 0, maximum 100. |
style |
Position and style the element using CSS. | |
tap_action, double_tap_action, hold_action, start_tap, end_tap |
The actions to take when this item is interacted with. | |
title |
An optional title to display. |
menu-submenu
Add a configurable submenu dropdown.
elements:
- type: custom:frigate-card-menu-submenu
# [...]
| Parameter | Default | Description |
|---|---|---|
type |
Must be custom:frigate-card-menu-submenu. |
|
enabled |
true |
Whether or not to show this menu item. |
entity |
An optional Home Assistant entity for use with actions. | |
icon |
An required icon to display, e.g. mdi:car |
|
items |
A list of menu items, as described below. | |
permanent |
false |
If false the menu item is hidden when the menu has the hidden style and the menu is closed, otherwise it is shown (and sorted to the front). |
priority |
50 |
The menu item priority. Higher priority item are ordered closer to the start of the menu alignment (i.e. a button with priority 70 will order further to the left than a button with priority 60, when the menu alignment is left). Minimum 0, maximum 100. |
style |
Position and style the element using CSS. | |
tap_action, double_tap_action, hold_action, start_tap, end_tap |
The actions to take when this item is interacted with. | |
title |
An optional title to display. |
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 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 or Home Assistant Input Select Entity (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.
elements:
- type: custom:frigate-card-menu-submenu-select
# [...]
| Parameter | Default | Description |
|---|---|---|
type |
Must be custom:frigate-card-menu-submenu-select. |
|
enabled |
true |
Whether or not to show this menu item. |
entity |
An optional Home Assistant entity for use with actions. | |
icon |
An required icon to display, e.g. mdi:car |
|
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 above. | |
permanent |
false |
If false the menu item is hidden when the menu has the hidden style and the menu is closed, otherwise it is shown (and sorted to the front). |
priority |
50 |
The menu item priority. Higher priority item are ordered closer to the start of the menu alignment (i.e. a button with priority 70 will order further to the left than a button with priority 60, when the menu alignment is left). Minimum 0, maximum 100. |
style |
Position and style the element using CSS. | |
tap_action, double_tap_action, hold_action, start_tap, end_tap |
The actions to take when this item is interacted with. | |
title |
An optional title to display. |
See the select submenu example.
state-icon
Add a state icon to the Frigate Card menu that represents the state of a Home Assistant entity.
elements:
- type: custom:frigate-card-menu-state-icon
# [...]
Configuration is similar to a stock Picture Elements State Icon.
| Parameter | Default | Description |
|---|---|---|
type |
Must be custom:frigate-card-menu-state-icon. |
|
enabled |
true |
Whether or not to show this menu item. |
entity |
An optional Home Assistant entity for use with actions. | |
icon |
An required icon to display, e.g. mdi:car |
|
permanent |
false |
If false the menu item is hidden when the menu has the hidden style and the menu is closed, otherwise it is shown (and sorted to the front). |
priority |
50 |
The menu item priority. Higher priority item are ordered closer to the start of the menu alignment (i.e. a button with priority 70 will order further to the left than a button with priority 60, when the menu alignment is left). Minimum 0, maximum 100. |
tap_action, double_tap_action, hold_action, start_tap, end_tap |
The actions to take when this item is interacted with. | |
state_color |
true |
Set to true to have icons colored when entity is active. |
style |
Position and style the element using CSS. | |
title |
An optional title to display. |
status-bar-icon
Add an arbitrary icon to the status bar.
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. | |
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-image
Add an arbitrary image to the status bar.
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. | |
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-string
Add an arbitrary string to the status bar.
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. | |
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). |
Fully expanded reference
?> Actions are omitted for simplicity.
elements:
- type: custom:frigate-card-menu-icon
enabled: true
entity: light.office_main_lights
icon: mdi:car
permanent: false
priority: 50
style:
color: white
title: Vroom
- type: custom:frigate-card-menu-state-icon
enabled: true
entity: light.office_main_lights
icon: mdi:chair-rolling
permanent: false
priority: 50
state_color: true
style:
color: white
title: Office lights
- type: custom:frigate-card-menu-submenu
enabled: true
entity: light.office_main_lights
icon: mdi:menu
items:
- enabled: true
entity: light.office_main_lights
icon: mdi:lightbulb
selected: false
state_color: true
style:
color: white
tap_action:
action: toggle
title: Lights
- enabled: true
icon: mdi:google
selected: false
style:
color: white
tap_action:
action: url
url_path: https://www.google.com
title: Google
permanent: false
priority: 50
style:
color: white
title: Office lights
- type: custom:frigate-card-menu-submenu-select
enabled: true
entity: input_select.kitchen_scene
icon: mdi:lamps
options:
items:
scene.kitchen_cooking_scene:
enabled: true
icon: mdi:chef-hat
selected: false
state_color: true
style:
color: white
title: Cooking time!
scene.kitchen_tv_scene:
icon: mdi:television
title: TV!
permanent: false
priority: 50
style:
color: white
title: 'Kitchen Scene'
# 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