Menu do Editor de Telas

Opções	Descrição
Tela	Acessa as propriedades da Tela e o seu Conector de Referência
Layout	Acessa as opções de layout e de painéis para a Tela
Restaurar	Atualiza a versão da tela local do navegador com a última versão publicada da Tela (aparece após a primeira publicação)
Visualizar	Pré-visualiza a apresentação da Tela(como ficará após a sua publicação)
Publicar	Atualiza a versão da Tela no servidor do Portal de Telemetria com a versão local alterada pelo usuário

Atenção

A opção de Restaurar uma tela com a versão atual presente no servidor, apagará qualquer edição não publicada da tela salva localmente no navegador do usuário.

Opções de Acesso Rápido

Estas opções ficam localizadas no menu superior, clicando no ícone ao lado da edição de nome da tela.

As funções do Acesso Rápido são as seguintes:

Identificação	Descrição
Novo	Cria uma nova Tela em branco
Abrir	Abre um modal com a lista de Telas cadastradas para que se selecione uma para abertura
Importar	Utiliza um arquivo(.JSON) importando para uma nova Tela ou sobrescreve uma já existente
Exportar	Baixa o arquivo(.JSON) com todas as configurações da Tela
Clonar	Copia a Tela atual criando uma nova Tela idêntica
Versões	Mostra um modal com todas as versões publicadas da Tela
Recente	Exibe as últimas Telas acessadas/editadas (no máximo 3)

Aba Tela

A aba “ Tela” permite editar propriedades a nível de toda a tela, e está localizada no canto direito do editor de telas.

Esse editor é dividido em Geral, Componentes visíveis e Manutenção.

Geral

A aba “Geral” permite a edição das seguintes configurações do Nome da Tela, Conector de Referência, Área de Processo, Marcadores e Tema da Tela.

Nome da Tela

Define qual será o nome da tela que está em modo de edição.

Conector de Referência

Um Conector de Referência é utilizado para definir a base de Dado padrão da Tela, ou seja, define de qual Conector serão obtidos os Dados para serem apresentados por padrão na edição dos painéis da Tela.

Por exemplo, em um painel Sinótico, ao selecionar um controle que possua um Dado associado, serão apresentados somente os Dados desse Conector(inicialmente).

Esse recurso visa facilitar a configuração de sinóticos associados a um conector específico ou a um conector de modelo.

Para acessar esta configuração e definir uma tela com um Conector de Referência, acesse a aba de edição de uma tela e em Tela, acesse a aba “Geral” e em “Conector de referência”, selecione o conector criado que será utilizado como padrão para a tela:

Atenção

No caso da utilização de um Conector de Modelo na configuração de conector de referência, os Conectores baseados no Conector de Modelo poderão utilizar a mesma tela.

Neste cenário, o próprio sistema irá “traduzir” os valores dos dados de acordo com o conector (baseado no modelo) selecionado para abrir a tela.

Atenção

Caso o Conector de Referência associado à Tela seja removido, será apresentado o alerta “Arquivo de tela configurada não encontrado ou você não tem acesso ao recurso solicitado!” ao tentar visualizar a tela.

Nesses casos, é necessário remover o Conector de Referência associado ou atribuir outro conector existente.

Associando uma Tela ao Conector

Após selecionar o Conector de Referência, aparecerá o campo de Tela atual, no qual contêm o nome da Tela cadastrada no Conector selecionado.

Caso queira definir essa Tela (em edição) como padrão do Conector, basta clicar no ícone apresentado:

Outra opção para associar uma Tela a um Conector é em seu próprio cadastro.

Através do campo Tela no cadastro do Conector, existem duas situações possíveis:

Caso no Conector ainda esteja configurada a Tela Padrão do Portal, será apresentada apenas a opção de clicar no botão , no qual criará uma nova Tela já com o Conector de Referência para o Conector selecionado:

