Editor de painéis Sinóticos

O Portal de Telemetria disponibiliza um editor para que o usuário possa representar um processo monitorado através de um Sinótico. Este editor possui diversos recursos que permitem construir sinóticos bem simples, até os que possuem um rico nível de detalhes. Para facilitar o entendimento deste editor, vamos conceituar alguns elementos:

Área de Trabalho

Ao abrir a edição de um painel sinótico, é apresentada na página um painel onde deve-se de fato construir o sinótico conforme desejado, ou seja, representa o conteúdo do painel que será apresentado posteriormente no dashboard do conector associado a tela onde o sinótico está inserido. Neste painel, temos um menu com as seguintes opções:

Identificação	Descrição
Desfazer ação ou Ctrl + Z	Desfaz a última ação realizada na edição do painel;
Refazer ação ou Ctrl + Shift + Z	Refaz a última ação realizada na edição do painel;
Travar controles	Bloqueia a movimentação dos controles presentes no painel, também é possível Travar/Destravar Múltiplos Controles;
Movimentação restrita	Alterna o modo de movimentação dos controles presentes no painel. Veja maiores detalhes em: Modos de movimentação de controles;
Propriedades do painel	Abre o editor de propriedades do painel;
Expandir painel	Expande ou colapsa a apresentação do painel na página;
Remove este painel	Excluí o painel, deixando o layout vazio ou mantenha o Ctrl pressionado para excluir o painel vazio junto, recalculando o layout.
Sair do modo edição	Sai do modo de edição do painel e apresenta a visualização do layout da tela.

Atenção

As últimas 10 mudanças no sinótico são salvas em cada função de desfazer e refazer a cada 5 milissegundos no histórico local, podendo ser desfeita e refeita novamente enquanto estiver no modo de edição. Caso a ação de atalho não funcione, clique na área do sinótico que funcionará.

Editor de propriedades

Este editor é apresentado ao lado direito do painel de conteúdo do sinótico e apresenta inicialmente duas abas: uma com as propriedades especificas do painel sinótico representada pelo ícone de um “painel” e outra com os controles que podem ser utilizados no conteúdo do painel representada pelo ícone .

Propriedades Especificas do Painel

Esta aba “Painel” do editor define algumas configurações que são especificas do painel sinótico. São elas:

Dimensão de referência do canvas

Nesta seção, é apresentada a dimensão configurada para o painel. Na prática, os valores informados definem a razão de proporção (aspect-ratio - proporção da tela) entre a largura e a altura do painel. O valor da relação é usado para adaptar a dimensão inicial à área destinada ao painel no contexto do dispositivo utilizado para exibir a tela.

Identificação

Descrição

Proporção

Define os valores para cálculo da razão de proporção(aspect-ratio) entre a largura e a altura do painel. Caso haja uma imagem de fundo, deve-se utilizar os valores equivalentes a suas dimensões: Largura: Define a largura(em pixels) a ser utilizada no cálculo da razão de proporção(aspect-ratio) do painel sinótico; Altura: Define a altura(em pixels) a ser utilizada no cálculo da razão de proporção(aspect-ratio) do painel sinótico; “”: Permite que a largura e a altura sejam configuradas proporcionalmente, auxiliando nos ajustes de dimensão.

Atenção

As configurações de Largura e Altura do painel sinótico NÃO SÃO utilizadas nominalmente para definir a altura e largura do painel e sim para definir a razão de proporção(aspect-ratio) entre a largura e a altura do mesmo.

A largura do painel sinótico é sempre a da coluna onde o mesmo está inserido(no layout) e a altura é determinada pela razão largura/altura.

É importante salientar também que a largura da própria coluna do painel sinótico pode variar entre os dispositivos utilizados em sua visualização e a orientação deles.

Imagem de fundo

Esta configuração permite definir uma imagem de fundo para o painel. Esta imagem pode ser selecionada de uma Biblioteca de Imagens ou utilizada a URL de uma imagem pública na internet (com limitações), e com as mesmas configurações de largura e altura do tópico acima, porém a dimensão apresentada é em relação a resolução da imagem. Caso a imagem utilizada seja diferente da dimensão da tela, será ajustada para preencher toda a tela.

Atenção

Para melhores resultados, mantenha a proporção da imagem em relação a dimensão do painel.

Dimensões

Após definir uma imagem de fundo, aparecerá essa opção, que permite definir manualmente um tamanho de largura e altura para essa imagem, clicando no .

Cor de Fundo

Permite a escolha de uma cor de fundo para o painel que está sendo configurado.

Controles

A aba de Controles do editor exibe uma lista de controles que podem ser utilizados na construção do sinótico e também exibe uma lista de quais controles estão sendo utilizados no painel.

Controles de Tela

Controles de tela são elementos gráficos utilizados para criação de uma interface visual para representar o processo a ser monitorado.

Estes elementos disponibilizam ao usuário uma maior interação com o processo através da supervisão e atuação das variáveis de processo associadas a desenhos e imagens do processo associado.

A tabela a seguir lista os controles disponíveis para utilização no processo de criação de um painel sinóptico.

Identificação	Descrição
Static Label	Controle para representação de textos estáticos
Tag Display	Controle para representação de valores de dados
Image	Controle para representação de uma imagem
Text List	Controle para representação de listas de textos (associados a valores de dados)
Image List	Controle para representação de listas de imagens (associados a valores de dados)
Data Value Input	Controle para edição de valores de dados
Data Value Slider	Controle para representação e edição de valores de dados através de uma barra de medição
Data Value Select	Controle para edição de valores de dados através de uma caixa de seleção
Data Value Toggle	Controle para edição de valores de dados através de um botão de posição (On/Off)
Data Value Checkbox	Controle para edição de valores de dados através de uma caixa de checagem
Button	Controle para execução de ações
Progress Bar	Controle para representação de valores de dados em uma barra de progresso
Simple Table	Controle para representação de uma tabela configurável
Gauge	Controle para representação de valores de dados em um gauge
Gráfico	Controle para representação de valores de dados em tempo real em um gráfico

Adicionando um Controle no painel sinótico

Para adicionar um controle qualquer no sinótico, siga os seguintes passos:

• Selecione a aba de Controles no editor de propriedades do sinótico para que sejam apresentados os Controles de Tela disponíveis;

• Clique sobre o controle desejado e verifique que o mesmo será posicionado no canto superior esquerdo do sinótico;

• Agora basta posicionar e configurar o controle conforme desejado.

É possível também adicionar controles no sinótico arrastando-os da aba de Controles e posicionando-os no local desejado na tela. Para isso, basta seguir os seguintes passos:

• Selecione a aba de Controles no editor de propriedades do sinótico para que sejam apresentados os Controles de Tela disponíveis;

• Arraste com o mouse o controle desejado para o sinótico no local de interesse;

• Agora basta realizar os ajustes finos de posição e configurar o controle conforme desejado.

Facilitador no Formato do Dado

Quando um Dado é associado em um controle, o valor do Dado será apresentado com o Formato e Unidade configurados no Dado.

Caso o controle já esteja totalmente personalizado na tela e você deseje que as configurações de apresentação do Dado sejam exibidas, será necessário seguir os passos abaixo:

• Substituição Temporária do Dado: troque o Dado associado ao controle por um Dado diferente. Esse passo é necessário para garantir que o sistema reconheça a mudança e atualize as configurações;

• Restauração do Dado Original: após a substituição temporária, retorne ao Dado original que deseja configurar. Ao fazer isso, as configurações de apresentação do Dado serão corretamente exibidas e aplicadas.

Posicionamento de Controles

Após a inserção de controles no sinótico, é possível configurar sua posição de algumas maneiras. Vamos a cada uma delas:

• Através do próprio mouse, arrastando o controle para posição desejada;

• Através das propriedades do controle: Superior e Esquerda:

  • Superior: define a distância, em pixels, entre a borda superior do controle e a borda superior da tela;

  • Esquerda: define a distância, em pixels, entre a borda esquerda do controle e a borda esquerda da tela.

• Através das teclas de , , , do teclado:

  • Utilizando apenas essas teclas, a posição é deslocada de 10 em 10 pixels para direção selecionada;

  • Para realizar ajustes finos, pode-se utilizar a tecla SHIFT do teclado em conjunto com a tecla de direção desejada para que o deslocamento seja apenas de 1 em 1 pixel.

Modos de movimentação de controles

Na barra de botões do painel sinótico, é disponibilizado um botão para que seja possível alternar entre dois modos de movimentação de controles: livre e restrita.

Ao habilitar a movimentação restrita (o ícone sinalizará em azul), segurar e arrastar controles não selecionados não os movimentará, conforme a maneira padrão. Neste modo, para movimentar ou redimensionar controles é necessário um clique para selecionar seguido de outro para executar a ação desejada.

Ative a movimentação restrita para impedir que controles não selecionados se movimentem com um clique acidental.

Redimensionamento de Controles

Após a inserção de controles no sinótico, é possível configurar seu tamanho (dimensão) de algumas maneiras. Vamos a cada uma delas:

• Através do próprio mouse, posicionando o ponteiro do mouse nas bordas do controle até que apareça o ícone ou ). Após isso, basta dimensionar o controle conforme desejado.

• Através do próprio mouse, posicionando o ponteiro do mouse em um dos cantos das bordas (vértice) do controle até que apareça o ícone . Após isso, basta dimensionar o controle conforme desejado para ambos os lados (horizontal e vertical).

• Através das propriedades do controle: Largura e Altura:

  • Largura: define a largura, em pixels, do controle;

  • Altura: define a altura, em pixels, do controle.

• Através do CTRL com uma das teclas , , , do teclado:

  • Utilizando apenas essas teclas, o tamanho é aumentado/diminuído de 10 em 10 pixels para direção selecionada.

• Através do CTRL + SHIFT com uma das teclas , , , do teclado:

  • Utilizando apenas essas teclas, o tamanho é aumentado/diminuído de 1 em 1 pixels para direção selecionada.

Lista de Controles na Tela

Na aba de Controles , abaixo dos controles disponíveis, aparece uma lista de controles que estão sendo usados na tela:

Na frente do título principal da lista de controles na tela (Controles). Tem a possibilidade de:

• Desabilitar/habilitar a visualização de todos os controles pelo ícone , além de servir como facilitador para habilitar/desabilitar múltiplos controles que foram configurados um a um;

