velbus-frontend 2026.6.99__tar.gz

velbus_frontend-2026.6.99/PKG-INFO

@@ -0,0 +1,18 @@
+Metadata-Version: 2.4
+Name: velbus-frontend
+Version: 2026.6.99
+Summary: Home Assistant config panel frontend for Velbus.
+Author-email: Maikel Punie <maikel.punie@gmail.com>
+License: MIT
+Project-URL: Source Code, https://github.com/Cereal2nd/velbus-frontend
+Classifier: Development Status :: 4 - Beta
+Classifier: Intended Audience :: Developers
+Classifier: License :: OSI Approved :: MIT License
+Classifier: Programming Language :: Python :: 3
+Classifier: Topic :: Home Automation
+Requires-Python: >=3.13
+Description-Content-Type: text/markdown
+
+# Velbus config panel frontend
+
+Static web component assets shipped with the `velbus-frontend` PyPI package for the Home Assistant Velbus integration config panel.

velbus_frontend-2026.6.99/README.md

@@ -0,0 +1,3 @@
+# Velbus config panel frontend
+
+Static web component assets shipped with the `velbus-frontend` PyPI package for the Home Assistant Velbus integration config panel.

velbus_frontend-2026.6.99/pyproject.toml

@@ -0,0 +1,40 @@
+[build-system]
+requires = ["setuptools", "wheel"]
+
+[project]
+name = "velbus-frontend"
+license = {text = "MIT"}
+version = "2026.6.99"
+description = "Home Assistant config panel frontend for Velbus."
+readme = "README.md"
+authors = [
+    {name = "Maikel Punie", email = "maikel.punie@gmail.com"}
+]
+requires-python = ">=3.13"
+classifiers = [
+    "Development Status :: 4 - Beta",
+    "Intended Audience :: Developers",
+    "License :: OSI Approved :: MIT License",
+    "Programming Language :: Python :: 3",
+    "Topic :: Home Automation",
+]
+
+[project.urls]
+"Source Code" = "https://github.com/Cereal2nd/velbus-frontend"
+
+[tool.setuptools]
+include-package-data = true
+
+[tool.setuptools.packages.find]
+include = ["velbus_frontend*"]
+
+[tool.setuptools.package-data]
+velbus_frontend = ["dist/**/*"]
+
+[tool.bumpver]
+current_version = "2026.7.1"
+version_pattern = "YYYY.MM.INC0"
+commit_message = "bump version {old_version} -> {new_version}"
+commit = true
+tag = true
+push = true

velbus_frontend-2026.6.99/setup.cfg

@@ -0,0 +1,4 @@
+[egg_info]
+tag_build = 
+tag_date = 0
+

velbus_frontend-2026.6.99/velbus_frontend/__init__.py

@@ -0,0 +1,20 @@
+"""Velbus config panel frontend package."""
+
+from __future__ import annotations
+
+import importlib.resources
+from importlib.metadata import PackageNotFoundError, version
+
+webcomponent_name = "velbus-panel"
+entrypoint_js = "velbus-panel.js"
+is_prod_build = False
+
+try:
+    __version__ = version("velbus-frontend")
+except PackageNotFoundError:
+    __version__ = "dev"
+
+
+def locate_dir() -> str:
+    """Return the directory containing built frontend assets."""
+    return str(importlib.resources.files("velbus_frontend") / "dist")

velbus_frontend-2026.6.99/velbus_frontend/dist/api.js

