mouseover zone detection


    Apr 15 2008 | 9:11 pm
    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*/

    • Apr 17 2008 | 9:04 am
      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
    • Apr 25 2008 | 4:32 pm
      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
    • Apr 25 2008 | 4:43 pm
      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
    • Apr 25 2008 | 9:09 pm
      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