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:
+29
-23
@@ -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>";
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user