@@ -0,0 +1,83 @@
+export function createApi(hass, configEntryId) {
+  return async function callWs(type, extra = {}) {
+    return hass.callWS({
+      type,
+      config_entry: configEntryId,
+      ...extra,
+    });
+  };
+}
+
+export async function loadModules(callWs) {
+  const result = await callWs("velbus/config_panel/modules", {});
+  return result.modules || [];
+}
+
+export async function loadBaseData(callWs) {
+  return callWs("velbus/config_panel/get_base_data", {});
+}
+
+export async function loadModule(callWs, address) {
+  return callWs("velbus/config_panel/module/get", { address });
+}
+
+export async function loadActions(callWs, address, channel) {
+  const result = await callWs("velbus/config_panel/module/actions/get", {
+    address,
+    channel,
+    refresh: true,
+  });
+  return result.slots || [];
+}
+
+export async function saveChannelName(callWs, address, channel, value) {
+  return callWs("velbus/config_panel/module/config/set", {
+    address,
+    channel,
+    key: "name",
+    value,
+  });
+}
+
+export async function saveChannelEnabled(callWs, address, channel, enabled) {
+  return callWs("velbus/config_panel/module/config/set", {
+    address,
+    channel,
+    key: "enabled",
+    value: enabled,
+  });
+}
+
+export async function saveChannelContact(callWs, address, channel, value) {
+  return callWs("velbus/config_panel/module/config/set", {
+    address,
+    channel,
+    key: "contact",
+    value,
+  });
+}
+
+export async function programAction(
+  callWs,
+  address,
+  channel,
+  sourceAddress,
+  sourceChannel,
+  action
+) {
+  return callWs("velbus/config_panel/module/actions/set", {
+    address,
+    channel,
+    source_address: sourceAddress,
+    source_channel: sourceChannel,
+    action,
+  });
+}
+
+export async function clearActionSlot(callWs, address, channel, slot) {
+  return callWs("velbus/config_panel/module/actions/clear", {
+    address,
+    channel,
+    slot,
+  });
+}

velbus_frontend-2026.6.99/velbus_frontend/dist/module-pages/base.js

@@ -0,0 +1,59 @@
+export function getModule(modules, address) {
+  return modules.find((module) => module.address === address);
+}
+
+export function formatSource(slot) {
+  if (slot.source_module_name) {
+    const channelLabel =
+      slot.source_channel_name ||
+      (slot.source_channel != null ? `Channel ${slot.source_channel}` : "?");
+    return `${slot.source_module_name} / ${channelLabel}`;
+  }
+  return `${slot.source_address}:${slot.source_channel ?? "?"}`;
+}
+
+export function sourceChannelOptions(modules, moduleAddress) {
+  const module = getModule(modules, moduleAddress);
+  if (!module?.channels) {
+    return "";
+  }
+  return Object.entries(module.channels)
+    .sort(([left], [right]) => Number(left) - Number(right))
+    .map(([channel, info]) => {
+      const label = info.name || `Channel ${channel}`;
+      return `<option value="${channel}">${label}</option>`;
+    })
+    .join("");
+}
+
+export function channelLabel(channel, sections, liveChannels) {
+  const channelMeta = (
+    sections.find((section) => section.type === "channels")?.channels || []
+  ).find((entry) => entry.channel === channel);
+  const live = liveChannels[String(channel)] || {};
+  return live.name || channelMeta?.name || `Channel ${channel}`;
+}
+
+export function findActionTable(sections) {
+  return sections.find((section) => section.type === "action_table");
+}
+
+export function findChannelNames(sections) {
+  return sections.find((section) => section.type === "channel_names");
+}
+
+export function findChannelEnable(sections) {
+  return sections.find((section) => section.type === "channel_enable");
+}
+
+export function findContact(sections) {
+  return sections.find((section) => section.type === "contact");
+}
+
+export function isProgrammedSlot(slot) {
+  if (slot.empty) {
+    return false;
+  }
+  const source = slot.source_address;
+  return source != null && source !== 0 && source !== 255;
+}

velbus_frontend-2026.6.99/velbus_frontend/dist/module-pages/generic.js