Caso no Conector já possua uma Tela customizada pelo usuário associada em seu cadastro, serão apresentados os botões (que levará para a edição da Tela atual do Conector) e o (no qual criará uma uma nova Tela para o Conector):

Área de Processo

Permite associar uma determinada Área de Processo a tela(dashboard) para restringir o acesso a mesma. Caso especificada uma área, somente usuários com as permissões pertinentes na Área de Processo associada a tela poderão acessá-la.

Para utilizar este recurso, acesse a página de edição de uma tela e em Tela, acesse a aba “Geral” e em “Área de Processo”, selecione ou pesquise pela área de processo em que apenas os usuários do contrato registrados nesta mesma área poderão ter acesso para esta tela:

Atenção

A pesquisa por Área de Processo não difere letras maiúsculas de letras minúsculas e considera acentuação no filtro de resultados.

Marcadores

Os Marcadores são palavras-chaves que auxiliam na organização da pesquisa dos recursos.

Tema da Tela

Define o tema de visualização da tela.

Para entender melhor o recurso, acesse: Tema da Tela.

Componentes visíveis

Nesta seção é possível restringir a visualização do Cabeçalho e Menu Lateral quando a tela for acessada.

Para restringir a visualização de um dos elementos basta clicar no ícone “ “ e verificar o estado da seguinte forma:

• : elemento visível na abertura da tela;

• : visualização restringida do elemento na abertura da tela.

Manutenção

A aba “Manutenção” permite a utilização de recursos mais avançados, sendo eles Substituição de dados, Baixar essa tela, Abrir arquivo de configuração e Deletar essa tela.

Substituição de dados

O objetivo dessa funcionalidade é facilitar grandes trocas de Dados nos controles ou mudanças de Conector de Referência, alterando as associações de Dados de maneira eficiente.

Na edição de uma Tela, o usuário pode acessar um formulário que lista todos os Dados e suas propriedades específicas utilizados na Tela (incluindo Dados associados a controles ou séries de dados). Este formulário permite atualizar dinamicamente as referências de um Dado para outro Dado do mesmo Conector de Referência ou de um Conector diferente, podendo-se alterar todas as referências ou apenas as necessárias.

Alteração de Referências

A substituição é aplicada a todas as referências associadas ao Dado alterado, como controles, ações e séries de Dados dos painéis.

Troca do Conector de Referência

Se for reutilizar ou modificar uma Tela trocando o Conector, primeiro troque o Conector de Referência. Isso garante que o Conector de Destino já esteja selecionado para a troca dos Dados:

Formulário de substituição

O modal de Substituição de Dados exibe os Dados utilizados na Tela, listando-os na coluna Origem, com o nome do Conector e suas informações no tooltip de cada Dado.

Essas informações podem ser filtradas pelo campo Lista de Dados:

Para substituir a referencia de um ou mais Dados, basta selecionar na coluna de Destino o(s) Dado(s) desejados e confirmar a operação.

Exemplo

Para exemplificar esta ferramenta, iremos utilizar uma Tela com 4 painéis (Sinóptico, Status de Conector, Painel de Dados e Alarmes) utilizando 2 Dados (Tensão e Corrente) em cada um dos painéis.

Ao importar uma nova Tela e utilizando o recurso de Substituição, estes Dados serão substituídos por outros 2 novos Dados (Velocidade e Massa) de um outro Conector. Consequentemente, os Dados de destino (na nova tela), assumirão as posições dos Dados de origem em cada um dos painéis.

Atenção

É importante ressaltar que, o processo de Substituição de Dados atinge somente a nova Tela que será importada, a Tela de origem (cadastrada com os Dados de origem) não sofrerá nenhuma alteração.

Cadastrando uma Tela contendo os painéis citados anteriormente e criando um exemplo de utilização de cada um dos mesmos, podemos ter um exemplo semelhante a Tela exibida abaixo:

• Com a tela já criada, clique no botão “ Baixar esta tela”, localizado na aba de “Manutenção” na página de edição da Tela:

