Forums > MaxMSP

Draggable UI objects and a couple questions

December 8, 2006 | 11:53 pm

Hello all,

Coming from a Flash and Director background I was a bit dismayed to see no straightforward way of allowing interface objects to be dragged around in Max. Then, as I got more familiar with the program I realized that with transparent buttons, scripting, and mousestate, this could be done. It’s not as simple as something like "draggable 1" (which would be such a great addition to Max objects!), but it’s doable. Plus, after getting the basics down, automation and presets can be saved for the position of objects (positions are not saved with the patcher, you need to store / retrieve them with presets or colls).

I have a patch with three draggable objects, included below. I use bringtofront and sendtoback with the transparent buttons to make dragging "active / inactive". What I’m wondering is whether anyone else has come up with a simpler or alternative way of doing this, and if so, I’d love to see it. As stated in the comments, using bpatcher would eventually be a better way of doing this, as the encapsulation and hiding would be more robust. (I didn’t want to do a bpatcher to post to the forum though, needing separate files and all.)

Question 1: Is there a way to tell when the mouse is over an object? LCD outputs mouse position over its rectangle, but it also will hide the object. I wish there was a "within bounds" flag (and position information) included in the transparent button. I want to be able to highlight the object before clicking it.

Question 2: How might one use a mask with a transparent button, so that non-rectangular objects can be dragged effectively?

Thanks! Hope this is useful…

–CJ

————————–

