53 views
in GUI Development by

Hi,

I want to configure a gauge. It should be like the following image.

So here the gauge is segmented with equal values. Each segment is going to be shown as a bitmap. The green colored segment is used as needle here and yellow segment can be used as the value to be shown with filled bitmap. 

Each value is going to be represented with individual bitmap segment. Can you please help me on this, how to achieve this from Embedded Wizard using gauge widget or any other resource.

 

Thanks & Regards

Dinesh

1 Answer

0 votes
by

Hello,

your application case goes beyond the configuration possibilities of the Gauge widget. In the simplest case you can achieve the desired effect by using a regular Image view and Multi Frame bitmap. Following could be the steps:

Step 1: By using your preferred Graphic editor (e.g. GIMP, Photoshop, Afinity Designer, etc.) design an image file. The image file should be composed of equally sized frames, each displaying another phase of the gauge.

Step 2: Store the resulting file as PNG and add it to Embedded Wizard project. Configure the resulting Bitmap Resource to be multi-frame bitmap.

Step 3: In your application use a regular Image view. Assign to the Image view the Bitmap Resource from step 2.

Step 4: By modifying the property FrameNumber of the Image view you select the frame from Bitmap resource. The value of FrameNumber corresponds thus to the Gauge position.

More sophisticated would be to create your own Gauge component individually adapted to your needs. As starting point you could use the Gauge component template. This component templates uses an Warp Image view to display the needle. You could remove the Warp Image view and replace it by the Image view from the above steps 1 .. 4. Then calculate from the value of the Gauge component the corresponding FrameNumber.

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

...