Vizard 7 » Reference » Graphical user interfaces (GUIs) » GUI elements » GUI elements
7.6

GUI elements

The basic GUI elements are:

These elements can exist on their own or they can be grouped together as a vizinfo object or a vizmenu pop-down menu. In general, you can place a GUI element where you want it on the screen using <GUI element>.setPosition(<coordinates>), where the  <coordinates> are window coordinates going from 0 to 1 and (0,0) is at the lefthand bottom corner of the screen. To set the state of a GUI element, use <GUI element>.set(<valueCheck out the section on getting data from GUI elements for details about accessing the input in your script. For a list of the commands you can use with GUI elements, check out the GUI command table.

Buttons and checkboxes

Buttons and checkboxes are just what they sound like-- onscreen buttons and checkboxes. The main difference between them is that buttons immediately bounce back to the up state after they're clicked while checkboxes remain selected. Radio buttons are a specific kind of button that come in groups where only one radio button in a given group can be selected at one time.  Label buttons are buttons with text on them. To change the text on a label button, use <button>.message(<string>).

myButton = viz.addButton() #Add a button.
myButton.setPosition(.5,.8) #Set its position.
myButton.setScale(3,3) #Scale it.

myRadio1 = viz.addRadioButton(1) #Add a radio button to group 1.
myRadio2 = viz.addRadioButton(1) #Add another one.
myRadio1.setPosition(.45,.5) #Set their positions.
myRadio2.setPosition(.55,.5)

Sliders and progress bars

Sliders consist of a bar and a tick that slides along it. You can change the size of the tick, the size of the bar, the margin from which it can go to the edge, and the textures applied to its tick and slider, and the orientation of the bar. Progress bars are similar, but they contain text and have a shaded area that slides along the bar instead of a tick.

mySlider = viz.addSlider() #Add a slider.
mySlider.vertical() #Orient it vertically.
mySlider.setPosition(.25,.5) #Set its position.
mySlider.ticksize(4,4) #Increase the size.

myBar = viz.addProgressBar('How much?') #Make a bar with its text.
myBar.setPosition(.5,.2) #Set its position.
myBar.set(.5) #Set the current level.

Text boxes

Text boxes are fields for users to enter typed data. To make more room for the user to write, use <text box>.length(<scale>) or set the overflow properties using <text box>.overflow(<overflow flag>). To set the message inside a text box, use <text box>.message( <string> ).

#Add a text box.
box = viz.addTextbox()
#Make it twice as long.
box.length(2)
#Place it in window.
box.setPosition(.5,.8)
#Have it grow when text reaches its boundary.
box.overflow(viz.OVERFLOW_GROW)

Droplists

Drop lists are drop-down menus. You can add and clear items from a droplist.

drop = viz.addDropList() #Create a drop-down list.
drop.setPosition( .5,.5) #Move it.
items = ['Duck', 'Pig', 'Cat', 'Emu'] #Add a list of items.
drop.addItems( items )

See also

In this section:

User interface basics

GUI elements

Getting data from GUI elements

GUI appearance

vizinfo

vizmenu

vizinput

vizdlg

vizconfig

viztip

Displaying HTML

GUI command table

Other sections:

Event Basics

Action basics

Text node basics

Example scripts:

vizInfo

vizMenu

Prompt