max v2;
#N vpatcher 49 320 1088 702;
#P origin -207 67;
#P window setfont "Sans Serif" 14.;
#P window linecount 2;
#P comment 331 51 100 9109518 Hidden connections;
#B color 1;
#P user ubutton 287 50 38 36 0 0;
#P objectname transpbutton[3];
#P user ubutton 53 65 26 121 0 0;
#P objectname transpbutton[1];
#P user ubutton 128 62 57 28 0 0;
#P objectname transpbutton[2];
#P window linecount 1;
#P hidden message 902 80 88 9109518 255 255 255;
#B color 1;
#P hidden newex 903 49 67 9109518 loadbang;
#B color 1;
#P comment 743 139 160 9109518 Background color;
#B color 1;
#P objectname comment_num[12];
#P user hslider 743 48 20 132 256 1 0 1;
#P user swatch 743 75 148 56;
#P window setfont "Sans Serif" 9.;
#P hidden message 781 55 97 9109513 saturation $1;
#P window setfont "Sans Serif" 14.;
#P hidden newex 841 115 55 9109518 bgcolor;
#B color 1;
#P window linecount 6;
#P comment 597 214 319 9109518 With different bgcolors than white you get interesting effects as connections are redrawn when objects are dragged ; choose a new bgcolor to erase artifacts ; of course , you’d want to hide connections for the final patch , or maybe not :-);
#B color 1;
#P comment 181 220 319 9109518 Subpatches could be replaced by bpatchers , so more hiding could occur around each object ; whole areas of controls could be moved as single units (using bpatcher — just move the whole bpatcher window instead of the individual objects).;
#B color 1;
#P window linecount 2;
#P comment 195 157 236 9109518 Gain fader , number box , and toggle are draggable;
#B color 1;
#P window setfont "Sans Serif" 10.;
#P window linecount 1;
#N vpatcher 453 198 1139 709;
#P window setfont "Sans Serif" 12.;
#P window linecount 0;
#P comment 90 240 231 9109516 Mode 2 = active patcher window (main level);
#P comment 409 413 146 9109516 Change variable names to match appropriate object being moved;
#P window linecount 2;
#P comment 220 311 231 9109516 Subtract coordinates of click within transparent button … to track cleanly;
#P comment 380 61 219 9109516 Manage release-outside (shouldn’t really be needed as object will follow);
#P inlet 333 61 33 0;
#P inlet 227 61 33 0;
#P inlet 122 61 33 0;
#P inlet 18 61 33 0;
#P window linecount 1;
#P newex 41 210 74 9109516 loadbang;
#B color 6;
#P newex 333 137 53 9109516 sel 0;
#B color 6;
#P window setfont "Sans Serif" 9.;
#P message 237 427 150 9109513 script move transpbutton[3] $1 $2;
#P window setfont "Sans Serif" 12.;
#P newex 245 372 117 9109516 pack 0 0;
#B color 6;
#P window setfont "Sans Serif" 9.;
#P message 239 401 123 9109513 script move toggle[1] $1 $2;
#P window setfont "Sans Serif" 12.;
#P newex 146 326 37 9109516 -;
#B color 6;
#P newex 76 326 37 9109516 -;
#B color 6;
#P newex 131 211 117 9109516 unpack 0 0;
#B color 6;
#P window setfont "Sans Serif" 9.;
#P message 230 137 39 9109513 0;
#P message 140 138 39 9109513 1;
#P toggle 371 210 31 0;
#P window setfont "Sans Serif" 12.;
#P newex 372 246 74 9109516 metro 20;
#B color 6;
#P window setfont "Sans Serif" 9.;
#P message 41 239 39 9109513 mode 2;
#P window setfont "Sans Serif" 12.;
#P newex 41 295 168 9109516 mousestate;
#B color 6;
#P outlet 49 392 38 0;
#P comment 422 214 146 9109516 Start / stop update;
#P connect 15 0 3 0;
#P connect 4 0 2 0;
#P lcolor 2;
#P connect 3 0 2 0;
#P connect 13 0 1 0;
#P connect 11 0 1 0;
#P connect 2 1 9 0;
#P connect 8 0 9 1;
#P connect 18 0 8 0;
#P connect 17 0 6 0;
#P connect 2 2 10 0;
#P connect 8 1 10 1;
#P connect 16 0 7 0;
#P connect 14 0 7 0;
#P connect 12 0 13 0;
#P connect 12 0 11 0;
#P connect 9 0 12 0;
#P connect 19 0 14 0;
#P connect 10 0 12 1;
#P connect 6 0 5 0;
#P connect 7 0 5 0;
#P connect 5 0 4 0;
#P lcolor 2;
#P pop;
#P newobj 284 104 84 9109514 p draggable;
#B color 1;
#N vpatcher 453 198 1139 709;
#P window setfont "Sans Serif" 12.;
#P window linecount 0;
#P comment 90 240 231 9109516 Mode 2 = active patcher window (main level);
#P comment 409 413 146 9109516 Change variable names to match appropriate object being moved;
#P window linecount 2;
#P comment 220 311 231 9109516 Subtract coordinates of click within transparent button … to track cleanly;
#P comment 380 61 219 9109516 Manage release-outside (shouldn’t really be needed as object will follow);
#P inlet 333 61 33 0;
#P inlet 227 61 33 0;
#P inlet 122 61 33 0;
#P inlet 18 61 33 0;
#P window linecount 1;
#P newex 41 210 74 9109516 loadbang;
#B color 6;
#P newex 333 137 53 9109516 sel 0;
#B color 6;
#P window setfont "Sans Serif" 9.;
#P message 237 427 150 9109513 script move transpbutton[2] $1 $2;
#P window setfont "Sans Serif" 12.;
#P newex 245 372 117 9109516 pack 0 0;
#B color 6;
#P window setfont "Sans Serif" 9.;
#P message 236 403 131 9109513 script move numbox[1] $1 $2;
#P window setfont "Sans Serif" 12.;
#P newex 146 326 37 9109516 -;
#B color 6;
#P newex 76 326 37 9109516 -;
#B color 6;
#P newex 131 211 117 9109516 unpack 0 0;
#B color 6;
#P window setfont "Sans Serif" 9.;
#P message 230 137 39 9109513 0;
#P message 140 138 39 9109513 1;
#P toggle 371 210 31 0;
#P window setfont "Sans Serif" 12.;
#P newex 372 246 74 9109516 metro 20;
#B color 6;
#P window setfont "Sans Serif" 9.;
#P message 41 239 39 9109513 mode 2;
#P window setfont "Sans Serif" 12.;
#P newex 41 295 168 9109516 mousestate;
#B color 6;
#P outlet 49 392 38 0;
#P comment 422 214 146 9109516 Start / stop update;
#P connect 15 0 3 0;
#P connect 3 0 2 0;
#P connect 4 0 2 0;
#P lcolor 2;
#P connect 11 0 1 0;
#P connect 13 0 1 0;
#P connect 2 1 9 0;
#P connect 8 0 9 1;
#P connect 18 0 8 0;
#P connect 17 0 6 0;
#P connect 2 2 10 0;
#P connect 8 1 10 1;
#P connect 14 0 7 0;
#P connect 16 0 7 0;
#P connect 12 0 11 0;
#P connect 12 0 13 0;
#P connect 9 0 12 0;
#P connect 19 0 14 0;
#P connect 10 0 12 1;
#P connect 7 0 5 0;
#P connect 6 0 5 0;
#P connect 5 0 4 0;
#P lcolor 2;
#P pop;
#P newobj 124 105 84 9109514 p draggable;
#B color 1;
#P window setfont "Sans Serif" 14.;
#N vpatcher 287 441 791 826;
#P window setfont "Sans Serif" 14.;
#P message 207 290 219 9109518 script sendtoback transpbutton[3];
#B color 1;
#P message 208 247 219 9109518 script sendtoback transpbutton[2];
#B color 1;
#P message 208 211 219 9109518 script sendtoback transpbutton[1];
#B color 1;
#P outlet 56 314 15 0;
#P message 111 167 219 9109518 script bringtofront transpbutton[3];
#B color 1;
#P message 113 131 219 9109518 script bringtofront transpbutton[2];
#B color 1;
#P message 112 95 219 9109518 script bringtofront transpbutton[1];
#B color 1;
#P window setfont "Sans Serif" 12.;
#P newex 90 50 74 9109516 sel 1;
#B color 1;
#P inlet 50 34 15 0;
#P connect 8 0 5 0;
#P lcolor 2;
#P connect 7 0 5 0;
#P lcolor 2;
#P connect 6 0 5 0;
#P lcolor 2;
#P connect 2 0 5 0;
#P lcolor 2;
#P connect 3 0 5 0;
#P lcolor 2;
#P connect 4 0 5 0;
#P lcolor 2;
#P connect 0 0 1 0;
#P lcolor 2;
#P connect 1 0 4 0;
#P lcolor 2;
#P connect 1 0 2 0;
#P lcolor 2;
#P connect 1 0 3 0;
#P lcolor 2;
#P connect 1 1 8 0;
#P lcolor 2;
#P connect 1 1 6 0;
#P lcolor 2;
#P connect 1 1 7 0;
#P lcolor 2;
#P pop;
#P newobj 599 111 60 9109518 p on_off;
#P toggle 599 46 59 0;
#P window setfont "Sans Serif" 20.;
#N thispatcher;
#Q end;
#P newobj 599 163 104 9109524 thispatcher;
#B color 1;
#P window setfont "Sans Serif" 10.;
#N vpatcher 453 198 1139 709;
#P window setfont "Sans Serif" 12.;
#P comment 90 240 231 9109516 Mode 2 = active patcher window (main level);
#P comment 409 413 146 9109516 Change variable names to match appropriate object being moved;
#P window linecount 2;
#P comment 220 311 231 9109516 Subtract coordinates of click within transparent button … to track cleanly;
#P comment 380 61 219 9109516 Manage release-outside (shouldn’t really be needed as object will follow);
#P inlet 333 61 33 0;
#P inlet 227 61 33 0;
#P inlet 122 61 33 0;
#P inlet 18 61 33 0;
#P window linecount 1;
#P newex 41 210 74 9109516 loadbang;
#B color 6;
#P newex 333 137 53 9109516 sel 0;
#B color 6;
#P window setfont "Sans Serif" 9.;
#P message 237 427 150 9109513 script move transpbutton[1] $1 $2;
#P window setfont "Sans Serif" 12.;
#P newex 245 372 117 9109516 pack 0 0;
#B color 6;
#P window setfont "Sans Serif" 9.;
#P message 236 403 137 9109513 script move gainfader[1] $1 $2;
#P window setfont "Sans Serif" 12.;
#P newex 146 326 37 9109516 -;
#B color 6;
#P newex 76 326 37 9109516 -;
#B color 6;
#P newex 131 211 117 9109516 unpack 0 0;
#B color 6;
#P window setfont "Sans Serif" 9.;
#P message 230 137 39 9109513 0;
#P message 140 138 39 9109513 1;
#P toggle 371 210 31 0;
#P window setfont "Sans Serif" 12.;
#P newex 372 246 74 9109516 metro 20;
#B color 6;
#P window setfont "Sans Serif" 9.;
#P message 41 239 39 9109513 mode 2;
#P window setfont "Sans Serif" 12.;
#P newex 41 295 168 9109516 mousestate;
#B color 6;
#P outlet 49 392 38 0;
#P comment 422 214 146 9109516 Start / stop update;
#P connect 15 0 3 0;
#P connect 4 0 2 0;
#P lcolor 2;
#P connect 3 0 2 0;
#P connect 13 0 1 0;
#P connect 11 0 1 0;
#P connect 2 1 9 0;
#P connect 8 0 9 1;
#P connect 18 0 8 0;
#P connect 17 0 6 0;
#P connect 2 2 10 0;
#P connect 8 1 10 1;
#P connect 16 0 7 0;
#P connect 14 0 7 0;
#P connect 12 0 11 0;
#P connect 12 0 13 0;
#P connect 9 0 12 0;
#P connect 19 0 14 0;
#P connect 10 0 12 1;
#P connect 6 0 5 0;
#P connect 7 0 5 0;
#P connect 5 0 4 0;
#P lcolor 2;
#P pop;
#P newobj 41 201 84 9109514 p draggable;
#B color 1;
#P toggle 287 50 37 0;
#P objectname toggle[1];
#P window setfont "Sans Serif" 20.;
#P number 128 62 56 20 0 0 0 139 0 0 0 220 28 28 222 222 222 0 0 0;
#P objectname numbox[1];
#P user gain~ 53 65 24 100 158 1 1.071519 7.94321 10.;
#P objectname gainfader[1];
#P window setfont "Sans Serif" 14.;
#P window linecount 2;
#P comment 489 62 100 9109518 Draggable objects on / off;
#B color 1;
#P connect 21 0 4 0;
#P lcolor 2;
#P connect 21 1 4 1;
#P lcolor 2;
#P connect 21 2 4 2;
#P lcolor 2;
#P connect 21 3 4 3;
#P lcolor 2;
#P connect 20 0 8 0;
#P lcolor 2;
#P connect 20 1 8 1;
#P lcolor 2;
#P connect 20 2 8 2;
#P lcolor 2;
#P connect 20 3 8 3;
#P lcolor 2;
#P hidden connect 22 0 9 0;
#P lcolor 2;
#P hidden connect 22 1 9 1;
#P lcolor 2;
#P hidden connect 22 2 9 2;
#P lcolor 2;
#P hidden connect 22 3 9 3;
#P lcolor 2;
#P connect 6 0 7 0;
#P connect 9 0 5 0;
#P lcolor 2;
#P connect 8 0 5 0;
#P lcolor 2;
#P connect 7 0 5 0;
#P lcolor 2;
#P connect 4 0 5 0;
#P lcolor 2;
#P hidden connect 19 0 16 0;
#P lcolor 2;
#P hidden connect 19 0 15 0;
#P lcolor 2;
#P hidden connect 14 0 15 0;
#P lcolor 2;
#P hidden connect 16 0 14 0;
#P lcolor 2;
#P hidden connect 15 0 13 0;
#P lcolor 2;
#P hidden connect 18 0 19 0;
#P lcolor 2;
#P pop;


