### Install npm packages

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/DEVELOPMENT.md

Installs all necessary Node.js packages for the project. Run this command in the project's root directory.

```shell
npm install
```

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

### Example for Specific Browser-ID Activation

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/browser-mod.md

This example demonstrates how to enable WallPanel for a specific browser ID (e9a2c86e-5526f1ee) by replacing hyphens with underscores in the ID.

```yaml
wallpanel:
  enabled: false
  profiles:
    device.e9a2c86e_5526f1ee:
      enabled: true
```

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

### Serve MkDocs documentation

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/DEVELOPMENT.md

Starts a local development server for the project's documentation using MkDocs and Material theme. Access the documentation at the provided local URL.

```shell
uvx --with mkdocs-material mkdocs serve
```

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

### Example View Path Identification

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/configuration.md

The view path can be identified from the URL of your Home Assistant dashboard. In the example URL, the path is '1'.

```text
https://hass:8123/dashboard-test/1
```

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

### WallPanel Configuration: Immich API with Album Names

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/media-sources.md

Configure WallPanel to use the Immich API, specifying the API URL, an API key, and filtering media by album names. This example sets the resolution to preview.

```yaml
image_url: immich+https://immich.your.domain/api
immich_api_keys:
  - 0vOb7EZ7YSajUQckMt6Cbnri8Ifzo5dlD9Q5hnnXlc
immich_shared_albums: false
immich_album_names:
  - Tokio
  - New York
immich_resolution: preview
```

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

### Configure Cards in Info Box

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/info-box.md

Include Home Assistant cards in the Info Box by specifying their type and configuration, mirroring the Home Assistant Dashboard setup.

```yaml
wallpanel:
  cards:
    - type: weather-forecast
      entity: weather.home
      show_forecast: true
      forecast_type: daily
```

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

### WallPanel Configuration: Immich API with Tag Names

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/media-sources.md

Configure WallPanel to use the Immich API, specifying the API URL, an API key, and filtering media by tag names. This example requests the original image resolution.

```yaml
image_url: immich+https://immich.your.domain/api
immich_api_keys:
  - 0vOb7EZ7YSajUQckMt6Cbnri8Ifzo5dlD9Q5hnnXlc
immich_tag_names:
  - Family
  - Friends
immich_resolution: original
```

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

### Style WallPanel Elements by ID

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/styling.md

Customize the style of WallPanel elements by using their IDs with the `style` configuration attribute. This example sets the background for the overlay and info box content.

```yaml
style:
  wallpanel-screensaver-overlay:
    background: '#00000055'
  wallpanel-screensaver-info-box-content:
    background: '#ffffff'
```

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

### Style WallPanel Image Info Layer (Default)

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/styling.md

Apply styles to the image info layer using the `wallpanel-screensaver-image-info` CSS class. This example shows default positioning, padding, font size, background, and border-radius.

```yaml
style:
  wallpanel-screensaver-image-info:
    position: 'absolute'
    bottom: '0.5em'
    right: '0.5em'
    padding: '0.1em 0.5em 0.1em 0.5em'
    font-size: '2em'
    background: '#00000055'
    backdrop-filter: 'blur(2px)'
    border-radius: '0.1em'
```

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

### WallPanel Configuration: Immich API with Persons

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/media-sources.md

Configure WallPanel to use the Immich API, specifying the API URL and an API key. This example filters media items to include those containing specific persons, supporting individual names or pairs.

```yaml
image_url: immich+https://immich.your.domain/api
immich_api_keys:
  - 0vOb7EZ7YSajUQckMt6Cbnri8Ifzo5dlD9Q5hnnXlc
immich_persons:
  - Alice
  - Bob
  - [John, Jane]
```

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

### Dynamic Configuration with Partial Value Update

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/configuration.md

Dynamically change only a part of a configuration value using entity placeholders. This example shows updating a query parameter in a URL.

```YAML
wallpanel:
  image_url: 'https://api.unsplash.com/photos/random?client_id=YOUR_ACCESS_KEY&query=${entity:input_text.wallpanel_unsplash_query}'
```

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

### Configure WallPanel to Display Individual Cards

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/quick-start.md

