Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win


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 28

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 28

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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

In this post we will learn how to make Android Gesture Tutorial and give different functionality whenever a user Touch or Scroll android screen.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Viewers will learn how to properly install Eclipse with the necessary JDK, and will take a look at an introductory Java program. Download Eclipse installation zip file: Extract files from zip file: Download and install JDK 8: Open Eclipse and …
This video will show you how to get GIT to work in Eclipse.   It will walk you through how to install the EGit plugin in eclipse and how to checkout an existing repository.
Suggested Courses

618 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