mouseover zone detection

Apr 15, 2008 at 9:11pm

mouseover zone detection

Below is a patch and JS that does mouseover zone detection. If you are over a certain region, it will output some info. I’m wondering if there’s a more elegant way to do this; I”m using a lot of “ifs” to test the coordinates, and it seems a pretty unweildly way to go. Is there a clever way of doing this? (the zones are irregular)

/* BEGIN JAVASCRIPT buttongrid.js */
//detect where the mouse is hovering and if it’s in a relevant zone, output some info about that zone.

autowatch = 1;
var Btn0 = [ 0 , 0 , 48 , 48 ] ;
var Btn1 = [ 80 ,41 , 113 , 74 ] ;
var Btn2 = [ 98 ,97 , 177 ,176 ] ;
var Btn3 = [ 162 , 8 , 189 , 35 ] ;
var Btn4 = [ 207 ,40 , 273 , 106 ] ;
var Btn5 = [ 303 ,110 , 326 , 133 ] ;
var thebutton = -1;
var thebuttonchange = 0;
function mouse(x,y){
if(x>Btn0[0] && xBtn0[1] && y
if(x>Btn1[0] && xBtn1[1] && y
if(x>Btn2[0] && xBtn2[1] && y
if(x>Btn3[0] && xBtn3[1] && y
if(x>Btn4[0] && xBtn4[1] && y
if(x>Btn5[0] && xBtn5[1] && y
//etc.
if(thebutton != thebuttonchange) outlet(0,thebutton)
thebuttonchange = thebutton;
}

/*END JAVASCRIPT*/

#P window setfont “Sans Serif” 10.;
#P window linecount 2;
#P comment 130 381 259 196618 patch and js by Peter Nyboer pnyboer-at-slambassador-dot-com;
#P window setfont “Sans Serif” 9.;
#P window linecount 3;
#P comment 67 313 259 196617 *true , there’s ways of getting button coordinates and sizes with scripting , but my question is a more general nature about mouseover zones;
#P window setfont “Sans Serif” 10.;
#P window linecount 5;
#P comment 40 236 259 196618 It seems there should be a more clever way to do these zones in the javascript. Look inside , and there’s a bunch of “if” statements testing for each zone. It seems like I’m using brute force – is there a more elegant way this type of thing is done?;
#P window setfont “Sans Serif” 9.;
#P window linecount 1;
#P newex 393 40 48 196617 loadbang;
#P message 430 63 42 196617 mode 2;
#P newex 393 119 20 196617 t b;
#P newex 393 61 33 196617 t poll;
#P newex 393 82 66 196617 mousestate;
#P button 303 110 23 0;
#P button 207 40 66 0;
#P button 162 8 27 0;
#P button 98 97 79 0;
#P button 80 41 33 0;
#P button 0 0 48 0;
#P newex 393 141 79 196617 pack mouse 0 0;
#P window setfont “Sans Serif” 18.;
#P message 394 208 169 196626 -1;
#P window setfont “Sans Serif” 9.;
#P newex 393 187 62 196617 prepend set;
#P newex 393 163 80 196617 js buttongrid.js;
#P comment 75 217 199 196617 mouse over a button to change the label.;
#P connect 11 2 4 2;
#P connect 15 0 12 0;
#P connect 15 0 14 0;
#P connect 11 1 13 0;
#P connect 11 1 4 1;
#P hidden connect 2 0 3 0;
#P connect 1 0 2 0;
#P connect 4 0 1 0;
#P connect 13 0 4 0;
#P connect 12 0 11 0;
#P connect 14 0 11 0;
#P window clipboard copycount 19;

#36940
Apr 17, 2008 at 9:04am

create an image file in an editor and set the size to the size of your patch window

choose different RGB values for the different regions (a grey scale image also works)

read the file into an image object

use the getpixel method to read the RGB values of the pixels that correspond to the mouse position

use this value to choose between different infos

be careful of different compressions of image formats. Sometimes RGB values are not exactly what they seem

If you have jitter you can do it without java script using jitter matrix

The main problem is that you must be very careful with the window coordinates, they must always correspond to the image coordinates!!! which means that you must be careful with scroll bars. It is best if the origin of the window is fixed…
On the other hand you can have arbitrary shapes for the regions, you can edit them in any image editor superimposing the patcher window and visually define regions, you can add or delete regions easily,… you can get rid of the ifs and replace them with a switch structure ;)

I hope this helps
george

#127189
Apr 25, 2008 at 4:32pm

For the patch you posted (ie seperate objects) I’d use the Hover object (http://www.cycling74.com/twiki/bin/view/Share/TimPlace). Not JS but thought I’d mention incase you hadn’t come across it before.

Simon

#127190
Apr 25, 2008 at 4:43pm

hmmm….this color mapping idea is intriguing…I’ll look into that, thanks for that idea – very clever!
The hover object is good for this example…but I think I’ll need something more “embedded”…

Thanks for the suggestions!

Peter

#127191
Apr 25, 2008 at 9:09pm

On 25 avr. 08, at 18:32, simon adcock wrote:

> For the patch you posted (ie seperate objects) I’d use the Hover
> object (http://www.cycling74.com/twiki/bin/view/Share/TimPlace). Not
> JS but thought I’d mention incase you hadn’t come across it before.

Note that hover is now standard in Max 5.

ej

#127192

You must be logged in to reply to this topic.