标准要素
文本
显示可借助属性进行格式化的文本。
示例
<Text Weight="0.45" Content="Hello World" Style="InfoLabelStyle" BackgroundColor="gray.darker"/>
文本格式
使用一组有限的 HTML 标记可以对文本元素的内容应用格式化。下面列出了对格式化有帮助的所有属性:
属性
以下是智能眼镜配置后可能显示的.html
文本格式:
- <b>: 允许您给文本加粗。
- <u>: 允许您在文本下划线。
- <br>: 允许换行。
注意:布局对象 MaxLines 属性的默认值需要改写为大于 1 的值。
- <del>、<s>: 允许您删除文本。
- <dfn>、<em>、<i>: 允许您标记一个术语。
- <h1-6>: 允许您定义标题大小,1 为最大,6 为最小。
- <hr>: 允许您定义文本结构中的主题变化,并相应调整格式。
- <li>: 允许创建带弹点的列表,可在
<ul>
环境中使用,但不能在<ol>
环境中使用。 - <小>: 允许您缩小文字大小。
- <strong>: 允许您标记重要文本。
- <sub>: 允许您将文本格式设置为下标。
- <sup>: 允许您将文本格式设置为上标。
- <ul>: 允许您使用
<li>
创建带项目符号的列表。
⇒ 还 可以试用其他 .html
标记,不过,大多数标记要么已经过时,要么无法在普通浏览器中显示(如表单、图片、音频)。这些缺失的可能性将通过工作流引擎本身来实现。
按钮
在屏幕上显示一个按钮。该按钮可通过手势或设备上的导航控件选择。选择后,它将启动工作流程中的事件处理。
示例
<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>
属性
图片
该元素显示已定义的图像。
示例
<Image Name="ICON" Weight="0.1" Margin="0,0,0,0" Content="§{icon.png}§"/>
属性
列表
以列表形式显示可用内容。
示例
<List Name="SELF_MENU_TABLE_MENU"
FocusOrder="0"
TextStyle="LIST_ITEM_STYLE"
PageIndicatorStyle="PAGE_INDICATOR_STYLE"
EntriesPerPage="5"
Border="0,gray.dark,black"
/>
属性
形状
定义通用图形形状。
示例
<Shape Weight="0.05" StartColor="red.dark" EndColor="#00000000" Angle="0"/>
属性
照相机
照相机功能会在设备上显示取景器。相机需要手动激活才能看到图像。
示例
<Camera>
<MaskOverlay/>
<RectangleOverlay/>
<AROverlay/>
</Camera>
编辑文本
文本输入框,允许用户修改之前输入的文本。
示例
<EditText Name="COMMENT_FIELD"
Padding="10,10,10,10"
CursorVisible="true"
MaxSize="40"
MaxLines="10"
Hint="No comment yet"
Gravity="Left,Top"/>
属性
动画
示例
<Animation Weight="0.5" Margin="20,0,20,0" Content="ANDRRES_bluetooth_connection" Loop="true" Control="Start" ColorFilter="gray"/>
属性
结构要素
小组
用于结构化布局的封装器。
示例
<Panel Weight="1" Orientation="Horizontal">
<Panel Weight="0.5" Orientation="Vertical">
[...]
</Panel>
<Panel Weight="0.5" Orientation="Vertical">
[...]
</Panel>
</Panel>
堆栈布局
包含多个相互堆叠的项目。这样,最上面的可见堆叠项就可以与下面的其他项重叠。
示例
<StackLayout>
<StackItem>
<Image Name="Background" ScaleType="CenterCrop" IMAGE_POST_PROCESS="TRUE"/>
</StackItem>
<StackItem>
<Panel BackgroundColor="#66000000"/>
</StackItem>
[...]
<StackItem>
</StackLayout>
堆栈项
显示可使用属性格式化的文本。
示例
<StackItem>
<Panel BackgroundColor="#77000000"/>
</StackItem>
属性
通配符
通过该部件,您可以在布局模型中动态集成不同的零件模板。通过它,您可以在分拣工作流程中以图形方式显示购物车或货架。
示例
定义零件模板
<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>
将模板导入布局模型
<WildcardWidget Name="CARTplace" PartTemplateName="CartInsertPick" Weight="0.4"/>
使用方法
部件模板和内容都可以动态更改通配符。
动态
<ui_update id="update_shelf">
<widget_params>
<ui_element name="SHELF">
绘制地图:
<ui_element name="SHELF">
更改零件模板
与零件模板名称匹配的 返回字符串。请注意,在 Q3 中,零件模板是全局定义的。
部件模板只能通过引用名称来更改,不能插入对象。
<param name="PARTTEMPLATENAME"><![CDATA[?{pickOrder.groups[activeGroup].picks[0].destination.structure.split('.')[0]}?]]></param>
改变内容
要更改部件模板的内容,请通过ui_update
操作或映射将内容设置为以下结构的对象:
{
1.1: {CONTENT: 3, BACKGROUNDCOLOR: "blue", TEXTCOLOR: "red"}
1.2: {CONTENT: 2, BACKGROUNDCOLOR: "blue", TEXTCOLOR: "red"}
}
如上图所示,内部对象以要编辑的用户界面元素命名(本例中,上述CartInsertPick
部件模板中名为 "1.1 "和 "1.2 "的<Text>
元素)。可编辑的 UI 元素属性为CONTENT
、BACKGROUNDCOLOR
和TEXTCOLOR
。
可以使用 Javascript 生成相应的嵌套对象。更多信息,请参阅下面的示例。
示例
<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>
属性
状态小工具
电池状态
显示设备电池的当前状态。它显示电池的充电水平(百分比)以及电池是否正在充电。
示例
<BatteryStatus Weight="0.05" Padding="1,1,1,1"/>
属性
蓝牙扫描仪
显示设备当前是否连接了外部条形码扫描仪。
示例
<BTSCANNER_WIDGET Name="BTSCANNER_WIDGET" Weight="0.05" Content="ANDRRES_ic_31barcode" Padding="1,1,1,1" Visibility="Gone"/>
属性
麦克风语音反馈
包装器,用于结构化布局。
示例
<MicrophoneSpeechFeedback Weight="0.05" Padding="1,1,1,1" Margin="2,0,2,0" PositiveNotifications="true" NegativeNotifications="true"/>
进度条
显示当前已完成任务与剩余任务的可视化对比。
示例
<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"/>
属性
火炬状态
显示设备手电筒的当前状态(当前是打开还是关闭)。
示例
<TorchStatus Weight="0.05" Padding="1,1,1,1"/>
Wi-Fi 状态
显示设备是否已连接到 Wi-Fi 网络。
示例
<WiFiStatus Weight="0.05" Padding="1,1,1,1"/>
属性
xBand 小工具
显示 xBand 是否已连接到设备。如果已连接 xBand,还会显示其电池状态。
示例
<XBAND_WIDGET Name="XBAND_WIDGET" Weight="0.05" Content="ANDRRES_ic_13xBand" Padding="1,1,1,1" Visibility="Gone"/>
属性
MQTT 状态
显示头戴式设备是否与Frontline 指挥中心连接。
示例
<MqttStatus Weight="0.05" Padding="1,1,1,1"/>