Editor de Telas(dashboard) de um Conector
O Portal de Telemetria oferece um editor de Telas(dashboards) completo e poderoso para gerenciar o conteúdo de informações apresentadas para seus Conectores.
Com este editor, é possível realizar diversas operações para personalizar e otimizar suas Telas, tornando a experiência mais intuitiva e produtiva.
Entre diversos recursos, destacam-se:
Layout Personalizado: Configure todo o layout da Tela e escolha quais painéis devem compô-la, bem como as proporções de apresentação de cada um, permitindo uma organização eficiente das informações;
Edição Individual de Painéis: Edite cada painel de forma individual, permitindo ajustes detalhados e específicos para cada seção da Tela;
Visualização em Tempo Real: Veja as alterações em tempo real enquanto edita, facilitando a verificação imediata das mudanças feitas;
Versionamento de Telas: Versione as alterações realizadas nas telas e recupere versões anteriores conforme necessário, garantindo a flexibilidade e segurança na gestão das suas configurações;
Exportação e Importação: Exporte e importe o cadastro de uma tela, facilitando a replicação e compartilhamento de layouts entre diferentes projetos ou usuários;
Organização em Pastas Virtuais: Organize o cadastro das telas em pastas virtuais, criando uma estrutura hierárquica e facilitando o acesso e gerenciamento de projetos ou aplicações específicas;
Painéis de Base/Template: Construa painéis para serem utilizados como modelo para construção de outros painéis da Tela, padronizando a identidade visual e acelerando o desenvolvimento e a manutenção;
Gestão de Acessos: Gerencie o acesso às telas, controlando quais usuários podem visualizar ou editar, garantindo a segurança e integridade das informações.
Lista de Telas
A página da Lista de Telas é responsável por apresentar todas as telas (publicadas e rascunhos) associadas ao Contrato e pode ser acessada ao clicar sobre o ícone de Telas(””) localizado no menu lateral.
Ao acessar a página de listagem, serão exibidas informações individuais para cada uma das telas:
Identificação |
Descrição |
|---|---|
ID |
Informa um número único para cada uma das telas; |
Tela |
Exibe o nome definido para a tela; |
Conector |
Lista o nome do Conector ao qual a tela foi relacionada; |
Versão |
Informa a última versão em que a tela foi publicada. |
Home Page |
Exibe um ícone de confirmação caso a tela esteja sendo utilizada como Home Page; |
Atualizado em |
Exibe a data e hora da última publicação feita à tela; |
Ao sobrepor o cursor sobre o ícone de Telas(””), serão exibidas duas opções de acesso:
Editar última acessada: Acessa a página de edição da última tela que foi modificada do contrato;
Nova tela: Acessa a página de cadastro de uma nova tela.
Filtros de cadastro
Filtra os recursos pelo conteúdo da Caixa Pesquisar, e logo abaixo apresenta as Telas acessadas recentemente.
Atenção
A pesquisa é feita globalmente e não apenas na pasta selecionada ou na lixeira.
Esta interface disponibiliza os seguintes opções de filtros para auxiliar no processo de busca de recursos na lista de Telas:
Cadastro de Tela
Ao clicar sobre o botão “ Novo”, localizado na página de listagem de Telas, uma nova interface será exibida.
Através desta nova interface, é possível cadastrar uma nova tela utilizando modelos de layouts personalizáveis, painéis e suas respectivas configurações:
Exportação de Tela
O recurso de Exportação de Tela permite realizar o download de dois formatos de arquivo que podem ser utilizados para manter um backup da Tela e/ou importá-la em outro Contratos.
Atualmente, é possível realizar a exportação de uma Tela das seguintes maneiras:
Através do botão “Baixar”(representado pelo ícone “”) localizado no Menu de acesso rápido ao lado direito de suas respectivas Telas:
Através do botão “ Baixar essa tela”, localizado na página de edição da tela, clicando sobre a aba “ Tela”, na seção “Manutenção”.
Ainda na página de edição da tela, clicando sobre o botão “” para expandir as opções disponíveis para a tela e selecionando “ Exportar”:
Opções de Exportação
Ao clicar sobre a opção de exportação em uma Tela publicada, serão disponibilizados duas opções de download:
Exportar Tela Completa
Ao selecionar a opção Exportar Tela Completa, automaticamente será iniciado o download(no dispositivo utilizado para o acesso ao Portal) de um arquivo de extensão HPS.
Este arquivo contempla a definição dos painéis da Tela e todas as suas configurações, além dos arquivos de imagem utilizados na mesma. Ou seja, esta é a única opção que exporta todas os recursos necessários para o correto funcionamento da Tela, independente de onde for utilizada.
Atenção
Para realizar eventuais backups de uma Tela ou se a necessidade é utiliza-la em um outro Contrato, esta é a opção de exportação de que deve ser utilizada.
Arquivo de definição
Já para a opção Arquivo de definição, o processo é semelhante:
Será iniciado automaticamente o download(no dispositivo utilizado para o acesso ao Portal) de um arquivo de extensão JSON.
Este arquivo conterá apenas definição dos painéis da Tela e suas respectivas configurações.
Portanto, os eventuais arquivos de imagem utilizados na Tela deverão existir no Contrato onde a Tela é ou será utilizada para que sejam apresentados corretamente.
Atenção
Telas não publicadas (em rascunho), também possuem a opção de exportação. Porém, serão limitadas a utilizar apenas a opção “Arquivo de definição”, citada no tópico acima.
Importação de Tela
O recurso de Importação de Tela permite cadastrar novas Telas para um Contrato através da importação de um arquivo de extensão HPS, no qual contém uma Tela Completa(configurações e eventuais arquivos de imagem) ou um arquivo de extensão JSON, no qual contém apenas a configuração da Tela.
Atualmente, pode-se realizar a importação de uma Tela das seguintes maneiras:
Acessando a Lista de Telas, expanda as opções de cadastro através do ícone “” localizado ao lado do botão “ Novo” e selecione a opção “Importar”:
Já na página de edição da tela, clicando sobre o botão “” para expandir as opções disponíveis para a tela, clique sobre a opção “ Importar”:
Ao selecionar a opção de importação, será aberto o seletor de arquivos do dispositivo e após localizar e selecionar o arquivo da importação desejado, uma nova Tela será criada e estará disponível para ser utilizada.
Opções de Importação
Importar Tela Completa
Ao realizar o processo de importação de Tela Completa através um arquivo de extensão HPS, o Portal exibirá uma nova interface contendo uma lista das imagens que também serão importadas(cridas) no Contrato onde a Tela esta sendo importada(caso não existam).
Nesta lista de imagens, será necessário confirmar o processo de adição (através do botão “ Importar”) dos novos arquivos de imagem para que os mesmos possam ser adicionados e funcionem corretamente no cadastro da Tela:
Ao confirmar o processo de adição dos arquivos de imagem, uma nova biblioteca chamada Imagens Importadas será criada para o Contrato(caso não exista).
Nela serão contidos todos os arquivos de imagem que foram importados e inclusive estarão disponíveis para reutilização em outras Telas.
Importar Arquivo de definição
Ao realizar o processo de importação de um Arquivo de definição da Tela (extensão JSON), o Portal exibirá uma nova interface contendo uma lista das imagens que são utilizadas na Tela.
Caso o Portal não consiga acessar alguma imagem, ou seja, eventualmente a mesma foi removida do Contrato de origem da Tela, o seu nome será apresentado na cor vermelha, indicando o erro. Neste caso, não será possível importar a imagem.
Já se os arquivos de imagem estiverem acessíveis, os mesmos serão importados (criados) na biblioteca chamada Imagens Importadas do Contrato onde a Tela esta sendo importada(caso os mesmos não existam).
Veja um exemplo:
Neste exemplo, são disponibilizadas duas opções:
“Continuar”: Continua o processo de importação da Tela sem as imagens que apresentaram erro. Caso esta opção seja escolhida, as imagens não encontradas terão que ser adicionadas manualmente após o término da importação;
“Abortar”: Cancela o processo de importação da Tela.
Substituição de Dados
A opção de Substituição de Dados é uma ferramenta que auxilia no processo de associação de Dados de um Conector à uma nova tela importada.
Após realizar o processo de importação de uma tela através de um arquivo (.JSON), podemos com o uso desta ferramenta, referenciar os Dados do Conector de origem e relacionarmos com os novos Dados que irão assumir suas posições nos painéis da Tela importada.
Para maiores informações de como utilizar esta ferramenta, acesse Substituição de Dados Utilizados em uma Tela.
Exclusão de Tela
Para excluir uma Tela, basta acessar o editor de Telas e:
No Menu Tela, acesse a seção Manutenção;
Selecione a opção Deletar e confirme a operação:
Outra opção é utilizar o botão (Remover) apresentado ao lado das informações de cadastro da Tela:
Na lista de Tela, há a possibilidade também de selecionar um ou mais Telas para que sejam removidas.
Para isso, basta selecionar a(s) Tela(s) e clicar no ícone ao lado do botão Novo:
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 com a lista de Dados do Conector |
|
Tempo real |
Painel de Status de Conector (Informações Básicas de um Conector) |
Painel com as informações do Conector e seus Dispositivos(nome, status de conexão, etc) |
Tempo real |
Painel de Status de Conector / Dispositivos (Dispositivos) |
Painel com as informações do Dispositivos(nome, status de conexão e alarme, etc) |
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 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 que permite configurar a visualização de dados, registros histórico e estatísticas de forma gráfica |
|
Relatório |
Painel que permite configurar a visualização de dados, registros histórico e estatísticas de forma tabular |
|
Relatório |
Painel que permite configurar a apresentação de uma imagem qualquer no layout de uma Tela |
|
Relatório |
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 permite acoplar (embedar) outro site na apresentação do Portal |
|
Utilitários |
Painel que exibe e permite a modificação de Campos customizados a nível de contrato ou modelo |
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.
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 especifico 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.
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):
Substituição de Dados Utilizados em uma Tela
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.
Acesso à Função
Utilize a função de Substituição de Dados na seção de Manutenção do Menu Tela para reconfigurar sua Tela quando alterar o Conector de Referência ou precisar trocar um Dado específico utilizado em diversos painéis da Tela.
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 este recurso, iremos utilizar uma Tela com 4 painéis (Sinóptico, Status de Conector, Painel de Dados e Alarmes) e 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 contendo o mesmo nome porém 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 arquio (.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 o utilizar esta nova tela como um Dashboard, podemos visualizar que o nome dos Dados e seus respectivos valores foram substituidos 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 novos Dados de Destino.
Para o painel de Status do Conector, o Conector exibido também foi alterado para o novo Conector (“Conector 2”) 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 do Conector de Destino.
Para finalizar, o Painel de Alarmes foi responsável por alterar os Alarmes cadastrados nos Dados de Origem, para os Alarmes cadastrados nos Dados de Destino.
Á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 a área de processo em que apenas os usuários do contrato registrados nesta mesma área poderão ter acesso para esta tela:
Criando uma nova Tela(dashboard) para um Conector
Para criar uma nova tela, siga os seguintes passos:
Acesse o menu lateral Tela;
Clique no botão de Novo. Será redirecionado para a edição dessa tela;
Altere o nome da Tela, que fica ao lado do menu superior Tela;
Selecione um Conector de Referência;
Defina uma Área de Processo para Tela caso desejado (cujo apenas os usuários com permissões pertinentes terão acesso);
Acessando a aba de Layout configure novas linhas arrastando o modelo de layout desejado para a tela;
Para adicionar painéis em seus respectivos layouts, acesse a listagem de Painéis disponíveis e arraste os mesmos até os layouts que foram adicionados;
Selecione o painel desejado em cada célula e configure-os da maneira preferível;
Para pré-visualizar como este Dashboard ficaria após publicação, clique no menu superior Visualizar;
Agora, é necessário publicar a tela. Para isso, clique no menu superior Publicar para salvar nova versão do Dashboard, que será apresentado o seguinte formulário:
Fig. 6 F1 - Formulário de publicação de uma Tela.
Na publicação, deve-se informar:
Nome: identificação da tela(que será apresentado posteriormente na lista de telas do editor);
Descrição: descrição geral sobre a tela;
Versão: Identificador para a versão da tela que está sendo publicada;
Notas de lançamento: Informações gerais sobre a versão da tela que está sendo publicada (descrição da alteração usada no histórico de Versionamento de Telas).
Por fim, clique em Confirmar para efetivar a publicação da tela. Após publicar uma tela, a mesma é salva no servidor e deixa de ser apenas uma versão local presente no navegador utilizado para edição.
Atenção
Para utilizar a tela criada acima em um conector, deve Associando uma Tela ao Conector no cadastro do mesmo.
A edição de uma Tela e qualquer um de seus painéis é salva localmente em uma área apropriada do navegador utilizado até que as alterações sejam publicadas, ou seja, salvas no servidor do Portal de Telemetria.
Então é importante atentar-se na utilização de edição de Telas em diferentes dispositivos. De qualquer maneira, o Portal de Telemetria sinaliza através de um ícone de quando a versão local de edição de uma tela no navegador do usuário é anterior a versão publicada no servidor do Portal.
Nestes casos, deve-se decidir entre restaurar a tela do servidor e descartar a edição local ou publicar a versão local para sobrescrever a versão do servidor.
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:
Eventos associados a Telas
O Portal de Telemetria disponibiliza um recurso que permite a criação de Eventos a nível de Tela, ou seja, com escopo local.
Nesses eventos, podem ser utilizadas qualquer uma das ações descritas aqui.
Vamos aos eventos que atualmente são tratados:
Evento antes da Abertura de uma Tela
Este evento é chamado antes da Abertura de uma Tela associada ao Conector.
Por exemplo, é possível utilizar neste evento, uma ação para abrir uma janela de popup/modal com informações de boas vindas com o logo da empresa, realizar a escrita em Dados ou outras ações possíveis.
Atenção
Evite utilizar a ação de abertura de janela pop-up em Telas que poderão ser visualizadas em dispositivos móveis, pois o pop-up não possui responsividade para reajustar ao tamanho da Tela devido ao seu tamanho fixo. Para ser responsiva utilize modal.
Exemplo de utilização
Abaixo, vamos deixar de exemplo uma Tela que será usada como popup/modal, demostraremos alguns exemplos de ações associadas a mesma:
Nesta Tela, temos apenas o painel Sinótico com o logo da empresa e o valor de um Dado sendo apresentado em um controle Gauge.
Note as principais configurações da Tela do exemplo acima:
Editor de Título dos Painéis (ícone e título);
Preencher página (Ativando a Responsividade do Painel Sinótico no Dashboard);
Cor de fundo.
Para acessar os Eventos antes da Abertura de Tela, basta:
Acessar o Editor de Telas;
Clicar no menu do cabeçalho Tela ou Layout;
Selecionar a aba Scripts;
Expandir a seção de Eventos;
Clicar no botão Adicionar evento.
Selecione o evento Ativo/Aberto;
Pode-se utilizar qualquer uma das Ações.
Abaixo, segue um exemplo de configuração de uma Tela na qual o evento antes de sua abertura será configurado com a ação Abrir Tela (modal) (pertencente ao Grupo Tela):
Fig. 7 Configuração de um modal
Após publicar, ao abrir a Tela (de trás) associada ao Conector, este evento é chamado:
Fig. 8 Visualização da Abertura da Tela de um modal
É possível personalizar para uma resolução de monitor, adicionando o evento do Grupo Tela com ação de Abrir Tela (pop-up).
Lembrando que o tamanho do pop-up é fixo, então para ter um posicionamento ideal, verifique o tamanho da resolução do monitor que será usado, neste caso, usaremos um monitor com resolução 1366 X 768px.
1º Exemplo
Fig. 9 Configuração de um pop-up
Fig. 10 Visualização da Abertura da Tela de um pop-up
2º Exemplo
Fig. 11 Configuração de um pop-up menor
Fig. 12 Visualização da Abertura da Tela de um pop-up menor
Evento ao Sair de uma Tela
Este evento é chamado quando se utiliza a botão/ação de voltar do navegador, acessando uma outra Tela ou página do mesmo.
Atenção
Este evento não é chamado ao fechar a aba ou o navegador associada a Tela.
Por exemplo, é possível utilizar o evento para realizar a escrita em um Dado ao sair da visualização Tela através do botão de voltar do navegador.
Duplicação de painéis
Este recurso pode ser chamado de Painel Clone ou Painel Cópia, que possui como objetivo criar um novo painel com base em um outro já criado anteriormente, sem sincronismo entre os mesmos. Isso significa que após o processo de duplicação entre os painéis, os mesmos não herdarão mais nenhuma configuração sem ser permitido pelo usuário.
A reutilização de painéis é feita através do movimento de arrastar um painel já criado anteriormente na tela para um novo espaço de layout.
Alguns painéis podem ser reutilizados na mesma tela (dashboard) mais de uma vez, enquanto outros não.
Painéis de Uso Único
Os painéis que permitem ser utilizados apenas uma vez por tela são:
Barra de Ferramentas;
Cartões de Conectores;
Estatísticas Conectores / Dispositivos;
Histórico de Eventos;
Status de Conector;
Status de Conector / Dispositivos;
Tabela de Dispositivos;
Campos Customizados.
Já os outros painéis permitem mais de um uso por tela.
Para realizar a clonagem de painéis de maneira prática, acesse a aba de edição de tela e em Tela, expanda a aba de “Painéis na tela”:
Ao expandir a aba, clique sobre o painel que será duplicado e arraste o mesmo até o novo layout aonde será clonado:
Atenção
É importante ressaltar que as dimensões do layout de destino (altura mínima e máxima) serão preservadas. Então caso o painel clone fique diferente do painel de origem, será necessário o ajuste manual.
Painéis como Base/Template para Construção de outras Telas
Conceito
Este recurso permite utilizar um determinado painel como modelo ou base para a criação de outros painéis, funcionando como um template para a construção de um outro painel, no qual chamaremos de Painel Derivado.
Ao usar um Painel Base, será disponibilizada a opção de padronizar a identidade visual e funcional dos painéis, garantindo consistência e eficiência no desenvolvimento e na manutenção da Tela.
Qualquer atualização no painel base pode ser propagada para os painéis derivados (caso configurado), simplificando a gestão e atualização das suas Telas.
Atenção
Este recurso não permite a reutilização de painéis em uma mesma Tela.
Painel Sinótico de Base/Template
Um exemplo de uso desse recurso é a criação de um Painel Sinótico padrão, utilizado como base para outros painéis Sinóticos dentro de uma mesma aplicação ou projeto.
Esse painel base pode definir elementos fixos, como cabeçalho e rodapé, enquanto o conteúdo específico é configurado nos painéis derivados.
Exemplo
Neste exemplo, vamos demonstrar como utilizar um Painel Sinótico de base para construção de um outro Painel Sinótico.
Painel Base
No Painel Sinótico que será utilizado como base:
Adicione botões na barra de ferramentas para navegação;
Inclua um controle de imagem para o logo da empresa;
Defina uma imagem de fundo.
O objetivo é que o conteúdo deste painel seja apresentado em qualquer outro Painel Sinótico(de outra Tela) que utilize este painel como base.
Painel Derivado
Após criarmos uma Tela com o nosso Painel Sinótico de base, vamos criar uma outra Tela para que possamos configurar um Painel Sinótico que o utilizará como base.
Então para isso, acesse o Menu Layout e clique em botão (Usar Painéis de outra Tela como Base):
Será apresentada a opção para selecionar uma Tela na qual um ou mais de seus painéis poderão ser utilizados como base nos painéis da Tela atual.
Selecione a Tela desejada e escolha os painéis que serão utilizados como base:
Após selecionar uma Tela, será apresentado todos os seus painéis. Em cada painel há um identificador relacionado a sua posição na Tela de Origem, apresentando o número da linha e coluna disposto no layout da Tela, no qual pode ser útil para se determinar qual painel se deseja utilizar:
Para utilizar um painel da Tela Base, clique duas vezes no painel desejado ou arraste-o para a posição desejada no layout da Tela atual
Atenção
Não é permitido utilizar o mesmo painel da Tela Base mais de uma vez, sendo bloqueado pela interface(deixando-o cinza). Este comportamento também ocorre com os Painéis de Uso Único já utilizados na Tela.
Após associar um painel base ao painel derivado, as seguintes configurações estarão disponíveis nas propriedades deste painel:
Atenção
No modo de edição do sinótico, controles com edição desabilitada ficam com a opacidade reduzida em (70%). Assim é possível identifica-los mesmo sem passar o mouse por cima ou tentar seleciona-los. Porém na pré-visualização e na visualização de fato da Tela, são apresentados normalmente.
Tela de origem
Identifica o nome da Tela associada ao painel base que foi associado ao painel derivado.
É possível acessar a edição dessa Tela através do botão .
Habilita sincronização
Por padrão, ao adicionar um painel da Tela Base, o painel derivado terá um vínculo com este painel.
Chamamos esse vínculo de sincronismo que é aplicado com esta opção marcada.
Com a sincronização ativada, qualquer alteração realizada no painel base será refletida automaticamente no painel derivado.
Vantagens Uma grande vantagem dessa abordagem é a facilidade de manutenção. Por exemplo, para atualizar o logo da empresa, basta modificá-lo na Tela base, e essa alteração será automaticamente aplicada a todos os painéis derivados.
Limitações É importante notar que não é possível editar os conteúdos do painel base diretamente através do painel derivado:
Caso a sincronização seja desabilitada, o painel derivado manterá o conteúdo do painel base como uma “cópia”. Isso significa que será possível editar este conteúdo de maneira independente no painel derivado. No entanto, eventuais alterações no painel base não serão mais refletidas no painel derivado.
Portanto, é fundamental compreender que a vantagem da sincronização é centralizar as alterações de conteúdos comuns no painel base. Dessa forma, o trabalho no painel derivado fica restrito a novos conteúdos específicos, mantendo a consistência e facilitando a manutenção.
Atenção
O sinótico funciona de maneira diferente dos outros painéis, deixando os controles que vem do Painel Base sempre bloqueados no Painel Derivado.
Atenção
Desabilitar e reabilitar a sincronização fará com que alterações locais no painel derivado sejam perdidas. Apenas alterações de layout (altura mínima e máxima) serão preservadas.
Um painel derivado não pode ser utilizado como base para outro 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. 13 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 do 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 especifica.
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 associado 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, está 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 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 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. 14 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 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.
Organização de Telas em Pastas
Introdução
Para facilitar o processo de organização de Telas, o Portal de Telemetria disponibiliza a ferramenta de pastas para que as telas possam ser agrupadas e organizadas em conjunto conforme a necessidade identificada pelo usuário.
Este recurso fica disponível na própria página de Listagem de Telas e para acessá-lo, basta clicar com o botão direito do mouse em cima da pasta raiz e serão exibidas algumas funções:
Criar: Cria uma nova pasta para Telas;
Renomear: Renomeia a pasta selecionada;
Deletar: Remove a pasta selecionada (as telas serão movidas para a pasta raiz);
Estilo: Possibilita alterar o estilo da hierarquia de pastas em 5 opções diferentes:
fa-light: Modelo branco com bordas pretas;
fa-dark: Modelo preto com bordas brancas;
glyphicon: Modelo preto com bordas brancas, utilizando um ícone da pasta diferente do padrão;
images: Modelo colorido em marrom claro;
default: Modelo tradicional sombreado com cores claras.
Ordernar: Organiza o primeiro nível de pastas dentro da pasta assoaciada a ação:
Ascendente: Ordena em ordem Ascendente de A - Z;
Descendente: Ordena em ordem Descendente de Z - A.
Para facilitar o processo de criação de nomes de pastas para ordenar da forma esperada, segui um exemplo, porém pode-se arrastar a pasta ordenando do jeito que achar melhor.
Publicando as configurações de Pastas
Assim como o processo que envolve a confecção de telas, é importante ressaltar que as alterações nas pastas (criação, edição, remoção, ordenação, movimentação e mudança de estilo) e movimentação de telas entre pastas, inicialmente são salvas APENAS LOCALMENTE EM CADA NAVEGADOR.
Caso o usuário responsável pelas mudanças deseje que outros usuários do contrato tenham acesso à essas alterações ou prefira acessá-las por um outro navegador, será necessário utilizar o recurso de Publicação:
Ao finalizar o procedimento de edição e configuração das pastas, na página de listagem de telas, clique em Publicar (representado pelo ícone “”);
Confirme a operação através do botão “Sim, confirmar”.
Atenção
Ao realizar a publicação, não será possível reverter este processo. Isto é, a nova versão publicada contendo as configurações atuais será definida como versão mais recente e por isso, mesmo utilizando a opção de “Restaurar” (representada pelo ícone “”) após a publicação, não será possível acessar a versão anterior à última publicada.
Ao confirmar o processo de publicação das telas em pastas, as alterações contidas naquele navegador serão enviadas para o servidor. Dessa maneira, a organização de pastas publicada estará disponível para qualquer usuário e em qualquer navegador.
Restaurando as configurações de Pastas
A função de Restaurar, representada pelo ícone “”, permite que o Portal de Telemetria restaure as configurações das pastas de acordo com a última publicação que foi feita para o Contrato.
Com isso, todas as eventuais alterações locais que não foram publicadas pelo usuário do navegador que fizer a restauração, serão sobrescritas pela versão publicada.
Atenção
Recomenda-se publicar cada alteração que fizer caso compartilhe a organização. Se tiver uma publicação que outra pessoa publicou e não foi reconhecida, o sistema bloqueará a publicação com uma mensagem de erro “Item não pode ser salvo”. Não podendo publicar por cima como acontece na tela, precisando restaurar.
Exemplo
Para demonstrar este recurso, no exemplo abaixo será criada uma Nova pasta nomeada como Testes, na qual será alterada para o estilo “fa-dark” e a tela que estava localizada na pasta raiz, será agora movida para a nova pasta:
É importante ressaltar que ao deletar uma pasta (que não seja a raiz), as telas que até então estavam localizadas nesta pasta, serão agora movidas para a pasta raiz do contrato, como mostra o exemplo abaixo:
Recuperação de Telas
Introdução
Ao ser excluída ou arrastada para a lixeira, uma tela ainda pode estar disponível para ser recuperada pelo usuário. Esta ferramenta permite que caso alguma tela tenha sido deletada por engano, possa ser reintegrada à lista de Telas do Contrato.
Para recuperar uma Tela já excluída, será necessário acessar a página de listagem de telas excluídas, representada pelo ícone .
Ao clicar sobre este ícone, serão exibidas todas as telas que foram deletadas nos últimos 30 dias (caso ultrapasse o período de 30 dias na lixeira, as Telas serão excluídas permanentemente, não sendo possível mais recuperá-las).
Ao localizar a Tela que deverá ser recuperada, clique em “Restaurar” representado pelo ícone ou arraste a Tela até alguma pasta de sua escolha.
Ao escolher uma das 2 opções disponíveis para a recuperação, a Tela antes deletada, agora encontra-se disponível e pronta para uso.
Além disso, ao remover uma Tela, o sistema acrescentará “#id (excluída)” ao final do nome original, permitindo que uma nova Tela utilize o nome anteriormente usado. Quando uma Tela é restaurada, o sistema modificará o final do nome para “#id (restaurada)”, garantindo que não haja duplicidade com o nome de nenhuma Tela já existente.
Atenção
É importante ressaltar que apenas o dono do contrato possui o acesso para visualizar e recuperar as Telas removidas permanantemente da lixeira (por até 30 dias da data de remoção) como forma de proteção contra exclusões acidentais.
Exemplo
Neste exemplo, iremos remover uma Tela nomeada “Teste recuperação” e após isso, iremos restaurá-la.
Exclusão
Veja no exemplo abaixo, o processo de exclusão de uma tela:
Após a exclusão da Tela, é possível visualiza-la clicando na pasta “ Lixeira”.
Atenção
Caso a tela que foi removida esteja sendo utilizada como Dashboard de um Conector, automaticamente o Portal de Telemetria definirá a Tela Padrão para o Conector. Porém, internamente a Tela removida ainda estará associada ao Conector. Portanto, caso a mesma seja recuperada, ela será apresentada pelo Conector em questão.
Então é importante remover a associação da Tela no Cadastro do Conector antes de ser removida caso se deseje evitar este comportamento.
Restauração
Para realizar o processo de restauração de telas, acesse a listagem de telas excluídas e clique sobre o botão “Restaurar”, representado pelo ícone “” ou arraste a tela deletada para a nova pasta que armazenará a mesma.
Os 2 métodos de recuperação estão exemplificados nos vídeos abaixo:
Método de recuperação pelo botão “Restaurar”:
Método de recuperação pelo arrastamento da tela deletada até a sua nova pasta:
Telas Excluídas da Lixeira
O Portal de Telemetria oferece ao dono do contrato acesso exclusivo para visualizar e recuperar as telas removidas da lixeira.
As telas removidas permanentemente por qualquer usuário subordinado ficam disponíveis por até 30 dias a partir da data de remoção inicial.
Essa funcionalidade serve como proteção contra exclusões acidentais, garantindo que as telas sejam completamente perdidas apenas após esse prazo.
Para restauração de multíplas telas basta seguir o exemplo:
Simulação Global de Valores de Dados utilizados na Tela
Para melhorar a capacidade de testes e ajustes em uma Tela, pode ser utilizado o Simulador Global de Valores de Dados que são utilizados na Tela e visualizar os resultados em tempo real dos comportamentos esperados em cada painel.
Atenção
Este recurso não é aplicável a Consultas Customizadas para Relatórios.
Este recurso é utilizado para simular valores para os Dados que serão monitorados em cada um dos painéis utilizados na Tela e pode ser acessado ao expandir as opções da tela através do ícone “ “, na aba superior de edição da Tela:
Diferente da simulação localizada na aba de “Propriedades” (que realiza uma simulação individual para cada um dos painéis), este Simulador permite que os valores escritos nos Dados sejam propagados para todos os painéis contidos na Tela nos quais utilizam estes Dados.
Ao clicarmos no botão que representa esta recurso (indicado na imagem acima), será exibida uma nova janela onde os Dados contidos no Conector da Tela aparecerão:
No topo do modal, serão exibidos os seguintes ícones de ação no mesmo:
- Fica solto na tela e desaparece ao rolar a barra de rolagem, não permanecendo visível;
- Fica fixo na posição atual ou acompanha a barra de rolagem, permanecendo visível durante o deslocamento;
- Fecha o modal.
Opções disponíveis logo abaixo do topo do modal:
Habilita Sincronização: Quando ativada, garante que a sincronização dos Dados simulados ocorra, assegurando que o timestamp e a quantidade de amostras sejam consistentes entre todos os Dados. Isso mantém a mesma temporalidade e quantidade de amostras para os Dados históricos simulados, independentemente de a simulação ser realizada Dado a Dado;
Botão “Cancelar”: Interrompe qualquer simulação em andamento, revertendo todas as modificações feitas durante a sessão;
Botão “Simular”: Gera a simulação de todos os Dados de uma vez, aplicando os valores definidos para cada Dado na lista.
Cada Dado terá:
O nome do Dado;
Campo para a escrita do valor simulado;
O botão “ “, utilizado para limpar o campo de escrita (remover a simulação atual);
O botão “ “, utilizado para simular um valor aleatório para o Dado selecionado.
Atenção
Para utilizar o Simulador corretamente, é importante que, antes de utilizá-la, seja feito o processo de referenciar o Conector para a Tela, pois o Simulador exibirá os Dados contidos nesse Conector.
Para exemplificar o uso do Simulador, observe o vídeo abaixo:
Podemos analisar que, conforme os valores dos Dados foram sendo alterados utilizando o Simulador, as modificações no Painel Sinótico e nos Dados foram aplicadas em tempo real.