The Page widget

Author: Christian Mayer
Available since: 2012

Description

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

Settings

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

Element	Attribute
	Name	Content	Description
page	name	string	title of this page
	flavour	string	Selection of a display variant. See also Flavour.
	align	left, right or center
	ga	address
	visible	true or false	Displays a widget with the page name being a link to the page
	type	text, 2d or 3d
	size	fixed, scaled or contained
	backdropalign	string
	backdrop	URI
	showtopnavigation	true or false	Display the top navigation that shows the currently displayed page with all parent pages.
	showfooter	true or false	Shows a footer at the bottom of the page. The footer content is defined in the config file.
	shownavbar-top	true or false	Shows the defined navigation bar on top of the page
	shownavbar-bottom	true or false	Shows the defined navigation bar at the bottom of the page
	shownavbar-left	true or false	Shows the defined navigation bar at the left side of the page
	shownavbar-right	true or false	Shows the defined navigation bar at the right side of the page
	bind_click_to_widget	true or false	use the whole widget area to react on click events

../../../_images/en_config_widgets_page_index_editor_attributes.png — 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:

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.

Widgets

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.

Tip

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.

Allowed child-elements and their attributes

All widgets are allowed in the page widget.

Examples

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

Caution

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

Footnotes