We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.
Index › Programming Questions & Help › Syntax Questions › Thumbnail buttons.
‹ Previous Topic | Next Topic ›
Page Index Toggle Pages: 1
Thumbnail buttons. (Read 1000 times)
Rootle
Thumbnail buttons.
Feb 11th, 2010, 9:37am  
I have been looking for a way to create links from images, and the example button code (here: processing.org/learning/topics/imagebutton.html) pretty much does what I'm after, but I was wondering if it is possible to make lots of buttons like this to place an 'invisible button' over some thumbnails using a for() loop..? If it is I'll give it a go, but im not very good at understanding how classes work yet so wasnt sure if its do-able. Thank you.
Back to top
 
 
subpixel
Re: Thumbnail buttons.
Reply #1 - Feb 11th, 2010, 11:35am  
If you're thinking about a regular grid of thumbnails (eg 6x4 grid of 24 thumbnails), rather than create a "button" concept for each item, just work out which grid space the mouse is in when it is clicked.

Demo: spxlSimpleSelector01 on OpenProcessing.org

Basic idea:

Code:
final int ROWS = 4;
final int COLS = 6;
final int ITEMS = ROWS * COLS;

int itemW, itemH; // item width, height

void setup()
{
  size(600, 400, JAVA2D);
  itemW = width / COLS;
  itemH = height / ROWS;
}

// draw() should fill window with 24 "thumbnails" in grid
// and possibly provide other realtime feedback to user

void mouseClicked()
{
  int col = mouseX / itemW;
  int row = mouseY / itemH;
  selectedItem = col + row * COLS;
  // do something with selectedItem
}


You might not want to use the whole sketch window for your grid, but hopefully you can work out for yourself how to make the "selection area" smaller than the whole output.
Back to top
 
Processing: subpixels.com, OpenProcessing.org | VJ portfolio: SPXL.TV
WWW  
Rootle
Re: Thumbnail buttons.
Reply #2 - Feb 12th, 2010, 1:59am  
Wicked that sounds perfect, I'll get onto that today. Cheers!
Back to top
 
 
Rootle
Re: Thumbnail buttons.
Reply #3 - Feb 12th, 2010, 5:35am  
Ok, the example looks good, but my images have gaps inbetween them, and can be moved 'closer/further from the screen' as trhe user zooms in and out. Do you suppose I could adapt this to take a translation into account? - im not sure how this affects things using mouseX/Y..?
Back to top
 
 
subpixel
Re: Thumbnail buttons.
Reply #4 - Feb 13th, 2010, 2:08am  
You will need to work out the coordinates of your buttons at some stage - either in advance (and remember each button location) or only at the time of clicking.

I suggest you consider the method I implemented as a first step. Even if your thumbnails have gaps between them, they are still in a grid, aren't they? Work out which grid space first, then do a more detailed check to see if it is on the "thumbnail" within that grid space.

-spxl
Back to top
 
Processing: subpixels.com, OpenProcessing.org | VJ portfolio: SPXL.TV
WWW  
Rootle
Re: Thumbnail buttons.
Reply #5 - Feb 14th, 2010, 5:01am  
Yes, even if i cannot get it working in 3D im sure i'll find a way around it. Does translating up/down the z-axis actually just affect the width&height of objects in a linear way or is it more complex than that? R.
Back to top
 
 
subpixel
Re: Thumbnail buttons.
Reply #6 - Feb 14th, 2010, 12:43pm  
Projection matrix, transformation matrix/matrices... I'm sure it isn't straightforward.

Have a look at screenX() and screenY() methods, which return screen (mouse!) coordinates for 3D points.

-spxl
Back to top
 
Processing: subpixels.com, OpenProcessing.org | VJ portfolio: SPXL.TV
WWW  
Page Index Toggle Pages: 1
‹ Previous Topic | Next Topic ›