Tips for better GUI design

Feb 26, 2010 at 8:25pm

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

#48800
Feb 26, 2010 at 8:56pm

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.

#175371
Feb 26, 2010 at 8:57pm

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

#175372
Feb 26, 2010 at 9:04pm

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.

#175373
Feb 26, 2010 at 9:06pm

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.

#175374
Feb 26, 2010 at 9:24pm

heh, peter, thats pretty cool

#175375
Feb 26, 2010 at 9:28pm

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

#175376
Feb 26, 2010 at 9:36pm

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

#175377
Feb 26, 2010 at 9:50pm

Thanks a lot fella, really helped. Impressive you made that synth from just panels and a kslider :P

#175378
Feb 26, 2010 at 9:52pm

cheers. somehow, i think it helps that its laid out like a hardware synth might be.

#175379
Feb 27, 2010 at 12:21am

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

#175380
Feb 27, 2010 at 12:59am

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:

http://www.third-space-mind.com/max/max_main.htm

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.)

#175381
Feb 27, 2010 at 2:07am

can anybody post examples of an openGL interface as explained above? i’m intrigued!

#175382
Feb 28, 2010 at 4:17am

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?

#175383
Feb 28, 2010 at 5:10am

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.

#175384
Feb 28, 2010 at 7:06am

Hello Maxers,

@the_man361 : my algorithmic sequencer in share pages use OpenGL with javascript …

#175385
Feb 28, 2010 at 5:03pm

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

#175386
Feb 28, 2010 at 5:04pm

sorry here it is

[attachment=125956,141]

Attachments:
  1. Screen_shot_2010-02-28_at_16.56.56.png
#175387
Feb 28, 2010 at 5:24pm

Hello oli larkin,

colors are nice !

#175388
Feb 28, 2010 at 5:54pm

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.

#175389
Mar 2, 2010 at 3:02pm

Really ? That is such a surprise considering this lovely colorful sweat… :-)

Best,
Julien

#175390
Mar 2, 2010 at 5:04pm

LOL

#175391
Mar 15, 2010 at 12:42am

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.

#175392
Mar 15, 2010 at 1:49am

Here’s a big list of color apps:

http://designshack.co.uk/articles/inspiration/25-awesome-tools-for-choosing-a-website-color-scheme

I particularly like the second one on the list:

http://colorschemedesigner.com/

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.

#175393
Mar 15, 2010 at 1:53am

I also love how easily you could make some of these apps in Max! With OpenGL? Slick!!

#175394
Mar 23, 2010 at 11:46pm

>>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:

– Pasted Max Patch, click to expand. –

more recently I’ve been using prototypes for gui objects, and not changing my mind about the levels of alpha-grey involved : )

#175395

You must be logged in to reply to this topic.