mouseover zone detection

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)

/* 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*/

Max Patch

Copy patch and select New From Clipboard in Max.

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

simon adcock

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.

Simon

Peter Nyboer

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

Emmanuel Jourdan

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

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

Note that hover is now standard in Max 5.