• Ao clicar neste botão, será feito um download de um arquivo (.JSON) contendo a Tela, seus painéis e suas respectivas configurações;

• Utilizando este novo arquivo, podemos realizar a importação de uma nova Tela (no mesmo contrato ou não) para realizar o processo de Substituição de Dados;

• Acesse a aba de listagem de Telas do contrato desejado para receber a importação da nova Tela, clique sobre o botão “” (localizado ao lado do botão Novo), clique sobre a opção “Importar” e selecione o arquivo (.JSON) referente a Tela baixada no passo anterior;

• Ao selecionar o arquivo corretamente, uma nova Tela idêntica a tela cadastrada anteriormente será criada;

• Já na nova Tela recém-importada, ao acessar a página de edição, selecione o Conector de Referência em que os Dados de destino estão cadastrados;

• Após selecionar um Conector de referência e clicando na ferramenta de Substituição de dados, teremos acesso a uma nova tela:

• Preechendo os campos de maneira correta:

Campo	Descrição
Contrato (Origem)	Defina o contrato inicial onde a Tela foi criada
Lista de dados	Filtro que auxilia na listagem de exibição dos Dados
Conector de destino	Selecione o Conector que possui os Dados de destino
Origem	Dados cadastrados na tela de origem
Destino	Dados que irão substituir os Dados de origem na tela importada

• Após preencher corretamente cada um dos campos e relacionar cada um dos Dados de destino e de origem, teremos uma tela configurada semelhante ao exemplo abaixo:

• Para finalizar, clique em Confirmar e publique a nova tela importada.

Acessando o recurso de utilizar esta nova tela como um Dashboard, podemos visualizar que o nome dos Dados e seus respectivos valores foram substituídos em cada um dos painéis da nova tela:

Podemos observar que no Painel Sinóptico, os controles responsáveis por exibir os Nomes e Valores dos Dados de origem, foram substituídos pelos novos Dados.

Para o painel de Status do Conector, o Conector exibido também foi alterado para o novo Conector relacionado na tela de Substituição de Dados.

No Painel de Dados, os Dados de origem que eram exibidos também foram substituídos pelos novos Dados (Massa e Velocidade).

Para finalizar, o Painel de Alarmes foi responsável por alterar os Alarmes cadastrados nos Dados de Origem (Tensão e Corrente), para os Alarmes cadastrados nos Dados de Destino (Massa e Velocidade).

Baixar essa tela

Esse botão permite que a tela em edição seja exportada.

Para entender melhor sobre exportação de telas, acesse Exportação de Tela.

Abrir arquivo de configuração

Esse botão abre o arquivo de configuração da tela em edição em uma nova guia do navegador.

Deletar essa tela

Esse botão permite que a tela em edição seja excluída.

Aba Layout

A aba “Layout” possui recursos para configurar a distribuição dos painéis na tela. Essa aba está dividida nos grupos Layouts disponíveis, Painéis disponíveis, Painéis na tela e Página customizada.

Layouts disponíveis

Um layout define a organização dos painéis que serão inseridos na tela. Para inserir um layout, basta arrastar o layout desejado com o cursor e soltar na posição escolhida.

Atenção

Não é possível inserir um painel na tela sem definir o layout que o painel irá preencher.

Existem dois tipos de visualização dos layouts disponíveis, a visualização do tipo Lista e do tipo Alinhado. Em ambas as visualizações, é possível reordenar os layouts clicando novamente no ícone da visualização. Também é possível pesquisar pelo layout desejado na barra de pesquisa.

• Lista:

  

• Alinhado:

  

Painéis disponíveis

Nesta seção estão listados os painéis disponíveis para serem inseridos nos layouts da tela. Existem três tipos de visualização para os painéis disponíveis, sendo eles o tipo Agrupado, Lista e Alinhado.

• Agrupado:

  

• Lista:

  

• Alinhado:

  

No topo dos painéis disponíveis estão inseridas as seguintes opções:

