Principais widgets internos do APP

WIDGETS

Box Value

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:

Figura 1 – Edição da Box Value

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).

Weather

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.

Figura 2 – Widget Weather configurado.

Endereço

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.

Figura 3 – Edição da ferramenta Weather, no modo endereço.

Lat/Long

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.

Figura 4 – Edição da ferramenta Weather, no modo Lat/Long

Tags

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.

Figura 5 – Edição da ferramenta Weather, no modo Tags

Figura 6 – Configuração de filtro no menu do aplicativo. Em destaque as tags referentes a latitude e longitude

Gauge

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.

Figura 7 – Ferramenta Gauge

Para acessar a configuração do widget basta clicar na engrenagem na parte superior da ferramenta, em destaque na figura 7.

Configuração da ferramenta de Gauge

Figura 8 – Configuração da ferramenta de Gauge

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).

Video Stream

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.

Figura 9 – Tela de configuração da ferramenta Video Stream

Configurações do Widget Video Stream

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.

Figura 10 – Widget Video Stream configurado no aplicativo

History Graph

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.

Platform App

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.

Figura 11 – Widget Platform App

Device Manager

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).

Figura 12 – Visualização da ferramenta Gerenciador de dispositivo no aplicativo

Maps

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:

Figura 13 – Visualização da configuração da ferramenta “configurador de aplicativos” com a seleção em Maps

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”.

Alarmes

Não necessita de configurações especiais ao utilizar o widget de Alarmes dentro do aplicativo.

Figura 14 – Visualização da configuração da ferramenta “configurador de aplicativos” com a seleção em alarmes

Abaixo, segue um vídeo tutorial da ferramenta de gestão de alarmes:

Ferramenta de gestão de alarmes

Relatórios

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”.

Figura 15 - Visualização da configuração da ferramenta “configurador de aplicativo” com a seleção em relatórios

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.

Figura 16 – Visualização da ferramenta de relatórios

Indicamos a leitura do nosso material dedicado ao tema de relatórios: Configuração de relatórios

Esquemáticos

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:

Figura 17 – Visualização da configuração da ferramenta “configurador de aplicativo” com a seleção em esquemáticos.

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).

Figura 18 – Visualização do app “esquemáticos” com a seleção marcada em habilitar controles de navegação.

• 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.

Figura 19 – Visualização do app “esquemáticos” com a seleção marcada em mostrar botão 'abrir esquemática'

• ShowOpenDynamicsButton: habilita a opção de botões da dinâmica, em destaque na figura 20.

Figura 20 – Visualização do app “esquemáticos” com a seleção marcada em ShowOpenDynamicsButton

• Habilitar lista VisualBox: habilita a opção de lista VisualBox, em destaque na figura 21.

Figura 21 – Visualização do app “esquemáticos” com a seleção marcada em VisualBox

• Mostrar janela de informações: habilita o campo de informações sobre plano cartesiano onde o cursor do mouse está posicionado (figura 22).

Figura 22 – Visualização do app “esquemáticos” com a seleção marcada em Mostrar janela de informações

• Habilitar Simulador Dinâmico: habilita opção para simular informações dinâmicas no sinótico configurado.

Empty Template

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:

Figura 23 – Visualização da ferramenta de “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.