flan/advanced-camera-card
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
cc376a8be1ab770cc37b0bb90638b21cc13e4e67
advanced-camera-card/docs/configuration/elements/custom/README.md
T
Dermot Duffy cc376a8be1 feat: Rename the card to advanced-camera-card (#1873) 
Whilst the Frigate support in this card is the best among camera
engines, the name incorrectly suggests that Frigate is a requirement.
Instead, to broaden the appeal, change to more camera agnostic name.
This does not suggest any change in priority, role or support for
Frigate.

This change is likely to be bug prone, due to the size of the rename --
the code contains 1500+ references to "Frigate" most of which make sense
to rename, some which do not, all of which needed human assessment.

- Closes #1298


BREAKING CHANGE: References to `frigate-card` in all kinds of
configuration need to be updated to `advanced-camera-card`. An automated
config upgrade should take care of the majority of usecases (click `Edit
-> Upgrade -> Save`), though may not be perfect.
2025-02-06 19:32:32 -08:00

346 lines
36 KiB
Markdown
Raw Blame History

# 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 Advanced Camera Card [conditions](../../conditions.md).
```yaml
elements:
- type: custom:advanced-camera-card-conditional
# [...]
```
Parameters for the `custom:advanced-camera-card-conditional` element:
| Parameter | Description |
| ------------ | ---------------------------------------------------------------------------------------------------------------- |
| `type` | Must be `custom:advanced-camera-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 Advanced Camera Card menu.
```yaml
elements:
- type: custom:advanced-camera-card-menu-icon
# [...]
```
Configuration is similar to a stock [Picture Elements Icon](https://www.home-assistant.io/lovelace/picture-elements/#icon-element).
| Parameter | Default | Description |
| ------------------------------------------------------------------------ | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `type` | | Must be `custom:advanced-camera-card-menu-icon`. |
| `alignment` | `matching` | Whether this menu item should have an alignment that is `matching` the menu alignment or `opposing` the menu alignment. Can be used to create two separate groups of buttons on the menu. The `priority` option orders buttons within a given `alignment`. |
| `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`. See also [custom icons](../../../usage/custom-icons.md). |
| `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 items 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`). Priority applies separately to `matching` and `opposing` groups (see `alignment` above). 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](../../actions/README.md) to take when this item is interacted with. |
| `title` | | An optional title to display. |
## `menu-submenu`
Add a configurable submenu dropdown.
```yaml
elements:
- type: custom:advanced-camera-card-menu-submenu
# [...]
```
| Parameter | Default | Description |
| ------------------------------------------------------------------------ | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `type` | | Must be `custom:advanced-camera-card-menu-submenu`. |
| `alignment` | `matching` | Whether this menu item should have an alignment that is `matching` the menu alignment or `opposing` the menu alignment. Can be used to create two separate groups of buttons on the menu. The `priority` option orders buttons within a given `alignment`. |
| `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`. See also [custom icons](../../../usage/custom-icons.md). |
| `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 items 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`). Priority applies separately to `matching` and `opposing` groups (see `alignment` above). 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](../../actions/README.md) 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`. See also [custom icons](../../../usage/custom-icons.md). |
| `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:advanced-camera-card-menu-submenu-select
# [...]
```
| Parameter | Default | Description |
| ------------------------------------------------------------------------ | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `type` | | Must be `custom:advanced-camera-card-menu-submenu-select`. |
| `alignment` | `matching` | Whether this menu item should have an alignment that is `matching` the menu alignment or `opposing` the menu alignment. Can be used to create two separate groups of buttons on the menu. The `priority` option orders buttons within a given `alignment`. |
| `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`. See also [custom icons](../../../usage/custom-icons.md). |
| `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. |
| `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 items 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`). Priority applies separately to `matching` and `opposing` groups (see `alignment` above). 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](../../actions/README.md) to take when this item is interacted with. |
| `title` | | An optional title to display. |
See the `select` [submenu example](../../../examples.md?id=select-submenu).
## `menu-state-icon`
Add a state icon to the Advanced Camera Card menu that represents the state of a Home Assistant entity.
```yaml
elements:
- type: custom:advanced-camera-card-menu-state-icon
# [...]
```
Configuration is similar to a stock [Picture Elements State Icon](https://www.home-assistant.io/lovelace/picture-elements/#state-icon).
| Parameter | Default | Description |
| ------------------------------------------------------------------------ | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `type` | | Must be `custom:advanced-camera-card-menu-state-icon`. |
| `alignment` | `matching` | Whether this menu item should have an alignment that is `matching` the menu alignment or `opposing` the menu alignment. Can be used to create two separate groups of buttons on the menu. The `priority` option orders buttons within a given `alignment`. |
| `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`. See also [custom icons](../../../usage/custom-icons.md). |
| `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 items 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`). Priority applies separately to `matching` and `opposing` groups (see `alignment` above). Minimum `0`, maximum `100`. |
| `tap_action`, `double_tap_action`, `hold_action`, `start_tap`, `end_tap` | | The [actions](../../actions/README.md) 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.
```yaml
elements:
- type: custom:advanced-camera-card-status-bar-icon
# [...]
```
| Parameter | Default | Description |
| ------------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `type` | | Must be `custom:advanced-camera-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`. See also [custom icons](../../../usage/custom-icons.md). |
| `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:advanced-camera-card-status-bar-image
# [...]
```
| Parameter | Default | Description |
| ------------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `type` | | Must be `custom:advanced-camera-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:advanced-camera-card-status-bar-string
# [...]
```
| Parameter | Default | Description |
| ------------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `type` | | Must be `custom:advanced-camera-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:advanced-camera-card-menu-icon
alignment: matching
enabled: true
entity: light.office_main_lights
icon: mdi:car
permanent: false
priority: 50
style:
color: white
title: Vroom
- type: custom:advanced-camera-card-menu-state-icon
alignment: matching
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:advanced-camera-card-menu-submenu
alignment: matching
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:advanced-camera-card-menu-submenu-select
alignment: matching
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:advanced-camera-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:advanced-camera-card-status-bar-string
enabled: true
exclusive: false
expand: false
string: 'Intruder alert!'
priority: 50
sufficient: false
- type: custom:advanced-camera-card-status-bar-icon
enabled: true
exclusive: false
expand: false
icon: 'mdi:cow'
priority: 50
sufficient: false
- type: custom:advanced-camera-card-status-bar-image
enabled: true
exclusive: false
expand: false
image: https://my.site.com/status.png
priority: 50
sufficient: false
```
Reference in New Issue View Git Blame Copy Permalink