Forums > MaxMSP

Rollover UI objects

December 10, 2006 | 12:53 am

After the previous posts about draggable UI objects I built a simple patch for tracking the mouse position and being able to eaily set bounds for a rollover action. This could be used for highlighting objects if desired. Pretty much an extra, not-entirely-necessary feature, though it could be useful for help comments in a tutorial, or possibly to display information about a particular UI object (for example, the settings within a bpatcher, etc.)

With some more effort all the bounding sizes for all objects on the screen could be saved. Then rollovers would be easily trackable (using a cascading series of if statements to determine whether the mouse is within a specific bounding rectangle). One could have panels behind objects that highlight when rolled over, or some other method of showing the rollover (like changing colors of objects).

Combining this with draggable objects would allow a highly customizeable UI that responds to mouse activity.

Wondering if anyone else has built a similar system–I’d like to see what’s out there!

–CJ

———————————–

max v2;
#N vpatcher 15 55 922 680;
#P window setfont "Sans Serif" 14.;
#P window linecount 7;
#P comment 611 423 175 9109518 When using objects with the mouse you will get some inconsistent results (like dragging up and down with the fader or number boxes) as mousestate tries to track the motion.;
#P window linecount 3;
#P comment 336 229 175 9109518 Try setting new coordinates for the toggle using keys n and m;
#P toggle 251 224 79 0;
#P window setfont "Sans Serif" 12.;
#P window linecount 1;
#P message 90 245 42 9109516 nopoll;
#P message 52 246 28 9109516 poll;
#P window setfont "Sans Serif" 14.;
#P window linecount 4;
#P comment 538 293 258 9109518 Once a rollover area has been set , you can store a preset for the coordinates ; the four presets here correspond to the four objects at top;
#P window setfont "Sans Serif" 12.;
#P window linecount 1;
#P newex 56 216 60 9109516 loadbang;
#P user kslider 37 45 54 0 36 24 31 12 0 128 128 128 128 128 128 255 255 255 0 0 0 0 0 0;
#P message 144 339 42 9109516 set $1;
#P number 417 377 35 12 0 0 0 139 0 0 0 221 221 221 222 222 222 0 0 0;
#P number 364 377 35 12 0 0 0 139 0 0 0 221 221 221 222 222 222 0 0 0;
#P button 374 329 28 0;
#P number 206 380 35 12 0 0 0 139 0 0 0 221 221 221 222 222 222 0 0 0;
#P button 316 330 28 0;
#P message 72 348 42 9109516 set $1;
#P number 153 380 35 12 0 0 0 139 0 0 0 221 221 221 222 222 222 0 0 0;
#P newex 430 330 73 9109516 sel 110 109;
#P newex 455 299 40 9109516 key;
#P window setfont "Sans Serif" 36.;
#P number 490 57 101 36 0 0 0 139 0 0 0 221 221 221 222 222 222 0 0 0;
#N vpreset 4;
#X append 1 1 16 412 419 number int 213 ; 15 413 365 number int 162 ; 14 410 207 number int 223 ; 13 411 153 number int 57 ;;
#X append 2 1 16 412 419 number int 264 ; 15 413 365 number int 167 ; 14 410 207 number int 403 ; 13 411 153 number int 307 ;;
#X append 3 1 16 412 419 number int 321 ; 15 413 365 number int 167 ; 14 410 207 number int 477 ; 13 411 153 number int 444 ;;
#X append 4 1 16 412 419 number int 217 ; 15 413 365 number int 174 ; 14 410 207 number int 609 ; 13 411 153 number int 510 ;;
#P preset 483 374 47 27;
#P window setfont "Sans Serif" 12.;
#P number 419 412 35 12 0 0 0 139 0 0 0 221 221 221 222 222 222 0 0 0;
#P number 365 413 35 12 0 0 0 139 0 0 0 221 221 221 222 222 222 0 0 0;
#P number 207 410 35 12 0 0 0 139 0 0 0 221 221 221 222 222 222 0 0 0;
#P number 153 411 35 12 0 0 0 139 0 0 0 221 221 221 222 222 222 0 0 0;
#P user gain~ 424 49 36 136 158 0 1.071519 7.94321 10.;
#P message 200 552 174 9109516 script send panel[1] brgb 0 0 0;
#P message 164 526 202 9109516 script send panel[1] brgb 255 255 0;
#N thispatcher;
#Q end;
#P newobj 166 577 69 9109516 thispatcher;
#P newex 163 488 35 9109516 sel 1;
#P newex 80 450 377 9109516 if ($i1 > $i2) && ($i1 < $i3) && ($i4 > $i5) && ($i4 < $i6) then 1 else 0;
#P number 143 313 35 12 0 0 0 139 0 0 0 221 221 221 222 222 222 0 0 0;
#P number 70 314 35 12 0 0 0 139 0 0 0 221 221 221 222 222 222 0 0 0;
#P toggle 83 485 53 0;
#P newex 38 275 184 9109516 mousestate;
#P user pictslider 287 50 100 100 4 4 4 4 SliderDefaultKnob.pct 1 SliderDefaultBkgnd.pct 1 2163 0 8323072 127 1. 1.;
#P user panel 477 425 107 112;
#X brgb 0 0 0;
#X frgb 0 0 0;
#X border 1;
#X rounded 0;
#X shadow 0;
#X done;
#P objectname panel[1];
#P window setfont "Sans Serif" 14.;
#P window linecount 5;
#P comment 519 195 320 9109518 Position mouse cursor at top left of object and type key n ; then position at lower right and type m ; now that rectangle will be the active rollover area ; rolling over will highlight panel below;
#P connect 33 0 3 0;
#P connect 32 0 3 0;
#P connect 30 0 32 0;
#P connect 3 1 5 0;
#P connect 3 1 22 0;
#P connect 3 1 7 0;
#P connect 7 0 4 0;
#P connect 3 2 6 0;
#P connect 6 0 28 0;
#P connect 23 0 21 0;
#P connect 22 0 21 0;
#P connect 17 0 13 0;
#P connect 21 0 13 0;
#P connect 13 0 7 1;
#P connect 7 0 8 0;
#P connect 8 0 10 0;
#P connect 11 0 9 0;
#P connect 10 0 9 0;
#P connect 8 1 11 0;
#P connect 25 0 24 0;
#P connect 22 0 24 0;
#P connect 17 0 14 0;
#P connect 24 0 14 0;
#P connect 14 0 7 2;
#P connect 3 2 7 3;
#P connect 20 0 23 0;
#P connect 28 0 26 0;
#P connect 23 0 26 0;
#P connect 17 0 15 0;
#P connect 26 0 15 0;
#P connect 15 0 7 4;
#P connect 20 1 25 0;
#P connect 28 0 27 0;
#P connect 25 0 27 0;
#P connect 17 0 16 0;
#P connect 27 0 16 0;
#P connect 19 0 20 0;
#P connect 16 0 7 5;
#P pop;


