### Install and Build Project

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/developing.md

Clone the repository, install dependencies, and build the project. Ensure you have Git, Volta, and Yarn installed.

```sh
git clone https://github.com/dermotduffy/advanced-camera-card
cd advanced-camera-card
yarn install
yarn run build
```

--------------------------------

### Expanded Automation Example

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/configuration/automations.md

An expanded example demonstrating how to configure automations with specific conditions and actions. Use this to turn on live substream when fullscreen is active and turn it off otherwise.

```yaml
automations:
  - conditions:
      - condition: fullscreen
        fullscreen: true
    actions:
      - action: custom:advanced-camera-card-action
        advanced_camera_card_action: live_substream_on
    actions_not:
      - action: custom:advanced-camera-card-action
        advanced_camera_card_action: live_substream_off
```

--------------------------------

### Full Camera Configuration Reference

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/configuration/cameras/live-provider.md

Comprehensive example demonstrating various live providers and their specific configuration options.

```yaml
cameras:
  - camera_entity: camera.office_ha
    live_provider: ha
  - camera_entity: camera.office_webrtc_card
    live_provider: webrtc-card
    webrtc_card:
      entity: camera.office_rtsp
      url: 'rtsp://username:password@camera:554/av_stream/ch0'
      # Arbitrary WebRTC Card options, see https://github.com/AlexxIT/WebRTC#configuration .
      ui: true
  - camera_entity: camera.office_go2rtc
    live_provider: go2rtc
    go2rtc:
      modes:
        - webrtc
        - mse
        - mp4
        - mjpeg
      stream: sitting_room
      url: 'https://my.custom.go2rtc.backend'
  - camera_entity: camera.office_jsmpeg
    live_provider: jsmpeg
    jsmpeg:
      options:
        audio: false
        video: true
        pauseWhenHidden: false
        disableGl: false
        disableWebAssembly: false
        preserveDrawingBuffer: false
        progressive: true
        throttled: true
        chunkSize: 1048576
        maxAudioLag: 10
        videoBufferSize: 524288
        audioBufferSize: 131072
  - camera_entity: camera.office_image
    live_provider: image
    image:
      mode: auto
      refresh_seconds: 1
      url: 'https://path/to/image.png'
      entity: image.office_person
      entity_parameters: 'width=400&height=200'
cameras_global:
  live_provider: go2rtc
```

--------------------------------

### Fully expanded folder configuration reference

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/configuration/folders.md

Comprehensive example demonstrating matchers, date/startdate parsers, and template-based filtering.

```yaml
folders:
  - type: ha
    ha:
      url: https://my-ha-instance.local/media-browser/browser/app%2Cmedia-source%3A%2F%2Ffrigate
      path:
        - id: 'media-source://'
        - matchers:
            - type: title
              regexp: (?<value>.*) resolution
              title: Low
        - parsers:
            - type: date
              format: yyyy/MM/dd
        - parsers:
            - type: startdate
              format: HH:mm:ss
              regexp: 'File (?<value>.*)'
  - type: ha
    ha:
      path:
        - id: 'media-source://'
        - matchers:
            - type: template
              value_template: "{{ acc.media.title == now().strftime('%Y/%-m/%d') }}"
        - parsers:
            - type: date
        - matchers:
            - type: date
              since:
                minutes: 1
                hours: 2
                days: 3
                months: 4
                years: 5
```

--------------------------------

### Full configuration reference

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/configuration/cameras/engine.md

A comprehensive example demonstrating multiple camera engines and their respective configuration options.

```yaml
cameras:
  - camera_entity: camera.office_auto
    engine: auto
  - camera_entity: camera.office_frigate
    frigate:
      url: http://my.frigate.local
      client_id: frigate
      camera_name: front_door
      labels:
        - person
      zones:
        - steps
  - camera_entity: camera.office_motioneye
    motioneye:
      images:
        directory_pattern: '%Y-%m-%d'
        file_pattern: '%H-%M-%S'
      movies:
        directory_pattern: '%Y-%m-%d'
        file_pattern: '%H-%M-%S'
  - camera_entity: camera.office_generic
    engine: generic
  - camera_entity: camera.office_reolink
    reolink:
      url: http://my.reolink.local
      media_resolution: low
```

--------------------------------

### Basic Submenu Example

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/examples.md

Add a basic submenu to the card's menu. This example includes toggling lights, opening a URL, and entering fullscreen mode.

```yaml
type: custom:advanced-camera-card
cameras:
  - camera_entity: camera.office
elements:
  - type: custom:advanced-camera-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:advanced-camera-card-action
          advanced_camera_card_action: fullscreen
```

--------------------------------

### Configure Camera Proxy

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/configuration/cameras/README.md

Example of how to configure the proxy setting for a camera entity. Ensure `hass-web-proxy-integration` is installed separately. Proxying is only attempted if the integration is detected.

```yaml
cameras:
  - camera_entity: camera.office
    proxy:
      # [...]
```

--------------------------------

