Add UI for setting view background #20708
Conversation
Nezz
force-pushed
the
feature/ViewBackground
branch
3 times, most recently
from
bfa24e7
to
7c31e69
Compare
|
I spent way too much time trying to figure out why eslint errors out in the CI but not locally. As it turns out this was just broken by |
| const backgroundUrl = (ev.target as HaPictureUpload).value; | ||
| const config = { | ||
| ...this._config, | ||
| background: backgroundUrl |
There was a problem hiding this comment.
This is an old (and deprecated?) way of setting the background, preferably it should use themes
There was a problem hiding this comment.
The limitation of themes is that they are global, whereas this setting allows people to set a background per view (i.e. show kitchen stuff for the kitchen view). This was requested here:
https://www.reddit.com/r/homeassistant/comments/1cij7oa/comment/l29nul3/?utm_source=reddit&utm_medium=web2x&context=3
There was a problem hiding this comment.
Themes are not global, you can set a theme on a specific view or even a card.
There was a problem hiding this comment.
It wouldn't really help with this because
- You'd need to create a separate theme for each view. This would result in lots of duplication because I'm not aware of templating/partial overrides existing for themes.
- There's no visual editor for themes, so discoverability would still remain an issue.
I think the current behaviour is perfect where a theme can define a default background, but a view can choose to deviate from it.
src/data/image_upload.ts
Outdated
| `/api/image/serve/${mediaId}/${size}x${size}`; | ||
| export const generateImageThumbnailUrl = ( | ||
| mediaId: string, | ||
| size: number, |
There was a problem hiding this comment.
size should be optional now that original can be set, if original is false size should be set.
| size?: number, | ||
| original: boolean = false | ||
| ) => { | ||
| if (!original && !size) { | ||
| throw new Error("Size must be provided if original is false"); | ||
| } | ||
|
|
||
| return original | ||
| ? `/api/image/serve/${mediaId}/original` | ||
| : `/api/image/serve/${mediaId}/${size}x${size}`; |
There was a problem hiding this comment.
or maybe don't use an original parameter, so if size is not set, provide the original
| size?: number, | |
| original: boolean = false | |
| ) => { | |
| if (!original && !size) { | |
| throw new Error("Size must be provided if original is false"); | |
| } | |
| return original | |
| ? `/api/image/serve/${mediaId}/original` | |
| : `/api/image/serve/${mediaId}/${size}x${size}`; | |
| size?: number | |
| ) => { | |
| return size && size > 0 | |
| ? `/api/image/serve/${mediaId}/${size}x${size}` | |
| : `/api/image/serve/${mediaId}/original`; |
There was a problem hiding this comment.
I was thinking about that approach, but in ha-picture-upload we use the same structure (original defaulting to false, size defaulting to 512) and I thought it'd be cleaner to keep it unified. Alternatively the original property could be removed in ha-picture-upload and the default of size could be changed to 0, but I'm not a fan of changing the default size to an "invalid" one.
WalkthroughWalkthroughThe recent updates introduce enhancements to the image upload and view editing functionalities in the Home Assistant frontend. A significant addition is the ability to manage original images and their thumbnails, alongside a new user interface for editing view backgrounds. These changes improve the flexibility and user experience of customizing Lovelace views, providing more control over background settings and image handling. Changes
Tip New Features and ImprovementsReview SettingsIntroduced new personality profiles for code reviews. Users can now select between "Chill" and "Assertive" review tones to tailor feedback styles according to their preferences. The "Assertive" profile posts more comments and nitpicks the code more aggressively, while the "Chill" profile is more relaxed and posts fewer comments. AST-based InstructionsCodeRabbit offers customizing reviews based on the Abstract Syntax Tree (AST) pattern matching. Read more about AST-based instructions in the documentation. Community-driven AST-based RulesWe are kicking off a community-driven initiative to create and share AST-based rules. Users can now contribute their AST-based rules to detect security vulnerabilities, code smells, and anti-patterns. Please see the ast-grep-essentials repository for more information. New Static Analysis ToolsWe are continually expanding our support for static analysis tools. We have added support for Tone SettingsUsers can now customize CodeRabbit to review code in the style of their favorite characters or personalities. Here are some of our favorite examples:
Revamped Settings PageWe have redesigned the settings page for a more intuitive layout, enabling users to find and adjust settings quickly. This change was long overdue; it not only improves the user experience but also allows our development team to add more settings in the future with ease. Going forward, the changes to Miscellaneous
Recent Review DetailsConfiguration used: CodeRabbit UI Files selected for processing (5)
Additional Context UsedBiome (32)
Additional comments not posted (1)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Outside diff range and nitpick comments (3)
src/data/image_upload.ts (1)
Line range hint
44-46: Consider simplifying the error handling by removing the unnecessary else clause.if (resp.status === 413) { throw new Error(`Uploaded image is too large (${file.name})`); - } else if (resp.status !== 200) { + } if (resp.status !== 200) { throw new Error("Unknown error"); }src/components/ha-picture-upload.ts (1)
Line range hint
34-131: The addition of theoriginalproperty and its usage in the_uploadFilemethod are well-implemented. Consider specifying a more accurate type thananyfor error handling.- } catch (err: any) { + } catch (err: Error) { showAlertDialog(this, { text: err.toString(), }); }src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts (1)
Line range hint
52-167: The integration of the new "Background" tab and theHuiViewBackgroundEditorcomponent is well-executed. Consider using more descriptive variable names for better code readability.- const isCompatibleViewType = + const isViewTypeCompatible =
| export const generateImageThumbnailUrl = ( | ||
| mediaId: string, | ||
| size?: number, | ||
| original: boolean = false | ||
| ) => { | ||
| if (!original && !size) { | ||
| throw new Error("Size must be provided if original is false"); | ||
| } | ||
|
|
||
| return original | ||
| ? `/api/image/serve/${mediaId}/original` | ||
| : `/api/image/serve/${mediaId}/${size}x${size}`; | ||
| }; |
There was a problem hiding this comment.
The updated function signature and error handling logic look good. However, consider adding explicit type annotations for clarity.
- export const generateImageThumbnailUrl = (
+ export const generateImageThumbnailUrl = (mediaId: string, size?: number, original: boolean = false): string => {Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| export const generateImageThumbnailUrl = ( | |
| mediaId: string, | |
| size?: number, | |
| original: boolean = false | |
| ) => { | |
| if (!original && !size) { | |
| throw new Error("Size must be provided if original is false"); | |
| } | |
| return original | |
| ? `/api/image/serve/${mediaId}/original` | |
| : `/api/image/serve/${mediaId}/${size}x${size}`; | |
| }; | |
| export const generateImageThumbnailUrl = (mediaId: string, size?: number, original: boolean = false): string => { | |
| if (!original && !size) { | |
| throw new Error("Size must be provided if original is false"); | |
| } | |
| return original | |
| ? `/api/image/serve/${mediaId}/original` | |
| : `/api/image/serve/${mediaId}/${size}x${size}`; | |
| }; |
| import "@material/mwc-list/mwc-list-item"; | ||
| import { CSSResultGroup, LitElement, css, html, nothing } from "lit"; | ||
| import { customElement, property, state } from "lit/decorators"; | ||
| import { fireEvent } from "../../../../common/dom/fire_event"; | ||
| import "../../../../components/user/ha-user-badge"; | ||
| import { LovelaceViewConfig } from "../../../../data/lovelace/config/view"; | ||
| import { HomeAssistant, ValueChangedEvent } from "../../../../types"; | ||
| import "../../../../components/ha-picture-upload"; | ||
| import type { HaPictureUpload } from "../../../../components/ha-picture-upload"; | ||
| import { CropOptions } from "../../../../dialogs/image-cropper-dialog/show-image-cropper-dialog"; | ||
|
|
||
| const cropOptions: CropOptions = { | ||
| round: false, | ||
| type: "image/jpeg", | ||
| quality: 0.75, | ||
| aspectRatio: 1.78, | ||
| }; | ||
|
|
||
| @customElement("hui-view-background-editor") | ||
| export class HuiViewBackgroundEditor extends LitElement { | ||
| @property({ attribute: false }) public hass!: HomeAssistant; | ||
|
|
||
| @state() private _config!: LovelaceViewConfig; | ||
|
|
||
| set config(config: LovelaceViewConfig) { | ||
| this._config = config; | ||
| } | ||
|
|
||
| protected render() { | ||
| if (!this.hass) { | ||
| return nothing; | ||
| } | ||
|
|
||
| const backgroundUrlRegex = /url\(['"]?([^'"]+)['"]?\)/; | ||
| const backgroundUrlMatch = backgroundUrlRegex.exec( | ||
| this._config?.background || "" | ||
| ); | ||
| const backgroundUrl = backgroundUrlMatch ? backgroundUrlMatch[1] : null; | ||
|
|
||
| return html` | ||
| <p> | ||
| ${this.hass.localize( | ||
| "ui.panel.lovelace.editor.edit_view.background.title" | ||
| )} | ||
| </p> | ||
| <ha-picture-upload | ||
| .hass=${this.hass} | ||
| .value=${backgroundUrl} | ||
| crop | ||
| .cropOptions=${cropOptions} | ||
| original | ||
| @change=${this._backgroundChanged} | ||
| ></ha-picture-upload> | ||
| `; | ||
| } | ||
|
|
||
| private _backgroundChanged(ev: ValueChangedEvent<string | null>) { | ||
| const backgroundUrl = (ev.target as HaPictureUpload).value; | ||
| const config = { | ||
| ...this._config, | ||
| background: backgroundUrl | ||
| ? `center / cover no-repeat url('${backgroundUrl}')` | ||
| : undefined, | ||
| }; | ||
| fireEvent(this, "view-config-changed", { config }); | ||
| } | ||
|
|
||
| static get styles(): CSSResultGroup { | ||
| return css` | ||
| :host { | ||
| display: block; | ||
| } | ||
| `; | ||
| } | ||
| } | ||
|
|
||
| declare global { | ||
| interface HTMLElementTagNameMap { | ||
| "hui-view-background-editor": HuiViewBackgroundEditor; | ||
| } | ||
| } |
There was a problem hiding this comment.
The new HuiViewBackgroundEditor component is well-implemented. Consider using type-only imports to clarify that certain imports are only used for type information.
- import { HomeAssistant, ValueChangedEvent } from "../../../../types";
+ import type { HomeAssistant, ValueChangedEvent } from "../../../../types";Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| import "@material/mwc-list/mwc-list-item"; | |
| import { CSSResultGroup, LitElement, css, html, nothing } from "lit"; | |
| import { customElement, property, state } from "lit/decorators"; | |
| import { fireEvent } from "../../../../common/dom/fire_event"; | |
| import "../../../../components/user/ha-user-badge"; | |
| import { LovelaceViewConfig } from "../../../../data/lovelace/config/view"; | |
| import { HomeAssistant, ValueChangedEvent } from "../../../../types"; | |
| import "../../../../components/ha-picture-upload"; | |
| import type { HaPictureUpload } from "../../../../components/ha-picture-upload"; | |
| import { CropOptions } from "../../../../dialogs/image-cropper-dialog/show-image-cropper-dialog"; | |
| const cropOptions: CropOptions = { | |
| round: false, | |
| type: "image/jpeg", | |
| quality: 0.75, | |
| aspectRatio: 1.78, | |
| }; | |
| @customElement("hui-view-background-editor") | |
| export class HuiViewBackgroundEditor extends LitElement { | |
| @property({ attribute: false }) public hass!: HomeAssistant; | |
| @state() private _config!: LovelaceViewConfig; | |
| set config(config: LovelaceViewConfig) { | |
| this._config = config; | |
| } | |
| protected render() { | |
| if (!this.hass) { | |
| return nothing; | |
| } | |
| const backgroundUrlRegex = /url\(['"]?([^'"]+)['"]?\)/; | |
| const backgroundUrlMatch = backgroundUrlRegex.exec( | |
| this._config?.background || "" | |
| ); | |
| const backgroundUrl = backgroundUrlMatch ? backgroundUrlMatch[1] : null; | |
| return html` | |
| <p> | |
| ${this.hass.localize( | |
| "ui.panel.lovelace.editor.edit_view.background.title" | |
| )} | |
| </p> | |
| <ha-picture-upload | |
| .hass=${this.hass} | |
| .value=${backgroundUrl} | |
| crop | |
| .cropOptions=${cropOptions} | |
| original | |
| @change=${this._backgroundChanged} | |
| ></ha-picture-upload> | |
| `; | |
| } | |
| private _backgroundChanged(ev: ValueChangedEvent<string | null>) { | |
| const backgroundUrl = (ev.target as HaPictureUpload).value; | |
| const config = { | |
| ...this._config, | |
| background: backgroundUrl | |
| ? `center / cover no-repeat url('${backgroundUrl}')` | |
| : undefined, | |
| }; | |
| fireEvent(this, "view-config-changed", { config }); | |
| } | |
| static get styles(): CSSResultGroup { | |
| return css` | |
| :host { | |
| display: block; | |
| } | |
| `; | |
| } | |
| } | |
| declare global { | |
| interface HTMLElementTagNameMap { | |
| "hui-view-background-editor": HuiViewBackgroundEditor; | |
| } | |
| } | |
| import "@material/mwc-list/mwc-list-item"; | |
| import { CSSResultGroup, LitElement, css, html, nothing } from "lit"; | |
| import { customElement, property, state } from "lit/decorators"; | |
| import { fireEvent } from "../../../../common/dom/fire_event"; | |
| import "../../../../components/user/ha-user-badge"; | |
| import { LovelaceViewConfig } from "../../../../data/lovelace/config/view"; | |
| import type { HomeAssistant, ValueChangedEvent } from "../../../../types"; | |
| import "../../../../components/ha-picture-upload"; | |
| import type { HaPictureUpload } from "../../../../components/ha-picture-upload"; | |
| import { CropOptions } from "../../../../dialogs/image-cropper-dialog/show-image-cropper-dialog"; | |
| const cropOptions: CropOptions = { | |
| round: false, | |
| type: "image/jpeg", | |
| quality: 0.75, | |
| aspectRatio: 1.78, | |
| }; | |
| @customElement("hui-view-background-editor") | |
| export class HuiViewBackgroundEditor extends LitElement { | |
| @property({ attribute: false }) public hass!: HomeAssistant; | |
| @state() private _config!: LovelaceViewConfig; | |
| set config(config: LovelaceViewConfig) { | |
| this._config = config; | |
| } | |
| protected render() { | |
| if (!this.hass) { | |
| return nothing; | |
| } | |
| const backgroundUrlRegex = /url\(['"]?([^'"]+)['"]?\)/; | |
| const backgroundUrlMatch = backgroundUrlRegex.exec( | |
| this._config?.background || "" | |
| ); | |
| const backgroundUrl = backgroundUrlMatch ? backgroundUrlMatch[1] : null; | |
| return html` | |
| <p> | |
| ${this.hass.localize( | |
| "ui.panel.lovelace.editor.edit_view.background.title" | |
| )} | |
| </p> | |
| <ha-picture-upload | |
| .hass=${this.hass} | |
| .value=${backgroundUrl} | |
| crop | |
| .cropOptions=${cropOptions} | |
| original | |
| @change=${this._backgroundChanged} | |
| ></ha-picture-upload> | |
| `; | |
| } | |
| private _backgroundChanged(ev: ValueChangedEvent<string | null>) { | |
| const backgroundUrl = (ev.target as HaPictureUpload).value; | |
| const config = { | |
| ...this._config, | |
| background: backgroundUrl | |
| ? `center / cover no-repeat url('${backgroundUrl}')` | |
| : undefined, | |
| }; | |
| fireEvent(this, "view-config-changed", { config }); | |
| } | |
| static get styles(): CSSResultGroup { | |
| return css` | |
| :host { | |
| display: block; | |
| } | |
| `; | |
| } | |
| } | |
| declare global { | |
| interface HTMLElementTagNameMap { | |
| "hui-view-background-editor": HuiViewBackgroundEditor; | |
| } | |
| } |
Proposed change
Add UI for setting view background. As it turns out most people don't know that this feature even exists because it needs to be configured by manually uploading a file somewhere then configuring the URL through YAML.
Depends on home-assistant/core#116652 to enable serving images larger than 512px.
Type of change
Example configuration
No more YAML needed 🎉
Additional information
Checklist
If user exposed functionality or configuration variables are added/changed:
Summary by CodeRabbit
New Features
Improvements