A little help with processing code

Let's Make Robots
1

alright I started with some sample code and it worked great -- I was able to left and right click on the square and send one of 2bytes via serial to my picaxe board. Here is the sample code:

import processing.serial.*;
Serial myPort;
void setup(){
// Click within the image and press
// the left and right mouse buttons to
// change the value of the rectangle
myPort = new Serial(this, "COM15", 9600);
}
void draw() {
if (mousePressed && (mouseButton == LEFT)) {
myPort.write(65);
delay(100);
} else if (mousePressed && (mouseButton == RIGHT)) {
myPort.write(70);

}
rect(25, 25, 50, 50);
}

Now i am trying to expand on this to 4 squares and sending 4 different bytes with a left click on each square. However, I simply can't figure out how the code connects the square that is drawn to the click that pertains to it. I would assume it has to do with what things are included in the { }'s but man, I am stumped. Any thoughts? Here is my feeble attempt at it:

 

 

 

import processing.serial.*;
Serial myPort;
void setup(){
size(600,600);
// Click within the image and press
// the left and right mouse buttons to
// change the value of the rectangle
myPort = new Serial(this, "COM15", 9600);
}
void draw() {
if (mousePressed && (mouseButton == LEFT)) {{
myPort.write(65);
delay(100);
}
rect(275, 200, 50, 50);
}

if (mousePressed && (mouseButton == LEFT)) {{
myPort.write(75);
delay(100);
}
rect(275, 400, 50, 50);
}

if (mousePressed && (mouseButton == LEFT)) {{
myPort.write(85);
delay(100);
}
rect(200, 275, 50, 50);
}


if (mousePressed && (mouseButton == LEFT)) {{
myPort.write(95);
delay(100);
}
rect(400, 275, 50, 50);
}

https://www.youtube.com/watch?v=Lq7TnLetygw
2

Ugly code sample

This example had a HUGE disadvantage. You need to define each rectangle AND then you must also put the effective coordinates of each rectangle in a separate if/then condition. Blech.

void setup(){
size(600,600);
}
void draw() {
rect(275, 200, 50, 50); // rect A
rect(275, 400, 50, 50); // rect B
rect(200, 275, 50, 50); // rect C
rect(400, 275, 50, 50); // rect um

if (mousePressed && (mouseButton == LEFT)) {
{
println(mouseX + " " + mouseY);
if (mouseX >= 275 && mouseX <= 325 && mouseY >= 200 && mouseY <= 250) {
println ("you clicked inside rect A");
}
delay(100);
}
}
}


 

3

This bit of code would seem

This bit of code would seem to do the trick and keeps things pretty clean.

You define the boxes prior to the draw function. I could see this working perfectly with some modification

http://www.learningprocessing.com/examples/chapter-5/example-5-5/

4

one thing I noticed

with the original set-up the square is irrelavent. You can click anywhere on the background. Please disregard all the squares stuff…

New question:

could you point me in the direction of code I would need to create “objects”? to “click on”? I added question marks because I don’t know the lingo.

 

5

Good Find, yo.
I knew there had to be a “button code”! I think you have found it, me matey! New “vitural control panel” here I come!

6

A square would be considered

A square would be considered an object once you defined it and ran the app.

This might be what you’re looking for, but it starts getting a bit complex…

note the link…you’re getting into chapter 22 territory before going through 1-21…

http://www.learningprocessing.com/examples/chapter-22/example-22-1/

 

7

I modified the code to use a

I modified the code to use a conditional to reduce the amount of coded needed…works great…just replace the println with what you want to do. myport.write command and such

 

void mousePressed() {
if (mouseX > x && mouseX < x+w && mouseY > y && mouseY < y+h) {
clicked = (mouseButton == LEFT) ? 85:95;
println(clicked);
}
}

EDIT: As a side note, this does not check for a center button click. it’s left otherwise right or center button would do the same thing.

Full code

//LOTS OF SQUARES!!!
boolean button = false;
int clicked = 0;
int x1 = 20;
int y1 = 20;
int w1 = 50;
int h1 = 35;

int x2 = 80;
int y2 = 20;
int w2 = 50;
int h2 = 35;


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

void draw() {
if (button) {
background(255);
stroke(0);
} else {
background(0);
stroke(255);
}

fill(175);
rect(x1,y1,w1,h1);
rect(x2,y2,w2,h2);
}

// When the mouse is pressed, the state of the button is toggled.
// Try moving this code to draw() like in the rollover example. What goes wrong?
void mousePressed() {
if (mouseX > x1 && mouseX < x1+w1 && mouseY > y1 && mouseY < y1+h1) {
clicked = (mouseButton == LEFT) ? 85:95;
println(clicked);
}
if (mouseX > x2 && mouseX < x2+w2 && mouseY > y2 && mouseY < y2+h2) {
clicked = (mouseButton == LEFT) ? 65:55;
println(clicked);
}
}

8

what are the extra numbers?

what are these extra numbers at the end? (in bold)

clicked = (mouseButton == LEFT) ? 65:55;

 

I’m misunderstanding the “clicked” part as well

9

if true, set clicked=65 if

if true, set clicked=65 if false clicked=55

it’s like a shortend version of if/else…

http://processing.org/reference/conditional.html

10

axe code

This is awesome Chris! You keep expanding everyone’s understanding of this stuff.

2 things (maybe already answered somewhere, but this topic is sort of all-over-the-place):

1. can we get a sample of the axe code to receive the serial commands?

2. you’re using the rev-ed usb-to-serial download cable?

11

Oh, now I see it

you defined clicked as an int --I didn’t see it at first

 

12

Gui library

http://gui4processing.lagers.org.uk/distribution/web/index.html

 

Theres a link to a gui library, is that what you are looking for?

If its not or you are looking for how to write your own you would need to place squares on the screen using the coordinates to place them, and then write something to detect when the mouse is clicked over it.

 

 

http://processing.org/reference/libraries/#interface

 

 

Heres a list of other libraries that you can use.

 

 

http://processing.org/reference/

 

And here a list of functions for processing incase you want to write your own or expand on the others.

13

Good call on these!
Good call on these!

14

Pretty simple actually
The picaxe is simply receiving bytes via serial. I could use serin but I decided just to use the regular ol’ sync cable (seeing that it is already plugged in and all) and used serrxd instead. The command is serrxd b1 --that’s it. Now you have a variable (b1) that you can use for anything you want. And yes, I am using the sync cable and a USB/serial adapter.

15

Pretty simple actually
The picaxe is simply receiving bytes via serial. I could use serin but I decided just to use the regular ol’ sync cable (seeing that it is already plugged in and all) and used serrxd instead. The command is serrxd b1 --that’s it. Now you have a variable (b1) that you can use for anything you want. And yes, I am using the sync cable and a USB/serial adapter.

16

Pretty simple actually
The picaxe is simply receiving bytes via serial. I could use serin but I decided just to use the regular ol’ sync cable (seeing that it is already plugged in and all) and used serrxd instead. The command is serrxd b1 --that’s it. Now you have a variable (b1) that you can use for anything you want. And yes, I am using the sync cable and a USB/serial adapter.

17

Awesome, Edgee!!!
What an amazing bunch of data!!! Thank you so much for this, I am already going through some of the buttons and sliders for my “control panel”. Awesome!!!

18

cool
cool

19

sweet
Calculon likes

20

cool

deja vu