Eléments standard

SMS

Affiche un texte qui peut être mis en forme à l’aide d’attributs.

Exemple

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

Mise en forme du texte

Il est possible d’appliquer une mise en forme au contenu de l’élément de texte à l’aide d’un ensemble limité de balises HTML. La liste suivante inclut tous les attributs qui ont des effets utiles sur la mise en forme :

Attributs

Voici les formats possibles .html  pour les textes qui s’affichent dans les lunettes intelligentes lorsqu’ils sont configurés :

  • <b> : Permet de mettre un texte en gras.
  • <u> : Permet de souligner un texte.
  • <br> : Permet d’avoir un saut de ligne.

Remarque : La valeur par défaut de l’attribut MaxLines de l’objet de mise en page doit être remplacée par une valeur supérieure à 1.

  • <del>, <s> : Permet de barrer un texte.
  • <dfn>, <em>, <i> : Permet de marquer un terme.
  • <h1-6> : Permet de définir la taille de l’en-tête, 1 étant le plus grand et 6 le plus petit.
  • < > : Permet de définir un changement thématique dans la structure du texte et de le mettre en forme en conséquence.
  • <li> : Permet de créer une liste avec des puces, qui peut être utilisée dans <ul> les environnements, mais ne peut pas être utilisée dans les <ol> environnements.
  • <petit> : Permet de réduire la taille du texte plus que d’habitude.
  • <fort> : Permet de marquer un texte important.
  • <sous-> : Permet de mettre en forme un texte en indice.
  • <sup> : Permet de mettre en forme un texte en exposant.
  • <ul> : Permet d’avoir un environnement pour créer une liste avec des puces avec <li> .

⇒ D’autres .html balises peuvent également être essayées, cependant, la plupart des balises sont soit obsolètes, soit ne sont pas rendues comme dans les navigateurs normaux (par exemple, les formulaires, les images, l’audio). Ces possibilités manquantes sont mises en œuvre via le moteur de flux de travail lui-même.

Bouton

Affiche un bouton à l’écran. Le bouton peut être sélectionné par des gestes ou des commandes de navigation sur votre appareil. Lorsqu’il est sélectionné, il déclenche un événement traité dans le flux de travail.

Exemple

<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="Quitter » Gravity="Centre » Padding="4,4,4,4 » TextGroup="Options"/>
</Button>

Attributs

  • Commande SpeechCommand
  • FocusOrder (Ordre de mise au point)
  • Style de mise au point
  • InitialButtonStatus

Image

Cet élément affiche une image définie.

Exemple

<Nom de l’image="ICONE » weight="0.1 » margin="0,0,0,0 » content="§{icon.png}§"/>

Attributs

  • Style

Liste

Affiche le contenu disponible sous la forme d’une liste.

Exemple

<Nom de la liste="SELF_MENU_TABLE_MENU"
    FocusOrder="0"
    TextStyle="LIST_ITEM_STYLE"
    PageIndicatorStyle="PAGE_INDICATOR_STYLE"
    EntriesPerPage="5"
    Border="0,gray.dark,black"
/>

Attributs

  • FocusOrder (Ordre de mise au point)

Forme

Définit une forme graphique générique.

Exemple

<Poids de la forme="0.05 » StartColor="red.dark » EndColor="#000000000 » Angle="0"/>

Attributs

  • Style

Caméra

La fonction appareil photo affiche le viseur de votre appareil. L’appareil photo doit être activé manuellement avec une action pour voir l’image.

Exemple

<Caméra>
    <MasqueSuperposition/>
    <RectangleSuperposition/>
    <AROverlay/>
</Caméra>

Modifier le texte

Champ de saisie de texte qui permet à l’utilisateur de modifier un texte déjà saisi.

Exemple

<EditText Name="COMMENT_FIELD"
        Padding="10,10,10,10"
        CursorVisible="true"
        MaxSize="40"
        MaxLines="10"
        Hint="Pas de commentaire pour l’instant"
        Gravity="Left,Top"/>

Attributs

  • Style

Animation

Exemple

<Poids de l’animation="0.5 » Margin="20,0,20,0 » Content="ANDRRES_bluetooth_connection » Loop="true » Control="Démarrer » ColorFilter="gris"/>

Attributs

  • Style
  • Marge
  • Poids
  • Boucle
  • Contrôle
  • Filtre de couleur

Eléments de structure

Panneau

Un wrapper pour structurer vos mises en page.

Exemple

<Poids du panneau="1 » Orientation="Horizontal">
    <Poids du panneau="0.5 » Orientation="Vertical">
        [...]
    </Panel>
    <Panel Weight="0.5 » Orientation="Vertical">
        [...]
    </panneau>
</panneau>

Disposition de la pile

Contient plusieurs éléments empilés les uns sur les autres. Cela permet à l’élément de la pile visible du haut de se chevaucher avec les autres éléments situés en dessous.

