how to make a customized value bar with multiple colors for different values?

Question

I want to make value bar lets say ranged 0 to 40 and wants 0-30 green 30 to 35 yellow bar and 35 to 40 red bar.

is this even possible?

Answer 1

Hello Mariam,

An easy way to realize this is to create your own value bar based on the Templates::HorizontalValueBar. Here you can add your segement steps as properties. This way you can adjust these steps when using the value bar.
The track can be handled by three different rectangles, each of them within the color for one segment.

Within the UpdateViewState method, you can handle your steps and the code can look like this.

// Always invoke the inherited method.
super( aState );


// Get the min/max positions for the right edge of the value bar.
var int32 minPos = 6;
var int32 maxPos = Bounds.w - 6;
var int32 oldPos = Track.Bounds.x2;
var int32 newPos = minPos;
var int32 step1Pos = minPos;
var int32 step2Pos = minPos;

// Convert the widget's current value to a pixel position within the
// allowed range.
if ( MaxValue != MinValue )
{
  newPos = ((( CurrentValue - MinValue ) * ( maxPos - minPos )) /
             ( MaxValue - MinValue )) + minPos;

  step1Pos = ((( Step1 - MinValue ) * ( maxPos - minPos )) /
             ( MaxValue - MinValue )) + minPos;

  step2Pos = ((( Step2 - MinValue ) * ( maxPos - minPos )) /
             ( MaxValue - MinValue )) + minPos;

}

// If the just calculated position does differ from the actual (old)
// position, adjust the size and evtl. the position of your views.
if ( newPos != oldPos )
{
  if ( newPos < step1Pos )
  {
    Track.Bounds.x2 = newPos;
    Track1.Visible = false;
    Track2.Visible = false;
  }
  else if ( newPos < step2Pos )
  {
    Track.Bounds.x2 = step1Pos;
    Track1.Visible = true;
    Track1.Bounds.x1 = Track.Bounds.x2;
    Track1.Bounds.x2 = newPos;
    Track2.Visible = false;
  }
  else
  {
    Track.Bounds.x2 = step1Pos;
    Track1.Visible = true;
    Track1.Bounds.x1 = Track.Bounds.x2;
    Track1.Bounds.x2 = step2Pos;
    Track2.Visible = true;
    Track2.Bounds.x1 = Track1.Bounds.x2;
    Track2.Bounds.x2 = newPos;
  }
}

 

Comments

Thanks, this was really helpful!!