Principais widgets internos do APP
Last updated
Last updated
A Box Value é um dos recursos mais utilizados na criação de um dashboard. É onde são apresentados os valores monitorados de um ponto de medição. Nas configurações da Box Value, os seguintes recursos podem ser parametrizados:
a) Título: indica a titularidade da box.
b) TAG: referência da tag do ponto de medição.
c) Formato de valor: indica o número de casas decimais do valor a ser apresentado.
d) Métrica: indica a unidade de engenharia associada ao ponto de medição.
e) Icon: ícone ilustrativo do ponto de medição.
f) Opções: possibilita definir quais parâmetros devem ser apresentados na interface da Box Value. As opções são: exibir valor, exibir protocolo, exibir barra de progresso, centro do conteúdo e alterar a cor de fundo do ícone.
g) Cores primárias, cores de fundo e Zoom: possibilita customizar os itens da Box Value através da alteração das cores do ícone (padrão código RGBA) e tamanhos do texto (Tamanho do zoom).
O widget “Weather” pode ser configurado com endereço, a latitude e a longitude ou TAG do dispositivo. A ferramenta mostra o clima em tempo real, com temperatura e previsão do tempo.
Nessa opção o usuário pode buscar o “endereço de pesquisa” e a ferramenta identificará automaticamente a latitude e longitude referente ao local escolhido. Selecione a escala de temperatura e clique na opção “salvar” para configurar o widget.
Nessa opção o usuário pode configurar a latitude e longitude que deseja visualizar na ferramenta. Selecione a escala de temperatura e clique na opção “salvar” para configurar o widget.
Nessa opção o usuário pode configurar uma tag, referente ao parâmetro configurado no filtro de menu do aplicativo (exemplo na figura 6). O documento Estruturação de Filtros de Menu explica como acessar e utilizar o filtro de menu do aplicativo.
Os nomes dos seus parâmetros estão como XX_LT1 e XX_LN1 no filtro de menu do aplicativo (figura 6). Depois essas tags são referenciadas no campo “Latitude TAG” e “Longitude TAG” do widget (figura 5). Importante lembrar que os parâmetros são passados por @, ou seja, ficam preenchidos os campos com @XX_LN1 e @XX_LT1.
Após a escolha da tag, selecione a escala de temperatura e clique na opção “salvar” para concluir a configuração do widget.
Ferramenta para configuração de gráficos do tipo Gauge. Possui recursos de parametrização semelhantes à Value Box para cadastro de nome, TAG e cores do gráfico.
Para acessar a configuração do widget basta clicar na engrenagem na parte superior da ferramenta, em destaque na figura 7.
Título: indica a titularidade da box.
TAG: referência da tag do ponto de medição.
Métrica: indica a unidade de medida associada à variável apresentada.
Cores: possibilita customizar a cor do gráfico de gauge, através da alteração das cores do ícone (padrão código RGBA).
Para acessar a configuração do widget basta clicar no ícone de engrenagem na parte superior. O widget “Video Stream” pode ser configurado parametrizando a URL.
a) Configurações Vídeo Stream
Url: É possível configurar um url direcionado para um vídeo de plataformas de streaming, por exemplo, o Youtube. Após a configuração de vídeo stream e de controles do widget, a ferramenta reproduz o vídeo selecionado.
b) Configuração de controles
O usuário tem as seguintes opções para reproduzir o vídeo escolhido:
Reprodução automática: ao abrir o dashboard iniciar o vídeo.
Controles: disponibiliza na ferramenta as opções de escolha do áudio (configuração do volume), reprodução automática, pausa e visualização em tela cheia.
Loop: o vídeo será reproduzido novamente após o seu término.
Mudo: o vídeo será reproduzido sem áudio.
History Graph é um dos widgets mais utilizados nos aplicativos thingable!, onde é possível visualizar dados históricos na forma de gráficos de linha ou barras. Esse widget traz uma infinidade de opções de customização, temos uma documentação dedicada a este assunto em Parametrização de Gráficos.
O Platform App permite a visualização de widgets do ambiente dentro do aplicativo configurado. São eles: Device Manager, Mapas, Alarmes, Relatórios e Esquemáticos.
Para configurar o App “Device Manager” clique na opção Aplicativo de plataforma e selecione a opção “device Manager” (figura 11). Então, clique em “Salvar” e o usuário poderá visualizar a ferramenta dentro do aplicativo (figura 12).
Para configurar o App “Maps” clique na opção Aplicativo de plataforma e selecione a opção “Maps”. As opções abaixo serão apresentadas na tela:
Para visualizar um mapa no widget "Maps" é necessário, primeiramente, criá-lo. Para mais informações acesse o documento Construtor de Mapas.
Visualização inicial do mapa: opção para selecionar um dos mapas criados na ferramenta construtor de mapas. Ao selecionar a chave à direita da opção de visualização inicial, permite ao usuário digitar diretamente o nome do arquivo salvo no construtor de mapas. Quando essa opção não está selecionada, carrega automaticamente todos os arquivos de mapa salvos no construtor de mapas.
Servidor de mapa inicial: disponibiliza diferentes fontes de mapas. Recomendamos utilizar o OpenStreetMap.
Limite de ajuste automático: disponibiliza as opções: sim, não e seguir o marker para realizar o ajuste automático da visão do mapa criado.
Ocultar lista do Map View: opção para ocultar ou deixar disponível a lista de mapas para o usuário final.
Agrupar markers: agrupa os markers disponíveis no mapa de acordo com o zoom em tela.
Ao final, clique em “Salvar”.
Não necessita de configurações especiais ao utilizar o widget de Alarmes dentro do aplicativo.
Abaixo, segue um vídeo tutorial da ferramenta de gestão de alarmes:
Para configurar o App “Relatórios” clique na opção Aplicativo de plataforma e selecione a opção “Relatórios”. Então, clique em “Salvar”.
Após alguns segundos, será apresentado em tela o relatório disponibilizado para o aplicativo, com as devidas ferramentas de geração e exportação do mesmo.
Indicamos a leitura do nosso material dedicado ao tema de relatórios: Configuração de relatórios
Para configurar o App “Esquemáticos” clique na opção Aplicativo de plataforma e selecione a “Esquemáticos”. As opções abaixo serão apresentadas em tela:
Nome do arquivo: opção para selecionar o esquemático criado na ferramenta dinamizador de SVG. Ao selecionar a chave à direita da opção de visualização inicial, permite ao usuário digitar diretamente o nome do arquivo salvo na ferramenta dinamizador de svg.
Lista de janela de visualização: permite ao usuário escolher uma visualização personalizada do sinótico, já pré-configurada na ferramenta dinamizador de SVG, utilizando o recurso de ViewPort. Na lista vai aparecer automaticamente o nome da visualização criada pelo usuário para o determinado arquivo selecionado na opção anterior “Nome do arquivo”. Para mais informações acesse nossa documentação direcionada a esse tema: Dinamizador de SVG.
Opções: habilita/desabilita controles e informações de navegação do esquemático dentro do aplicativo. Entre as opções, têm-se:
Habilitar controles de navegação: nesta opção aparecem controles de navegação do sinótico (avançar, recuar, posicionar para esquerda ou direita).
Ativar botões ao passar o mouse: ativando essa opção, os controles de navegação aparecem em tela ao passarmos o cursor do mouse.
Mostrar botão 'Abrir Esquemática': habilita a opção abrir esquemática, em destaque na figura 19.
ShowOpenDynamicsButton: habilita a opção de botões da dinâmica, em destaque na figura 20.
Habilitar lista VisualBox: habilita a opção de lista VisualBox, em destaque na figura 21.
Mostrar janela de informações: habilita o campo de informações sobre plano cartesiano onde o cursor do mouse está posicionado (figura 22).
Habilitar Simulador Dinâmico: habilita opção para simular informações dinâmicas no sinótico configurado.
O Empty Template é um recurso de edição livre, que possibilita criar e editar textos, tabelas e anexar imagens, arquivos e links, entre outras funcionalidades básicas de um editor de texto. Além desses recursos básicos é possível desenvolver codificações em linguagem HTML em Tools -> Source Code. Na figura a seguir é apresentado o recurso Source Code:
Recomendados a leitura do material Interfaces gráficas customizadas. Nesse material é apresentado o processo de criação de interfaces gráficas por meio do LogicBuilder e como invocar a visualização dessas interfaces dentro de um aplicativo por meio do Empty Template.