You can add individual cards to be displayed by WallPanel. Copy the YAML configuration for cards from any dashboard's raw configuration. This example shows a weather forecast card.

```yaml
wallpanel:
  enabled: true
  views: []
  cards:
    - type: weather-forecast
      entity: weather.open_meteo_home
      forecast_type: daily
```

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

### Adjust Info Box View Width

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/info-box.md

Control the width of displayed views in the Info Box using CSS, for example, setting it to 80% of the viewport width.

```yaml
wallpanel:
  views:
    - title: Wallpanel
  style:
    wallpanel-screensaver-info-box-views:
      width: 80vw
```

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

### Build wallpanel.js

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/DEVELOPMENT.md

Compiles the project into a production-ready JavaScript file, including necessary polyfills for fetch and Promise. Ensure `browserslist` is configured in `package.json`.

```shell
npm run build
```

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

### Dynamic Profile Configuration with ${browser_id}

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/browser-mod.md

Configure dynamic profiles using placeholders for image sources and a device-specific profile entity. The `${browser_id}` placeholder is used to dynamically set the profile entity.

```yaml
wallpanel:
  enabled: true
  profiles:
    dogs:
      image_url: https://source.unsplash.com/random/${width}x${height}?dogs&sig=${timestamp}
    cats:
      image_url: https://source.unsplash.com/random/${width}x${height}?cats&sig=${timestamp}
  profile_entity: input_text.screensaver_profile_${browser_id}
```

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

### Configure Profile Entity for Dynamic Switching

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/configuration.md

This YAML snippet demonstrates how to link an input_text helper to Wallpanel for dynamic profile switching. The profile specified in the `input_text.wallpanel_profile` entity will be applied.

```yaml
wallpanel:
  profile_entity: input_text.wallpanel_profile
```

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

### WallPanel Configuration: Immich API for Favorites

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/media-sources.md

Configure WallPanel to display Immich favorite media items by setting the `immich_favorites` option to `true`. This requires the API URL and an API key to be set.

```yaml
image_url: immich+https://immich.your.domain/api
immich_api_keys:
  - 0vOb7EZ7YSajUQckMt6Cbnri8Ifzo5dlD9Q5hnnXlc
immich_favorites: true
```

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

### Short Wallpanel Configuration

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/configuration.md

A basic configuration for enabling the wallpanel integration with essential display options.

```yaml
wallpanel:
  enabled: true
  hide_toolbar: true
  hide_sidebar: true
  fullscreen: true
```

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

### Dynamic Configuration with Entity Placeholder

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/configuration.md

Use placeholders in YAML configuration that are replaced by the state of a Home Assistant entity. Configuration updates immediately when the entity state changes.

```YAML
wallpanel:
  image_url: '${entity:input_select.wallpanel_image_url}'
```

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

### Configure Stepped Animation for Info Box

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/info-box.md

Use the `steps()` timing function for smoother, less resource-intensive animations. Adjust the number of steps and duration for desired effect.

```yaml
info_animation_duration_x: 10
info_animation_duration_y: 20
info_animation_timing_function_x: steps(3, end)
info_animation_timing_function_y: steps(3, end)
```

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

### Transparent Style Configuration

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/styling.md

Configure a transparent style for the WallPanel info box content, removing background and shadow, and setting text colors and text shadow for a translucent effect.

```yaml
style:
  wallpanel-screensaver-info-box:
    '--wp-card-width': 450px
  wallpanel-screensaver-info-box-content:
    '--ha-card-background': none
    '--ha-card-box-shadow': none
    '--ha-card-border-width': 0px
    text-shadow: -0.5px -0.5px 0 rgb(17, 17, 17), 0.5px -0.5px 0 rgb(17, 17, 17), -0.5px 0.5px 0 rgb(17, 17, 17), 0.5px 0.5px 0 rgb(17, 17, 17)
    '--primary-text-color': '#ffffff'
    '--secondary-text-color': '#dddddd'
```

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

### Utilize Full Screen Width and Height for a View

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/info-box.md

Configure a view to occupy the entire screen width and height, removing extra padding for a fullscreen experience.