### Full Menu Configuration Reference

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/configuration/menu.md

A complete example showing all available menu buttons, their priorities, alignment, and global menu settings.

```yaml
menu:
  alignment: left
  buttons:
    camera_ui:
      priority: 50
      enabled: true
      alignment: matching
      icon: mdi:web
    cameras:
      priority: 50
      enabled: true
      alignment: matching
      icon: mdi:video-switch
    clips:
      priority: 50
      enabled: true
      alignment: matching
      icon: mdi:filmstrip
    download:
      priority: 50
      enabled: true
      alignment: matching
      icon: mdi:download
    expand:
      priority: 50
      enabled: true
      alignment: matching
      icon: mdi:arrow-expand-all
    folders:
      priority: 50
      enabled: true
      alignment: matching
      icon: mdi:folder-multiple
    fullscreen:
      priority: 50
      enabled: true
      alignment: matching
      icon: mdi:fullscreen
    image:
      priority: 50
      enabled: false
      alignment: matching
      icon: mdi:image
    iris:
      priority: 50
      enabled: true
      alignment: matching
      icon: iris
    live:
      priority: 50
      enabled: true
      alignment: matching
      icon: mdi:cctv
    media_player:
      priority: 50
      enabled: false
      alignment: matching
      icon: mdi:cast
    microphone:
      priority: 50
      enabled: false
      alignment: matching
      icon: mdi:microphone
      type: momentary
    mute:
      priority: 50
      enabled: false
      alignment: matching
      icon: mdi:volume-off
    play:
      priority: 50
      enabled: false
      alignment: matching
      icon: mdi:play
    ptz_controls:
      priority: 50
      enabled: false
      alignment: matching
      icon: mdi:pan
    ptz_home:
      priority: 50
      enabled: true
      alignment: matching
      icon: mdi:home
    snapshots:
      priority: 50
      enabled: true
      alignment: matching
      icon: mdi:camera
    substreams:
      priority: 50
      enabled: true
      alignment: matching
      icon: mdi:video-input-component
    timeline:
      priority: 50
      enabled: true
      alignment: matching
      icon: mdi:chart-gantt
  button_size: 40
  position: top
  style: hidden
```

--------------------------------

### Fully Expanded Remote Control Reference

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/configuration/remote-control.md

Complete example showing the configuration of camera entity and priority settings.

```yaml
remote_control:
  entities:
    camera: input_select.my_selected_camera
    camera_priority: card
```

--------------------------------

### Full Status Bar Reference

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/configuration/status-bar.md

A complete example showing all status bar configuration options and default item settings.

```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
```

--------------------------------

### URL Action Example: Select Camera

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/examples.md

Example URL to directly select a camera on the Advanced Camera Card. This is useful for navigation from other cards or external links.

```text
https://ha.mydomain.org/lovelace-test/0?advanced-camera-card-action.main.clips
```

--------------------------------

### Configure Camera Triggers

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/configuration/cameras/README.md

Example of setting up triggers for a camera. This configuration specifies which events should activate the camera.

```yaml
cameras:
  - camera_entity: camera.office
    triggers:
      # [...]
```

--------------------------------

### Media Viewer Timeline Configuration Example

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/configuration/media-viewer.md

Basic configuration for the media viewer's timeline. Further options are detailed in the table.

```yaml
media_viewer:
  controls:
    timeline:
      # [...]
```

--------------------------------

### Date Matcher Configuration

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/configuration/folders.md

Example of a date-based matcher configuration.

```yaml
type: date
```

--------------------------------

### Fully Expanded Media Gallery Configuration

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/configuration/media-gallery.md

A comprehensive example demonstrating all configurable options for the media_gallery, including filter, thumbnails, and actions.

```yaml
media_gallery:
  controls:
    filter:
      mode: 'right'
    thumbnails:
      size: 100
      show_details: false
      show_download_control: true
      show_favorite_control: true
      show_timeline_control: true
  actions:
    entity: light.office_main_lights
    tap_action:
      action: none
    hold_action:
      action: none
    double_tap_action:
      action: none
    start_tap_action:
      action: none
    end_tap_action:
      action: none
```

--------------------------------

### Configuration Path Example

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/configuration/overrides.md

Configuration paths use dot-separated references to parameters. List elements are accessed using `[n]` notation.

```yaml
cameras:
  - camera_entity: camera.other
  - camera_entity: camera.relevant
    dimensions:
      aspect_ratio: '16:9'
```

--------------------------------

### Equivalent Merge for `set` Example

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/configuration/overrides.md

This demonstrates that setting a specific path like `'menu.style'` can be achieved by merging a nested object.

```yaml
overrides:
  - conditions:
      - [condition]
    merge:
      menu: { style: 'overlay' }
```

--------------------------------

### Merge to Enable Thumbnails

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/configuration/overrides.md

This example uses `merge` to enable thumbnails below the live feed by setting the `live.controls.thumbnails.mode`.

