スタンダード・エレメント
テキスト
属性の助けを借りて書式設定できるテキストを表示します。
例
<Text Weight="0.45" Content="Hello World" Style="InfoLabelStyle" BackgroundColor="gray.darker"/>
テキストの書式設定
HTMLタグの限られたセットを使って、text要素の内容に書式を適用することが可能です。以下のリストには、書式設定に有用な効果を持つ全ての属性が含まれています:
属性
以下は、設定時にスマートグラスに表示されるテキストの.html
形式の可能性です:
- <b>: テキストを太字にします。
- <u>: テキストに下線を引くことができます。
- <br>: 改行を許可する。
ノート:レイアウト・オブジェクトのMaxLines属性のデフォルト値を1より大きい値に上書きする必要があります。
- <del>, <s>: テキストを取り消すことができます。
- <dfn>、<em>、<i>: 用語をマークする。
- <h1-6>: 1が最も大きく、6が最も小さい見出しのサイズを定義できます。
- <hr>: テキスト構造のテーマ的な変更を定義し、それに応じて書式を設定できます。
- <li>:
<ul>
環境では使えますが、<ol>
環境では使えません。 - <small>: テキストのサイズを通常より小さくできる。
- <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"}
}
上で見たように、内部オブジェクトは編集されるUIエレメント(この場合、前述の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"/>