Gradient Multicolor Gauge depends on its Value

Question

Hi EW Team,

We are developing a system that includes gauges for the 0-100 range. These gauges need to have gradient colors in their arcpaths. There is a reference design we have;

Let's assume in range 0-30 X color, 30-70 Y color, 70-100 Z color and with their bounds there are color transitions, like ColorBL, ColorBR, ColorTL, ColorTR properties in Views Class.

Is there anyway to construct a gauge like this reference image?

 

Thanks for your guidance.

 

Embedded Wizard Pro 9.30

Answer 1

Hello,

Is there anyway to construct a gauge like this reference image?

If the colors don't change at the runtime, I would recommend to create an image file (using a graphic editor) containing the full arc. Then use the Filter Image view to display the image together with a mask bitmap. The mask bitmap you prepare dynamically at the runtime using a Stroked Path Bitmap object. See the image below and the chapter Configure the mask filter for more details (expects Embedded Wizard 12 or newer):

If the colors do change at the runtime, then it will be difficult. You can use the ColorTL..ColorBR properties. These however produce simple linear gradients - not arc gradients. Theoretically (without having tested it in practice) and with some experimentation, you can compose the arc of multiple Stroke Path views arranged side by side in columns and rows. All views are connected to the same Path data object. The only difference is, that each view is configured with a different origin for the coordinate system so the views compose the arc image like 'mosaic stones'. Now you could configure the color properties of each view individually. So you get multiple smaller gradient areas. The more Stroke Path views used, the better the approximation to the desired color gradient. When the colors for the arc change at the runtime, you will need to calculate all the 'intermediate' colors for each view corner to approximate the arc.

I hope it helsp you further.

Best regards

Paul Banach

Comments

Hi Paul,

First, I want to thank you for your well explained solution. We have version 9.30 and the colors do not change at the runtime so first solution is not fit for now. At your second solution is a tough way to construct but I don't want to change the colors. I will try another way to create a gauge component like that. I will write the consequences to the post.

 

Thanks,

Best Regards.

Burak Cebesoy

---

Hello Burak Cebesoy,

if you are working with 9.30, possibly the approach explained in the thread How to change the color of Track in a gauge for different values could be helpful for you. The idea here is to use an image with the full arc and cover parts of it with background color (like a negative mask). This works of course only, when the background color is predetermined and solid (not gradient).

May be it helps you further. Or you update to the latest version supporting the mask filters.

Best regards

Paul Banach