Painel Sinótico

Além dos painéis citados acima, existe também o painel para apresentação de um Sinótico na tela de um conector.

O modo e as informações apresentadas por este tipo de painel é totalmente customizada pelo usuário no momento de sua criação.

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;
Magnetismo inteligente com guias	Ativa guias inteligentes para alinhamento, redimensionamento, centralização e distribuição de espaçamento entre os controles e o painel. Veja: Encaixe Automático com Guias;
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	Exclui 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 específicas 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 Específicas do Painel

Esta aba “Painel” do editor define algumas configurações que são específicas 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.

Importante

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 em si, mas sim para definir a razão de proporção(aspect-ratio) entre a largura e a altura do mesmo com os controles contidos no painel.

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.

Desta forma, caso a Largura e Altura do painel sejam editadas, automaticamente os controles serão reajustados para que seja proporcional a exibição dos controles de acordo com a resolução definida para o painel

Ajuste Automático da Dimensão e Posição dos Controles Após Redimensionamento do Canvas

A aplicação automática do ajuste de controles ocorrerá somente quando o redimensionamento do canvas estiver em modo proporcional, ou seja, com o aspect ratio ativado.

Caso deseje realizar alterações sem considerar a proporção, é possível desativar temporariamente a vinculação (ícone “”), ajustar os valores desejados e, posteriormente, reativá-la antes de aplicar as mudanças. Ao aplicar as alterações com o vínculo de proporção ativado, os controles serão ajustados automaticamente.

Além disso, é possível desfazer ou refazer esta operação utilizando os comandos de undo/redo do Painel Sinótico. Uma mensagem explicativa também será exibida para auxiliar o usuário sobre o funcionamento desse recurso.

Esse recurso é habilitado ao clicar no botão de Aplicar.

Atenção

Todos os controles já configurados no painel serão automaticamente redimensionados. Porém, caso algum novo controle seja adicionado, será adicionado com as dimensões padrões do painel.

Por isso, caso a ferramenta de redimensionamento do layout seja necessária, o ideal é que todos os controles já estejam inseridos/configurados no painel antes do redimensionamento ser aplicado.

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. Por isso, para melhores resultados, mantenha a proporção da imagem em relação a dimensão do painel.

Atenção

Recomenda-se que as imagens utilizadas estejam salvas em uma Biblioteca de Imagens do Portal de Telemetria para evitar complicações com links externos.

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 da função do Controle
Static Label	Representação de textos estáticos
Tag Display	Representação de valores de Dados
Image	Representação de uma imagem
Text List	Representação de listas de textos (associados a valores de Dados)
Image List	Representação de listas de imagens (associados a valores de Dados)
Data Value Input	Edição de valores de dados
Data Value Slider	Representação e edição de valores de dados através de uma barra de medição
Data Value Select	Edição de valores de Dados através de uma caixa de seleção
Data Value Toggle	Edição de valores de Dados através de um botão de posição (On/Off)
Data Value Checkbox	Edição de valores de Dados através de uma caixa de checagem
Button	Execução de ações
Progress Bar	Representação de valores de Dados em uma barra de progresso
Simple Table	Representação de uma tabela configurável
Gauge	Representação de valores de Dados em um gauge
Gráfico	Representação de valores de Dados em tempo real em um gráfico
Shape	Edição de formas geométricas simples

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 de adição de imagem

Na aba de Controles é possível acessar um facilitador de criação do controle image através do ícone “ “ destacado na imagem abaixo.

Acessando o facilitador é possível visualizar todas as imagens salvas nas bibliotecas do contrato e adicioná-las ao painel sinótico clicando ou arrastando a imagem desejada. Automaticamente essa imagem será inserida dentro de um controle image no sinótico.

Filtro de Bibliotecas

Dentro do facilitador de imagens é possível acessar as imagens salvas dentro de uma biblioteca específica do contrato clicando no ícone “ “ no seletor como mostra a imagem abaixo.

Para entender melhor o conceito de bibliotecas de imagens, acesse Biblioteca de Imagens.

Filtro de Pesquisa

Dentro do facilitador de imagens é possível pesquisar pelo nome da imagem desejada através de um filtro de pesquisa clicando no botão “ ” como mostra a imagem abaixo.

Atenção

A pesquisa não difere letras minúsculas de maiúsculas e nem considera acentuação, considerando apenas caracteres especiais.

Upload de Imagens

Dentro do facilitador de imagens também é possível fazer o upload de novas imagens e criar novas bibliotecas clicando no botão destacado na imagem abaixo.

Para entender melhor o recurso, acesse Biblioteca de Imagens.

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.

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.

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.

Movimentação com Eixo Restrito

Para facilitar o reposicionamento de controles sem perder o alinhamento original, o sistema permite restringir o movimento a apenas um dos eixos (X ou Y) utilizando o teclado:

• Mantenha a tecla SHIFT pressionada durante o arrasto;

• O movimento será travado automaticamente na horizontal ou na vertical, dependendo da direção inicial do deslocamento do mouse.

Encaixe Automático com Guias

O recurso exibe Guias que facilitam a organização visual do Sinótico, permitindo que os controles sejam posicionados com mais precisão de forma assistida.

Atenção

O Encaixe Automático possui uma variação máxima de 1 pixel devido ao arredondamento das coordenadas (X, Y) para números inteiros. Embora possa haver esse desvio técnico residual, o recurso garante um alinhamento visualmente preciso e profissional em todo o layout.

Para ativar ou desativar a funcionalidade, utilize o botão localizado na barra de ferramentas superior do painel.

Funcionalidades e Comportamento

Ao arrastar ou redimensionar um controle, o sistema projeta guias dinâmicas que auxiliam na construção do layout através de:

