Schiebeschalter mit mehr als zwei Positionen

[starwarsfan]

Hallo miteinander,

Frage in die Runde: Hat schonmal jemand einen Schiebeschalter mit mehr als zwei Positionen gebaut? Also nicht nur einen üblichen Schiebeschalter mit zwei Positionen sondern mit einer oder mehreren Zwischenpositionen?

Ich bin am überlegen, wie ich Szenen in mein bestehendes Layout integriere. Aktuell habe ich bspw. viele solche Schiebeschalter auf der Visu:

2022-10-01_Schiebeschalter01.png

Wenn dann auf "Nacht" umgeschaltet wird, sieht das so aus:

2022-10-01_Schiebeschalter02.png

Nun stellt sich die Frage, ob/wie ich dieses Layout "verlängern" kann, um darin mehrere Positionen abzubilden. Im Idealfall soll der Knopf mit jedem Antippen auf die nächste Position weitergeschoben werden. Eine der Herausforderungen wird dabei wohl sein, wie die Richtung der Bewegung zu realisieren wäre. Dafür müsste man entweder wissen, ob die vorherige Position "links" oder "rechts" war oder Button "rotiert" fix in eine Richtung, beginnt also wieder von vorn, wenn er am Ende angekommen ist.

Technisch muss das nicht unbedingt ein Slider sein! Slider habe ich überhaupt nicht auf der Visu und wenn ich nun dafür einen Slider nehmen müsste, wäre das ein rechter Bruch mit dem Gesamtkonzept. Sprich, die Schiebeschalter reagieren auf Antippen und nicht auf festhalten und ziehen. Aber wenn das the-way-to-go ist, müsste ich das im Detail genauer anschauen.

Any ideas?

[vento66]

Ich würd da als Anzeige einen Slider nehmen, und für die Bedienung 2 transparente Elemente oben drüber. Ein klick auf die Elemente verschiebt dann den Slider um +-1

[saegefisch]

Oder stattdessen Radio-Buttons im Design des Knopfes Deiner Schalter, also mit den Spalt, aber ohne den freien Verschiebebereich. Quadratisch halt.
Der aktive wird aktiv dargestellt, zb durch eine farbige leucht-Corona bzw. Hintergrund rot/grün ähnlich Deiner Schiebeschalter.

Dann ist das optisch ähnlich, aber in der Bedienung eindeutig in Bedingungen und aktuellem Status und schnell (man muss nie mehrfach tippen für einen Modus)

[oefchen]

Oder Du zeigst die möglichen Varianten der Szenen nebeneinander, ausgegraut. Beim Antippen der jeweiligen wird die aktiv gezeigt.
Screenshot 2022-07-10 075032.png
Natürlich in der Form Deines Schalters,auch der Buttonkönnt ja dann dahin wandern.
Bleibt die Frage ob Du dadurch nicht zuviel Platz verlierst.

[nightingale]

Oder mit dynamischen Designs -basierend auf dem KO1 Wert z.B. 0, 1 oder 2 dann das entsprechende Design aufrufen und die x Postition dees Knopfes und der Aura anpassen. Bei KO1 Wert 0 den x-Wert 0. Bei KO1 Wert von 1 dann um einen x-Wert auf Mittelstellung verschieben usw. Dann kann mal auch beliebig viele Werte und x-Positionen setzen

[starwarsfan]

Hallo miteinander,

vielen Dank für's Feedback und die Ideen.

Hier also gleich in HowTo-Form, falls jemand soetwas nachbauen möchte. Aber zunächst nur der Edomi-Part der Realisierung, also ohne die CSS-Details.

Hier zunächst mal ein Teaser, wie es im Endeffekt aussieht:

010_Endergebnis.png

Das sind keine Slider sondern alles Universalelemente. Im folgenden die Beschreibung des Aufbaus und der Realisierung.

Um das etwas besser darzustellen habe ich die einzelnen Ebenen nach unten auseinandergezogen. Links daneben steht der Z-Layer für die "Stapelung" der Elemente und rechts eine Kurzbeschreibung:

