making changes stay

Programming Questions

s_3matteo

in Programming Questions • 7 months ago

Hi All!! I have been trying to create an interactive menu: every button should change some settings in the webcam. The only problem is that the changes remain only as long as the mouse is pressed.

What should I do??
Thanks!!!

There is the code...

//--------- DECLARING VARIALBLES

// DECLARING VARIABLES FOR IMAGES, BUTTONS AND SPECIFICS
import processing.video.*;
int TopButtonY, BottomButtonY, Button1x, Button2x, Button3x, Button4x, Button5x, Button6x, Button7x, Button8x, Button9x;
Capture cam;

void setup() {
size(640, 536, P2D);

cam = new Capture(this,width, height);
    cam.start();

     // INIZIALIZING COORDINATES OF BUTTONS
TopButtonY=(480);
BottomButtonY=(536);
Button1x=0;
Button2x=8;
Button3x=158;
Button4x=166;
Button5x=316;
Button6x=324;
Button7x=474;
Button8x=482;
Button9x=632;

}

//--------- DRAWING BUTTONS and SHOWING // ADD TEXT TO BUTTONS

void draw() {

if (cam.available() == true) {
cam.read ();
image(cam,0,0);

//TopButtonY
stroke(150);
fill(150);
rect(0,480,640,10);

//Button1x
stroke(150);
fill(150);
rect(0,480+8,8,40);

//Button2x
stroke(0,0,255);
fill(0,0,255);
rect(8,480+8,150,40);

//Button3x
stroke(150);
fill(150);
rect(158,480+8,8,40);

//Button4x
stroke(0,0,255);
fill(0,0,255);
rect(166,480+8,150,40);

//Button5x
stroke(150);
fill(150);
rect(316,480+8,8,40);

//Button6x
stroke(0,0,255);
fill(0,0,255);
rect(324,480+8,150,40);

//Button7x
stroke(150);
fill(150);
rect(474,480+10,8,40);

//Button8x
stroke(0,0,255);
fill(0,0,255);
rect(482,480+8,150,40);

//Button9x
stroke(150);
fill(150);
rect(632,480+8,8,40);

//BottomButtonY
stroke(150);
fill(150);
rect(0,480+48,640,10);

    if (cam.available() == true) {
cam.read ();
cam.loadPixels();
loadPixels();
    }
}
}

// -------   BUTTONS INTERACTIONS WITH MOUSE

// BUTTON 1
//CHANGE PIXELS COLOUR TO GREEN IF BUTTON 1 PRESSED
void mousePressed() {


    if( (mouseY>TopButtonY) && (mouseY<BottomButtonY)) {
//SE ALL'INTERNO DEL BOTTONE 2X
      if((mouseX>Button2x)&&(mouseX<Button3x)) {
        // TURN BUTTON GREEN WHEN PRESSED
        stroke(0,255,0);
        fill(0,255,0);
        rect(8,480+8,150,40);
       // I WILL CHANGE CAMERA SETTINGS HERE

      }
     }


//BUTTON 2
//CHANGE PIXELS COLOUR TO GREEN IF BUTTON 2 PRESSED

if(mouseY>TopButtonY) {
    if((mouseX>Button4x)&(mouseX<Button5x)) {
      // TURN BUTTON GREEN WHEN PRESSED
        stroke(0,255,0);
        fill(0,255,0);
        rect(166,480+8,150,40);
        // I WILL CHANGE CAMERA SETTINGS HERE
    }
   }

//BUTTON 3

   if(mouseY>TopButtonY) {
    if((mouseX>Button6x)&(mouseX<Button7x)) {
      // TURN BUTTON GREEN WHEN PRESSED
        stroke(0,255,0);
        fill(0,255,0);
        rect(324,480+8,150,40);
         // I WILL CHANGE CAMERA SETTINGS HERE
    }
   }


// BUTTON 4

   if(mouseY>TopButtonY) {
    if((mouseX>Button8x)&(mouseX<Button9x)) {
      // TURN BUTTON GREEN WHEN PRESSED
        stroke(0,255,0);
        fill(0,255,0);
        rect(482,480+8,150,40);
         // I WILL CHANGE CAMERA SETTINGS HERE
     }
    }
}

Replies(6)

tfguy44

