Raum-Modal Licht: Preset als Chips, Effekt als durchsuchbarer Picker, WLED-Zustand live

Die native Auswahlliste zeichnete Chrome hell auf hell. Welcher Effekt und
welches Preset gerade laufen, liest room.php?action=wled direkt von der Lampe.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
2026-09-15 22:27:40 +02:00
co-authored by Claude Opus 5
parent d5d2d8f336
commit 0eb01403c5
5 changed files with 173 additions and 42 deletions
+29 -23
View File
@@ -462,7 +462,8 @@ function zeichneLicht($d)
. " data-ein='" . (isset($schalter["ein"]) ? intval($schalter["ein"]["id"]) : "") . "'"
. " data-aus='" . (isset($schalter["aus"]) ? intval($schalter["aus"]["id"]) : "") . "'"
. " data-um='" . (isset($schalter["um"]) ? intval($schalter["um"]["id"]) : "") . "'"
. " data-an='" . ($an ? "1" : "") . "' style='--farbe:" . $hex . "'>";
. " data-an='" . ($an ? "1" : "") . "'" . (strpos(strval($d["url"]), "wled://") === 0 ? " data-wled='1'" : "")
. " style='--farbe:" . $hex . "'>";
$html .= "<div class='rf-lampe-kopf'>"
. "<button type='button' class='rf-birne' data-rf-birne aria-pressed='" . ($an ? "true" : "false") . "'"
@@ -506,29 +507,34 @@ function zeichneLicht($d)
. "<input type='color' value='" . $hex . "' aria-label='Eigene Farbe'></label></div>";
}
if ($listen) {
$html .= "<details class='rf-effekte'><summary>" . htmlspecialchars(implode(" & ", array_map(function ($c) { return $c["name"]; }, $listen))) . "</summary>";
foreach ($listen as $c) {
$p = $c["params"][0];
// Wenige Eintraege als Chips, lange Listen (WLED hat ueber 180
// Effekte) als Auswahl - Chips waeren dort eine Wand.
if (count($p["options"]) <= 16) {
$html .= "<div class='rf-chips' data-cmd='" . intval($c["id"]) . "' data-param='" . intval($p["id"]) . "'>";
foreach ($p["options"] as $o) {
$html .= "<button type='button' class='rf-chip' data-wert='" . htmlspecialchars($o["value"], ENT_QUOTES) . "'"
. " aria-pressed='false'>" . htmlspecialchars($o["label"]) . "</button>";
}
$html .= "</div>";
} else {
$html .= "<label class='rf-auswahl'><span>" . htmlspecialchars($c["name"]) . "</span>"
. "<select class='form-select form-select-sm' data-cmd='" . intval($c["id"]) . "' data-param='" . intval($p["id"]) . "'>";
foreach ($p["options"] as $o) {
$html .= "<option value='" . htmlspecialchars($o["value"], ENT_QUOTES) . "'>" . htmlspecialchars($o["label"]) . "</option>";
}
$html .= "</select></label>";
}
// Presets, Effekte und andere Listen. Wenige Eintraege stehen als Chips
// da; lange Listen (WLED hat ueber 180 Effekte) bekommen einen Knopf mit
// dem aktuellen Eintrag, der eine durchsuchbare Liste aufklappt. Die
// native Auswahlliste zeichnet der Browser hell auf hell und passt nicht
// in das dunkle Fenster. Welcher Eintrag gerade gilt, liest
// js/solar/raumfenster.js bei WLED live aus (room.php?action=wled);
// data-feld ist der Parametername, "effect" oder "preset".
foreach ($listen as $c) {
$p = $c["params"][0];
$kopf = "<div class='rf-liste' data-cmd='" . intval($c["id"]) . "' data-param='" . intval($p["id"]) . "'"
. " data-feld='" . htmlspecialchars(strtolower($p["name"]), ENT_QUOTES) . "'>"
. "<span class='rf-reihe-titel'>" . htmlspecialchars($c["name"]) . "</span>";
$knoepfe = "";
foreach ($p["options"] as $o) {
$knoepfe .= "<button type='button' class='rf-chip' data-wert='" . htmlspecialchars($o["value"], ENT_QUOTES) . "'"
. " aria-pressed='false'>" . htmlspecialchars($o["label"]) . "</button>";
}
if (count($p["options"]) <= 16) {
$html .= $kopf . "<div class='rf-chips'>" . $knoepfe . "</div></div>";
} else {
$html .= $kopf
. "<button type='button' class='rf-picker-knopf' aria-expanded='false'>"
. "<span data-rf-picker-wert></span><i class='bi bi-chevron-down'></i></button>"
. "<div class='rf-picker' hidden>"
. "<input type='search' class='rf-suche' placeholder='" . htmlspecialchars($c["name"], ENT_QUOTES) . " suchen …'"
. " aria-label='" . htmlspecialchars($c["name"], ENT_QUOTES) . " suchen'>"
. "<div class='rf-picker-liste'>" . $knoepfe . "</div></div></div>";
}
$html .= "</details>";
}
return $html . "</div></div>";
}