Animated toggle switch

[wennerer]

Hallo,
nachdem wp in einem anderem Beitrag (viewtopic.php?p=138001#p138001) diesen klasse Code zum Drehen einer PNG gepostet hat ist mir der ToggleSwitch wieder eingefallen und ich musste einfach mal herumprobieren was ich da mit meinen bescheidenen Mitteln zu Wege bringe. Das was ich unten angehängt habe ist natürlich noch lange keine brauchbare Komponente, dennoch würde mich interessieren wie die Meinungen dazu sind bzw. ob man die Grafik mit einfachen Tricks noch verbessern könnte. Was mir auch aufgefallen ist, ist das es unter Linux viel schneller läuft als unter Windows (gleicher Laptop).

TestASwitch.png (5.4 KiB) 2970 mal betrachtet

Ich hoffe ich habe keinen Fehler beim Zusammenstellen der benötigten Dateien (Ressourcen) gemacht.

Viele Grüße
Bernd

Edit: Anhang nochmal getauscht, siehe Beitrag Fliegermichl

[wp_xyz]

Schöne Idee. Allerdings sehen die Ränder infolge der Farbtransparenz nicht so toll aus. In der Anlage eine überarbeitete Version, für die ich die Bilder mit Inkscale als svg überarbeitet, mit einem Hintergrund versehen und dann als png exportiert haben. Im Code wird dann der Alpha-Kanal verwendet, statt der "TransparentColor". Außerdem habe ich die Anzahl der Umwandlungen zwischen LCL-Graphik und FCL-Image reduziert..

[wennerer]

Wow, sieht super aus!
Vielen Dank für deine Antwort. Ich muss wie immer erstmal verstehen was du alles gezaubert hast.
Dauert bei mir immer etwas, aber der Winter steht ja vor der Tür.

Viele Grüße
Bernd

[theo]

Sieht gut aus!
Wenn''s jetzt noch ein Control wäre...

[KodeZwerg]

Sieht gut aus!
Wenn''s jetzt noch ein Control wäre...

Dem stimme ich zu und eine mini Verbesserung wäre auch den Rot/Grün Farbwechsel mehr als blending anstelle "hälfte erreicht, spontan wechsel", würde besser zum rest passen find ich.
Gute arbeit wp_xy!

[KodeZwerg]

So wird es hübsch aufgewertet finde ich.

Code: Alles auswählen

procedure TForm1.FormPaint(Sender: TObject);
const
  TWO_PI = 2.0 * pi;
var
  x0, y0: Integer;
  imgEXIT, imgOK, imgRed, imgGreen: TLazIntfImage;
  bmp: TBitmap;
  f: Double;
begin
  x0 := 20;
  y0 := 20;
  f := FSliderPos / FSliderRange;
  {
    if FSliderPos > FSliderRange div 2 then
      Canvas.Draw(x0, y0, FImages[1])
    else
      Canvas.Draw(x0, y0, FImages[0]);
  }
  bmp := TBitmap.Create;
  try
    imgRed := FImages[0].CreateIntfImage;
    imgGreen := FImages[1].CreateIntfImage;
    BlendImages(imgGreen, imgRed, 1.0 - f);
    bmp.Pixelformat := pf32Bit;
    bmp.Assign(imgGreen);
    Canvas.Draw(x0, y0, bmp);
  finally
    bmp.Free;
    imgRed.Free;
    imgGreen.Free;
  end;

  imgExit := FImages[2].CreateIntfImage;
  imgOK := FImages[3].CreateIntfImage;
  bmp := TBitmap.Create;
  try
    BlendImages(imgOK, imgEXIT, 1.0 - f);
    if FRoll then
      RotateImage(imgOK, TWO_PI * f);

    bmp.Pixelformat := pf32Bit;
    bmp.Assign(imgOK);

    Canvas.Draw(x0 + FMargin + FSliderPos, y0 + FMargin, bmp);
  finally
    bmp.Free;
    imgOK.Free;
    imgExit.Free;
  end;
end;

[fliegermichl]

Ich hatte das Testprojekt heruntergeladen und mit Lazarus geöffnet. Da meckert es, daß es das Package Multis nicht finden kann. Wenn man die Abhängigkeit aus dem Projektinspektor entfernt, kompiliert es aber problemlos.

[wennerer]

Hallo,

Fliegermichl schrieb:

Ich hatte das Testprojekt heruntergeladen und mit Lazarus geöffnet. Da meckert es, daß es das Package Multis nicht finden kann. Wenn man die Abhängigkeit aus dem Projektinspektor entfernt, kompiliert es aber problemlos.

Danke für deinen Hinweis. Keine Ahnung wie ich das reingebracht habe. Da muss ich in Zukunft besser aufpassen, ist nervig wenn es nicht läuft. Ich habe den Anhang nochmal getauscht.

KodeZwerg schrieb:

So wird es hübsch aufgewertet finde ich.

Ja finde ich auch.

Theo schrieb:

Wenn''s jetzt noch ein Control wäre...

Also ich werde da bestimmt bei Gelegenheit weiter herumprobieren. Und wer weiß ... manchmal findet auch ein blindes Huhn ein Korn.
Aber eventuell finden sich ja noch mehr denen der vorhandene Code sogut gefällt das er was daraus machen möchte.

Viele Grüße an Alle!
Bernd

[KodeZwerg]

Wenn''s jetzt noch ein Control wäre...

Vielleicht dient das als Vorlage für ein Control?
Es bietet alles was in wp's original vorkommt.
Es ist ein Control.
Es hat die gleiche Macke wie mein anderes "Rotieren"-Control, es zeichnet nicht transparent, da die ecken rund sind ist in diesem kleinen Randbereicht ein Fehler zu sehen wenn man ein Bild oder einen Farbverlauf im Hintergrund hat.
Es hat noch den einen oder anderen Schönheitsfehler, einer zum Beispiel ist, das erst nach dem zweiten Klick-Event etwas passiert.

Als demo ist das original von wp mit dem control zusammen.

[wp_xyz]

Ich habe jetzt mal den TOnOffSwitch aus dem Industrial-Package auf CCR um ein Animation-Feature erweitert, sowie um eine ImageList für die Icons, die auf dem Button im ON/OFF-Zustand gemalt werden können.

Der runde Stil ist wegen des Malens auf dem LCL-canvas recht pixelig. Aber ich weiß nicht recht, wie man das besser machen kann, denn in dem Beispiel weiter oben wurde ein PNG-Hintergrundbild verwendet, aber das passt hier nicht, weil ich die Größe des Controls einstellbar lassen möchte.

Das beigefügte Projekt erlaubt, mit der Komponente herumzuspielen. Die entsprechende switches-Unit ist gleich mit dabei, man muss also nichts installieren. Aber ansonsten befindet sich die Unit im Industrial-Package auf CCR (https://sourceforge.net/p/lazarus-ccr/s ... rialstuff/). Das ganze kommt später auch in den OPM, muss sich aber erst noch "setzen".

[EDIT] Den zip-Anhang gegen eine mit Laz-Release compilierbare Version ausgetauscht.

[sstvmaster]

Hallo wp,

bekomme folgende Meldung;

Code: Alles auswählen

switches.pas(259,14) Error: Identifier not found "RotatePoint"

VG Maik

[wp_xyz]

switches.pas(259,14) Error: Identifier not found "RotatePoint"
VG Maik

Mist, habe nicht dran gedacht, dass RotatePoint mindestens Laz3.0 benötigt. Habe nun den Anhang oben gegen eine funktionierende Version ausgetauscht.

[KodeZwerg]

Danke für dein Control wp_xyz.
Es hat leider den gleichen Fehler wie meins, zumindest unter Windows, es zeichnet nicht Transparent.
Im Anhang zeige ich wie ich es meine.

Bild_2023-11-15_110910842.png (26.37 KiB) 2835 mal betrachtet

[wp_xyz]

Hätte schören können, dass ich das ausprobiert habe - warum ist dann das mit dem WMEraseBkGnd im Code? Aber wahrscheinlich hat das nicht funktioniert, und ich hab's dann vergessen...

Jedenfalls, wenn man etwas sucht, dann kommt man auf TControl.SetShape(ABitmap), und damit funktioniert es. Tausche die switches-Unit gegen die Version im Anhang aus.

[wennerer]

Hallo wp_xyz,
ich habe es eben mal getestet. Ich finde bsThinRounded schaut ohne Abstriche absolut brauchbar aus. Die Animation ist super. Und eventuell sind wir auch etwas zu kritisch. ich habe heute mal bewusst in einigen Programmen ähnliche Controlls betrachtet und muss sagen da schaut dein OnOffSwitch um Welten besser aus.


Viele Grüße
Bernd