View background settings

cast/src/receiver/layout/hc-lovelace.ts

@@ -14,6 +14,7 @@ import "../../../../src/panels/lovelace/views/hui-view";
 import "../../../../src/panels/lovelace/views/hui-view-container";
 import type { HomeAssistant } from "../../../../src/types";
 import "./hc-launch-screen";
+import "../../../../src/panels/lovelace/views/hui-view-background";
 
 (window as any).loadCardHelpers = () =>
   import("../../../../src/panels/lovelace/custom-card-helpers");
@@ -57,11 +58,8 @@ class HcLovelace extends LitElement {
     const background = viewConfig.background || this.lovelaceConfig.background;
 
     return html`
-      <hui-view-container
-        .hass=${this.hass}
-        .background=${background}
-        .theme=${viewConfig.theme}
-      >
+      <hui-view-container .hass=${this.hass} .theme=${viewConfig.theme}>
+        <hui-view-background .background=${background}> </hui-view-background>
         <hui-view
           .hass=${this.hass}
           .lovelace=${lovelace}

src/components/ha-selector/ha-selector-button-toggle.ts

@@ -0,0 +1,98 @@
+import "@material/mwc-list/mwc-list-item";
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators";
+import { fireEvent } from "../../common/dom/fire_event";
+import { caseInsensitiveStringCompare } from "../../common/string/compare";
+import type { ButtonToggleSelector, SelectOption } from "../../data/selector";
+import type { HomeAssistant, ToggleButton } from "../../types";
+import "../ha-button-toggle-group";
+
+@customElement("ha-selector-button_toggle")
+export class HaButtonToggleSelector extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public selector!: ButtonToggleSelector;
+
+  @property() public value?: string;
+
+  @property() public label?: string;
+
+  @property() public helper?: string;
+
+  @property({ attribute: false })
+  public localizeValue?: (key: string) => string;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean }) public required = true;
+
+  protected render() {
+    const options =
+      this.selector.button_toggle?.options?.map((option) =>
+        typeof option === "object"
+          ? (option as SelectOption)
+          : ({ value: option, label: option } as SelectOption)
+      ) || [];
+
+    const translationKey = this.selector.button_toggle?.translation_key;
+
+    if (this.localizeValue && translationKey) {
+      options.forEach((option) => {
+        const localizedLabel = this.localizeValue!(
+          `${translationKey}.options.${option.value}`
+        );
+        if (localizedLabel) {
+          option.label = localizedLabel;
+        }
+      });
+    }
+
+    if (this.selector.button_toggle?.sort) {
+      options.sort((a, b) =>
+        caseInsensitiveStringCompare(
+          a.label,
+          b.label,
+          this.hass.locale.language
+        )
+      );
+    }
+
+    const toggleButtons: ToggleButton[] = options.map((item: SelectOption) => ({
+      label: item.label,
+      value: item.value,
+    }));
+
+    return html`
+      ${this.label}
+      <ha-button-toggle-group
+        .buttons=${toggleButtons}
+        .active=${this.value}
+        @value-changed=${this._valueChanged}
+      ></ha-button-toggle-group>
+    `;
+  }
+
+  private _valueChanged(ev) {
+    ev.stopPropagation();
+
+    const value = ev.detail?.value || ev.target.value;
+    if (this.disabled || value === undefined || value === (this.value ?? "")) {
+      return;
+    }
+    fireEvent(this, "value-changed", {
+      value: value,
+    });
+  }
+
+  static styles = css`
+    :host {
+      position: relative;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-button_toggle": HaButtonToggleSelector;
+  }
+}

src/components/ha-selector/ha-selector.ts

