Knowledge Base

Back to support overview

Standard Elements

Text

Displays a text that can be formatted with the help of attributes.

Example

<Text Weight="0.45" Content="Hello World" Style="InfoLabelStyle" BackgroundColor="gray.darker"/>

Text Formatting

It is possible to apply formatting to the content of the text element using a limited set of HTML tags. The following list includes all attributes which have useful effects on formatting:

Attributes

Here are the possible .html  formats for texts that are displayed in smart glasses when configured:

  • <b>: Allows you to bold a text.
  • <u>: Allows you to underline a text.
  • <br>: Allows you to have a line break.

Note: The default value of the MaxLines attribute of the layout object needs to be overwritten to something that is higher than 1.

  • <del>, <s>: Allows you to strikethrough a text.
  • <dfn>, <em>, <i>: Allows you to mark a term.
  • <h1-6>: Allows you to define the heading size, 1 being the biggest and 6 being the smallest.
  • <hr>: Allows you to define a thematic change in the text structure and format it accordingly.
  • <li>: Allows you to create a list with bullet points, which can be used in <ul> environments, but cannot be used in <ol> environments.
  • <small>: Allows you to reduce the size of the text more than usual.
  • <strong>: Allows you to mark an important text.
  • <sub>: Allows you to format a text as a subscript.
  • <sup>: Allows you to format a text as a superscript.
  • <ul>: Allows you to have an environment to create a list with bullet points with <li> .

⇒ Also other .html tags can be tried out, however, most of the tags are either outdated or are not rendered as in normal browsers (e.g., forms, pictures, audio). These missing possibilities are implemented through the workflow engine itself.

Button

Displays a button on the screen. The button can be selected by gestures or navigational controls on your device. When selected, it will initiate an event processed within the workflow.

Example

<Button Name="BtnQuit" FocusOrder="1" Weight="0.3" FocusStyle="PART_1">
    <Image Weight="0.6" Content="§{quit.png}§" Padding="4,4,4,4"/>
    <Text Weight="0.4" Name="Settings" Content="Quit" Gravity="Center" Padding="4,4,4,4" TextGroup="Options"/>
</Button>

Attributes

  • SpeechCommand
  • FocusOrder
  • FocusStyle
  • InitialButtonStatus

Image

This element displays a defined image.

Example

<Image Name="ICON" Weight="0.1" Margin="0,0,0,0" Content="§{icon.png}§"/>

Attributes

  • Style

List

Displays the available content in the form of a list.

Example

<List Name="SELF_MENU_TABLE_MENU"
    FocusOrder="0"
    TextStyle="LIST_ITEM_STYLE"
    PageIndicatorStyle="PAGE_INDICATOR_STYLE"
    EntriesPerPage="5"
    Border="0,gray.dark,black"
/>

Attributes

  • FocusOrder

Shape

Defines a generic graphical shape.

Example

<Shape Weight="0.05" StartColor="red.dark" EndColor="#00000000" Angle="0"/>

Attributes

  • Style

Camera

The camera feature displays the viewfinder on your device. The camera needs to be manually activated with an action to see the image.

Example

<Camera>
    <MaskOverlay/>
    <RectangleOverlay/>
    <AROverlay/>
</Camera>

Edit Text

A text input field that allows the user to modify a previously typed text.

Example

<EditText Name="COMMENT_FIELD"
        Padding="10,10,10,10"
        CursorVisible="true"
        MaxSize="40"
        MaxLines="10"
        Hint="No comment yet"
        Gravity="Left,Top"/>

Attributes

  • Style

Animation

Example

<Animation Weight="0.5" Margin="20,0,20,0" Content="ANDRRES_bluetooth_connection" Loop="true" Control="Start" ColorFilter="gray"/>

Attributes

  • Style
  • Margin
  • Weight
  • Loop
  • Control
  • ColorFilter

Structure Elements

Panel

A wrapper to structure your layouts.

Example

<Panel Weight="1" Orientation="Horizontal">
    <Panel Weight="0.5" Orientation="Vertical">
        [...]
    </Panel>
    <Panel Weight="0.5" Orientation="Vertical">
        [...]
    </Panel>
</Panel>

Stack Layout

Contains several items that are stacked on top of each other. This allows the top visible stack item to overlap with the other ones underneath it.

Example

<StackLayout>
    <StackItem>
        <Image Name="Background" ScaleType="CenterCrop" IMAGE_POST_PROCESS="TRUE"/>
    </StackItem>
    <StackItem>
        <Panel BackgroundColor="#66000000"/>
    </StackItem>
        [...]
    <StackItem>
</StackLayout>

Stack Item

Displays a text that can be formatted with attributes.

Example

<StackItem>
    <Panel BackgroundColor="#77000000"/>
 </StackItem>

Attributes

  • Style

Wildcard

This widget allows you to dynamically integrate different part templates inside your layout model. It enables you to display a cart or shelf for graphical representation in a picking workflow.

Example

Defining a part template:

<PartTemplate Name="CartInsertPick">
  <Panel Orientation="Vertical" Weight="1">
    <Panel Border="2,gray.dark," Orientation="Horizontal" Weight="0.5">
      <Text Name="1.1" Border="2,gray.dark," Gravity="Center" Weight="0.33" Margin="2,2,2,2"/>
      <Text Name="1.2" Border="2,gray.dark," Gravity="Center" Weight="0.33" Margin="2,2,2,2"/>
      <Text Name="1.3" Border="2,gray.dark," Gravity="Center" Weight="0.33" Margin="2,2,2,2"/>
    </Panel>
  </Panel>
</PartTemplate>

Importing a template to the layout model:

<WildcardWidget Name="CARTplace" PartTemplateName="CartInsertPick" Weight="0.4"/>

Usage

Wildcards can be changed dynamically for both the part template and the content.

Dynamically:

<ui_update id="update_shelf">
 <widget_params>
    <ui_element name="SHELF">

In mapping:

    <ui_element name="SHELF">

Changing a part template

A return string that matches the name of the part template. Note that in Q3, part templates are defined globally.

A part template can only be changed by referencing the name, no object insertion is available.

<param name="PARTTEMPLATENAME"><![CDATA[?{pickOrder.groups[activeGroup].picks[0].destination.structure.split('.')[0]}?]]></param>

Changing content

To change the content of a part template, set the content with an object of the below structure via the ui_update action or mapping:

{
    1.1: {CONTENT: 3, BACKGROUNDCOLOR: "blue", TEXTCOLOR: "red"}
    1.2: {CONTENT: 2, BACKGROUNDCOLOR: "blue", TEXTCOLOR: "red"}
}

As can be seen above, the inner objects are named after the UI element to be edited (in this case, the <Text> elements named "1.1" and "1.2" from the above-mentioned CartInsertPick part template). The editable UI element attributes are CONTENT, BACKGROUNDCOLOR, and TEXTCOLOR.

The corresponding nested object can be generated using Javascript. For more information, please see the below example.

Example

<param name="TEMPLATE_CONTENT">
    <![CDATA[?{
        var result = {};
        pickOrder.groups[activeGroup].picks.forEach((pick) => {
            var amount = 0;
            var shelfBox = pick.destination.structure.split('.').slice(2,4).join('.');
            if (result[shelfBox]) {
                amount = result[shelfBox].CONTENT
            }
            if (pick.attributes.place) {
                result[shelfBox] = {
                    CONTENT:amount + pick.amountOpen,
                    TEXTCOLOR:"blue",
                    BACKGROUNDCOLOR:"black",
                }
            } else {
                result[shelfBox] = {
                    CONTENT:amount + pick.amountOpen,
                    BACKGROUNDCOLOR:"blue",
                    TEXTCOLOR:"red",
                }
            }
        });
        result
    }?]]>
</param>

Attributes

  • PartTemplateName

Status Widget

Battery Status

Displays the current state of the device battery. It shows the battery's charging level in per cent as well as whether the battery is being charged.

Example

<BatteryStatus Weight="0.05" Padding="1,1,1,1"/>

Attributes

  • ColorFilter

Bluetooth Scanner

Shows if an external barcode scanner is currently connected to the device.

Example

<BTSCANNER_WIDGET Name="BTSCANNER_WIDGET" Weight="0.05" Content="ANDRRES_ic_31barcode" Padding="1,1,1,1" Visibility="Gone"/>

Attributes

  • ColorFilter

Microphone Speech Feedback

A wrapper that is used to structure your layouts.

Example

<MicrophoneSpeechFeedback Weight="0.05" Padding="1,1,1,1" Margin="2,0,2,0" PositiveNotifications="true" NegativeNotifications="true"/>

Progressbar

Displays a visual representation of the currently completed tasks in relation to the remaining tasks.

Example

<PROGRESSBAR Name="PROCESS_PROGRESSBAR" Weight="0.65" Padding="0,5,0,5" BackgroundColor="#00000000" scale_y="2" progress_color="gray" progress_overlay_text_color="#FFFFFF"/>

Attributes

  • progress_color
  • progress_overlay_text_color

 

Torch Status

Displays the current state of your device's flashlight (if it is currently on or off).

Example

<TorchStatus Weight="0.05" Padding="1,1,1,1"/>

 

Wi-Fi Status

Shows whether the device is connected to a Wi-Fi network.

Example

<WiFiStatus Weight="0.05" Padding="1,1,1,1"/>

Attributes

  • ColorFilter

 

Band Widget

Shows whether a Band is connected to the device. If there is a Band connected, its battery status is also displayed.

Example

<XBAND_WIDGET Name="XBAND_WIDGET" Weight="0.05" Content="ANDRRES_ic_13xBand" Padding="1,1,1,1" Visibility="Gone"/>

Attributes

  • battery_warning_percnet
  • ColorFilter
  • FocusStyle

 

MQTT Status

Displays whether the head-mounted device has a connection to the Frontline Command Center.

Example

<MqttStatus Weight="0.05" Padding="1,1,1,1"/>