# 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](https://2885740878-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCHBmOO4iyJaq3clNH0xR%2Fuploads%2FwUCHLuIgebSuoHPtxNGh%2F1.PNG?alt=media\&token=e1d69f39-00b4-42eb-bc26-300f43158082) **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.](https://2885740878-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCHBmOO4iyJaq3clNH0xR%2Fuploads%2F4Jn4ZWzFvNtMcWrdPeh1%2Fimage8.png?alt=media\&token=5d7c9a0b-5322-49f1-9386-2c71d41e7371) #### **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.](https://2885740878-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCHBmOO4iyJaq3clNH0xR%2Fuploads%2FFOKPuP0wTcdwZAcfQef6%2Fimage21.png?alt=media\&token=467637c6-777c-475e-98cd-c6d3cb43ade5) #### **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](https://2885740878-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCHBmOO4iyJaq3clNH0xR%2Fuploads%2FGRkGuLIWaPBhbS82odKG%2Fimage22.png?alt=media\&token=fe7ca51d-88e0-4c50-9d17-f4c9f5c1d439) #### **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 [estruturacao-de-filtros-de-menu](https://docs.thingable.com/bem-vindo-a-wiki-da-thingable/bem-vindo-a-wiki-da-thingable/aplicativo/estruturacao-de-filtros-de-menu "mention") 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](https://2885740878-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCHBmOO4iyJaq3clNH0xR%2Fuploads%2Fd2vlogfwlR89PJvytAdz%2Fimage11.png?alt=media\&token=e49d5704-42a1-4c31-961c-bc9ade69175d) ![Figura 6 – Configuração de filtro no menu do aplicativo. Em destaque as tags referentes a latitude e longitude](https://2885740878-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCHBmOO4iyJaq3clNH0xR%2Fuploads%2F8z2XeWUFqNcoyQHnJMng%2Fimage12.png?alt=media\&token=d38a1ee6-9460-417d-bca5-18be7f79fe63) ### **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](https://2885740878-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCHBmOO4iyJaq3clNH0xR%2Fuploads%2FnDTmo0crguIHtTzY1q0k%2Fimage23.png?alt=media\&token=6e5332fc-1aa7-49e2-a6d8-62d70328f5a2) 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](https://2885740878-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCHBmOO4iyJaq3clNH0xR%2Fuploads%2FMyktCbb5xmCZk90BHhPD%2Fimage14.png?alt=media\&token=0237e971-27a8-42d9-9515-1e1a133ef1d8) ***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](https://2885740878-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCHBmOO4iyJaq3clNH0xR%2Fuploads%2FraEAehVbmMyzhpmOGHeW%2Fimage15.png?alt=media\&token=98ad4984-0dcb-44dd-8691-a502aa9b743f) #### **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](https://2885740878-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCHBmOO4iyJaq3clNH0xR%2Fuploads%2FXVUik6JCFtJ6eF6ruSWO%2Fimage16.png?alt=media\&token=9fc9fb8f-ba90-42fb-8441-d62cff1b8582) ### **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 [parametrizacao-de-graficos](https://docs.thingable.com/bem-vindo-a-wiki-da-thingable/bem-vindo-a-wiki-da-thingable/aplicativo/parametrizacao-de-graficos "mention"). ### **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](https://2885740878-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCHBmOO4iyJaq3clNH0xR%2Fuploads%2F94SWWtOmh7f73uH1jZSf%2Fimage17.png?alt=media\&token=b11ff079-5767-498e-885c-66d4cfb3b75d) #### **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](https://2885740878-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCHBmOO4iyJaq3clNH0xR%2Fuploads%2F08fOzupgtfHIRQE9XFyR%2Fimage19.png?alt=media\&token=e1af4694-347b-46f9-b80a-cdb8ff838b2d) #### **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](https://2885740878-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCHBmOO4iyJaq3clNH0xR%2Fuploads%2F2nV9tR6RRH1HnmUEW9oH%2Fimage25.png?alt=media\&token=b413d18d-c970-4d36-89e4-f66780a97bfd) {% hint style="info" %} Para visualizar um mapa no widget "Maps" é necessário, primeiramente, criá-lo. Para mais informações acesse o documento [construtor-de-mapas](https://docs.thingable.com/bem-vindo-a-wiki-da-thingable/bem-vindo-a-wiki-da-thingable/aplicativo/construtor-de-mapas "mention"). {% endhint %} ***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](https://2885740878-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCHBmOO4iyJaq3clNH0xR%2Fuploads%2F1gW2nDFjaQMUa1LeKi9X%2Fimage21.png?alt=media\&token=74047f04-7e6f-4920-a6ec-92ec959ffa37) Abaixo, segue um vídeo tutorial da ferramenta de gestão de alarmes: {% embed url="" %} Ferramenta de gestão de alarmes {% endembed %} #### **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](https://2885740878-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCHBmOO4iyJaq3clNH0xR%2Fuploads%2FmhknnIiIwfUGoV5rGHbO%2Fimage22.png?alt=media\&token=32e844c3-4233-4ff2-af99-7b157e46fd01) 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](https://2885740878-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCHBmOO4iyJaq3clNH0xR%2Fuploads%2FbvN12wJyiwIlqlTbAuEE%2Fimage23.png?alt=media\&token=aa03d150-f16a-4608-aef6-da6f127b5e24) {% hint style="info" %} Indicamos a leitura do nosso material dedicado ao tema de relatórios: [configuracao-de-relatorios](https://docs.thingable.com/bem-vindo-a-wiki-da-thingable/bem-vindo-a-wiki-da-thingable/aplicativo/configuracao-de-relatorios "mention") {% endhint %} #### **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.](https://2885740878-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCHBmOO4iyJaq3clNH0xR%2Fuploads%2FPcYceiEjHU4TsSbqsWxT%2Fimage26.png?alt=media\&token=76f8cf28-7d35-4a9a-8b0d-22ae4f88dd4e) ***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](https://docs.thingable.com/bem-vindo-a-wiki-da-thingable/bem-vindo-a-wiki-da-thingable/sinoticos/dinamizador-de-svg "mention"). ***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.](https://2885740878-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCHBmOO4iyJaq3clNH0xR%2Fuploads%2FXWENztoDtwqjry55wKps%2Fimage25.png?alt=media\&token=9f7ee6a8-a74a-4c60-ad3f-a0abe96305e1) * ***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'](https://2885740878-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCHBmOO4iyJaq3clNH0xR%2Fuploads%2F8ke77Bm70YmHTCrwN3HT%2Fimage26.png?alt=media\&token=f62c40ba-ce2f-4e4a-a9da-71683bc1923c) * ***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](https://2885740878-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCHBmOO4iyJaq3clNH0xR%2Fuploads%2FmJBSaHv5ahgfPnHRxXfP%2Fimage27.png?alt=media\&token=9d4d3b51-d263-44ca-9542-2de54c010d03) * ***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](https://2885740878-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCHBmOO4iyJaq3clNH0xR%2Fuploads%2FggfvMb0AP7FTFcGMz4tZ%2Fimage28.png?alt=media\&token=4a49a148-1d53-49e3-affa-6378093f4c28) * ***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](https://2885740878-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCHBmOO4iyJaq3clNH0xR%2Fuploads%2FH95Mr3k8mxyX3oQhWzIZ%2Fimage29.png?alt=media\&token=7b683659-df86-4618-bcdd-9df5a0fae9e5) * ***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 Cod*e: ![Figura 23 – Visualização da ferramenta de “Source Code”](https://2885740878-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCHBmOO4iyJaq3clNH0xR%2Fuploads%2Fxaq8WSHOC2QIHhOMhuEx%2Fimage31.png?alt=media\&token=ebc0bbe9-ec46-45d1-a2c0-dc9496587a53) {% hint style="info" %} Recomendados a leitura do material [interfaces-graficas-customizadas](https://docs.thingable.com/bem-vindo-a-wiki-da-thingable/bem-vindo-a-wiki-da-thingable/aplicativo/interfaces-graficas-customizadas "mention"). 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. {% endhint %}