Base de conhecimento

Voltar à visão geral do suporte

Elementos padrão

Texto

Exibe um texto que pode ser formatado com a ajuda de atributos.

Exemplo

<Peso do texto="0.45" content="Hello World" style="InfoLabelStyle" BackgroundColor="gray.darker"/>

Formatação de texto

É possível aplicar formatação ao conteúdo do elemento de texto usando um conjunto limitado de tags HTML. A lista a seguir inclui todos os atributos que têm efeitos úteis na formatação:

Atributos

Aqui estão os formatos possíveis .html  para textos que são exibidos em óculos inteligentes quando configurados:

  • <b>: Permite colocar um texto em negrito.
  • <u>: Permite sublinhar um texto.
  • <br>: Permite que você tenha uma quebra de linha.

Nota: O valor padrão do atributo MaxLines do objeto de layout precisa ser substituído por algo maior que 1.

  • <del>, <s>: Permite tachar um texto.
  • <dfn>, <em>, <i>: Permite marcar um termo.
  • <h1-6>: Permite definir o tamanho do título, sendo 1 o maior e 6 o menor.
  • <hr>: Permite definir uma alteração temática na estrutura do texto e formatá-la de acordo.
  • <li>: Permite criar uma lista com marcadores, que podem ser usados em <ul> ambientes, mas não podem ser usados em <ol> ambientes.
  • <pequeno>: Permite reduzir o tamanho do texto mais do que o normal.
  • <forte>: Permite marcar um texto importante.
  • <sub>: Permite formatar um texto como subscrito.
  • <sup>: Permite formatar um texto como sobrescrito.
  • <ul>: Permite que você tenha um ambiente para criar uma lista com marcadores com <li> .

⇒ Também outras .html tags podem ser testadas, no entanto, a maioria das tags estão desatualizadas ou não são renderizadas como em navegadores normais (por exemplo, formulários, imagens, áudio). Essas possibilidades ausentes são implementadas por meio do próprio mecanismo de fluxo de trabalho.

Botão

Exibe um botão na tela. O botão pode ser selecionado por gestos ou controles de navegação no seu dispositivo. Quando selecionada, ela iniciará um evento processado no fluxo de trabalho.

Exemplo

<Nome do botão="BtnQuit" FocusOrder="1" Peso="0.3" FocusStyle="PART_1">
    <Peso da imagem="0.6" Content="§{quit.png}§" Padding="4,4,4,4"/>
    <Text Weight="0.4" Name="Configurações" Content="Quit" Gravidade="Centro" Padding="4,4,4,4" TextGroup="Opções"/>
</Button>

Atributos

  • Comando de Fala
  • FocusOrder
  • Estilo de foco
  • InitialButtonStatus

Imagem

Esse elemento exibe uma imagem definida.

Exemplo

<Nome da imagem="ÍCONE" Peso="0.1" Margin="0,0,0,0" Content="§{icon.png}§"/>

Atributos

  • Estilo

Lista

Exibe o conteúdo disponível na forma de uma lista.

Exemplo

<Nome da lista="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 uma forma gráfica genérica.

Exemplo

<Peso da forma="0.05" StartColor="red.dark" EndColor="#00000000" Angle="0"/>

Atributos

  • Estilo

Câmera

O recurso de câmera exibe o visor no seu dispositivo. A câmera precisa ser ativada manualmente com uma ação para ver a imagem.

Exemplo

<Câmera><
    MaskOverlay/>
    <RectangleOverlay/>
    <AROverlay/>
</Câmera>

Editar texto

Um campo de entrada de texto que permite ao usuário modificar um texto digitado anteriormente.

Exemplo

<EditText Name="COMMENT_FIELD"
        Padding="10,10,10,10"
        CursorVisible="true"
        MaxSize="40"
        MaxLines="10"
        Hint="No comment yet"
        Gravity="Left,Top"/>

Atributos

  • Estilo

Animação

Exemplo

<Peso da animação="0.5" Margin="20,0,20,0" Content="ANDRRES_bluetooth_connection" Loop="true" Control="Start" ColorFilter="gray"/>

Atributos

  • Estilo
  • Margem
  • Peso
  • Laço
  • Controle
  • Filtro de cores

Elementos de estrutura

Painel

Um wrapper para estruturar seus layouts.

Exemplo

<Peso do painel="1" Orientação="Horizontal">
    <Peso do painel="0,5" Orientação="Vertical">
        [...]
    </Painel>
    <Peso do painel="0,5" Orientação="Vertical">
        [...]
    </Painel>
</Painel>

Layout de pilha

Contém vários itens que são empilhados uns sobre os outros. Isso permite que o item de pilha visível superior se sobreponha aos outros abaixo dele.

Exemplo

<StackLayout>
    <StackItem>
        <Nome da imagem="Background" ScaleType="CenterCrop" IMAGE_POST_PROCESS="TRUE"/>
    </StackItem>
    <StackItem>
        <Panel BackgroundColor="#66000000"/>
    </StackItem>
        [...]
    <StackItem>
