Tuio Cursor to toggle button problem

lunchboxav

Tuio Cursor to toggle button problem

in Contributed Library Questions • 1 year ago

Hi Everyone,

I'm a bit ashamed that I have to ask this question, because this seems to be an easy work, however I've been having some issues with using TUIO cursor to toggle on/off button in Processing. I modified the ImageButton example to come up with grid of images as button, controlled by tuio cursor. I just want the tuio cursor to toggle the grid of buttons according to its position. Everything works, except for the fact that sometimes, the buttons just refused to react to the input given by the tuio cursor. I'm suspecting a simple logic fallacy here, but here's the code:

import TUIO.*;
TuioProcessing tuioClient;
ImageButtons[][] buttons = new ImageButtons[20][20];
void setup()
{
size(400, 600);
background(102, 102, 102);
// Define and create image button
PImage b = loadImage("butt-off-resize.jpg");
PImage d = loadImage("butt-on-resize.jpg");
int x = width/2 - b.width/2;
int y = height/2 - b.height/2;
int w = b.width;
int h = b.height;
for (int i = 0; i <20; i++) {
for (int j = 0; j <20; j++) {
buttons[i][j] = new ImageButtons (i*w, j*h, w, h, b, d);
}
}
tuioClient = new TuioProcessing(this);
}
void draw()
{
for (int i = 0; i < buttons.length; i++) {
for (int j = 0; j <buttons.length; j++) {
buttons[i][j].update();
buttons[i][j].display();
}
}
}
// called when a cursor is added to the scene
void addTuioCursor(TuioCursor tcur) {
println("add cursor "+tcur.getCursorID()+" ("+tcur.getSessionID()+ ") " +tcur.getX()+" "+tcur.getY());
}
// called when a cursor is moved
void updateTuioCursor (TuioCursor tcur) {
println("update cursor "+tcur.getCursorID()+" ("+tcur.getSessionID()+ ") " +tcur.getX()+" "+tcur.getY()
+" "+tcur.getMotionSpeed()+" "+tcur.getMotionAccel());
}
// called when a cursor is removed from the scene
void removeTuioCursor(TuioCursor tcur) {
println("remove cursor "+tcur.getCursorID());
}
// called after each message bundle
// representing the end of an image frame
void refresh(TuioTime bundleTime) {
redraw();
}
class Button
{
int x, y;
int w, h;
color basecolor, highlightcolor;
color currentcolor;
boolean over = false;
boolean pressed = false;
float tuioX, tuioY;
boolean state;
void tuioInput() {
Vector tuioCursorList = tuioClient.getTuioCursors();
for (int i=0; i<tuioCursorList.size(); i++) {
TuioCursor tcur = (TuioCursor)tuioCursorList.elementAt(i);
tuioX = tcur.getScreenX(width);
tuioY = tcur.getScreenY(height);
}
}
boolean overRect(int x, int y, int width, int height) {
if (tuioX >= x && tuioX <= x+width &&
tuioY >= y && tuioY <= y+height) {
return true;
}
else {
return false;
}
}
}
class ImageButtons extends Button
{
PImage base;
PImage down;
PImage currentimage;
ImageButtons(int ix, int iy, int iw, int ih, PImage ibase, PImage idown)
{
x = ix;
y = iy;
w = iw;
h = ih;
base = ibase;
down = idown;
currentimage = base;
}
void update()
{
tuioInput();
over();
if (over) {
state = !state;
}
else if (state == false) {
currentimage = base;
}
else if (state == true) {
currentimage = down;
}
}
void over()
{
if ( overRect(x, y, w, h) ) {
over = true;
}
else {
over = false;
}
}
void display()
{
image(currentimage, x, y);
}
}

Note: I didn't do anything to the callback method provided by the tuio library.

I hope anyone can lend me some help, I've been stuck here for a while :|

Thank you! :D

Replies(4)

lunchboxav

Re: Tuio Cursor to toggle button problem

1 year ago