• Alinhamento: Identifica automaticamente as bordas (topo, base, esquerda e direita) de controles próximos. Permite alinhar múltiplos controles perfeitamente lado a lado. Além disso, permite o alinhamento pelas bordas internas de outro controle ou do próprio painel.

• Encaixe nas Laterais: Ao aproximar um controle das borda de outro, as guias indicam o encaixe, facilitando a organização do layout e evitando deslocamentos acidentais.

• Centralização: Exibe eixos de referência para centralizar um controle em relação a outro componente ou em relação ao centro geométrico do painel (horizontal, vertical ou ambos).

• Distribuição: O recurso calcula o espaçamento entre controles em tempo real, exibindo a distância exata em pixels. Ao aproximar um controle de uma sequência existente ou entre dois componentes, as guias indicam visualmente quando os espaços entre eles estão perfeitamente equalizados (horizontalmente e verticalmente).

• Redimensionamento: Durante o ajuste de tamanho, as guias garantem que o controle mantenha a mesma largura ou altura de objetos vizinhos. O sistema também sugere pontos de ancoragem baseados em proporções, como a metade do tamanho do controle mais próximo ou a metade da largura/altura total do painel.

Atenção

O recurso de puxar controle para o encaixe nas laterais pode atrapalhar a centralização e redimensionamento de controles quase do mesmo tamanho próximos (para isso necessita desabilitar ou arrastar com CTRL pressionado para desabilitar o encaixe automático momentaneamente para realizar ajustes finos ou utilizar encaixes manuais).

Benefícios de Uso

O uso do Magnetismo garante precisão e agilidade na montagem do layout, eliminando a necessidade de ajustes manuais exaustivos nas propriedades de posição (X e Y) dos controles.

Dica

Combine o uso do Magnetismo com o Enquadramento de Seleção e Agrupamento para alinhar blocos inteiros de componentes de uma só vez, mantendo a consistência visual de todo o projeto.

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 única 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, você pode selecionar e gerenciar diversos controles simultaneamente utilizando os seguintes atalhos:

• Seleção Individual Alternada: Mantenha a tecla Ctrl pressionada e clique em cada controle desejado;

• Seleção em Sequência (Bloco): Clique no primeiro controle, mantenha a tecla Shift pressionada e clique no último controle da lista para selecionar todos os elementos entre eles.

Dica

A seleção múltipla facilita a edição em massa das propriedades comuns pelo menu de contexto da lista de controles, como:

• Clonar (Recortar, Copiar ou Colar);

• Remover;

• Travar ou destravar a posição e redimensionamento do controle na Tela;

• Desabilitar ou habilitar a visualização do controle na Tela;

• Mudar a ordem de sobreposição em relação aos demais controles;

• Agrupamento ou desagrupamento de Controles.

Seleção Múltipla de Controles

Na área de trabalho do painel sinótico, é possível selecionar múltiplos controles utilizando a Seleção Individual Alternada, mantendo a tecla CTRL pressionada e clicando individualmente em cada controle.

Dica

A seleção múltipla facilita a edição em massa das propriedades comuns pelo menu de contexto do Sinótico, como:

• Clonar (Recortar, Copiar ou Colar);

• Remover;

• Travar ou destravar a posição e redimensionamento do controle na Tela;

• Desabilitar ou habilitar a visualização do controle na Tela;

• Centralizar horizontalmente, verticalmente ou ambos no sinótico;

• Alinhamento entre os controles em relação a um controle de referência (base, topo, direita, esquerda, horizontal ou vertical);

• Distribuição horizontal ou vertical entre os controles;

• Redimensionar o formato para mesma altura, largura ou ambos em relação a um controle de referência;

• Mudar a ordem de sobreposição em relação aos demais controles;

• Agrupamento ou desagrupamento de Controles.

Enquadramento de Seleção para Múltiplos Controles

A funcionalidade de Enquadramento de Seleção permite selecionar diversos controles simultaneamente no Painel Sinótico através de uma área de seleção, facilitando a edição em massa de propriedades e o reposicionamento de blocos do layout.

Para realizar a seleção por área, clique em um ponto vazio do painel, pressione e arraste o mouse para delimitar a região desejada.

Importante

Regras de Seleção:

• Abrangência Total: A seleção considera apenas os controles que estiverem totalmente dentro da região delimitada, garantindo maior precisão em layouts densos;

• Controles Bloqueados: Objetos travados (bloqueados) são ignorados pela área de seleção;

• Plano de Fundo: Para que a seleção por área funcione corretamente utilizando Plano de Fundo, este deve estar configurado como um controle bloqueado.

Dica

Utilize esta função para criar agrupamentos de forma ágil ou para edição em massa das propriedades comuns da Seleção Múltipla de Controles.

Agrupamento e Desagrupamento de Controles

A funcionalidade de agrupamento permite tratar múltiplos controles como uma única unidade. Isso é fundamental para preservar o alinhamento, a proporção e o posicionamento relativo entre os elementos durante ajustes, reorganizações ou duplicações de um grupo de controles.

Atenção

A funcionalidade de agrupamento não permite o redimensionamento de todos os itens em conjunto. Caso seja necessário ajustar o tamanho, a operação deve ser realizada de forma individual.

Como Agrupar Controles

O agrupamento está disponível sempre que dois ou mais controles estiverem selecionados simultaneamente:

• Selecione os controles desejados utilizando o Enquadramento de Seleção, a Seleção múltipla no Sinótico ou na Lista de Controles.

• Utilize o atalho CTRL + G ou utilize o menu de contexto: * Clique com o botão direito sobre a seleção; * Selecione a opção Agrupar.

Dica

