# Creating a Gauge Bar with percentage

Good day, I’ve been given an assignment to code a program that requires me to create 4 Leds that change to 2 different colors depending on which mouse button is pressed. If the right mouse button is pressed, the gauge bar is suppose to fill up per mouse press until 100%; this percentage must be shown below the gauge bar. If the left mouse button is pressed, the gauge bar is suppose to lower per mouse press until 0%.

I know im supposed to use two ‘rectangles’ with one being fractionally smaller than the other; the smaller one is meant to act as the animated “fill up” procedure but i seem to be struggling with the code for this. Please assist if possible

1 Like

Hey and welcome to the forum!

Okay, first you want a frame for the bar.

say something like

``````noFill();
rect(x,y, 400, 30);
``````

then something like

``````fill(255,0,0);
rect(x+3, y+3,
210, 30-6);
``````

Boom!

Now 210 is the current value of your percentage.

It’s between 0 and 400-6

Replace it with a variable that increases until it’s 400-6

2 Likes

Hello,

LEDs?
Is there a hardware element to this?

What research or progress have you made so far?
Point form in a list is is fine.
I do not need to see any code

`:)`

1 Like

There’s no hardware element, yet; for the time being it’s just coding.

By LEDs, I meant ellipse’s. Thus far I’ve been able to create the 4 ellipses as well as the gauge bar(rectangle). I’m yet to code the ellipses to change color per mouse press as well as the code for the rectangle to ‘fill up/down’ after each mouse press.
I’m currently attempting to code the rectangle using @Chrisir 's advice.

1 Like

Hello @KingKvn ,

There are lots of resources here:

I have found these functions and system variables useful to visualize and develop code:

• println()
• map()
• mouseX
• mouseY

Example:

``````void setup()
{
size(200, 200);
noFill();
}

void draw()
{
background(255);
float x = map(mouseX, 0, width, 0, 200);
float y = map(mouseY, 0, width, 0, 200);
line(0, 0, x, y);
line(0, 100, x, 100);
line(100, 0, 100, y);
rect(10, 10, x, y);
println (mouseX, mouseY);
}
``````

You should be looking at the references for each element of your code.

Take a look at the resources (tutorials, examples, references) at the Processing website:

`:)`

1 Like

Use a variable to track the value and one to adjust it (i.e. called increment).
Add increment to the value in `draw();`
Update the increment value in `mousePressed();`

``````int value, increment;

...

void mousePressed() {
if (mouseButton == LEFT) {
increment = 1;
} else if (mouseButton == RIGHT) {
increment = -1;
}
}``````
2 Likes

The percentage must stay inside range 0…100

Use map() command to map this value to
screen pixels (width of inner rectangle) which is 0…400-6