@matter-server/dashboard 0.7.0-alpha.0-20260512-b404bea → 0.7.0

package/src/components/avsum-ptz-strip.ts

@@ -0,0 +1,388 @@
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { consume } from "@lit/context";
+import "@material/web/iconbutton/icon-button";
+import type { MatterClient, MatterNode } from "@matter-server/ws-client";
+import { mdiArrowDown, mdiArrowLeft, mdiArrowRight, mdiArrowUp, mdiMinus, mdiPlus } from "@mdi/js";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { clientContext } from "../client/client-context.js";
+import { handleAsync, handleAsyncEvent } from "../util/async-handler.js";
+import {
+    dptzRelativeMove,
+    hasAvsumOnEndpoint,
+    moveToPreset,
+    readFeatures,
+    readMovementState,
+    readPosition,
+    readPresets,
+    relativeMove,
+} from "../util/avsum.js";
+import "./ha-svg-icon.js";
+
+type MoveMode = "mech" | "digital";
+
+@customElement("avsum-ptz-strip")
+export class AvsumPtzStrip extends LitElement {
+    @consume({ context: clientContext, subscribe: true })
+    @property({ attribute: false })
+    client?: MatterClient;
+
+    @property({ attribute: false }) nodeId!: number | bigint;
+    @property({ type: Number }) endpointId!: number;
+    /** Active VideoStreamID for DPTZ moves; required when DPTZ is selected mode. */
+    @property({ type: Number, attribute: false }) activeVideoStreamId: number | null = null;
+    @property({ type: Object, attribute: false }) sensorSize: { width: number; height: number } | null = null;
+
+    @state() private _mode: MoveMode = "mech";
+    @state() private _toast: string | null = null;
+    private _unsubscribeNodes?: () => void;
+    private _toastTimer?: ReturnType<typeof setTimeout>;
+
+    private get _node(): MatterNode | null {
+        if (!this.client) return null;
+        return this.client.nodes[String(this.nodeId)] ?? null;
+    }
+
+    override connectedCallback() {
+        super.connectedCallback();
+        if (this.client) {
+            this._unsubscribeNodes = this.client.addEventListener("nodes_changed", () => this.requestUpdate());
+        }
+    }
+
+    override disconnectedCallback() {
+        super.disconnectedCallback();
+        this._unsubscribeNodes?.();
+        if (this._toastTimer) {
+            clearTimeout(this._toastTimer);
+            this._toastTimer = undefined;
+        }
+    }
+
+    override render() {
+        const node = this._node;
+        if (!node || !hasAvsumOnEndpoint(node, this.endpointId)) return nothing;
+        const features = readFeatures(node, this.endpointId);
+        if (!features.mPan && !features.mTilt && !features.mZoom && !features.dptz && !features.mPresets)
+            return nothing;
+
+        const hasMech = features.mPan || features.mTilt || features.mZoom;
+        const effective: MoveMode = hasMech && features.dptz ? this._mode : hasMech ? "mech" : "digital";
+
+        const pos = readPosition(node, this.endpointId);
+        const movement = readMovementState(node, this.endpointId);
+        const presets = features.mPresets ? readPresets(node, this.endpointId).items : [];
+
+        return html`
+            <div class="strip">
+                ${hasMech || features.dptz
+                    ? html`<div class="group movement">
+                          <div class="dpad">
+                              <span></span>
+                              <md-icon-button
+                                  ?disabled=${this._isDisabled(effective, "tilt", features, movement)}
+                                  title="Tilt up"
+                                  @click=${handleAsyncEvent((e: MouseEvent) =>
+                                      this._move(effective, "tilt", this._step(e, 10)),
+                                  )}
+                              >
+                                  <ha-svg-icon .path=${mdiArrowUp}></ha-svg-icon>
+                              </md-icon-button>
+                              <span></span>
+                              <md-icon-button
+                                  ?disabled=${this._isDisabled(effective, "pan", features, movement)}
+                                  title="Pan left"
+                                  @click=${handleAsyncEvent((e: MouseEvent) =>
+                                      this._move(effective, "pan", this._step(e, -10)),
+                                  )}
+                              >
+                                  <ha-svg-icon .path=${mdiArrowLeft}></ha-svg-icon>
+                              </md-icon-button>
+                              <span></span>
+                              <md-icon-button
+                                  ?disabled=${this._isDisabled(effective, "pan", features, movement)}
+                                  title="Pan right"
+                                  @click=${handleAsyncEvent((e: MouseEvent) =>
+                                      this._move(effective, "pan", this._step(e, 10)),
+                                  )}
+                              >
+                                  <ha-svg-icon .path=${mdiArrowRight}></ha-svg-icon>
+                              </md-icon-button>
+                              <span></span>
+                              <md-icon-button
+                                  ?disabled=${this._isDisabled(effective, "tilt", features, movement)}
+                                  title="Tilt down"
+                                  @click=${handleAsyncEvent((e: MouseEvent) =>
+                                      this._move(effective, "tilt", this._step(e, -10)),
+                                  )}
+                              >
+                                  <ha-svg-icon .path=${mdiArrowDown}></ha-svg-icon>
+                              </md-icon-button>
+                              <span></span>
+                          </div>
+                          <div class="zoom">
+                              <md-icon-button
+                                  ?disabled=${this._isDisabled(effective, "zoom", features, movement)}
+                                  title="Zoom in"
+                                  @click=${handleAsyncEvent((e: MouseEvent) =>
+                                      this._move(effective, "zoom", this._step(e, 10)),
+                                  )}
+                              >
+                                  <ha-svg-icon .path=${mdiPlus}></ha-svg-icon>
+                              </md-icon-button>
+                              <md-icon-button
+                                  ?disabled=${this._isDisabled(effective, "zoom", features, movement)}
+                                  title="Zoom out"
+                                  @click=${handleAsyncEvent((e: MouseEvent) =>
+                                      this._move(effective, "zoom", this._step(e, -10)),
+                                  )}
+                              >
+                                  <ha-svg-icon .path=${mdiMinus}></ha-svg-icon>
+                              </md-icon-button>
+                          </div>
+                          ${hasMech && features.dptz
+                              ? html`<div class="mode-toggle">
+                                    <button
+                                        class=${this._mode === "mech" ? "active" : ""}
+                                        @click=${() => (this._mode = "mech")}
+                                    >
+                                        Mech
+                                    </button>
+                                    <button
+                                        class=${this._mode === "digital" ? "active" : ""}
+                                        @click=${() => (this._mode = "digital")}
+                                    >
+                                        Digital
+                                    </button>
+                                </div>`
+                              : nothing}
+                          ${effective === "digital" && this.activeVideoStreamId === null
+                              ? html`<span class="mode-hint">Start stream to enable DPTZ</span>`
+                              : nothing}
+                      </div>`
+                    : nothing}
+                ${features.mPresets && presets.length > 0
+                    ? html`<div class="group presets">
+                          ${presets.map(
+                              p => html`<button
+                                  class="chip"
+                                  title="p=${p.settings.pan ?? 0}° · t=${p.settings.tilt ?? 0}° · z=${p.settings.zoom ??
+                                  1}×"
+                                  @click=${handleAsync(() => this._handleGoPreset(p.presetId))}
+                              >
+                                  ${p.name}
+                              </button>`,
+                          )}
+                      </div>`
+                    : nothing}
+                <div class="group readout">
+                    ${features.mPan && pos.pan !== null ? html`<span>Pan ${this._fmt(pos.pan)}°</span>` : nothing}
+                    ${features.mTilt && pos.tilt !== null ? html`<span>Tilt ${this._fmt(pos.tilt)}°</span>` : nothing}
+                    ${features.mZoom && pos.zoom !== null ? html`<span>Zoom ${pos.zoom}×</span>` : nothing}
+                </div>
+                ${this._toast ? html`<div class="toast">${this._toast}</div>` : nothing}
+            </div>
+        `;
+    }
+
+    private _fmt(v: number): string {
+        return v >= 0 ? `+${v}` : `${v}`;
+    }
+
+    private _step(e: MouseEvent, base: number): number {
+        return e.shiftKey ? Math.sign(base) : base;
+    }
+
+    private _isDisabled(
+        mode: MoveMode,
+        axis: "pan" | "tilt" | "zoom",
+        f: ReturnType<typeof readFeatures>,
+        movement: ReturnType<typeof readMovementState>,
+    ): boolean {
+        if (mode === "mech") {
+            if (movement === "moving") return true;
+            if (axis === "pan") return !f.mPan;
+            if (axis === "tilt") return !f.mTilt;
+            return !f.mZoom;
+        }
+        if (!f.dptz) return true;
+        if (this.activeVideoStreamId === null) return true;
+        return false;
+    }
+
+    private async _move(mode: MoveMode, axis: "pan" | "tilt" | "zoom", step: number) {
+        if (!this.client) return;
+        try {
+            if (mode === "mech") {
+                const delta: { panDelta?: number; tiltDelta?: number; zoomDelta?: number } = {};
+                if (axis === "pan") delta.panDelta = step;
+                else if (axis === "tilt") delta.tiltDelta = step;
+                else delta.zoomDelta = step;
+                await relativeMove(this.client, this.nodeId, this.endpointId, delta);
+            } else {
+                if (this.activeVideoStreamId === null) return;
+                // step magnitude (10 or 1) scales the sensor-relative pixel delta so Shift gives 1% nudges.
+                const scale = step / 10;
+                const dx = this.sensorSize ? Math.round(this.sensorSize.width * 0.1 * scale) : Math.round(100 * scale);
+                const dy = this.sensorSize ? Math.round(this.sensorSize.height * 0.1 * scale) : Math.round(100 * scale);
+                const delta: { deltaX?: number; deltaY?: number; zoomDelta?: number } = {};
+                if (axis === "pan") delta.deltaX = dx;
+                else if (axis === "tilt") delta.deltaY = dy;
+                else delta.zoomDelta = step;
+                await dptzRelativeMove(this.client, this.nodeId, this.endpointId, this.activeVideoStreamId, delta);
+            }
+        } catch (err) {
+            const msg = err instanceof Error ? err.message.toLowerCase() : String(err).toLowerCase();
+            if (msg.includes("busy")) {
+                this._toast = "Camera busy";
+            } else {
+                console.warn("PTZ move failed:", err);
+                this._toast = "Move failed";
+            }
+            this._scheduleToastClear();
+        }
+    }
+
+    private async _handleGoPreset(presetId: number) {
+        if (!this.client) return;
+        try {
+            await moveToPreset(this.client, this.nodeId, this.endpointId, presetId);
+        } catch (err) {
+            const msg = err instanceof Error ? err.message.toLowerCase() : String(err).toLowerCase();
+            if (msg.includes("busy")) {
+                this._toast = "Camera busy";
+            } else if (msg.includes("not_found")) {
+                this._toast = "Preset removed";
+            } else {
+                console.warn("Preset move failed:", err);
+                this._toast = "Move failed";
+            }
+            this._scheduleToastClear();
+        }
+    }
+
+    private _scheduleToastClear() {
+        if (this._toastTimer) clearTimeout(this._toastTimer);
+        this._toastTimer = setTimeout(() => {
+            this._toast = null;
+        }, 2000);
+    }
+
+    static override styles = css`
+        :host {
+            display: block;
+            color: white;
+        }
+        .strip {
+            background: rgba(0, 0, 0, 0.6);
+            padding: 8px 12px;
+            display: flex;
+            gap: 16px;
+            align-items: center;
+            flex-wrap: wrap;
+        }
+        .group {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding-right: 16px;
+            border-right: 1px solid rgba(255, 255, 255, 0.15);
+        }
+        .group:last-child {
+            border-right: none;
+        }
+        .movement {
+            gap: 12px;
+        }
+        .dpad {
+            display: grid;
+            grid-template-columns: 32px 32px 32px;
+            grid-template-rows: 32px 32px 32px;
+            gap: 2px;
+        }
+        .zoom {
+            display: flex;
+            flex-direction: column;
+            gap: 2px;
+        }
+        md-icon-button {
+            --md-icon-button-icon-color: white;
+            --md-icon-button-state-layer-color: white;
+            width: 32px;
+            height: 32px;
+        }
+        md-icon-button[disabled] {
+            opacity: 0.55;
+        }
+        .mode-toggle {
+            display: flex;
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            border-radius: 4px;
+            overflow: hidden;
+        }
+        .mode-toggle button {
+            background: transparent;
+            border: none;
+            padding: 4px 10px;
+            cursor: pointer;
+            color: rgba(255, 255, 255, 0.7);
+            font-size: 0.75rem;
+            font-family: inherit;
+        }
+        .mode-toggle button.active {
+            background: rgba(255, 255, 255, 0.2);
+            color: white;
+        }
+        .mode-hint {
+            color: rgba(255, 255, 255, 0.6);
+            font-size: 0.7rem;
+            font-style: italic;
+        }
+        .presets {
+            flex-wrap: wrap;
+        }
+        .chip {
+            padding: 4px 12px;
+            border-radius: 12px;
+            background: rgba(255, 255, 255, 0.15);
+            color: white;
+            border: none;
+            cursor: pointer;
+            font-size: 0.8rem;
+            font-family: inherit;
+        }
+        .chip:hover {
+            background: rgba(255, 255, 255, 0.3);
+        }
+        .readout {
+            color: rgba(255, 255, 255, 0.85);
+            font-family: var(--monospace-font, monospace);
+            font-size: 0.8rem;
+            gap: 12px;
+        }
+        .toast {
+            background: rgba(0, 0, 0, 0.85);
+            color: white;
+            padding: 4px 10px;
+            border-radius: 4px;
+            font-size: 0.8rem;
+            margin-left: auto;
+        }
+        @media (max-width: 900px) {
+            .readout {
+                display: none;
+            }
+        }
+    `;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "avsum-ptz-strip": AvsumPtzStrip;
+    }
+}