Após o agrupamento, o grupo permanece selecionado. Você pode aproveitar este estado para duplicar o conjunto completo utilizando o atalho CTRL + D.

Gestão de Seleção dentro do Grupo

• Seleção no Sinótico: Ao clicar diretamente em um elemento agrupado no Sinótico, o sistema seleciona o grupo como um todo, duplo clique seleciona o elemento individual dentro do grupo.

• Seleção do Grupo: Para manipular ou copiar o grupo como uma unidade após ele ter sido desmarcado, você deve selecioná-lo através da Lista de Controles, clicando sobre a pasta correspondente ao grupo.

Agrupamento Hierárquico

É possível criar grupos dentro de outros grupos, estabelecendo uma hierarquia complexa.

• No Sinótico: Você pode agrupar elementos externos (grupo pai primeiro) e, em seguida, incluir em grupos internos menores (grupos filhos);

• Via Lista de Controles: A criação de grupos de nível superior (unir grupos já existentes em um novo grupo maior) deve ser realizada exclusivamente através da Lista de Controles.

Desagrupamento

Para desfazer um grupo, utilize o atalho CTRL + SHIFT + G ou clique com o b otão direito sobre o grupo e selecione a opção Desagrupar.

Atenção

Em grupos hierárquicos, a ação de desagrupar afeta apenas o nível externo (“grupo pai”). Os subgrupos internos permanecem preservados, sendo necessário repetir a ação caso deseje desagrupá-los individualmente.

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 tecla 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 princípio, 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 controle para um valor superior. Isso garantirá que o StaticLabel seja exibido acima dos controles de input.

Exemplo

Centralizar Controles na Tela

Para centralizar controles na tela, siga os seguintes passos:

• Selecione o(s) controle(s) que deseja centralizar;

• 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 de Múltiplos Controles

O Posicionamento de Múltiplos Controles permite o posicionamento de objetos em relação a outros objetos. 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

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 da Distância entre 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 controles(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. Neste 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
z-index	90	Define a posição dos elementos na tela (Ex: Escondendo Controles de Input)

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. 37 Reutilizando os eventos do controle copiado na área de transferência.

Indicação do Status de Comandos

No Painel Sinótico é possível visualizar o status dos eventos no controle Button e dos comandos de escrita em dados através de controles de escrita, como Data Value Input, Data Value Toggle e o Data Value Slider.

Para verificar o status de um comando enviado, basta clicar no ícone ” “ que surgirá ao lado do controle quando o comando de escrita for enviado. Ao clicar, será aberto um modal para exibir a fila de comandos pendentes do dado que recebeu o comando.

Pela escrita no Painel de Dados também é possível visualizar o status dos comandos de escrita, que será atualizado nos controles do Painel Sinótico.

O modal pode ser movimentado dentro do Painel Sinótico para facilitar a visualização.

Também é possível remover comandos de escrita pendentes por meio do ícone “”, que mudará para o ícone “” ao sobrepor o cursor. Ao selecionar essa opção, será exibida uma mensagem de confirmação para remover o comando da fila.

Ainda, é possível visualizar o status das ações de envios de formulários através de botões ou outros controles do sinótico. Entretanto, existe uma limitação: o status dessa ação no botão considera globalmente a existência de comandos pendentes, e não apenas do formulário associado à ação. Ou seja, o modal acabará exibindo o status de escrita em dados fora do escopo do formulário associado ao controle.

Configurações de Escrita

Nos controles que recebem comandos de escrita, como Data Value Input, Data Value Toggle e o Data Value Slider, é possível configurar a posição que aparecerá o modal de status do comando na aba “Controle”.

Configurações da Ação do Botão

No controle Button é necessário habilitar a opção “Mostrar status pendente?” na configuração do evento do botão, ou seja, nas configurações internas do evento “Ao clicar”.

Todos os controles com ação de escrita no mesmo dado, e que tenham essa opção marcada, apresentarão o mesmo spinner quando houver algum comando de escrita pendente, evitando assim sobrescrita no mesmo dado.

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;

• 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 sequência. 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.

Atenção

Não é recomendado utilizar controles com o mesmo dado associado em formulários diferentes para enviar comandos de escrita, pois poderá prejudicar a visualização da Indicação do Status de Comandos. Apesar disso, é possível utilizar controles para visualização desses dados em outros formulários.

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.

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 Introdução, 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 com Cálculos utilizando Dados Vetores

O Portal de Telemetria permite realizar cálculos diretos entre elementos de um Dado Vetor utilizando expressões. Dependendo do tipo de controle empregado, o processo pode ser simplificado como no controle de tabela (SimpleTable), ou exigir função complementar para extrair um elemento da string do vetor em todos os controles que suportam expressões, pois a interface exige a escolha de um elemento para exibição do valor.

Nota

Para realizar cálculos entre os elementos de um Dado Vetor, podemos utilizar a expressão $at() ou o processo pode exigir a criação de uma função para manipular os valores de mais de um elemento do Dado Vetor em outros controles que exigem a definição de um elemento pra exibir o valor.

Por isso teremos 3 exemplos distintos para exemplificar a utilização:

• Expressões em células de uma tabela;

• Cálculos para todos os controles que suportam expressões;

• Utilizando expressões em apenas uma célula (simulando o TagDisplay).

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)

Expressões em células de uma tabela

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:

Comparações utilizando Dado Vetor

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. Isto acontece pois, conforme a expressão criada, o valor do elemento de índice 2(30), é realmente 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).

Cálculos para Todos os Controles que Suportam Expressões

Outros controles, como Tag Display, Gauge e Progress Bar, não oferecem acesso direto à função $at(). Nesses casos, utilizamos a representação completa do vetor por meio da expressão data.restore.value e aplicamos uma função global para separar os elementos.

