Elements
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"/>
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article