Moved to lvgl 9.4 because 9.5 has removed runtime xml support.
Made basic example of editing xml layout from backend.
This commit is contained in:
@@ -146,12 +146,12 @@ dependencies:
|
||||
type: service
|
||||
version: 1.20.4
|
||||
lvgl/lvgl:
|
||||
component_hash: 184e532558c1c45fefed631f3e235423d22582aafb4630f3e8885c35281a49ae
|
||||
component_hash: 17e68bfd21f0edf4c3ee838e2273da840bf3930e5dbc3bfa6c1190c3aed41f9f
|
||||
dependencies: []
|
||||
source:
|
||||
registry_url: https://components.espressif.com/
|
||||
type: service
|
||||
version: 9.5.0
|
||||
version: 9.4.0
|
||||
direct_dependencies:
|
||||
- espressif/ethernet_init
|
||||
- espressif/led_strip
|
||||
@@ -159,6 +159,6 @@ direct_dependencies:
|
||||
- idf
|
||||
- joltwallet/littlefs
|
||||
- lvgl/lvgl
|
||||
manifest_hash: 96112412d371d78cc527b7d0904042e5a7ca7c4f25928de9483a1b53dd2a2f4e
|
||||
manifest_hash: 0c7ea64d32655d6be4f726b7946e96626bce0de88c2dc8f091bb5e365d26a374
|
||||
target: esp32s3
|
||||
version: 2.0.0
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script>
|
||||
import { getDevices, updateDeviceLayout } from './api.js';
|
||||
import { getDevices, updateDeviceLayout, registerDevice } from './api.js';
|
||||
|
||||
let devices = $state([]);
|
||||
let loading = $state(true);
|
||||
@@ -10,6 +10,11 @@
|
||||
let savingMac = $state('');
|
||||
let saveResult = $state('');
|
||||
|
||||
const DEFAULT_XML = `<lv_obj width="100%" height="100%" flex_flow="column" align="center" style_pad_row="10">\n <lv_label text="Hello World" />\n <lv_label bind_text="device_mac" />\n</lv_obj>`;
|
||||
|
||||
// Debug states
|
||||
let debugRegistering = $state(false);
|
||||
|
||||
async function loadDevices() {
|
||||
loading = true;
|
||||
error = '';
|
||||
@@ -22,11 +27,26 @@
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSaveLayout(mac) {
|
||||
savingMac = mac;
|
||||
async function handleDebugRegister() {
|
||||
debugRegistering = true;
|
||||
try {
|
||||
// Generate a fake MAC like "DE:BU:G0:xx:xx:xx"
|
||||
const hex = () => Math.floor(Math.random() * 256).toString(16).padStart(2, '0').toUpperCase();
|
||||
const fakeMac = `DE:BU:G0:${hex()}:${hex()}:${hex()}`;
|
||||
await registerDevice(fakeMac);
|
||||
await loadDevices();
|
||||
} catch (e) {
|
||||
error = e.message || 'Failed to register debug device';
|
||||
} finally {
|
||||
debugRegistering = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSaveLayout(device) {
|
||||
savingMac = device.mac;
|
||||
saveResult = '';
|
||||
try {
|
||||
await updateDeviceLayout(mac, editingXml[mac] || '');
|
||||
await updateDeviceLayout(device.mac, editingXml[device.mac] ?? device.xml_layout);
|
||||
saveResult = 'ok';
|
||||
await loadDevices();
|
||||
} catch (e) {
|
||||
@@ -87,9 +107,15 @@
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
{#if device.has_layout}
|
||||
{#if device.xml_layout === DEFAULT_XML}
|
||||
<span class="text-[10px] bg-accent/20 text-accent px-2 py-0.5 rounded-full uppercase tracking-wider font-semibold">
|
||||
Default Layout
|
||||
</span>
|
||||
{:else}
|
||||
<span class="text-[10px] bg-success/20 text-success px-2 py-0.5 rounded-full uppercase tracking-wider font-semibold">
|
||||
Layout Set
|
||||
</span>
|
||||
{/if}
|
||||
{:else}
|
||||
<span class="text-[10px] bg-border/50 text-text-secondary px-2 py-0.5 rounded-full uppercase tracking-wider font-semibold">
|
||||
No Layout
|
||||
@@ -100,20 +126,20 @@
|
||||
|
||||
<!-- XML Editor -->
|
||||
<div class="p-5 space-y-3">
|
||||
<label class="text-xs font-semibold text-text-secondary uppercase tracking-wider">
|
||||
<label for="xml-{device.mac}" class="text-xs font-semibold text-text-secondary uppercase tracking-wider">
|
||||
LVGL XML Layout
|
||||
</label>
|
||||
<!-- svelte-ignore a11y_autofocus -->
|
||||
<textarea
|
||||
id="xml-{device.mac}"
|
||||
class="w-full h-32 bg-bg-primary border border-border rounded-lg p-3 text-xs font-mono text-text-primary resize-y focus:border-accent focus:outline-none transition-colors placeholder:text-text-secondary/50"
|
||||
placeholder='<lv_label text="Hello World" align="center" />'
|
||||
value={editingXml[device.mac] ?? ''}
|
||||
placeholder={DEFAULT_XML}
|
||||
value={editingXml[device.mac] ?? device.xml_layout}
|
||||
oninput={(e) => editingXml[device.mac] = e.target.value}
|
||||
></textarea>
|
||||
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
{#if device.has_layout}
|
||||
<a
|
||||
href="/api/devices/screen.png?mac={device.mac}"
|
||||
target="_blank"
|
||||
@@ -121,10 +147,9 @@
|
||||
>
|
||||
Preview PNG →
|
||||
</a>
|
||||
{/if}
|
||||
</div>
|
||||
<button
|
||||
onclick={() => handleSaveLayout(device.mac)}
|
||||
onclick={() => handleSaveLayout(device)}
|
||||
disabled={savingMac === device.mac}
|
||||
class="px-4 py-2 text-xs font-medium rounded-lg transition-colors
|
||||
bg-accent/10 text-accent border border-accent/20
|
||||
@@ -145,4 +170,25 @@
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<details class="mt-8 border text-xs border-border rounded-lg bg-bg-card opacity-50 hover:opacity-100 transition-opacity">
|
||||
<summary class="px-4 py-3 cursor-pointer font-medium text-text-secondary select-none">
|
||||
Debug Tools
|
||||
</summary>
|
||||
<div class="p-4 border-t border-border border-dashed space-y-4">
|
||||
<p class="text-text-secondary">
|
||||
Quickly register a new device to format layouts.
|
||||
</p>
|
||||
<button
|
||||
onclick={handleDebugRegister}
|
||||
disabled={debugRegistering}
|
||||
class="px-4 py-2 font-medium rounded-lg transition-colors
|
||||
bg-accent/10 text-accent border border-accent/20
|
||||
hover:bg-accent/20 hover:border-accent/30
|
||||
disabled:opacity-40 disabled:cursor-not-allowed"
|
||||
>
|
||||
{debugRegistering ? 'Registering...' : 'Add Fake Device'}
|
||||
</button>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
@@ -287,6 +287,24 @@ export async function getDevices() {
|
||||
return res.json();
|
||||
}
|
||||
|
||||
/**
|
||||
* Register a new device.
|
||||
* @param {string} mac
|
||||
* @returns {Promise<{status: string}>}
|
||||
*/
|
||||
export async function registerDevice(mac) {
|
||||
const res = await trackedFetch(`${API_BASE}/api/devices/register`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ mac })
|
||||
});
|
||||
if (!res.ok) {
|
||||
const errorText = await res.text();
|
||||
throw new Error(`Failed (${res.status}): ${errorText || res.statusText}`);
|
||||
}
|
||||
return res.json();
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the LVGL XML layout for a device.
|
||||
* @param {string} mac
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"major": 0,
|
||||
"minor": 1,
|
||||
"revision": 30
|
||||
"revision": 32
|
||||
}
|
||||
@@ -60,14 +60,14 @@ internal esp_err_t api_devices_layout_handler(httpd_req_t *req)
|
||||
cJSON *mac_item = cJSON_GetObjectItem(body, "mac");
|
||||
cJSON *xml_item = cJSON_GetObjectItem(body, "xml");
|
||||
|
||||
if (!cJSON_IsString(mac_item) || strlen(mac_item->valuestring) == 0)
|
||||
if (!cJSON_IsString(mac_item) || !mac_item->valuestring || strlen(mac_item->valuestring) == 0)
|
||||
{
|
||||
cJSON_Delete(body);
|
||||
httpd_resp_send_err(req, HTTPD_400_BAD_REQUEST, "Missing 'mac'");
|
||||
return ESP_FAIL;
|
||||
}
|
||||
|
||||
if (!cJSON_IsString(xml_item))
|
||||
if (!cJSON_IsString(xml_item) || !xml_item->valuestring)
|
||||
{
|
||||
cJSON_Delete(body);
|
||||
httpd_resp_send_err(req, HTTPD_400_BAD_REQUEST, "Missing 'xml'");
|
||||
@@ -75,10 +75,10 @@ internal esp_err_t api_devices_layout_handler(httpd_req_t *req)
|
||||
}
|
||||
|
||||
bool ok = update_device_layout(mac_item->valuestring, xml_item->valuestring);
|
||||
cJSON_Delete(body);
|
||||
|
||||
if (!ok)
|
||||
{
|
||||
cJSON_Delete(body);
|
||||
httpd_resp_send_err(req, HTTPD_404_NOT_FOUND, "Device not found");
|
||||
return ESP_FAIL;
|
||||
}
|
||||
@@ -86,6 +86,8 @@ internal esp_err_t api_devices_layout_handler(httpd_req_t *req)
|
||||
ESP_LOGI(kTagDeviceLayout, "Updated layout for %s (%zu bytes)", mac_item->valuestring,
|
||||
strlen(xml_item->valuestring));
|
||||
|
||||
cJSON_Delete(body);
|
||||
|
||||
httpd_resp_sendstr(req, "{\"status\":\"ok\"}");
|
||||
return ESP_OK;
|
||||
}
|
||||
|
||||
@@ -20,6 +20,7 @@ internal esp_err_t api_devices_get_handler(httpd_req_t *req)
|
||||
cJSON *obj = cJSON_CreateObject();
|
||||
cJSON_AddStringToObject(obj, "mac", g_Devices[i].mac);
|
||||
cJSON_AddBoolToObject(obj, "has_layout", g_Devices[i].xml_layout[0] != '\0');
|
||||
cJSON_AddStringToObject(obj, "xml_layout", g_Devices[i].xml_layout);
|
||||
cJSON_AddItemToArray(arr, obj);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -32,7 +32,7 @@ internal esp_err_t api_devices_register_handler(httpd_req_t *req)
|
||||
}
|
||||
|
||||
cJSON *mac_item = cJSON_GetObjectItem(body, "mac");
|
||||
if (!cJSON_IsString(mac_item) || strlen(mac_item->valuestring) == 0)
|
||||
if (!cJSON_IsString(mac_item) || !mac_item->valuestring || strlen(mac_item->valuestring) == 0)
|
||||
{
|
||||
cJSON_Delete(body);
|
||||
httpd_resp_send_err(req, HTTPD_400_BAD_REQUEST, "Missing 'mac'");
|
||||
@@ -41,10 +41,10 @@ internal esp_err_t api_devices_register_handler(httpd_req_t *req)
|
||||
|
||||
bool was_new = false;
|
||||
device_t *dev = register_device(mac_item->valuestring, &was_new);
|
||||
cJSON_Delete(body);
|
||||
|
||||
if (!dev)
|
||||
{
|
||||
cJSON_Delete(body);
|
||||
httpd_resp_send_err(req, HTTPD_500_INTERNAL_SERVER_ERROR, "Device limit reached");
|
||||
return ESP_FAIL;
|
||||
}
|
||||
@@ -61,6 +61,8 @@ internal esp_err_t api_devices_register_handler(httpd_req_t *req)
|
||||
}
|
||||
cJSON_AddStringToObject(resp, "mac", dev->mac);
|
||||
|
||||
cJSON_Delete(body);
|
||||
|
||||
const char *json = cJSON_PrintUnformatted(resp);
|
||||
httpd_resp_sendstr(req, json);
|
||||
|
||||
|
||||
@@ -1,24 +1,26 @@
|
||||
// GET /api/devices/screen.png?mac=XX — Render and return a PNG for the device's current screen
|
||||
// Uses LVGL to render the device's XML layout (or a fallback label) then encodes to PNG via lodepng.
|
||||
// GET /api/devices/screen.png?mac=XX — Render and return a PNG for the device's
|
||||
// current screen Uses LVGL to render the device's XML layout (or a fallback
|
||||
// label) then encodes to PNG via lodepng.
|
||||
|
||||
#include "lv_setup.hpp"
|
||||
#include "lodepng/lodepng.h"
|
||||
#include "esp_heap_caps.h"
|
||||
#include "esp_http_server.h"
|
||||
#include "esp_log.h"
|
||||
#include "esp_heap_caps.h"
|
||||
#include "lodepng/lodepng.h"
|
||||
#include "lodepng_alloc.hpp"
|
||||
#include "lv_setup.hpp"
|
||||
#include "lvgl.h"
|
||||
#include <string.h>
|
||||
#include "lodepng_alloc.hpp"
|
||||
|
||||
#include "types.hpp"
|
||||
#include "device.hpp"
|
||||
#include "types.hpp"
|
||||
|
||||
internal const char *kTagDeviceScreenImage = "API_DEV_SCREEN_IMG";
|
||||
|
||||
internal esp_err_t api_devices_screen_image_handler(httpd_req_t *req)
|
||||
{
|
||||
httpd_resp_set_hdr(req, "Access-Control-Allow-Origin", "*");
|
||||
httpd_resp_set_hdr(req, "Cache-Control", "no-cache, no-store, must-revalidate");
|
||||
httpd_resp_set_hdr(req, "Cache-Control",
|
||||
"no-cache, no-store, must-revalidate");
|
||||
httpd_resp_set_type(req, "image/png");
|
||||
|
||||
// Extract mac query parameter
|
||||
@@ -35,7 +37,8 @@ internal esp_err_t api_devices_screen_image_handler(httpd_req_t *req)
|
||||
|
||||
if (mac[0] == '\0')
|
||||
{
|
||||
httpd_resp_send_err(req, HTTPD_400_BAD_REQUEST, "Missing 'mac' query param");
|
||||
httpd_resp_send_err(req, HTTPD_400_BAD_REQUEST,
|
||||
"Missing 'mac' query param");
|
||||
return ESP_FAIL;
|
||||
}
|
||||
|
||||
@@ -62,23 +65,108 @@ internal esp_err_t api_devices_screen_image_handler(httpd_req_t *req)
|
||||
// White background for grayscale
|
||||
lv_obj_set_style_bg_color(scr, lv_color_white(), LV_PART_MAIN);
|
||||
|
||||
if (dev->xml_layout[0] != '\0')
|
||||
// Setup the MAC address subject so the XML can bind to it
|
||||
static lv_subject_t mac_subject;
|
||||
// Two buffers are needed by LVGL for string observers (current and previous)
|
||||
static char mac_buf[18];
|
||||
static char mac_prev_buf[18];
|
||||
|
||||
strncpy(mac_buf, mac, sizeof(mac_buf));
|
||||
strncpy(mac_prev_buf, mac, sizeof(mac_prev_buf));
|
||||
|
||||
lv_subject_init_string(&mac_subject, mac_buf, mac_prev_buf, sizeof(mac_buf),
|
||||
mac);
|
||||
|
||||
// Register the subject in the global XML scope under the name "device_mac"
|
||||
lv_xml_component_scope_t *global_scope =
|
||||
lv_xml_component_get_scope("globals");
|
||||
if (global_scope)
|
||||
{
|
||||
// TODO: Use lv_xml_create() when LVGL XML runtime is verified working.
|
||||
// For now, show the XML as text to prove the pipeline works end to end.
|
||||
// Once we confirm LV_USE_XML compiles, we'll swap this for the real XML parser.
|
||||
lv_obj_t *label = lv_label_create(scr);
|
||||
lv_label_set_text(label, dev->xml_layout);
|
||||
lv_obj_set_style_text_color(label, lv_color_black(), LV_PART_MAIN);
|
||||
lv_obj_align(label, LV_ALIGN_TOP_LEFT, 10, 10);
|
||||
lv_xml_register_subject(global_scope, "device_mac", &mac_subject);
|
||||
ESP_LOGI(kTagDeviceScreenImage,
|
||||
"Registered subject 'device_mac' with value: %s", mac);
|
||||
}
|
||||
|
||||
bool render_success = false;
|
||||
|
||||
// 1. Wrap the payload in a <component><view> if it's missing (LVGL 9.4
|
||||
// requirement for register_component_from_data)
|
||||
char xml_buffer[2500];
|
||||
const char *xml_to_register = (const char *)dev->xml_layout;
|
||||
|
||||
if (strstr(xml_to_register, "<view") == NULL &&
|
||||
strstr(xml_to_register, "<screen") == NULL)
|
||||
{
|
||||
snprintf(xml_buffer, sizeof(xml_buffer),
|
||||
"<component>\n<view width=\"100%%\" "
|
||||
"height=\"100%%\">\n%s\n</view>\n</component>",
|
||||
dev->xml_layout);
|
||||
xml_to_register = xml_buffer;
|
||||
ESP_LOGI(kTagDeviceScreenImage,
|
||||
"Wrapped widget XML in component/view for parsing.");
|
||||
}
|
||||
|
||||
// 2. Register the XML payload as a component
|
||||
lv_result_t res =
|
||||
lv_xml_register_component_from_data("current_device", xml_to_register);
|
||||
|
||||
if (res == LV_RESULT_OK)
|
||||
{
|
||||
ESP_LOGI(kTagDeviceScreenImage, "Successfully registered XML for device %s",
|
||||
mac);
|
||||
|
||||
// 3. Determine if this XML describes a full <screen> or just a <component>
|
||||
// layout Simple heuristic: check if the string contains "<screen"
|
||||
if (strstr(xml_to_register, "<screen") != NULL)
|
||||
{
|
||||
ESP_LOGI(kTagDeviceScreenImage,
|
||||
"XML contains <screen>, creating screen instance");
|
||||
lv_obj_t *new_scr = lv_xml_create_screen("current_device");
|
||||
|
||||
if (new_scr)
|
||||
{
|
||||
// We must load this newly created screen to make it active before
|
||||
// rendering
|
||||
lv_screen_load(new_scr);
|
||||
scr = new_scr; // Update local pointer since active screen changed
|
||||
render_success = true;
|
||||
}
|
||||
else
|
||||
{
|
||||
// Fallback: render "Hello <mac>"
|
||||
ESP_LOGE(kTagDeviceScreenImage,
|
||||
"lv_xml_create_screen failed for device %s", mac);
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
ESP_LOGI(kTagDeviceScreenImage,
|
||||
"XML is a component/widget, creating on active screen");
|
||||
// Create the component directly on the currently active cleaned screen
|
||||
lv_obj_t *comp = (lv_obj_t *)lv_xml_create(scr, "current_device", NULL);
|
||||
if (comp)
|
||||
{
|
||||
render_success = true;
|
||||
}
|
||||
else
|
||||
{
|
||||
ESP_LOGE(kTagDeviceScreenImage, "lv_xml_create failed for device %s",
|
||||
mac);
|
||||
}
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
ESP_LOGE(kTagDeviceScreenImage,
|
||||
"lv_xml_register_component_from_data failed for device %s", mac);
|
||||
}
|
||||
|
||||
// 3. Fallback if LVGL XML parsing or creation failed
|
||||
if (!render_success)
|
||||
{
|
||||
ESP_LOGW(kTagDeviceScreenImage,
|
||||
"XML render failed, falling back to raw text layout");
|
||||
lv_obj_t *label = lv_label_create(scr);
|
||||
char text[48];
|
||||
snprintf(text, sizeof(text), "Hello %s", mac);
|
||||
lv_label_set_text(label, text);
|
||||
lv_label_set_text(label, "XML Parsing Error\nSee serial log");
|
||||
lv_obj_set_style_text_color(label, lv_color_black(), LV_PART_MAIN);
|
||||
lv_obj_align(label, LV_ALIGN_CENTER, 0, 0);
|
||||
}
|
||||
@@ -91,7 +179,8 @@ internal esp_err_t api_devices_screen_image_handler(httpd_req_t *req)
|
||||
{
|
||||
xSemaphoreGive(g_LvglMutex);
|
||||
ESP_LOGE(kTagDeviceScreenImage, "No active draw buffer");
|
||||
httpd_resp_send_err(req, HTTPD_500_INTERNAL_SERVER_ERROR, "Display uninitialized");
|
||||
httpd_resp_send_err(req, HTTPD_500_INTERNAL_SERVER_ERROR,
|
||||
"Display uninitialized");
|
||||
return ESP_FAIL;
|
||||
}
|
||||
|
||||
@@ -104,12 +193,14 @@ internal esp_err_t api_devices_screen_image_handler(httpd_req_t *req)
|
||||
|
||||
if (draw_buf->header.stride != width)
|
||||
{
|
||||
packed_data = (uint8_t *)heap_caps_malloc(width * height, MALLOC_CAP_SPIRAM);
|
||||
packed_data =
|
||||
(uint8_t *)heap_caps_malloc(width * height, MALLOC_CAP_SPIRAM);
|
||||
if (!packed_data)
|
||||
{
|
||||
xSemaphoreGive(g_LvglMutex);
|
||||
ESP_LOGE(kTagDeviceScreenImage, "Failed to allocate packed buffer");
|
||||
httpd_resp_send_err(req, HTTPD_500_INTERNAL_SERVER_ERROR, "Out of memory");
|
||||
httpd_resp_send_err(req, HTTPD_500_INTERNAL_SERVER_ERROR,
|
||||
"Out of memory");
|
||||
return ESP_FAIL;
|
||||
}
|
||||
needs_free = true;
|
||||
@@ -126,8 +217,10 @@ internal esp_err_t api_devices_screen_image_handler(httpd_req_t *req)
|
||||
|
||||
lodepng_allocator_reset();
|
||||
|
||||
ESP_LOGI(kTagDeviceScreenImage, "Encoding %lux%lu PNG for device %s", width, height, mac);
|
||||
unsigned error = lodepng_encode_memory(&png, &pngsize, packed_data, width, height, LCT_GREY, 8);
|
||||
ESP_LOGI(kTagDeviceScreenImage, "Encoding %lux%lu PNG for device %s", width,
|
||||
height, mac);
|
||||
unsigned error = lodepng_encode_memory(&png, &pngsize, packed_data, width,
|
||||
height, LCT_GREY, 8);
|
||||
|
||||
if (needs_free)
|
||||
{
|
||||
@@ -138,15 +231,17 @@ internal esp_err_t api_devices_screen_image_handler(httpd_req_t *req)
|
||||
|
||||
if (error)
|
||||
{
|
||||
ESP_LOGE(kTagDeviceScreenImage, "PNG encoding error %u: %s", error, lodepng_error_text(error));
|
||||
httpd_resp_send_err(req, HTTPD_500_INTERNAL_SERVER_ERROR, "PNG generation failed");
|
||||
ESP_LOGE(kTagDeviceScreenImage, "PNG encoding error %u: %s", error,
|
||||
lodepng_error_text(error));
|
||||
httpd_resp_send_err(req, HTTPD_500_INTERNAL_SERVER_ERROR,
|
||||
"PNG generation failed");
|
||||
return ESP_FAIL;
|
||||
}
|
||||
|
||||
ESP_LOGI(kTagDeviceScreenImage, "PNG ready: %zu bytes. Sending...", pngsize);
|
||||
esp_err_t res = httpd_resp_send(req, (const char *)png, pngsize);
|
||||
esp_err_t sendRes = httpd_resp_send(req, (const char *)png, pngsize);
|
||||
|
||||
return res;
|
||||
return sendRes;
|
||||
}
|
||||
|
||||
internal const httpd_uri_t api_devices_screen_image_uri = {
|
||||
|
||||
@@ -35,7 +35,7 @@ internal device_t *register_device(const char *mac, bool *was_new)
|
||||
{
|
||||
strlcpy(g_Devices[i].mac, mac, sizeof(g_Devices[i].mac));
|
||||
g_Devices[i].active = true;
|
||||
g_Devices[i].xml_layout[0] = '\0';
|
||||
strlcpy(g_Devices[i].xml_layout, kDefaultLayoutXml, sizeof(g_Devices[i].xml_layout));
|
||||
*was_new = true;
|
||||
return &g_Devices[i];
|
||||
}
|
||||
|
||||
@@ -7,6 +7,12 @@
|
||||
constexpr int MAX_DEVICES = 8;
|
||||
constexpr int DEVICE_XML_MAX = 2048;
|
||||
|
||||
constexpr char kDefaultLayoutXml[] =
|
||||
"<lv_obj width=\"800\" height=\"480\" flex_flow=\"column\" flex_main_place=\"center\" flex_cross_place=\"center\" style_pad_row=\"10\">\n"
|
||||
" <lv_label text=\"Hello World\" />\n"
|
||||
" <lv_label bind_text=\"device_mac\" />\n"
|
||||
"</lv_obj>";
|
||||
|
||||
struct device_t
|
||||
{
|
||||
char mac[18]; // "AA:BB:CC:DD:EE:FF\0"
|
||||
|
||||
@@ -18,4 +18,4 @@ dependencies:
|
||||
espressif/mdns: ^1.4.1
|
||||
espressif/ethernet_init: ^1.3.0
|
||||
joltwallet/littlefs: "^1.20" # https://github.com/joltwallet/esp_littlefs
|
||||
lvgl/lvgl: "^9.2.0"
|
||||
lvgl/lvgl: "9.4.0"
|
||||
|
||||
@@ -27,7 +27,6 @@ CONFIG_ETHERNET_SPI_POLLING0_MS=0
|
||||
|
||||
# Enable PSRAM
|
||||
CONFIG_SPIRAM=y
|
||||
CONFIG_ESP32S3_SPIRAM_SUPPORT=y
|
||||
CONFIG_SPIRAM_MODE_OCT=y
|
||||
CONFIG_SPIRAM_SPEED_80M=y
|
||||
CONFIG_SPIRAM_FETCH_INSTRUCTIONS=y
|
||||
@@ -36,6 +35,7 @@ CONFIG_SPIRAM_RODATA=y
|
||||
# LVGL Configuration
|
||||
CONFIG_LV_COLOR_DEPTH_8=y
|
||||
CONFIG_LV_USE_SYSMON=n
|
||||
CONFIG_LV_USE_OBJ_NAME=y
|
||||
|
||||
# LVGL Memory Allocator (Use ESP-IDF Heap instead of internal 64kB BSS pool!)
|
||||
CONFIG_LV_USE_BUILTIN_MALLOC=n
|
||||
@@ -52,7 +52,6 @@ CONFIG_LV_BUILD_DEMOS=n
|
||||
|
||||
# Disable unused software drawing color formats (Only L8 and A8 matter for grayscale)
|
||||
CONFIG_LV_DRAW_SW_SUPPORT_RGB565=n
|
||||
CONFIG_LV_DRAW_SW_SUPPORT_RGB565_SWAPPED=n
|
||||
CONFIG_LV_DRAW_SW_SUPPORT_RGB565A8=n
|
||||
CONFIG_LV_DRAW_SW_SUPPORT_RGB888=n
|
||||
CONFIG_LV_DRAW_SW_SUPPORT_XRGB8888=n
|
||||
@@ -78,13 +77,13 @@ CONFIG_LV_USE_SPINBOX=n
|
||||
CONFIG_LV_USE_SPINNER=n
|
||||
CONFIG_LV_USE_KEYBOARD=n
|
||||
CONFIG_LV_USE_CALENDAR=n
|
||||
CONFIG_LV_USE_CHECKBOX=n
|
||||
CONFIG_LV_USE_CHECKBOX=y
|
||||
CONFIG_LV_USE_DROPDOWN=n
|
||||
CONFIG_LV_USE_IMAGEBUTTON=n
|
||||
CONFIG_LV_USE_ROLLER=n
|
||||
CONFIG_LV_USE_SCALE=n
|
||||
CONFIG_LV_USE_SLIDER=n
|
||||
CONFIG_LV_USE_SWITCH=n
|
||||
CONFIG_LV_USE_SWITCH=y
|
||||
CONFIG_LV_USE_TEXTAREA=n
|
||||
CONFIG_LV_USE_TABLE=n
|
||||
|
||||
@@ -99,3 +98,4 @@ CONFIG_LV_USE_OBSERVER=n
|
||||
|
||||
# Enable XML runtime for dynamic screen layouts (LVGL 9.4+)
|
||||
CONFIG_LV_USE_XML=y
|
||||
CONFIG_LV_USE_OBSERVER=y
|
||||
|
||||
@@ -53,7 +53,15 @@ The following REST endpoints handle the device lifecycle and image generation:
|
||||
### Subsystems Config
|
||||
The ESP-IDF project configuration (`sdkconfig.defaults`) must be modified to enable the `CONFIG_LV_USE_XML=y` flag, which compiles the LVGL XML parser component into the firmware image.
|
||||
|
||||
### XML Runtime Integration
|
||||
The user provided documentation for the `LV_USE_XML` runtime feature. We must:
|
||||
1. Call `lv_xml_register_component_from_data("current_device", dev->xml_layout)` to register the XML payload.
|
||||
2. Check if the XML string contains `<screen>`. If it does, LVGL expects us to instantiate it as a full screen using `lv_obj_t * root = lv_xml_create_screen("current_device");`.
|
||||
3. If it does not contain `<screen>`, it's just a regular component/widget, so we create it *on* the active screen using `lv_obj_t * root = lv_xml_create(scr, "current_device", NULL);`.
|
||||
4. Fallback to a string label if the XML is empty or parsing fails.
|
||||
|
||||
### Frontend
|
||||
- **DeviceManager.svelte:** A new component accessible from the Sidebar. It fetches the device list on load.
|
||||
- **XML Uploading:** For each device card, a text area allows the user to paste an LVGL XML string. Clicking "Save Layout" updates the device via `POST /api/devices/layout`.
|
||||
- **Debug Features:** A collapsed section (e.g. `<details>`) in the UI will contain a button to "Register Debug Device" that triggers a POST to `/api/devices/register` with a random or hardcoded MAC (e.g., `00:11:22:33:44:55`).
|
||||
- **Integration:** The `App.svelte` router will be updated to include the `'devices'` view state alongside Dashboard, Tasks, and Users.
|
||||
|
||||
Reference in New Issue
Block a user