Criando função global

Para permitir o acesso a posições específicas do vetor nesses controles, crie uma função global em Scripts Globais do Contrato com um nome, por exemplo getAt:

(v, i) => {
    return Number(v.replace('[', '')
                   .replace(']', '')
                   .split(',')[i]);
}

Parâmetros:

• v: vetor completo em formato string.

• i: índice desejado.

Exemplos de uso em Tag Display

Soma:

$getAt(data.restore.value, 0) + $getAt(data.restore.value, 3)

Subtração:

$getAt(data.restore.value, 3) - $getAt(data.restore.value, 1)

Multiplicação:

$getAt(data.restore.value, 2) * $getAt(data.restore.value, 1)

Divisão:

$getAt(data.restore.value, 4) / $getAt(data.restore.value, 2)

Exemplo prático completo

Vetor:

[0, 10, 20, 30, 40]

Expressão aplicada:

$getAt(data.restore.value, 2) - $getAt(data.restore.value, 0)

Resultado:

20 - 0 = 20

Observação

A função global é reutilizável em qualquer controle que aceite expressão, incluindo:

• Tag Display;

• Gauge;

• Progress Bar;

• Simple Table (caso desejado, embora não seja necessário).

Conclusão

A escolha da abordagem depende do controle empregado:

• SimpleTable: melhor opção para cálculos entre elementos do vetor por permitir o uso direto de $at().

• Controles de exibição sem escrita (Tag Display, Gauge, etc.): exigem o uso de data.restore.value e funções globais como $getAt().

Cada abordagem permite manipular Dados Vetores de forma precisa e flexível, tornando o Painel Sinótico mais completo e funcional.

Utilizando expressões em apenas uma célula (simulando o TagDisplay)

Nesta abordagem, utilizamos o controle SimpleTable para acessar e calcular valores individuais de um Dado Vetor.

Além de realizar cálculos diretamente dentro do SimpleTable, é possível utilizar uma tabela com apenas uma única célula (excluindo linhas e colunas) como estratégia para simplificar a exibição do resultado final em outros controles, como o Tag Display.

Essa estratégia é recomendada quando:

• O objetivo é apenas exibir o resultado final do cálculo (ex.: soma, média, diferença).

Além disso, o controle SimpleTable oferece suporte nativo à função $at(posicao), permitindo acessar um elemento do vetor sem converter sua representação textual (data.restore.value). Isso elimina a necessidade de funções globais e simplifica a criação de cálculos personalizados.

Para acessar um índice específico do vetor, utilize:

$at(x)

Onde:

• x é o índice do elemento;

• A contagem inicia em 0.

Exemplos:

• $at(0) retorna o primeiro elemento;

• $at(1) retorna o segundo elemento;

• $at(4) retorna o quinto elemento (quando existente).

Operações matemáticas entre elementos

Como o SimpleTable aceita expressões aritméticas, é possível realizar cálculos diretos entre os elementos do vetor.

Soma:

$at(0) + $at(1)

Multiplicação:

$at(0) * 100

Média:

($at(0) + $at(1)) / 2

Diferença:

$at(3) - $at(2)

Importante

O controle SimpleTable não exige o uso de data.restore.value nem de funções globais. O acesso direto via $at() simplifica a configuração e reduz a probabilidade de erros.

Exemplo prático

Dado Vetor:

[10, 20, 30, 40, 50]

Expressão aplicada:

$at(1) + $at(2)

Resultado exibido:

20 + 30 = 50

Exemplo completo

Vetor:

[10, 20, 30, 40, 50]

Expressão aplicada na célula:

($at(0) + $at(4)) / 2

Resultado calculado:

(10 + 50) / 2 = 30

Valor exibido no Tag Display:

30

Vantagens da abordagem

• Elimina a necessidade de usar data.restore.value;

• Não requer função global para leitura do vetor;

• Mantém a lógica simples e centralizada;

• Permite que controles exibidores operem sem limitações;

• Reduz a probabilidade de erros de manipulação do vetor.

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

Imagem Dinâmica com Dado Local

O controle de Imagem do Painel Sinótico permite que a URL da imagem associada ao controle seja obtida através do valor de um Dado Local.

Esse recurso é ideal em casos onde instâncias de um Conector de Modelo utilizam a mesma Tela com a mesma organização no Painel Sinótico, porém cada conector possui imagens específicas dos seus processos ou em cenários que a imagem se repete em vários controles na mesma Tela. Assim, caso seja necessário alterar essas imagens, basta editar o valor do Dado Local com a URL da nova imagem.

Nota

Acesse Conectores de Modelo e Conectores de Instância para entender o que são Conectores cadastrados como Modelo ou Instância.

Exemplo com Instâncias de Modelo

Para utilizar esse recurso é necessário cadastrar um Conector de Modelo que possua um Dado Local do tipo String, que será herdado pelas instâncias desse modelo.

Atenção

O Dado Local do Conector de Modelo não deve ser preenchido para não gerar conflitos com as Instâncias.

As URLs das imagens devem ser atribuídas aos Dados Locais dos Conectores de Instância correspondentes acessando a página de edição do Dado e preenchendo o campo “Valor”, como mostra o exemplo:

É importante que a Tela utilizada nos Conectores de Instância esteja associada no Conector de Modelo, pois assim as instâncias irão herdar a atribuição da Tela automaticamente.

Na edição do controle de imagem no Painel Sinótico, na aba “Dado”, associe o Conector de Modelo criado e o Dado Local do Conector de Modelo conforme demonstra a imagem:

