Vizard 7 » Reference » Graphical user interfaces (GUIs) » Organizing GUIs » vizconfig advanced
7.6

vizconfig advanced

To create configurable objects that encapsulate both vizconfig GUI items and objects in the virtual world write your own class that extends from Configurable.

Note: In order to follow this section some knowledge of object oriented programming is required.

Extending the Configurable class

The BasicConfigurable class discussed in the last section provides a wrapper for Configurable objects and implements a table like UI for displaying GUI elements. Extending the base class Configurable directly and implementing the same table UI is not difficult to do. Objects in the virtual world can be added as data attributes to the derived class and other customizations can be made.

 

This is demonstrated in the following code. A ball model and methods related to it's rotation speed are added to the ballObject configurable. The table UI is created in the CreateConfigGUI method, which is automatically called when the Configurable is registered:

import viz
import vizconfig

class ballObject(vizconfig.Configurable):
    def __init__(self):
        vizconfig.Configurable.__init__(self,'Ball')

        self.ball = viz.add('ball.wrl',pos=(0,1.5,2))
        self.setSpeed(10)

        #Automatically register configurable
        vizconfig.register(self)

    def setSpeed(self,val):
        self.ball.speed = val
        self.ball.runAction(vizact.spin(0,1,0,val))
        self.updateConfigItem('speed')

    def getSpeed(self):
        return self.ball.speed

    def createConfigUI(self):
        ui = vizconfig.DefaultUI()
        ui.addBoolItem('visible',self.ball.visible,self.ball.getVisible)
        ui.addFloatRangeItem('speed',[-180.0,180.0],self.setSpeed,self.getSpeed)
        ui.addConfigItem('texture',viz.addTexQuad(texture=viz.add('ball.jpg'),size=30))
        return ui

viz.go()

gallery = viz.add('gallery.ive')
ball = ballObject()

#Manually set speed which will automatically update UI
vizact.onkeydown('s',ball.setSpeed,0)

The virtual interface of the Configurable class contains the following methods that can be overridden:

Method

Description

<Configurable>.createConfigUI()

Use this method to create an object that contains UI controls for this configurable.

<Configurable>.onConfigActivate()

This will be called when the configurable UI is activated.

<Configurable>.onConfigDeactivate()

This will be called when the configurable UI is deactivated

Configurable objects also contains the following methods:

Method

Description

<Configurable>.updateConfigUI()

Updates the UI state of all items belonging to the configurable.

<Configurable>.updateConfigItem(name)

Updates the UI state of a specific item belonging to the configurable.

<Configurable>.getConfigName()

Gets the name of the configurable.

<Configurable>.getConfigUI()

Returns the root UI node for the configurable. Can be None if not yet created.

<Configurable>.getOrCreateConfigUI()

Returns the root UI node for the configurable. If one does not exist the createConfigUI() method will be called.

Creating the User Interface for a Configurable object

The UI of a Configurable object is defined when it's CreateConfigGUI method is called. This occurs automatically when the object is registered with a configuration window. Any two dimensional Vizard node that is returned from this method will display in the configuration window.

 

The vizconfig module provides a DefaultUI object that manages items and displays the elements in a table format with names on the left and the item on the right. To create a  DefaultUI object use the following:

Command

Description

vizconfig.DefaultUI()

Returns a table UI that manages and displays GUI items and other node3D objects.

A DefaultUI object has the following methods available:

Method

Description

<DefaultUI>.addConfigItem(name,

                                     item)

Adds any node3D object to the UI (e.g. display an image in the UI by creating a texture quad).

<DefaultUI>.addInteractiveItem(name,

                                           object)

Creates an interactive shell that allows the user to execute Python commands on the object specified.

<DefaultUI>.addCommandItem(name,

                                         label,

                                         fdown=None,

                                         fup=None)

Creates a button that will call the specified functions when pressed/released. The label value is a string that labels the button.

<DefaultUI>.addBoolItem(name,

                                  fset=None,

                                  fget=None)

Creates a checkbox. The fset argument specifies the function to call when the GUI has been updated. The value returned by the function specified in the fget argument will set the checkbox state.

<DefaultUI>.addIntItem(name,

                                range=[None,None],

                                fset=None,

                                fget=None)

Creates a textbox that will allow the user to enter integer values. If a range is given only values within that range will be accepted. The fset argument specifies the function to call when the GUI has been updated. The value returned by the function specified in the fget argument will appear in the textbox.

<DefaultUI>.addFloatItem(name,

                                   range=[None,None],

                                   fset=None,

                                   fget=None)

Creates a textbox that will allow the user to enter float values. If a range is given only values within that range will be accepted. The fset argument specifies the function to call when the GUI has been updated. The value returned by the function specified in the fget argument will appear in the textbox.

<DefaultUI>.addIntRangeItem(name,

                                        range,

                                        fset=None,

                                        fget=None)

Creates a progress bar that will allow the user to control an integer range. The fset argument specifies the function to call when the GUI has been updated. The value returned by the function specified in the fget argument will set the progress bar position.

<DefaultUI>.addFloatRangeItem(name,

                                           range,

                                           fset=None,

                                           fget=None)

Creates a progress bar that will allow the user to control an integer range. The fset argument specifies the function to call when the GUI has been updated. The value returned by the function specified in the fget argument will set the progress bar position.

<DefaultUI>.addTextItem(name,

                                   fset=None,

                                   fget=None)

Creates a textbox. The fset argument specifies the function to call when the GUI has been updated. The value returned by the function specified in the fget argument will appear in the textbox.

<DefaultUI>.addChoiceListItem(name.

                                          choices,

                                          fset=None,

                                          fget=None)

Creates a droplist that will allow the user to select from a list of choices. The choices argument accepts a two dimensional list. The first position of each element is the name that appears in the droplist. The second position is it's value. The fset argument specifies the function to call when the GUI has been updated. The value returned by the function specified in the fget argument will set the droplist selection.

<DefaultUI>.addChoiceRadioItem(name,

                                             choices,

                                             fset=None,

                                             fget=None)

Creates a group of radio buttons that will allow the user to select one radio button at a time. The choices argument accepts a two dimensional list. The first position of each element is the label that appears next to the radio button. The second position is it's value. The fset argument specifies the function to call when the GUI has been updated. The value returned by the function specified in the fget argument will determine which radio button is active.

Note: If you wish to change the layout of items, this is possible by extending from the base class ConfigUI and arranging the items in the derived class. Take a look at the TableUI class in vizconfig.py for an example of this.

vizconfig basics

vizconfig advanced