drawing animated level bar based on numbers

Posted on 2016-10-09
Medium Priority
Last Modified: 2016-10-12
i have this code that drawing steps level bar on Tvirtualstringtree

procedure TForm2.VirtualStringTree1BeforeCellPaint(Sender: TBaseVirtualTree;
  TargetCanvas: TCanvas; Node: PVirtualNode; Column: TColumnIndex;
  CellPaintMode: TVTCellPaintMode; CellRect: TRect; var ContentRect: TRect);

  procedure drawProgress(AWidth: Integer; APercent: Real; ASteps: Integer; ALeft: Integer = 1);
    r: TRect;
    h, n: Integer;
    if APercent > 1 then
      APercent := 1
    else if APercent = 0 then
      Exit;//nothing to draw

    h := Round(CellRect.Height / ASteps) - 1;

    r.Top := CellRect.bottom - h - 1;
    r.Left := ALeft;
    r.Width := AWidth;

    TargetCanvas.Brush.Color := clSkyBlue;

    n := Ceil(APercent * ASteps);//how many rect to draw?

    while n > 0 do begin
      r.Height := h;
      Dec(r.Top, 1 + h);

  drawProgress(10,        1, 7);
  drawProgress(30, Percents, 7, 1 + 10 + 1);

Open in new window

i take the code from Here

this code is drawing level bar based on this variable and animated it with timer but i got problem i am trying to set Percents variable to a random numbers start from 0 to 100 percent is real variable that set the level like that
Percents := Percents + 0.025; 

Open in new window

so i cannot set it to redraw the animated bar from 0 to 100 any idea how to tweak this ?

the goal is to set the bar from 0 - 50 - 100 and chanfe those number via timer to get the same result of this image but using numbers from 0 to 100 instead of using 0.025 to animated


  Percents: Real;

procedure TForm2.Timer1Timer(Sender: TObject);
  if Percents > 1 then
    Percents := 0
    Percents := Percents + 0.025;


Open in new window

Question by:dolphin King
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
LVL 27

Expert Comment

by:Sinisa Vuk
ID: 41836609
As I can see you need to convert range of 0..100(integer) into 0..1 (float). So do conversion as:
Percents := Percents + PercInt/100;
where you can put PercInt to 50 (percent). Do you have problem to generate random numbers?

Author Comment

by:dolphin King
ID: 41836929
i have sound component that have level measure property like following

procedure TFORM1.SoundLevel(Sender: TObject; Level: Integer);
// this Level  Value have maximum value that equals to 100
//so i needed to make the percents equals to that value to allow the tree redraw the animated level bar with the same value of the sound level 


Open in new window

currently by default the percent set randomly like so
global var 
Percents: Real;

//initiate percent

Percents := 0.2;

if Percents > 1 then
    Percents := 0.5;
    Percents := Percents + 0.025;


Open in new window

what i am trying to achieve to make percent equals to the sound level value the problem is that percent not completely set to actual integer that Percents is a decimal, not a percentage value, so 100% is 1.
LVL 27

Accepted Solution

Sinisa Vuk earned 2000 total points
ID: 41837553
...and when divide 100 with 100 you'll get 1.
function getSoundLevelPercentage(iLevel: Integer): Double;  
  Result := iLevel/100;

Open in new window

... where iLevel goes from 0 to 100, and result goes from 0.0 to 1.0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Computer science students often experience many of the same frustrations when going through their engineering courses. This article presents seven tips I found useful when completing a bachelors and masters degree in computing which I believe may he…
This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
The viewer will learn how to use the return statement in functions in C++. The video will also teach the user how to pass data to a function and have the function return data back for further processing.
The viewer will be introduced to the member functions push_back and pop_back of the vector class. The video will teach the difference between the two as well as how to use each one along with its functionality.
Suggested Courses

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question