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