December 10, 2006 | 1:32 am

Ah, crap. Forgot the "mode 1" command to mousestate, so that it outputs position relative to the mousestate patch and not the screen. Here’s the *real* patch. My bad…

–CJ

—————–

max v2;
#N vpatcher 173 115 1080 740;
#P window setfont "Sans Serif" 12.;
#P window linecount 1;
#P message 145 245 50 9109516 mode 1;
#P window setfont "Sans Serif" 14.;
#P window linecount 7;
#P comment 611 423 175 9109518 When using objects with the mouse you will get some inconsistent results (like dragging up and down with the fader or number boxes) as mousestate tries to track the motion.;
#P window linecount 3;
#P comment 336 229 175 9109518 Try setting new coordinates for the toggle using keys n and m;
#P toggle 251 224 79 0;
#P window setfont "Sans Serif" 12.;
#P window linecount 1;
#P message 90 245 42 9109516 nopoll;
#P message 52 246 28 9109516 poll;
#P window setfont "Sans Serif" 14.;
#P window linecount 4;
#P comment 538 293 258 9109518 Once a rollover area has been set , you can store a preset for the coordinates ; the four presets here correspond to the four objects at top;
#P window setfont "Sans Serif" 12.;
#P window linecount 1;
#P newex 56 216 60 9109516 loadbang;
#P user kslider 37 45 54 0 36 24 31 12 0 128 128 128 128 128 128 255 255 255 0 0 0 0 0 0;
#P message 144 339 42 9109516 set $1;
#P number 417 377 35 12 0 0 0 139 0 0 0 221 221 221 222 222 222 0 0 0;
#P number 364 377 35 12 0 0 0 139 0 0 0 221 221 221 222 222 222 0 0 0;
#P button 374 329 28 0;
#P number 206 380 35 12 0 0 0 139 0 0 0 221 221 221 222 222 222 0 0 0;
#P button 316 330 28 0;
#P message 72 348 42 9109516 set $1;
#P number 153 380 35 12 0 0 0 139 0 0 0 221 221 221 222 222 222 0 0 0;
#P newex 430 330 73 9109516 sel 110 109;
#P newex 455 299 40 9109516 key;
#P window setfont "Sans Serif" 36.;
#P number 490 57 101 36 0 0 0 139 0 0 0 221 221 221 222 222 222 0 0 0;
#N vpreset 4;
#X append 1 1 16 412 419 number int 97 ; 15 413 365 number int 45 ; 14 410 207 number int 204 ; 13 411 153 number int 37 ;;
#X append 2 1 16 412 419 number int 146 ; 15 413 365 number int 50 ; 14 410 207 number int 385 ; 13 411 153 number int 288 ;;
#X append 3 1 16 412 419 number int 204 ; 15 413 365 number int 49 ; 14 410 207 number int 459 ; 13 411 153 number int 425 ;;
#X append 4 1 16 412 419 number int 98 ; 15 413 365 number int 56 ; 14 410 207 number int 590 ; 13 411 153 number int 490 ;;
#P preset 483 374 47 27;
#P window setfont "Sans Serif" 12.;
#P number 419 412 35 12 0 0 0 139 0 0 0 221 221 221 222 222 222 0 0 0;
#P number 365 413 35 12 0 0 0 139 0 0 0 221 221 221 222 222 222 0 0 0;
#P number 207 410 35 12 0 0 0 139 0 0 0 221 221 221 222 222 222 0 0 0;
#P number 153 411 35 12 0 0 0 139 0 0 0 221 221 221 222 222 222 0 0 0;
#P user gain~ 424 49 36 136 158 0 1.071519 7.94321 10.;
#P message 200 552 174 9109516 script send panel[1] brgb 0 0 0;
#P message 164 526 202 9109516 script send panel[1] brgb 255 255 0;
#N thispatcher;
#Q end;
#P newobj 166 577 69 9109516 thispatcher;
#P newex 163 488 35 9109516 sel 1;
#P newex 80 450 377 9109516 if ($i1 > $i2) && ($i1 < $i3) && ($i4 > $i5) && ($i4 < $i6) then 1 else 0;
#P number 143 313 35 12 0 0 0 139 0 0 0 221 221 221 222 222 222 0 0 0;
#P number 70 314 35 12 0 0 0 139 0 0 0 221 221 221 222 222 222 0 0 0;
#P toggle 83 485 53 0;
#P newex 38 275 184 9109516 mousestate;
#P user pictslider 287 50 100 100 4 4 4 4 SliderDefaultKnob.pct 1 SliderDefaultBkgnd.pct 1 2163 0 8323072 127 1. 1.;
#P user panel 477 425 107 112;
#X brgb 0 0 0;
#X frgb 0 0 0;
#X border 1;
#X rounded 0;
#X shadow 0;
#X done;
#P objectname panel[1];
#P window setfont "Sans Serif" 14.;
#P window linecount 5;
#P comment 519 195 320 9109518 Position mouse cursor at top left of object and type key n ; then position at lower right and type m ; now that rectangle will be the active rollover area ; rolling over will highlight panel below;
#P connect 37 0 3 0;
#P connect 32 0 3 0;
#P connect 33 0 3 0;
#P connect 30 0 32 0;
#P connect 3 1 5 0;
#P connect 3 1 22 0;
#P connect 3 1 7 0;
#P connect 7 0 4 0;
#P connect 3 2 6 0;
#P connect 6 0 28 0;
#P connect 30 0 37 0;
#P connect 23 0 21 0;
#P connect 22 0 21 0;
#P connect 17 0 13 0;
#P connect 21 0 13 0;
#P connect 13 0 7 1;
#P connect 7 0 8 0;
#P connect 8 0 10 0;
#P connect 10 0 9 0;
#P connect 11 0 9 0;
#P connect 8 1 11 0;
#P connect 25 0 24 0;
#P connect 22 0 24 0;
#P connect 17 0 14 0;
#P connect 24 0 14 0;
#P connect 14 0 7 2;
#P connect 3 2 7 3;
#P connect 20 0 23 0;
#P connect 28 0 26 0;
#P connect 23 0 26 0;
#P connect 17 0 15 0;
#P connect 26 0 15 0;
#P connect 15 0 7 4;
#P connect 20 1 25 0;
#P connect 25 0 27 0;
#P connect 28 0 27 0;
#P connect 27 0 16 0;
#P connect 17 0 16 0;
#P connect 19 0 20 0;
#P connect 16 0 7 5;
#P pop;


Viewing 2 posts - 1 through 2 (of 2 total)