```yaml
wallpanel:
  views:
    - title: Wallpanel
      wp_style:
        height: 100vh
        width: 100vw
  style:
    wallpanel-screensaver-info-container:
      padding: 0px
    wallpanel-screensaver-info-box-views:
      width: 100vw
      height: 100vh
```

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

### WallPanel Configuration: Immich API for Memories

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/media-sources.md

Configure WallPanel to display Immich memories by setting the `immich_memories` option to `true`. This requires the API URL and an API key to be set.

```yaml
image_url: immich+https://immich.your.domain/api
immich_api_keys:
  - 0vOb7EZ7YSajUQckMt6Cbnri8Ifzo5dlD9Q5hnnXlc
immich_memories: true
```

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

### Enable WallPanel for Specific Devices using Browser Mod

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/quick-start.md

Use Browser Mod to activate WallPanel on individual devices. Replace `<browser-id>` with the actual Browser ID obtained from Browser Mod. This allows for device-specific configurations.

```yaml
wallpanel:
  enabled: false
  profiles:
    device.<browser-id>:
      enabled: true
```

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

### Define Multiple Wallpanel Profiles

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/configuration.md

This YAML snippet shows how to define multiple profiles (night, black, user.jane, device.e9a2c86e_5526f1ee) within the wallpanel configuration. Settings within a profile override the default configuration when that profile is active.

```yaml
wallpanel:
  enabled: true
  idle_time: 60
  style:
    wallpanel-screensaver-overlay:
      background: '#00000000'
  profiles:
    night:
      idle_time: 5
      style:
        wallpanel-screensaver-overlay:
          background: '#000000bb'
    black:
      black_screen_after_time: 1
    user.jane:
      enabled: false
    device.e9a2c86e_5526f1ee:
      idle_time: 25
      screensaver_entity: input_boolean.kitchen_wallpanel_screensaver
```

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

### Configure Badges in Info Box

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/info-box.md

Add Home Assistant entities as badges to the Info Box using the same YAML configuration as in the Home Assistant Dashboard.

```yaml
wallpanel:
  badges:
    - entity: person.somebody
    - entity: sun.sun
```

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

### Light Style Configuration

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/styling.md

Apply a light theme to the WallPanel by setting background colors, box shadows, and text colors for various elements, including the container and info box.

```yaml
style:
  wallpanel-screensaver-container:
    background-color: '#333333dd'
  wallpanel-screensaver-info-box:
    '--wp-card-width': 450px
    background-color: '#ffffff99'
    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)
  wallpanel-screensaver-info-box-content:
    '--ha-card-background': none
    '--ha-card-box-shadow': none
    '--ha-card-border-width': 0px
    '--primary-background-color': '#fafafa'
    '--secondary-background-color': '#e5e5e5'
    '--primary-text-color': '#212121'
    '--secondary-text-color': '#727272'
```

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

### Enable WallPanel with Basic Configuration

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/quick-start.md

Add this configuration to your Home Assistant dashboard's raw configuration to enable WallPanel. It allows disabling the toolbar and sidebar, and setting fullscreen and idle time for the screensaver.

```yaml
wallpanel:
  enabled: true
  hide_toolbar: false
  hide_sidebar: true
  fullscreen: false
  idle_time: 10
```

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

### Set WallPanel Theme

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/styling.md

Specify the theme for the WallPanel Info Box using the `theme` configuration option.

```yaml
wallpanel:
  theme: Frosted Glass
```

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

### Dynamic Configuration with Browser ID Placeholder

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/configuration.md

If Browser Mod is available, use the `${browser_id}` placeholder to dynamically set configuration values, such as entity IDs.

```YAML
wallpanel:
  screensaver_entity: input_boolean.${browser_id}_wallpanel_screensaver
```

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

### Display Date or Folder Name with Fallback

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/media-info.md

Shows the original date formatted with year, month, and day, prefixed with 'Date: '. If the original date is not available, it displays the folder name prefixed with 'Folder: '.

```yaml
show_image_info: true
image_info_template: '${DateTimeOriginal!prefix=Date: !options=year:numeric,month:long,day:2-digit||image.folderName!prefix=Folder: }'
```

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

### Style WallPanel Image Info Layer (Alternative)

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/styling.md

An alternative styling for the image info layer with different positioning, font size, text stroke, color, font weight, and font family.

