Animated toggle switch

[siro]

Nabend Bernd,
habe ich grade mal getestet. Mit graden und ungeraden GroupIndex.

Ja, was soll ich sagen:
Genau so. Da gibt es nix mehr zu meckern.

Tolle Arbeit. Geniesse das Wochenende.

[wennerer]

Danke!
Und auch schönes Wochenende.

[Niesi]

Hallo Bernd,

vielen Dank auch von mir - ich habe mir die FlexiSwitches angesehen und sie ausprobiert. Mir gefällt es sehr gut.

Eine (nicht wichtige) Frage habe ich: Ist es gewollt, dass das Längen-Höhenverhältnis fix ist?

Schönen Sonntag
Harald

[wennerer]

Hallo Niesei,
danke für deine Antwort und das wohlwollende Urteil.
Ich habe da am Anfang etwas herum probiert und gemerkt das der Radius vom Button zum Rand passen muss. Beim Freiskalieren sieht es da schnell echt blöd aus.

Freiskaliert.png (3.37 KiB) 3498 mal betrachtet

Mit einem festen Seitenverhältnis (das der ursprünglichen png entspricht) war es halt einfacher für mich

Viele Grüße
Bernd

[Ally]

Hallo wennerer,

vielen Dank, sieht richtig gut aus.

Mir ist aufgefallen das die Switches beim Skalieren an den Rändern noch unschöne Artefakte zeigen.
Ursächlich dafür sind, im Wesentlichen, die verwendeten PNG's. Skaliert man sie, zeigen sie diese unschönen Randartefakte.
Warum das so ist konnte ich bis jetzt noch nicht herausfinden.
Wie auch immer, mit neu erzeugten PNG's passiert das nicht mehr.
Anbei also alle SVG's und die daraus erzeugten PNG's. Dabei habe ich die Namensgebung etwas vereinheitlicht und die Größen angepasst.
Hinter der Größenanpassung steht folgende Überlegung:
Auf Desktopumgebungen wird ein solcher Switch meist mit einer Höhe von 20 Pixeln verwendet (z.B. bei Windows oder Mint).
Also habe ich die Höhe von backbround.png auf 80 Pixel geändert und in Relation dazu passend, die Buttons auf 64x64 Pixel.
Die entsprechenden Werte und Namen habe ich dann auch im Quelltext angepasst.
Hoffentlich habe ich da nichts übersehen.
-

Screenshot.png (75.88 KiB) 3493 mal betrachtet

-
Und da du ja an zwei Stellen in deinem Beispielprogramm eine Checkbox verwendest, habe ich die gleich mal durch einen Switch ersetzt.
Dabei hätte ich mir die Eigenschaft Checked gewünscht. Das würde die Abfrage und das Umschalten vereinfachen.

Viele Grüße Roland

[Niesi]

Ich verstehe - Du müsstest den Radius natürlich IMMER von tFlexiSwitch.Height abhängig machen.
Aber es ist nicht wirklich wichtig, der Switch ist einfach sehr gut gelungen. Richtig gut gefällt mir auch der ImageSelector - das macht schon Spaß ...

[wennerer]

Hallo Ally,
herzlichen Dank. Die PNG's sind saugut . Ich habe schon gemerkt das meine bescheidenen Inkscape Kenntnisse bei weitem nicht ausreichen.
Ich werde den Skalierungsfaktor noch etwas anpassen (auf die neue Höhe 80) , bei manchen größen sieht sonst der Button etwas verzerrt aus:

skalierunfsfaktor.png (35.35 KiB) 3488 mal betrachtet

Den Propertie-Editor pass ich auf die neuen Namen an, wird aber kein Problem sein. Ich gehe das die Woche über mal an.

Nochmal meinen herzlichen Dank das ich deine Images verwenden darf!!
Bernd

[Ally]

Hallo Bernd,

Nochmal meinen herzlichen Dank das ich deine Images verwenden darf!!

Ja das freut mich doch.
Wenn du noch was brauchst, melde dich bitte,

Gruß Roland

[wennerer]

