User interface basics

Vizard 7 » Reference » Graphical user interfaces (GUIs) » User interface basics

7.7

Vizard provides a handful of 2D graphical user interface (GUI) options to help you gather data from users. These GUIs are 2D or 'glued to the screen', so they're best used in worlds run in desktop modes or as introductory screens. Vizard has basic GUI elements like sliders, drop-down menus, and a handful of different buttons. These basic elements can be grouped together using the vizinfo, vizconfig, and vizdlg libraries or placed within pop-down menus using vizmenu. For a selection of standard prompts and Windows style dialog boxes take a look at vizinput. Vizard also supports gathering data from HTML forms through the vizhtml library.

In addition to these traditional 2D GUIs, Vizard also allows you to move from 2D selection to 3D selection of objects using screen to world picking and tool tips.

Basic GUI elements

The basic GUI elements are buttons, radio buttons, checkboxes, text boxes, slider bars, progress bars, and droplists. Check out the section on basic GUI elements for more details on the distinctions between these. You can get data from GUI elements either by accessing them spontaneously or by using event callbacks.

#Add a progress bar.
bar = viz.addProgressBar('How much?')
#Place it in the middle of the window.
bar.setPosition(.5,.5)
#Get its data.
bar.get()

Organizing groups of GUI elements and setting up pop-down menus

If you've got multiple GUI elements within a world, you have several choices for organizing them. A vizinfo object creates a panel and adds them in a list from top to bottom. Vizmenu allows you to place them in pop-down menus and vizconfig creates a tabbed panel for their display. Advanced layouts of GUI elements are supported through the vizdlg library. You can also change the appearance of GUI elements or groups of GUI elements by changing their fonts or color schemes

#Add the vizinfo panel with variety of GUIs.
import vizinfo
info = vizinfo.InfoPanel('Give me feedback!')
button = info.addLabelItem('Push me',viz.addButton())
slider = info.addLabelItem('Slide me',viz.addSlider())
checkbox = info.addLabelItem('Check me',viz.addCheckbox())

Prompts and dialogue boxes

The vizinput library has a set of standard dialogue boxes that you can use as prompts.

import vizinput

#prompt for a string
userName = vizinput.input('Enter your name:')
print(userName )

HTML forms

HTML forms are commonly used to pass data from a browser to a web server. Data is entered through input fields (e.g. text fields, check boxes, radio buttons) and submitted with a button click. The vizhtml module supports collecting data from HTML forms displayed in the Vizard graphics window and within a remote browser on the local network.