0.7.3

Author: koosoli

custom_components/reterminal_dashboard/__init__.py

@@ -182,7 +182,7 @@ async def async_setup_entry(hass: HomeAssistant, entry: ConfigEntry) -> bool:
             frontend.async_register_built_in_panel(
                 hass,
                 component_name="iframe",  # Use iframe panel type to load our view
-                sidebar_title="reTerminal",
+                sidebar_title="ESPHome Designer",
                 sidebar_icon="mdi:tablet-dashboard",
                 frontend_url_path="reterminal-dashboard",
                 config={"url": "/reterminal-dashboard"},

custom_components/reterminal_dashboard/config_flow.py

@@ -41,7 +41,7 @@
 @dataclass
 class FlowContext:
     """Hold temporary flow context."""
-    entry_title: str = "reTerminal Dashboard Designer"
+    entry_title: str = "ESPHome Designer"
 
 
 async def _get_storage(hass: HomeAssistant) -> DashboardStorage:
@@ -129,7 +129,7 @@ async def async_step_init(self, user_input: dict[str, Any] | None = None):
         # Provide a textual summary; options dict not used to drive logic yet.
         info_text = (
             f"🎨 Dashboard Editor: {dashboard_url}\n\n"
-            "reTerminal Dashboard Designer is configured.\n\n"
+            "ESPHome Designer is configured.\n\n"
             "Use the following pattern in your ESPHome firmware for the reTerminal E1001:\n"
             f"  online_image URL: {api_base}" + "/{device_id}/page/{page}/image.png?token={api_token}\n\n"
             "Devices and layouts are managed via the dashboard editor and HTTP API."

custom_components/reterminal_dashboard/frontend/editor.html

@@ -15,6 +15,25 @@ class FeatureRegistry {
         console.log(`[FeatureRegistry] Registered: ${featureId}`);
     }
 
+    /**
+     * Map of legacy/simple names to feature IDs.
+     */
+    static aliases = {
+        "lvgl_tabview": "lvgl_tabview",
+        "lvgl_tileview": "lvgl_tileview",
+        "lvgl_led": "lvgl_led",
+        "lvgl_spinner": "lvgl_spinner",
+        "lvgl_buttonmatrix": "lvgl_buttonmatrix",
+        "lvgl_checkbox": "lvgl_checkbox",
+        "lvgl_dropdown": "lvgl_dropdown",
+        "lvgl_keyboard": "lvgl_keyboard",
+        "lvgl_roller": "lvgl_roller",
+        "lvgl_spinbox": "lvgl_spinbox",
+        "lvgl_switch": "lvgl_switch",
+        "lvgl_textarea": "lvgl_textarea",
+        "lvgl_obj": "lvgl_obj"
+    };
+
     /**
      * Get a registered feature renderer.
      * @param {string} featureId 

custom_components/reterminal_dashboard/frontend/feature_registry.js

@@ -0,0 +1,150 @@
+(() => {
+    // Helper used by the main render function
+    const drawCalendarPreview = (el, widget, props) => {
+        // Simple mock rendering for preview
+        const width = widget.width || 400;
+        const height = widget.height || 300;
+
+        el.style.width = width + "px";
+        el.style.height = height + "px";
+        el.style.position = "relative";
+        el.style.backgroundColor = props.background_color || "white";
+        el.style.color = props.text_color || "black";
+
+        if (props.show_border !== false) {
+            el.style.border = `${props.border_width || 2}px solid ${props.border_color || "black"}`;
+        }
+
+        // Dynamic Date Data
+        const now = new Date();
+        const date = now.getDate();
+        const dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+        const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+
+        const dayNameText = dayNames[now.getDay()];
+        const monthYearText = `${monthNames[now.getMonth()]} ${now.getFullYear()}`;
+
+        // Header
+        const header = document.createElement("div");
+        header.style.textAlign = "center";
+        header.style.padding = "10px";
+        header.style.borderBottom = "1px solid " + (props.text_color || "black");
+        // Ensure header doesn't grow too large
+        header.style.flexShrink = "0";
+
+        const bigDate = document.createElement("div");
+        bigDate.style.fontSize = Math.min((props.font_size_date || 100) / 2, 80) + "px";
+        bigDate.style.fontWeight = "100";
+        bigDate.style.lineHeight = "1";
+        bigDate.innerText = date;
+        header.appendChild(bigDate);
+
+        const dayName = document.createElement("div");
+        dayName.style.fontSize = (props.font_size_day || 24) + "px";
+        dayName.style.fontWeight = "bold";
+        dayName.innerText = dayNameText;
+        header.appendChild(dayName);
+
+        const dateLine = document.createElement("div");
+        dateLine.style.fontSize = (props.font_size_grid || 14) + "px";
+        dateLine.innerText = monthYearText;
+        header.appendChild(dateLine);
+
+        // Flex layout for the main container to push events to bottom if space permits
+        el.style.display = "flex";
+        el.style.flexDirection = "column";
+
+        el.appendChild(header);
+
+        // Grid Logic
+        const grid = document.createElement("div");
+        grid.style.display = "grid";
+        grid.style.gridTemplateColumns = "repeat(7, 1fr)";
+        grid.style.padding = "5px";
+        grid.style.gap = "2px";
+        grid.style.flexShrink = "0";
+
+        const gridFontSize = (props.font_size_grid || 14) + "px";
+
+        // Day Headers (Mon-Sun)
+        ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"].forEach(day => {
+            const d = document.createElement("div");
+            d.innerText = day;
+            d.style.textAlign = "center";
+            d.style.fontWeight = "bold";
+            d.style.fontSize = gridFontSize;
+            grid.appendChild(d);
+        });
+
+        // Days of Month
+        // Calculate correctly:
+        // 1. First day of current month
+        const firstDay = new Date(now.getFullYear(), now.getMonth(), 1);
+        // 2. Days in month
+        const lastDay = new Date(now.getFullYear(), now.getMonth() + 1, 0);
+        const daysInMonth = lastDay.getDate();
+
+        // 3. Offset (JS getDay: Sun=0, Mon=1... but we want Mon=0...Sun=6)
+        let startDay = firstDay.getDay(); // 0=Sun, 1=Mon
+        if (startDay === 0) startDay = 7; // Make Sunday 7 temporarily
+        startDay -= 1; // Now 0=Mon, ... 6=Sun
+
+        // Empty slots for start offset
+        for (let i = 0; i < startDay; i++) {
+            grid.appendChild(document.createElement("div"));
+        }
+
+        // Day numbers
+        for (let i = 1; i <= daysInMonth; i++) {
+            const d = document.createElement("div");
+            d.innerText = i;
+            d.style.textAlign = "center";
+            d.style.fontSize = gridFontSize;
+
+            if (i === date) {
+                // Highlight today
+                d.style.backgroundColor = props.text_color || "black";
+                d.style.color = props.background_color || "white";
+                d.style.borderRadius = "50%";
+                d.style.width = "1.5em";
+                d.style.height = "1.5em";
+                d.style.lineHeight = "1.5em";
+                d.style.margin = "0 auto";
+            }
+            grid.appendChild(d);
+        }
+        el.appendChild(grid);
+
+        // Mock Events
+        const events = document.createElement("div");
+        events.style.padding = "10px";
+        events.style.fontSize = (props.font_size_event || 18) + "px";
+        events.style.flexGrow = "1"; // Allow events area to fill remaining space
+        events.style.overflow = "hidden"; // Clip if too small
+
+        // Generate a few mock events based on 'today'
+        events.innerHTML = `
+            <div style="margin-bottom:4px;"><b>${date}</b> Meeting with Team</div>
+            <div><b>${Math.min(date + 2, daysInMonth)}</b> Dentist Appointment</div>
+        `;
+        el.appendChild(events);
+    };
+
+    const render = (el, widget, tools) => {
+        const props = widget.props || {};
+        el.innerHTML = "";
+        drawCalendarPreview(el, widget, props);
+    };
+
+    // Register with FeatureRegistry
+    if (window.FeatureRegistry) {
+        window.FeatureRegistry.register("calendar", { render });
+    } else {
+        // Retry in case loaded too early
+        setTimeout(() => {
+            if (window.FeatureRegistry) {
+                window.FeatureRegistry.register("calendar", { render });
+            }
+        }, 50);
+    }
+})();