```yaml
style:
  wallpanel-screensaver-image-info:
    position: 'absolute'
    bottom: '0.5em'
    right: '1.0em'
    font-size: '2.5em'
    -webkit-text-stroke: '0.02em #000'
    color: '#ff9a00'
    font-weight: '900'
    font-family: 'monospace'
```

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

### Enable and Display Image Path

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/media-info.md

Enables the display of image information and sets a template to show the relative path of the image. The path is styled using inline CSS.

```yaml
show_image_info: true
image_info_template: >-
    <span style="font-family: 'Roboto Condensed', sans-serif; font-size: 1em; font-weight: 400; color: #999;">
      ${image.relativePath}
    </span>
```

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

### Configure Random Info Box Movement

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/info-box.md

Set the Info Box to move to a random position on the screen at a specified interval, with a defined fade duration for the transition.

```yaml
info_move_pattern: random
info_move_interval: 10
info_move_fade_duration: 2.0
```

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

### Manually Set a Wallpanel Profile

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/configuration.md

This YAML snippet shows how to manually set a specific profile (e.g., 'night') directly within the Wallpanel configuration. This method is typically used for static configurations.

```yaml
wallpanel:
  profile: night
```

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

### Activate WallPanel on Individual Devices

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/browser-mod.md

Set 'enabled' to false globally and define device-specific profiles to enable WallPanel only on designated devices. The placeholder `${browser_id}` is used to specify the device.

```yaml
wallpanel:
  enabled: false
  profiles:
    device.<browser-id>:
      enabled: true
```

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

### Dark Style Configuration

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/styling.md

Apply a dark theme to the WallPanel by setting background colors, box shadows, and text colors for various info box elements.

```yaml
style:
  wallpanel-screensaver-info-box:
    '--wp-card-width': 450px
    background-color: '#00000099'
    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)
  wallpanel-screensaver-info-box-content:
    '--ha-card-background': none
    '--ha-card-box-shadow': none
    '--ha-card-border-width': 0px
    '--primary-background-color': '#111111'
    '--secondary-background-color': '#202020'
    '--primary-text-color': '#e1e1e1'
    '--secondary-text-color': '#9b9b9b'
```

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

### Configure Home Assistant System Log Level

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/troubleshooting.md

Adjust the log level for WallPanel entries in the Home Assistant System Log. 'system_target_log_level' can map all WallPanel log levels to a specific target level.

```yaml
wallpanel:
  log_level_system: debug
  system_target_log_level: error
```

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

### Extended Wallpanel Configuration

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/configuration.md

An advanced configuration for the wallpanel integration, including view-specific enabling, idle timers, screensaver settings, and custom styling.

```yaml
wallpanel:
  enabled: true
  enabled_on_views:
    - default_view
  debug: false
  hide_toolbar: true
  hide_sidebar: true
  fullscreen: true
  idle_time: 10
  keep_screen_on_time: 86400
  black_screen_after_time: 7200
  control_reactivation_time: 1.0
  screensaver_start_navigation_path: /lovelace/default_view
  image_url: 'http://picsum.photos/${width}/${height}?random=${timestamp}'
  image_fit_landscape: cover
  media_list_update_interval: 3600
  media_order: 'sorted'
  exclude_filenames: []
  show_image_info: false
  fetch_address_data: true
  image_info_template: '${address.town|address.city!prefix=!suffix= // }${DateTimeOriginal!options=year:numeric,month:long}'
  screensaver_entity: input_boolean.wallpanel_screensaver
  info_animation_duration_x: 30
  info_animation_duration_y: 11
  info_animation_timing_function_x: 'ease-in-out'
  info_animation_timing_function_y: 'ease-in-out'
  info_move_pattern: random
  info_move_interval: 0
  info_move_fade_duration: 2.0
  content_interaction: true
  style:
    wallpanel-screensaver-info-box:
      font-size: 8vh
      font-weight: 600
      color: '#eeeeee'
      text-shadow: '-2px -2px 0 #03a9f4, 2px -2px 0 #03a9f4, -2px 2px 0 #03a9f4, 2px 2px 0 #03a9f4'
```

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

### Enable WallPanel Debug Mode

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/troubleshooting.md

