neurodancer

Can anyone offer some pointers on GUI development?

(Tutorials, useful Objects and basic/guiding principles)

I've never tried it and i'm fairly new to Max/MSP, having only done a one year course using 4.3 which was mainly aimed at audio processing, and i'm completely new to Jitter.

I finally made the investment a couple of weeks ago, (i'm now the proud owner of Max/MSP 4.5 and Jitter 1.5, Hooray!), and would like to develop some GUIs, (using Win XP), for some of the patches i developed during my course...with a view to developing them into Pluggo plugs at a later stage.

Obviously i've got another massive learning curve ahead of me, (not to mention learning Jitter which at the moment seems overwhelming), but if anyone can point me in the right starting direction i'd massively appreciate it! I'm not looking to create anything of amazing quality, just the basics, but as i want to develop them as plugs, efficiency and compatibility are of prime importance.

In truth, i'm unsure where to even start and the glaringly obvious things will no doubt come as a revelation to me...so please don't hold back from stating the obvious.

I have some experience with Java so maybe the Swing API might be the route to take?

Any suggestions or advice would be greatly appreciated, thanks in advance,

Can anyone offer some pointers on GUI development?
(Tutorials, useful Objects and basic/guiding principles)

Any suggestions or advice would be greatly appreciated, thanks in advance,
John


creatingdeveloping-guis-for-beginners

> I have some experience with Java so maybe the Swing API might be the route to take?

> Any suggestions or advice would be greatly appreciated, thanks in advance,

----------------------------------------------------

for most of my plug-ins i were okay using picture slider

and picture buttons, the rest is imagination and some

basic knowlegde about photoshop action scripting.

later a learned a a bit of lcd but found it probelematic

for bigger interfaces. they say the same about jsui.

some people just use panels and multisliders - it can look 

> I have some experience with Java so maybe the Swing API might be the route to take?
>
> Any suggestions or advice would be greatly appreciated, thanks in advance,
> John
----------------------------------------------------

for most of my plug-ins i were okay using picture slider
and picture buttons,  the rest is imagination and some
basic knowlegde about photoshop action scripting.

later a learned a a bit of lcd but found it probelematic
for bigger interfaces. they say the same about jsui.

some people just use panels and multisliders - it can look 
great if done right. :)


"An interface is about hiding complexity from the user, It's about 

guiding a process, without cognitive understanding of what goes on 

beneath. Interface design is the art of enveloping the observer in an 

enticing, "try this" exploration with ever-new elements and designs 

as the tools to triumph in new territories." - kai krause. the 

JavaScript was my first written programming language and I learned it 

entirely from JSUI. the fruits of which are my matsui library (link 

included). joshua kit clayton suggested the ORLY difinitive guide to 

javascript and I was up and running in a few days.

The most important part of UI development, for me, is to take a zero 

compromise approach in terms of the end experience. Don't cut 

corners because it's easier or takes less time to program. Imagine 

the most intuitive way to interact with your program, and pro/gram it.

the less text the better (within reason) in max/msp its tough 

because your usually controlling something that the user isn't 

familiar with. but icons such as dice (probability), left and right 

ears (panning), light switches (on/off), question (help!) clocks (time)

photoshop the entire thing first. if you have a custom widget you 

haven't programmed, stick a box in there.

a cliche around here: don't forget LCD object.

make sure the is continuity through out your program so that the user 

(volume is always green) pan is always the same knob etc.

3d looking beveled graphics aren't the end all be all of UI design

"An interface is about hiding complexity from the user, It's about  
guiding a process, without cognitive understanding of what goes on  
beneath. Interface design is the art of enveloping the observer in an  
enticing, "try this" exploration with ever-new elements and designs  
as the tools to triumph in new territories." -  kai krause.   the  
best interface designer ever.

JavaScript was my first written programming language and I learned it  
entirely from JSUI.   the fruits of which are my matsui library (link  
included).  joshua kit clayton suggested the ORLY difinitive guide to  
javascript and I was up and running in a few days.

The most important part of UI development, for me, is to take a zero  
compromise approach in terms of the end experience.    Don't cut  
corners because it's easier or takes less time to program.   Imagine  
the most intuitive way to interact with your program, and pro/gram it.

   the less text the better (within reason)  in max/msp its tough  