• Limpar o sinóptico, excluindo todos os controles pelo ícone .

Na frente de cada controle da lista são apresentados os seguintes ícones:

Dado inválido	Aparece nos controles que precisam associar dado nas configurações.
Duplicar	Duplica o controle na tela deslocado em 10 px à direita e superior, posicionado no topo da lista de controles na Tela.
Desabilitar ou habilitar	Desabilita ou habilita a visualização do controle na Tela.
Excluir	Deleta o controle da Tela.

Corrigir Itens Fora da Área Visível

Esta funcionalidade permite reposicionar os controles para ficarem totalmente visíveis no Painel Sinóptico, garantindo que permaneçam dentro da área de edição.

Essa funcionalidade na lista de controles do sinótico, facilitará a realocação dos controles que estão fora da área visível do canvas.

Sempre que um controle estiver fora da área visível do canvas, será exibido ícone de alerta sobre o item na lista de controles (assim como ocorre com controles que requerem Dado, mas o Dado ainda não foi associado).

Clicando no ícone de alerta sobre um controle específico, ele será reposicionado automaticamente para posição visível do canvas mais próxima de sua localização.

Sempre que houver itens posicionados fora do canvas, será também apresentado sobre a lista de controles, o ícone de indicação que permite reposicionar todos os controles de uma unica vez.

Atenção

Um controle fora do canvas nem sempre representa um erro, pois o usuário pode utilizar ações/eventos que reposicionem os controles conforme critérios específicos.

Na aba de Controles , abaixo dos controles disponíveis, aparece uma lista de controles que estão sendo usados na Tela:

• Na frente do título principal da lista de controles, é apresentado o ícone : Corrigir itens fora da área visível;

• Na frente de cada controle da lista é apresentado o ícone : Fora da área visível.

Seleção Múltipla de Controles

Na lista de controles da tela é possível selecionar múltiplos controles com Ctrl pressionado e clicando nos controles que deseja selecionar.

Travar/Destravar Múltiplos Controles

Além de ser possível travar todos os controles presentes na Tela clicando no ícone (transformando-o em ) na barra de ferramentas do painel, é possível também travar/destravar múltiplos controles.

Para isso, basta:

• Selecionar os controles desejados com a tela CTRL pressionada;

• Clicar com o botão direito do mouse sobre um dos controles selecionados;

• Clicar em cima da opção de travar/destravar, bloqueando a movimentação dos controles selecionados.

Atenção

A opção de travar todos os controles na barra de ferramentas tem preferência sobre a opção de destravar múltiplos controles.

Sobreposição de Controles

Na aba de Controles , são apresentados os controles que já foram inseridos no sinótico, a principio, na ordem em que foram criados.

Esta ordem tem relação com uma eventual sobreposição de controles na tela, como por exemplo, um controle ou parte dele, pode estar na mesma posição de um outro controle ou em parte dele também.

Neste caso, os controles que são listados no topo da lista são apresentados “na frente” de controles que estão mais adiante na lista, ou seja, caso dois controles estejam configurados de maneira que seus conteúdos ocupem a mesma posição na tela, o controle que estiver em uma posição mais acima da lista será sobreposto ou apresentado “acima” do outro controle.

Para alterar a ordenação de sobreposição de controles, siga os seguintes passos:

• Selecione o controle na lista apresentada na aba de Controles de ;

• Posicione o mouse em cima do ícone que representa o controle na lista até que seja apresentado no ponteiro do mouse o ícone de ;

• Agora basta posicionar o controle na lista conforme desejado, considerando que os controles mais próximos do topo, serão apresentados “acima” dos controles posicionados mais adiante na lista.

Ordenar Sobreposição de Controles

A ordem de sobreposição na lista de controles pode ser ajustada conforme necessário.

Para alterar a ordenação de sobreposição de controles, siga os seguintes passos:

• Clique com o botão direito do mouse sobre o controle desejado;

• Selecione uma das propriedades a seguir;

Opção

Descrição

Ordem

Ordena o posicionamento do controle na tela. Opções: Para o topo: muda o posicionamento do controle para o topo da lista de controles; Para frente: move o controle um posicionamento acima na lista de controles; Para trás: move o controle um posicionamento abaixo na lista de controles; Para o fundo: muda o posicionamento do controle para o final da lista de controles; Obs: Pode-se ordenar o posicionamento de apenas um controle por vez.

Sobreposição de Controles de Input

O padrão do Portal é exibir os controles de input acima dos demais, mantendo a mesma ordem de renderização com z-index: 90.

O z-index define a posição dos elementos na tela, de modo que valores maiores colocam os elementos em posições mais elevadas na sobreposição.

Esse padrão evita problemas de visualização dos tooltips, que poderiam ser ocultados por outros controles.

Escondendo Controles de Input

Para que um StaticLabel esconda controles de input, é necessário configurar uma condição para ocultar o StaticLabel e, ao exibi-lo, aumentar o z-index para que ele fique acima dos controles de input.

Passo a Passo

Configurar a Condição de Ocultação: Estabeleça uma condição que determine quando o StaticLabel deve ser oculto.

Definir o z-index Apropriado: Quando o StaticLabel estiver visível, ajuste o z-index para um valor superior ao dos controles de input. Por padrão, os controles de input têm um z-index de 90. Portanto, defina o z-index do para um valor superior. Isso garantirá que o StaticLabel seja exibido acima dos controles de input.

Exemplo

Posicionamento de Múltiplos Controles

O Posicionamento de Múltiplos Controles permite o posicionamento de objetos em relação a outros objetos ou à página. Quando for preciso alinhar mais de um controle, utiliza-se o seguinte método:

• Selecione 2(dois) ou mais controles que serão alinhados;

• No que será a referência, clique com o botão direito do mouse;

• Selecione uma das propriedades a seguir;

Opção	Descrição
Centralizar	Centraliza os controles horizontalmente, verticalmente ou ambos à tela Opções: Centralizar: centraliza o(s) controle(s) no centro da tela; Centralizar horizontalmente: centraliza o(s) controle(s) horizontalmente à tela; Centralizar verticalmente: centraliza o(s) controle(s) verticalmente à tela; Obs: Pode-se centralizar um único controle
Alinhamento	Alinha os controles entre si Opções: Alinhar à base: Alinha os controles à base do controle de referência; Alinhar ao topo : Alinha os controles ao topo do controle de referência; Alinhar à direita: Alinha os controles à direita do controle de referência; Alinhar à esquerda: Alinha os controles à esquerda do controle de referência; Alinhar horizontalmente: Alinha horizontalmente ao controle de referência; Alinhar verticalmente: Alinha verticalmente ao controle de referência;

Dimensionamento de Múltiplos Controles

O Dimensionamento de Múltiplos Controles modifica o tamanho dos controles entre si, utilizando um controle de referência, pode-se modificar as dimensões, igualando na altura, largura ou ambos. Para utilizar o Dimensionamento de Múltiplos Controles, utiliza-se o seguinte método:

• Selecione 2(dois) ou mais controles que serão dimensionados;

• No que será a referência, clique com o botão direito do mouse;

• Selecione uma das propriedades a seguir;

Opção	Descrição
Formato	Faz com que os controles fiquem com tamanhos iguais ao controle de referência; Opções: Mesma Altura: Faz com que os controles fiquem com a mesma altura; Mesma Largura: Faz com que os controles fiquem com a mesma largura; Mesmo Tamanho: Faz com que os controles fiquem com o mesmo tamanho;

Distribuição de Múltiplos Controles

A Distribuição de Múltiplos Controles possibilita estes controles serem posicionados com espaços iguais entre si na horizontal ou vertical baseado em algum critério. A distribuição é feita entre aqueles localizados aos extremos, ou seja, o mais à esquerda e o mais à direita no caso de distribuição horizontal. A definição de “mais à esquerda” ou “mais à direita” depende do tipo de distribuição selecionada. Por exemplo, se a distribuição for baseada no lado direito dos controles então o mesmo será utilizado para determinar quais os controles nos extremos. Para executar a Distribuição de Múltiplos Controles, utiliza-se o seguinte método:

• Selecione 3(três) ou mais controles que serão dimensionados;

• Clique com o botão direito do mouse em qualquer controle;

• Selecione uma das propriedades a seguir;

Opção

Descrição

Distribuição

Quando selecionar 3 ou mais controles, o menu de distribuição é habilitado Opções de Distribuição horizontal: Lados esquerdos à mesma distância: Distribua as distâncias entre os lados esquerdos uniformemente; Centros à mesma distância: Distribui os centros uniformes horizontalmente; Lados direitos à mesma distância: Distribui as distâncias entre os lados direitos uniformemente; Distância horizontalmente igual: Distribua com intervalos uniformes horizontalmente entre os objetos; Opções de Distribuição vertical: Topos à mesma distância: Distribui as distâncias entre os topos uniformemente; Centros à mesma distância: Distribui os centros uniformes verticalmente; Bases à mesma distância: Distribui as distâncias entre as bases uniformemente; Distância verticalmente igual: Distribua com intervalos uniformes verticalmente entre os objetos;

Utilização da Distribuição Horizontal

Lados esquerdos à mesma distância (Distribua as distâncias entre os lados esquerdos uniformemente):

Centros à mesma distância (Distribui os centros uniformes horizontalmente):

Lados direitos à mesma distância (Distribui as distâncias entre os lados direito uniformemente):

Distância horizontalmente igual (Distribua com intervalos uniformes horizontalmente entre os objetos):

Utilização da Distribuição Vertical

Topos à mesma distância (Distribui as distâncias entre os topos uniformemente):

Centros à mesma distância (Distribui os centros uniformes verticalmente):

Bases à mesma distância (Distribui as distâncias entre as bases uniformemente):

Distância verticalmente igual (Distribua com intervalos uniformes verticalmente entre os objetos):

Biblioteca de Imagens

Biblioteca de imagens é o local onde deve-se fazer o upload de imagens a serem utilizadas no painel Sinótico (imagem de fundo, lista de imagens, etc).

Portanto, ao selecionar a inserção de uma imagem, será apresentado o formulário de bibliotecas de imagem:

Neste formulário, temos as seguintes opções:

Identificação	Descrição
Caixa de seleção de Biblioteca do Contrato “”	Permite a seleção da Biblioteca de imagem
Botão para Editar Biblioteca “”	Permite alterar o Nome e Descrição da Biblioteca selecionada
Botão para criação de novas Bibliotecas “”	Abre formulário para criação de uma nova Biblioteca
Botão para pesquisa de imagens “”	Permite pesquisar imagens através de seu Nome ou Descrição da Biblioteca selecionada
Botão para download de imagens “”	Permite realizar o download de imagens selecionadas das Bibliotecas
Botão de exclusão de imagens “”	Permite realizar a exclusão de imagens selecionadas das Bibliotecas
Botão para realizar o upload de imagens “”	Permite fazer o upload de imagens para a Biblioteca selecionada
Botão para cancelar a operação “”	Permite cancelar alguma operação não salva na Biblioteca
Botão Selecionar	Seleciona uma imagem a ser utilizada em um controle do sinótico

Atenção

O link da imagem utiliza o ID específico da Biblioteca. Portanto, mover a imagem entre diferentes Bibliotecas não é permitido, pois isso resultaria na perda da referência da imagem no Painel Sinóptico.

Enviar uma nova imagem

Para adicionar uma nova imagem ou GIF, siga a sequência abaixo:

• Pressione o botão “Ctrl” e clique sobre o botão “”;

Após isso, será aberto o explorador de arquivos exibindo apenas as imagens e gifs contidos no seu dispositivo para que a seleção da imagem possa ser realizada;

• Selecionando um dos arquivos de imagem, também será disponibilizada a opção de adicionar uma descrição. Essa descrição poderá ser utilizada para pesquisa e/ou será exibida ao passar o ponteiro do mouse sobre a imagem na Biblioteca.

Atenção

Arquivos que não sejam imagens ou GIFs, serão rejeitados. Gerando o erro de “Imagem Inválida”.

Limite no envio de uma imagem

Para assegurar a estabilidade e o funcionamento adequado do Portal, são aplicadas restrições ao envio de arquivo de imagem. Essas limitações visam evitar falhas no sistema e garantir a qualidade do serviço.

Atenção

O tamanho máximo permitido para cada arquivo de imagem é de até 1 MB. Arquivos que excedam esse limite não serão aceitos pelo sistema.

Atualização de uma imagem já existente

Para substituir uma imagem já existente em uma biblioteca de imagens, deve-se fazer o upload de um arquivo de imagem com o mesmo nome da imagem já existente na biblioteca. Com isso, o sistema irá identificar essa condição e solicitar ao usuário que escolha pela substituição ou não:

Caso opte por sobrescrever, a imagem atual será substituída pela nova imagem(sem que haja alteração em seu nome/URL). Com isso, todos os controles do painel sinótico que utilizam a imagem que foi substituída na biblioteca serão automaticamente atualizadas com o novo conteúdo.

Enviar múltiplos arquivos de imagem

Para adicionar mais de um arquivo em conjunto, siga a sequência abaixo:

• Clique no botão ;

O Seletor de Arquivos permite receber imagens e GIFs de duas maneiras:

• 1: Arrastando os arquivos do seu sistema operacional diretamente para o Seletor de Arquivos;

• 2: Clicando no texto central do Seletor de Arquivos. Isso abrirá o explorador de arquivos do seu dispositivo, filtrando para exibir apenas arquivos válidos de imagem.

Limites no envio de imagens

Para garantir a estabilidade e o funcionamento adequado do Portal, algumas restrições são aplicadas durante o envio de múltiplos arquivos de imagem. Essas medidas ajudam a prevenir falhas e preservam a qualidade do serviço.

Quando um grande número de arquivos de imagem é enviado, o Portal poderá aplicar os seguintes limites:

• Bloqueio Temporário do Botão de Envio: Após atingir o limite de requisições, o botão “Enviar” será temporariamente desativado. O tempo de espera necessário será informado no próprio Portal, impedindo novas tentativas de upload até que o período expire;

• Exibição do Tempo de Restante: Durante o bloqueio, o painel exibirá um contador dinâmico indicando o tempo restante para que o envio possa ser retomado. Assim, o usuário pode acompanhar o progresso e planejar o próximo upload.

Atenção

Utilize o recurso de envio de múltiplas imagens com moderação para evitar bloqueios e retrabalhos. Seguir essas práticas ajudará a manter o processo eficiente e sem interrupções.

Pré-visualização de Imagens à Enviar

Após adicionar os arquivos de imagem, o Seletor de Arquivos permitirá a pré-visualização das mesmas.

Para substituir imagens já existentes em uma biblioteca, faça o upload de um ou mais arquivos com o mesmo nome das mídias já presentes na biblioteca selecionada. O sistema detectará esta condição e, por padrão, será exibida a opção de sobrescrever os arquivos que possuam os mesmos nomes.

Se optar por sobrescrever, a imagem atual será substituída pela(s) nova(s) imagem(ns) (sem que haja alteração em seu nome/URL).

Atenção

Todos os controles do painel sinótico que utilizam a imagem que foi substituída serão automaticamente atualizados com o novo conteúdo.

Se preferir não substituir as imagens existentes, desmarque a opção. Os itens que não serão enviados aparecerão opacos e exibirão uma dica (tooltip) indicando que o item já existe.

Para adicionar mais imagens durante a pré-visualização, arraste-as do sistema operacional diretamente para o Seletor de Arquivos.

Se desejar remover alguma imagem antes de enviá-la para a Biblioteca, clique no ícone “”, localizado no canto superior direito da imagem pré-visualizada.

Propriedades de sistema para Conectores e Dispositivos

Em um painel sinótico, é possível apresentar através de controles algumas informações de sistema para Conectores e Dispositivos.

Na seleção de um Dado, na configuração de um controle, são apresentadas as propriedades de sistema disponíveis separadas entre Conector e Dispositivo.

Atenção

Atualmente, não é tratada a simulação de um Valor de teste nos controles que possuem uma propriedade de sistema configurada no Dado tratado pelo controle.

Abaixo, segue a relação de propriedades de sistema de cada recurso:

Conector

Propriedade	Valor	Descrição
Nome	Texto	Nome cadastrado para o Conector
Habilitado	0 para Desabilitado ou 1 para Habilitado	Indica se o Conector está habilitado no Portal
Localização	Texto	Localização cadastrada para o Conector
Número de Série	Texto	Número de Série cadastrado para o Conector
Está Conectado?	0 para Desconectado ou 1 para Conectado	Indica o status de conexão do Conector com o Portal
Número de alarmes ativos	Número inteiro	Indica o número de alarmes ativos no Conector
Possui alarmes ativos?	0 para não possui ou 1 para possui alarmes ativos	Indica se existe alarmes ativos no Conector
Endereço	Texto	Informações sobre a localização geográfica cadastrada para o Conector

Dispositivo

Propriedade	Valor	Descrição
Nome	Texto	Nome cadastrado para o Dispositivo
Habilitado	0 para Desabilitado ou 1 para Habilitado	Indica se o Dispositivo está habilitado no Portal
Endereço do Dispositivo	Número inteiro	Número do endereço cadastrado para o Dispositivo
Está Conectado?	0 para Desconectado ou 1 para Conectado	Indica o status de conexão do Dispositivo com o Portal
Número de alarmes ativos	Número inteiro	Indica o número de alarmes ativos no Dispositivo
Possui alarmes ativos?	0 para não possui ou 1 para possui alarmes ativos	Indica se existe alarmes ativos no Dispositivo

Eventos

Ao selecionar um controle no sinótico, é apresentada uma aba no Editor de propriedades, com o ícone .

Nesta aba, é possível configurar algumas ações a serem disparadas quando são realizados alguns eventos nos controle(um clique em um botão por exemplo).

As ações possíveis podem ser verificadas em: Ações

Além disso, é possível também configurar animações de estilo dos controles em virtude de eventos de alteração de valor em dados.

Configurando uma ação de navegação entre telas

Conforme citado na seção anterior, é possível configurar algumas ações pré definidas em virtude de alguns eventos realizados em um controle.

Neste exemplo, vamos exemplificar como realizar uma navegação entre telas(dashboards) de um Conector através da ação de Clique em um controle Button.

Este guia considera a existência de duas telas(dashboards) de um Conector no Contrato e que ambas possuam um painel sinótico configurado.

Portanto, siga os seguintes passos:

• Adicione um controle de Button no painel sinótico. Após a adição, será apresentado o Editor de Propriedades;

• No editor, selecione a aba de Eventos, representada pelo ícone “”;

• Na opção Adicionar evento, em Selecione um evento, selecione a ação Clique.

Após adicionar o evento, serão apresentadas as seguintes opções na seção Ao clicar:

Identificação	Descrição
	Executar ações (configura as ações)
	Requer Confirmação?
	Remover a ação
	Deixa ou não visível as configurações da ação

Já na seção Selecione uma ação, serão apresentadas as seguintes configurações:

Identificação	Descrição
Grupo	Permite selecionar um grupo de ações
Ação	Permite selecionar a ação associada ao grupo
Botão Adicionar ação	Adiciona uma ação conforme a seleção das configurações acima

• Continuando a configuração da ação, na seção Grupo, selecione a opção Abrir Tela e confirme pelo botão ;

• Na nova seção que será criada com o nome da ação(Abrir Tela), selecione a tela desejada. Nesta ponto, já temos configurada a ação;

• Após verificar as configurações, publique as alterações através do botão de Publicar presente no sinótico.

Agora, basta seguir o guia acima para configurar a mesma ação na tela de destino da navegação criada acima, porém, definindo a ação para abrir a tela inicial. Desta forma, teremos uma navegação completa entre as telas.

Configurando animações nos controles

Conforme citado na seção anterior, o evento de Alteração de valor em dados, ou seja, quando ocorre a alteração de valor de algum dado, um ou mais estilos(animações) podem ser aplicados em um controle para uma determinada condição de valor do dado.

Atualmente, os estilos possíveis de serem animados são os seguintes:

Ações	Grupo	Descrição	Parâmetros
Cor	Estilo	Altera a Cor da Fonte no controle conforme a cor configurada	Cor da fonte
Cor de fundo	Estilo	Altera a Cor de Fundo no controle conforme a cor configurada	Cor de fundo
Esconde	Estilo	Torna o controle Invisível	Nenhum
Mostra	Estilo	Torna o controle Visível	Nenhum
Desabilita	Estilo	Desabilita a opção de clique no botão	Nenhum
CSS	Estilo	Permite uma personalização visual do botão	tópico CSS a ser utilizado. Para maiores informações, acesse CSS
Animação	Estilo	Adiciona uma animação para o controle configurado	Nome da animação a ser aplicada ao controle
Texto	Conteúdo	Altera o Texto exibido no controle	Texto a ser exibido pelo controle(apenas Static Label)