Activate debug mode in WallPanel to display status information and enable log file downloads. This is useful for analyzing problems.

```yaml
wallpanel:
  debug: true
```

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

### Display Location and Date with Custom Formatting

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/media-info.md

Displays the town, city, or municipality, prefixed and suffixed with '// '. It also formats the original date using specified options. If the location tags are empty, only the date is shown.

```yaml
show_image_info: true
image_info_template: '<span style="color:#990000">//</span> ${address.town|address.city|address.municipality!prefix=!suffix= // }${DateTimeOriginal!options=year:numeric,month:long,day:2-digit}'
```

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

### Unsplash API Configuration

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/media-sources.md

Configure the Unsplash API to fetch random images. Ensure you replace YOUR_ACCESS_KEY with your actual Unsplash API key. The image_info_template allows displaying image descriptions.

```yaml
media_order: random
media_list_update_interval: 3600
image_url: https://api.unsplash.com/photos/random?client_id=YOUR_ACCESS_KEY&query=dogs
show_image_info: true
image_info_template: '<span style="color:#990000">//</span> ${description|alt_description}'
```

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

### Configure Browser Console Log Level

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/troubleshooting.md

Set the log level for WallPanel messages displayed in the browser console. Use 'debug' for detailed information during troubleshooting.

```yaml
wallpanel:
  log_level_console: debug
```

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

### Override Configuration with URL Query Parameter

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/configuration.md

Pass configuration parameters in the query string to override YAML settings. Use JSON syntax for values. Note that URL parameters may be lost during navigation.

```URL
http://hass:8123/lovelace/default_view?wp_hide_sidebar=false
```

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

### Alternative Transparent Style with Card Background Blur

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/styling.md

Achieve a blurred background effect for the info box content by setting a transparent background color and using `background-color` with `color-mix` and `backdrop-filter`.

```yaml
style:
  wallpanel-screensaver-info-box-content:
    background-color: '#0000'
    '--ha-card-background': 'color-mix(in srgb, var(--card-background-color) 30%, #0000'
    '--ha-card-backdrop-filter': blur(15px)
```

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

### Configure Screensaver Entity

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/screensaver.md

Set the screensaver_entity in the wallpanel configuration to link a Home Assistant input_boolean helper.

```yaml
wallpanel:
  screensaver_entity: input_boolean.kitchen_wallpanel_screensaver
```

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

### Run ESLint linter

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/DEVELOPMENT.md

Executes the ESLint linter to check for code style and potential errors in wallpanel-src.js. This helps maintain code quality.

```shell
npx eslint wallpanel-src.js
```

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

### Configure CSS Custom Properties for Info Box

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/styling.md

Set CSS custom properties for the WallPanel info box to control card width, margin, padding, and backdrop filter.

```yaml
style:
  wallpanel-screensaver-info-box:
    '--wp-card-width': 500px
    '--wp-card-margin': 5px
    '--wp-card-padding': 0px
    '--wp-card-backdrop-filter': none
```

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

### Position Cards using CSS Grid Layout

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/info-box.md

Control the placement and sizing of cards within the Info Box using CSS Grid properties like `grid-row` and `grid-column`.

```yaml
cards:
  - type: markdown
    content: Card 1
    wp_style:
      width: 810px
      grid-row: 1
      grid-column: 1 / span 2
  - type: markdown
    content: Card 2
    wp_style:
      width: 400px
      grid-row: 2
      grid-column: 2
  - type: markdown
    content: Card 3
    wp_style:
      width: 400px
      grid-row: 3
      grid-column: 1
  - type: markdown
    content: Card 4
    wp_style:
      width: 400px
      grid-row: 3
      grid-column: 2
```

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

### Device-Specific Screensaver Entity using ${browser_id}

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/browser-mod.md

Use the `${browser_id}` placeholder to define individual configuration attributes, such as a separate screensaver entity for each device, without needing a full profile.

```yaml
wallpanel:
  enabled: true
  screensaver_entity: input_boolean.screensaver_${browser_id}
```

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

### Configure Info Box Animation Durations

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/info-box.md

Set the duration in seconds for the Info Box to move across the screen in the X and Y directions. A value of 0 disables animation in that direction.