okay, so I figured that the problem is not with the tuio, rather, there's a bit of a problem with the algorithm that I used. I tested it using just mouse input and discovered that even when I hover above the image, the image won't react. Here's the code:

/**
* Image button.
*
* Loading images and using them to create a button.
*/
ImageButtons[][] buttons = new ImageButtons[4][5];
void setup()
{
size(400, 400);
background(102, 102, 102);
// Define and create image button
PImage b = loadImage("butt-off-resize.jpg");
PImage r = loadImage("roll.gif");
PImage d = loadImage("butt-on-resize.jpg");
int x = width/2 - b.width/2;
int y = height/2 - b.height/2;
int w = b.width;
int h = b.height;
for (int i = 0; i < 4; i++) {
for (int j = 0; j < 5; j++) {
buttons[i][j] = new ImageButtons (i*w, j*h, w, h, b, r, d);
}
}
//button = new ImageButtons(x, y, w, h, b, r, d);
}
void draw()
{
for (int i = 0; i < buttons.length; i++) {
for (int j = 0; j <buttons.length; j++) {
buttons[i][j].update();
buttons[i][j].display();
}
}
}
class Button
{
int x, y;
int w, h;
color basecolor, highlightcolor;
color currentcolor;
boolean over = false;
boolean pressed = false;
boolean state = false;
void pressed() {
if (over && mousePressed) {
pressed = true;
}
else {
pressed = false;
}
}
boolean overRect(int x, int y, int width, int height) {
if (mouseX >= x && mouseX <= x+width &&
mouseY >= y && mouseY <= y+height) {
return true;
}
else {
return false;
}
}
}
class ImageButtons extends Button
{
PImage base;
PImage roll;
PImage down;
PImage currentimage;
ImageButtons(int ix, int iy, int iw, int ih, PImage ibase, PImage iroll, PImage idown)
{
x = ix;
y = iy;
w = iw;
h = ih;
base = ibase;
roll = iroll;
down = idown;
currentimage = base;
}
void update()
{
over();
pressed();
if (over) {
state = !state;
}
else if (state == false) {
currentimage = base;
}
else if (state == true) {
currentimage = down;
}
}
void over()
{
if ( overRect(x, y, w, h) ) {
over = true;
}
else {
over = false;
}
}
void display()
{
image(currentimage, x, y);
}
}

Chrisir

Re: Tuio Cursor to toggle button problem

1 year ago

I think you're missing a function mousePressed() ( see reference) where you
double for loop through your array and check whether a button is pressed() - you have a function of this name in your class - use it.

You then have to take an action according to your pressed button.

Either double switch - complicate - or
pass the i and j of the pressed button to a function actionFunction() that can then do something with this pressed image at position i,,j.

In theory something like (not tested)

// after function draw(), so line 42 ;-)
void mousePressed () {
for (int i = 0; i < 4; i++) { // double loop imageButtons
for (int j = 0; j < 5; j++) {
buttons[i][j].pressed(); // update objects var pressed
if (buttons[i][j].pressed) {
actionFunction(i,,j) ; // do something with the image at pos i, j
}
}
}
} // func

Also: error here in void update() I think

if (over) {
state = !state;
}
else if (state == false) { // delete this else!!! Keep the rest of the line

see for example
http://www.openprocessing.org/visuals/?visualID=48351

it has a similar class, look at mouseReleased () in tab / file Inputs.pde here, it calls func

CheckButtonsOfArray()

Greetings, Chrisir

lunchboxav

Re: Tuio Cursor to toggle button problem

1 year ago

yes! thank you for answering Chrisir :D I realized that I need that mousePressed function after tinkering with the code for a while. It's just I don't know how to implement mousePressed using Tuio cursor. Any idea?

Chrisir

Re: Tuio Cursor to toggle button problem

1 year ago

I have no idea...

what are the tuio cursors?

Are those your fingertips?

Then maybe use tcur.getX() and tcur.getY() instead of mouseX and mouseY?

Top Reply