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

feat: Allow control of where selected item is in grid (#1979)

Browse Source 
- Closes: #1946
This commit is contained in:
Dermot Duffy
2025-03-23 14:49:47 -07:00
committed by GitHub
parent 8512df1720
commit f140f6a653
14 changed files with 226 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/configuration/grid-layout-algorithm.md
+23 -4
View File
@@ -1,10 +1,29 @@
# Grid Layout Algorithm
When display mode (in `live` or `media_viewer` views) is set to `grid`, it will lay out cameras roughly in the order they are specified in the config (items may be moved to optimize grid 'density').
When display mode (in [`live`](live.md?id=display) or
[`media_viewer`](media-viewer.md?id=display) views) is set to `grid`, this
algorithm is used to control the layout.
The following algorithm is used to calculate the number of columns. This attempts to offers a balance between configurability, reasonable display in a typical Lovelace card width and reasonable display in a typical fullscreen display.
## Layout Order
Cameras are laid out horizontally in the order they are specified in the config,
first to last. The card may tweak item positioning in order to optimize grid
'density'.
In addition, if the `grid_selected_position` parameter is `first` or `last`, the
selected camera is always laid out first (at the top) or last (at the bottom) of
the layout.
## Number of columns in the grid
The following algorithm is used to calculate the number of columns. This
attempts to offers a balance between configurability, reasonable display in a
typical Lovelace card width and reasonable display in a typical fullscreen
display.
- Use `grid_columns` if specified.
- Otherwise, use the largest number of columns in the range `[2 - grid_max_columns]` that will fit at least a `600px` column width.
- Otherwise, use the largest number of columns in the range `[2 - grid_max_columns]` that will fit at least a `190px` column width.
- Otherwise, use the largest number of columns in the range `[2 -
grid_max_columns]` that will fit at least a `600px` column width.
- Otherwise, use the largest number of columns in the range `[2 -
grid_max_columns]` that will fit at least a `190px` column width.
- Otherwise, there will be `1` column only.
docs/configuration/live.md
+10 -6
View File
@@ -153,12 +153,15 @@ live:
# [...]
```
| Option | Default | Description |
| ---------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `grid_columns` | | If specified the grid will always have exactly this number of columns. |
| `grid_max_columns` | `4` | If specified, and `grid_columns` is not specified, the grid will not render more than this number of columns. The precise number will be calculated based on the [grid layout algorithm](grid-layout-algorithm.md). |
| `grid_selected_width_factor` | `2` | How much to scale up the selected media item in a grid. A value of `1` will not scale the selected item at all, the default value of `2` will scale the media item width to twice what it would otherwise be, etc. |
| `mode` | `single` | Whether to display a `single` live camera in a carousel, or all cameras in a `grid` configuration. |
| Option | Default | Description |
| ---------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `grid_columns` | | If specified the grid will always have exactly this number of columns. |
| `grid_max_columns` | `4` | If specified, and `grid_columns` is not specified, the grid will not render more than this number of columns. |
| `grid_selected_position` | `default` | Controls where the selected item should be laid out in the grid. If `default`, the cameras are laid out in the order they are specified in the configuration and selecting a camera does not change this order. If `first`, the selected camera is moved to the start of the grid, if `last` it is moved to the end of the grid. |
| `grid_selected_width_factor` | `2` | How much to scale up the selected media item in a grid. A value of `1` will not scale the selected item at all, the default value of `2` will scale the media item width to twice what it would otherwise be, etc. |
| `mode` | `single` | Whether to display a `single` live camera in a carousel, or all cameras in a `grid` configuration. |
See the [grid layout algorithm](grid-layout-algorithm.md) for more details on how the grid lays elements out.
## `microphone`
@@ -238,6 +241,7 @@ live:
mute_after_microphone_mute_seconds: 60
display:
mode: single
grid_selected_position: default
grid_selected_width_factor: 2
grid_max_columns: 4
actions:
docs/configuration/media-viewer.md
+10 -6
View File
@@ -147,12 +147,15 @@ media_viewer:
# [...]
```
| Option | Default | Description |
| ---------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `grid_columns` | | If specified the grid will always have exactly this number of columns. |
| `grid_max_columns` | `4` | If specified, and `grid_columns` is not specified, the grid will not render more than this number of columns. The precise number will be calculated based on the [grid layout algorithm](grid-layout-algorithm.md). |
| `grid_selected_width_factor` | `2` | How much to scale up the selected media item in a grid. A value of `1` will not scale the selected item at all, the default value of `2` will scale the media item width to twice what it would otherwise be, etc. |
| `mode` | `single` | Whether to display a `single` media item at a time, or a media item for all cameras in a `grid` configuration. |
| Option | Default | Description |
| ---------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `grid_columns` | | If specified the grid will always have exactly this number of columns. |
| `grid_max_columns` | `4` | If specified, and `grid_columns` is not specified, the grid will not render more than this number of columns. |
| `grid_selected_position` | `default` | Controls where the selected item should be laid out in the grid. If `default`, the cameras are laid out in the order they are specified in the configuration and selecting a camera does not change this order. If `first`, the selected camera is moved to the start of the grid, if `last` it is moved to the end of the grid. |
| `grid_selected_width_factor` | `2` | How much to scale up the selected media item in a grid. A value of `1` will not scale the selected item at all, the default value of `2` will scale the media item width to twice what it would otherwise be, etc. |
| `mode` | `single` | Whether to display a `single` media item at a time, or a media item for all cameras in a `grid` configuration. |
See the [grid layout algorithm](grid-layout-algorithm.md) for more details on how the grid lays elements out.
## Fully expanded reference
@@ -209,6 +212,7 @@ media_viewer:
24h: true
display:
mode: single
grid_selected_position: default
grid_selected_width_factor: 2
grid_max_columns: 4
actions: