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

drawing animated level bar based on numbers

Posted on 2016-10-09
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
  • 2
LVL 26

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 26

Accepted Solution

Sinisa Vuk earned 500 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: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying 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

This article will show, step by step, how to integrate R code into a R Sweave document
When we want to run, execute or repeat a statement multiple times, a loop is necessary. This article covers the two types of loops in Python: the while loop and the for loop.
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 technique of using vectors in C++. The video will cover how to define a vector, store values in the vector and retrieve data from the values stored in the vector.

856 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