Ação de Animação de Controles

A ação de animação de controles disponibiliza um formulário para que seja possível:

• Associar animações a um controle;

• Configurar algumas características das animações;

• Visualizar quais efeitos as animações provocam no controle.

Atualmente, as seguintes configurações são disponibilizadas para a parametrização de cada animação:

Configuração	Descrição	Parâmetros
Repetição	Determina a quantidade de vezes que a animação aplicada ao controle será repetida	Padrão(sem repetições), infinito, Repetir: 1x; 2x ou 3x
Atraso	Define em segundos, o atraso que a animação terá para ser reproduzida	Padrão(sem atraso), 1s, 2s, 3s, 4s ou 5s
Velocidade	Define a velocidade em que a animação será reproduzida	Padrão(velocidade comum), rápido, muito rápido, lento, muito lento

Para simular uma animação e configurar cada um dos comportamentos citados acima, iremos criar um exemplo onde um controle “StaticLabel” será animado com o efeito Rotação a partir da Alteração de Valor de um Dado.

Para começar, iremos utilizar um Dado nomeado “BOMBA”, que será responsável por receber o valor escrito a partir de um controle nomeado “DataValueInput”, e consequentemente ativar a condição de disparo para que o controle seja animado.

Agora, criaremos uma nova Tela com um Painel Sinótico contendo:

• 3 Controles StaticLabel: dois destes serão responsáveis por nomear e facilitar o entendimento deste exemplo, contendo os nomes “Escrita do dado” e “Valor Atual”, respectivamente. O terceiro controle será responsável por receber as configurações de Animação;

• 1 Controle DataValueInput : Responsável por enviar o comando de escrita para o dado “BOMBA”;

• 1 Controle TagDisplay: Responsável por apresentar o valor atual do dado “BOMBA”, criado anteriormente.

Após renomear os controles “StaticLabel”, atribuir o dado “BOMBA” para os controles “TagDisplay” e “DataValueInput” e aplicar mudanças visuais para alguns controles, teremos uma tela semelhante ao exemplo abaixo:

Para a configuração do terceiro controle “StaticLabel”, nomeado “Teste-Rotação”, basta clicar sobre o controle e acessar a aba de Eventos:

Neste ponto, iremos configurar a ação de Animação:

• Após selecionar a aba de Eventos, clique em Adicionar evento;

• Selecione o Evento de Alteração de Valor;

• Associe o Evento de Alteração de Valor ao Dado “BOMBA”(criado anteriormente);

• Em Condições para disparo, selecione a comparação de igualdade(“==”) e determine o valor 1. Com isso, a animação será produzida apenas caso o valor do Dado assuma o valor 1;

• Em seguida, salve as configurações clicando sobre o ícone ;

• Em Selecione uma ação, defina no Grupo a opção Estilo e no campo Ação, selecione a opção Animação;

• Novamente adicione a ação através do ícone ;

A sequência da configuração descrita acima está exemplificada no vídeo abaixo:

Neste momento da configuração, será apresentada uma nova tela com demonstrações das animações disponíveis para serem utilizadas no controle.

Para este exemplo iremos configurar o controle da seguinte forma:

• Animação: Selecione a opção “rotate (rotacionar)”;

• Repetição: Selecione “Repetir 2x”;

• Atraso: Selecione “1s”;

• Velocidade: Selecione “padrão”:

• Após configurar a Animação do controle, publique a tela e defina-a como Dashboard de um Conector.

Acessando o dashboard do Conector, podemos visualizar o recurso em funcionamento:

Podemos observar que, ao alterar o valor do Dado “BOMBA” para 1, a condição de disparo para que o controle “StaticLabel” execute a ação de Animação é atingida.

Por este motivo, o controle foi animado conforme a configuração da animação: aplicando o efeito de rotação(“rotate (rotacionar)”), a “repetição” em 2 vezes, com o “atraso” de 1 segundo e utilizando a “velocidade” padrão.

Atenção

Eventualmente, caso a animação não funcione em seu Dispositivo, pode ser que os efeitos de animações possam estar desabilitados no seu Sistema Operacional.

Para habilitar animações, siga as instruções abaixo de acordo com seu ambiente:

Windows 11

• Clique no botão Iniciar e selecione “Configurações”;

• Em “Configurações”, escolha “Acessibilidade”;

• Dentro de “Acessibilidade”, clique em “Efeitos Visuais”;

• Ative a opção “Efeitos de animação”.

Windows 10

• Clique no botão Iniciar e vá para “Configurações”;

• Selecione “Facilidade de acesso”;

• Em “Facilidade de acesso”, escolha “Tela”;

• Certifique-se de que a opção “Mostrar animações no Windows” esteja ativada.

Windows 7

• Clique no botão Iniciar e selecione “Painel de Controle”;

• No Painel de Controle, clique em “Sistema e Segurança”;

• Em “Sistema e Segurança”, selecione “Sistema”;

• No menu do lado esquerdo, clique em “Configurações avançadas do sistema”;

• Na aba “Avançado”, na seção “Desempenho”, clique no botão “Configurações”;

• Na janela “Opções de Desempenho”, certifique-se de que a opção “Mostrar animações na janela” esteja marcada;

• Clique em “OK” para aplicar as alterações.

Lembre-se de que o suporte para o Windows XP foi encerrado pela Microsoft, portanto, é recomendável considerar a atualização para um sistema operacional mais recente, por motivos de segurança e compatibilidade com aplicativos e hardware mais recentes.

macOS

• Abra as “Preferências do Sistema” do macOS;

• Selecione “Acessibilidade”;

• Dentro de “Acessibilidade”, clique em “Tela”;

• Ative a opção “Reduzir movimento”;

• Atenção: Se a animação não estiver funcionando mesmo após essas configurações, verifique se há atualizações de sistema disponíveis e reinicie o computador após aplicar as alterações.

Linux

• Abra as “Configurações” do sistema;

• Navegue para a seção “Aparência” ou “Personalização”;

• Procure por opções relacionadas a animações, transições ou efeitos visuais.

Observação: as configurações exatas podem variar dependendo da distribuição e da versão do sistema operacional. Recomenda-se consultar a documentação ou pesquisar sobre seu ambiente.

CSS

Esta configuração permite personalizar visualmente o botão por meio de configurações em uma linguagem .CSS. Alguns dos exemplos mais utilizados:

Chave	Valor	Função
color	black, white, blue, red, etc	Muda a cor dos textos do botão
background-color	red ou #FF0000	Muda a cor de fundo do botão
border-color	black, white, blue, red, etc	Muda a cor das bordas do botão
opacity	0.8	Adiciona uma opacidade a unidade do botão
border-radius	15px	Muda o arredondamento das bordas do botão
margin	10px	Define o espaço entre as margens e o texto do botão
height	50px	Altera a altura do botão
width	100px	Altera a largura do botão
font-size	30px	Altera o tamanho da fonte da escrita dentro do botão
margin-top (left,right)	20px	Aplica um espaçamento entre a borda escolhida(top) do controle e o botão
padding-top (left,right)	20px	Aplica um espaçamento entre a borda escolhida(top) e o texto do botão

Atenção

