Add icon background and border options

koosoli · koosoli · commit 777acdeba5eb · 2026-02-18T00:20:50.000+01:00
Expose background and border styling for icon widgets and update build asset paths. plugin.js: add bg_color prop, apply backgroundColor and optional border (width, color, radius) to the rendered icon and emit rectangle calls for exported drawings. properties.js: add UI controls for Background, Border Width, Border Color and Corner Radius in the properties panel (with sensible defaults). dist/index.html: switch asset and image references to relative ./ paths and update main asset filenames from the new build.
diff --git a/custom_components/esphome_designer/frontend/dist/index.html b/custom_components/esphome_designer/frontend/dist/index.html
@@ -24,15 +24,15 @@
     rel="stylesheet">
 
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@7.4.47/css/materialdesignicons.min.css">
-  <link rel="icon" href="/assets/favicon-BFR8sXii.png" type="image/x-icon">
-  <script type="module" crossorigin src="/assets/index-CwC0zESX.js"></script>
-  <link rel="stylesheet" crossorigin href="/assets/index-gxormkqd.css">
+  <link rel="icon" href="./assets/favicon-BFR8sXii.png" type="image/x-icon">
+  <script type="module" crossorigin src="./assets/main-403oi-Ur.js"></script>
+  <link rel="stylesheet" crossorigin href="./assets/main-1OkGAQ6K.css">
 </head>
 
 <body>
   <header class="main-header" role="banner">
     <div class="main-header-title">
-      <img src="/assets/logo_header-CUGdaeC6.png" alt="ESPHome Designer" class="logo-image">
+      <img src="./assets/logo_header-CUGdaeC6.png" alt="ESPHome Designer" class="logo-image">
       <span><small style="opacity: 0.5; margin-left: 8px;">v1.0.0 RC5</small> <span id="currentLayoutDevice"
           style="margin-left:8px; color:var(--accent);"></span></span>
     </div>
diff --git a/custom_components/esphome_designer/frontend/features/icon/plugin.js b/custom_components/esphome_designer/frontend/features/icon/plugin.js
@@ -7,6 +7,7 @@ const render = (el, widget, { getColorStyle }) => {
     let iconCode = "F0595"; // Default
     let size = props.size || 24;
     const color = props.color || "theme_auto";
+    const bgColor = props.bg_color || "transparent";
 
     // Handle template colors in preview: use a fallback if it looks like a template
     let effectiveColor = color;
@@ -16,6 +17,7 @@ const render = (el, widget, { getColorStyle }) => {
     }
 
     const colorStyle = getColorStyle(effectiveColor);
+    const bgColorStyle = getColorStyle(bgColor);
 
     const codeRaw = props.code || "";
     // Handle template in icon code
@@ -46,11 +48,20 @@ const render = (el, widget, { getColorStyle }) => {
     el.innerText = ch;
     el.style.fontSize = `${size}px`;
     el.style.color = colorStyle;
+    el.style.backgroundColor = bgColorStyle;
     el.style.fontFamily = "MDI, system-ui, -apple-system, BlinkMacSystemFont, -sans-serif";
     el.style.lineHeight = "1";
     el.style.display = "flex";
     el.style.alignItems = "center";
     el.style.justifyContent = "center";
+
+    // Border
+    if (props.border_width) {
+        const borderColor = getColorStyle(props.border_color || "black");
+        el.style.border = `${props.border_width}px solid ${borderColor}`;
+        el.style.borderRadius = `${props.border_radius || 0}px`;
+        el.style.boxSizing = "border-box";
+    }
 };
 
 export default {
@@ -64,8 +75,12 @@ export default {
         height: 60,
         size: 48,
         color: "theme_auto",
+        bg_color: "transparent",
         font_ref: "font_mdi_medium",
-        fit_icon_to_frame: true
+        fit_icon_to_frame: true,
+        border_width: 0,
+        border_color: "theme_auto",
+        border_radius: 0
     },
     collectRequirements: (w, context) => {
         const p = w.props || {};
@@ -153,6 +168,15 @@ export default {
             lines.push(`        it.filled_rectangle(${w.x}, ${w.y}, ${w.width}, ${w.height}, ${bgColorConst});`);
         }
 
+        // Draw Border if defined
+        const borderWidth = p.border_width || 0;
+        if (borderWidth > 0) {
+            const borderColor = getColorConst(p.border_color || "theme_auto");
+            for (let i = 0; i < borderWidth; i++) {
+                lines.push(`        it.rectangle(${w.x} + ${i}, ${w.y} + ${i}, ${w.width} - 2 * ${i}, ${w.height} - 2 * ${i}, ${borderColor});`);
+            }
+        }
+
         const cond = getConditionCheck(w);
         if (cond) lines.push(`        ${cond}`);
 
diff --git a/custom_components/esphome_designer/frontend/js/core/properties.js b/custom_components/esphome_designer/frontend/js/core/properties.js
@@ -703,6 +703,15 @@ export class PropertiesPanel {
             this.addLabeledInputWithIconPicker("Icon Code", "text", props.code || "F0595", (v) => updateProp("code", v), widget);
             this.addLabeledInput("Size", "number", props.size || 48, (v) => updateProp("size", parseInt(v, 10)));
             this.addColorSelector("Color", props.color || "black", colors, (v) => updateProp("color", v));
+            this.addColorSelector("Background", props.bg_color || "transparent", colors, (v) => updateProp("bg_color", v));
+
+            this.createSection("Border Style", false);
+            this.addLabeledInput("Border Width", "number", props.border_width || 0, (v) => updateProp("border_width", parseInt(v, 10)));
+            this.addColorSelector("Border Color", props.border_color || "theme_auto", colors, (v) => updateProp("border_color", v));
+            this.addLabeledInput("Corner Radius", "number", props.border_radius || 0, (v) => updateProp("border_radius", parseInt(v, 10)));
+            this.addDropShadowButton(this.getContainer(), widget.id);
+            this.endSection();
+
             this.endSection();
         }
         else if (type === "sensor_text") {
@@ -910,6 +919,7 @@ export class PropertiesPanel {
             this.addSelect("Font", props.font_family || "Roboto", ["Roboto", "Inter", "Roboto Mono"], (v) => updateProp("font_family", v));
             this.endSection();
         }
+
         else {
             // Smart Generic Fallback: Include Entity & Title if they likely exist
             const hasEntity = widget.entity_id !== undefined || props.weather_entity !== undefined || type.includes("sensor") || type.includes("icon");
@@ -1377,8 +1387,15 @@ export class PropertiesPanel {
             this.addSelect("Font Reference", props.font_ref || "font_mdi_medium", ["font_mdi_medium", "font_mdi_large"], (v) => updateProp("font_ref", v));
             this.addColorSelector("Color", props.color || "black", colors, (v) => updateProp("color", v));
             this.addColorSelector("Background", props.bg_color || "transparent", colors, (v) => updateProp("bg_color", v));
+
+            this.createSection("Border Style", false);
+            this.addLabeledInput("Border Width", "number", props.border_width || 0, (v) => updateProp("border_width", parseInt(v, 10)));
+            this.addColorSelector("Border Color", props.border_color || "theme_auto", colors, (v) => updateProp("border_color", v));
+            this.addLabeledInput("Corner Radius", "number", props.border_radius || 0, (v) => updateProp("border_radius", parseInt(v, 10)));
             this.addDropShadowButton(this.getContainer(), widget.id);
             this.endSection();
+
+            this.endSection();
         }
         else if (type === "battery_icon") {
             this.createSection("Data Source", true);