@@ -0,0 +1,394 @@
+import {
+  channelLabel,
+  findActionTable,
+  findChannelEnable,
+  findChannelNames,
+  findContact,
+  formatSource,
+  isProgrammedSlot,
+  sourceChannelOptions,
+} from "./base.js";
+
+function canEdit(advancedMode, interactionsDisabled) {
+  return advancedMode && !interactionsDisabled;
+}
+
+function renderAddActionDialog(ctx) {
+  const {
+    showAddActionDialog,
+    actionTable,
+    modules,
+    advancedMode,
+    interactionsDisabled,
+    sourceModuleAddress,
+  } = ctx;
+  if (!showAddActionDialog || !actionTable) {
+    return "";
+  }
+  const editable = canEdit(advancedMode, interactionsDisabled);
+  const sourceAddress =
+    sourceModuleAddress ?? (modules.length ? modules[0].address : null);
+  return `
+    <div class="dialog-backdrop" id="add-action-dialog">
+      <div class="dialog card">
+        <h3>Add ${
+          actionTable.kind === "input" ? "input action" : "action"
+        }</h3>
+        <p class="muted">Program a new action for the selected channel.</p>
+        <label><span>Source module</span>
+          <select id="source-module" ${editable ? "" : "disabled"}>
+            ${modules
+              .map(
+                (module) =>
+                  `<option value="${module.address}" ${
+                    module.address === sourceAddress ? "selected" : ""
+                  }>${module.name} (${module.address})</option>`
+              )
+              .join("")}
+          </select>
+        </label>
+        <label><span>Source channel</span>
+          <select id="source-channel" ${editable ? "" : "disabled"}>
+            ${sourceChannelOptions(modules, sourceAddress)}
+          </select>
+        </label>
+        <label><span>Action</span>
+          <select id="action-key" ${editable ? "" : "disabled"}>
+            ${actionTable.actions
+              .map(
+                (action) =>
+                  `<option value="${action.key}">${action.label}</option>`
+              )
+              .join("")}
+          </select>
+        </label>
+        <div class="dialog-actions">
+          <button class="secondary" id="cancel-add-action">Cancel</button>
+          <button id="confirm-add-action" ${
+            editable ? "" : "disabled"
+          }>Program action</button>
+        </div>
+      </div>
+    </div>`;
+}
+
+export function render(ctx) {
+  const {
+    moduleData,
+    modules,
+    actionChannel,
+    actionSlots,
+    loadingActions,
+    interactionsDisabled,
+    advancedMode,
+    showAddActionDialog,
+    sourceModuleAddress,
+  } = ctx;
+
+  if (!moduleData) {
+    return "";
+  }
+
+  const editable = canEdit(advancedMode, interactionsDisabled);
+
+  const schema = moduleData.schema || { sections: [] };
+  const sections = schema.sections || [];
+  const channelNames = findChannelNames(sections);
+  const actionTable = findActionTable(sections);
+  const channelEnable = findChannelEnable(sections);
+  const contact = findContact(sections);
+  const channels = moduleData.channels || {};
+  const actions = (actionSlots || []).filter(isProgrammedSlot);
+  const selectedChannelLabel = channelLabel(actionChannel, sections, channels);
+  const selectedSupportsEnable =
+    channelEnable?.channels?.includes(actionChannel) ||
+    (sections.find((section) => section.type === "channels")?.channels || []).some(
+      (entry) => entry.channel === actionChannel && entry.supports_enable
+    );
+  const selectedEnabled = channels[String(actionChannel)]?.enabled !== false;
+  const metaParts = [
+    `Address ${moduleData.address}`,
+    moduleData.type_name,
+    moduleData.sw_version ? `Firmware ${moduleData.sw_version}` : null,
+    moduleData.serial ? `Serial ${moduleData.serial}` : null,
+  ].filter(Boolean);
+
+  const dialogCtx = {
+    showAddActionDialog,
+    actionTable,
+    modules,
+    advancedMode,
+    interactionsDisabled,
+    sourceModuleAddress,
+  };
+
+  return `
+    <section class="card header">
+      <div class="header-row">
+        <button class="link back" id="back-button">← Modules</button>
+        ${
+          actionTable
+            ? `<button id="add-action" class="primary" ${
+                editable ? "" : "disabled"
+              }>Add action</button>`
+            : ""
+        }
+      </div>
+      <h2>${moduleData.name}</h2>
+      <p class="muted">${metaParts.join(" · ")}</p>
+      ${
+        !advancedMode
+          ? `<p class="warning">Advanced mode is disabled. Enable it in the Velbus integration configuration to program module memory.</p>`
+          : ""
+      }
+    </section>
+    ${
+      actionTable
+        ? `<div class="module-layout">
+            <section class="card channel-panel">
+              <h3>Channels</h3>
+              <ul class="channel-list">
+                ${actionTable.channels
+                  .map((channel) => {
+                    const label = channelLabel(channel, sections, channels);
+                    const isActive = channel === actionChannel;
+                    const live = channels[String(channel)] || {};
+                    const disabled = live.enabled === false;
+                    return `<li>
+                      <button
+                        type="button"
+                        class="channel-item${isActive ? " active" : ""}${
+                          disabled ? " disabled-channel" : ""
+                        }"
+                        data-action-channel="${channel}"
+                        ${interactionsDisabled ? "disabled" : ""}
+                      >
+                        <span class="channel-name">${label}</span>
+                        ${
+                          disabled
+                            ? `<span class="channel-badge">Disabled</span>`
+                            : ""
+                        }
+                      </button>
+                    </li>`;
+                  })
+                  .join("")}
+              </ul>
+            </section>
+            <section class="card actions-panel">
+              <div class="actions-header">
+                <h3>${
+                  actionTable.kind === "input" ? "Input actions" : "Actions"
+                } — ${selectedChannelLabel}</h3>
+                ${
+                  channelNames?.channels?.some(
+                    (entry) => entry.channel === actionChannel
+                  )
+                    ? `<label class="channel-rename">
+                        <span>Channel name</span>
+                        <input
+                          type="text"
+                          maxlength="16"
+                          data-channel-name="${actionChannel}"
+                          value="${channels[String(actionChannel)]?.name || ""}"
+                          ${editable ? "" : "disabled"}
+                        />
+                      </label>`
+                    : ""
+                }
+                ${
+                  contact?.channels?.includes(actionChannel)
+                    ? `<label class="channel-contact">
+                        <span>Contact</span>
+                        <select
+                          data-channel-contact="${actionChannel}"
+                          ${editable ? "" : "disabled"}
+                        >
+                          ${(contact.options || ["NO", "NC"])
+                            .map((option) => {
+                              const current =
+                                channels[String(actionChannel)]?.contact || "NO";
+                              return `<option value="${option}" ${
+                                option === current ? "selected" : ""
+                              }>${option}</option>`;
+                            })
+                            .join("")}
+                        </select>
+                      </label>`
+                    : ""
+                }
+                ${
+                  selectedSupportsEnable
+                    ? `<label class="channel-enable">
+                        <input
+                          type="checkbox"
+                          data-channel-enable="${actionChannel}"
+                          ${selectedEnabled ? "checked" : ""}
+                          ${editable ? "" : "disabled"}
+                        />
+                        <span>Channel enabled</span>
+                      </label>`
+                    : ""
+                }
+              </div>
+              ${loadingActions ? "<p>Loading actions…</p>" : ""}
+              <table>
+                <thead>
+                  <tr><th>Slot</th><th>Source</th><th>Action</th><th></th></tr>
+                </thead>
+                <tbody>
+                  ${
+                    actions.length
+                      ? actions
+                          .map(
+                            (slot) => `<tr>
+                        <td>${slot.slot}</td>
+                        <td title="${slot.source_address}:${
+                              slot.source_channel ?? "?"
+                            }">${formatSource(slot)}</td>
+                        <td>${slot.action_label || slot.action_key || ""}</td>
+                        <td>${
+                          editable
+                            ? `<button class="link" data-clear-slot="${slot.slot}" ${
+                                interactionsDisabled ? "disabled" : ""
+                              }>Clear</button>`
+                            : ""
+                        }</td>
+                      </tr>`
+                          )
+                          .join("")
+                      : `<tr><td colspan="4">${
+                          loadingActions
+                            ? ""
+                            : "No programmed actions for this channel."
+                        }</td></tr>`
+                  }
+                </tbody>
+              </table>
+            </section>
+          </div>
+          ${renderAddActionDialog(dialogCtx)}`
+        : `${
+            channelNames
+              ? `<section class="card">
+              <h3>Channel names</h3>
+              ${channelNames.channels
+                .map((channel) => {
+                  const live = channels[String(channel.channel)] || {};
+                  const value = live.name || "";
+                  return `<label>
+                    <span>${channel.name}</span>
+                    <input
+                      type="text"
+                      maxlength="16"
+                      data-channel-name="${channel.channel}"
+                      value="${value}"
+                      ${editable ? "" : "disabled"}
+                    />
+                  </label>`;
+                })
+                .join("")}
+            </section>`
+              : ""
+          }${
+            contact
+              ? `<section class="card">
+              <h3>Contact type</h3>
+              ${contact.channels
+                .map((channel) => {
+                  const live = channels[String(channel)] || {};
+                  const current = live.contact || "NO";
+                  const label = channelLabel(channel, sections, channels);
+                  return `<label>
+                    <span>${label}</span>
+                    <select
+                      data-channel-contact="${channel}"
+                      ${editable ? "" : "disabled"}
+                    >
+                      ${(contact.options || ["NO", "NC"])
+                        .map(
+                          (option) =>
+                            `<option value="${option}" ${
+                              option === current ? "selected" : ""
+                            }>${option}</option>`
+                        )
+                        .join("")}
+                    </select>
+                  </label>`;
+                })
+                .join("")}
+            </section>`
+              : ""
+          }`
+    }`;
+}
+
+export function bind(root, handlers) {
+  root.querySelector("#back-button")?.addEventListener("click", () => {
+    handlers.onBack();
+  });
+
+  root.querySelectorAll("[data-action-channel]").forEach((element) => {
+    element.addEventListener("click", () => {
+      handlers.onSelectChannel(Number(element.dataset.actionChannel));
+    });
+  });
+
+  root.querySelector("#add-action")?.addEventListener("click", () => {
+    handlers.onShowAddAction();
+  });
+
+  root.querySelector("#cancel-add-action")?.addEventListener("click", () => {
+    handlers.onHideAddAction();
+  });
+
+  root.querySelector("#add-action-dialog")?.addEventListener("click", (event) => {
+    if (event.target.id === "add-action-dialog") {
+      handlers.onHideAddAction();
+    }
+  });
+
+  root.querySelector("#source-module")?.addEventListener("change", (event) => {
+    handlers.onSourceModuleChange(Number(event.target.value), root);
+  });
+
+  root.querySelector("#confirm-add-action")?.addEventListener("click", () => {
+    const sourceAddress = Number(root.querySelector("#source-module")?.value);
+    const sourceChannel = Number(root.querySelector("#source-channel")?.value);
+    const action = root.querySelector("#action-key")?.value;
+    handlers.onProgramAction(sourceAddress, sourceChannel, action);
+  });
+
+  root.querySelectorAll("[data-clear-slot]").forEach((element) => {
+    element.addEventListener("click", () => {
+      handlers.onClearSlot(Number(element.dataset.clearSlot));
+    });
+  });
+
+  root.querySelectorAll("[data-channel-name]").forEach((element) => {
+    element.addEventListener("change", (event) => {
+      handlers.onSaveChannelName(
+        Number(event.target.dataset.channelName),
+        event.target.value
+      );
+    });
+  });
+
+  root.querySelectorAll("[data-channel-enable]").forEach((element) => {
+    element.addEventListener("change", (event) => {
+      handlers.onSaveChannelEnabled(
+        Number(event.target.dataset.channelEnable),
+        event.target.checked
+      );
+    });
+  });
+
+  root.querySelectorAll("[data-channel-contact]").forEach((element) => {
+    element.addEventListener("change", (event) => {
+      handlers.onSaveChannelContact(
+        Number(event.target.dataset.channelContact),
+        event.target.value
+      );
+    });
+  });
+}