Agora, com o Painel Sinótico configurado, podemos acessar o Dashboard dos Conectores de Instância, que terão suas imagens associadas automaticamente na mesma Tela.

Exibição Dinâmica de Dispositivos em Telas de Modelo

Em projetos que utilizam o recurso de Conector de Modelo, uma única tela atende a diversas instâncias. Como a quantidade de Dispositivos pode variar entre elas, utiliza-se a técnica de Sobreposição Condicional para Ocultação Dinâmica de Controles, mantendo a interface limpa.

Nota

Para monitorar a quantidade de Dispositivos vinculados ao Conector carregado na tela, associe um controle (como o TagDisplay) ao Dado $info das Propriedades do Conector e utilize a expressão data.device_count.

Benefícios da Implementação

Automação de Layout: A tela se autoajusta instantaneamente ao trocar o Conector de Instância no Dashboard.

Redução de Telas: Elimina a necessidade de criar e manter uma tela específica para cada variação de modelo do projeto.

Lógica de Funcionamento

A estratégia consiste em utilizar um controle de “máscara” (um retângulo com a mesma cor de fundo do Sinótico para criar o efeito de “campo removido”) que reage ao valor de device_count. Através de Ações de Alteração de Valor, o controle é manipulado dinamicamente sempre que a contagem de Dispositivos muda.

Entendendo os Parâmetros CSS

Para que a máscara funcione, manipulamos dois conceitos fundamentais de design:

• Top (Posição Vertical): Define a altura onde a máscara começa. Alterando o valor de top, movemos o “bloqueio” para cima ou para baixo, cobrindo exatamente os Dispositivos que não existem naquela instância.

• Z-index (Camada): Define quem fica na frente de quem. Um z-index: 9999 garante que a máscara fique acima dos botões e campos de input, impedindo que o usuário clique em algo que não deveria estar lá. Um z-index: -1 joga a máscara para trás de tudo, tornando-a inofensiva.

Configuração do Evento

Siga os passos abaixo para configurar o controle de máscara:

• Após selecioná-lo, acesse a aba Eventos, clique em Adicionar evento, selecione o evento Alterar Valor.

• Na seção Dado, selecione o Conector e o Dado $info nas Propriedades do Conector.

• Nas Condições para disparo, clique em Editar Expressão, modifique a expressão $a para $a.device_count == 2, clique em Adicionar expressão.

• Na condição adicionada, clique em Adicionar ação, em Selecione uma ação, defina o Grupo Estilo e selecione a ação CSS.

• Em Parâmetros do CSS, adicine a chave top com o valor 257 e a chave z-index com o valor 9999.

Nota

Adicione novas condições baseadas na quantidade de Dispositivos existentes e no layout da tela.

Exemplo de Utilização

Nas Propriedades do Controle, acesse a aba Eventos, na seção Ao alterar valor, configure múltiplas condições baseadas na lógica de negócio.

Exemplo: Considere um cenário onde a tela suporta até 4 Dispositivos:

1º Cenário: Apenas 2 Dispositivos ativos.

• Condição: $a.device_count == 2

  • Ação (Definir Estilo CSS): top: 257px; z-index: 9999;

    • Resultado: Cobre a área onde estariam os Dispositivos 3 e 4.

2º Cenário: 3 Dispositivos ativos.

• Condição: $a.device_count == 3

  • Ação (Definir Estilo CSS): top: 300px; z-index: 9999;

    • Resultado: Cobre apenas o espaço destinado ao Dispositivo 4.

3º Cenário: Todos os 4 Dispositivos ativos.

• Condição: $a.device_count == 4

  • Ação (Definir Estilo CSS): top: -1000px; z-index: -1;

    • Resultado: Remove a máscara da área visível do painel.

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:

Utilizando Expressões Estatísticas no Histórico

A utilização de Métodos de agregação (métodos de agregação estatísticos) no Painel Sinótico permite consolidar informações através de agrupamentos, utilizando o filtro do calendário disponível no Painel Barra de Ferramentas.

Nota

Não é necessário ter uma tabela com Conjunto de Dados para que o recurso de expressões de histórico funcione no sinótico.

Expressões Suportadas

Este recurso oferece suporte aos seguintes tipos de expressões:

• Expressões do Sistema;

• Expressões Do Dado;

• Expressões de Estatísticas Agrupadas por Período;

• Consultas Customizadas;

• Expressões Estatísticas em Cima das Consultas Customizadas.

Aplicabilidade

Este recurso aplica-se exclusivamente à transformação do valor do dado associado e está disponível nos seguintes Controles de Tela do painel sinótico:

• Tag Display;

• Progress Bar;

• Gauge;

• Simple Table.

Como Utilizar

Para aplicar expressões estatísticas no histórico:

1. Acesse o Painel Sinótico;

2. Configure o filtro de calendário no Painel Barra de Ferramentas;

3. Selecione o controle desejado;

4. Aplique a expressão estatística apropriada para consolidar os dados.

Dica

Para mais informações sobre métodos de agregação e expressões específicas, consulte as referências linkadas em cada seção.

Exemplo de utilização

Para exemplificar o uso de expressões estatísticas no histórico, iremos utilizar uma tela com um painel sinóptico que monitora 2 dados: Temperatura e Umidade. Além disso, esta tela será construída em formato de relatório, ou seja, após uma consulta e seleção de período através do painel barra de ferramentas, poderemos também visualizar as seguintes propriedades (alocadas em controles “Tag display” e “Progress Bar”) de cada um dos dados:

• Valor mínimo;

• Valor médio;

• Valor máximo;

• Desvio padrão.

Com este cenário montado, teremos uma tela semelhante ao exemplo abaixo:

