知識ベース

サポート概要に戻る

標準要素

テキスト

属性の助けを借りて書式設定できるテキストを表示します。

例

<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 が最小です。
  • <時>: テキスト構造の主題の変更を定義し、それに応じて書式設定することができます。
  • <li>: 箇条書きのリストを作成できますが、環境では <ul> 使用できますが、環境では使用 <ol> できません。
  • <小>: 通常よりもテキストのサイズを小さくすることができます。
  • <強い>: 重要なテキストにマークを付けることができます。
  • <サブ>: テキストを下付き文字として書式設定できます。
  • <サポート>: テキストを上付き文字として書式設定できます。
  • <ul>: で箇条書き <li> のリストを作成する環境を構築できます。

⇒ 他の .html タグも試してみることができますが、ほとんどのタグは古くなっているか、通常のブラウザのようにレンダリングされていません(フォーム、画像、オーディオなど)。これらの欠けている可能性は、ワークフローエンジン自体によって実装されます。

ボタン

画面にボタンを表示します。ボタンは、デバイスのジェスチャーまたはナビゲーションコントロールで選択できます。選択すると、ワークフロー内で処理されるイベントが開始されます。

例

<ボタン名="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="設定" content="quit" gravity="center" padding="4,4,4,4" TextGroup="オプション"/>
</button>

属性

  • 音声コマンド
  • フォーカスオーダー
  • フォーカススタイル
  • InitialButtonStatus (初期ボタンの状態)

画像

この要素は、定義されたイメージを表示します。

例

<画像名="アイコン" 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"
/>

属性

  • フォーカスオーダー

形

一般的なグラフィック図形を定義します。

例

<シェイプの太さ="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 ="コメントはまだありません"
        Gravity =" Left,Top"/>

属性

  • スタイル

アニメーション

例

<アニメーションの重み="0.5" margin="20,0,20,0" content="ANDRRES_bluetooth_connection" loop="true" control="start" ColorFilter="gray"/>

属性

  • スタイル
  • 余地
  • 重量
  • ループ
  • コントロール
  • カラーフィルター

構造要素

パネル

レイアウトを構造化するためのラッパー。

例

<パネルの重量="1" orientation="horizontal"><
    panel weight = "0.5" orientation="vertical">
        [...]
    </panel><
    panel weight = "0.5" orientation = "vertical">
        [...]
    </パネル>
</パネル>

スタックレイアウト

互いに積み重ねられた複数のアイテムが含まれます。これにより、一番上に表示されているスタックアイテムが、その下にある他のスタックアイテムと重なることができます。

例

<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"/>
      <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: "青", TEXTCOLOR: "赤"}
    1.2: {CONTENT: 2, BACKGROUNDCOLOR: "青", TEXTCOLOR: "赤"}
}

上記のように、内部オブジェクトには、編集する UI 要素 (この場合は、 <Text> 上記の CartInsertPick パーツ テンプレートの "1.1" と "1.2" という名前の要素) にちなんで名前が付けられます。 編集可能な UI 要素の属性は CONTENT、 BACKGROUNDCOLOR、、です TEXTCOLOR。

対応するネストされたオブジェクトは、Javascriptを使用して生成できます。詳細については、以下の例を参照してください。

例

<param name="TEMPLATE_CONTENT">
    <![CDATA[?
{ var result = {}; pickOrder.groups[activeGroup].picks.forEach((pick) => { var 量 = 0; var shelfBox = pick.destination.structure.split('.')です。slice(2,4).join('.'); if (result[shelfBox]) { amount = result[shelfBox]です。コンテンツ } (pick.attributes.place){場合 result[shelfBox] = { CONTENT:amount + pick.amountOpen、 TEXTCOLOR:"青"、 BACKGROUNDCOLOR:"黒"、 } } else { result[shelfBox] = { CONTENT:amount + pick.amountOpen、 BACKGROUNDCOLOR:"青"、 TEXTCOLOR:"赤"、 } } }); 結果 }?]]> </paramです>

属性

  • PartTemplateName (パーツ テンプレート名)

ステータスウィジェット

バッテリーステータス

デバイスのバッテリーの現在の状態を表示します。バッテリーの充電レベルをパーセントで表示し、バッテリーが充電されているかどうかを示します。

例

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

属性

  • カラーフィルター

Bluetoothスキャナー

外部バーコード スキャナーが現在デバイスに接続されているかどうかを示します。

例

<BTSCANNER_WIDGET name="BTSCANNER_WIDGET" weight="0.05" content="ANDRRES_ic_31barcode" padding="1,1,1,1" visibility="消えた"/>

属性

  • カラーフィルター

マイクの音声フィードバック

レイアウトを構造化するために使用されるラッパー。

例

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

プログレスバー

現在完了しているタスクを、残りのタスクと関連して視覚的に表示します。

例

<プログレスバー名="PROCESS_PROGRESSBAR" 重量="0.65" パディング="0,5,0,5" BackgroundColor="#00000000" scale_y="2" progress_color="グレー" progress_overlay_text_color="#FFFFFF"/>

属性

  • progress_color
  • progress_overlay_text_color

 

トーチステータス

デバイスの懐中電灯の現在の状態を表示します(現在オンまたはオフの場合)。

例

<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="消えた"/>

属性

  • battery_warning_percnet
  • カラーフィルター
  • フォーカススタイル

 

MQTT ステータス

ヘッドマウント デバイスが Frontline Command Center に接続されているかどうかを表示します。

例

<MqttStatus weight="0.05" padding="1,1,1,1"/>