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:
@@ -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}
|
||||
<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 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
|
||||
}
|
||||
Reference in New Issue
Block a user