Tips for better GUI design
Is there a way to make my patches look better for user interface, at the moment i’m stacking panels on top of panels, but it still looks too basic.
Also, is there a way to make a patch adjust size based on the users current resolution?
Look into the various options for using pictures as background and for controlling elements. For example [fpic] and [pictctrl]. The latter allows to use custom knobs for example. [matrixctrl] allows also pictures. You can go quite far, depending on your knowledge about image generation and processing.
But don’t expect to make a big photorealistic synthesizer surface. Max will probably not honour your efforts and may become sluggish or even inoperable. Data size of the images is an issue.
have you tried overlaying semi transparent panels onto the top of UI objects and other panels? it can give decent depth effects and makes things look a bit nicer. i think a good colour scheme is important too. maybe have a look at existing VST plugins of a similar nature (if they exist) to see how theyve been done
if not, you could always use fpic, pictslider or pictctrl to create your ui elements.
heres an example of a UI i created for a mono synth, im mainly just referring to the keyboard section here
Actually, think of the *least* you need rather than thinking about how to fit the most in. Put as much of it as you can under your fingers and in your ears.
Your mileage may vary, of course.
I do not recommend to have many controls like that but just to show you what is possible, here is a screen movie from Max with a custom "dial" for a LFO:
This was an experimetal work, the object was created in 3D software and rendered as images. The middle part of each image was cut out an used for the actual dial, the surrounding image is a background.
heh, peter, thats pretty cool
Wow, thanks for all this guys. How do i create a semi-transparent panel btw? I can’t find the option in the inspector of panel.
in the inspector where you have the edit background colour, there are knobs for red, green, blue and alpha… alpha is transparancy.
if you set the panel to be a gradient panel (in the inspector again) and make them both partially transparent you can get some nice overlay fx.. for example going from 70% opaque black at the top to 0% opaque white at the bottom
Thanks a lot fella, really helped. Impressive you made that synth from just panels and a kslider :P
cheers. somehow, i think it helps that its laid out like a hardware synth might be.
The inspector can be quite powerful if you use graphical attributes properly, for example in
panel you can set border size, gradient angle, color/gradient mode, corner roundness, and of course colors and alpha.
You can add in XHTML pages (i.e. get CSS) using
Then, there is
I keep a consistent color scheme for my controls, with a specific background color, and use panels underneath everything to hold related controls together. Set the panels to be white, but with an alpha of about 0.5 (or whatever you want). This highlights the area without introducing new colors to the scheme, which can look gaudy. Some examples here:
For the "current resolution" look to jit.displays. However, patches won’t auto-scale objects to the window size, alas. To do this you’d need presets with object size and position, which could take awhile with a lot of objects. However there are tricks you can do to make this easier, like using [pattr] to bind to objects’ patching_rect attributes. Or you can make the whole GUI in OpenGL, which takes plenty of work, but man, is super-slick once it’s done, and scalable however you or the user wants… a floating jit.window with all your controls, stretch it however you want, very cool. (Making a [kslider] in OpenGL is not something I’d recommend…. buttons, toggles, and sliders wouldn’t be that difficult though.)
can anybody post examples of an openGL interface as explained above? i’m intrigued!
Is there a way to force my patch to run in a ’1024×768′ sized window for example? I understand that fullscreen 1 into a thispatcher object works to fill your screen, but is it possible to fit it to a resolution, and have the user with a larger resolution run it in a window?
window size 1024 768, window exec (to thispatcher)
you can also disable zoom so they can’t resize the patch.
For the OpenGL stuff, maybe look in the jsui codes, there are some ways to get started with "sketch". But simple jit.gl.gridshapes can work well for sliders, buttons, toggles, etc. And you can texture them with images for even more fun.
The nice thing about the OpenGL scene is that at standard camera Z (which I *think* is 4.0, not sure) you’ll have -1. to 1. in each axis, even if you change the window size, so you can track your clicks pretty easily. Or you can use the mouse data from jit.window or jit.pwindow to know where things get clicked, dragged, etc.
you probably want to use a textual language if you have a complex GL gui.
attached is a screenshot of an JS openGL gui framework that i’ve been working on (excuse the garish colours). There are buttons, toggles, a multislider, rslider and an xy pad so far
I’ve an awful taste when it comes to color, therefore in order to minimize the impact of my shitty color taste on other people patching life, I make extensive use of Kuler. There are probably tons of other website which propose such kind of things, YMMV.
Really ? That is such a surprise considering this lovely colorful sweat… :-)
as a proper alternative to Kuler, I suggest Colourlovers.com – which has been going for years and years, either Adobe ripped them off or they licensed it.
Colourlovers also has the benefit of having patterns on there.
Here’s a big list of color apps:
I particularly like the second one on the list:
The Web Page Preview (light and dark versions) are a fantastic tool to see your current color scheme in action.
Also I know that the Max Toolbox will let you send messages to any number of selected objects (Max only lets you do one at a time, as I understand it). So you could do Select All, then try different "fgcolor" "bgcolor" etc. messages to test things out.
I also love how easily you could make some of these apps in Max! With OpenGL? Slick!!
>>I suppose using a different default color palette would work, but even if you apply it, the colors will revert when you open it in another version of Max, right?
there is the Save Default-Valued Object Attributes (@imprint) attribute in the patcher inspector. I have not experimented with what happens if you later change your object-defaults… I guess the values from time of first save would be retained.
in my first Max5 patches, I was doing things like this:
----------begin_max5_patcher---------- 1236.3oc0Z0saqhCD9ZxSAB0KyVgM+u2sOGGspxAbS8YI1QfSZ28ny69B1FB NAZIjThQJhP7ueymmYrGm4Wqrb1v9.W5X+m1+v1x5WqrrDEUWfk52VN6Pejl iJEMyYOhhycVKqYy1TVNqP1e2mcWq+v9uUsijI5KayO+iX+1NyJxvEZCPhen OLYcuuA5LdxtV2KfpD5gcDZNlW1svx2PYr2OqYrC7l14pJcOhm9Fgt8kBbJW hEHPHD9Ahmh2gQ0HntG+d0p5GqGIkQwuWI4MhMG+AWxj1BtrrohWYTNEsCKp 7uJHnVZtC8E.617Rx+IZN.9raeDgauhMXXwFHE0.gXGDJD6tKjxQg+u6wx16 3zVkXzjKJVsDQELI43i3hRBi1YtsbNMmAAI0yCHT7UnDA9wcl1ZEsbV5+fy5 HTVNY3WutQgsGSO0ig0WksjP2WfKwTNhq.e2YFcHm+R+qA50+JJEOXm6c81x YaAIiQqAgVOqKtY5pVqDvFngaQKnn88zYNikuAUbjTR1ji0VKpTeQTxNDGyI R7.ca6GY29BBkqMVXJpZLdqLsfkmqMTxZN1SMY3ijT76jL9ahw5Dao4Cpiti lgkV4mYfsCWVh1hanOMqL2msa9zs9gI+yL3fm2qdVuuvtCpWwk1dCY+46Ic0 DK9JDHVgi6rBOjQXSsBWSxWVOQ1jy1tMGODcnwG84085EZOnPZ8Txt64dc5W nE5j2S490bVErmlRh6TzRFlvfeNgACUbjzY8HIrJ4CwcVa6rAQ2deotx2qA4 .jCHZPUFuox.JckHonCk1I0b8WXnrtgFtqh+m4+oDwOTH1Aw1cR5Vf3Y0Cjh YU7q2ivATEd2TcPhIQVAyqgHPcxvqxPr1y0CvLDd+MCCWJVgx.FreBLMsJvr ZBp7q6IUtBgOBaP4vODeLgy.39ExrzgiuTzgAMO0j4T1tcX4QQcblK+2hXHm pli27p3n7.IC9IL5Qn37YbYA6.MCmMUxzedOJNr6grjgUZRj4NVFdpLYv7dj Bk+rvN2sfIwjaKPYvJpz9opmd1O4OINMbd4zntbJvMzDIUvMSpQyqIeThYSp ctxzalZm2vJTQrJ8oB7LOlc68gUSdDdATGdB.LNWqUg3jO4co.tyKYpBlKvP 2l51uIgvGfI+83hDNc+14D5PWUr.A002OMWxNTj1LMMwCaqCmLbImPaut+ez 5n7r18FIKS+10EKjjr8rpX6U3aj5EWKriGIpAFEpAfkIrCFKrMLbGNVbCMKb OZs6HyB2QiD2IFErSVjFkdKRTW+WDMJX6YTvNXYR1icu8.yB1O.uHpBqfuJm YPGwYuTMKUmi6EDmWP1bfKOykVZcLbxK7UIGw1b1FTtJcQZGi1t2aNSbuSzh UmXgqLYdt07exO7aI+m5lpJcuQCQDMhydG0lJSsCy8Nooj26L.dQRS0CHESv if+iVF4e1fb4ifyhWDbFHwj3rjkAmYR5YAtKBNynTy7VRtyhMBJKXN2AFDCZ 2CVlMwge+aAGaz6.CWRdFMCUVvBxwnYvX9yoQNDFe9As+VsxAIS2LWzH8KRW tfbdzppkkKuR.svTG5Ry80ZzEwm1eroWnjbWwjefAhIfAhInAhISTexy.wTn 4go.WCjmRLPLEafXJ5FvT0O98p+mTWAaC -----------end_max5_patcher-----------
more recently I’ve been using prototypes for gui objects, and not changing my mind about the levels of alpha-grey involved : )