Gauge configuration

Question

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

Answer 1

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