package/src/components/dialogs/binding/node-binding-dialog.ts

@@ -285,7 +285,7 @@ export class NodeBindingDialog extends LitElement {
 
         // Note: fabricIndex is assigned by the server based on the device's fabric table
         const acl_entry: AccessControlEntryStruct = {
-            privilege: 5,
+            privilege: 3,
             authMode: 2,
             subjects: [this.node!.node_id],
             targets: [targets],

package/src/components/dialogs/binding/show-node-binding-dialog.ts

@@ -4,12 +4,11 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { MatterClient, MatterNode } from "@matter-server/ws-client";
+import { MatterNode } from "@matter-server/ws-client";
 
-export const showNodeBindingDialog = async (client: MatterClient, node: MatterNode, endpoint: number) => {
+export const showNodeBindingDialog = async (node: MatterNode, endpoint: number) => {
     await import("./node-binding-dialog.js");
     const dialog = document.createElement("node-binding-dialog");
-    dialog.client = client;
     dialog.node = node;
     dialog.endpoint = endpoint;
     document.querySelector("matter-dashboard-app")?.renderRoot.appendChild(dialog);

package/src/components/dialogs/commission-node-dialog/commission-node-dialog.ts

@@ -6,17 +6,23 @@
 
 import "@material/web/button/text-button";
 import "@material/web/dialog/dialog";
-import type { MdDialog } from "@material/web/dialog/dialog.js";
+import { consume } from "@lit/context";
 import "@material/web/list/list";
 import "@material/web/list/list-item";
+import type { MdDialog } from "@material/web/dialog/dialog.js";
 import { MatterClient, MatterNode } from "@matter-server/ws-client";
 import { html, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+import { customElement, state } from "lit/decorators.js";
+import { clientContext, tickContext } from "../../../client/client-context.js";
 import { preventDefault } from "../../../util/prevent_default.js";
 
 @customElement("commission-node-dialog")
 export class ComissionNodeDialog extends LitElement {
-    @property({ attribute: false }) public client!: MatterClient;
+    @consume({ context: clientContext })
+    public client!: MatterClient;
+
+    @consume({ context: tickContext, subscribe: true })
+    protected _tick = 0;
 
     @state() private _mode?: "wifi" | "thread" | "existing";
 
@@ -88,7 +94,7 @@ export class ComissionNodeDialog extends LitElement {
 
     private _requestSettings() {
         import("../settings/show-settings-dialog.js").then(({ showSettingsDialog }) => {
-            showSettingsDialog(this.client, "network-credentials");
+            showSettingsDialog("network-credentials");
         });
         this._close();
     }

package/src/components/dialogs/commission-node-dialog/show-commission-node-dialog.ts

@@ -4,11 +4,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { MatterClient } from "@matter-server/ws-client";
-
-export const showCommissionNodeDialog = async (client: MatterClient) => {
+export const showCommissionNodeDialog = async () => {
     await import("./commission-node-dialog.js");
     const dialog = document.createElement("commission-node-dialog");
-    dialog.client = client;
     document.querySelector("matter-dashboard-app")?.renderRoot.appendChild(dialog);
 };

package/src/components/dialogs/settings/log-level-dialog.ts

@@ -7,17 +7,13 @@
 import "@material/web/button/text-button";
 import "@material/web/dialog/dialog";
 import type { MdDialog } from "@material/web/dialog/dialog.js";
-import { MatterClient } from "@matter-server/ws-client";
 import { css, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { customElement } from "lit/decorators.js";
 import { preventDefault } from "../../../util/prevent_default.js";
 import "./log-level-section.js";
 
 @customElement("log-level-dialog")
 export class LogLevelDialog extends LitElement {
-    @property({ attribute: false })
-    public client!: MatterClient;
-
     private _close() {
         this.shadowRoot!.querySelector<MdDialog>("md-dialog")!.close();
     }
@@ -35,10 +31,7 @@ export class LogLevelDialog extends LitElement {
             <md-dialog open @cancel=${preventDefault} @closed=${this._handleClosed}>
                 <div slot="headline">Server Log Settings</div>
                 <div slot="content">
-                    <log-level-section
-                        .client=${this.client}
-                        @log-level-applied=${this._handleApplied}
-                    ></log-level-section>
+                    <log-level-section @log-level-applied=${this._handleApplied}></log-level-section>
                 </div>
                 <div slot="actions">
                     <md-text-button @click=${this._close}>Close</md-text-button>

package/src/components/dialogs/settings/log-level-section.ts

@@ -6,11 +6,13 @@
 
 import "@material/web/button/text-button";
 import "@material/web/select/outlined-select";
-import type { MdOutlinedSelect } from "@material/web/select/outlined-select.js";
+import { consume } from "@lit/context";
 import "@material/web/select/select-option";
+import type { MdOutlinedSelect } from "@material/web/select/outlined-select.js";
 import { LogLevelString, MatterClient } from "@matter-server/ws-client";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators.js";
+import { customElement, query, state } from "lit/decorators.js";
+import { clientContext, tickContext } from "../../../client/client-context.js";
 import { fireAndForget, handleAsync } from "../../../util/async-handler.js";
 import { showAlertDialog } from "../../dialog-box/show-dialog-box.js";
 
@@ -28,8 +30,11 @@ const LOG_LEVELS: { value: LogLevelString; label: string }[] = [
  */
 @customElement("log-level-section")
 export class LogLevelSection extends LitElement {
-    @property({ attribute: false })
-    public client!: MatterClient;
+    @consume({ context: clientContext })
+    public client?: MatterClient;
+
+    @consume({ context: tickContext, subscribe: true })
+    protected _tick = 0;
 
     @state() private _consoleLevel: LogLevelString = "info";
     @state() private _fileLevel: LogLevelString | null = null;
@@ -48,6 +53,7 @@ export class LogLevelSection extends LitElement {
     }
 
     private async _loadLogLevels() {
+        if (!this.client) return;
         try {
             const result = await this.client.getLogLevel();
             this._consoleLevel = result.console_loglevel;
@@ -60,6 +66,7 @@ export class LogLevelSection extends LitElement {
     }
 
     private async _apply() {
+        if (!this.client) return;
         this._applying = true;
         try {
             const consoleLevel = this._consoleSelect.value as LogLevelString;

package/src/components/dialogs/settings/settings-dialog.ts

@@ -7,10 +7,11 @@
 import "@material/web/button/filled-button";
 import "@material/web/button/text-button";
 import "@material/web/dialog/dialog";
-import type { MdDialog } from "@material/web/dialog/dialog.js";
 import "@material/web/divider/divider";
 import "@material/web/iconbutton/icon-button";
 import "@material/web/switch/switch";
+import { consume } from "@lit/context";
+import type { MdDialog } from "@material/web/dialog/dialog.js";
 import type { MdSwitch } from "@material/web/switch/switch.js";
 import "@material/web/textfield/outlined-text-field";
 import type { MdOutlinedTextField } from "@material/web/textfield/outlined-text-field.js";
@@ -18,6 +19,7 @@ import { MatterClient } from "@matter-server/ws-client";
 import { mdiAccessPoint, mdiEye, mdiEyeOff, mdiWifi } from "@mdi/js";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators.js";
+import { clientContext, tickContext } from "../../../client/client-context.js";
 import { handleAsync } from "../../../util/async-handler.js";
 import { DevModeService } from "../../../util/dev-mode-service.js";
 import { preventDefault } from "../../../util/prevent_default.js";
@@ -27,9 +29,12 @@ import "./log-level-section.js";
 
 @customElement("settings-dialog")
 export class SettingsDialog extends LitElement {
-    @property({ attribute: false })
+    @consume({ context: clientContext })
     public client!: MatterClient;
 
+    @consume({ context: tickContext, subscribe: true })
+    protected _tick = 0;
+
     @state() private _devMode = DevModeService.active;
 
     private _unsubscribeDev?: () => void;
@@ -206,7 +211,7 @@ export class SettingsDialog extends LitElement {
 
                     <section class="section">
                         <h3 class="section-title">Server log levels</h3>
-                        <log-level-section .client=${this.client}></log-level-section>
+                        <log-level-section></log-level-section>
                     </section>
 
                     <md-divider></md-divider>

package/src/components/dialogs/settings/show-log-level-dialog.ts

@@ -4,11 +4,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { MatterClient } from "@matter-server/ws-client";
-
-export const showLogLevelDialog = async (client: MatterClient) => {
+export const showLogLevelDialog = async () => {
     await import("./log-level-dialog.js");
     const dialog = document.createElement("log-level-dialog");
-    dialog.client = client;
     document.querySelector("matter-dashboard-app")?.renderRoot.appendChild(dialog);
 };

package/src/components/dialogs/settings/show-settings-dialog.ts

@@ -4,12 +4,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { MatterClient } from "@matter-server/ws-client";
-
-export const showSettingsDialog = async (client: MatterClient, section?: string) => {
+export const showSettingsDialog = async (section?: string) => {
     await import("./settings-dialog.js");
     const dialog = document.createElement("settings-dialog");
-    dialog.client = client;
     if (section) dialog.scrollToSection = section;
     document.querySelector("matter-dashboard-app")?.renderRoot.appendChild(dialog);
 };