Forum > Packages and Libraries
QGradientTrackPanel: A Fully customizable GradientTrackBar
Ed78z:
I'd just like to share my QGradientTrackPanel component! It's very powerful and flexible.
Feel free to use it and share your feedback!
--- Code: Pascal [+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i < x.length; i++) { x[i].style.maxHeight='none'; x[i].style.height = Math.min(x[i].clientHeight+15,306)+'px'; x[i].style.resize = "vertical";}};} ---unit Unit1; {$mode objfpc}{$H+} interface uses Classes, SysUtils, Forms, Controls, Graphics, Dialogs, StdCtrls, Spin, ComCtrls, ExtCtrls, QGradientTrackPanel; type { TForm1 } TForm1 = class(TForm) ColorButton: TColorButton; LblColor: TLabel; LblPosition: TLabel; LblTransparency: TLabel; LblBrightness: TLabel; SpinPosition: TSpinEdit; SpinTransparency: TSpinEdit; SpinBrightness: TSpinEdit; TrackPosition: TTrackBar; TrackTransparency: TTrackBar; TrackBrightness: TTrackBar; PreviewPaintBox: TPaintBox; procedure FormCreate(Sender: TObject); procedure PreviewPaintBoxPaint(Sender: TObject); private FGradientPanel: TQGradientTrackPanel; procedure OnStopSelectedHandler(Sender: TObject; {%H-}AIndex: Integer); procedure OnStopAddedHandler(Sender: TObject; {%H-}AIndex: Integer); procedure OnStopRemovedHandler(Sender: TObject; {%H-}AIndex: Integer); procedure OnStopChangedHandler(Sender: TObject); procedure UpdateControlsFromSelectedStop; procedure SpinPositionChange(Sender: TObject); procedure TrackPositionChange(Sender: TObject); procedure SpinTransparencyChange(Sender: TObject); procedure TrackTransparencyChange(Sender: TObject); procedure SpinBrightnessChange(Sender: TObject); procedure TrackBrightnessChange(Sender: TObject); procedure ColorButtonChanged(Sender: TObject); public end; var Form1: TForm1; implementation {$R *.lfm} procedure TForm1.FormCreate(Sender: TObject);var InitialStops: TStopArray = nil; begin FGradientPanel := TQGradientTrackPanel.Create(Self); FGradientPanel.Parent := Self; FGradientPanel.Left := 10; FGradientPanel.Top := 20; FGradientPanel.Width := Form1.Width - 20; FGradientPanel.Height := 44; FGradientPanel.BorderWidth:=1;// 0 = No Border FGradientPanel.Anchors := [akTop, akLeft, akRight]; FGradientPanel.OnStopSelected := @OnStopSelectedHandler; FGradientPanel.OnStopAdded := @OnStopAddedHandler; FGradientPanel.OnStopRemoved := @OnStopRemovedHandler; FGradientPanel.OnStopChanged := @OnStopChangedHandler; SetLength(InitialStops, 7); // Red InitialStops[0].Position := 0; InitialStops[0].Color := clRed; InitialStops[0].Transparency := 0; InitialStops[0].Brightness := 0; // Orange InitialStops[1].Position := 16; InitialStops[1].Color := $0080FF; InitialStops[1].Transparency := 0; InitialStops[1].Brightness := 0; // Yellow InitialStops[2].Position := 33; InitialStops[2].Color := clYellow; InitialStops[2].Transparency := 0; InitialStops[2].Brightness := 0; // Green InitialStops[3].Position := 50; InitialStops[3].Color := clLime; InitialStops[3].Transparency := 0; InitialStops[3].Brightness := 0; // Blue InitialStops[4].Position := 66; InitialStops[4].Color := clBlue; InitialStops[4].Transparency := 0; InitialStops[4].Brightness := 0; // Indigo InitialStops[5].Position := 83; InitialStops[5].Color := $82004B; InitialStops[5].Transparency := 0; InitialStops[5].Brightness := 0; // Violet InitialStops[6].Position := 100; InitialStops[6].Color := $EE82EE; InitialStops[6].Transparency := 0; InitialStops[6].Brightness := 0; FGradientPanel.Stops := InitialStops; FGradientPanel.SelectedIndex := 0; UpdateControlsFromSelectedStop;end; procedure TForm1.OnStopSelectedHandler(Sender: TObject; AIndex: Integer);begin UpdateControlsFromSelectedStop;end; procedure TForm1.OnStopAddedHandler(Sender: TObject; AIndex: Integer);begin UpdateControlsFromSelectedStop; PreviewPaintBox.Invalidate;end; procedure TForm1.OnStopRemovedHandler(Sender: TObject; AIndex: Integer);begin UpdateControlsFromSelectedStop; PreviewPaintBox.Invalidate;end; procedure TForm1.OnStopChangedHandler(Sender: TObject);begin if (FGradientPanel.SelectedIndex >= 0) and Assigned(SpinPosition) then begin SpinPosition.OnChange := nil; SpinPosition.Value := FGradientPanel.SelectedPosition; SpinPosition.OnChange := @SpinPositionChange; TrackPosition.OnChange := nil; TrackPosition.Position := FGradientPanel.SelectedPosition; TrackPosition.OnChange := @TrackPositionChange; end; PreviewPaintBox.Invalidate;end; procedure TForm1.PreviewPaintBoxPaint(Sender: TObject);begin if not Assigned(FGradientPanel) or (FGradientPanel.StopsCount = 0) then Exit; FGradientPanel.DrawGradient(PreviewPaintBox.Canvas, PreviewPaintBox.ClientRect, True);end; procedure TForm1.UpdateControlsFromSelectedStop;begin if (FGradientPanel.SelectedIndex >= 0) and Assigned(SpinPosition) then begin SpinPosition.OnChange := nil; TrackPosition.OnChange := nil; SpinTransparency.OnChange := nil; TrackTransparency.OnChange := nil; SpinBrightness.OnChange := nil; TrackBrightness.OnChange := nil; ColorButton.OnColorChanged := nil; ColorButton.ButtonColor := FGradientPanel.SelectedColor; SpinPosition.Value := FGradientPanel.SelectedPosition; TrackPosition.Position := FGradientPanel.SelectedPosition; SpinTransparency.Value := FGradientPanel.SelectedTransparency; TrackTransparency.Position := FGradientPanel.SelectedTransparency; SpinBrightness.Value := FGradientPanel.SelectedBrightness; TrackBrightness.Position := FGradientPanel.SelectedBrightness; SpinPosition.OnChange := @SpinPositionChange; TrackPosition.OnChange := @TrackPositionChange; SpinTransparency.OnChange := @SpinTransparencyChange; TrackTransparency.OnChange := @TrackTransparencyChange; SpinBrightness.OnChange := @SpinBrightnessChange; TrackBrightness.OnChange := @TrackBrightnessChange; ColorButton.OnColorChanged := @ColorButtonChanged; end;end; procedure TForm1.SpinPositionChange(Sender: TObject);begin if FGradientPanel.SelectedIndex >= 0 then begin FGradientPanel.SelectedPosition := SpinPosition.Value; TrackPosition.OnChange := nil; TrackPosition.Position := SpinPosition.Value; TrackPosition.OnChange := @TrackPositionChange; end;end; procedure TForm1.TrackPositionChange(Sender: TObject);begin if FGradientPanel.SelectedIndex >= 0 then begin FGradientPanel.SelectedPosition := TrackPosition.Position; SpinPosition.OnChange := nil; SpinPosition.Value := TrackPosition.Position; SpinPosition.OnChange := @SpinPositionChange; end;end; procedure TForm1.SpinTransparencyChange(Sender: TObject);begin if FGradientPanel.SelectedIndex >= 0 then begin FGradientPanel.SelectedTransparency := SpinTransparency.Value; TrackTransparency.OnChange := nil; TrackTransparency.Position := SpinTransparency.Value; TrackTransparency.OnChange := @TrackTransparencyChange; end;end; procedure TForm1.TrackTransparencyChange(Sender: TObject);begin if FGradientPanel.SelectedIndex >= 0 then begin FGradientPanel.SelectedTransparency := TrackTransparency.Position; SpinTransparency.OnChange := nil; SpinTransparency.Value := TrackTransparency.Position; SpinTransparency.OnChange := @SpinTransparencyChange; end;end; procedure TForm1.SpinBrightnessChange(Sender: TObject);begin if FGradientPanel.SelectedIndex >= 0 then begin FGradientPanel.SelectedBrightness := SpinBrightness.Value; TrackBrightness.OnChange := nil; TrackBrightness.Position := SpinBrightness.Value; TrackBrightness.OnChange := @TrackBrightnessChange; end;end; procedure TForm1.TrackBrightnessChange(Sender: TObject);begin if FGradientPanel.SelectedIndex >= 0 then begin FGradientPanel.SelectedBrightness := TrackBrightness.Position; SpinBrightness.OnChange := nil; SpinBrightness.Value := TrackBrightness.Position; SpinBrightness.OnChange := @SpinBrightnessChange; end;end; procedure TForm1.ColorButtonChanged(Sender: TObject);begin if FGradientPanel.SelectedIndex >= 0 then FGradientPanel.SelectedColor := ColorButton.ButtonColor;end; end.
AlexTP:
It was not much needed component: in usual GUI it's ok to place a trackbar + the panel below, with gradients on panel.
Ed78z:
--- Quote from: AlexTP on August 08, 2026, 06:25:24 pm ---It was not much needed component: in usual GUI it's ok to place a trackbar + the panel below, with gradients on panel.
--- End quote ---
Thank you AlexTP for your feedback.
I developed this component to use in my SkiaEdit component.
I am curious how to replicate this complex/flexible component (QGradientTrackPanel) with a trackbar + the panel. Could you please share your idea? it may help to simplify my SkiaEdit component.
Boleeman:
Nice Gradient TrackBar Panel Ed78z
Made a few nice gradients. Easy to use.
Reminds me of some old VB6 versions.
Some suggestions:
Use radial, cosine, HSL instead of just linear interpolations
Perhaps have an angle variable.
More complex: Ambient lighting
Lastly SkiaEdit component : was not aware of it for Lazarus (thought it was exclusively for Delphi)
Ed78z:
Boleeman,
I like to get your feedback about my QGradientPro demo program (still under progress...)
Download the compiled file here:
https://drive.google.com/drive/u/0/folders/11Q1DPsEUJ8wMdlwjZt_o3qAHpZS4EFjj
Navigation
[0] Message Index
[#] Next page