Knowledge base

Volver a la descripción general del soporte

Elementos estándar

Mensaje de texto

Muestra un texto al que se le puede dar formato con la ayuda de atributos.

Ejemplo

<Text Weight="0.45" content="Hola mundo" style="InfoLabelStyle" backgroundcolor="gray.darker"/>

Formato de texto

Es posible aplicar formato al contenido del elemento de texto utilizando un conjunto limitado de etiquetas HTML. La siguiente lista incluye todos los atributos que tienen efectos útiles en el formato:

Atributos

Estos son los posibles .html  formatos para los textos que se muestran en las gafas inteligentes cuando se configuran:

  • <b>: Permite poner un texto en negrita.
  • <u>: Permite subrayar un texto.
  • <br>: Le permite tener un salto de línea.

Nota: El valor predeterminado del atributo MaxLines del objeto de presentación debe sobrescribirse a un valor superior a 1.

  • <del>, <s>: Le permite tachar un texto.
  • <dfn>, <em>, <i>: Permite marcar un término.
  • <h1-6>: Le permite definir el tamaño del encabezado, siendo 1 el más grande y 6 el más pequeño.
  • <hr>: Permite definir un cambio temático en la estructura del texto y formatearlo en consecuencia.
  • <li>: Permite crear una lista con viñetas, que se puede utilizar en <ul> entornos, pero no en <ol> entornos.
  • <pequeño>: Permite reducir el tamaño del texto más de lo habitual.
  • <fuerte>: Permite marcar un texto importante.
  • <sub>: Permite dar formato a un texto como un subíndice.
  • <sup>: Permite dar formato a un texto como un superíndice.
  • <ul>: Permite tener un entorno para crear una lista con viñetas con <li> .

⇒ También se pueden probar otras .html etiquetas, sin embargo, la mayoría de las etiquetas están desactualizadas o no se representan como en los navegadores normales (por ejemplo, formularios, imágenes, audio). Estas posibilidades que faltan se implementan a través del propio motor de flujo de trabajo.

Botón

Muestra un botón en la pantalla. El botón se puede seleccionar mediante gestos o controles de navegación en su dispositivo. Cuando se selecciona, se inicia un evento procesado dentro del flujo de trabajo.

Ejemplo

<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="Salir" gravity="Center" padding="4,4,4,4" textGroup="Opciones"/>
</botón>

Atributos

  • SpeechCommand
  • FocusOrder
  • Estilo de enfoque
  • InitialButtonStatus

Imagen

Este elemento muestra una imagen definida.

Ejemplo

<Nombre de la imagen="ICON" Peso="0.1" Margen="0,0,0,0" content="§{icon.png}§"/>

Atributos

  • Estilo

Lista

Muestra el contenido disponible en forma de lista.

Ejemplo

<List Name="SELF_MENU_TABLE_MENU"
    FocusOrder="0"
    TextStyle="LIST_ITEM_STYLE"
    PageIndicatorStyle="PAGE_INDICATOR_STYLE"
    EntriesPerPage="5"
    Border="0,gray.dark,black"
/>

Atributos

  • FocusOrder

Forma

Define una forma gráfica genérica.

Ejemplo

<Peso de la forma="0.05" StartColor="rojo.oscuro" EndColor="#00000000" Ángulo="0"/>

Atributos

  • Estilo

Cámara

La función de cámara muestra el visor del dispositivo. La cámara debe activarse manualmente con una acción para ver la imagen.

Ejemplo

<Cámara>
    <MáscaraSuperposición/>
    <Superposición rectangular/>
    <AROverlay/>
</Cámara>

Editar texto

Un campo de entrada de texto que permite al usuario modificar un texto previamente escrito.

Ejemplo

<EditText Name="COMMENT_FIELD"
        Padding="10,10,10,10"
        CursorVisible="true"
        MaxSize="40"
        MaxLines="10"
        Hint="Sin comentarios aún"
        Gravity="Left,Top"/>

Atributos

  • Estilo

Animación

Ejemplo

<Peso de la animación="0.5" margin="20,0,20,0" content="ANDRRES_bluetooth_connection" loop="true" control="inicio" colorfilter="gris"/>

Atributos

  • Estilo
  • Margen
  • Peso
  • Bucle
  • Control
  • Filtro de color

Elementos de la estructura

Tablero

Un contenedor para estructurar tus diseños.

Ejemplo

<Peso del panel = "1" Orientación = "Horizontal">
    < Peso del panel = "0.5" Orientación = "Vertical">
        [...]
    </Panel>
    <Panel Weight="0.5" Orientation="Vertical">
        [...]
    </Panel>