Para configurar corretamente cada um dos controles “Tag display” e “Progress Bar”, iremos utilizar o recurso de expressões para definir em cada controle a propriedade que será exibida.

Para visualizar todas as opções de expressões disponíveis para serem utilizadas em controles, devemos realizar a seguinte sequência:

• Clique sobre o controle desejado;

• Acesse a aba “Dado”;

• No tópico Expressão, clique sobre o ícone “”:

Após clicar sobre o ícone, o Editor de expressão será aberto em modelo popup.

• Clique sobre o ícone “” para expandir os 2 tópicos localizados à esquerda do editor;

• Os tópicos disponíveis para serem utilizados em expressões estarão divididos em subseções para facilitar a localização e indicar a que se referem, como mostra o exemplo abaixo:

Para utilizar a expressão histórica da maneira correta, é necessário utilizar um padrão (por exemplo, o seguido neste exemplo) com o prefixo $stats(data.history.samples). seguido da variável correspondente à propriedade almejada.

No caso do tópico de valor mínimo, a expressão completa resultaria em $stats(data.history.samples).minimum.

Atenção

Além deste padrão, também são permitidos os padrões antigos de expressões, com o prefixo ${data.history.stats.}. Neste outro modelo, a definição completa da expressão seria ${data.history.stats.minimum}.

Para maiores informações sobre os padrões disponíveis, acesse: Expressões Suportadas.

Para configurar cada propriedade da maneira correta (seguindo o padrão correto de expressões), utilizaremos as seguintes expressões para cada tópico do controle:

Estatística	Expressão
Valor mínimo	$stats(data.history.samples).minimum
Valor médio (média)	$stats(data.history.samples).average
Valor máximo	$stats(data.history.samples).maximum
Desvio padrão	$stats(data.history.samples).stdev0

Após finalizar o processo de criação da tela, publicá-la e utilizá-la como Dashboard de um Conector, podemos selecionar um período através do painel barra de ferramentas e automaticamente os controles irão exibir as estatísticas de acordo com o período selecionado, como mostra a exemplificação abaixo:

Expressões para Informações do Conector ou Dispositivo

Este recurso permite utilizar expressões dinâmicas para exibir informações do Conector ou Dispositivo diretamente nos controles de exibição do Painel Sinótico. Os atributos disponíveis podem ser consultados no Editor de Expressões integrado na interface.

Sintaxe de Referência de Contexto

O sistema utiliza uma sintaxe especial para referenciar o recurso corrente (Conector ou Dispositivo) dentro do contexto de execução, permitindo navegar entre os níveis da hierarquia:

• $("."): Referência do Conector corrente.

• $("./."): Referência do Dispositivo corrente.

Dica

Após definir a referência de contexto, utilize um ponto (.) para acessar os atributos desejados no Editor de Expressões.

Por exemplo: $(".").name para obter o nome do Conector ou $("./.").name para obter o nome do Dispositivo.

Expressões para Campos Customizados

A escolha do formato da expressão impacta diretamente como os controles de exibição do Sinótico se comportam após uma edição no Painel de Campos Customizados.

Atenção

Para garantir que o Painel Sinótico reflita as alterações, sem a necessidade de recarregar a página, recomenda-se o uso da sintaxe de referência de contexto.

Veja como acessar os Campos Customizados de cada nível:

Propriedade customizada “Modelo da Máquina” do Conector:

$(".").user_data.extended_properties.modelo_maquina

Propriedade customizada “Modelo da Máquina” do Dispositivo:

$("./.").user_data.extended_properties.modelo_maquina

Expressões para Cálculos com Múltiplos Dados

Este recurso permite realizar operações matemáticas complexas utilizando valores de diferentes Dados simultaneamente, seja em controles do Painel Sinótico ou em colunas de uma Tabela.

Para realizar cálculos, você precisará do identificador único de cada Dado:

• Associe o Dado a um controle;

• Nas Propriedades do Controle, acesse a seção Dado;

• Clique no ícone de Cópia () localizado no canto superior direito após a associação, conforme a imagem:

Cálculos entre Diferentes Conectores

Quando os Dados pertencem a Conectores distintos, utilizamos o identificador absoluto.

Exemplo: Realizando a raiz quadrada da soma de dois Dados de Conectores diferentes:

Math.sqrt(
  $('6669/3251d922/986d84d2')?.current_value.value
  +
  $('7847/e2f271df/7655fc37')?.current_value.value
)

Atenção

Não é permitido utilizar mais de um Conector de Modelo na mesma Tela.

Cálculos utilizando o mesmo Conector com Dispositivos Diferentes

Se os Dados pertencem ao mesmo Conector, mas estão em Dispositivos diferentes, você pode utilizar o identificador relativo do Conector.

Exemplo: Realizando a soma de dois Dados de Dispositivos distintos sob o mesmo Conector:

$('./3251d922/986d84d2')?.current_value.value + $('./229d1523/2d48d689')?.current_value.value

Cálculos utilizando o mesmo Dispositivo

Se os Dados pertencem ao mesmo Conector e ao mesmo Dispositivo, você pode utilizar o identificador relativo do Dispositivo.

Exemplo: Realizando a soma de três Dados do mesmo Dispositivo:

$('././986d84d2')?.current_value.value + $('././7992702e')?.current_value.value + $('././de36bc99')?.current_value.value

Expressões para Parada Condicional

A Ação de Parada Condicional permite assumir o controle total do fluxo de eventos, interrompendo a execução de comandos subsequentes caso critérios lógicos específicos sejam atendidos.

Complemento do Evento de Requerer Confirmação ao Sair da Tela, este recurso é capaz de validar formulários com escrita pendente mesmo em navegações do tipo “Esconde/Mostra” dentro da mesma tela.