020_Elemente.png

Der Hintergrund ist ein einfaches, gefülltes Universalelement:

030_Hintergrund.png

Der Schiebebereich enthält zwei dynamische Designs, welche den Hintergrund in Abhängigkeit des KO1 einfärben. Dabei verwende ich ein Design für Szene 1 und ein anderes Design für die Szenen 2 bis 4:

040_Schiebebereich.png

Auf dem Schiebebereich liegen die Icons der möglichen Positionen, um dem Benutzer zu zeigen, welche Möglichkeiten er hat. Das sind einfache Universalelemente mit einem SVG-Bild als Hintergrund:

050_Icon_Position1.png

Jetzt wird es spannend, wir bauen den Slider. Dazu habe ich den Vordergrund und den Hintergrund getrennt und verwende beide Varianten der dynamischen Designs. Zunächst der Hintergrund mit der generischen Form eines dynamischen Designs. Das heisst, es wird für alle vier möglichen Positionen das gleiche dynamische Design verwendet. Hier stehen also vier mögliche KO-Werte, bei jedem Eintrag jedoch das Design "Button" mit der ID 21:

060_Schiebeknopf_Hintergrund.png

Der Trick beim Hintergrund des Buttons ist nun aber, diesen in Abhängigkeit von KO1 zu verschieben. Für den KO-Wert "1" sieht das also so aus:

061_Schiebeknopf_Hintergrund_Pos1.png

Für KO-Wert "2" wird jedoch die X-Position verändert und der Knopf 40 Pixel nach rechts verschoben:

062_Schiebeknopf_Hintergrund_Pos2.png

Die weiteren Designs sind dementsprechend auf 80 und 120 gesetzt.

Für den Button-Vordergrund eine etwas andere Vorgehensweise, welche schlussendlich aber den gleichen Effekt hat. Hier werden wirklich komplett verschiedene dynamische Designs verwendet:

070_Schiebeknopf_Vordergrund.png

Die jeweilige Konfiguration folgt aber der gleichen Idee. Der Button-Vordergrund wird via X-Position nach rechts verschoben und zusätzlich noch jeweils ein anderes Hintergrundbild vorgegeben. Das Hintergrundbild entspricht den Icons auf dem Schiebebereich. Für Position 1 also so:

071_Schiebeknopf_Vordergrund_Pos1.png

Und hier noch für Position 2:

072_Schiebeknopf_Vordergrund_Pos2.png

Den Abschluss resp. die Spitze des "Universalelementestapels" bilden die eigentlichen Aktionsbuttons. Das sind unsichtbare Universalelemente, welche die eigentliche Aktion auslösen:

080_Aktionsknopf1.png

Im Vorschaumodus ohne Wert bei KO1 sieht man nun das "leere" Resultat:

090_Vorschau.png

Wird nun "1" als Wert vorgegeben, werden die entsprechenden Designs aktiviert:

091_Vorschau1.png

Bei Wert "2" passiert genau das gleiche, nur mit anderen Design-Elementen. Hier wird nun auch die X-Verschiebung sichtbar:

092_Vorschau2.png

Hier noch mit "4" in der ganz rechten Position:

093_Vorschau3.png

Und weil's so schön war, hier nochmal das Resultat:

010_Endergebnis.png

Viel Spass beim Nachbauen!

[oefchen]

Cool umgesetzt Yves ! Ich mach das ja an versch. Stellen ...im Prinzip...genauso. Dein Design gefällt mir fast besser.
Und nach der ganzen Klickorgie hast sogar noch Zeit gehabt das zu dokumentieren !?? Respekt
Wäre für "Nachbauer" vlt sehr hilfreich wenn Du den CSS-Code fürs Design noch in Deinen Beitrag einfügst.

[nightingale]

Sehr cool geworden Yves, genauso hab ich mir das vorgestellt als ich meinen Beitrag geschrieben habe. Bis auf die Idee mit den Hintergrundbildern - sehr schön!