```yaml
info_animation_duration_x: 30
info_animation_duration_y: 13
```

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

### Device Specific Profile Configuration

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/browser-mod.md

Define separate profiles for different devices, specifying unique image URLs and screensaver entities for each. This allows for customized settings per device.

```yaml
wallpanel:
  enabled: true
  media_order: random
  profiles:
    device.e9a2c86e_5526f1ee:
      image_url: media-source://media_source/local/kitchen
      screensaver_entity: input_boolean.screensaver_kitchen
    device.89ae788b_cd883eb1:
      image_url: media-source://media_source/local/livingroom
      screensaver_entity: input_boolean.screensaver_livingroom
```

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

### Enable Info Box Content Interaction

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/info-box.md

Set `content_interaction` to `true` to enable interaction with elements within the Info Box, similar to a dashboard.

```yaml
wallpanel:
  content_interaction: true
```

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

### Screensaver Video Stream from Media Entity

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/media-sources.md

Use an entity's video stream as the screensaver media source. Set `image_url` to `media-entity-video://<entity_id>`. Set `media_entity_load_unchanged` to `false` to prevent updates if the stream remains the same.

```yaml
image_url: media-entity-video://camera.my_camera_entity_id
media_entity_load_unchanged: false
```

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

### Display Website in Iframe

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/media-sources.md

Use the `iframe+` prefix to embed a website in an iframe. Note that some websites may restrict iframe embedding via HTTP headers.

```yaml
image_url: iframe+https://projects.sntosh.in/clock/
```

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

### Reference Dashboard Views in Info Box

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/info-box.md

Display entire dashboard views within the Info Box by referencing them using their `title` or `path`.

```yaml
wallpanel:
  views:
    - title: Wallpanel
```

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

### Alternative Transparent Style with Text Shadow

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/styling.md

An alternative transparent style for the info box content, focusing on text shadow and using `filter: drop-shadow` for a distinct visual effect.

```yaml
style:
  wallpanel-screensaver-info-box-content:
    '--ha-card-background': none
    '--ha-card-box-shadow': none
    '--ha-card-border-width': 0px
    '--primary-text-color': '#ffffff'
    '--secondary-text-color': '#dddddd'
    filter: 'drop-shadow(0px 0px 3px rgb(17, 17, 17)) drop-shadow(0px 0px 8px rgb(30, 30, 30))'
```

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

### Screensaver Image from Media Entity

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/media-sources.md

Use an entity's `entity_picture` attribute as the media source. Set `image_url` to `media-entity-image://<entity_id>`. Images update when the entity state changes or after `display_time` passes.

```yaml
display_time: 15
image_url: media-entity-image://camera.my_camera_entity_id
media_entity_load_unchanged: true
```

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

### Configure Info Box Animation Timing Functions

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/info-box.md

Define the animation timing function for the X and Y directions of the Info Box movement, using CSS animation-timing-function values like `ease-in-out`.

```yaml
info_animation_timing_function_x: ease-in-out
info_animation_timing_function_y: ease-in-out
```

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

### Exclude Media Types from Local Media Source

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/media-sources.md

Use the `exclude_media_types` option to filter out specific media types like video from the slideshow.

```yaml
exclude_media_types:
  - video
```

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

### Automatically fix ESLint issues

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/DEVELOPMENT.md

Runs the ESLint linter and automatically attempts to fix any detected code style issues in wallpanel-src.js. Use this to quickly resolve common problems.

```shell
npx eslint --fix wallpanel-src.js
```

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

### Traefik Reverse Proxy Configuration for Immich CORS

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/media-sources.md

This Traefik configuration sets up CORS headers for the Immich API. It defines middlewares to allow specific origins, methods, and headers, and sets a maximum age for preflight requests.

```traefik
traefik.http.middlewares.immich-cors.headers.accessControlAllowOriginList=*
traefik.http.middlewares.immich-cors.headers.accessControlAllowMethods=GET, PUT, POST, DELETE, OPTIONS
traefik.http.middlewares.immich-cors.headers.accessControlAllowHeaders=X-Api-Key, User-Agent, Content-Type
traefik.http.middlewares.immich-cors.headers.accessControlMaxAge=1728000
traefik.http.routers.immich.middlewares=immich-cors
```

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

