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?
Thanks
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
http://sites.google.com/site/chriscore361/_/rsrc/1265515788068/home/Simple%20Monosynth2.png?height=182&width=400
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:
http://ampaire.demoserver.at/misc/movies/FreqDial.mov
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.
Thanks
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 jweb.
Then, there is lcd and jsui...
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 '1024x768' 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.
checkout the examples in /jitter/javascript/gui
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... :-)
Best,
Julien
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.
Any easy way to apply something like this to a patch, without building in all the [receives] etc. to each object, or writing it all in javascript? 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? So, any way to save a certain color configuration and ensure that on someone else's machine, they will load in? Like a .css of sorts.
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:
more recently I've been using prototypes for gui objects, and not changing my mind about the levels of alpha-grey involved : )