because your usually controlling something that the user isn't  
familiar with. but icons such as dice (probability), left and right  
ears (panning), light switches (on/off), question (help!)  clocks (time)

photoshop the entire thing first.  if you have a custom widget you  
haven't programmed, stick a box in there.

a cliche around here:  don't forget LCD object.

make sure the is continuity through out your program so that the user  
familiarizes him/herself with it quicker
(volume is always green) pan is always the same knob etc.

"Volume is Always Green, Pan is Always the Same Knob."

> Can anyone offer some pointers on GUI development? (Tutorials, useful

First of all GUI design is design and not so much related to Max. But 

whatever you decide design wise you could implement in Max.

I believe Max is the best environment to base you design desicions on 

You will use your design immediately and can test it and just rearrange 

if necessary. (Its going beyond rapid prototyping, as the prototype 

could already be the fully functional program/endproduct.)

For GUI design there are two aspects. One is visual appearance, and one 

is ergonomics. The latter is more important. Always start with 

ergonomics. That's the way how you play your instrument. Every control 

has to be at a good place and should explain its function by itself. 

(This is important if you want others to play with it). The standard max 

GUI elements are just fine for that purpose. Sliders, Knobs, Numberboxes...

Do not start to deal with apperance before the ergonomics are settled. 

Appearence is a lot of work, and its "only" use is that it looks nice. 

Well, it can enhance the focus of elements, can point to their 

importance and meaning and so on. It is that way part of the onscreen 

If you change the ergonomics, you might need to start over again with 

> I finally made the investment a couple of weeks ago, (i'm now the

> proud owner of Max/MSP 4.5 and Jitter 1.5, Hooray!), and would like

> to develop some GUIs, (using Win XP), for some of the patches i

> developed during my course...with a view to developing them into

> Obviously i've got another massive learning curve ahead of me,

For learning GUI design you'd better look for general purpose books, not 

related to any concrete tool. It does not matter if you create your knob 

graphics in Photoshop or Gimp, but it matters that you know how it 

should look like. (You could even just paint everything by hand and scan 

> but if anyone can point me in the right starting direction i'd

> massively appreciate it! I'm not looking to create anything of

> amazing quality, just the basics, but as i want to develop them as

> plugs, efficiency and compatibility are of prime importance.

After the ergonomics part you can do anything for the appearance with 

pictctrl, matrixctrl, panel, pictslider, JSUI, bgcolor...

For example replace a slider with a pictctrl, replace the background 

The best explanations for all the mentioned objects are their help files.

john inder wrote:
> Can anyone offer some pointers on GUI development? (Tutorials, useful
> Objects and basic/guiding principles)

First of all GUI design is design and not so much related to Max. But 
whatever you decide design wise you could implement in Max.

I believe Max is the best environment to base you design desicions on 
real world reactions.
You will use your design immediately and can test it and just rearrange 
if necessary. (Its going beyond rapid prototyping, as the prototype 
could already be the fully functional program/endproduct.)

For GUI design there are two aspects. One is visual appearance, and one 
is ergonomics. The latter is more important. Always start with 
ergonomics. That's the way how you play your instrument. Every control 
has to be at a good place and should explain its function by itself. 
(This is important if you want others to play with it). The standard max 
GUI elements are just fine for that purpose. Sliders, Knobs, Numberboxes...

Do not start to deal with apperance before the ergonomics are settled. 
Appearence is a lot of work, and its "only" use is that it looks nice. 
Well, it can enhance the focus of elements, can point to their 
importance and meaning and so on. It is that way part of the onscreen 
documentation so to say...
If you change the ergonomics, you might need to start over again with 
the appearance...

> I finally made the investment a couple of weeks ago, (i'm now the
> proud owner of Max/MSP 4.5 and Jitter 1.5, Hooray!), and would like
> to develop some GUIs, (using Win XP), for some of the patches i
> developed during my course...with a view to developing them into
> Pluggo plugs at a later stage.

> Obviously i've got another massive learning curve ahead of me, 

For learning GUI design you'd better look for general purpose books, not 
related to any concrete tool. It does not matter if you create your knob 
graphics in Photoshop or Gimp, but it matters that you know how it 
should look like. (You could even just paint everything by hand and scan 
it in later...)

> but if anyone can point me in the right starting direction i'd
> massively appreciate it! I'm not looking to create anything of
> amazing quality, just the basics, but as i want to develop them as
> plugs, efficiency and compatibility are of prime importance.

After the ergonomics part you can do anything for the appearance with 
pictctrl, matrixctrl, panel, pictslider, JSUI, bgcolor...
For example replace a slider with a pictctrl, replace the background 
with a picture...

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


barry threw :: sound | (if you would see the stars clearly,

 | look hard at the surrounding darkness)

-- 
barry threw :: sound      |   (if you would see the stars clearly,
http://www.barrythrew.com |   look hard at the surrounding darkness)
bthrew(at)gmail(dot)com   |                       -Ooka Makoto
857-544-3967              |


Thanks to everyone who's taken the time to reply.

Thanks especially for the pointers to the commonly used objects, (Matthew and Stefan), it was exactly what i needed and your advice on design considerations are also particularly useful.

I understand the need for ergonomics over aesthetics from my own experiences, although the engine underneath the GUI is of even more importance in my opinion, (it's just a shame the rest of the world doesn't see it that way).

I will certainly check out the book (recommended by Barry), along with any other web based sources of GUI design i can find. I understand the concepts of interface design but a bit of research never hurt anyone and can only improve the end product.

I have used the Max objects to create GUIs before, although as the remit of my course was Audio/MIDI composition using Max/MSP, the projects didn't require extensive GUIs...in some cases just a simple start/stop button arrangement was necessary.

I've been priveliged to have worked under a very good tutor who taught me the importance of a DIY approach and not copying and pasting, (too often), which in hindsight has been invaluable.

Unfortunately i don't own Photoshop, so scripting from there, (as Roman suggests), isn't an option for now. It's a program on my acquisitions list and that should provide more motivation to part with the cash...it's just a matter of not indulging my addiction to buying hardware MIDI synthesisers for a while.

I'm a sucker for punishment so it looks like i'll try JSUI, (problems and all), because i've had a couple of books on Java Script lying around unread for too long and that will hopefully give me the impetus to get stuck in to them.

Thanks again everyone, your help is gratefuly received

Thanks especially for the pointers to the commonly used objects, (Matthew and Stefan), it was exactly what i needed and your advice on design considerations are also particularly useful. 

I'm a sucker for punishment so it looks like i'll try JSUI, (problems and all), because i've had a couple of books on Java Script lying around unread for too long and that will hopefully give me the impetus to get stuck in to them. 

Thanks again everyone, your help is gratefuly received
John


> Unfortunately i don't own Photoshop, so scripting from there, (as

> Roman suggests), isn't an option for now. It's a program on my

> acquisitions list and that should provide more motivation to part

> with the cash...it's just a matter of not indulging my addiction to

> buying hardware MIDI synthesisers for a while.

The requirements for a painting program to create buttons and GUI 

elements would not justify a purchase of Photoshop. Look into GIMP, its 

free and powerfull. Proffessional designers might not agree, but if you 

take into acount a learning curve for a painting program and its price...

You don't need to know and use all available tricks of such a monster.

There are also much less expensive commercial alternatives around...

Especially if you are concerned about user interfaces, better invest in 

Even the pretty pricey Lemur isn't much more expensive than a fully 

john inder wrote:
> Unfortunately i don't own Photoshop, so scripting from there, (as
> Roman suggests), isn't an option for now. It's a program on my
> acquisitions list and that should provide more motivation to part
> with the cash...it's just a matter of not indulging my addiction to
> buying hardware MIDI synthesisers for a while.

The requirements for a painting program to create buttons and GUI 
elements would not justify a purchase of Photoshop. Look into GIMP, its 
free and powerfull. Proffessional designers might not agree, but if you 
take into acount a learning curve for a painting program and its price...
You don't need to know and use all available tricks of such a monster.
There are also much less expensive commercial alternatives around...

Especially if you are concerned about user interfaces, better invest in 
Midi faderboxes/keyboards...
Even the pretty pricey Lemur isn't much more expensive than a fully 
blown Photoshop license...

On the GIMP/Photoshop debate, I'm pretty biased, being a CMYK print designer in real life, for which the GIMP just wouldn't cut it. For screen-based stuff, it's capable of course, although its GUI is certainly not a shining example of excellence in GUI design.

If you'd prefer to learn something of Photoshop - and knowing some Photoshop is a FAR more useful thing to have on your CV than the GIMP - then Photoshop Elements is cheap and basically the same thing minus the CMYK print-oriented features.

> On the GIMP/Photoshop debate, I'm pretty biased, being a CMYK print

> designer in real life, for which the GIMP just wouldn't cut it.

Thats what I hear in general from professionals, but I know also that 

its hard to change to, or judge a different tool if you know one by 

heart on the deepest level, by just taking a glimpse at another tool.

Even with simple tools, its hard to change or judge, for example I am 

using for my daily writing tasks, since its first occurance, AppleWorks. 

I would use it even for all database needs. Whenever I have a look at 

OpenOffice, Word, Ragtime, Filemaker or whatever, I stop pretty fast 

looking deeper into it, because it would need more time to get to the 

same speed with a lot of specific tricks on any of those surely much 

more sophisticated tools - its not worth it...

But If I'd start with a new tool, I'd choose one which would fit my 

momentary needs and one with potential to grow.

Gimp would fit into that category, as OpenOffice would do.

It seems these free software tools need to be crossplatform to be 

considered by evolving professionals, and that seems to be a crucial 

neccessity to actualy get them on a path as evolving professional tools...

Those who program them can't design them, it needs that close 

relationship between developers and users. (And if the user interface is 

bad by design at version 1.0, it might be hard to change it later...)

John Pitcairn wrote:
> On the GIMP/Photoshop debate, I'm pretty biased, being a CMYK print
> designer in real life, for which the GIMP just wouldn't cut it.

Thats what I hear in general from professionals, but I know also that 
its hard to change to, or judge a different tool if you know one by 
heart on the deepest level, by just taking a glimpse at another tool.
Even with simple tools, its hard to change or judge, for example I am 
using for my daily writing tasks, since its first occurance, AppleWorks. 
I would use it even for all database needs. Whenever I have a look at 
OpenOffice, Word, Ragtime, Filemaker or whatever, I stop pretty fast 
looking deeper into it, because it would need more time to get to the 
same speed with a lot of specific tricks on any of those surely much 
more sophisticated tools - its not worth it...
But If I'd start with a new tool, I'd choose one which would fit my 
momentary needs and one with potential to grow.
Gimp would fit into that category, as OpenOffice would do.
(Unfortunately Ardour not yet.)
It seems these free software tools need to be crossplatform to be 
considered by evolving professionals, and that seems to be a crucial 
neccessity to actualy get them on a path as evolving professional tools...
Those who program them can't design them, it needs that close 
relationship between developers and users. (And if the user interface is 
bad by design at version 1.0, it might be hard to change it later...)

if anyone has links to any nice lcd (or any nice UI) patches post em up! i'm always looking for things like monophonic sequencers, and breakpoint curve editors....

Quote: Stefan Tiedje wrote on Thu, 07 September 2006 20:48

> Thats what I hear in general from professionals, but I know 

> also that its hard to change to, or judge a different tool if 

> you know one by heart on the deepest level, by just taking a 

Sure. That's not the issue for print designers though. The problem with the GIMP for print design is that its CMYK ability is very very limited - no concept of true CMYK separation spaces and setup specs, no decent colour calibration/management/workflow, no PANTONE libraries, no additional spot colour/varnish plates, no duo/tri/quadtones, very limited ability to work with clipping paths, etc. Its shortcomings in these areas are quite extensive and would prevent me from doing almost anything useful in my day-to-day work.

To be fair, it was probably never envisaged as a tool for print designers, which Photoshop always was, even way back at 1.0. And making it so would entail purchasing Pantone licenses and probably other stuff, which would be problematic for its open-source nature.

Quote: Stefan Tiedje wrote on Thu, 07 September 2006 20:48
----------------------------------------------------
> Thats what I hear in general from professionals, but I know 
> also that its hard to change to, or judge a different tool if 
> you know one by heart on the deepest level, by just taking a 
> glimpse at another tool.

To be fair, it was probably never envisaged as a tool for print designers, which Photoshop always was, even way back at 1.0. And making it so would entail purchasing Pantone licenses and probably other stuff, which would be problematic for its open-source nature.


Creating/Developing GUIs for beginners?