Lazarus

Programming => General => Topic started by: Ericktux on March 28, 2023, 06:36:58 pm

Title: centered text in progress bar with Marquee
Post by: Ericktux on March 28, 2023, 06:36:58 pm

hello friends, I tell you, I want to center a text in the progress bar
works on style:= pbstNormal
Doesn't work on style:= pbstMarquee

this is the code

Code: Pascal  [Select][+][-]

1. Label1.Parent := progressBar1;
2. Label1.AutoSize := False;
3. Label1.Transparent := True;
4. Label1.Top :=  0;
5. Label1.Left :=  0;
6. Label1.Width := progressBar1.ClientWidth;
7. Label1.Height := progressBar1.ClientHeight;
8. Label1.Alignment := taCenter;
9. Label1.Layout := tlCenter;

 

any help please, i am using lazarusx86 on win11x64
I attach an example

Title: Re: centered text in progress bar with Marquee
Post by: wp on March 28, 2023, 07:44:07 pm

I think this is not possible, at least not on Win 11. I'd place the label above, before or after the progressbar, or I'd replace the TProgressbar by a custom-drawn panel (combined with a TTimer to achieve the running bar effect; the timer should have a short interval such as 25 ms, and the text to be displayed should be passed to the panel's Caption):

Code: Pascal  [Select][+][-]

1. uses
2.   LCLIntf;
3.  
4. const
5.   MARQUEE_LENGTH = 120;
6. var
7.   FPosition: Integer = 0;
8.  
9. procedure TForm1.Panel1Paint(Sender: TObject);
10. var
11.   R, RM: TRect;
12.   ts: TTextStyle;
13. begin
14.   with Panel1.Canvas do
15.   begin
16.     Brush.Color := $EEEEEE;
17.     Pen.Color := clSilver;
18.     R := Rect(0, 0, Panel1.ClientWidth, Panel1.ClientHeight);
19.     Rectangle(R);
20.     RM := R;
21.     InflateRect(RM, -1, -1);
22.     RM.Right := FPosition;
23.     RM.Left := RM.Right - MARQUEE_LENGTH;
24.     if RM.Left < 0 then RM.Left := 0;
25.     if RM.Right >= Panel1.ClientWidth then RM.Right := Panel1.ClientWidth-1;
26.     GradientFill(RM, $1FA01F, $1FC01F, gdVertical);
27.     ts := TextStyle;
28.     ts.Alignment := taCenter;
29.     ts.Layout := tlCenter;
30.     TextRect(R, 0, 0, Panel1.Caption, ts);
31.   end;
32. end;
33.  
34. procedure TForm1.Timer1Timer(Sender: TObject);
35. begin
36.   FPosition := FPosition + 8;
37.   if FPosition - MARQUEE_LENGTH > Panel1.ClientWidth then FPosition := 0;
38.   Panel1.Invalidate;
39. end;

See attached demo

Title: Re: centered text in progress bar with Marquee
Post by: KodeZwerg on March 28, 2023, 08:43:18 pm

AFAIK you can not overlap something over a ProgressBar since it is painted by Operating System, at least on Windows machines.
wp's solution is working well.

Title: Re: centered text in progress bar with Marquee
Post by: Ericktux on March 28, 2023, 09:48:32 pm

wow the panel trick is great, how can i use it going up 1 to 100 ?

Title: Re: centered text in progress bar with Marquee
Post by: KodeZwerg on March 28, 2023, 10:07:39 pm

Based on wp's source, here is one that show 0-100 doing. (with little bit redesigning)

Title: Re: centered text in progress bar with Marquee
Post by: KodeZwerg on March 28, 2023, 10:18:56 pm

Ps: use the spinedit to change value 0-100

Title: Re: centered text in progress bar with Marquee
Post by: wp on March 29, 2023, 01:08:54 am

If you want to be able to switch between normal and marquee mode or modify other properties it is maybe worth the effort to write a new component; it is relatively straight-forward.

ATM, the component (TProgressBarEx) is not registered, thus you must create it at runtime, as shown in the attached project (FormCreate, the other code is just to demonstrate the effect of the properties).

Title: Re: centered text in progress bar with Marquee
Post by: wp on March 29, 2023, 01:56:23 pm

Moved the TProgressBarEx into the ExCtrls package now (https://sourceforge.net/p/lazarus-ccr/svn/HEAD/tree/components/exctrls/). The component is registered now and appears on the ExCtrls component palette after installation of the package.

Title: Re: centered text in progress bar with Marquee
Post by: KodeZwerg on March 29, 2023, 03:50:16 pm

Nice job @wp!
I would like to either contribute some more modifications or ask you to do:
- property to switch between custom text and value and % (maybe even possibility to add %/Value after/infront of text)
- calculation for font to limit the font size (height) that it always fit into the drawn area
- auto fit font to set the biggest possible size for current chosen font
- auto expand font to use the full rectangle and spread the text over it (utilize whitespaces)
- option how gradient effect should be drawn (vertical/horizontal)
- shiny effect like in original windows control
- option to be borderless
- shadow effect around rectangle

...more things that I find out during coding  :-*

Title: Re: centered text in progress bar with Marquee
Post by: wp on March 29, 2023, 08:05:53 pm

Now with new properties

• BorderStyle: none, flat, sunken, raised, etched
• TextMode for the Caption
  
  • tmNone: no text
  • tmValue: displays the value of Position directly (FCaption = ''), or formats the Caption using the Format() function, requires a %d parameter (e.g. "Voltage: %.d mV")
  • tmPercent: displays the Position as a percentage directly (FCaption = ''), or formats the Caption using the Format() function, requires a %f parameter (e.g. "%.0f%% completed")
  • tmValueAndPercent: tmValue and tmPercent combined. First parameter is for Position, second parameter is for Percent.
    
  • tmCustom: displays Caption directly
• AutoSize: adjusts height (or width, if rotated) to font height + some margin

Title: Re: centered text in progress bar with Marquee
Post by: KodeZwerg on March 29, 2023, 10:46:58 pm

Your new adjustments looking nice! I was laughing a lot when I switch to pdsBevel  :D

Title: Re: centered text in progress bar with Marquee
Post by: KodeZwerg on March 30, 2023, 10:28:40 am

Another Idea popped in my mind for a style, Pie!  :-*
vroom vrooooom  :P