@@ -51,6 +51,7 @@ const LOAD_ELEMENTS = {
   icon: () => import("./ha-selector-icon"),
   media: () => import("./ha-selector-media"),
   theme: () => import("./ha-selector-theme"),
+  button_toggle: () => import("./ha-selector-button-toggle"),
   trigger: () => import("./ha-selector-trigger"),
   tts: () => import("./ha-selector-tts"),
   tts_voice: () => import("./ha-selector-tts-voice"),

src/data/lovelace/config/view.ts

@@ -7,8 +7,22 @@ export interface ShowViewConfig {
   user?: string;
 }
 
-interface LovelaceViewBackgroundConfig {
+export interface LovelaceViewBackgroundConfig {
   image?: string;
+  transparency?: number;
+  size?: "auto" | "cover" | "contain";
+  alignment?:
+    | "top left"
+    | "top center"
+    | "top right"
+    | "center left"
+    | "center"
+    | "center right"
+    | "bottom left"
+    | "bottom center"
+    | "bottom right";
+  repeat?: "repeat" | "no-repeat";
+  attachment?: "scroll" | "fixed";
 }
 
 export interface LovelaceBaseViewConfig {

src/data/selector.ts

@@ -26,6 +26,7 @@ export type Selector =
   | AreaFilterSelector
   | AttributeSelector
   | BooleanSelector
+  | ButtonToggleSelector
   | ColorRGBSelector
   | ColorTempSelector
   | ConditionSelector
@@ -108,6 +109,14 @@ export interface BooleanSelector {
   boolean: {} | null;
 }
 
+export interface ButtonToggleSelector {
+  button_toggle: {
+    options: readonly string[] | readonly SelectOption[];
+    translation_key?: string;
+    sort?: boolean;
+  } | null;
+}
+
 export interface ColorRGBSelector {
   // eslint-disable-next-line @typescript-eslint/ban-types
   color_rgb: {} | null;

src/panels/lovelace/editor/view-editor/hui-view-background-editor.ts

@@ -1,13 +1,14 @@
 import "@material/mwc-list/mwc-list-item";
 import type { CSSResultGroup } from "lit";
+import memoizeOne from "memoize-one";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import "../../../../components/ha-form/ha-form";
+import type { SchemaUnion } from "../../../../components/ha-form/types";
 import "../../../../components/ha-selector/ha-selector-image";
 import type { LovelaceViewConfig } from "../../../../data/lovelace/config/view";
-import type { HomeAssistant, ValueChangedEvent } from "../../../../types";
-
-const SELECTOR = { image: { original: true } };
+import type { HomeAssistant } from "../../../../types";
 
 @customElement("hui-view-background-editor")
 export class HuiViewBackgroundEditor extends LitElement {
@@ -19,44 +20,162 @@ export class HuiViewBackgroundEditor extends LitElement {
     this._config = config;
   }
 
+  private _localizeValueCallback = (key: string) =>
+    this.hass.localize(key as any);
+
+  private _schema = memoizeOne((showSettings: boolean) => [
+    {
+      name: "image",
+      selector: { image: { original: true } },
+    },
+    ...(showSettings
+      ? ([
+          {
+            name: "settings",
+            flatten: true,
+            expanded: true,
+            type: "expandable" as const,
+            schema: [
+              {
+                name: "transparency",
+                selector: {
+                  number: { min: 1, max: 100, mode: "slider" },
+                },
+              },
+              {
+                name: "attachment",
+                selector: {
+                  button_toggle: {
+                    translation_key:
+                      "ui.panel.lovelace.editor.edit_view.background.attachment",
+                    options: ["scroll", "fixed"],
+                  },
+                },
+              },
+              {
+                name: "size",
+                selector: {
+                  select: {
+                    translation_key:
+                      "ui.panel.lovelace.editor.edit_view.background.size",
+                    options: ["auto", "cover", "contain"],
+                  },
+                },
+              },
+              {
+                name: "alignment",
+                selector: {
+                  select: {
+                    translation_key:
+                      "ui.panel.lovelace.editor.edit_view.background.alignment",
+                    options: [
+                      "top left",
+                      "top center",
+                      "top right",
+                      "center left",
+                      "center",
+                      "center right",
+                      "bottom left",
+                      "bottom center",
+                      "bottom right",
+                    ],
+                  },
+                },
+              },
+              {
+                name: "repeat",
+                selector: {
+                  select: {
+                    translation_key:
+                      "ui.panel.lovelace.editor.edit_view.background.repeat",
+                    options: ["repeat", "no-repeat"],
+                  },
+                },
+              },
+            ],
+          },
+        ] as const)
+      : []),
+  ]);
+
   protected render() {
     if (!this.hass) {
       return nothing;
     }
 
-    const background = this._config?.background;
-    const backgroundUrl =
-      typeof background === "string"
-        ? background.match(/url\(['"]?([^'"]+)['"]?\)/)?.[1]
-        : background?.image;
+    let background = this._config?.background;
+    if (typeof background === "string") {
+      const backgroundUrl = background.match(/url\(['"]?([^'"]+)['"]?\)/)?.[1];
+
+      background = {
+        image: backgroundUrl,
+      };
+    }
+
+    background = {
+      transparency: 100,
+      alignment: "center",
+      size: "auto",
+      repeat: "no-repeat",
+      attachment: "scroll",
+      ...background,
+    };
 
     return html`
-      <ha-selector-image
+      <ha-form
         .hass=${this.hass}
-        .label=${this.hass.localize(
-          "ui.panel.lovelace.editor.edit_view.background.title"
-        )}
-        .value=${backgroundUrl}
-        .selector=${SELECTOR}
-        @value-changed=${this._backgroundChanged}
-      ></ha-selector-image>
+        .data=${background}
+        .schema=${this._schema(true)}
+        .computeLabel=${this._computeLabelCallback}
+        @value-changed=${this._valueChanged}
+        .localizeValue=${this._localizeValueCallback}
+      ></ha-form>
     `;
   }
 
-  private _backgroundChanged(ev: ValueChangedEvent<string | null>) {
-    const backgroundUrl = ev.detail.value;
+  private _valueChanged(ev: CustomEvent): void {
     const config = {
       ...this._config,
-      background: {
-        ...(typeof this._config.background === "string"
-          ? {}
-          : this._config.background),
-        image: backgroundUrl || undefined,
-      },
+      background: ev.detail.value,
     };
     fireEvent(this, "view-config-changed", { config });
   }
 
+  private _computeLabelCallback = (
+    schema: SchemaUnion<ReturnType<typeof this._schema>>
+  ) => {
+    switch (schema.name) {
+      case "image":
+        return this.hass.localize(
+          "ui.panel.lovelace.editor.edit_view.background.image"
+        );
+      case "transparency":
+        return this.hass.localize(
+          "ui.panel.lovelace.editor.edit_view.background.transparency"
+        );
+      case "alignment":
+        return this.hass.localize(
+          "ui.panel.lovelace.editor.edit_view.background.alignment.name"
+        );
+      case "size":
+        return this.hass.localize(
+          "ui.panel.lovelace.editor.edit_view.background.size.name"
+        );
+      case "repeat":
+        return this.hass.localize(
+          "ui.panel.lovelace.editor.edit_view.background.repeat.name"
+        );
+      case "attachment":
+        return this.hass.localize(
+          "ui.panel.lovelace.editor.edit_view.background.attachment.name"
+        );
+      default:
+        return this.hass.localize(
+          `ui.panel.lovelace.editor.edit_view.background.${schema.name}`
+        );
+    }
+  };
+
   static get styles(): CSSResultGroup {
     return css`
       :host {

src/panels/lovelace/hui-root.ts

@@ -78,6 +78,7 @@ import type { Lovelace } from "./types";
 import "./views/hui-view";
 import "./views/hui-view-container";
 import type { HUIView } from "./views/hui-view";
+import "./views/hui-view-background";
 
 @customElement("hui-root")
 class HUIRoot extends LitElement {
@@ -469,11 +470,11 @@ class HUIRoot extends LitElement {
         </div>
         <hui-view-container
           .hass=${this.hass}
-          .background=${background}
           .theme=${curViewConfig?.theme}
           id="view"
           @ll-rebuild=${this._debouncedConfigChanged}
         >
+          <hui-view-background .background=${background}> </hui-view-background>
         </hui-view-container>
       </div>
     `;