December 9, 2006 | 11:27 am

Since no one has answered this in 12 hours I’ll give it my best shot.

Back-story and ranting
The current set of max UI objects were born from a standpoint of just
giving the program the information it needs to run some sort of
algorithm. You can hack up some pretty nice stuff, but its not what
its made for. Thats not to say that an amazing UI is not possible
inside max. If you want something more professional, you can step
into javascript,java, C, or open GL. or even plain LCD

I feel I can definitively say that Cycling hears the call that the
max application itself should have more of the amenities of a normal
user experience. Unfortunately keeping everything cross-platform
seems to hold that back quite a bit.

After spending a week on three dialog boxes, Lord knows that I’m
ready for nib file integration into max….

Your Questions

right now there are two main ways to get hover information
1 maxobjects.com… "hover"
2 write a javascript that archives all the UI objects you need and
compares their coordinates against the mouse coordinates

currently rectangular buttons are the norm. somewhere, in the deep
dark depths of some elves computer, a copy of max exists that
supports alpha channels in the UI. Weather it will see the light of
day, is anyones guess.

to regulars
/I’m trying to be diplomatic
-matt


December 9, 2006 | 12:29 pm

Unfortionatly, I am at a loss to be able to help with the scripting thing. + maybe instead of bring to front/back to move between draggable and non dragable you could just place them at the bottom corner of the objects. Up to you though.