```yaml
overrides:
  - conditions:
      - [condition]
    merge:
      'live.controls.thumbnails': { mode: 'below' }
```

--------------------------------

### Fully Expanded Dimensions Reference

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/configuration/dimensions.md

Complete configuration example for the dimensions object.

```yaml
dimensions:
  aspect_ratio_mode: dynamic
  aspect_ratio: 16:9
  height: auto
```

--------------------------------

### Full YAML Configuration Reference

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/configuration/view.md

A complete example of the view configuration object, including interaction settings, keyboard shortcuts, theme overrides, and custom actions.

```yaml
view:
  default: live
  camera_select: current
  interaction_seconds: 300
  default_cycle_camera: false
  default_reset:
    after_interaction: false
    entities:
      - binary_sensor.my_motion_sensor
    every_seconds: 0
    interaction_mode: inactive
  render_entities:
    - switch.render_card
  dim: false
  triggers:
    show_trigger_status: false
    filter_selected_camera: true
    untrigger_seconds: 0
    actions:
      interaction_mode: inactive
      trigger: update
      untrigger: none
  keyboard_shortcuts:
    enabled: true
    ptz_left:
      key: 'ArrowLeft'
    ptz_right:
      key: 'ArrowRight'
    ptz_up:
      key: 'ArrowUp'
    ptz_down:
      key: 'ArrowDown'
    ptz_zoom_in:
      key: '+'
    ptz_zoom_out:
      key: '-'
    ptz_home:
      key: 'h'
  theme:
    themes:
      - ha
    overrides:
      '--advanced-camera-card-menu-button-active-color': red
      '--advanced-camera-card-menu-position-left-style-overlay-alignment-left-background': pink
  actions:
    entity: light.office_main_lights
    tap_action:
      action: none
    hold_action:
      action: none
    double_tap_action:
      action: none
    start_tap_action:
      action: none
    end_tap_action:
      action: none
```

--------------------------------

### Condition: initialized

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/configuration/conditions.md

Matches when the card is first initialized, useful for running automations on card start.

```APIDOC
## initialized

### Description
Matches when the card is first initialized.

### Parameters
#### Request Body
- **condition** (string) - Required - Must be 'initialized'.

### Request Example
{
  "condition": "initialized"
}
```

--------------------------------

### Configure folder paths

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/examples.md

Navigates to a specific folder path starting from the Frigate media source.

```yaml
type: custom:advanced-camera-card
cameras:
  - camera_entity: camera.office
folders:
  - type: ha
    ha:
      path:
        - id: 'media-source://frigate'
        - title: 'Clips [my-instance]'
```

--------------------------------

### Configure Camera Dimensions

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/configuration/cameras/README.md

Example of setting dimensions for a specific camera, including aspect ratio and grid configuration.

```yaml
cameras:
  - camera_entity: camera.office
    dimensions:
      # [...]
```

--------------------------------

### Fully Expanded Reference for Home Assistant Actions

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/configuration/actions/stock/README.md

This example demonstrates various tap actions including 'more-info', 'toggle', 'perform-action', 'navigate', 'url', 'none', and 'fire-dom-event'. Each action is configured for a specific icon element.

```yaml
elements:
  - type: icon
    icon: mdi:numeric-1-box
    title: More info action
    style:
      left: 200px
      top: 50px
    entity: light.office_main_lights
    tap_action:
      action: more-info
  - type: icon
    icon: mdi:numeric-2-box
    title: Toggle action
    style:
      left: 200px
      top: 100px
    entity: light.office_main_lights
    tap_action:
      action: toggle
  - type: icon
    icon: mdi:numeric-3-box
    title: Perform Action / Call Service action
    style:
      left: 200px
      top: 150px
    tap_action:
      action: perform-action
      perform_action: homeassistant.toggle
      data:
        entity_id: light.office_main_lights
  - type: icon
    icon: mdi:numeric-4-box
    title: Navigate action
    style:
      left: 200px
      top: 200px
    tap_action:
      action: navigate
      navigation_path: /lovelace/2
  - type: icon
    icon: mdi:numeric-5-box
    title: URL action
    style:
      left: 200px
      top: 250px
    tap_action:
      action: url
      url_path: https://www.home-assistant.io/
  - type: icon
    icon: mdi:numeric-6-box
    title: None action
    style:
      left: 200px
      top: 300px
    tap_action:
      action: none
  - type: icon
    icon: mdi:numeric-7-box
    title: Custom action
    style:
      left: 200px
      top: 350px
    tap_action:
      action: fire-dom-event
      key: value
```

--------------------------------

### Basic Media Folder Configuration

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/configuration/folders.md

Configure a basic folder by specifying its URL. This is the starting point for defining media folder structures.

```yaml
folders:
  - type: ha
    ha:
      url: >-
        /media-browser/browser/app%2Cmedia-source%3A%2F%2Freolink/playlist%2Cmedia-source%3A%2F%2Freolink%2FCAM%7C01J8XAATNH77WE5D654K07KY1F%7C0
```