Re: making changes stay

7 months ago

Freak out and panic!!!
No, I'm just kidding. Give me 10 minutes to tidy up your code, ok?

tfguy44

Re: making changes stay

7 months ago

// DEFINE WHAT A BUTTON IS
class Button {
int x, y, w, h;
color c1, c2;
boolean on;
Button(int _x, int _y, int _w, int _h, color _c1, color _c2, boolean _on) {
x=_x;
y=_y;
w=_w;
h=_h;
c1=_c1;
c2=_c2;
on=_on;
}
void draw() {
noStroke();
fill(on?c1:c2);
rect(x, y, w, h);
}
boolean mouseOn(int mx, int my) {
return( mx>x && mx<x+w && my>y && my<y+h );
}
void toggle() {
on=!on;
}
}
// VARIABLES FOR CAM
import processing.video.*;
Capture cam;
// VARIABLES FOR BUTTONS
Button[] buttons = new Button[4];
int[] buttonXs = {
8, 166, 324, 482
};
void setup() {
size(640, 536, P2D);
// START CAM
cam = new Capture(this, width, height);
cam.start();
// CREATE BUTTONS
for ( int i = 0 ; i < buttons.length; i++ ) {
buttons[i] = new Button( buttonXs[i], 484, 150, 48, color(0, 255, 0), color(0, 0, 255), false );
}
}
void draw() {
// RENDER CAM IMAGE
if (cam.available() == true) {
cam.read ();
image(cam, 0, 0);
}
// BUTTON BACKGROUND
noStroke();
fill(150);
rect(0, 480, width, height-480);
// DRAW BUTTONS
for ( int i = 0 ; i < buttons.length; i++ ) {
buttons[i].draw();
}
}
void mousePressed() {
// CHECK FOR BUTTON PRESSES
for ( int i = 0 ; i < buttons.length; i++ ) {
if ( buttons[i].mouseOn(mouseX, mouseY) ) {
buttons[i].toggle();
}
}
}

The buttons don't do anything yet, of course, but you can check in draw() if they are on or not by looking at the variable buttons[0].on, buttons[1].on, buttons[2].on, and buttons[3].on.

PhiLho

Re: making changes stay

7 months ago

Alternatively, just have an int variable defining which button is chosen.
When clicking on a button, set this variable according to the clicked one.
And do the drawing operation according to the value of this variable, in draw().
The switch instruction (see Reference) is of interest, here.

s_3matteo

Re: Re: making changes stay

7 months ago

Thank you! this sounds a little bit easier to apply to my code, as It allows me to maintain its basic structure!
I will try and apply that and see how it goes!

thank you very much to you both for your fantastic help!

Matteo

s_3matteo

Re: making changes stay

7 months ago

I am sorry, But I have still been unable to solve the problem. I have tried loads of different ways but the code still does not work...! Could you please explain me better how to set the variables int he way you were saying in the previous post??

Thank you a lot!!!

//--------- DECLARING VARIALBLES

// DECLARING VARIABLES FOR IMAGES, BUTTONS AND SPECIFICS
import processing.video.*;

//------BUTTON 2 DATA:
color black = color(0,0,0);
color white = color(255,255,255);
int numPixels;
float pixelBrightness;
int threshold;
//------END BUTTON 2 DATA

int TopButtonY, BottomButtonY, Button1x, Button2x, Button3x, Button4x, Button5x, Button6x, Button7x, Button8x, Button9x;
Capture cam;

void setup() {
size(640, 536, P2D);

cam = new Capture(this,width, height);
    cam.start();

     // INIZIALIZING COORDINATES OF BUTTONS
TopButtonY=(480);
BottomButtonY=(536);
Button1x=0;
Button2x=8;
Button3x=158;
Button4x=166;
Button5x=316;
Button6x=324;
Button7x=474;
Button8x=482;
Button9x=632;

}

//--------- DRAWING BUTTONS and SHOWING // ADD TEXT TO BUTTONS