Exemple

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

Empiler l’objet

Affiche un texte qui peut être mis en forme avec des attributs.

Exemple

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

Attributs

  • Style

Génériques

Ce widget vous permet d’intégrer dynamiquement différents modèles de pièces dans votre modèle de mise en page. Il vous permet d’afficher un chariot ou une étagère pour une représentation graphique dans un flux de travail de prélèvement.

Exemple

Définition d’un modèle de pièce :

<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"/>
      <Nom du texte="1.2 » Border="2,gray.dark, » Gravity="Centre » Poids="0.33 » Margin="2,2,2,2"/>
      <Nom du texte="1.3 » Border="2,gray.dark, » Gravity="Centre » Poids="0.33 » Marge="2,2,2,2"/>
    </Panneau>
  </Panneau>
</PartTemplate>

Importation d’un modèle dans le modèle de mise en page :

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

Usage

Les caractères génériques peuvent être modifiés dynamiquement pour le modèle de pièce et le contenu.

Dynamiquement:

<ui_update id="update_shelf">
 <widget_params><ui_element
    name="ÉTAGÈRE">

Dans le mappage :

    <ui_element name="ÉTAGÈRE">

Modification d’un gabarit de pièce

Chaîne de retour correspondant au nom du modèle de pièce. Notez qu’en Q3, les modèles de pièces sont définis globalement.

Un modèle de pièce ne peut être modifié qu’en référençant le nom, aucune insertion d’objet n’est disponible.

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

Modification du contenu

Pour modifier le contenu d’un modèle de pièce, définissez le contenu avec un objet de la structure ci-dessous via l’action ou le ui_update mappage :

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

Comme on peut le voir ci-dessus, les objets internes sont nommés d’après l’élément d’interface utilisateur à modifier (dans ce cas, les <Text> éléments nommés « 1.1 » et « 1.2 » du modèle de pièce mentionné CartInsertPick ci-dessus). Les attributs d’élément d’interface utilisateur modifiables sont CONTENT, BACKGROUNDCOLOR, et TEXTCOLOR.

L’objet imbriqué correspondant peut être généré à l’aide de Javascript. Pour plus d’informations, veuillez consulter l’exemple ci-dessous.

Exemple

<param name="TEMPLATE_CONTENT">
    < ![ CDATA[ ?
{ var résultat = {} ; pickOrder.groups[activeGroup].picks.forEach((pick) => { var quantité = 0 ; var shelfBox = pick.destination.structure.split('.'). tranche(2,4).join('.') ; if (result[ettable]) { amount = result[shelfBox]. CONTENU } if (pick.attributes.place) { résultat[boîteétagère] = { CONTENU :montant + choix.montantOuvrir, TEXTCOLOR :"bleu », BACKGROUNDCOLOR :"noir », } } else { résultat[boîteétagère] = { CONTENU :montant + choix.montantOuvrir, BACKGROUNDCOLOR :"bleu », TEXTCOLOR :"rouge », } } }); résultat }?]] > </param>

Attributs

  • PartTemplateName (NomModèlePartie)

Widget d’état

État de la batterie

Affiche l’état actuel de la batterie de l’appareil. Il indique le niveau de charge de la batterie en pourcentage ainsi que si la batterie est en cours de charge.

Exemple

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

Attributs

  • Filtre de couleur

Bluetooth Scanner

Indique si un lecteur de codes-barres externe est actuellement connecté à l’appareil.

Exemple

<BTSCANNER_WIDGET name="BTSCANNER_WIDGET » weight="0.05 » content="ANDRRES_ic_31barcode » padding="1,1,1,1 » visibility="disparu"/>

Attributs

  • Filtre de couleur

Retour vocal du microphone

Un wrapper qui est utilisé pour structurer vos mises en page.

Exemple

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

Barre de progression

Affiche une représentation visuelle des tâches en cours d’exécution par rapport aux tâches restantes.

Exemple

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

Attributs

  • progress_color
  • progress_overlay_text_color

 

État de la torche

Affiche l’état actuel de la lampe de poche de votre appareil (si elle est allumée ou éteinte).

Exemple

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

 

État du Wi-Fi

Indique si l’appareil est connecté à un réseau Wi-Fi.

Exemple

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

Attributs

  • Filtre de couleur

 

Widget xBand

Indique si un xBand est connecté à l’appareil. Si un xBand est connecté, l’état de sa batterie est également affiché.

Exemple

<XBAND_WIDGET name="XBAND_WIDGET » weight="0.05 » content="ANDRRES_ic_13xBand » padding="1,1,1,1 » visibility="disparu"/>

Attributs

  • battery_warning_percnet
  • Filtre de couleur
  • Style de mise au point

 

Statut MQTT

Indique si l’appareil monté sur la tête dispose d’une connexion au centre de commande de première ligne.

Exemple

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