Elements

Elements, such as buttons, images, or inputs, are created for each page individually.
Each element requires two types of information:

• Control parameters
• Design parameters

The former are individual for each type of element, while the latter are mostly information that are similar/consistent for all kinds of elements.

Control parameters

Each element offers a set of parameters that are the same for each of them:

• Element name: The name of this element. Not visible for the user, only used to identify elements within the config editor
• Element title: The text that is written on the element, if the element supports this
• Element type: A dropdown list controlling what type of element this is
  • Go to Page - Button
  • Execute function - Button
  • Checkbox
  • Text input
  • Barcode scanner input
  • QR Code
  • iFrame
  • Post iFrame
  • Link
  • Note
  • Image/Video
  • Progress bar
  • Loading spinner
  • HRV spinner
  • Option dropdown
  • Slider
• Show if key: If a keyname is given here, a target key-group and value-to-be input field will appear. Display this element only if the value of the value in the app (in the key-group, stored as the given key) equals the value-to-be entered here
• Move into screen: If set, the element will slide into the screen from the given direction. (The animation will take half a second, and the element starts with half a screen's width/height of an offset.

Design parameters

Elements can be positioned and styled almost freely. An element comes with a variety of mandatory fields

• width: width of the element
• height: height of the element
• top: distance between the top of the element and the top of the (see here).
• left: horizontal position of the element (see here).
• position: controls how this element is positioned on the screen. Default is 'fixed', which means that it ignores other elements.

For the first four parameters: These are entered with a value followed by a unit, e.g. '1500px' or '80%'.
See here for additional information and examples.

Apart from these required parameters, any additional CSS properties can be set here by entering the key-name in the 'Add key'-field, and entering a proper value for that property.
  Note
  Due to the frameworks used in the application, several properties need to be preceeded with two dashes,
  e.g. --background: ...
  This will be noted in the suggested properties for each element.

Also see here for further hints / tricks.

Percentage

In case percentages are given, these refer to the size of the actual screen, meaning a width of 100% will always exactly span the user's screen.

Pixel

The element is first placed on a canvas, with sizes equal to the background dimensions (see here).

    Example
    A background with a width of 1000px and a height of 1500px would result in a canvas with (1000px * 1500px).
    A button with a width of 1000px and a value 'left' of 250px would span 2/3 of the canvas, and be 250px from either side edge of the canvas.
This final canvas, with all elements positioned on it, is then shrunk down / expanded to fit the screen exactly, and scales all elements with it, so that their relative position on the background canvas does not change.
For instance, if a background image is chosen, this method would allow the user to position a button at an exact location on this background image, regardless of the user's resolution.