Creating a dynamic gauge based on percentages

[bffonseca]

Greetings!

I am trying to create a gauge (a circle only partially filled) that will update according to a percentage.

The only way I've come up with is drawing a base circle and then drawing lines over it with the exact lenght of that part of the circle. Only covering the inside, making it look like it's partially filled.

Is there an easier way of doing this? As this method will require a lot of trial and error and pixel counting.

Thanks!

image: i.imgur.com/PI55Qwi.png

[jamesbowman]

Here's one way:



You draw 3 circles using large points. The first is the outer circle, in gray.
Second is a yellow circle, slightly smaller.
Third is a white circle, using scissor to limit the drawn area.

This is just an outline, completely untried. "fill" is a percentage 0-100:


def cgauge(int x, int y, int r, int fill) {

 GD.SaveContext();
 GD.Begin(POINTS);

 GD.PointSize(PIXELS(r));
 GD.ColorRGB(0x303030);
 GD.Vertex2f(PIXELS(x), PIXELS(y));

 GD.PointSize(PIXELS(r - 1));
 GD.ColorRGB(0x806000);
 GD.Vertex2f(PIXELS(x), PIXELS(y));

 GD.ScissorXY(x - r, y - r);
 GD.ScissorSize(2 * r, (2 * r * fill) / 100);
 GD.ColorRGB(0x806000);
 GD.Vertex2f(PIXELS(x), PIXELS(y));

 GD.RestoreContext();

}

[bffonseca]

Thank you so much James! Works like a charm after a few tweaks!

For future reference, here's the version of the code that worked for me:

def cgauge(int x, int y, int r, int fill){
 GD.SaveContext();

 GD.Begin(POINTS);

 GD.Tag(0);



 GD.ColorRGB(GREY);

 GD.PointSize(16*r);

 GD.Vertex2f(x*16,y*16);



 GD.ColorRGB(YELLOW);

 GD.PointSize(16*(r-3));

 GD.Vertex2f(x*16,y*16);



 GD.ScissorXY(x - r, y - r);

 GD.ScissorSize(2 * r, (2 * r * (100-fill)) / 100);

 GD.ColorRGB(WHITE);

 GD.Vertex2f(16*(x), 16*(y));



 GD.RestoreContext();
}   

Being the GREY, YELLOW and WHITE all #define's with their respective hex color code.

[bffonseca]

Would it be possible to create a "wave" effect on this gauge? Since this is supposed to represent a liquid.

I'm guessing that it should be possible with the asin() function?

Is there any way of animating this wave?

[jamesbowman]

Sure, you can use the GD library's GD.rsin function - much smaller than using floating-point.

It's on p. 137 of the book:
excamera.com/files/gd2book_v0.pdf

So if you wave something like:


cgauge(x, y, r, level);

change it to:

int wave = GD.rsin(10, millis() * 60);
cgauge(x, y, r, constrain(level + wave, 0, 100));

The "millis() * 60" is the animation term, increase the factor to make the animation go faster.

(again I have not tried this, lmk how it works).