</Panel>

Diseño de pila

Contiene varios elementos que se apilan uno encima del otro. Esto permite que el elemento de la pila visible superior se superponga con los otros que se encuentran debajo.

Ejemplo

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

Objeto de pila

Muestra un texto al que se le puede dar formato con atributos.

Ejemplo

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

Atributos

  • Estilo

Comodín

Este widget le permite integrar dinámicamente diferentes plantillas de piezas dentro de su modelo de diseño. Le permite mostrar un carro o una estantería para su representación gráfica en un flujo de trabajo de picking.

Ejemplo

Definición de una plantilla de pieza:

<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"/>
      <Nombre del texto="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>

Importación de una plantilla al modelo de diseño:

<WildcardWidget Name="CARTplace" PartTemplateName="CartInsertPick" weight="0.4"/>

Uso

Los comodines se pueden cambiar dinámicamente tanto para la plantilla de pieza como para el contenido.

Dinámicamente:

<ui_update id="update_shelf">
 <widget_params>
    <ui_element name="ESTANTERÍA">

En la asignación:

    <ui_element name="SHELF">

Cambio de una plantilla de pieza

Cadena de retorno que coincide con el nombre de la plantilla de pieza. Tenga en cuenta que en Q3, las plantillas de pieza se definen globalmente.

Una plantilla de pieza solo se puede cambiar haciendo referencia al nombre, no hay inserción de objetos disponible.

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

Cambiar el contenido

Para cambiar el contenido de una plantilla de pieza, establezca el contenido con un objeto de la siguiente estructura a través de la acción o la ui_update asignación:

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

Como se puede ver arriba, los objetos internos llevan el nombre del elemento de la interfaz de usuario que se va a editar (en este caso, los <Text> elementos denominados "1.1" y "1.2" de la plantilla de pieza mencionada CartInsertPick anteriormente). Los atributos editables de los elementos de la interfaz de usuario son CONTENT, BACKGROUNDCOLORy TEXTCOLOR.

El objeto anidado correspondiente se puede generar mediante Javascript. Para obtener más información, consulte el siguiente ejemplo.

Ejemplo

<param name="TEMPLATE_CONTENT">
    <![ CDATA[?
{ var resultado = {}; pickOrder.groups[activeGroup].picks.forEach((pick) => { cantidad var = 0; var shelfBox = pick.destination.structure.split('.'). slice(2,4).join('.'); if (resultado[shelfBox]) { cantidad = resultado[shelfBox]. CONTENIDO } if (pick.attributes.place) { resultado[shelfBox] = { CONTENT:amount + pick.amountOpen, TEXTCOLOR:"azul", COLOR DE FONDO: "negro", } } else { resultado[shelfBox] = { CONTENT:amount + pick.amountOpen, COLOR DE FONDO: "azul", TEXTCOLOR:"rojo", } } }); resultado }?]] > </param>

Atributos

  • PartTemplateName

Widget de estado

Estado de la batería

Muestra el estado actual de la batería del dispositivo. Muestra el nivel de carga de la batería en porcentaje, así como si la batería se está cargando.

Ejemplo

<Peso de BatteryStatus = "0.05" Padding="1,1,1,1"/>

Atributos

  • Filtro de color

Escáner Bluetooth

Muestra si un escáner de código de barras externo está conectado actualmente al dispositivo.

Ejemplo

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

Atributos

  • Filtro de color

Retroalimentación de voz del micrófono

Contenedor que se utiliza para estructurar los diseños.

Ejemplo

<MicrophoneSpeechFeedback weight="0.05" Padding="1,1,1,1" margin="2,0,2,0" positiveNotifications="true" NegativeNotifications="true"/>

Barra de progreso

Muestra una representación visual de las tareas completadas actualmente en relación con las tareas restantes.

Ejemplo

<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"/>

Atributos

  • progress_color
  • progress_overlay_text_color

 

Estado de la antorcha

Muestra el estado actual de la linterna de su dispositivo (si está encendida o apagada).

Ejemplo

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

 

Estado de Wi-Fi

Muestra si el dispositivo está conectado a una red Wi-Fi.

Ejemplo

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

Atributos

  • Filtro de color

 

Widget de banda xBand

Muestra si hay una banda xBand conectada al dispositivo. Si hay una banda xX conectada, también se muestra el estado de la batería.

Ejemplo

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

Atributos

  • battery_warning_percnet
  • Filtro de color
  • Estilo de enfoque

 

Estado de MQTT

Muestra si el dispositivo montado en la cabeza tiene una conexión con el Centro de comando de primera línea.

Ejemplo

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