velbus_frontend-2026.6.99/velbus_frontend/dist/module-pages/registry.js

@@ -0,0 +1,26 @@
+/** @type {Record<number|string, string>} */
+export const MODULE_TYPE_TO_PAGE = {
+  // Examples once specialized pages exist:
+  // 0x08: "relay",
+  // "VMB4RY": "relay",
+};
+
+export const MODULE_PAGES = {
+  generic: () => import("./generic.js"),
+  // relay: () => import("./relay.js"),
+};
+
+export function resolveModulePageType(moduleOrType) {
+  const typeId = moduleOrType?.type_id ?? moduleOrType;
+  const typeName = moduleOrType?.type_name;
+  return (
+    MODULE_TYPE_TO_PAGE[typeId] ??
+    MODULE_TYPE_TO_PAGE[typeName] ??
+    "generic"
+  );
+}
+
+export async function loadModulePage(pageType) {
+  const loader = MODULE_PAGES[pageType] ?? MODULE_PAGES.generic;
+  return loader();
+}

velbus_frontend-2026.6.99/velbus_frontend/dist/pages/modules-list.js

@@ -0,0 +1,31 @@
+export function renderModulesList(ctx) {
+  const { modules } = ctx;
+  return `
+    <section class="modules-section">
+      <h2>Modules</h2>
+      ${
+        modules.length
+          ? `<div class="module-grid">
+              ${modules
+                .map(
+                  (module) => `
+                <button class="module-tile" type="button" data-address="${module.address}">
+                  <span class="module-address">Address ${module.address} (0x${Number(module.address).toString(16).toUpperCase().padStart(2, "0")})</span>
+                  <span class="module-name">${module.name}</span>
+                  <span class="module-type muted">${module.type_name}</span>
+                </button>`
+                )
+                .join("")}
+            </div>`
+          : "<p>No modules found.</p>"
+      }
+    </section>`;
+}
+
+export function bindModulesList(root, handlers) {
+  root.querySelectorAll("[data-address]").forEach((element) => {
+    element.addEventListener("click", () => {
+      handlers.onSelect(Number(element.dataset.address));
+    });
+  });
+}