Hello,
in Embedded Wizard exist three approaches how to create a GUI component (e.g. the value bar widget):
Option 1: You use the ready-to-use widgets implemented in the Embedded Wizard framework. These widgets can be adapted easily. You can for example configure them to use other bitmaps for the value bar track, etc. Anyway, the implementation of the widgets is fixed and the possibility to customize them is consequently limited. On the other hand you don't need to write a single line of code in order to customize the widgets. For more details please see the section: Widgets.
Option 2: You create a new GUI component based on one of the provided component templates. In your case you could use the Horizontal Value bar template for this purpose. The advantage of this approach compared to option 1 is that you can modify the so created component. You are much more flexible. On the other hand, however, you need to analyze the implementation of the template, understand it and you need to adapt it. Usually, you will need to write some code to handle the look&feel specific aspects of your component. For more details please see the section: Creating components from templates.
Option 3: You create a new GUI component completely from scratch. No ready to use widgets nor any templates are used in this case. You have the maximum flexibility in this case. On the other hand you have to take care of the entire implementation of the component, its state managements and eventual event handling. For more details see the section: Creating new components and also the following sections addressing the aspects of composition, event handling, etc.
Now the question: which option is the right for your application case?
Well, from your provided images it seems that the value bar is not really linear. This makes the option 1 something difficult as the ready-to-use widgets simply limit to display some horizontal image stripe. Therefore I would select the option 2. Concrete:
- Use the provided Horizontal value bar template to create a new value bar widget.
- Then open the just created component and modify it so that it contains one Image view and one Filled Path view.
- The image view should display the gray (fixed) part of the scale including the numbers. Prepare for this purpose a corresponding PNG file (e.g. by using Photoshop) and add the PNG file to Embedded Wizard as a Bitmap resource.
- The Filled path view should be arranged behind the Image view and display the dynamic red scale curve. The curve can be constructed from line segments, arcs and Bézier curves. It should be flexible for your application case. Anyway, you will need some mathematic to calculate the necessary coordinates when you define the Path data.
- When the actual value of your own implemented Value bar widgets changes, you recalculate the coordinates for the Path data so that the red curve appears as you expect. Please note the inline comments provided in the template. They explain how you use the current value of this widget.
- Alternative and more sophisticated approach would be to use Filled Path also for the gray curves. You could also use Text views to display the numbers if these may change at the runtime.
Does it help you further?
Best regards
Paul Banach
