Animated toggle switch

[wennerer]

Hallo,
ich habe nun auch eine minimal Komponente fertig die ich hier mal zeigen möchte. Nach der Installation ist sie unter misc zu finden. Bei mir sieht die Grafik unter Linux etwas besser aus wie unter Windows. Kann aber auch daran liegen das ich von Inkscape keine Ahnung habe. Die beiden Fileimages sind von hier : https://commons.wikimedia.org/wiki/Tango_icons
Würde mich sehr interessieren wie es auf anderen Systemen aussieht. Kritik bzw. Verbesserungen wie immer sehr erwünscht.

ATestSwitch.png (25.22 KiB) 3505 mal betrachtet

Viele Grüße
Bernd

[siro]

Hallo Bernd,
anbei meine Bilder von Windows

Switches_Windows_2.png (16.96 KiB) 3483 mal betrachtet

Switches_Windows.png (16.4 KiB) 3483 mal betrachtet

Schade, das sieht bei Dir irgendwie hübscher aus mit der Kantenglättung.
.
Nun die Probleme:

Direction ist in Public, müsste aber eigentlich in property, damit man eine Voreinstellung machen kann.
Das habe ich grade mal geändert also eine Setter für Direction mit invalidate natürlich.
Aber dann stimmen die Farben noch nicht.

Wenn ich das Ding zu klein mache, stürzt Lazarus ab....
ne Weile warten, dann fängt sich Lazarus wieder.

Switches_Windows_Absturz.png (10.2 KiB) 3483 mal betrachtet

Hier fehlt wohl noch ein Größencheck.

ansonsten Funktional.

[wennerer]

Hallo Siro,
danke für deine Rückmeldung. Ich habe es befürchtet das es nicht nur bei mir unter Windows deutlich schlechter aussieht wie unter Linux. Mal sehen vielleicht finde ich noch eine andere Lösung.
Das mit dem Absturz wenn's zu klein wird (bei mir width := 3) macht es auch nur unter Windows, in Linux kommt da nix. Deshalb ist mir es wohl auch nicht aufgefallen.
Und ja da sind noch nicht alle Properties dabei aber nachdem mir auffiel das es unter Windows irgendwie verpixelter aussieht wollte ich erstmal hören ob es bei anderen auch so ist.

Jedenfalls nochmal herzlichen Dank!
Bernd

[wennerer]

Hallo,
ich habe nun den Interpolationsmodus geändert.

Code: Alles auswählen

DestCanvas.Interpolation := TMitchelInterpolation.Create;//TFPSharpInterpolation.Create;

Jetzt sieht es bei mir auch unter Windows gut aus:

Unbenannt.png (21.66 KiB) 3466 mal betrachtet

Sollte jemand Lust haben zu testen, ich hänge es mal an.

Viele Grüße
Bernd

[siro]

Moin Bernd,

ja das sieht besser aus, solange man es mit der Größe nicht übertreibt.
Der Fehler wenns zu klein wird ist nun auch weg.

Switches_Windows_3.png (34.55 KiB) 3452 mal betrachtet

Einen schönen Sonntag noch.

[wennerer]

Guten Morgen,
ich skaliere von einer png mit 180x78 Pixel. Ich ging davon aus das dies als größte Größe für so ein Controll reicht. So lange man kleiner bleibt sollte es passen.
Wäre dann so groß:

180x78.png (10.83 KiB) 3452 mal betrachtet

Dann kann ich mir jetzt ja mal Gedanken über diverse Eigenschaften machen.

Vielen Dank für deine Antwort und auch einen schönen Sonntag.
Bernd

[theo]

Sieht gut aus!
Anbei die Screenshots auf Gtk2/3 und Qt5.

Testswitch.png (18.9 KiB) 3438 mal betrachtet

Was ich beim TOnOffSwitch im Industrial-Package gut finde ist, dass man einen kurzen Text für On und Off eingeben kann, ohne dafür ein Bild machen zu müssen.
Geht das damit auch?

[wennerer]

Hallo Theo,
ich hab's jetzt mal dazu gepackt. Ist noch nicht ganz ausgereift. Ich denke da wäre so was wie Autosize cool. Probiers halt mal.
Ich überlege aber eigentlich insgesamt was da noch an Eigenschaften schön wäre. Enable, Hover, Tastaturbedienbarkeit etc.
Das muss sich erst etwas setzen bei mir und oft kommen aus dem Forum noch Sachen an die ich nicht gedacht habe.
Aber so grundsätzlich denke ich könnte man da was mit anfangen.

Herzlichen Dank für deine Antwort!
Bernd

ONOFF.png (28.94 KiB) 3430 mal betrachtet

[wennerer]

Hallo,
ich möchte nun meine Variante eines Switches vorstellen:

Toggle.gif (68.54 KiB) 3380 mal betrachtet