However, the main thing that hit me from your message is that you are a flash user moving over into max. So why not just built your gorgeous interface in flash and use flash server to communicate with max? Its not my area of expertise, but I have a freind who specialises in communication between max and other programs, and has done this extensively.

Hope this gives you food for thought anyways
T


December 9, 2006 | 9:19 pm

I wish to God I’d researched and found out about Max before trying to build audio mixers and graphics visualizers in Flash (and mainly Director). Coding is interesting to a degree, but for these projects Max wins by orders of magnitude because of its included objects. There are *some* things the others do better (animation? else?), so maybe the Flash-Max communication server would be good to use. As far as actually using those programs much, though, I found Max and haven’t looked back! The UI can in fact be pretty gorgrous in Max with some planning and effort, so that’s what I intend to do.

Max’s ability to manage, store, automate, interface with MIDI, play and edit movies, and audio process is so amazing…I’m really trying to get my students to discover this—as I hear them say "I want to have buttons to click and play sounds" and they do it in Flash… fine, but that’s as far as they’ll get, I imagine… not too much else you can do there without some serious delving. Been there, don’t wanna go back!

Thanks for the input—and who is this mystical friend who does the Max / other program communication? Any link or other information about it would be great.

–CJ


December 9, 2006 | 11:30 pm

Thanks for the response. I wasn’t able to find "hover" at maxobjects.com. However, I think if I really want the functionality I’ll just keep a coll of the current positions and sizes (here, the rectangles are a plus!) — that way I can monitor the mousestate. It’ll be a bit of a trick, but with some doing, it could be used for any object. Highlighting the objects one drags over isn’t necessary but could be a nice effect.