</StackLayout>

Item de pilha

Exibe um texto que pode ser formatado com atributos.

Exemplo

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

Atributos

  • Estilo

Curinga

Este widget permite que você integre dinamicamente diferentes modelos de peças dentro do seu modelo de layout. Ele permite que você exiba um carrinho ou prateleira para representação gráfica em um fluxo de trabalho de picking.

Exemplo

Definindo um modelo de peça:

<Nome do PartTemplate="CartInsertPick">
  <Orientação do painel="Vertical" Peso="1">
    <Borda do painel="2,cinza.escuro", Orientação="Horizontal" Peso="0.5">
      <Nome do texto="1.1" Border="2,gray.dark," Gravidade="Centro" Peso="0.33" Margem="2,2,2,2"/>
      <Nome do texto="1.2" Border="2,gray.dark," Gravity="Center" Weight="0.33" Margin="2,2,2,2"/>
      <Nome do texto="1.3" Border="2,gray.dark," Gravity="Center" Weight="0.33" Margin="2,2,2,2"/>
    </Panel>
  </Panel>
</PartTemplate>

Importando um modelo para o modelo de layout:

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

Uso

Os curingas podem ser alterados dinamicamente tanto para o modelo de peça quanto para o conteúdo.

Dinamicamente:

<ui_update id="update_shelf">
 <widget_params>
    <ui_element name="SHELF">

No mapeamento:

    <ui_element name="SHELF">

Alterando um modelo de peça

Uma cadeia de caracteres de retorno que corresponde ao nome do modelo de peça. Observe que, no Q3, os modelos de peça são definidos globalmente.

Um modelo de peça só pode ser alterado fazendo referência ao nome, nenhuma inserção de objeto está disponível.

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

Alterando o conteúdo

Para alterar o conteúdo de um modelo de peça, defina o conteúdo com um objeto da estrutura abaixo por meio da ui_update ação ou mapeamento:

{
    1.1: {CONTEÚDO: 3, BACKGROUNDCOLOR: "azul", TEXTCOLOR: "vermelho"}
    1.2: {CONTEÚDO: 2, BACKGROUNDCOLOR: "azul", TEXTCOLOR: "vermelho"}
}

Como pode ser visto acima, os objetos internos são nomeados após o elemento da interface do usuário a ser editado (neste caso, os <Text> elementos chamados "1.1" e "1.2" do modelo de parte mencionado CartInsertPick acima). Os atributos editáveis do elemento da interface do usuário são CONTENT, BACKGROUNDCOLORe TEXTCOLOR.

O objeto aninhado correspondente pode ser gerado usando Javascript. Para obter mais informações, consulte o exemplo abaixo.

Exemplo

<param name="TEMPLATE_CONTENT">
    <![ CDATA[?
{ resultado var = {}; pickOrder.groups[activeGroup].picks.forEach((pick) => { quantidade de var = 0; var shelfBox = pick.destination.structure.split('.'). fatia(2,4).join('.'); if (resultado[shelfBox]) { quantidade = resultado[shelfBox]. CONTEÚDO } if (pick.attributes.place) { resultado[shelfBox] = { CONTEÚDO:quantidade + pick.amountOpen, TEXTCOLOR: "azul", BACKGROUNDCOLOR: "preto", } } else { resultado[shelfBox] = { CONTEÚDO:quantidade + pick.amountOpen, BACKGROUNDCOLOR: "azul", TEXTCOLOR: "vermelho", } } }); resultado }?]] > </param>

Atributos

  • PartTemplateName

Status Widget

Status da bateria

Exibe o estado atual da bateria do dispositivo. Ele mostra o nível de carregamento da bateria em porcentagem, bem como se a bateria está sendo carregada.

Exemplo

<Peso do status da bateria="0.05" Padding="1,1,1,1"/>

Atributos

  • Filtro de cores

Bluetooth Scanner

Mostra se um scanner de código de barras externo está conectado ao dispositivo no momento.

Exemplo

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

Atributos

  • Filtro de cores

Feedback de fala do microfone

Um wrapper que é usado para estruturar seus layouts.

Exemplo

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

Barra de progresso

Exibe uma representação visual das tarefas concluídas atualmente em relação às tarefas restantes.

Exemplo

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

Atributos

  • progress_color
  • progress_overlay_text_color

 

Status da Tocha

Exibe o estado atual da lanterna do dispositivo (se ela estiver ligada ou desligada no momento).

Exemplo

<Status da Tocha Peso="0.05" Padding="1,1,1,1"/>

 

Wi-Fi Status

Mostra se o dispositivo está conectado a uma rede Wi-Fi.

Exemplo

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

Atributos

  • Filtro de cores

 

Widget xBand

Mostra se uma xBand está conectada ao dispositivo. Se houver uma xBand conectada, o status da bateria também será exibido.

Exemplo

<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 cores
  • Estilo de foco

 

MQTT Status

Exibe se o dispositivo montado na cabeça tem uma conexão com o Frontline Command Center.

Exemplo

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