Recent

Author Topic: centered text in progress bar with Marquee  (Read 1522 times)

Ericktux

  • Sr. Member
  • ****
  • Posts: 345
centered text in progress bar with Marquee
« 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
« Last Edit: March 28, 2023, 06:39:05 pm by Ericktux »

wp

  • Hero Member
  • *****
  • Posts: 11854
Re: centered text in progress bar with Marquee
« Reply #1 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

KodeZwerg

  • Hero Member
  • *****
  • Posts: 2007
  • Fifty shades of code.
    • Delphi & FreePascal
Re: centered text in progress bar with Marquee
« Reply #2 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.
« Last Edit: Tomorrow at 31:76:97 xm by KodeZwerg »

Ericktux

  • Sr. Member
  • ****
  • Posts: 345
Re: centered text in progress bar with Marquee
« Reply #3 on: March 28, 2023, 09:48:32 pm »
wow the panel trick is great, how can i use it going up 1 to 100 ?

KodeZwerg

  • Hero Member
  • *****
  • Posts: 2007
  • Fifty shades of code.
    • Delphi & FreePascal
Re: centered text in progress bar with Marquee
« Reply #4 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)
« Last Edit: Tomorrow at 31:76:97 xm by KodeZwerg »

KodeZwerg

  • Hero Member
  • *****
  • Posts: 2007
  • Fifty shades of code.
    • Delphi & FreePascal
Re: centered text in progress bar with Marquee
« Reply #5 on: March 28, 2023, 10:18:56 pm »
Ps: use the spinedit to change value 0-100
« Last Edit: Tomorrow at 31:76:97 xm by KodeZwerg »

wp

  • Hero Member
  • *****
  • Posts: 11854
Re: centered text in progress bar with Marquee
« Reply #6 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).

wp

  • Hero Member
  • *****
  • Posts: 11854
Re: centered text in progress bar with Marquee
« Reply #7 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.

KodeZwerg

  • Hero Member
  • *****
  • Posts: 2007
  • Fifty shades of code.
    • Delphi & FreePascal
Re: centered text in progress bar with Marquee
« Reply #8 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  :-*
« Last Edit: Tomorrow at 31:76:97 xm by KodeZwerg »

wp

  • Hero Member
  • *****
  • Posts: 11854
Re: centered text in progress bar with Marquee
« Reply #9 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

KodeZwerg

  • Hero Member
  • *****
  • Posts: 2007
  • Fifty shades of code.
    • Delphi & FreePascal
Re: centered text in progress bar with Marquee
« Reply #10 on: March 29, 2023, 10:46:58 pm »
Your new adjustments looking nice! I was laughing a lot when I switch to pdsBevel  :D
« Last Edit: Tomorrow at 31:76:97 xm by KodeZwerg »

KodeZwerg

  • Hero Member
  • *****
  • Posts: 2007
  • Fifty shades of code.
    • Delphi & FreePascal
Re: centered text in progress bar with Marquee
« Reply #11 on: March 30, 2023, 10:28:40 am »
Another Idea popped in my mind for a style, Pie!  :-*
vroom vrooooom  :P
« Last Edit: Tomorrow at 31:76:97 xm by KodeZwerg »

 

TinyPortal © 2005-2018