I do hope there’s alpha functionality eventually. Until then I’m still damn happy with this amazing software. Wish there was an "rollover" flag for that transparent button though. Ah well… maybe it’s time to learn some C or javascript and develop custom objects. Sounds like a real challenge…

Thanks again, your response was helpful.

–CJ


December 10, 2006 | 9:42 pm

Seejay James wrote:
> Ah well… maybe it’s time to learn some C or javascript and develop
> custom objects. Sounds like a real challenge…

Definitely the JSUI should be worth to look into. And of course LCD.

Another observation regarding your example. It works nice, but makes the
dragable UI objects useless. What is the idea behind it. Max itself has
a switch built in between dragable and usable by locking/unlocking a
patch. But I just have no idea what this should be good for in a locked
patch…

Stefan


Stefan Tiedje————x——-
–_____———–|————–
–(_|_ —-|—–|—–()——-
– _|_)—-|—–()————–
———-()——–www.ccmix.com


December 10, 2006 | 10:19 pm

The idea is that users can drag objects of the UI around without needing a full version of Max—to be able to do this in the runtime or in a collective/app where’s there’s no edit mode available. If you unclick "draggable" the objects then (should!) work with usual functionality (the transparent buttons get sent to the back so are then unclickable, so the objects return to normal functionality).

It’s a little strange maybe to have users be able to drag each object. That’s why I think for a polished version, the controls would be in bpatcher "clumps" or clusters of related ones, then those windows (which might include, say, a delay module with several elements, or a filtergraph and number-box settings) could be dragged around and their locations saved as presets. Of course, presets of nice-looking interface layouts could be pre-saved anyway, but it just seemed like dragging was an intuitive way of customizing the UI. It might be nice for users to have more control this way, which would be in addition to numerous customization controls for window sizes and positions, etc.

Quite possibly I would also include two versions of any patch–one with somewhat larger objects on it, for higher-resolution monitors or for more easy readability. Having user control over these elements would be kinda cool too, I’ll just see how it goes. It might relieve some of the Max "clutter" of too-many-number-boxes etc. to have multiple versions with different numbers of objects, differently-sized objects, different layouts, etc. For example, versions for 1024 x 768 versus 1600 x 1200 could be substantially different patches and might do well with some level of customization.

–CJ


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