UIg

UIg Gadget Library

uig.tox is an experimental gadget library that can help you build user interfaces. See also TUIK which is the standard UI kit for TouchDesigner. Like TUIK, UIg is made with TOPs, CHOPs and Panel components. UIg gadgets are internally lightweight and easy to understand. They are visually neutral and semi-transparent to accommodate layering of information. Panels are designed to be stretchable and touch-screen friendly. The text fields are designed for maximum readability at a distance. UIg can be used a guide to build your own gadget library. It's the basis of the Mixxa user interface.

Watch the UIg guide on vimeo: http://www.vimeo.com/61035488 Or you can use the guide below. ze0time, author

Install UIg Version 48, March 2013

UIg version 48 is in the palette of any TouchDesigner 077 and 088 after March 20, 2013 under the UI tab. The most recent version is also here in the forum: [1].

Retrofit UIg

You can replace any prior /uig with a new version by deleting the old one, then drag-dropping the latest uig in from the palette, or a uig.tox from a folder or the Desktop. The new one will be placed at /uig. Note that installing uig creates one Root Variable, UIG, which is the path to where uig gets created. Some gadgets' structure have changed so you may have to hand-edit and make some adjustments.

Make a Control Panel with UIg

Tutorial Video Transcript

1. start a default TD from the desktop
2. go to the root component, /
3. show it is in palette, but
4. turn off palette
5. and get it from the UIg wiki page
6. make project1 panel size be half-res or 640 x 360
7. drag uig from desktop to /
8. open viewer on /uig
9. go into /project1
10. delete all OPs except moviein1
11. change Movie In TOP to have the sky image (press + on its File parameter)

Let's say we want to build an interface to pre-process an image to make it a repeating texture, alter its brightness, and pre-blur it a bit. You want to pay attention to the gadgets in 2 places: in the network, and in the panel.

1. drag/drop the 2nd vertical slider gadget (whose rollover help is "Vertical Slider ") onto network – called sliderv.
2. connect to a Null to obsetve the output of any gadget
3. click Viewer Active (+) on gadget and operate the slider, see null1 change in range 0 to 1
4. notice the slider is also represented in the control panel for /project1 (floating window right side)
5. click Operate> and move the slider up and down to see its value change
6. another way to see the same panel is to press the square icon in the corner "Open Viewer"
7. also, right click on the gadget and select View… to get it in a floating window
8. make the current node to be the sliderv gadget (click the nodename). see it's a Slider component type
9. select the Layout tab in the parameter dialog and observe the panel size
10. click-drag the slider in the panel away from the bottom left corner
11. drag the the gadget around the panel and when you let go, see that the parameter X and Y update in the parameter dialog
12. make the gadget 5 pixels wider by clicking the +5 button in the "w" dialog at the bottom of the Operate> panel
13. right-click on the output of moviein1 and add a Luma Level TOP
14. export the null1 to the Luma Level TOP's Gamma parameter and operate the slider
15. notice the image will only get darker. on the slider component, in its Slider tab, turn off Clamp V High and operate the gadget above its range
16. alternately you can increase the range of the slider: insert a Math CHOP before the Null
17. make the Math CHOP's To Range be 0 and 2. operate the gadget
18. add a view gadget and attach the Movie In to it.
19. position the view gadget at the top left of the panel. put the slider to the right.
20. add another view gadget and attach the output of the Luma Level CHOP it
21. let's add blur. add a viewu slider and a Blur TOP. check we want blur to go up to 100. re-range the output og viewu to 0-100 and export to Blur. send the output of blur to the input of viewu
22. add a Tile TOP
23. add a view gadget. attach it to the Tile TOP and make it large
24. add a slideruv gadget. attach a Null. Observe there are two channels output from the slideruv
25. export to the Overlap U and V on the Tile TOP's Tile page
26. position slideruv on the panel
27. now add a che ck gadget.
28. see we want the the Tile TOP's Repeat X and Y parameter to be 1 or 2. use a Math CHOP and change its range to 1 to 2.
29. make out2 and preceed it with a Level TOP set at 30%
30. go up one level to the root (/) and use a Null to see the output of /project1
31. change the Background parameter to ./out2 so you can see a muted version of the texture in the background
32. we now have a full application and can press F1 to bring it up

Alternate Procedure

1. Start a default TouchDesigner, or start an existing .toe file.
2. Go to the root (/) component.
3. Drag-drop the uig component from uig.tox in a folder, or from the palette (077 or 088 from Jan 25, 2013 or later), in the network. (uig is automatically placed in / anyway.)
4. Right-click on the /uig component and select View... This is the UIg Authoring Panel.
5. Click the Edit> button to expose the gadget positioning area. It points to /project1 by default.
6. In your TouchDesigner network, now go into /project1, or replace /project1 with any panel's path.
7. Drag-drop any gadget from the UIg Authoring Panel into the /project1 network. You can operate the new gadget by clicking the Operate> tab.
8. Gadgets you drag onto the Edit> area will appear in the component network, and vice versa.
9. Drag-drop a few more gadgets from the Authoring Panel into the Edit> area or the component network.
10. In the network, on the uig gadgets with a (green) CHOP output, attach a Null CHOP to see the values coming out of the gadget: right-click on the output of the gadget, and select CHOP then Null.
11. On gadgets with a TOP input, attach any TOP to it, such as a Movie In TOP.
12. You can play around with gadgets there, then at some point, you will want to look at and re-arrange the control panel /project1 containing your first gadgets. One the Edit> tab of the Authoring Panel, can click/drag the gadget, anjust the sizes via teh +-5 +-1 controls at the bottom.
13. Click the Operate> tab in the UIg floating window to operate your gadgets in the panel.
14. In the network, you will want to hook the gadgets together to TOPs or other operators. Press Tab to get the OP menu and lay down, for example, a Movie In TOP connected to a Transform TOP connected to an Out TOP.
15. Next take the output of any of your gadgets that outputs a CHOP, and attach it to a new Null CHOP (just to see values) and then to a Math CHOP. You will later adjust lower-upper "To Range" values in the Range tab of the Math CHOP.
16. Send the Math CHOP to a Null CHOP and then export its channel(s) to any parameters of the Transform TOP, say Translate X. To do this, click on the channel in the Null CHOP's viewer and drag it to the Transform TOP's parameter. You should see the export line between the two.
17. Now operate the gadget you just connected to see its effect on the Transform TOP.
18. All sliders in /uig are in the range 0 to 1. Adjust the lower/upper range of the Math CHOP to suit the range of the parameter in the Transform TOP. Like -1 to +1 in the To Range of the Math CHOP when exporting to the Translate channels of the Transform TOP.
19. Finally, insert a Spring CHOP after the Math CHOP, and operate the gadget again. You can double the Spring Constant parameter to get more action.
20. You can hook up other gadgets in your container to other parameters of the Transform TOP.
21. Then go back up to / and on the /project1 parameters, set Background to ./out1, or attach a Null TOP to the output of /project1. Play with the gadgets in /project1 to see their effect on the image.
22. Finally, click File -> Save Project.toe As ... name your file FirstTry.1.toe and save it.