Peter Nyboer

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)

//detect where the mouse is hovering and if it's in a relevant zone, output some info about that zone.

    if(thebutton != thebuttonchange) outlet(0,thebutton)

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;
}

mouseover-zone-detection

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)

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 ;)

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

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 ;)

For the patch you posted (ie seperate objects) I'd use the Hover object (

https://cycling74.com/twiki/bin/view/Share/TimPlace).

 Not JS but thought I'd mention incase you hadn't come across it before.

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

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"...

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"...

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

> For the patch you posted (ie seperate objects) I'd use the Hover 

> JS but thought I'd mention incase you hadn't come across it before.

Note that hover is now standard in Max 5.

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