--------------------------------

### Fully Expanded Timeline Configuration Reference

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/configuration/timeline.md

A comprehensive example showing all available configuration options for the timeline view, including style, event handling, and detailed control settings.

```yaml
timeline:
  style: stack
  clustering_threshold: 3
  events_media_type: all
  show_recordings: true
  window_seconds: 3600
  format:
    24h: true
  controls:
    thumbnails:
      mode: left
      size: 100
      show_details: true
      show_download_control: true
      show_favorite_control: true
      show_timeline_control: true
```

--------------------------------

### Basic `timeline` Configuration

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/configuration/timeline.md

This is a basic configuration for the `timeline` view. It serves as a starting point for customizing how events and recordings are displayed.

```yaml
timeline:
  # [...]
```

--------------------------------

### Fully Expanded Stock Elements Reference

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/configuration/elements/stock/README.md

This example demonstrates the full configuration of various stock elements including state-badge, state-icon, state-label, service-button, icon, image, and conditional elements with styling and conditions.

```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
```

--------------------------------

### URL Action Example: Select Camera and Expand

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/examples.md

URL to select a specific camera and expand the view on the Advanced Camera Card. This is useful for direct linking to a particular camera's expanded state.

```text
https://ha.mydomain.org/lovelace-test/0?advanced-camera-card-action.camera_select=kitchen&advanced_camera_card_action-action.expand
```

--------------------------------

### Using `set` to Configure Menu Style

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/configuration/overrides.md

The `set` parameter entirely replaces the existing value at the specified path. This example sets the menu style to 'overlay'.

```yaml
overrides:
  - conditions:
      - [condition]
    set:
      menu: { style: 'overlay' }
```

--------------------------------

### Using `delete` in `overrides`

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/configuration/overrides.md

The `delete` parameter takes an array of configuration paths to remove. This example shows how to delete the 3rd camera entry.

```yaml
overrides:
  - conditions:
      - [condition]
    delete:
      - 'cameras[2]'
```

--------------------------------

### Display Static Image with Refresh

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/examples.md

Fetch and display a static image, refreshing it every 10 seconds. This example uses a Frigate server URL for the latest camera image.

```yaml
type: custom:advanced-camera-card
cameras:
  - camera_entity: camera.office
view:
  default: image
image:
  src: https://my-friage-server/api/living_room/latest.jpg
  refresh_seconds: 10
```

--------------------------------

### User Condition Example

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/configuration/conditions.md

This condition matches based on the currently logged-in Home Assistant user. Refer to the Home Assistant documentation for detailed usage.

```yaml
conditions:
  - condition: user
    # [...]
```

--------------------------------

### Configure Camera Grid Width Factor

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/configuration/cameras/README.md

Example of configuring the grid layout for a specific camera, setting its width multiplier in grid mode.

```yaml
cameras:
  - camera_entity: camera.office
    dimensions:
      grid:
        width_factor: 2
```

--------------------------------

### Add Resource via YAML Configuration

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/advanced-installation.md

This YAML configuration is used to add the card as a Lovelace resource when performing a manual installation and Lovelace is in 'YAML mode'.

```yaml
lovelace:
  mode: yaml
  resources:
    - url: /local/advanced-camera-card/advanced-camera-card.js
      type: module
```

--------------------------------

### Manual PTZ Action Configuration

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/examples.md

Manually configures actions for PTZ controls when using non-Frigate cameras or when Frigate does not natively support PTZ. This example toggles a switch for left movement.

```yaml
type: custom:advanced-camera-card
cameras:
  - camera_entity: camera.office
    ptz:
      actions_left:
        action: perform-action
        perform_action: homeassistant.toggle
        target:
          entity_id: switch.camera_move_left
```

--------------------------------

### Configure Home Assistant default root folder

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/examples.md

Creates a media gallery folder pointing to the Home Assistant media root.

```yaml
type: custom:advanced-camera-card
cameras:
  - camera_entity: camera.office
folders:
  - type: ha
```

--------------------------------

### Using `merge` to Hide Menu

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/configuration/overrides.md

The `merge` parameter recursively merges configuration objects. This example hides the menu when a condition is met.

```yaml
overrides:
  - conditions:
      - [condition]
    merge:
      menu: { style: 'hidden' }
```

--------------------------------

### Configure Initialized Condition

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/configuration/conditions.md

Matches when the card is first initialized, primarily for running automations on startup.

```yaml
conditions:
  - condition: initialized
```

--------------------------------

### Configure Dashboard Casting Method

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/usage/casting.md

Configure 'dashboard' casting for low-latency streaming powered by Home Assistant Cast. Requires specifying dashboard and view paths.

```yaml
type: custom:advanced-camera-card
cameras:
  - camera_entity: camera.office
    live_provider: go2rtc
    cast:
      method: dashboard
      dashboard:
        dashboard_path: dashboard-cast
        view_path: office
```

--------------------------------

### Change to Live View

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/configuration/actions/custom/README.md

