Functions for controlling the layout

Todo

  • Distinction between standard construction vs. 2D pages

Each page element (= page of the visualization) is basically divided into 12 columns. This also applies when using a navbar on the left or right side. In this case, the page element occupies a narrower area on the screen, but still has 12 columns.

The most important element for influencing the overall layout is the `` layout`` child element, which is available in all visible widgets. In the following example, the line widget lists all the attributes that are explained in more detail in the following sections:

Element

Attribute

Structure

Name

Content

Description

line
  • layout

colspan

decimal

Amount of columns this widget should be wide.

colspan-m

decimal

Overrules the amount of columns on a medium screen.

colspan-s

decimal

Overrules the amount of columns on a small screen.

rowspan

decimal

Amount of rows this widget should be high.

x

string

Horizontal position of the widget for 2D pages.

x-s

string

Horizontal position of the widget for 2D pages on a small screen.

x-m

string

Horizontal position of the widget for 2D pages on a medium screen.

y

string

Vertical position of the widget for 2D pages.

y-s

string

Vertical position of the widget for 2D pages on a small screen.

y-m

string

Vertical position of the widget for 2D pages on a medium screen.

z

string

Reserved for future use.

width

string

Width for the widget for 2D pages.

width-s

string

Width for the widget for 2D pages on a small screen.

width-m

string

Width for the widget for 2D pages on a medium screen.

scale

true or false

Enable/Disable scaling layout values relative to backdrop on 2d pages (default: true).

scale-s

true or false

Enable/Disable scaling layout values relative to backdrop on 2d pages on a small screen (default: true).

scale-m

true or false

Enable/Disable scaling layout values relative to backdrop on 2d pages on a medium screen (default: true).

The attribute colspan

Colspan determines how many columns the widget should occupy on a large display. The default value is colspan="6", if not specified. This sets the widget width to half the page size. Thus, two widgets fit next to each other, only then is the next row started with the next widget.

The Colspan attribute may also contain non-integer information, but it should be noted (for visual reasons) that the sum of the colspan definitions per row returns 12.

../_images/Layout_colspan1.png

Simple text widgets with different colspan values

The special case colpan="0" creates a widget with the minimum width of the content.

For each widget, colspan-m or colspan-s can also be used to specify a widget width for smaller displays. This is necessary because in practice the font size and the size of the control surfaces (e.g. button size) scale differently than the actual display size.

Furthermore, colspan-m and colspan-s can also affect the layout in portrait format, if the same config is used on several devices or if the display should be rearranged on a device when the screen is rotated.

Important

Whether a display is recognized as normal, medium or small depends not on the physical resolution of the display, but on the viewport size, which is defined for each device based on the display size (screen size). An overview provides eg.`<viewportsizes.com>`__

An example is shown below in which the widgets are arranged differently on 3 display sizes.

<text>
    <layout colspan="3" colspan-m="6" colspan-s="12" rowspan="1"/>
    <label>Colspan 3/6/12, Rowspan 1</label>
</text>
<text>
    <layout colspan="3" colspan-m="6" colspan-s="12" rowspan="1"/>
    <label>Colspan 3/6/12, Rowspan 1</label>
</text>
<text>
    <layout colspan="3" colspan-m="6" colspan-s="12" rowspan="1"/>
    <label>Colspan 3/6/12, Rowspan 1</label>
</text>
<text>
    <layout colspan="3" colspan-m="6" colspan-s="12" rowspan="1"/>
    <label>Colspan 3/6/12, Rowspan 1</label>
</text>
../_images/Layout_colspan_screensize_large.png

Representation at a resolution of 1100x640

../_images/Layout_colspan_screensize_medium_640x400.png

Representation at a resolution of 640x400 (Smartphone in landscape mode)

../_images/Layout_colspan_screensize_small_400x640.png

Representation at a resolution of 400x640 (Smartphone in portrait mode)

The attribute rowspan

Rowspan determines the number of lines a widget occupies. Currently only integer statements are allowed for rowspan. Most widgets do not require rowspan because the default value rowspan="1" is sufficient.

Necessary or meaningful may be the specification for the following widgets:

  • Image

  • Web

  • Rsslog- and Rss-plugin

  • Diagram-plugin

  • Group

In the example below, the rowspan="5" forces the image widget to be the same as the five individual widgets on the left.

../_images/Layout_rowspan_mitImage.png

Image-Widget with rowspan=”5”

Because the widget arrangement is one after the other in rows, using different values for rowspan can create empty areas.

../_images/Layout_rowspan.png

Empty areas in interaction with the rowspan element

In such cases, the use of the Group widget in conjunction with the nowidget attribute can be remedied.

../_images/Layout_rowspan_mitGroup.png

Control of the arrangement with an invisible group(attribute nowidget="true")

Below the xml code for the screenshot with the correct arrangement.

<group nowidget="true">
    <layout colspan="6"/>
    <text>
        <layout colspan="6" rowspan="1"/>
        <label>Colspan 6, Rowspan 1</label>
    </text>
    <text>
        <layout colspan="6" rowspan="1"/>
        <label>Colspan 6, Rowspan 1</label>
    </text>
    <text>
        <layout colspan="6" rowspan="1"/>
        <label>Colspan 6, Rowspan 1</label>
    </text>
</group>
<text>
    <layout colspan="6" rowspan="3"/>
    <label>Colspan 6, Rowspan 3</label>
</text>