Restore LVGL schema parity & tests

Restore legacy LVGL schema parity and add tests + tooling to detect regressions. Updated multiple LVGL plugins (button, chart, keyboard, meter, qrcode, spinner, textarea, progress_bar) to accept legacy aliases and unified props (e.g. color/text_color, textarea_id/textarea, placeholder/placeholder_text, spin_time/time, size, scale_width, checkable) and to preserve equivalent export behavior. Enhanced extraction and diff tooling to parse legacy renderer branches, handle generic root keys, property aliases, and ignore known regressions. Updated current_keys.json and parity_report.json to reflect parity, and added vitest tests for LVGL schema parity and progress_bar properties.

Author: koosoli

custom_components/esphome_designer/frontend/features/lvgl_button/plugin.js

@@ -7,18 +7,19 @@ import { getWeightsForFont, clampFontWeight } from '../../js/core/font_weights.j
 
 const render = (el, widget, { getColorStyle }) => {
     const props = widget.props || {};
+    const textColor = props.color || props.text_color || "theme_auto";
     el.innerHTML = "";
     el.style.display = "flex";
     el.style.alignItems = "center";
     el.style.justifyContent = "center";
     el.style.boxSizing = "border-box";
     el.style.backgroundColor = getColorStyle(props.bg_color || "white");
-    el.style.border = `${props.border_width || 2}px solid ${getColorStyle(props.text_color || "black")}`;
+    el.style.border = `${props.border_width || 2}px solid ${getColorStyle(textColor)}`;
     el.style.borderRadius = `${props.radius || 5}px`;
 
     const text = document.createElement("span");
     text.textContent = props.text || "BTN";
-    text.style.color = getColorStyle(props.text_color || "black");
+    text.style.color = getColorStyle(textColor);
     text.style.fontFamily = props.font_family || "Roboto, sans-serif";
     text.style.fontSize = (props.font_size || 14) + "px";
     text.style.fontWeight = props.font_weight || 400;
@@ -29,6 +30,7 @@ const render = (el, widget, { getColorStyle }) => {
 
 const exportLVGL = (w, { common, convertColor, formatOpacity, _profile, getLVGLFont }) => {
     const p = w.props || {};
+    const textColor = p.color || p.text_color;
 
     // Robust entity ID detection: check top-level, props.entity_id, and props.entity
     const entityId = (w.entity_id || p.entity_id || p.entity || "").trim();
@@ -39,7 +41,7 @@ const exportLVGL = (w, { common, convertColor, formatOpacity, _profile, getLVGLF
             bg_color: convertColor(p.bg_color),
             bg_opa: "cover",
             border_width: p.border_width,
-            border_color: convertColor(p.text_color),
+            border_color: convertColor(textColor),
             radius: p.radius,
             opa: formatOpacity(p.opa),
             on_click: undefined,
@@ -49,7 +51,7 @@ const exportLVGL = (w, { common, convertColor, formatOpacity, _profile, getLVGLF
                         align: "center",
                         text: `"${p.text || 'BTN'}"`,
                         text_font: getLVGLFont ? getLVGLFont(p.font_family, p.font_size, p.font_weight, p.italic) : undefined,
-                        text_color: convertColor(p.text_color)
+                        text_color: convertColor(textColor)
                     }
                 }
             ]
@@ -83,9 +85,10 @@ export default {
     defaults: {
         text: "Button",
         bg_color: "theme_auto_inverse",
-        text_color: "theme_auto",
+        color: "theme_auto",
         border_width: 2,
         radius: 5,
+        checkable: false,
         opa: 255,
         font_size: 14,
         font_family: "Roboto",
@@ -105,10 +108,11 @@ export default {
         {
             section: "Appearance",
             fields: [
-                { key: "text_color", label: "Text/Border Color", type: "color", default: "theme_auto" },
+                { key: "color", label: "Text/Border Color", type: "color", default: "theme_auto" },
                 { key: "bg_color", label: "Background color", type: "color", default: "theme_auto_inverse" },
                 { key: "border_width", label: "Border width", type: "number", default: 2 },
                 { key: "radius", label: "Corner Radius", type: "number", default: 5 },
+                { key: "checkable", label: "Checkable (Toggle)", type: "checkbox", default: false },
                 { key: "opa", label: "Opacity (0 - 255)", type: "number", default: 255 },
                 { key: "opacity", label: "Opacity (0 - 255)", type: "number", default: 255 }
             ]

custom_components/esphome_designer/frontend/features/lvgl_chart/plugin.js

@@ -131,6 +131,7 @@ export default {
     name: "Chart",
     category: "LVGL",
     defaults: {
+        entity_id: "",
         min: 0,
         max: 100,
         color: "blue",
@@ -147,7 +148,8 @@ export default {
         {
             section: "Content",
             fields: [
-                { key: "title", label: "Chart Title", type: "text", default: "Chart" }
+                { key: "title", label: "Chart Title", type: "text", default: "Chart" },
+                { key: "entity_id", target: "root", label: "Entity ID", type: "entity_picker", default: "" }
             ]
         },
         {

custom_components/esphome_designer/frontend/features/lvgl_keyboard/plugin.js

@@ -34,10 +34,12 @@ const render = (el, widget, { _getColorStyle }) => {
 
 const exportLVGL = (w, { common, formatOpacity }) => {
     const p = w.props || {};
+    const textareaId = w.textarea_id || p.textarea_id || w.textarea || p.textarea || "";
     return {
         keyboard: {
             ...common,
             mode: p.mode || "TEXT_LOWER",
+            textarea: textareaId || undefined,
             opa: formatOpacity(p.opa)
         }
     };
@@ -50,6 +52,7 @@ export default {
     defaults: {
         mode: "TEXT_LOWER",
         opa: 255,
+        textarea_id: "",
         textarea: "",
         opacity: 255
     },
@@ -58,7 +61,7 @@ export default {
             section: "Keyboard Settings",
             fields: [
                 { key: "mode", label: "Initial Mode", type: "select", options: ["TEXT_LOWER", "TEXT_UPPER", "SPECIAL", "NUMBER", "USER_1", "USER_2", "USER_3", "USER_4"], default: "TEXT_LOWER" },
-                { key: "textarea", target: "root", label: "Target Textarea ID", type: "text", default: "" }
+                { key: "textarea_id", target: "root", label: "Target Textarea ID", type: "text", default: "" }
             ]
         },
         {

custom_components/esphome_designer/frontend/features/lvgl_meter/plugin.js

@@ -192,6 +192,7 @@ export default {
         bg_color: "lightgray",
         color: "black",
         indicator_color: "red",
+        scale_width: 10,
         opa: 255,
         entity_id: "",
         tick_count: 11,
@@ -220,6 +221,7 @@ export default {
             fields: [
                 { key: "color", label: "Tick/Label Color", type: "color", default: "black" },
                 { key: "bg_color", label: "Arc/Scale Color", type: "color", default: "lightgray" },
+                { key: "scale_width", label: "Scale Width", type: "number", default: 10 },
                 { key: "tick_count", label: "Ticks", type: "number", default: 11 },
                 { key: "tick_length", label: "Tick Length", type: "number", default: 10 },
                 { key: "label_gap", label: "Label Gap", type: "number", default: 10 }

custom_components/esphome_designer/frontend/features/lvgl_qrcode/plugin.js

@@ -46,6 +46,7 @@ const render = (el, widget, { getColorStyle }) => {
 const exportLVGL = (w, { common, convertColor }) => {
     const p = w.props || {};
     let qrText = `"${p.text || 'https://github.com/koosoli/ESPHomeDesigner/'}"`;
+    const size = p.size || Math.min(common.width, common.height);
 
     if (w.entity_id) {
         const safeId = w.entity_id.replace(/[^a-zA-Z0-9_]/g, "_");
@@ -56,7 +57,7 @@ const exportLVGL = (w, { common, convertColor }) => {
         qrcode: {
             ...common,
             text: qrText,
-            size: Math.min(common.width, common.height),
+            size,
             dark_color: convertColor(p.color),
             light_color: convertColor(p.bg_color || "white")
         }
@@ -90,6 +91,7 @@ export default {
         text: "https://github.com/koosoli/ESPHomeDesigner/",
         color: "black",
         bg_color: "white",
+        size: 100,
         scale: 4,
         width: 130,
         height: 130,
@@ -108,6 +110,7 @@ export default {
         {
             section: "Appearance",
             fields: [
+                { key: "size", label: "Size (px)", type: "number", default: 100 },
                 { key: "color", label: "Foreground Color", type: "color", default: "black" },
                 { key: "bg_color", label: "Background Color", type: "color", default: "white" },
                 { key: "scale", label: "Pixel Scale", type: "number", default: 4 },

custom_components/esphome_designer/frontend/features/lvgl_spinner/plugin.js

@@ -63,6 +63,7 @@ export default {
     name: "Spinner",
     category: "LVGL",
     defaults: {
+        spin_time: 1000,
         time: 1000,
         arc_length: 60,
         arc_color: "blue",
@@ -74,7 +75,7 @@ export default {
         {
             section: "Settings",
             fields: [
-                { key: "time", label: "Cycle Time (ms)", type: "number", default: 1000 },
+                { key: "spin_time", label: "Spin Time (ms)", type: "number", default: 1000 },
                 { key: "arc_length", label: "Arc Length (deg)", type: "number", default: 60 }
             ]
         },
@@ -91,11 +92,12 @@ export default {
     render,
     exportLVGL: (w, { common, convertColor }) => {
         const props = w.props || {};
+        const spinTime = props.spin_time ?? props.time ?? 1000;
         return {
             "spinner": {
                 ...common,
                 "arc_length": props.arc_length || 60,
-                "spin_time": `${props.time || 1000}ms`,
+                "spin_time": `${spinTime}ms`,
                 "indicator": {
                     "arc_color": convertColor(props.arc_color || "blue")
                 },

custom_components/esphome_designer/frontend/features/lvgl_textarea/plugin.js

@@ -6,7 +6,7 @@
 const render = (el, widget, { _getColorStyle }) => {
     const props = widget.props || {};
     const text = props.text || "";
-    const placeholder = props.placeholder_text || "Enter text...";
+    const placeholder = props.placeholder_text || props.placeholder || "Enter text...";
 
     el.innerHTML = "";
     el.style.display = "flex";
@@ -53,7 +53,7 @@ const exportLVGL = (w, context) => {
     obj.type = "textarea";
     obj.attrs = {
         ...obj.attrs,
-        placeholder_text: props.placeholder,
+        placeholder_text: props.placeholder_text ?? props.placeholder,
         text: props.text,
         max_length: props.max_length,
         one_line: props.one_line ?? false,
@@ -69,6 +69,7 @@ export default {
     category: "LVGL",
     defaults: {
         text: "",
+        placeholder: "Enter text...",
         placeholder_text: "Enter text...",
         max_length: 128,
         accepted_chars: "",

custom_components/esphome_designer/frontend/features/progress_bar/plugin.js

@@ -355,6 +355,9 @@ export default {
 
         panel.createSection("Labels", false);
         panel.addCheckbox("Display Title", props.show_label !== false, (v) => updateProp("show_label", v));
+        panel.addLabeledInput("Title", "text", widget.title || "", (v) => {
+            AppState.updateWidget(widget.id, { title: v });
+        });
         panel.addCheckbox("Display Percentage", props.show_percentage !== false, (v) => updateProp("show_percentage", v));
         panel.addLabeledInput("Font Size", "number", props.font_size || 12, (v) => updateProp("font_size", parseInt(v, 10)));
         panel.addSelect("Text Align", props.text_align || "CENTER", ["LEFT", "CENTER", "RIGHT"], (v) => updateProp("text_align", v));