void draw() {


if (cam.available() == true) {
cam.read ();
image(cam,0,0);

//TopButtonY
stroke(150);
fill(150);
rect(0,480,640,10);

//Button1x
stroke(150);
fill(150);
rect(0,480+8,8,40);

//Button2x
stroke(0,0,255);
fill(0,0,255);
rect(8,480+8,150,40);

//Button3x
stroke(150);
fill(150);
rect(158,480+8,8,40);

//Button4x
stroke(0,0,255);
fill(0,0,255);
rect(166,480+8,150,40);

//Button5x
stroke(150);
fill(150);
rect(316,480+8,8,40);

//Button6x
stroke(0,0,255);
fill(0,0,255);
rect(324,480+8,150,40);

//Button7x
stroke(150);
fill(150);
rect(474,480+10,8,40);

//Button8x
stroke(0,0,255);
fill(0,0,255);
rect(482,480+8,150,40);

//Button9x
stroke(150);
fill(150);
rect(632,480+8,8,40);

//BottomButtonY
stroke(150);
fill(150);
rect(0,480+48,640,10);

if (cam.available() == true) {
cam.read ();
cam.loadPixels();
loadPixels();
   }
}
}

// -------   BUTTONS INTERACTIONS WITH MOUSE

// BUTTON 1
//CHANGE PIXELS COLOUR TO GREEN IF BUTTON 1 PRESSED
void mousePressed() {


    if( (mouseY>TopButtonY) && (mouseY<BottomButtonY)) {
//SE ALL'INTERNO DEL BOTTONE 2X
      if((mouseX>Button2x)&&(mouseX<Button3x)) {
        // TURN BUTTON GREEN WHEN PRESSED
        stroke(0,255,0);
        fill(0,255,0);
        rect(8,480+8,150,40);
       // SELEZIONO TUTTI I PIXEL DELLA WEB, PER POI POTERLI MODIFICARE      //READ CAMERA AND CHANGE PIXELS TO WHITE OR BLACK ACCORDING TO THRESHOLD VALUE STATED ABOVE
         for (int i = 0; i < numPixels; i++) {
          pixelBrightness = brightness(cam.pixels[i]);
            if (pixelBrightness > threshold) { //if pixel brighter than threshold
            pixels[i] = white;                     // make it white
            }
            else { //otherwise
            pixels[i] = black; //make it clack
            }
          }
           updatePixels();
      }
     }

//BUTTON 2
//AIM = USE WHITE SQUARE AROUND MOUSE TO DELETE IMAGE

if(mouseY>TopButtonY) {
    if((mouseX>Button4x)&&(mouseX<Button5x)) {
      // TURN BUTTON GREEN WHEN PRESSED
        stroke(0,255,0);
        fill(0,255,0);
        rect(166,480+8,150,40);
        // DELETE WEB WITH MOUSE
        stroke(255);
        fill(255);
        rectMode(CENTER);
        rect(mouseX,mouseY,50,50);
     }
   }

//BUTTON 3

   if(mouseY>TopButtonY) {
    if((mouseX>Button6x)&(mouseX<Button7x)) {
      // TURN BUTTON GREEN WHEN PRESSED
        stroke(0,255,0);
        fill(0,255,0);
        rect(324,480+8,150,40);
         // I WILL CHANGE CAMERA SETTINGS HERE

    }
    }



// BUTTON 4

   if(mouseY>TopButtonY) {
    if((mouseX>Button8x)&(mouseX<Button9x)) {
      // TURN BUTTON GREEN WHEN PRESSED
        stroke(0,255,0);
        fill(0,255,0);
        rect(482,480+8,150,40);
         // I WILL CHANGE CAMERA SETTINGS HERE
       }
     }
}

PhiLho

Re: making changes stay

7 months ago

Pet peeve: I suggest to have a look at the article From several variables to arrays

I don't see much difference between your latest code and the previous one...

The base logic is looking like:

int buttonId;

void mousePressed()
{
if (mouse inside rect 1)
{
    buttonId = 1;
}
else if (mouse inside rect 2)
{
    buttonId = 2;
}
else // etc. Simpler with arrays, really!
}

void draw()
{
// Some stuff

// Button handling
switch (buttonId)
{
    case 1:
      // Do drawing to do when first button is hit
      break;
    case 2:
      // Do drawing to do when second button is hit
      break;
   // Etc.
   }
}

So, when the user clicks on a button, the id of the button is memorized, and draw() will be aware of which treatment to apply, that will persists until the user clicks on another button.

Top Reply