GUI Widgets

Create a set of GUI widgets that get rendered in the viewer and generate signals / outputs.

  • Acton Button
  • Toggle Button
  • Radio Button
  • Slider
  • Text entry field
  • ...

smokris's picture
Prior art --- Buttons

Way back in April 2005, someone posted a couple of "button" examples ---

I haven't yet seen any examples of other widgets, however.

Having a clean, consistent way of normal-GUI interaction would be useful, IMO.

franz's picture
Neat idea

With all the touchpads coming, FTIR and such, i assume this would be a very nice addition.

smokris's picture

Pablo Martin contacted me about porting his MonoTouchLive interface ( to mac. The extra functionality these widgets would provide would be essential for that, I think.

monotouchlive-screenshot-0.png115.12 KB
monotouchlive-screenshot-1.png124.92 KB

Pablo's picture
Yes i stay neterested in port to mac

I really interested on Quartz due my aplication its graphical appz, and make intesive usage of graphics. Quarz its aaprently easy to use, i think buttons are easy, and all i see its easy, but the sliders i have cerated for monotouchlive think can be really hard to create. Its possible create that sliders, with actual tools available on quartz?

And i have other question, how can move obejct in the frontend, imagiane i just put simple graphic, no way to move to postion i wnat with the mouse? Lol i try to figure how put on anydesired position with any graphic or obejt just with simple mouse movement, i are new on quartz and i try to figure how work all.

I apreciate any comment !!

For port monotouchligve, i need reproduce, same sliders, and same buttorns, my project have:

Vertical slider, horizontal sliders, toggle buttons, act buttons, radio buttons etc etc........

Some sugestiosn for start work with quartz?

Pablo's picture
I think the major trouble

I think the major trOuble its create same sliders, vertical and horizontal. The slider its created with primittive objects on synthmaker.

Where can foudn good tutorial about quartz composer? I cant find a really complete tutorial about how use.

I really understand lot of things on QC , Synthmaer and QC its amazing seemed, but cant understan how place object on position i want....... example, if i create button, how put on the position i wnat on easy way? some way to drag obejct to position i wnat for leave on taht position ?

The only way i found to do that is connect muse but i cnat place on right position i want......

some sugestion ideas etc etc?

Quartz is so good for some things but so bad for others !! its relaly amazing not have UNDO !! LOL

One mre comment, sorry for my bad english : )

cwright's picture
slider demo

Hello Pablo.

I quickly created a rough slider demo. It uses the javascript patch to control the UI stuff. It could use some cleaning up, but the general idea is there.

When using coordinates, remember that Quartz Composer uses its own coordinate system. The X axis is always from -1.0 to 1.0, and the Y coordinates are usually similar, but vary by aspect ratio.

I don't know of any tutorials myself. I've just poked around a lot, and asked smokris a lot of questions :)

(P.S. Maybe undo will be in QCLeopard? I hope so too)

Slider Demo.qtz3.78 KB

smokris's picture
User-provided images vs. Rendered graphics?

Should we implement the widgets by:

  • 1. having the user provide images for every state, or
  • 2. having the patches themselves draw the widgets?

If 1., the user will have to do a lot of work to prepare each widget, but the patches will be fairly easy to write (and could probably be done entirely within QC, without needing to write custom patches).

If 2., the patch developers will have a lot of work to do, but the widgets will be much easier to use --- no need to create a bunch of custom images. If we implement them using splines, the widgets could be beautifully scalable (like the Leopard GUI). The ability for users to customize style would be relatively minimal compared to #1.


cwright's picture
2 + themes

If theming was added to 2, it could emulate 1 (minus needing a custom patch, of course). It's more work, but it looks like it will provide more flexibility in the long run.

smokris's picture
vector themes?

Cool. How do we theme a vector GUI? SVG?

(see also

cwright's picture
Vector Themes

I would imagine SVG or some Aqua-centric format. There aren't many full implementations of SVG, which leads me to believe that it's extremely complicated, perhaps unnecessarily so. A subset would probably suffice for what we need it to do here though.

I guess it would also be like a TrueType font in a way: each widget would have some kind of glyph index, and that would define how it looks, as well as some functional information perhaps. Stuff like: What happens on pointer-hover, primary click, secondary click, double/triple clicks, multiple-touches (yay multi-pointer interfaces :), and the like. We should look into how windows XP, vista, firefox, gtk, and other programs implement themes so we can get a decent sample set for flexibility. or pick a small number. I don't know.

yanomano's picture
GUI on fire

I'am interesting to work on some thing for QC GUI. I have done some test with PDF, from illustrator converted shapes and it works very well and fast at any resolution in QC (with a crop patch for rendering at the request pixels). With the release of GL tools, and To throw the ball back to kineme, I have thinked about design a macro pach to work with 3D in QC (like in 3D classic software 3DS and others) - switch between differents views: Perspective,front,back,top,bottom, right, left -Scaling and translate views with keyboard short cut+mouse drag -Simple grid on the Floor + horyzon line -Classic 3D axys. As i'am not a javascript guru I will need help for : -Mouse accumulation : drag multiple time with mouse on the screen from left to right for increment, and from right to left for decrement a stored value. - store values in a JS patch with index an to recall them.



yanomano's picture
Drag-able button contribution

Here is my first contribution : A drag-able color simple button : Place it anywhere with a mouse right clic, scale it, then it detect the mouse and a left clic. You can load multiple buttons in a 3D transformation patch and offset them ( the detection zone is offseted)

(as i can't upload a ".qzt", the file had a ".pdf"....replace the extension with ".qtz")


Drag_able sprite button.pdf17 KB

smokris's picture
qtz file uploads

yanomano -

I've adjusted the site settings so that you (and other users) can upload .qtz files now.


yanomano's picture
3D GUI 0.1

Thanks Smokris. Here is the 3D GUI concept Version 0.1 With 7 views menu : (front, back, left, right, top, bottom and perspective ) In perspective mode the trackball is enable. You can adjust the scale of the view with "translation Z" - Floor grid (0,0,0) - Normalised 3D Axys ( X red, green Y, Blue Z)

Comments, please... yanomano.

3D GUI.png
3D GUI.png88.34 KB
3D GUI.qtz169.91 KB

cwright's picture

That's pretty cool :) The next version of GL Tools is going to support structure/array inputs for easier vertex data stuff, and with this that could get really interesting :)

yanomano's picture
3D GUI 0.2

New on this update : -Grid adjustable size -3 axys types (infinite, center, arrows) Axys are now in the 0,0,0 coordinates. -3 points lighting with crosses preview for lights positions

I'am know working to add a user camera in the view menu and make a preview for it.


3DGUI 0.2.qtz192.52 KB