• Barra de pesquisa: permite a pesquisa pelo nome dos painéis disponíveis;

• : ordena os painéis em ordem crescente ou decrescente;

• : exibe os painéis disponíveis baseado em uma tela já publicada.

Painéis na tela

Nessa seção é possível visualizar os painéis que foram adicionados à tela e também a posição que esse painel foi inserido. A posição aparece na frente do nome do painel de forma numérica, em uma relação de “linha, coluna”. Também é possível deletar um painel da tela clicando-se no ícone de no painel que deseja-se excluir.

Página customizada

Nessa seção é possível definir a tela como uma Página customizada. Para entender melhor o conceito de página customizada, acesse Página Customizada.

Editor de Layout de uma Tela(dashboard)

Quando selecionada uma Tela, é apresentado o layout de apresentação dessa Tela no corpo da página.

Neste editor, é possível definir a distribuição dos painéis de uma tela dividindo-os através de linhas e colunas, onde em cada célula formada, pode-se inserir os seguintes painéis:

Grupo alocado	Identificação	Descrição
Tempo real	Painel Sinótico (Sinótico)	Painel que permite a representação gráfica de um processo qualquer através de controles de imagem, textos, displays com valores de Dados, animações, etc
Tempo real	Painel de Alarmes (Alarmes)	Painel com a lista de Alarmes do Conector
Tempo real	Painel de Dados	Painel com a lista de Dados do Conector
Tempo real	Painel de Status de Conector / Dispositivos	Painel com as informações do Conector e seus Dispositivos (nome, S/N, localização, dispositivo, área de processo, status de conexão, alarme, etc)
Tempo real	Painel de Status de Conector	Painel com as informações básicas de um Conector (localização, nome e conexão)
Histórico	Painel de Histórico de Dados (Histórico do Conector)	Painel com a representação gráfica/tabular do registro de histórico de Dados de um Conector
Histórico	Histórico de Eventos do Sistema (Visualizador de Eventos)	Painel com o histórico de eventos do sistema para o Conector
Relatório	Painel Barra de Ferramentas	Painel que disponibiliza a seleção de um período (data/hora inicial e final) que será utilizada para o filtro de registros históricos a serem utilizados em outros painéis da mesma
Relatório	Painel Gráfico	Painel que permite configurar a visualização de dados, registros histórico e estatísticas de forma gráfica
Relatório	Painel Tabela	Painel que permite configurar a visualização de dados, registros histórico e estatísticas de forma tabular
Relatório	Painel Imagem	Painel que permite configurar a apresentação de uma imagem qualquer no layout de uma Tela
Relatório	Painel Texto	Painel que permite configurar a apresentação de um texto qualquer no layout de uma Tela
Customização	Painel Estatísticas Conectores / Dispositivos (Estatísticas e Pesquisa de Conectores / Dispositivos)	Painel que permite a pesquisa de equipamentos cadastrados
Customização	Painel Tabela de Dispositivos (Lista Configurável de Dispositivos - Tabular)	Painel permite a customização da Tabela de Dispositivos apresentada no Dashboard de um Contrato
Customização	Painel Tabela de Conectores (Lista Configurável de Conectores - Tabular)	Painel permite a customização da Tabela de Conectores apresentada no Dashboard de um Contrato
Customização	Painel Cartões de Conectores (Lista Configurável de Conectores - Cartões)	Painel permite a customização dos Cartões de Conectores apresentadas no Dashboard de um Contrato
Utilitários	Painel Vazio	Painel que insere um espaço entre os painéis da Tela (não apresentado em dispositivos móveis)
Utilitários	Painel Customizado via iFrame	Painel permite acoplar (embedar) outro site na apresentação do Portal

Os painéis acima podem ser empilhados em uma mesma coluna também, formando-se novas células.

Por exemplo: em uma determinada coluna, pode-se empilhar o painel de histórico de Dados de um Conector e o painel de Alarmes. Na coluna ao lado, pode-se ter apenas o painel de Sinótico.

