Vizard 7 » Reference » Graphical user interfaces (GUIs) » Organizing GUIs » vizdlg panels
7.7
This section covers the Panel, TabPanel, and GridPanel objects of the vizdlg module.
A Panel object creates a box that GUI elements and other components can be added to. A variety of methods are available that affect the appearance and layout of the Panel and the items within. By nesting Panels within Panels virtually any arrangement of components can be achieved. The following code shows how Panels can be nested to create a custom layout of GUI items:
The following command creates a Panel object:
|
Command |
Description |
|
vizdlg.Panel(window=viz.MainWindow, layout=vizdlg.LAYOUT_VERT_LEFT, align=vizdlg.ALIGN_LEFT_TOP, skin=None, margin=None, spacing=5, padding=0, fontSize=16, theme=None, drawOrder=0, background=True, border=True) |
Creates a Panel object. window: specifies the window to add the panel to. layout: specifies the layout of items in the panel. See the table below for possible layout modes. align: specifies the alignment mode of the panel. See the table below for possible alignment modes. skin: sets the skin of the panel. The skin will be applied to all sub-items. margin: sets the outer margin of the panel in pixels. spacing: sets the spacing between the item cells, in pixels. padding: sets the padding around the items, in pixels. fontSize: sets the font size of items in the panel. theme: sets the theme of the panel drawOrder: sets the draw order of the panel. background: sets the visibility of the panel background. border: sets the visibility of the panel border. |
The following methods can be called on the Panel object:
|
Method |
Description |
|
<panel>.addItem(item, align=None, visible=True, insert=None, fontSize=None) |
The item can be any node3D object. This includes other panels, GUI elements, dialog components, and texture quads.
See the table below for align modes.
The insert argument determines the item's order placement on the panel. A value of 0 means the item will be the first one added to the panel. If no value is given the item is added after all other items.
The fontSize argument determines the size of the item. If no value is given the panel fontSize value is used. |
|
<panel>.addSeparator(ratio) |
Draws a vertical or horizontal line across the Panel depending on the Panel layout mode.
The ratio argument defines the line length to panel length ratio. If the value is one, the line is drawn all the way across the panel. |
|
<panel>.removeItem(item, recurse=True) |
Removes the specified item from the panel. The item will be unparented from the panel root. |
|
<panel>.getItems() |
Returns a list of all the items that are in the panel. |
|
<panel>.setTheme(theme) |
Sets the theme of the panel. It will be applied to all sub-items. |
|
<panel>.setSkin(skin) |
Sets the skin of the panel. It will be applied to all sub-items. |
|
<panel>.fontSize(size) |
Sets the font size of all the sub items of a panel. If an item's font size was given when it was added to the panel, it will not change when this method is called. |
|
<panel>.drawOrder(order) |
Sets the draw order of the panel. |
|
<panel>.disable() |
Disables GUI elements in the panel. |
|
<panel>.enable() |
Enables GUI elements in the panel. |
|
<panel>.getMargin() |
Returns the outer margin of the panel in pixels |
|
<panel>.setMargin(margin) |
Sets the outer margin of the panel in pixels. |
|
<panel>.getPanelAlignment() |
Returns the alignment mode of the panel. |
|
<panel>.setPanelAlignment(alignment) |
Sets the alignment mode of the panel. See the table below for possible alignment modes. |
When items are added to a Panel they are each placed within a cell. Although the cells are not visible, a variety of cell related methods are available on the Panel object. These methods affect the layout,alignment, and spacing of items:
|
Method |
Description |
|
<panel>.getCellAlignment() |
Gets the alignment mode for items within their cells. |
|
<panel>.setCellAlignment(alignment) |
Sets the alignment mode for items within their cells. See the table below for possible alignment modes. |
|
<panel>.getCellLayout() |
Gets the layout of item cells in the panel. |
|
<panel>.setCellLayout(layout) |
Sets the layout of item cells in the panel. See the table below for possible layout modes. |
|
<panel>.getCellSpacing() |
Gets the spacing between the item cells, in pixels. |
|
<panel>.setCellSpacing(cellSpacing) |
Sets the spacing between the item cells, in pixels. |
|
<panel>.getCellPadding() |
Gets the padding around the item cells, in pixels. |
|
<panel>.setCellPadding(padding) |
Sets the padding around the item cells, in pixels. |
|
<panel>.getCellPaddingLeft() |
Gets the padding on the left side of item cells, in pixels. |
|
<panel>.setCellPaddingLeft(padding) |
Sets the padding on the left side of item cells, in pixels. |
|
<panel>.getCellPaddingRight() |
Gets the padding on the right side of item cells, in pixels |
|
<panel>.setCellPaddingRight(padding) |
Sets the padding on the right side of item cells, in pixels |
|
<panel>.getCellPaddingTop() |
Gets the padding on the top side of item cells, in pixels |
|
<panel>.setCellPaddingTop(padding) |
Sets the padding on the top side of item cells, in pixels |
|
<panel>.getCellPaddingBottom() |
Gets the padding on the bottom side of item cells, in pixels |
|
<panel>.setCellPaddingBottom(padding) |
Sets the padding on the bottom side of item cells, in pixels |
Use one of the following alignment modes for the alignment argument when calling either <panel>.setPanelAlignment() or <panel>.setCellAlignment(alignment):
|
Mode |
|
vizdlg.ALIGN_LEFT_TOP |
|
vizdlg.ALIGN_RIGHT_TOP |
|
vizdlg.ALIGN_LEFT_BOTTOM |
|
vizdlg.ALIGN_RIGHT_BOTTOM |
|
vizdlg.ALIGN_CENTER |
|
vizdlg.ALIGN_LEFT_CENTER |
|
vizdlg.ALIGN_RIGHT_CENTER |
|
vizdlg.ALIGN_CENTER_TOP |
|
vizdlg.ALIGN_CENTER_BOTTOM |
Use one of the following layout modes for the layout argument when calling <panel>.setCellLayout():
|
Mode |
|
vizdlg.LAYOUT_VERT_LEFT |
|
vizdlg.LAYOUT_VERT_CENTER |
|
vizdlg.LAYOUT_VERT_RIGHT |
|
vizdlg.LAYOUT_HORZ_TOP |
|
vizdlg.LAYOUT_HORZ_CENTER |
|
vizdlg.LAYOUT_HORZ_BOTTOM |
A TabPanel object creates a Panel with tabs that can be arranged either horizontally or vertically. Panels, GUI elements, dialog components, and texture quads can all be displayed under a tab.
The following command creates a TabPanel object:
|
Command |
Description |
|
vizdlg.TabPanel(**kw) |
Creates a TabPanel object. **kw refers to any keyword argument that the Panel command accepts. |
A TabPanel has the following methods in addition to the standard Panel methods:
|
Method |
Description |
|
<TabPanel>.addPanel(name,panel,align=ALIGN_LEFT_TOP) |
Adds a tab and panel. The string value passed in the name argument will display on the tab.
The panel argument can be any node3D object including Panel objects, GUI elements, dialog components, and texture quads.
See the table above for align modes. This determines where in the TabPanel the item will be displayed. |
|
<TabPanel>.removePanel(p) |
Removes the specified panel. |
|
<TabPanel>.selectPanel(p) |
Selects a panel by index, name, or handle. |
|
<TabPanel>.setTheme(theme) |
Sets the theme of the panel. It will be applied to all sub-items. |
|
<TabPanel>.remove() |
Removes the tabbed panel. |
A GridPanel object creates a Panel that arranges items is a table format. Rows of items can be added and removed and the alignment of items can be specified.
The following command creates a GridPanel object:
|
Command |
Description |
|
vizdlg.GridPanel(cellAlign=vizdlg.ALIGN_LEFT_CENTER,**kw) |
Creates a GridPanel object with items aligned according to the cellAlign argument
**kw refers to any keyword argument that the Panel command accepts. |
A GridPanel has the following methods in addition to the standard Panel methods:
|
Method |
Description |
|
<GridPanel>.addRow(items) |
Adds a row to the panel and returns the row object. The items argument can be a list of node3D objects including panels, GUI elements, dialog components, and texture quads. |
|
<GridPanel>.removeRow(row) |
Removes a row from the panel |