Algumas configurações com parâmetros numéricos como ‘border-radius’ e ‘margin’, precisam de uma especificação de unidade para as alterações serem aplicadas. Neste caso, utilizaremos pixels (px). Por isso, sempre que essas configurações forem utilizadas, será necessário utilizar a sigla ‘px’ após o valor numérico, assim como exemplificado nos tópicos acima. Para opções de cores, tanto a escrita da cor (black, white, etc.), como seu código RGB (Red = #FF0000, Green = #00FF00, Blue = #0000FF), podem ser utilizadas como valor para a chave.

Exemplo: caso o valor de um determinado dado(temperatura) seja superior a 80, um controle Tag Display poderia apresentar a cor de fundo vermelha e a cor da fonte branca.

Portanto, vamos verificar como configurar animações conforme o exemplo acima:

• Adicione um controle de Tag Display no painel sinótico. Após essa adição, será apresentado o Editor de Propriedades;

• No editor, selecione a aba de Eventos;

• Na opção Adicionar evento, em Novo Evento, selecione a ação Alterar valor.

Após adicionar o evento, serão apresentadas as seguintes opções na seção Ao alterar valor:

Identificação	Descrição
	Simula a execução da ação configurada
	Remove a ação
	Deixa ou não visível as configurações da ação

Já na seção Variáveis, serão apresentadas as seguintes configurações:

Identificação	Descrição
Conector	Define o Conector associado ao dado que terá seu valor monitorado
Dado	Define o Dado que terá seu valor monitorado e no caso de alteração, irá avaliar a aplicação de animações no controle

Atenção

A cada dado definido na ação é associado um label ao dado para que este seja utilizado na montagem de expressões que determinaram as condições de disparo das ações. Estes labels são definidos na sequência para cada dado com $a, $b e assim por diante.

Após a seleção do(s) dado(s), clique no botão Nova condição para disparo para que seja apresentado o formulário para definição de Expressões lógicas. Estas expressões definem as comparações que serão realizadas com o valor do(s) dado(s) associado(s) a ação para que então apliquem as animações caso alguma condição seja satisfeita.

As configurações possíveis em uma expressão são:

Identificação

Descrição

Expressão lógica

Define a expressão lógica a ser comparada com o valor do dado para então aplicar os estilos configurados na ação. Opções: Operadores de comparação: Lista com os operadores de comparação: >= : maior ou igual != : diferente > : maior < : menor <= : menor ou igual == : igual Valor: Constante numérica com o valor a ser utilizado na comparação com o valor do Dado; : Permite editar manualmente a expressão lógica ao invés de escolher o operador de comparação; : Insere a expressão lógica.

• Continuando a configuração das animações, selecione a comparação >(maior) e defina o valor da comparação com 80;

• Clique no botão para inserir a condição de disparo;

• Após a inserção da condição de disparo, será apresentada uma nova seção nomeada com a comparação da expressão(Se [$a > 80]).

Atenção

Neste exemplo, estamos utilizando uma única condição de disparo. Porém, é possível configurar mais de uma condição de disparo(seguindo os passos anteriores).

Neste mesmo exemplo, além de alterar a cor de fundo para vermelho se o valor do dado for maior que 80, poderíamos alterar a cor de fundo para preto quando o valor dado fosse maior que 100.

Caso existam mais de uma ação configurada em um mesmo controle, o Portal aplica uma lógica OR entre as ações considerando a ordem em que foram criadas, ou seja, a primeira ação cujo a expressão for verdadeira, será aplicada e as demais não serão avaliadas.

Agora, selecione as configurações de animações clicando no botão . As opções são as seguintes:

Identificação	Descrição
Grupo	Permite selecionar um grupo de ações
Ação	Permite selecionar a ação(estilo) associada ao grupo
Botão Adicionar ação	Adiciona uma ação conforme a seleção das configurações acima

• Continuando a configuração das animações, na seção Grupo, selecione a opção Estilo;

• Na seção Ação, selecione a opção Cor e clique em Adicionar ação;

• Na nova seção que será criada com o nome Cor, selecione na opção de ícone de balde a cor branca. Agora, já temos configurada animação de alterar a cor da fonte do controle quando o valor do dado for maior que 80;

• Repita os passos acima para a ação de Cor de fundo (selecionando a cor vermelha);

• A configuração final, deve ser semelhante a imagem abaixo:

Neste ponto, a configuração das animações no controle Tag Display está finalizada. Para realizar um teste do comportamento das animações, siga os seguintes passos:

• Na seção Variáveis, clique em cima do nome do Dado configurado na ação. Ao clicar, será habilitada a digitação de valores;

• Digite o valor 90 e se tudo estiver configurado de forma correta, o controle apresentará a cor de fundo vermelha e a cor da fonte branca:

Por fim, após verificar as configurações, publique as alterações através do botão de Publicar .

Cópia de Eventos entre controles diferentes

Funcionalidade para reutilização dos eventos criados em um controle, copiando-os de um controle para outro controle diferente, podendo ser usado no mesmo sinótico e outro sinótico na mesma tela ou em outra tela.

Para usar este recurso crie um controle com Eventos, selecione-o e aperte Ctrl + C ou clique com o botão direito sobre ele e selecione a opção Copiar que será copiado o controle e suas configurações na área de transferência.

Para reutilizar apenas os eventos criados no controle copiado, selecione outro controle, e na aba Eventos clique em Adicionar evento, selecione o evento Do controle da área de transferência que será adicionado todos os eventos do controle copiado.

Fig. 15 Reutilizando os eventos do controle copiado na área de transferência.

Tela com Troca Dinâmica de Dados

Para facilitar a reutilização de telas desenvolvidas no Portal (que normalmente são criadas considerando um determinado conjunto de dados), é possível, através de Ações de abertura de telas, trocar dinamicamente as referências dos dados que foram definidos nos painéis utilizados pela tela que será aberta pela ação (chamada de tela de destino).

Em algumas aplicações, é comum a necessidade de se monitorar um conjunto de dados que se repete em um mesmo equipamento. Por exemplo, imaginemos a monitoração de algumas grandezas relacionadas a determinado modelo de medidor de energia e que o equipamento conectado ao Portal, comunica-se com 10 desses medidores (que são idênticos).

Então é possível construir apenas uma única tela que contenha os recursos necessários para monitorar este modelo medidor e para cada medidor, altera-se os dados que essa tela deve “buscar” as informações definidas.

Dessa forma, evita-se duplicar ou clonar uma tela já existente apenas pelo motivo de alterar os dados utilizados pelo seus painéis.

Os painéis que são compatíveis com este recurso são:

• Sinóptico;

• Dados;

• Histórico de Dados;

• Alarmes;

• Gráfico;

• Tabela.

Vejamos abaixo como configurar a utilização de dados dinâmicos em cada painel:

Painel Sinóptico

Como premissa desse recurso, apenas os controles que forem nomeados pelo próprio usuário no painel sinótico em que deseja alterar dinamicamente os dados permitirão essa configuração.

Os controles nomeados do painel sinótico serão listados durante a configuração da Ações de abertura de tela após a seleção da tela desejada.

A partir desse ponto, poderá ser atribuído um novo dado a ser utilizado após a execução da ação.

Por fim, um mesmo dado poderá ser atribuído dinamicamente a mais de um controle no sinótico, caso os controles possuam a mesma referência nominal.

Para realizar a configuração de alteração dinâmica de dados em um painel sinóptico, realize os seguintes passos:

• Crie 2 telas que serão utilizadas, uma chamada de origem, onde vamos definir quais os dados serão apresentados na tela que terão seus controles com dados dinâmicos, e uma outra tela chamada de destino, onde os dados serão apresentados conforme a seleção anterior(vide Criando uma nova Tela(dashboard) para um Conector);

• Tela de destino: crie ou defina os controles cujo os dados serão alterados dinamicamente;

• Nos controles que foram criados, defina um nome personalizado para cada controle que deseja-se alterar dinamicamente o dado. Veja o exemplo abaixo:

• Tela de origem: Defina o(s) controle(s) que fará a navegação para a tela de destino (vide Controles de Tela). No exemplo abaixo, foram definidos 3 botões, com o objetivo de que cada um, navegue para a tela de destino utilizando um conjunto de dados diferente:

• Neste passo, vamos configurar a ação de navegação para a tela de destino através de um botão. Portanto, primeiramente, acesse a sessão de Eventos do botão;

• Em Adicionar evento, escolha o evento Clique (será adicionada uma seção chamada Ao clicar);

• Na ação Ao clicar, selecione a opção Tela em Grupo e em Selecione uma ação, selecione opção Abrir tela. Agora clique em “” para adicionar a ação;

• Em Abrir tela, selecione a tela de destino e em Conector, mantenha a opção Manter o selecionada (após selecionar tela de destino, ao expandir a opção Troca dinâmica de dados, será apresentada na seção Controles customizáveis, os controles que foram nomeados na tela de destino):

• Agora, basta selecionar os dados que cada controle da tela de destino deve “assumir” quando a ação de abertura de tela for executada:

Painel de Dados

Em um Painel de Dados, a configuração dos Dados que serão apresentados é um pouco mais simples. Neste caso, deve-se definir na ação de abertura da tela, quais os Dados o respectivo painel da tela de destino deve apresentar(bem como a sua ordenação).

Para isso, deve-se selecionar o painel de dados desejado através da opção Painel existente na seção Troca dinâmica de dados.

Esta opção apresenta uma lista de painéis existentes na tela de destino associada a ação de abertura. Em cada item dessa lista, é apresentada a posição do painel e o seu nome.

Por exemplo, @2,1 Painel de dados, indica que o Painel de Dados a ser configurado está posicionado na segunda linha/primeira coluna do layout da tela de destino.

Após a seleção do painel, basta escolher os dados desejados através do botão Adicionar dado. Os dados escolhidos serão posicionados na seção Lista de Dados na ordem em que serão apresentados no painel:

Atenção

Caso o painel da tela de destino já possua uma lista de dados customizada diretamente no painel, essa lista será substituída pela lista de dados definida na ação.

Painel Histórico de Dados

Em um Painel de Histórico de dados de um Conector, a configuração dos Dados que serão apresentados é um pouco mais simples também. Neste caso, deve-se definir na ação de abertura da tela, quais os Dados o respectivo painel da tela de destino deve apresentar (bem como a sua ordenação).

Para isso, deve-se selecionar o painel de histórico desejado através da opção Painel existente na seção Troca dinâmica de dados.

Esta opção apresenta uma lista de painéis existentes na tela de destino associada a ação de abertura. Em cada item dessa lista, é apresentada a posição do painel e o seu nome.

Por exemplo, @2,2 Histórico do conector, indica que o Painel de Histórico a ser configurado está posicionado na segunda linha/segunda coluna do layout da tela de destino.

Após a seleção do painel, basta escolher os dados desejados através do botão Adicionar dado. Os dados escolhidos serão posicionados na seção Lista de Dados na ordem em que serão apresentados no painel:

Atenção

Caso o painel da tela de destino já possua uma lista de séries de dados customizada diretamente no painel, essa lista será substituída pela lista de dados definida na ação.

Painel de Alarmes

Em um Painel de Alarmes, deve-se definir na ação de abertura da tela, quais os Dados cujo seus Alarmes devem ser apresentados no respectivo painel da tela de destino.

Para isso, deve-se selecionar o painel de alarmes desejado através da opção Painel existente na seção Troca dinâmica de dados.

Esta opção apresenta uma lista de painéis existentes na tela de destino associada a ação de abertura. Em cada item dessa lista, é apresentada a posição do painel e o seu nome.

Por exemplo, @3,1 Painel de dados, indica que o Painel de Alarmes a ser configurado está posicionado na terceira linha/primeira coluna do layout da tela de destino.

Após a seleção do painel, basta escolher os dados desejados através do botão Adicionar dado. Os dados escolhidos serão posicionados na seção Lista de Dados na ordem em que serão apresentados no painel:

Atenção

Caso o painel da tela de destino já possua uma lista de dados customizada diretamente no painel, essa lista será substituída pela lista de dados definida na ação.

Painel Gráfico

Em um Painel Gráfico, há uma abordagem diferente em relação aos outros painéis que vimos até o momento.

Neste painel(na tela de destino), é necessário configurar as séries cujo os dados serão substituídos pela ação de abertura da tela de origem. Isso é necessário pois uma série de um Painel Gráfico, existem configurações que não podem ser inferidas pelo Portal, como por exemplo, o tipo da série(linha, barras ou pizza):

Já na tela de origem, deve-se selecionar o painel gráfico desejado através da opção Painel existente na seção Troca dinâmica de dados.

Esta opção apresenta uma lista de painéis existentes na tela de destino associada a ação de abertura. Em cada item dessa lista, é apresentada a posição do painel e o seu nome.

Por exemplo, @4,1 Painel Gráfico, indica que o Painel Gráfico a ser configurado está posicionado na quarta linha/primeira coluna do layout da tela de destino.

Portanto(após configurar o Painel Gráfico com as séries desejadas), deve-se definir na ação de abertura da tela, quais os Dados o respectivo painel da tela de destino deve apresentar. Aqui, a ordem como os dados são inseridos na lista, será a ordem como os mesmos serão substituídos nas séries do Painel Gráfico(o primeiro dado da lista substituíra o dado da primeira série do gráfico e assim por diante):

Painel Tabela

Em um Painel Tabela, também há uma abordagem diferente de configuração em relação aos outros painéis.

Neste painel, a substituição dinâmica de um dado ocorrerá em todas as células em que o mesmo é utilizado no painel da tela de destino.

Para isso, deve-se selecionar o painel tabela desejado através da opção Painel existente na seção Troca dinâmica de dados.

Esta opção apresenta uma lista de painéis existentes na tela de destino associada a ação de abertura. Em cada item dessa lista, é apresentada a posição do painel e o seu nome.

Por exemplo, @4,2 Tabela, indica que o Painel de Alarmes a ser configurado está posicionado na quarta linha/segunda coluna do layout da tela de destino.

Após a seleção do painel, serão apresentados na seção Lista de Dados, os Dados que são utilizados pelo painel na tela de destino e as respectivas células em que o Dado está associado:

Neste exemplo, o dado Medidor 01 - Fator de Potência está configurado para ser exibido a partir da célula A2 da tabela da tela de destino.

Formulários para agrupar escritas em Dados

Através do Painel Sinótico, é possível utilizar alguns controles que permitem a escrita em Dados:

• Data Value Input: controle para edição de valores de Dados;

• Data Value Select: controle para edição de valores de Dados através de uma caixa de seleção;

• Data Value Checkbox: controle para edição de valores de Dados através de uma caixa de checagem;

• Data Value Toggle: controle para edição de valores de Dados através de um botão de posição.

Uma escrita em Dado significa enviar para o equipamento remoto um determinado valor para a memória (variável) associada ao Dado.

Por padrão, todas as escritas realizadas através dos controles acima são tratadas de maneira individual pelo Portal, ou seja, a cada escrita, o Portal tenta enviar o valor informado para a memória(variável) associada ao Dado no equipamento remoto logo após a edição em cada controle.

Então caso o usuário precise escrever em mais de um Dado através do mesmo Painel Sinótico, ele editará o valor do primeiro Dado e o Portal irá tentar enviar o novo valor ao equipamento remoto logo na sequencia. Esse mesmo processo se repetirá para o segundo Dado cujo valor será alterado pelo usuário e assim sucessivamente conforme as escritas sejam necessárias.

Com o recurso de Formulários, é possível agrupar os controles que permitem escrita para que, através de uma única ação(associada a um botão por exemplo), todos os valores modificados nos controles de um determinado grupo sejam enviados ao equipamento remoto em um único comando.

Considerando o mesmo exemplo acima, onde o usuário precisa editar o valor de mais de um Dado, o usuário poderá informar o valor de todos os Dados que deseja modificar sem que o Portal faça nenhuma interface(escrita) no equipamento remoto. Apenas após o usuário acionar a ação de envio, todos os valores modificados de fato serão enviados para o equipamento remoto.

Para utilizar o recurso de Formulários, é necessário basicamente realizar dois passos.

Primeiramente, deve-se definir uma identificação textual para um formulário, por exemplo, form1 na configuração de Formulário disponível nas Propriedades específicas de cada controle que permite escrita. Os controles que possuírem a mesma identificação, farão parte de um mesmo formulário.

Por fim, deve-se configurar o envio das modificações realizadas nos controles de um mesmo formulário e para isso, basta utilizar a ação de Enviar disponível no grupo chamado Form. Esta ação pode ser configurada em um controle “Button”(botão), por exemplo.

Além da ação de “Enviar”, é possível também utilizar uma outra ação chamada Restaurar, cuja função é restabelecer os valores nos controles após eventuais modificações realizadas pelo usuário anteriores ao envio do formulário.

Exemplo

Para realizar o processo de escrita em Dados via Formulário, ou seja, em um conjunto de Dados com um único comando, vejamos na sequência de configurações abaixo, um exemplo de como criar formulários e associar alguns controles(que permitem escrita) de um Painel Sinótico aos mesmos.

Neste exemplo, iremos utilizar um Conector com 4 Dados cadastrados e que habilitam a escrita. Abaixo, segue um exemplo de configuração de um Dado que permite escrita:

Com os recursos já cadastrados, iremos criar uma nova Tela que será responsável por ser o Dashboard do Conector, contendo um Painel Sinótico e um Painel de Dados.

No Painel Sinótico, iremos adicionar alguns controles essenciais para a configuração:

• 4 controles “Data Value Input” (serão divididos 2 para cada formulário);

• 4 controles “Button”(botão) que serão responsáveis por enviar os comandos de escrita e restaurar os valores para cada um dos formulários;

• Para facilitar a compreensão dos recursos neste exemplo, iremos adicionar também, alguns controles de “Static Label” para identificar os formulários e seus respectivos Dados(cujo valores serão modificados).

Adicionando os controles ao Painel Sinótico e realizando as configurações apenas estéticas, teremos uma tela semelhante a imagem abaixo:

• Para a configuração dos controles de “Data Value Input”, acesse suas propriedades e associe os controles aos Dados que serão alterados pelo comando de escrita:

Neste momento, iremos configurar 2 formulários(chamados form1 e form2) distintos para agrupar os controles de escrita:

• Acesse a aba de Propriedades específicas de cada controle “Data Value Input”. Iremos definir os controles dos Dados “Corrente” e “Tensão” para o “form1” e para controles dos Dados “Umidade” e “Velocidade”, iremos relacioná-los ao “form2”. Para isso basta inserir as identificações “form1” e “form2” no campo de Formulário dos respectivos controles.

• Formulário 1:

• Formulário 2:

Agora, iremos configurar os botões responsáveis por enviar as escritas em Dados dos formulários e restaurar os valores:

• Para a configuração de cada um dos botões, acesse a sessão de Eventos (após selecionar o botão desejado);

• Em Adicionar evento, escolha o evento Clique (será adicionada uma seção chamada Ao Clicar);

• Na ação Ao Clicar, selecione em Grupo, o grupo chamado Form e em Ação, escolha a opção Enviar para os botões nomeados como “Enviar”. Já para os botões nomeados como “Restaurar”, selecione a ação Restaurar;

• Agora, clique em “” para adicionar a ação:

Veja abaixo, um resumo prático de todas essas configurações apresentadas:

Após a realização destas configurações e para facilitar a visualização da funcionalidade, vamos adicionar um Painel de Dados ao lado do Painel Sinótico e salvar a tela, definindo-a como Dashboard do Conector em que será aplicado esta configuração:

Podemos observar que o recurso de formulários permite enviar algumas escritas via Painel Sinótico com apenas um comando.

Utilizando Dados Vetores em Painéis Sinóticos

Conceitos

Um Dado configurado como Vetor permite a interface(leitura e/ou escrita) com mais de uma memória da base de variáveis de um equipamento remoto(que sejam subsequentes) utilizando um único Dado para tal. Para mais informações, acesse Dados Vetores.

Cada memória/variável mapeada por um Dado Vetor, ou seja, cada elemento deste Dado, pode ser manipulada de maneira independente através de um Painel Sinótico. Para isso, basta utilizar os mesmos controles já utilizados para Dados elementares.

A diferença aqui é que, para cada controle utilizado, deve-se configurar no controle qual o índice(posição) do elemento do Dado Vetor o mesmo irá interagir(leitura e/ou escrita).

Atenção

O índice de um elemento de um Dado Vetor sempre começa do valor 0(zero) para o primeiro elemento, valor 1(um) para o segundo elemento e assim por diante.

A escrita em Dados Vetores é tratada pelo Portal de Telemetria sempre enviando ao equipamento todos os valores de seus elementos, ou seja, a escrita ocorre do Vetor como um todo. Por este motivo, caso a tela confeccionada possua alguns controles que permitem a escrita nos elementos de um mesmo Dado Vetor, é remomendado que se utilize o recurso de Formulários para agrupar escritas em Dados, no qual permita enviar as escritas ao equipamento remoto em um único comando na tela(associado a um botão por exemplo).

Em cada controle, quando selecionado um Dado Vetor no qual o mesmo irá interagir, é apresentada uma nova seção chamada de Índice de Valor.

É nesta opção que se define o índice(ou posição) do elemento do Dado Vetor que se deseja apresentar ou manipular no controle.

Atualmente, o valor de índice de um elemento de um Dado Vetor pode ser obtida através de uma das seguintes opções:

• Constante: pode-se utilizar diretamente um valor constante(0, 1, 2, etc) como o valor do índice do elemento que se deseja manipular no controle. Lembrando que o valor de índice começa em 0 para o primeiro elemento do Dado Vetor, valor 1 para o segundo elemento e assim por diante;

• De um Dado: neste caso, o valor de índice será obtido do Dado configurado nesta opção. Isso significa que um mesmo controle, pode interagir com diferentes elementos de um Dado Vetor conforme o valor do Dado de índice vá alterando seu valor também.

Abaixo, serão apresentados alguns exemplos de utilização de Dados Vetores em um Painel Sinótico com o objetivo de apresentar e manipular os valores do mesmo.

Manipulação de valores dos elementos de um Dado Vetor

Para manipular os valores dos elementos de um Dado Vetor em um Painel Sinótico, ou seja, apresentar estes valores ou realizar uma escrita nos mesmos, iremos utilizar os seguintes controles:

• Tag Display: responsável apenas por apresentar o valor de cada um dos elementos do Dado Vetor;

• Data Value Input: responsável por permitir a escrita em cada elemento do Dado Vetor.

Neste exemplo, iremos configurar um Dado da seguinte maneira:

• Tipo de Memória: Holding Register(ou seja, valores inteiros);

• Tamanho do Vetor: 5, ou seja, o Dado Vetor irá possuir 5 elementos (5 valores inteiros);

Após a criação do Dado, vamos criar uma nova tela com um Painel de Dados, no qual será utilizado para visualizarmos de maneira padrão os valores dos elementos do Dado Vetor e um Painel Sinótico para apresentar e permitir a escrita em cada elemento do Dado Vetor.

Para o Painel Sinótico, vamos adicionar 5 controles Tag Display para apresentar os valores de cada elemento do Dado Vetor e 5 controles Data Value Input que serão utilizados para realizar a escrita de cada um destes elementos.

Para facilitar o acompanhamento, iremos adicionar alguns controles Statics Labels para a identificação de cada um dos índices(posições) dos elementos e seus respectivos valores.

No exemplo abaixo, a coluna “Escrita” representa os controles Data Value Input, já a coluna “Valores” representa os controles Tag Display:

Para a configuração dos controles Tag Display, que serão responsáveis apenas por apresentar o valor de cada elemento do Dado Vetor, acesse a aba de Propriedades e em Origem, selecione o Dado Vetor que será monitorado.

Ao selecionar o Dado Vetor, será exibida uma nova seção chamada de Índice de Valor. Neste exemplo, iremos manter a origem Constante.

Em cada um dos Tags Display, defina neste campo de Índice, o valor de acesso a cada elemento do Dado Vetor(0 para o primeiro elemento, 1 para o segundo elemento e assim em adiante para os outros elementos).

A configuração descrita está exemplificada no vídeo abaixo:

Para a configuração dos controles Data Value Input, que serão responsáveis manipular o valor de cada elemento do Dado Vetor, o processo é semelhante ao realizado para os controles Tag Display.

Portanto, acesse a aba de Propriedades e em Origem, selecione o Dado Vetor que será manipulado.

Na seção Índice de Valor, mantenha a origem do índice como Constante e para cada um dos controles, configure o valor de índice associado a cada elemento do Dado Vetor:

Após realizar o procedimento de configuração dos painéis, salve e associe a tela ao Conector onde o Dado Vetor será monitorado.

Acessando o Dashboard do Conector, onde o Dado Vetor será monitorado, podemos visualizar os elementos do Painel Sinótico que foram configurados.

Utilizando a coluna “Escrita”, podemos realizar o processo de escrita para cada um dos elementos que o Dado Vetor possui. Através da coluna “Valores”, podemos visualizar os valores atuais de cada um dos elementos:

Manipulação dinâmica dos elementos de um Dado Vetor

Já neste exemplo, iremos utilizar o valor de um outro Dado como sendo a origem de valor do índice para os elementos do Dado Vetor que os controles do Painel Sinótico irão acessar/manipular.

Para utilizar este recurso, é necessário criar um novo Dado cujo o tipo de memória represente um valor inteiro.

Neste exemplo iremos criar um novo Dado(chamado Índice) com o tipo de memória Holding Register e com o modo de Leitura e Escrita:

Após a criação do Dado Índice, crie uma nova tela contendo um Painel de Dados e um Painel Sinótico.

No Painel Sinótico, teremos os seguintes controles:

• 1 controle Data Value Input (chamado de Valor do Índice), onde este será responsável por manipular o valor de cada índice do Dado Vetor. É aqui que informaremos qual elemento do Dado Vetor iremos apresentar nos demais controles;

• 1 controle Data Value Input (chamado de Escrita no elemento), onde este será responsável por manipular o valor do elemento do Dado Vetor definido pelo valor do Dado de índice;

• 1 controle Tag Display (chamado de Valor do elemento) que será responsável por apresentar o valor do elemento do Dado Vetor cujo o valor do Dado de índice esteja apontando.

Ao final da montagem e adicionando controles Statics Labels para facilitar a identificação dos controles, teremos uma tela semelhante ao exemplo abaixo:

Para a configuração do primeiro controle Data Value Input(Valor do Índice):

• Acesse a aba de Propriedades, em Origem, associe o Dado criado no começo deste exemplo(Índice) para receber o valor de índice dos elementos do Dado Vetor;

• Para permitir uma atualização ainda mais dinâmica, marque a opção Visualização rápida na seção Controles/Botões/Ações. Quando habilitada, a interface mostrará as alterações nos controles que dependam do Dado associado ao Data Value Input mesmo que a escrita ainda não tenha ocorrido.

Para a configuração do segundo controle, Data Value input (Escrita no elemento):

• Em Origem, relacione o Dado Vetor que será monitorado;

• Ao selecionar o Dado Vetor, em Índice de Valor, altere a Origem para a opção De um dado;

• Em seguida, associe o Conector em que o Dado Índice foi cadastrado e o selecione o Dado “Índice”;

• Para permitir uma atualização ainda mais dinâmica, marque a opção Visualização rápida na seção Controles/Botões/Ações.

Para a configuração do terceiro controle, Tag Display”(Valor do elemento), realize o mesmo processo de configuração do controle anterior.

As configurações já aplicadas em seus respectivos controles estão exibidas nos exemplos abaixo.

• Campo “Valor do Índice”:

• Campo “Escrita no elemento”:

• Campo “Valor do elemento”:

Após finalizar a configuração, salve a tela e associe-a ao conector que será monitorado. Acessando o Editor de Telas(dashboard) de um Conector, podemos observar a ferramenta criada:

Podemos concluir que, conforme o “Valor do Índice” é alterado, os controles restantes são dinamicamente atualizados com o valor do elemento do Dado Vetor apontado pelo Dado de índice.

Além disso, é possível escrever no elemento do Dado Vetor apontado pelo Dado de índice através do controle Escrita no elemento.

Monitoração da Alteração de Valor do Dado Vetor

O tratamento de monitoração do valor de Dados Vetores para disparo da ação configurada de “Alteração de Valor”.

Para este exemplo, iremos adicionar mais dois StaticLabel, um para colocar a descrição e outro para configurar a ação, como mostra abaixo:

Configure o evento para o StaticLabel que vai ser alterado quando acontecer a ação:

• Selecione o controle StaticLabel;

• Na aba Eventos, clique em Adicionar evento;

• Selecione o Evento de Alterar valor;

• Escolha o dado: DADO VETOR;

• Adicione a condição;

• edite a expressão, adicionando o índice (posição);

• Associe uma ação do grupo (Estilo) com a ação (Cor);

• Decida uma cor da letra no balde;

• Clique em adicionar ação;

• Associe uma ação do grupo (Conteúdo) com a ação (Texto);

• Insira uma descrição.

Nessa mesma aba Eventos, clique em Nova condição para disparo e siga a configuração anterior até ficar como desejar, por exemplo assim:

Depois copie e cole o StaticLabel configurado um embaixo do outro, mudando apenas o índice correspondente em cada condição dentro dos colchetes [] da expressão.

Então para mostrar outro exemplo nessa tela, iremos utilizar mais dois StaticLabel, um para colocar a descrição e outro para configurar a ação, como mostra abaixo:

Configure o evento para o StaticLabel que vai ser alterado quando acontecer a ação:

• Selecione o controle StaticLabel;

• Na aba Eventos, clique em Adicionar evento;

• Selecione o Evento de Alterar valor;

• Escolha o dado: DADO VETOR;

• Clique em Adicionar Variáveis;

• Escolha o dado: INDICE;

• Adicione a condição: $a[$b] <= 0;

• Onde a variável (a) é o vetor e a (b) é o índice;

• Associe uma ação do grupo (Estilo) com a ação (Cor);

• Decida uma cor da letra no balde;

• Clique em Adicionar ação (representada pelo ícone );

• Associe uma ação do grupo (Conteúdo) com a ação (Texto);

• Insira uma descrição.

Nessa mesma aba Eventos, clique em Nova condição para disparo e siga a configuração anterior até ficar como desejar, como foi no exemplo anterior.

Funcionamento da Monitoração de dados vetores

Expressões em células

As expressões são linhas de código que podem ser escritas em controles do Painel Sinótico. Esses códigos permitem uma personalização de exibição mais abrangente diante ao controle em que será atribuído, podendo facilitar a busca e exibição de informações de Conectores, Dispositivos, Dados e entre outros. Para maiores informações, acesse Expressão.

Para exemplificarmos o uso de expressões em Dados Vetores com o objetivo de personalizar o resultado que será exibido em um controle, utilizaremos um Dado contendo 5 elementos.

Crie uma nova tela contendo um Painel de Dados e um Painel Sinótico.

Para facilitar o entendimento das expressões em células, iremos adicionar controles de Tag Display e alguns Statics Labels para auxiliar na exibição dos elementos de cada posição e seus respectivos valores:

Para a manipulação entre os valores dos elementos de um Dado Vetor, iremos adicionar o controle Simple Table e utilizar a expressão $at.

Esta expressão será utilizada para retornar o valor de um determinado elemento de um Dado Vetor em função do valor de índice passada para a mesma.

Em um controle “Simple Table”, personalize visualmente da maneira preferível.

Neste exemplo, iremos utilizar o “$at” para somar, subtrair, dividir e multiplicar, utilizando valores salvos entre os elementos do Dado:

Para acessar e exibir os elementos de um Dado Vetor, acesse as propriedades de uma das células da tabela criada, relacione o Dado Vetor monitorado e no campo Expressão e utilize a seguinte função:

• $at(x)+$at(y)

Onde x e y serão substituídos pelos valores de índice em que se deseja obter os valores dos elementos do Dado Vetor(que serão utilizados para realizar a operação matemática).

O Dado utilizado neste modelo, como podemos observar com os controles já criados neste Painel Sinótico, está configurado para possuir 5 índices de armazenamento, contendo os valores [10, 20, 30, 40, 50].

Por isso, ao definir uma função contendo $at(1) + $at(2), o resultado que será exibido por está célula, será o valor da soma entre os valores dos elementos do Dado Vetor que estão posicionados nos índices 1 e 2.

Neste caso, a célula exibirá o valor 50, sendo a soma entre o valor do elemento de índice 1(20) e o valor do elemento de índice 2(30).

As configurações do exemplo descrito e o restante das atribuições às outras operações matemáticas estão demonstradas no vídeo abaixo:

Através das expressões, também é possível utilizar o método de comparação para modificar o que será exibido na célula.

Neste próximo exemplo, iremos comparar os valores de 2 elementos do Dado Vetor.

Para isso, iremos adicionar 1 controle “Simple Table”, e após personalizá-lo visualmente, vamos à configuração da célula:

• Para a primeira célula, iremos comparar os valores dos elementos de índices 1 e 2 (com os valores respectivos de 20 e 30);

• A comparação que será criada a partir da expressão será: caso o valor do elemento do índice 2, for maior que o valor do elemento de índice 1, o valor retornado deverá ser o valor do elemento de índice 3(40). Caso não seja maior, deverá retornar o valor do elemento de índice 4(50);

• Criando a função, teremos uma expressão desta forma: $at($at(2) > $at(1) ? 3:4).

As configurações descritas estão exemplificadas no vídeo abaixo:

Podemos observar que, ao criar a expressão da maneira correta, o valor exibido foi 40.

Seguindo a expressão, o valor do elemento de índice 2(30), é maior que o valor do elemento de índice 1(20). Por isso, o valor exibido, foi o valor do elemento de índice 3(40), confirmando que a primeira comparação está correta.

Seguindo para a configuração da segunda célula:

• Nesta célula, iremos comparar os valores dos elementos que estão localizados nos índices 4(50) e 3(40);

• A comparação será: caso o valor do elemento de índice 4(50) for menor que o valor do elemento de índice 3(40), o valor retornado deverá ser o de índice 2(30), caso o valor não seja menor, deverá retornar o valor de índice 1(20);

• Criando a função, teremos uma expressão desta forma: $at($at(4) < $at(3) ? 2:1).

As configurações descritas estão exemplificadas no vídeo abaixo:

Podemos observar que, ao criar a expressão da maneira correta, o valor exibido foi 20. De acordo com a expressão, o valor do elemento de índice 4(50), não é menor que o valor do elemento de índice 3(40), negando a comparação. Por isso, o valor exibido foi de índice 1(20).

Na tabela abaixo estão descritas expressões que podem ser utilizadas para exibir de maneira personalizada o valor de um índice em uma célula:

Operação	Operador	Função	Expressão
Soma		Realiza a soma entre os elementos do Dado Vetor apontados por X e Y	$at(X) + $at(Y)
Subtração		Realiza a subtração entre os elementos do Dado Vetor apontados por X e Y	$at(X) - $at(Y)
Multiplicação		Realiza a multiplicação entre os elementos do Dado Vetor apontados por X e Y	$at(X) * $at(Y)
Divisão	/	Realiza a divisão entre os elementos do Dado Vetor apontados por X e Y	$at(X) / $at(Y)
Comparação	>, <, <=, >=, ==, !=	Permite comparar valores dos elementos do Dado Vetor apontados por X e Y	$at($at(X) < $at(Y) ? Y:X)

Utilizando Dados Locais em Painéis Sinóticos

O tratamento de monitoração do valor de Dados Locais para disparo da ação configurada de “Alteração de Valor”.

Para este exemplo, iremos utilizar a configuração de dados como mostra abaixo:

Com o painel sinótico com 3 DataValueInput e o restante de StaticLabel:

Configure o evento para o StaticLabel que está embaixo do Status do Dado Numérico que vai ser alterado quando acontecer a ação:

• Selecione o controle StaticLabel;

• Na aba Eventos, clique em Adicionar evento;

• Selecione o Evento de Alterar valor;

• Escolha o dado: Dado Local Número;

• Adicione a condição ou edite a expressão;

• Associe uma ação do grupo (Estilo) com a ação (Cor);

• Decida uma cor da letra no balde;

• Clique em Adicionar ação (representada pelo ícone );

• Associe uma ação do grupo (Conteúdo) com a ação (Texto);

• Insira uma descrição.

Nessa mesma aba Eventos, clique em Nova condição para disparo e siga a configuração anterior até ficar como desejar, por exemplo assim:

Depois faça o mesmo processo no StaticLabel que está embaixo do Status do Dado Decimal mudando o dado escolhido.

E no último como o Dado é String pode ser feito a comparação usando aspas simples ou duplas como abaixo:

Funcionamento da Monitoração de Dados Locais

Utilizando Expressão Genérica para Verificar Dado Alarmado

Este recurso permite monitorar o Dado para verificar se possui algum Alarme ativo.

Essa melhoria possibilita a exibição de Dados com Alarmes genéricos, como Alarmes de “muito alto” e “muito baixo”, sem a necessidade de Dados adicionais para configurar animações. A abordagem torna o sinótico mais flexível e reduz a necessidade de ajustes manuais no evento de alteração de valor ao alterar os cadastros de Alarmes.

Atenção

Não é possível monitorar um Alarme específico por expressão, caso precise, seria recomendado o uso da ferramente de Eventos.

Para exemplificar a opção de utilização de expressões para Alarmes, iremos criar uma nova Tela e adicionar:

• 2 Controles nomeados StaticLabel: Responsáveis por exibir o nome dos Dados em que os Alarmes serão monitorados;

• 2 Controles nomeados TextList: Responsáveis por alertar caso o Dado possua algum alarme ativo;

• 2 Controles nomeados ImageList: Responsáveis por exibir 2 botões, vermelho caso o Dado possua algum Alarme ativo ou verde caso o Dado não possua nenhum Alarme ativo.

Após adicionar os controles, teremos uma tela semelhante ao exemplo abaixo:

Neste caso, o nome dos Dados que serão monitorados são Temperatura e Umidade e para personalizar os controles de TextList, iremos definir as configurações da seguinte forma:

• Na aba de “Propriedades específicas” > “Lista de texto”, adicionar 2 textos para os as opções “Normal” e “Alarmado” com a origem definida em “Controle”;

• Para o texto “Normal”, defina o valor 0 e a cor verde e para o texto “Alarmado”, defina o valor 1 e a cor vermelha;

• Para finalizar, iremos utilizar a expressão “(data.has_active_alarms) ? 1 : 0” no campo de expressão. Esta expressão permite com que o Portal identifique se o Dado possui algum Alarme ativo. Caso tenha, o valor interno da expressão dos controles será definido em 1, e caso o Dado não possua nenhum alarme ativo, será definido em 0.

Ao final da configuração, aplicando estas opções para ambos os controles, teremos uma personalização semelhante ao exemplo abaixo:

Para a personalização dos controles “ImageList”, o processo é semelhante, porém na aba de “Propriedades específicas” > “Lista de imagens”, iremos adicionar 2 imagens diferentes, neste caso, 2 imagens de botões:

• Botão verde: Responsável por ser exibido caso o Dado não possua Alarmes ativos;

• Botão vermelho: Responsável por ser exibido caso o Dado possua Alarmes ativos;

Ao final das configurações, teremos uma tela semelhante ao exemplo abaixo:

Podemos analisar que neste caso, o Portal informa ao usuário que o Dado “Temperatura” não possui Alarmes ativos, e os controles são definidos em 0. Consequentemente, será exibido o texto “Normal” na cor verde para o controle “TextList” e o botão também verde para o controle “ImageList” (de acordo com as configurações que foram feitas inicialmente).

Já o Dado “Umidade”, possui Alarmes ativos e por isso, os controles são definidos para o valor 1, exibindo o texto “Alarmado” na cor vermelha para o controle “TextList” e o botão também vermelho para o controle “ImageList”.

Utilizando Expressões Para Extrair bits individuais de um Dado

Este recurso permite monitorar cada bit do valor decimal de um Dado para verificar se o mesmo está ligado ou desligado, isto é, 0 ou 1.

Para exemplificar esta utilização, iremos criar uma nova Tela e adicionar:

• 2 Controles nomeados StaticLabel: Responsáveis por exibir o título da informação (valor decimal e valor binário);

• 2 Controles nomeados TagDisplay: Responsáveis por exibir o Valor do Dado Associado e transformado por expressão;

• 1 Controle nomeado StaticLabel: Responsável por exibir o título dos bits;

• 1 Controle nomeado StaticLabel: Responsável por exibir a posição do bit;

• 1 Controle nomeado ImageList: Responsável por exibir se a posição do bit está ligada ou desligada;

• 1 Controle nomeado TagDisplay: Responsável por exibir se a posição do bit vale 0 ou 1.

Após adicionar os controles, teremos uma tela semelhante ao exemplo abaixo:

Para personalizar os controles StaticLabel, iremos adicionar um valor para exibir o texto e definir as configurações da seguinte forma:

• Cor do texto: branco;

• Cor de fundo: preto.

Após configurar os controles StaticLabel, teremos uma tela semelhante ao exemplo abaixo:

Em ambos controles de TagDisplay superior, deve-se configurar a borda como preta com bordas arredondadas em 3 px(pixels), além de alinhar os controles.

O nome do Dado que será monitorado é Temperatura, ou seja, deve-se associá-lo ao TagDisplay ao lado do StaticLabel com o texto “Valor Decimal” e também no TagDisplay ao lado do StaticLabel com o texto Valor Binário, já neste controle, será necessário transformar o valor do Dado em binário com a expressão:

$value.toString(2)

Ao final da configuração, aplicando estas opções para ambos os controles, teremos uma tela semelhante ao exemplo abaixo:

Para adicionar as outras posições do bit, iremos duplicar o StaticLabel, alterando seu valor e após terminar todas as posições, selecionar os controles para distribuir uma distância horizontal igualitária no painel:

Para personalizar os controles de ImageList, iremos definir as configurações na aba de “Propriedades específicas” > “Lista de imagens” e iremos adicionar 2 imagens diferentes, neste caso, 2 imagens de botões:

• Botão verde com escrita “ON”: Responsável por ser exibido caso o bit esteja ligado;

• Botão vermelho com escrita “OFF”: Responsável por ser exibido caso o bit esteja desligado.

Após isso, associe o Dado e adicione a expressão mudando o valor do número após os caracteres “<<” de acordo com a posição do bit, clonando-os:

($value & (1 << 0)) > 0 ? 1 : 0

Ao final das configurações, teremos uma tela semelhante ao exemplo abaixo:

Para personalizar o último TagDisplay, deve-se configurar a borda como preta com bordas arredondadas em 3 px. Após iremos associa-lo ao Dado e adicionar a expressão mudando o valor do número após os caracteres “<<” de acordo com a posição do bit, clonando-os:

($value & (1 << 0)) > 0 ? 1 : 0

Ao final das configurações, teremos uma tela semelhante ao exemplo abaixo:

Ativando a Responsividade do Painel Sinótico no Dashboard

O Portal de Telemetria disponibiliza um novo recurso para que o Dashboard feito no painel sinotico ocupe toda a tela, sem ter parte dela que precisa da barra de rolagem para ser vista.

Antes de começarmos, vejamos como fica a apresentação do dashboard antes da configuração.

Visualização do Menu Lateral e Cabeçalho

Nas propriedades da tela, se quiser deixar o menu lateral e o cabeçalho invisível na apresentação do dashboard, desative-os na seção de componentes visíveis.

Agora para deixar o layout responsivo conforme o tamanho da tela, nas propriedades do sinotico, ative a opção preencher página.

Após publicar, a visualização ficará dessa forma.

Podendo redimensionar a janela e ser aberto em qualquer dispositivo que o tamanho da tela será recalculado.