Definindo a proporção de largura de um Layout

Além de empilhar os painéis, é possível definir a proporção de largura de cada um dos layouts em relação as linhas em que estão inseridas:

• Clique sobre o layout que será ajustado e, ao passar o ponteiro sobre a lateral direita de um painel, será possível arrastá-lo para definir sua largura:

Trocando os painéis de posição em um Layout

O editor de layout permite também trocar (movimentar) as células (painéis) de posição. Para isso, basta seguir os seguintes passos:

• Posicione o mouse em cima de uma célula com um painel já definido e com o botão esquerdo do mouse, pressionado, arraste-o;

• O ponteiro do mouse indicará o ícone de , enquanto estiver pressionado durante o arrasto;

• Mova o painel para a célula desejada até que o painel seja alocado ao novo layout corretamente.

Modos de edição dos painéis do layout

Em cada painel definido no layout, ainda que sejam todos editáveis por uma mesma página, é necessário que sejam individualmente configurados.

Isso significa que, acessando a página de edição de Tela, podemos visualizar e/ou editar cada um dos painéis, porém, cada um dos mesmos possuem uma sequência de configuração que deve ser seguida.

Atenção

A alteração da altura de um painel à esquerda, poderá causar a redistribuição proporcional das alturas dos painéis à sua direita. Diante da interação dinâmica entre os painéis, é necessário que haja uma forma de edição que permita a visualização dos demais painéis do dashboard durante a edição de um painel específico.

Caso uma tela possua mais de uma linha, será apresentada a opção de Quebra de página.

Esta funcionalidade tem relação com o recurso de impressão(em PDF por exemplo) de uma tela. Com essa opção ativada, o painel configurado será impresso sempre no início de uma nova página.

Atenção

Sempre que o layout da Tela é alterado as quebras de páginas são resetadas (deletadas).

Para exemplificação, no editor de tela, com apenas um clique sobre esta opção, vamos desabilita-la:

Utilizando a opção de pré-visualização ou após baixar um arquivo PDF, podemos observar que não há uma quebra de página entre as linhas do painel gráfico e a tabela com o histórico de alteração dos dados:

Agora, novamente no editor de telas, vamos ativar a opção de Quebra de página com um clique:

No vídeo abaixo, podemos observar que com esta funcionalidade ativada, ao fazer o download do relatório, as entre-linhas que possuem a função Quebra de página ativada, são separadas por páginas, podendo personaliza-las de acordo com a necessidade da funcionalidade do painel:

Versionamento de Telas

No Editor de Telas, nas Opções de Acesso Rápido em Versões, permite a manipulação de versões já publicadas para a tela selecionada.

Ao clicar em Versões, o seguinte formulário é apresentado:

Fig. 35 F2 - Formulário de versões de uma Tela.

Neste formulário, são listadas em uma tabela as versões já publicadas para tela, sendo estas identificadas pelas seguintes informações:

• Data e Hora: indica a data e hora da publicação da versão da tela;

• Versão: identifica a versão utilizada pelo usuário no momento da publicação da versão da tela;

• Notas de Lançamento: informa o texto inserido pelo usuário com as notas de lançamento da tela no momento da publicação.

Atenção

Antes da liberação (em 22/02/2022) da versão do 1.3.01 do Portal de Telemetria, apenas a última versão da tela, ou seja, a versão corrente publicada da tela (e as suas respectivas notas de lançamento) eram armazenadas. Porém, a cada publicação de uma tela, internamente, o portal gerava uma versão numérica (de 1 em diante) com a data/hora da publicação.

Portanto, para publicações de telas anteriores a mencionada versão do Portal, o formulário do histórico de versões apresentará apenas a versão numérica e a data/hora da versão.

Já a partir da liberação 1.3.01 do Portal, será mantido todo o histórico da versão e das notas de lançamento definidas pelo usuário em cada publicação.

Desta forma, estas informações serão apresentadas no formulário do histórico de versões de tela para cada publicação, facilitando assim a restauração de uma versão específica.

