Animated toggle switch

[theo]

Hallo

Ich weiss nicht wie man die Dinger auf Deutsch nennt, deshalb der englische Titel.
Hat jemand schon mal einen solchen Toggle-Button/Schalter/Checkbox als Lazarus Komponente gesehen?



Die trifft man ja heute überall an.
Es geht mir um den Stil, nicht um eine Ersatzfunktionalität.

Danke!

[wp_xyz]

Es gibt einen ähnlichen TOnOffSwitch im Industrial-Package, wobei aber die exakte Darstellung anders ist:

[theo]

Den hatte ich gar nicht auf dem Schirm.
Er sieht etwas anders aus als die heute üblichen, aber ja, kann man machen.
Das OnClick Ereignis muss man noch zum Umschalten einhängen, sonst muss man den wirklich ziehen, was ja eigentlich unsinnig ist, da es nichts einzustellen gibt.

Danke!

P.S. Ich hätte diesen Schalter-Typus eigentlich bei den BGRAControls bzw. Material Design erwartet, aber dort gibt es den nicht.

[wp_xyz]

Der Hintergedanke, als ich den OnOffSwitch geschrieben habe, war sowas wie ein Schiebeschalter an einem elektronischen Gerät (was ja die Idee hinter allen Industrial-Komponenten ist), daher auch die Schiebe-Geste; ein Klick war mir zu aggressiv, da wäre der Schalterstatus zu leicht zu verstellen, aber bei einer Checkbox ist das auch nicht anders, daher werde ich mir das nochmal überlegen, vielleicht aktivierbar über ein Property, z.B. TSwitchMode = (smSlide, smClick, smClickOrSlide) (*). Auch bei BorderStyle könnte man noch eine weitere Variante bsRounded einbauen und käme damit deiner ursprünglichen Vorstellung näher. Demnächst einmal...

(*) Ach ja, der Click funktioniert schon, allerdings nur als Double-Click.

[theo]

Ich hatte mir schon gedacht, dass der eher ein "physisches" Vorbild hat.
Aber so ein Switch wie ich eigentlich haben wollte, würde Lazarus schon gut zu Gesicht stehen.
Der TOnOffSwitch ist sicher nahe dran.
Solche Schalter werden ja auch mit Radiogroups kombiniert (Siehe Chrome Einstellungen Screenshot).
Das ist also nicht entweder-oder.
Ich könnte mir auch ein Tri-State Switch vorstellen (z.B. um eine Gruppe von Checkboxen zu schalten: Alle ein - manuelle Auswahl - alle aus).
Nur so eine Idee...
Aber der TOnOffSwitch ist schon mal besser als nichts.

[wp_xyz]

Delphi XE11 hat übrigens einen TToggleSwitch, ähnlich zum TOnOffSwitch, aber mit ganz seltsamem Verhalten: Im Designmode ist er abgerundet und man kann mit entsprechendem Wert für ThumbWidth auch einen kreisrunden Schieber hingekommen, aber zur Laufzeit wird er eckig wie der TOnOffSwitch. Das Ding scheint noch nicht ganz fertig zu sein.

[wennerer]

Hallo,
also wenn man etwas zusätzlichen Code nicht scheut und es halt möchte kann man mit meinem MultiButton so was machen:

Toggle.gif (45.99 KiB) 1161 mal betrachtet

PS: Die Icons sind von hier: https://commons.wikimedia.org/wiki/GNOME_Desktop_icons



Viele Grüße
Bernd

[theo]

Auch sehr gut. Danke!

Trotzdem wäre eine Komponente, welche nur ein Animated Toggle Switch sein will immer noch ein Thema, denke ich.
Diese müsste mMn mit BGRABitmap antialiased gezeichnet werden, damit die Rundungen hübsch aussehen.

[wp_xyz]

Poste das im englischen Forum, so die Autoren von BGRA deinen Wunsch sehen.

[wp_xyz]

Die Icons [...]

Ganz einfach geht's mit einem TImage und Laz 3.0+:
- ImageList auf Formular, die beiden ON/OFF Bilder reinladen
- TImage aufs Formular - das soll der ToggleSwitch werden. AutoSize = true
- ImageList mit dem TImage verbinden
- Dann den folgenden super-intelligenten Code für das OnClick-Event des Image:

Code: Alles auswählen

procedure TForm1.Image1Click(Sender: TObject);
begin
  Image1.ImageIndex := (Image1.ImageIndex + 1) mod 2;
end; 

Benötigt wegen der ImageList-Property des TImage Laz v3.0. Bei älteren Version muss man die ON/OFF Bilder in den Resourcen speichern und jeweils beim Klick neu laden.

[theo]

Poste das im englischen Forum, so die Autoren von BGRA deinen Wunsch sehen.

OK Danke.
Habe die Frage mal dort auch noch gestellt.
https://forum.lazarus.freepascal.org/in ... n.html#new

[Ally]

Hallo theo,

hier noch ein Vorschlag der ohne zusätzliche Komponenten auskommt, High-DPI-tauglich ist und bei dem das Design leicht anpassbar ist.
-

OnOff.png (19.04 KiB) 991 mal betrachtet

[theo]

Danke auch an Ally.

Auch schön, aber das Ist halt auch nicht wirklich eine Komponente und nicht wirklich animiert etc.
Zwei Bilder hin-und herschalten geht natürlich, aber irgendwie hatte ich mir den Switch etwas ausgefeilter vorgestellt.

Wie im englischen Forum schon gezeigt, finde ich das recht schön.
Der Kreis müsste sich aber nicht drehen, das finde ich überflüssig und auch schieben wäre nicht nötig.
Aber der Farb- und Textwechsel, das ist schon nett.

[m.fuchs]

Aber der Farb- und Textwechsel, das ist schon nett.

Das ist aus (meiner Sicht) nicht nur nett, sondern eine absolute Notwendigkeit.
Wenn ich so etwas hier sehe:

bad_toggle_switch.png (33.19 KiB) 952 mal betrachtet

Da weiß ich nie, was das nun bedeutet.

Also Toggle-Switch nie ohne Beschriftung und mit klarem Farbwechsel (rot/grün)!

Womit wir zu der Frage kommen: wozu brauch man dieses Control? Eine Checkbox ist simpler, bekannter und kann auf zusätzliche Beschriftung für den Status verzichten.
Finde ich deutlich sinnvoller.

[theo]

Das ist aus (meiner Sicht) nicht nur nett, sondern eine absolute Notwendigkeit.
...
Also Toggle-Switch nie ohne Beschriftung und mit klarem Farbwechsel (rot/grün)!

Mit "nett" meinte ich die Animation.
Beschriftung und Farbwechsel finde ich auch notwendig, aber das schafft der TOnOffSwitch - den ich übrigens in der bsThin3D Variante ziemlich gelungen finde - auch.

Womit wir zu der Frage kommen: wozu brauch man dieses Control?

Was braucht man schon?
Ich habe im ersten Posting schon gesagt "Es geht mir um den Stil, nicht um eine Ersatzfunktionalität."
Ich denke es könnte Lazarus nicht schaden, etwas modernere UI Elemente anzubieten um etwas frischer zu wirken.
Die Benutzung wäre natürlich absolut freiwillig.