Hallo,
habe heute doch noch etwas Zeit gefunden. Also da lag ich vorhin falsch, lag nicht am Skalierungsverhältnis. Die PNG's sind ja jetzt nur noch 64px groß. Bis 75px kann man problemlos hoch skalieren und dann fängt es an zu verlaufen. Ich denke aber das reicht vollkommen. Habe deshalb die max. Größe auf 175x76 eingestellt. Der Editor ist angepasst. Folgende zusätzliche Events hab ich eingefügt :

Code: Alles auswählen

property OnRight      : TChangeEvent read FOnRight write FOnRight;
property OnLeft       : TChangeEvent read FOnLeft write FOnLeft;
property OnDirection  : TDirectionEvent read FOnDirection write FOnDirection;  

OnRight kommt wenn der RollButton rechts anschlägt, OnLeft wenn er links anschlägt und OnDirection kommt links und rechts. Hier wird als Parameter die Direction übergeben.

Ich hoffe ich hab nichts vergessen oder falsch gemacht.
Im Anhang die neueste Version.

Viele Grüße
Bernd

[wennerer]

Hallo,
leider hab ich bei der Benutzung noch einen kleinen Bug gefunden. Wenn man im Designmode und Direction fsRight die max. Größe überschreitet (zieht) stürzt Lazarus ab.
Ich habe deshalb jetzt auch noch die Höhe abgefragt. Damit ist der Fehler bei mir weg.

Im Anhang die verbesserte Version.

Viele Grüße
Bernd

[Beach]

Wow. Sieht klasse aus.
Vielen Dank dafür!!

Nur als Feststellung und keineswegs als Kritik:
Die Animation lagt bei mir etwas.

[wennerer]

Hallo Beach,
danke für deine Rückmeldung. Kritik höre ich sehr gerne.
Was genau meinst du mit „die Animation lagt“?

Viele Grüße
Bernd

[Beach]

Lagt (richtig wäre imho lagged) iim Sinne von "Verzögert", "Stockend", "Ruckelnd"

Scheint an meinem Laptop zu liegen. Nutze hier auf einem alten I7-3520 mit Win10pro und Lazarus 2.2.6, der stock hin und wieder schonmal.
Habs auf nem aktuellen "Dampfhammer" (12. Gen I7 mit 32GB) mit Lazarus 3.0.0 RC1 getestet. Da läuft es wunderbar geschmeidig.

[wennerer]

Hallo Beach,
mein Englisch ist leider nicht sooo gut.
Ich bilde mir aber auch ein das es unter Linux etwas flüssiger läuft als unter Windows.

Viele Grüße
Bernd

[Beach]

Bin endlich mal wieder etwas am Üben. Geht im speziellen um INI Dateien.

Versuche den Switch so zu nutzen, das ich den Zustand aus der INI Datei lesen kann.
Frage dazu beim Schreibe die Position ab und schreibe in die INI Datei einen Boolschen Wert. Wenn ich diesen beim Ereignis 'FormCreate' wieder einlese, frage ich ab ob der Wert True ist und setze die Eigenschaft FlexiSwitch.Direction auf 'fsRight'.

Nun kommt aber ein Darstellungsfehler. Der Button, welcher rollt, ist außerhalb des Controls. Steht die Vorgabe auf fsLeft ist die Darstellung OK.
Auch bei betätigen des Schalter wird alles wieder korrekt dargestellt.

Baue ich nun einen Schalter ein, der bei einem Klick ebenfalls diese Eigenschaft verändert, dann wird nicht sanft gerollt, sondern hart "die Seite gewechselt". Ebenfalls wird das Ereignis 'OnRight' nicht gefeuert.

Edit: Achso. Bin aktuell unter Win11 unterwegs. Lazarus 3.0RC1 (rev lazarus_3_0_RC1-10-gfe49fef4fc) FPC 3.2.2 x86_64-win64-win32/win64
Nicht ganz aktuell, ich weiß...

Code: Alles auswählen

  if ini.ReadBool('window','switch',False) then
    Form1.FlexiSwitch1.Direction := fsRight
  else
    Form1.FlexiSwitch1.Direction := fsLeft; 

Zwischenablage01.jpg (4.28 KiB) 2741 mal betrachtet

Hier mal der Testcode den ich verwendet habe

Goarista2.zip

(549.1 KiB) 55-mal heruntergeladen