Horizontal Bar with negativ and positive values

Question

Hello EW Team,

I created a new HorizontalBar with a value bar in the middle.

I looked at the bar from the Widget Set Flat and used the same properties.

Now I want that when ValueNow changes, the stroke moves to the left (if the value is negative) and to the right (if the value is positive).

How can I do that?

Best regards Justin

Answer 1

Hello Justin,

Assuming you are working with a version 9 or newer, I would recommend you to use the components from the Gallery folder Widgets. There you can find the Horizontal Value Bar widget. This widget comes with a default appearance. You can adapt its appearance to your design expectations by preparing a dedicated config object referring bitmaps to fill the tracks on the left and on the right of the needle, etc. See also the section Customize your own Horizontal Value Bar.

Nevertheless, the Horizontal Value Bar widget does not support by itself the mentioned application case of a symmetric value bar with the 0 value in the middle. To achieve your application case you will need to combine 2 widgets side by side as demonstrated in the screenshot below:

When the value is negative, you control the left bar and the right bar is initialized with the value 0. When the value is positive, you control the right bar and the left bar is 0. Following could be the code to control the widgets:

if      ( value < 0 ) { BarLeft.CurrentValue  = value; BarRight.CurrentValue = 0; }
else if ( value > 0 ) { BarRight.CurrentValue = value; BarLeft.CurrentValue  = 0; }
else                  { BarLeft.CurrentValue  = 0;     BarRight.CurrentValue = 0; }

For demonstration purpose I have prepared a simple example you can download here. Please note, the example uses the default look&feel of the bars. For your application case you will need to configure the widgets individually to use other bitmaps. Especially to use a bitmap without the rounding edge. How you do this is explained in the above mentioned chapter.

Also important, for the sake of simplicity I have stored the necessary configuration objects in the SymmetricBar class. This has the effect that when you plan to use many such 'symmetric bars' simultaneously, each instance will manage its own copy of the the config objects although all instances are equal. Therefore, if you plan to use multiple symmetric bars at the same time, I would recommend to store the config objects globally within an unit (see also autoobject). It will save RAM.

I hope it helps you further.

An alternative approach would be to create your own Value Bar widget. You can use for this purpose the Horizontal Value Bar component template. With this template you add a new widget to your project which then can be modified according to you needs. You  could, e.g. modify the code calculating the position and the size of the track view (a filled rectangle) so it is arranged symmetrically around the center of the widget. Unlike the above described approach with ready to use widgets, this approach requires coding the desired behavior. On the other hand it is more flexible if you plan to create some kind of sophisticated widget. You can even add more views to the widgets, if it is necessary.

Best regards

Paul Banach

Comments

However, as I understand it, it would be possible to create a custom horizontal bar where the needle is at 0 in the middle and can move left or right, or am I wrong?

My needle is a rectangle with a pixel width of 4.

I thought of letting the needle set in the middle of the background and then replacing the needle's width with the new value.

So to have only one widget where you can set everything without having two ones.

Best regards

Justin

---

Hello Justin,

it would be possible to create a custom horizontal bar where the needle is at 0 in the middle and can move left or right, or am I wrong?

yes, when you configure the bar with MinValue = -50 and MaxValue = 50, the value 0 will correspond to the center position of the widget.

So to have only one widget where you can set everything without having two ones.

If you don't want to combine two widgets and all you want is a needle which moves left/right, you can use the ready-to-use widgets and configure it with MinValue and MaxValue as mentioned above. If you additionally want the track to change its width symmetrically around the center of the widget, then you will need to create your own widget by using the above mentioned component template.

Best regards

Paul

---

Hello Paul,

I'll try and give feedback if I've managed it or if I'm still having problems.

Best regards

Justin

---

Hello Paul,

after a lot of headaches I have now made my own ValueBar, which works from -100 (negative) to 100 (positive) with only 2 rectangles.

Thanks for your help and have a nice week.

Best regards Justin