Raum-Modal: Regler gedreht statt writing-mode, eigenes Aussehen
Der senkrechte Positionsregler liess sich am Handy kaum anfassen. Gebaut
war er mit writing-mode: vertical-rl - dem neueren Weg, aber einem, bei
dem der Browser das Ziehen als Wischen liest und die Seite blaettert,
statt den Griff mitzunehmen.
Jetzt liegt ein gewoehnlicher waagerechter Regler um 90 Grad gedreht in
seinem Kasten. Er bewegt sich in seinen eigenen Koordinaten waagerecht,
wird von jedem Browser unterstuetzt, traegt dieselbe Gestaltung wie die
liegenden Regler, und touch-action: none haelt die Seite still, solange
der Finger auf ihm liegt. Die Trefferflaeche ist 1,6 rem breit statt der
sichtbaren 0,375 rem Bahn. Nachgemessen: oben angeklickt 8 %, unten 93 %.
Die Neigung steht jetzt ebenfalls senkrecht, daneben das Lamellenbild -
Regler und Bild bilden ein Paar, das Bild sagt, was der Regler bedeutet.
Beide Spalten sind mit Namen und den Worten an ihren Enden beschriftet
("oben"/"unten", "auf"/"zu"); die Zahl darunter ist das, was sich beim
Ziehen aendert.
Die Regler im Raum-Modal haben ein eigenes Aussehen bekommen: Bootstraps
weisse Bahn mit blauem Griff stach auf den dunklen Karten heraus, und in
einem Raum mit drei Jalousien waren das sechs helle Balken. Bahn und Griff
tragen jetzt dasselbe Blaugruen wie der Temperaturregler, der ungefuellte
Teil ein Grau, das in beiden Themes traegt. Die Regler in den Modals fuer
Autoladung und Heizstab bleiben unberuehrt.
Die Regel fuer die Bahn steht zweimal da, einmal fuer -webkit- und einmal
fuer -moz-: als Liste notiert wirft der Browser beim unbekannten Selektor
die ganze Regel weg, und dann bliebe die Bahn ungestaltet.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5
+38
-49
@@ -260,75 +260,57 @@ function reglerWert($wert, $min, $max)
|
||||
return max($min, min($max, $wert));
|
||||
}
|
||||
|
||||
function reglerFeld($min, $max, $wert, $einheit)
|
||||
function reglerFeld($min, $max, $wert, $einheit, $beschriftung = "")
|
||||
{
|
||||
return "<input type='range' class='form-range range-color-track' min='" . $min . "' max='" . $max . "'"
|
||||
. " step='1' value='" . $wert . "' data-einheit='" . htmlspecialchars($einheit, ENT_QUOTES) . "'>";
|
||||
. " step='1' value='" . $wert . "' data-einheit='" . htmlspecialchars($einheit, ENT_QUOTES) . "'"
|
||||
. ($beschriftung === "" ? ""
|
||||
: " aria-label='" . htmlspecialchars($beschriftung, ENT_QUOTES) . "'")
|
||||
. ">";
|
||||
}
|
||||
|
||||
/**
|
||||
* Die beiden Endstellungen in Worten.
|
||||
* Ein senkrechter Regler mit Wort an jedem Ende.
|
||||
*
|
||||
* "Position 100 %" muss man uebersetzen, "unten" nicht. Dazwischen bleibt es
|
||||
* bei der Zahl - fuer halb heruntergefahren gibt es kein Wort. Ausgewertet
|
||||
* wird das Attribut in raumBedienungAktivieren(), js/solar/homeMQTT.js.
|
||||
*/
|
||||
function worteAttribut($beiNull, $beiHundert)
|
||||
{
|
||||
return " data-worte='" . htmlspecialchars(
|
||||
json_encode([0 => $beiNull, 100 => $beiHundert], JSON_UNESCAPED_UNICODE), ENT_QUOTES) . "'";
|
||||
}
|
||||
|
||||
/**
|
||||
* Die Hoehe als senkrechter Regler - oben ist oben.
|
||||
* Beide Werte einer Jalousie bewegen etwas, das oben und unten hat; ein
|
||||
* waagerechter Schieber dafuer muss erst uebersetzt werden. Senkrecht steht
|
||||
* der Griff dort, wo der Rollladen steht.
|
||||
*
|
||||
* Einen waagerechten Schieber fuer eine Bewegung, die hoch und runter geht,
|
||||
* muss man erst uebersetzen; senkrecht steht der Griff dort, wo der Rollladen
|
||||
* steht.
|
||||
* Gedreht wird mit transform, nicht mit writing-mode. writing-mode ist zwar
|
||||
* der neuere Weg, aber am Handy laesst sich ein so gebauter Regler nur
|
||||
* schlecht anfassen - das Ziehen wird als Wischen gelesen und blaettert die
|
||||
* Seite, statt den Griff mitzunehmen. Ein gedrehter gewoehnlicher Regler
|
||||
* bewegt sich in seinen eigenen Koordinaten waagerecht, wird von jedem
|
||||
* Browser unterstuetzt und traegt dieselbe Gestaltung wie die liegenden.
|
||||
*/
|
||||
function positionsRegler($cmd, $param, $wert)
|
||||
function senkrechterRegler($cmd, $param, $wert, $titel, $oben, $unten)
|
||||
{
|
||||
$min = reglerMin($param);
|
||||
$max = reglerMax($param);
|
||||
$wert = reglerWert($wert, $min, $max);
|
||||
return "<div class='raum-regler raum-position' data-cmd='" . intval($cmd["id"]) . "'"
|
||||
. " data-param='" . intval($param["id"]) . "'" . worteAttribut("oben", "unten") . ">"
|
||||
. "<span class='raum-ende'>oben</span>"
|
||||
. reglerFeld($min, $max, $wert, "%")
|
||||
. "<span class='raum-ende'>unten</span>"
|
||||
return "<div class='raum-regler raum-spalte' data-cmd='" . intval($cmd["id"]) . "'"
|
||||
. " data-param='" . intval($param["id"]) . "'>"
|
||||
. "<span class='raum-name'>" . htmlspecialchars($titel) . "</span>"
|
||||
. "<span class='raum-ende'>" . htmlspecialchars($oben) . "</span>"
|
||||
. "<div class='raum-senkrecht'>" . reglerFeld($min, $max, $wert, "%", $titel) . "</div>"
|
||||
. "<span class='raum-ende'>" . htmlspecialchars($unten) . "</span>"
|
||||
. "<span class='raum-regler-wert small fw-semibold'>" . $wert . "%</span>"
|
||||
. "</div>";
|
||||
}
|
||||
|
||||
/**
|
||||
* Die Lamellenstellung mit einem Bild daneben.
|
||||
* Die sechs Lamellen neben dem Neigungsregler.
|
||||
*
|
||||
* Bei 30 % oder 70 % sagt die Zahl nicht, ob man noch hinaussieht. Die vier
|
||||
* Bei 30 % oder 70 % sagt die Zahl nicht, ob man noch hinaussieht. Die
|
||||
* Streifen zeigen es: schmal mit Luft dazwischen heisst offen, geschlossen
|
||||
* liegen sie aneinander. Gezeichnet wird die Hoehe, die eine gekippte
|
||||
* Lamelle von vorn zeigt - genau das, was das Licht abhaelt.
|
||||
* Lamelle von vorn zeigt - genau das, was das Licht abhaelt. Die Hoehe setzt
|
||||
* lamellenZeichnen() in js/solar/homeMQTT.js.
|
||||
*/
|
||||
function neigungsRegler($cmd, $param, $wert)
|
||||
{
|
||||
$min = reglerMin($param);
|
||||
$max = reglerMax($param);
|
||||
$wert = reglerWert($wert, $min, $max);
|
||||
return "<div class='raum-regler raum-neigung raum-neigung-block'"
|
||||
. " data-cmd='" . intval($cmd["id"]) . "'"
|
||||
. " data-param='" . intval($param["id"]) . "'" . worteAttribut("auf", "zu") . ">"
|
||||
. "<div class='d-flex justify-content-between small'>"
|
||||
. "<span>Neigung</span>"
|
||||
. "<span class='raum-regler-wert fw-semibold'>" . $wert . "%</span></div>"
|
||||
. lamellenBild()
|
||||
. reglerFeld($min, $max, $wert, "%")
|
||||
. "<div class='d-flex justify-content-between raum-ende'><span>auf</span><span>zu</span></div>"
|
||||
. "</div>";
|
||||
}
|
||||
|
||||
/** Die vier Lamellen. Ihre Hoehe setzt der Browser, siehe homeMQTT.js. */
|
||||
function lamellenBild()
|
||||
{
|
||||
$html = "<svg class='raum-lamellen' viewBox='0 0 100 40' preserveAspectRatio='none' aria-hidden='true'>";
|
||||
foreach ([5, 15, 25, 35] as $mitte) {
|
||||
$html = "<svg class='raum-lamellen' viewBox='0 0 100 60' preserveAspectRatio='none' aria-hidden='true'>";
|
||||
foreach ([5, 15, 25, 35, 45, 55] as $mitte) {
|
||||
$html .= "<rect class='raum-lamelle' x='0' width='100' data-mitte='" . $mitte . "'"
|
||||
. " y='" . ($mitte - 1) . "' height='2'></rect>";
|
||||
}
|
||||
@@ -453,10 +435,17 @@ function zeichneBeschattung($d)
|
||||
$html .= "</div>";
|
||||
}
|
||||
if ($position) {
|
||||
$html .= positionsRegler($position, $position["params"][0], $standPos);
|
||||
$html .= senkrechterRegler($position, $position["params"][0], $standPos,
|
||||
"Position", "oben", "unten");
|
||||
}
|
||||
if ($neigung) {
|
||||
$html .= neigungsRegler($neigung, $neigung["params"][0], $standNeigung);
|
||||
// Regler und Lamellenbild bilden ein Paar: das Bild sagt, was der
|
||||
// Regler daneben bedeutet, und laeuft beim Ziehen mit.
|
||||
$html .= "<div class='raum-neigung-block'>"
|
||||
. senkrechterRegler($neigung, $neigung["params"][0], $standNeigung,
|
||||
"Neigung", "auf", "zu")
|
||||
. lamellenBild()
|
||||
. "</div>";
|
||||
}
|
||||
$html .= mehrMenue($rest);
|
||||
return $html . "</div>" . karteZu();
|
||||
|
||||
Reference in New Issue
Block a user