Switch the camera view to the live stream. This action does not require any parameters.

```yaml
action: custom:advanced-camera-card-action
advanced_camera_card_action: live
```

--------------------------------

### Triggered Condition Example

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/configuration/conditions.md

Use this condition to check if a specific camera has been triggered. Provide a list of camera IDs that, if triggered, will satisfy the condition.

```yaml
conditions:
  - condition: triggered
    # [...]
```

--------------------------------

### Configure Live Camera Controls

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/configuration/live.md

Set up the control elements for the live camera view. This is the main entry point for configuring live view controls.

```yaml
live:
  controls:
    # [...]
```

--------------------------------

### Basic Media Gallery Configuration

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/configuration/media-gallery.md

This is a basic configuration for the media_gallery. It includes placeholder comments for further customization.

```yaml
media_gallery:
  # [...]
```

--------------------------------

### View Condition Example

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/configuration/conditions.md

Use this condition to trigger when the selected view matches specific criteria. If no views are specified, any view change will satisfy the condition.

```yaml
conditions:
  - condition: view
    # [...]
```

--------------------------------

### Basic Folders Configuration

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/configuration/folders.md

The root structure for defining media folders.

```yaml
folders:
  # [...]
```

--------------------------------

### Trigger Fullscreen with Browser-Mod Popup

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/examples.md

Use this automation to trigger a fullscreen popup with the camera feed when a doorbell is pressed or a person is detected. Requires hass-browser_mod to be installed.

```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:advanced-camera-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
```

--------------------------------

### Configure Standard Casting Method

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/usage/casting.md

Use the 'standard' casting method for cameras. This is the default and uses Home Assistant's 'media_player.play_media' action, resulting in a delay due to HLS streaming.

```yaml
type: custom:advanced-camera-card
cameras:
  - camera_entity: camera.office
    live_provider: go2rtc
    cast:
      method: standard
menu:
  media_player:
    enabled: true
```

--------------------------------

### Add State Badge for Entity

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/examples.md

Add a state badge to display arbitrary entity states. This example shows the office temperature and hides the label text.

```yaml
type: custom:advanced-camera-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
```

--------------------------------

### Configure a List of Cameras

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/configuration/cameras/README.md

Define a list of cameras the card should support. The first camera in the list will be the default.

```yaml
cameras:
  - [...camera 0 (default camera)...]
  - [...camera 1...]
  - [...camera 2...]
```

--------------------------------

### Open in Dev Containers

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/developing.md

Launch the project in a VS Code Dev Container for a pre-configured development environment. This includes Home Assistant, Frigate, and MQTT.

```sh
https://vscode.dev/redirect?url=vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=https://github.com/dermotduffy/advanced-camera-card
```

--------------------------------

### Change Menu Position on Orientation Change

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/examples.md

Use overrides to change the menu position when the screen orientation changes. This example moves the menu to the left in landscape mode.

```yaml
type: custom:advanced-camera-card
cameras:
  - camera_entity: camera.office
  - camera_entity: camera.kitchen
menu:
  style: overlay
overrides:
  - conditions:
      - condition: screen
        media_query: "(orientation: landscape)"
    merge:
      menu:
        position: left
```

--------------------------------

### Configure Media Loaded Condition

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/configuration/conditions.md

Matches based on whether the selected live or media stream has finished loading.

```yaml
conditions:
  - condition: media_loaded
    # [...]
```

--------------------------------

### Screen Condition Configuration

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/configuration/conditions.md

Match based on CSS media queries. The 'media_query' parameter accepts any valid media query string, which must start and end with parentheses.

```yaml
conditions:
  - condition: screen
    # [...]
```

--------------------------------

### Execute Advanced Camera Card Action

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/configuration/actions/custom/README.md

The base action to trigger custom functionalities within the Advanced Camera Card. Use this as a starting point for other specific actions.

```yaml
action: custom:advanced-camera-card-action
# [...]
```

--------------------------------

### Live Substream On Action

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/configuration/actions/custom/README.md

Turns on the first available substream. Substream configuration is detailed in the Camera dependency configuration.

```APIDOC
## live_substream_on

Turn on the first available substream. Use [Camera dependency configuration](../../cameras/README.md?id=dependencies) to configure substreams.

```yaml
action: custom:advanced-camera-card-action
advanced_camera_card_action: live_substream_on
```

### Parameters
#### Request Body
- **action** (string) - Required - Must be `custom:advanced-camera-card-action`.
- **advanced_camera_card_action** (string) - Required - Must be `live_substream_on`.
```

--------------------------------

### State Condition Example

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/configuration/conditions.md

Use this condition to check the state of a Home Assistant entity. You can specify a single state or a list of states to match against, or use `state_not` for inverse matching.

```yaml
conditions:
  - condition: state
    # [...]
```

--------------------------------

### Take Screenshot Action

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/configuration/actions/custom/README.md

Use this action to capture a screenshot of the currently selected media, such as a still frame from a video. No specific setup is required beyond the basic action definition.

