Creating a Gauge Bar with percentage

Processing Coding Questions
1

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 :pray:

1 Like
2

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
3

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
4

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
5

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:

Another helpful resource:

:)

1 Like
6

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
7

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