Nota

Este recurso protege tanto interações em modais internos quanto links internos e externos.

Funcionamento

Para que a interrupção ocorra corretamente, a ação de Parada Condicional deve estar posicionada acima das ações que ela pretende bloquear.

Movimentação: Utilize o ícone de movimentação (clicar e arrastar) para ordenar as ações com agilidade.

Requerer Confirmação: Se a condição for atingida, é possível exibir uma mensagem personalizada. O sistema solicitará que o usuário escolha entre cancelar a sequência ou prosseguir com as próximas ações.

Exemplos de Uso

Você pode utilizar o Editor de Expressões para acessar qualquer propriedade da hierarquia.

Aviso

Para garantir que reflita as alterações, sem a necessidade de recarregar a página, recomenda-se o uso da Sintaxe de Referência de Contexto.

Formulário com Escrita Pendente

Interrompe o fluxo se o formulário (exemplo com nome padrão: form1) possui alterações pendentes (não salvas):

$store["dashboard/dirtyForms"]?.form1 == true

Valor do Dado

Interrompe o fluxo se o valor do Dado corresponder ao operador relacional definido (exemplo com operador de igualdade):

$value == 50

Valor do Campo Customizado

Interrompe o fluxo se o valor do Campo Customizado for correspondente:

$(".").user_data.extended_properties.num_equipamento == "123"

Status do Recurso (Offline/Alarmado)

Interrompe o fluxo se o Conector estiver offline ou se o Dispositivo possuir algum Dado alarmado:

$(".").is_connected == false || $("./.").has_active_alarms == true

Utilizando Formas para Customização da Apresentação no Sinótico

Conceito

A utilização de formas no Sinótico amplia as possibilidades de customização, permitindo uma apresentação mais clara, organizada e visualmente atraente dos Dados.

Esse recurso oferece maior flexibilidade na personalização do plano de fundo e na disposição dos controles, proporcionando um design mais refinado e aprimorando a estética e a usabilidade da interface.

Com a inclusão de formas geométricas, é possível:

• Personalizar o plano de fundo dos controles no Sinótico, proporcionando maior liberdade no design e alinhamento visual;

• Aplicar efeitos visuais que tornam a interface mais clara e intuitiva para os usuários, facilitando a interpretação dos Dados;

• Destacar informações importantes, garantindo maior visibilidade (ênfase) para Dados críticos ou de maior relevância para a análise.

Exemplo de Customização com Formas

A seguir, apresentamos um exemplo prático de customização no Sinótico, utilizando:

• Um círculo com sombra externa envolvendo o controle Gauge, criando um efeito de destaque ao redor do indicador principal;

• Um círculo com sombra interna, centralizado no Gauge, adicionando profundidade e reforçando a visualização do valor exibido;

• Um quadrado com baixa opacidade, posicionado de forma a cobrir todos os elementos, proporcionando um efeito de sobreposição translúcida, sutil e elegante.

Essa abordagem aprimora a legibilidade dos Dados e oferece uma apresentação mais intuitiva, facilitando a interpretação das informações críticas.

A imagem abaixo ilustra o resultado final da customização com formas no Sinótico, destacando a combinação de elementos para uma apresentação visualmente organizada:

Nos próximos tópicos, será apresentado o passo a passo detalhado para replicar essa configuração no Sinótico.

Configurações

Para exemplificar o uso deste recurso, será construída uma nova tela contendo um Painel Sinótico:

Acessar as Configurações do Painel Sinótico:

• Clique no painel para selecionar o Painel Sinótico e acessar suas configurações.

Inserir uma Forma (Shape):

• Selecione o controle Shape na Aba Controles, é adicionado na área superior esquerda do Sinótico;

• Para acessar as configurações do controle, clique duas vezes sobre a forma recém-adicionada.

Configurar a Forma para um Círculo:

• Nas propriedades, expanda a seção Propriedades Específicas;

• Em Forma, selecione o ícone de Círculo.

Personalizar o Contorno e o Preenchimento:

• Na seção Contorno e Preenchimento:

  • Em Tipo de Contorno, selecione a opção Nenhuma para remover a borda.

Adicionar Sombra:

• Na seção Sombra:

  • Habilite a opção Sombra para aplicar um efeito de profundidade;

  • Zere os valores de Deslocamento Esquerdo e Deslocamento Superior para posicionar a sombra de forma alinhada ao contorno;

  • Ajuste o espalhamento de 15 para 50.

Para aumentar o tamanho do círculo:

• Expanda a seção Aparência;

• Na propriedade Dimensões;

• Ajuste a Largura e a Altura para 300.

Centralizar o Círculo no Painel Sinótico Horizontalmente e Verticalmente:

• Clique com o botão direito sobre o controle Shape;

• No menu suspenso, selecione a opção Centralizar.

Ao seguir essas etapas, você terá configurado a primeira forma do Sinótico, que servirá como base para a aplicação de outros elementos e efeitos visuais.

A imagem abaixo ilustra o resultado até aqui:

Inserir uma Forma (Shape):

• Selecione o controle Shape na Aba Controles, é adicionado na área superior esquerda do Sinótico;

• Para acessar as configurações do controle, clique duas vezes sobre a forma recém-adicionada.

Configurar a Forma para um Círculo:

• Nas propriedades, expanda a seção Propriedades Específicas;

• Em Forma, selecione o ícone de Círculo.

Personalizar o Contorno e o Preenchimento:

• Na seção Contorno e Preenchimento:

  • Em Tipo de Contorno, selecione a opção Nenhuma para remover a borda;

  • Em Cor de Preenchimento, altere para #000000.

Adicionar Sombra:

• Na seção Sombra:

  • Habilite a opção Sombra para aplicar um efeito de profundidade;

  • Habilite a opção Sombra Interna para aplicar um efeito de profundidade interna;

  • Em Cor da Sombra, defina o valor #FFFFFF (branco).

  • Zere os valores de Deslocamento Esquerdo e Deslocamento Superior para posicionar a sombra de forma alinhada ao contorno;

  • Ajuste o espalhamento de 15 para 80.

  • Defina o Tamanho do Desfoque para -7.

Para aumentar o tamanho do círculo:

• Expanda a seção Aparência;

• Na propriedade Dimensões;

• Ajuste a Largura e a Altura para 300.

Centralizar o Círculo no Painel Sinótico Horizontalmente e Verticalmente:

• Clique com o botão direito sobre o controle Shape;

• No menu suspenso, selecione a opção Centralizar.

Ao seguir essas etapas, você terá configurado a segunda forma do Sinótico, que servirá como base para a aplicação de outros elementos e efeitos visuais.

A imagem abaixo ilustra o resultado até aqui:

Inserir um Gauge:

• Selecione o controle Gauge na Aba Controles, é adicionado na área superior esquerda do Sinótico;

• Para acessar as configurações do controle, clique duas vezes sobre a forma recém-adicionada.

Para aumentar o tamanho do Gauge*:

• Expanda a seção Aparência;

• Na propriedade Dimensões;

• Ajuste a Largura para 388 e a Altura para 323.

Personalizar o Preenchimento do Indicador:

• Na seção Aparência em Cores:

  • Defina a cor do texto com o valor #FFFFFF (branco).

Personalizar o Preenchimento da Escala:

• Na seção Propriedades Específicas em Arco e Escala:

  • Em Escala;

  • Em Cor de Preenchimento, defina o valor #FFFFFF (branco).

Centralizar o Gauge no Círculo Horizontalmente e Verticalmente:

• Clique com o botão direito sobre o controle Gauge;

• No menu suspenso, selecione a opção Centralizar.

Ao seguir essas etapas, você terá configurado um controle no Sinótico, utilizando as formas visuais.

A imagem abaixo ilustra o resultado até aqui:

Inserir uma Forma (Shape):

• Selecione o controle Shape na Aba Controles, é adicionado na área superior esquerda do Sinótico;

• Para acessar as configurações do controle, clique duas vezes sobre a forma recém-adicionada (por padrão já vem com a Forma de um Quadrado).

Personalizar o Contorno e o Preenchimento:

• Na seção Contorno e Preenchimento:

  • Em Tipo de Contorno, selecione a opção Nenhuma para remover a borda.

  • Defina a Cor de Fundo para #00BEFF (Azul Claro);

  • Defina a Opacidade em 0.1;

Para aumentar o tamanho do Quadrado:

• Expanda a seção Aparência;

• Na propriedade Dimensões;

• Ajuste a Largura para 390 e a Altura para 395.

Centralizar o Quadrado no Painel Sinótico Horizontalmente e Verticalmente:

• Clique com o botão direito sobre o controle Shape;

• No menu suspenso, selecione a opção Centralizar.

Ao seguir essas etapas, você terá terminado a configuração no Sinótico.

A imagem abaixo ilustra o resultado até aqui:

Ativando a Responsividade do Painel Sinótico no Dashboard

O Portal de Telemetria disponibiliza um novo recurso para que o Dashboard feito no painel sinótico 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 sinótico, 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.

Nota

A opção “Preencher página” pode ser utilizada em mais de um painel na mesma tela, sendo útil em casos onde um dos painéis na mesma linha possui restrição de visualização para determinadas Áreas de Processo.

Responsividade com Restrição em Painéis

Neste exemplo, será demonstrado como a opção “Preencher página” funciona quando, em uma mesma Tela, há dois Painéis Sinóticos em uma mesma linha, sendo que cada painel possui restrições de visualização em Áreas de Processo distintas.

No primeiro painel utilizado na Tela, a visualização está restrita para a Área de Processo chamada “Visualização Restrita 1”, como mostra a imagem:

No segundo painel, a visualização está restrita para a Área de Processo chamada “Visualização Restrita 2”, como mostra a imagem:

Note que a opção “Preencher página” está selecionada nos dois painéis sinóticos.

Nota

Para este exemplo é importante definir uma Área de Processo em ambos os painéis pois, nesse caso, o intuito é que os dois só possam ser visualizados por Áreas de Processo diferentes. Em outros cenários, pode ser necessário restringir somente um painel.

Agora, com as restrições definidas em ambos os painéis, vamos analisar como fica a visualização da Tela por cada Área de Processo:

• Usuário com acesso às Áreas de Processo “Visualização Restrita 1” e “Visualização Restrita 2”:

• Usuário com acesso somente à Área de Processo “Visualização Restrita 1”:

• Usuário com acesso somente à Áreaa de Processo “Visualização Restrita 2”:

Visualização da Identificação na Aplicação

O portal de telemetria disponibiliza no formulário de cadastro de Dados, este campo para a identificação associada a este Dado na aplicação/firmware do equipamento remoto.

A visualização no Sinótico da Identificação na Aplicação é exibida no tooltip de qualquer controle que possua um Dado Associado, então quando passa o mouse por cima dele, isso acontece tanto no modo de edição e na visualização do dashboard, caso não tenha essa identificação, será ocultado o item dessa informação no tooltip.

Para visualizá-lo no seletor de dados, precisa ativar esse modo, clicando no ícone que ira mudá-lo para , que mudara o nome dos dados que contém essa identificação.

Então pode ser apresentado no Seletor de Dados.

Podendo ser apresentado também no dado associado.