```yaml
action: custom:advanced-camera-card-action
advanced_camera_card_action: screenshot
```

--------------------------------

### Configure Fullscreen Condition

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/configuration/conditions.md

Matches based on whether the card is currently in fullscreen mode.

```yaml
conditions:
  - condition: fullscreen
    # [...]
```

--------------------------------

### Picture Elements Card for Camera Navigation

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/examples.md

Example of a Picture Elements card configured with icons that navigate to a specific camera view on the Advanced Camera Card using URL parameters.

```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?advanced-camera-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?advanced-camera-card-action.camera_select=camera.kitchen
```

--------------------------------

### Initialized Condition

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/configuration/conditions.md

Matches if the system or component has been initialized.

```APIDOC
## `initialized`

### Description
Matches if the system or component has been initialized.

### Method
N/A (Configuration Condition)

### Endpoint
N/A

### Parameters
#### Query Parameters
- **condition** (string) - Required - Must be `initialized`.

### Request Example
```yaml
conditions:
  - condition: initialized
```

### Response
N/A (Configuration Condition)
```

--------------------------------

### Toggle Fullscreen Mode with Custom Action

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/examples.md

Control the Advanced Camera Card using the `custom:advanced-camera-card-action` action. This example shows an icon that toggles the card's fullscreen mode.

```yaml
type: custom:advanced-camera-card
cameras:
  - camera_entity: camera.office
elements:
  - type: icon
    icon: mdi:fullscreen
    style:
      left: 40px
      top: 40px
    tap_action:
      action: custom:advanced-camera-card-action
      advanced_camera_card_action: fullscreen
```

--------------------------------

### Basic Microphone Configuration

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/configuration/live.md

Basic configuration for microphone behavior in the live view.

```yaml
live:
  microphone:
```

--------------------------------

### Conditional Submenus Based on Camera

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/examples.md

Display different submenus based on the currently selected camera. This example shows office lights for the office camera and kitchen lights for the kitchen camera.

```yaml
type: custom:advanced-camera-card
cameras:
  - camera_entity: camera.office
elements:
  - type: custom:advanced-camera-card-conditional
    conditions:
      - condition: camera
        cameras:
          - camera.office
    elements:
      - type: custom:advanced-camera-card-menu-submenu
        icon: mdi:door
        items:
          - title: Office Lights
            icon: mdi:lightbulb
            entity: light.office_main_lights
            tap_action:
              action: toggle
  - type: custom:advanced-camera-card-conditional
    conditions:
      - condition: camera
        cameras:
          - camera.kitchen
    elements:
      - type: custom:advanced-camera-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
```

--------------------------------

### Configure Folder and Gallery Actions

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/configuration/actions/custom/README.md

Configures menu icons to trigger folder or gallery views.

```yaml
  - type: custom:advanced-camera-card-menu-icon
    icon: mdi:alpha-m-circle-outline
    title: View Folder Media
    tap_action:
      - action: custom:advanced-camera-card-action
        advanced_camera_card_action: folder
        folder: my-folder
  - type: custom:advanced-camera-card-menu-icon
    icon: mdi:alpha-n-circle-outline
    title: View Folders Gallery
    tap_action:
      - action: custom:advanced-camera-card-action
        advanced_camera_card_action: folders
        folder: my-folder
```

--------------------------------

### Add Custom Menu Icon

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/examples.md

Include a custom icon in the menu that navigates to a specified URL on tap. This example adds a book icon linking to the card's releases page.

```yaml
type: custom:advanced-camera-card
cameras:
  - camera_entity: camera.office
elements:
  - type: custom:advanced-camera-card-menu-icon
    icon: mdi:book
    tap_action:
      action: url
      url_path: https://github.com/dermotduffy/advanced-camera-card/releases
```

--------------------------------

### go2rtc URL Option

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/configuration/cameras/live-provider.md

Provide the root go2rtc URL for streaming video. This is usually auto-generated by the Frigate engine for its backend. It is only required for non-Frigate use cases or advanced Frigate setups.

```yaml
url: Determined by camera engine (e.g. the frigate engine will automatically generate a URL for the go2rtc backend that runs in the Frigate container).
Example: http://my-custom-go2rtc:1984
```

--------------------------------

### Configure Frigate Client ID

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/troubleshooting.md

If using a custom client_id in your Frigate configuration, specify it in the card's camera settings. Ensure your Frigate integration is correctly installed if not using a custom client_id.

```yaml
cameras:
  - camera_entity: camera.my_frigate_camera
    frigate:
      client_id: my-frigate
```

--------------------------------

### Configure Timeline Controls

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/configuration/timeline.md

Set up the controls for the timeline view. Further configuration for thumbnails is detailed separately.

```yaml
timeline:
  controls:
    # [...]
```

--------------------------------

### Migrate event_gallery configuration

Source: https://github.com/dermotduffy/advanced-camera-card/wiki/v3.0.0-to-v4.0.0-configuration-upgrade-instructions

