Xandrossian/homeassistant_espscreen
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add readable pastel tile backgrounds and refresh setup documentation

Browse Source
This commit is contained in:
Max Gramser
2026-09-12 18:48:49 +02:00
parent ed6192e4dc
commit b327010025
20 changed files with 370 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
screen_manager/app/static/app.js
+24 -1
View File
@@ -249,6 +249,8 @@ function renderPreview() {
const card = node("button", undefined, "preview-tile");
if (tile) {
const name = tile.name || inventory.entities.find(e => e.id === tile.entity)?.name || tile.entity;
const background=inventory.backgrounds?.[tile.options?.background]?.color;
if(background)card.style.backgroundColor=background;
card.append(domainBadge(tile.entity), node("strong", name));
card.draggable = true;
card.ondragstart = (e) => { dragIndex = slot; e.dataTransfer.setData("text/plain", String(slot)); };
@@ -358,6 +360,27 @@ function renderTiles() {
if (!e.target.closest("input, select, button, summary, .tile-options"))
options.open = !options.open;
};
const palette = node("fieldset", undefined, "tile-palette");
palette.append(node("legend", "Pastel achtergrond"));
const swatches = node("div", undefined, "palette-swatches");
for(const [key, choice] of Object.entries(inventory.backgrounds || {})) {
const button=node("button", undefined, "palette-choice");
button.type="button";
button.setAttribute("aria-label", `Achtergrond: ${choice.label}`);
button.setAttribute("aria-pressed", String((tile.options?.background || "auto") === key));
const sample=node("span", undefined, "palette-sample");
if(choice.color)sample.style.backgroundColor=choice.color;
else sample.classList.add("palette-auto");
button.append(sample,node("span",choice.label));
button.onclick=()=>{
tile.options={...tile.options,background:key};
for(const other of swatches.children)other.setAttribute("aria-pressed",String(other===button));
markDirty();renderPreview();
};
swatches.append(button);
}
palette.append(swatches,node("small", "Donkere tekst blijft leesbaar. Kies Standaard voor de normale kleuren. Vereist schermfirmware 0.2.10+."));
options.append(palette);
const controls = {};
const domain = tile.entity.split(".")[0];
const fields = [
@@ -803,7 +826,7 @@ async function inspect(entity) {
card.append(
node(
"small",
`Kleine slider: ${options.inline === "slider" ? "ja" : "nee"} · Weergave: ${options.display === "watch" ? "grote waarde" : "standaard"}`,
`Kleine slider: ${options.inline === "slider" ? "ja" : "nee"} · Weergave: ${options.display === "watch" ? "grote waarde" : "standaard"} · Achtergrond: ${inventory.backgrounds?.[options.background || "auto"]?.label || "Standaard"}`,
),
);
$("#inspection-summary").append(card);
screen_manager/app/static/style.css
+10
View File
@@ -720,3 +720,13 @@ pre {
#tiles > .selected-tile { background: #f8fafc; border-color: #aac4df; }
.picker { position: sticky; top: 16px; }
@media (max-width: 800px) { .picker { position: static; } }
.tile-palette { margin: 12px 0; padding: 12px; border: 1px solid #d8dfe5; border-radius: 12px; }
.tile-palette legend { font-weight: 650; padding: 0 5px; }
.palette-swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(66px, 1fr)); gap: 8px; margin-bottom: 10px; }
.palette-choice { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 6px; color: #1b1b1b; background: white; border: 2px solid transparent; border-radius: 10px; font-size: 12px; }
.palette-choice[aria-pressed="true"] { border-color: #1674ae; background: #edf6ff; }
.palette-choice:focus-visible { outline: 3px solid #1674ae; outline-offset: 2px; }
.palette-sample { width: 36px; height: 28px; border-radius: 7px; border: 1px solid #0002; }
.palette-auto { background: linear-gradient(135deg, #fff 50%, #e5e7eb 50%); }
.tile-palette small { color: #52616e; }