The Page widget

Author: Christian Mayer
Available since: 2012


Creates a new sub page and adds a corresponding link to the current page.


For a general understanding of how the configuration files are structured and what elements and attributes are it is recommended to read this section first: Pages and structure of CometVisu.

The behaviour and appearance of the Page widget can be influenced by using certain attributes and elements. The following tables show the allowed attributes and elements and their possible values. The screenshots show, how both can be edited in the editor.

Attributes underlined by ….. are mandatory, all the others are optional and be omitted.

Allowed attributes in the Page-element









title of this page



Selection of a display variant. See also Flavour.


left, right or center




true or false

Displays a widget with the page name being a link to the page


text, 2d or 3d


fixed, scaled or contained






true or false

Display the top navigation that shows the currently displayed page with all parent pages.


true or false

Shows a footer at the bottom of the page. The footer content is defined in the config file.


true or false

Shows the defined navigation bar on top of the page


true or false

Shows the defined navigation bar at the bottom of the page


true or false

Shows the defined navigation bar at the left side of the page


true or false

Shows the defined navigation bar at the right side of the page


true or false

use the whole widget area to react on click events


Attributes in the editor (simple view) [1]

2D pages

At 2D pages it is possible to freely position the widgets on the page as well as use a background image. A typical use case is a floor plan as backdrop where in each room the relevant widgets are positioned accordingly.

Background image

The size of the background in relation to the browser window is controlled by the attribute size. The following holds:

size attribute
The attribute backdropalign can move the position of the background image. By default it is centered, which is the same as a value of 50% 50%.
Setting 0px 50% would place it on the left side but vertical centered and 0px 0px would place it on the left and top of the page.


For the widgets it is important to set the x and y attributes of its layout element. These values must have a CSS unit. Typical would be a value like 12% for a relative position and 123px for an absolute position in pixel.


To figure out the optimal value for the position it is possible to use the development mode of the modern browsers: this mode is activated by pressing ctrl + shift + i.

First the widget must be roughly positioned in the config file, then this config must be opened in the browser where the development mode must be activated. Then the “box with cursor” must be clicked followed by a click on the widget of interest in the browser window itself. This widget is now shown in the DOM tree. Probably it is necessary to go a few levels up there so that in the end the line with <div class="widget ... is selected. There you can see at the style attribute the values set in the config file for left and top. These values can be changed now (most easily in the right part of the window in the “styles” section). These changes are immediately shown in the browser window. The determined value must then be transferred to the config file to make them persistent.

development mode

Allowed child-elements and their attributes

All widgets are allowed in the page widget.


It is possible to manually edit the visu_config.xml and add an entry for the Page widget.


Make sure that you only use UTF-8 encoded characters by settings the encoding in your XML-editor to UTF-8 mode!