Replace min_columns with thumbnail size controls.

```yaml
event_gallery:
  min_columns: 4
```

```yaml
event_gallery:
  controls:
    thumbnails:
      size: 75
```

--------------------------------

### Add Custom State Icon to Menu

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/examples.md

Incorporate a custom state icon into the menu that reflects an entity's state and can perform actions. This example uses a light entity to toggle the light on double-click.

```yaml
type: custom:advanced-camera-card
cameras:
  - camera_entity: camera.office
elements:
  - type: custom:advanced-camera-card-menu-state-icon
    entity: light.office_main_lights
    tap_action:
      action: toggle
```

--------------------------------

### Configure live display settings

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/configuration/live.md

Defines the layout mode and grid behavior for the live view.

```yaml
live:
  display:
    # [...]
```

--------------------------------

### Apply All Available Profiles

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/configuration/profiles.md

Apply all available profiles (`casting`, `low-performance`, `scrubbing`) in a specific order. The order determines which profile's defaults will be applied last.

```yaml
profiles:
  - casting
  - low-performance
  - scrubbing
```

--------------------------------

### Hide Menu and Controls in Small Viewports

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/examples.md

Hide the menu and controls when the viewport width is 300px or less, useful for Picture-in-Picture mode. This example sets the menu style to 'none' and disables next/previous controls and thumbnails.

```yaml
type: custom:advanced-camera-card
cameras:
  - camera_entity: camera.office
  - camera_entity: camera.kitchen
overrides:
  - conditions:
      - condition: screen
        media_query: "(max-width: 300px)"
    merge:
      menu:
        style: none
      live:
        controls:
          next_previous:
            style: none
          thumbnails:
            mode: none
```

--------------------------------

### Basic Camera Configuration

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/configuration/cameras/README.md

Defines a camera entity, sets up dependencies to show events from other cameras, and configures triggers for occupancy and specific binary sensors.

```yaml
cameras:
  - camera_entity: camera.front_Door
    # Show events for camera-2 when this camera is viewed.
    dependencies:
      all_cameras: false
      cameras:
        - camera-2
    triggers:
      motion: false
      occupancy: true
      entities:
        - binary_sensor.front_door_sensor
    cast:
      method: standard
    dimensions:
      aspect_ratio: 16:9
      layout:
        fit: contain
        position:
          x: 50
          y: 50
    always_error_if_entity_unavailable: false
```

--------------------------------

### Template Condition Example

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/configuration/conditions.md

This condition allows matching based on a Home Assistant template. Ensure the template evaluates to a truthy value for the condition to be met. The Advanced Camera Card uses ha-nunjucks for template processing.

```yaml
conditions:
  - condition: template
    # [...]
```

--------------------------------

### Change to Image View

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/configuration/actions/custom/README.md

Switch the camera view to display images. This action does not require any parameters.

```yaml
action: custom:advanced-camera-card-action
advanced_camera_card_action: image
```

--------------------------------

### Configure Keyboard Shortcuts

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/configuration/view.md

Enable or disable keyboard shortcuts and define specific key bindings for camera control actions like PTZ movements and home position.

```yaml
view:
  keyboard_shortcuts:
    enabled: true
    ptz_left:
      key: "a"
    ptz_right:
      key: "d"
    ptz_up:
      key: "w"
    ptz_down:
      key: "s"
    ptz_zoom_in:
      key: "i"
    ptz_zoom_out:
      key: "o"
    ptz_home:
      key: "h"
```

--------------------------------

### Automate Zoom Based on Entity State

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/examples.md

Automatically adjusts the camera's zoom and pan settings based on the state of another entity. This example uses a door contact sensor to trigger a digital PTZ zoom action.

```yaml
type: custom:advanced-camera-card
cameras:
  - camera_entity: camera.living_room
    live_provider: go2rtc
debug:
  logging: true
automations:
  - conditions:
      - condition: state
        entity: binary_sensor.door_contact
        state: 'on'
    actions:
      - action: custom:advanced-camera-card-action
        advanced_camera_card_action: ptz_digital
        target_id: camera.living_room
        absolute:
          zoom: 4
          pan:
            x: 38
            y: 20
    actions_not:
      - action: custom:advanced-camera-card-action
        advanced_camera_card_action: ptz_digital
        target_id: camera.living_room
```

--------------------------------

### User Agent Condition Examples

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/configuration/conditions.md

Match conditions based on the User-Agent header. You can specify an exact match (`user_agent`) or a regular expression match (`user_agent_re`). The `companion` parameter can be used to specifically match or exclude the Home Assistant companion app.

```yaml
conditions:
  - condition: user_agent
    # [...]
```

--------------------------------

### Configure folder date matching by template

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/examples.md

Uses Jinja2 templates to dynamically match media folders for today and yesterday.