Além das informações apresentadas pelo formulário, ainda temos as seguintes configurações:

Identificação	Descrição
Calendário	Permite especificar um período para consulta de versões da tela
Pesquisa	Permite a busca textual associada aos atributos de Versão e Notas de Lançamento da tela
Restaurar	Restaura o rascunho atual da tela para a versão selecionada na lista
Publicar nova versão	Publica uma nova versão para a tela conforme a versão selecionada na lista
Novo rascunho	Cria um novo rascunho de tela com a versão selecionada na lista
Visualizar dashboard após execução da ação	Exibe a versão da tela após realizar-se alguma das ações acima(Restaurar, Publicar nova versão ou Novo rascunho)

Portanto, vamos descrever cada uma das ações possíveis em relação a manipulação de versões de tela:

Restaurar

A opção de Restaurar uma tela permite que, ao se selecionar uma determinada versão na lista, esta versão seja restaurada como o rascunho atual para a tela.

Isso significa que se já houver alguma edição pendente para a tela não publicada(no mesmo navegador), ou seja, um rascunho, este rascunho será descartado e o novo rascunho para a tela passará a ser o da versão restaurada. De qualquer forma, o usuário será alertado sobre essa operação e precisará confirmá-la para que seja efetivada.

Para restaurar a versão de uma tela como o rascunho atual da mesma, basta seguir os seguinte passos:

• Clique na opção Versões na tela desejada;

• No formulário que será apresentado, selecione a versão que deverá ser restaurada;

• Marque a opção Visualizar dashboard após execução da ação caso deseje visualizar a tela após a restauração;

• Clique no botão Restaurar ;

• Confirme a operação(lembrando que qualquer edição não publicada para a tela será descartada e substituída pela versão restaurada).

Neste momento, pode-se seguir a edição da tela a partir da versão restaurada.

Publicar nova versão

A opção de Publicar nova versão de uma tela permite que, ao se selecionar uma determinada versão na lista, esta versão se torne a versão atual(corrente) publicada para a tela.

Isso significa que ao acessar o dashboard de um Conector que utilize esta tela, a versão publicada através deste formulário passará a ser apresentada e a versão que era a corrente antes, se tornará uma versão anterior.

Para publicar a versão de uma tela como uma nova versão para a mesma, basta seguir os seguinte passos:

• Clique na opção Versões na tela desejada;

• No formulário que será apresentado, selecione a versão que deverá ser publicada como uma nova versão para tela;

• Edite as Notas de Lançamento para a nova publicação clicando no botão da versão selecionada e posteriormente no botão ;

• Defina a nova Versão para a tela que será publicada;

• Marque a opção Visualizar dashboard após execução da ação caso deseje visualizar a tela após a publicação;

• Clique no botão ao lado da Versão definida na opção Publicar nova versão ;

• Confirme a operação.

Abaixo, segue uma imagem representando as opções que foram descritas acima:

Fig. 36 F3 - Publicação de uma nova versão para uma Tela.

Neste momento, a versão atual(corrente) da tela passará a ser a nova versão publicada.

Novo rascunho

A opção de Novo rascunho de uma tela permite que, ao se selecionar uma determinada versão na lista, esta versão seja criada como um novo rascunho de tela.

Essa operação seria equivalente a se criar uma nova tela no sistema, ou seja, o rascunho criado com a versão da tela selecionada, não tem vínculo algum com a “antiga” tela.

Para criar um novo rascunho com base em uma versão da tela selecionada, basta seguir os seguinte passos:

• Clique na opção Versões na tela desejada;

• No formulário que será apresentado, selecione a versão que deverá ser restaurada como um novo rascunho;

• Marque a opção Visualizar dashboard após execução da ação caso deseje visualizar a tela após a restauração;

• Clique no botão Novo rascunho ;

• Confirme a operação.

Neste momento, será apresentado na lista de telas um novo rascunho com base na versão selecionada.