Genannt habe ich ihn TFlexiSwitch, weil ich denke das man doch einige Eigenschaften zur Verfügung hat um den Schalter an seine Bedürfnisse anpassen zu können. Das Herzstück der Komponente habe ich von wp_xyz abgeschrieben viewtopic.php?p=138037#p138037 und die von mir verwendeten Images sind von Ally viewtopic.php?p=128092#p128092. Vielen Dank!
Bei der Komponente sind Testprojekte in denen man erkennen kann was man wie tun kann.

test1.png (128.14 KiB) 3380 mal betrachtet

Im Objektinspektor lässt sich durch einen Klick auf NewRollImage ein Editor öffnen. Dort lassen sich die in einer Resource befindlichen Images laden. Wer möchte kann dort noch weitere Images einfügen.
Entwickelt und getestet habe ich unter Linux Mint, unter Windows habe ich es problemlos kompiliert und keine offensichtlichen Fehler erkannt. Obwohl sich bestimmt irgendwas finden wird
Würde mich natürlich über Meinungen und Anregungen freuen.

Viele Grüße
Bernd

[theo]

Guuut! Gefällt mir!

Habe jetzt beim Ausprobieren direkt kein Problem gefunden.
Nach einer gewissen Testphase gehört es dann in den OPM, damit man es auch findet.

Gut gemacht!

[KodeZwerg]

TFlexiSwitch, einfach zu handhaben, gute performance, gleicher Fehler das es nicht transparent zeichnet.
Gute arbeit!

[siro]

Sehr gelungen Bernd, gefällt mir wirklich gut, grad etwas rumgespielt.

Info, weil es mir nicht kalr war:
NewRollImage wählt für die "momentane Position" ein Bild aus.
Wenn also Direction auf fsLeft steht, wird das Image für die linke Position ausgewählt.
Steht Direction auf fsRight wird ein Image für die rechte Poaition ausgewählt.
Gibt absolut Sinn und arbeitet völlig korrekt, Verständnis Problem lag auf meiner Seite...

Hast Du Dir wieder viel Mühe gegeben, Supi

Eine Merkwürdigkeit ist mir eben dennoch aufgefallen:
GroupIndex dient ja dazu, nur EINEN Button aktiv zu halten, also wie RadioButton.
Das funktionierrt auch mit 3 FlexiSwitches richtig,
aber 2 FlexiSwitches ist das nicht immer gegeben
anbei ein kleines Beispiel:

project1.zip

(105.52 KiB) 88-mal heruntergeladen

[wennerer]

Hallo zusammen,
allen vielen Dank für die Antworten.

@Theo: ja erst mal abwarten ob noch Fehler kommen.

@Siro : Wenn der RollButton in Grundstellung links steht muss der GroupIndex ungerade sein und umgekehrt. Ja, ist vielleicht etwas blöd umgesetzt. Mann kann auch noch trotz GroupIndex alle Schalter in den gleichen Zustand versetzen. Da wusste ich nicht recht was ein Nutzer erwartet. Könnte man natürlich noch abfragen. Wie ist denn deine Meinung dazu?

@KodeZwerg: Ich weiß jetzt nicht ob man das per se als Fehler betrachten sollte. Ich würde da eher von einer fehlenden Eigenschaft sprechen. Beim Entwickeln einer Komponente steht man am Anfang halt immer vor der Frage von was man ableiten möchte. TGraphicControl besitzt zwar transparenz kann aber keinen Fokus erhalten. Ist halt eine Abwägung was einem wichtig erscheint. Ich denke das eine pseudo Transparenz bei so einem Schalter fast immer ausreichend sein wird.

[siro]

UNGERADE genau, grade probiert. Generell scheint es problematisch wenn der GroupIndex gerade ist.
Ist er ungerade 3 5 17 usw. funktioniert es richtig.
Da würde ich auch nix dran ändern. Das ist okay so.
Evtl. einen Hinweis "muss ungerade" sein oder "heimlich" im Code ungerade machen ????
Schwer zu sagen wie es richtig wäre, ein "richtig" bzw. falsch gibt es hier eigentlich nicht.
AllowAllLeft oder AllowAllRight evtl.... Beim SpeedButton gibt es ja AllowAllUp

[wennerer]

Hallo Siro,
ich habe das mit geraden und ungeraden GroupIndex verworfen. Das war eine blöde Idee (und du hast es natürlich gleich gemerkt ).
Ich habe es jetzt komplett anders aufgebaut. Wenn du mal Lust und Zeit hast würde ich mich freuen wenn du es probierst.
Mein Problem ist eigentlich nach wie vor das mir nicht klar ist wie der Switch reagieren soll. Wenn du meinst das mein jetziges Ergebnis seltsam ist sollte ich veilleicht doch auf AllowLeft bzw. AllowRight gehen.

Viele Grüße
Bernd