```yaml
type: custom:advanced-camera-card
cameras:
  - camera_entity: camera.office
folders:
  - type: ha
    ha:
      url: https://my-ha-instance.local/media-browser/browser/app%2Cmedia-source%3A%2F%2Freolink/playlist%2Cmedia-source%3A%2F%2Freolink%2FCAM%7C01J8XAATNH77WE5D654K07KY1F%7C0
      path:
        - matchers:
            - type: title
              title: 'Low resolution'
        - matchers:
            - type: or
              matchers:
                - type: template
                  value_template: "{{ acc.media.title == now().strftime('%Y/%-m/%d') }}"
                - type: template
                  value_template: "{{ acc.media.title == (now() - dt.timedelta(days=1)) | timestamp_custom('%Y/%-m/%d') }}"
        - {}
```

--------------------------------

### Configure Next/Previous Controls

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/configuration/live.md

Customize the appearance and behavior of the next and previous camera navigation controls in the live view. Ensure the size is at least 20 pixels.

```yaml
live:
  controls:
    next_previous:
      # [...]
```

--------------------------------

### Configure Camera Control Menu Icons

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/configuration/actions/custom/README.md

Define menu icons that trigger basic camera actions like mute, pause, play, and recording management.

```yaml
    icon: mdi:alpha-r-circle
    title: Microphone mute
    tap_action:
      action: custom:advanced-camera-card-action
      advanced_camera_card_action: microphone_mute
```

```yaml
  - type: custom:advanced-camera-card-menu-icon
    icon: mdi:alpha-s-circle
    title: Microphone unmute
    tap_action:
      action: custom:advanced-camera-card-action
      advanced_camera_card_action: microphone_unmute
```

```yaml
  - type: custom:advanced-camera-card-menu-icon
    icon: mdi:alpha-t-circle
    title: Mute
    tap_action:
      action: custom:advanced-camera-card-action
      advanced_camera_card_action: mute
```

```yaml
  - type: custom:advanced-camera-card-menu-icon
    icon: mdi:alpha-u-circle
    title: Pause
    tap_action:
      action: custom:advanced-camera-card-action
      advanced_camera_card_action: pause
```

```yaml
  - type: custom:advanced-camera-card-menu-icon
    icon: mdi:alpha-v-circle
    title: Play
    tap_action:
      action: custom:advanced-camera-card-action
      advanced_camera_card_action: play
```

```yaml
  - type: custom:advanced-camera-card-menu-icon
    icon: mdi:alpha-b-circle-outline
    title: Show most recent recording
    tap_action:
      action: custom:advanced-camera-card-action
      advanced_camera_card_action: recording
```

```yaml
  - type: custom:advanced-camera-card-menu-icon
    icon: mdi:alpha-c-circle-outline
    title: Show recordings
    tap_action:
      action: custom:advanced-camera-card-action
      advanced_camera_card_action: recordings
```

```yaml
  - type: custom:advanced-camera-card-menu-icon
    icon: mdi:alpha-d-circle-outline
    title: Screenshot
    tap_action:
      action: custom:advanced-camera-card-action
      advanced_camera_card_action: screenshot
```

```yaml
  - type: custom:advanced-camera-card-menu-icon
    icon: mdi:alpha-f-circle-outline
    title: Show most recent snapshot
    tap_action:
      action: custom:advanced-camera-card-action
      advanced_camera_card_action: snapshot
```

```yaml
  - type: custom:advanced-camera-card-menu-icon
    icon: mdi:alpha-g-circle-outline
    title: Show snapshots
    tap_action:
      action: custom:advanced-camera-card-action
      advanced_camera_card_action: snapshots
```

```yaml
  - type: custom:advanced-camera-card-menu-icon
    icon: mdi:alpha-h-circle-outline
    title: Show timeline
    tap_action:
      action: custom:advanced-camera-card-action
      advanced_camera_card_action: timeline
```

```yaml
  - type: custom:advanced-camera-card-menu-icon
    icon: mdi:alpha-i-circle-outline
    title: Unmute
    tap_action:
      action: custom:advanced-camera-card-action
      advanced_camera_card_action: unmute
```

--------------------------------

### Configure birdseye dependencies

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/examples.md

Sets up birdseye to show events for all other cameras by using the all_cameras dependency shortcut.

```yaml
type: custom:advanced-camera-card
cameras:
  - camera_entity: camera.kitchen
  - camera_entity: camera.sitting_room
  - frigate:
      camera_name: birdseye
    dependencies:
      all_cameras: true
```

--------------------------------

### Configure Camera Dependencies

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/configuration/cameras/README.md

Use the `dependencies` block to specify other cameras as dependents. Dependent cameras' media is fetched and merged with the main camera by default.

```yaml
cameras:
  - camera_entity: camera.office
    dependencies:
      # [...]
```

--------------------------------

### Basic Media Viewer Configuration

Source: https://github.com/dermotduffy/advanced-camera-card/blob/main/docs/configuration/media-viewer.md

This is a basic configuration for the media viewer. Further options can be configured within the nested sections.

```yaml
media_viewer:
  # [...]
```