in Embedded Wizard Studio by

Say I have Choosen a track range of 0 to 100, 


0 to 10: Red 

10-20: yellow

20 - 30 green 

likewise, till 100. 

an example image is attached for your reference.  

1 Answer

0 votes

Hello HemanthKumar,

you want the track to be composed of different colors and the length of the track should change according to the value of the gauge. Not clear for me is what happens with the gaps between the red, yellow, green spans. Nevertheless, this application case is beyond the configuration possibility of the regular Gauge widget. The Gauge widget can display the track with one color only. 

However, depending on your application case, you can achieve the desired effect using following trick. The trick requires the background behind the track to be solid colorized:

Step 1: Using your preferred Graphic Editor design a PNG image displaying the whole track for the whole value range. You will get an image with all the colors, red, yellow, green, etc. Let name this image file e.g. Scale.png.

Step 2: Using the Graphic Editor design also a second image displaying the gray (white?) arcs and lines. Let name this image file Cover.png.

Step 3: Add the both images to your Embedded Wizard project. You will get thereupon two Bitmap Resources.

Step 4: Modify your Gauge Configuration object to refer the Scale bitmap. See also Specify the bitmap and color for the Gauge's scale image.

Step 5: Modify the Gauge Configuration object to refer the Cover bitmap. See also Specify the bitmap and color for the Gauge's cover image.

With these steps the Gauge will display the whole track (as scale) in the background and as cover the gray (white) arcs and lines in front of it. Now what is missing is to hide parts of the track. For this purpose:

Step 6: Configure the color of the right track to be exact the same as the background color. See also Specify the radius, thickness and color for the Gauge's right track.

Step 7: Configure the thickness of the right track, radius, the center position so that the resulting track overlays (overlaps) the track found in the Scale image. See also  Specify the radius, thickness and color for the Gauge's right track.

Step 8: Leave the left track transparent with thickness = 0.0. See also Specify the radius, thickness and color for the Gauge's left track.

That's all so far. The trick here is, that the real track overwrites the Scale image with the background color resulting in the overwritten areas being not visible. As result you get the impression of the Scale in the background changing its length. As mentioned above, this trick works only, when background color is known and solid.

If the approach is not sufficient for you. You will need to create your own Gauge widget. For this purpose Embedded Wizard provides so-called Component Templates. These are ready to use widgets, which can be modified. For example, you can add views to display the segments of the track and you can control how the views appear. In fact the entire functionality of the Gauge can be adapted by you. See also the section Creating components from templates: Gauge.

If you decide to follow the last mentioned approach with component templates, see also the Filter Image view (Available in EW 12). This view helps you to mask the track. See also the section Configure the mask filter.

I hope it helps you further.

Best regards

Paul Banach

Ask Embedded Wizard

Welcome to the question and answer site for Embedded Wizard users and UI developers.

Ask your question and receive answers from the Embedded Wizard support team or from other members of the community!

Embedded Wizard Website | Privacy Policy | Imprint