### Exclude Filenames from Local Media Source

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/media-sources.md

Use the `exclude_filenames` option to prevent specific files or directories from being used as media sources. This accepts a list of regular expressions.

```yaml
exclude_filenames:
  - '\.heic$'
  - '\.[tT][iI][fF][fF]?$'
  - '/@eaDir'
```

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

### Configure WallPanel to Display a Specific View

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/quick-start.md

To display a specific view above the screensaver images, refer to an existing dashboard view by its title or path. This configuration snippet shows how to set a title for the WallPanel view.

```yaml
wallpanel:
  enabled: true
  cards: []
  views:
    - title: Wallpanel
```

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

### Enlarge Info Box View Content

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/info-box.md

Scale up the content within the Info Box views by applying a CSS `transform: scale()` property.

```yaml
wallpanel:
  views:
    - title: Wallpanel
  style:
    wallpanel-screensaver-info-box-views:
      transform: scale(1.2)
      transform-origin: top center
```

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

### Exclude Media Orientation

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/media-sources.md

Configure `exclude_media_orientation` to filter media based on its orientation. This option is currently only supported for the Immich media source. Valid values are 'landscape', 'portrait', or 'auto'.

```yaml
exclude_media_orientation: auto
```

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

### Apply Custom Styles to Individual Cards

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/styling.md

Use the `wp_style` attribute for individual cards to set specific CSS styles, such as margin and background color.

```yaml
cards:
  - type: weather-forecast
    entity: weather.home
    wp_style:
      margin-top: 10px
      '--ha-card-background': '#990000'
```

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

### Call WallPanel Functions from Browser Mod Service

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/browser-mod.md

Programmatically control WallPanel functions like stopping the screensaver or toggling slideshow playback using JavaScript within a Browser Mod service call.

```javascript
document.querySelector("home-assistant").shadowRoot.querySelector("home-assistant-main").shadowRoot.querySelector("wallpanel-view").stopScreensaver();
```

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

### Nginx Reverse Proxy Configuration for Immich CORS

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/media-sources.md

This Nginx configuration helps bypass Immich server CORS limitations by handling OPTIONS requests and allowing specified methods and headers. It's crucial for direct browser requests to the Immich API.

```nginx
if ($request_method = 'OPTIONS') {
  add_header 'Access-Control-Allow-Origin' '*' always;
  add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, DELETE, OPTIONS' always;
  add_header 'Access-Control-Allow-Headers' 'X-Api-Key, User-Agent, Content-Type' always;
  add_header 'Access-Control-Max-Age' 1728000;
  add_header 'Content-Type' 'text/plain charset=UTF-8';
  add_header 'Content-Length' 0;
  return 204;
}
if ($request_method ~* '(GET|POST)') {
    add_header 'Access-Control-Allow-Origin' '*' always;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
    add_header 'Access-Control-Allow-Headers' 'X-Api-Key, User-Agent, Content-Type' always;
    add_header 'Access-Control-Max-Age' 1728000;
}
```

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

### Embed External Content

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/media-sources.md

Use the `embed+` prefix to embed external content, such as PDFs, in an HTML embed element.

```yaml
image_url: embed+https://external.source.test/embed.pdf
```

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

### Disable Screensaver via Automation

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/screensaver.md

Use an automation action to turn off the linked input_boolean helper to disable the screensaver.

```yaml
...
- action: input_boolean.turn_off
  target:
    entity_id: input_boolean.kitchen_wallpanel_screensaver
```

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

### Conditionally Disable Screensaver on Browser Mod Popup

Source: https://github.com/j-a-n/lovelace-wallpanel/blob/main/docs/browser-mod.md

Use the `disable_screensaver_on_browser_mod_popup_func` option with JavaScript to disable the screensaver based on the content of an active Browser Mod popup. The `bmp` variable refers to the popup element.

```yaml
wallpanel:
  disable_screensaver_on_browser_mod_popup_func: |
    let elements = bmp.shadowRoot.querySelector(".container").children;
    return Array.from(elements).some(n => n.nodeName.toLowerCase() === "webrtc-camera");
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.