Progress Bar
Esta página apresenta a descrição e as propriedades de configuração do controle Progress Bar (Barra de progresso).
Este controle representa o valor de um Dado através de uma barra de progresso.
As propriedades de configuração do controle são apresentadas nas seções a seguir:
Dado
Define qual o dado será tratado pelo controle, neste caso, qual dado terá seu valor representado na barra de progresso.
A configuração do dado é realizada através das seguintes opções:
Nome |
Descrição |
|---|---|
Origem |
Define o Conector associado ao Dado que será tratado no controle |
Dado |
Define o Dado que será tratado pelo controle. Caso selecionado um Dado Vetor, deve-se especificar o índice do elemento que será utilizado para tal. |
Dado Vetor
Utilizando Dados Vetores em Painéis Sinóticos para ser tratado pelo controle, é apresentada uma nova seção chamada de Índice de Valor.
É nesta opção que se define a Origem do índice(ou posição) do elemento do Dado Vetor que se deseja apresentar ou manipular no controle:
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 Conector e Dado configurado logo abaixo desta 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:
Expressão/OffSet: permite alterar o valor de índice do Dado Vetor definido de um Dado usando um valor númerico ou expressão (default: 0). OffSet: adicionando ou subtraindo o índice (-2, -1, 1, 2, etc). Expressão: usando operadores para modificar o índice ($value * 2 + 1).
Valor de teste
Após a seleção de um Dado, será apresentado um campo chamado Valor de teste. Este campo permite ao usuário informar o valor a ser apresentado (simulado) pelo controle na tela, com o objetivo de avaliar o seu comportamento.
O usuário pode:
Digitar um valor diretamente no campo;
Alterar o valor utilizando as setas para cima ou para baixo do teclado;
Clicar nas setas disponíveis no campo;
Arrastar o cursor na barra de simulação para alterar o valor do campo para Dado numérico (não booleano nem texto);
Simular um valor aleatório através do botão “”.
Caso seja necessário limpar o valor simulado para usar o valor real do Dado, clique no ícone “”.
Simulando valores para um Dado Vetor
Quando o Dado associado for um vetor, ficará disponível o botão (“Editar [n] “) para editar os valores de todos os elementos do vetor pelo formulário.
Para um índice constante, é possível simular o valor do elemento referenciado diretamente, como se fosse um Dado de tamanho 1.
Para um índice proveniente de outro Dado, o valor que for simulado será o do Dado utilizado como índice, e não o do Dado associado ao controle (vetor), como de costume. Neste caso, para simular os valores do Dado vetor, é necessário usar o formulário com todos os elementos.
Expressão
Utilizando as expressões, será possível manipular as propriedades de um valor de um Dado utilizando parâmetros. Estes parâmetros podem compor expressões que retornem o resultado de um cálculo combinado e este resultado será apresentado pelo controle(ao invés de apresentar o valor do Dado associado ao mesmo):
O conteúdo da expressão pode ser informado diretamente no editor de propriedades ou pode-se abrir o editor de expressões clicando-se com a tecla CTRL pressionada no ícone de expansão do editor “”:
Expressões a nível do Dado
Na tabela abaixo podemos visualizar um exemplo de propriedade de um Dado que pode ser apresentado pelo controle e/ou utilizado em expressões mais complexas:
Propriedade |
Expressão |
|---|---|
Valor do Dado |
${data.current_value.value} ou ${$value} (denotação curta) |
Atenção
Caso as configurações de expressão sigam o modelo antigo, utilizando o prefixo “item.data”, continuará funcionando normalmente. Os prefixos atuais foram definidos desta maneira para maior facilidade de acesso e praticidade na criação das expressões.
Expressões a nível do Alarme
Na tabela abaixo podemos visualizar exemplos de propriedades de um Alarme que podem ser apresentados pelo controle e/ou utilizados em expressões mais complexas:
Propriedade |
Expressão |
|---|---|
Retorna true/false para Alarmes ativos no Dado |
(data.has_active_alarms) ? 1 : 0 |
Número de Alarmes ativos no Dado |
${data.number_active_alarms} |
Número de Alarmes ativos no Dispositivo |
${data.device.number_active_alarms} |
Número de Alarmes ativos no Conector |
${data.device.connector.number_active_alarms} |
Operadores Aritméticos
Além de exibir os valores de propriedades dos recursos através de uma expressão, é possível também criar cálculos utilizando operadores aritméticos, sendo possível então montar expressões matemáticas para obter o resultado desejado em função dos valores dos operandos envolvidos na expressão e também da operação utilizada.
Para mais informações sobre como personalizar o valor exibido pelo controle, acesse Expressões.
Abaixo, podemos ver um exemplo mais elaborado onde o valor de um Dado que representa uma temperatura em graus Celsius(°C) será convertido para a unidade Fahrenheit(°F):
Aparência
Cópia de estilo e formatação
Nesta seção, são disponibilizadas algumas opções para que seja possível copiar as configurações de estilo e formatação do controle e aplicá-las em outros controles, facilitando assim a equalização de aparência em controles semelhantes.
Portanto, para copiar o estilo de um controle, deve-se seguir os seguintes passos:
Selecione no controle que terá seu estilo copiado, a opção Aplicar;
Marque a opção uma das seguintes opções:
Estilo: determina que apenas o estilo do controle será aplicado posteriormente nos controles selecionados;
$ Formatação do Dado: determina que apenas a formatação de apresentação do valor do dado associado ao controle será aplicado posteriormente nos controles selecionados;
$ Ambos: tanto o estilo, como a formatação de apresentação do valor do dado serão aplicados posteriormente nos controles selecionados.
Por fim, selecione no painel sinótico os controles(semelhantes) em que deseja-se aplicar o estilo e/ou a formatação de apresentação do valor do dado conforme definido no controle “original”.
Uma outra operação possível é reverter as configurações de estilo e formato de apresentação do valor do dado para o padrão de sistema(de quando o controle é criado). Para isso, basta seguir os seguintes passos:
Selecione no controle que terá seu estilo restaurado, a opção Restaurar;
Marque a opção Estilo ou $ Formatação do Dado ou $ Ambos.
Dimensões
Define o tamanho e a posição do controle no painel sinótico.
Nome |
Descrição |
Default |
|---|---|---|
Superior |
Define a distância, em pixels, entre a borda superior do controle e a borda superior da tela |
Depende |
Esquerda |
Define a distância, em pixels, entre a borda esquerda do controle e a borda esquerda da tela |
Depende |
Largura |
Largura, em pixels, do controle |
Depende |
Altura |
Altura, em pixels, do controle |
Depende |
Atenção
As propriedades Superior, Esquerda, Largura e Altura tem seus valores default definidos no momento da criação do controle. Então, esses valores podem variar para os diferentes tipos de controle.
Espaçamento
Propriedade |
Descrição |
Default |
|---|---|---|
Superior |
Define a distância, em pixels, de espaçamento entre a borda superior do controle e seu conteúdo(texto) |
Depende |
Direita |
Define a distância, em pixels, de espaçamento entre a borda direita do controle e seu conteúdo(texto) |
Depende |
Inferior |
Define a distância, em pixels, de espaçamento entre a borda inferior do controle e seu conteúdo(texto) |
Depende |
Esquerda |
Define a distância, em pixels, de espaçamento entre a borda esquerda do controle e seu conteúdo(texto) |
Depende |
Rotação
Permite rotacionar(girar) a angulação do controle no painel.
Cores
Define a cor de fundo e a cor da fonte(texto) apresentados pelo controle:
Propriedade |
Descrição |
Default |
|---|---|---|
Ícone |
Cor da fonte(texto) |
Preto (#000000) |
Ícone balde |
Cor de fundo |
Branco (#FFFFFF) |
Borda
Propriedade |
Descrição |
Default |
|---|---|---|
Cor |
Cor da borda |
Cinza Claro( #AFAFAF) |
Estilo da linha da borda |
Estilo de apresentação da linha de borda do controle. Opções:
|
Sólida |
Espessura da Borda |
Espessura da linha da borda em pixels |
1px |
Arredondar Borda
Define o arredondamento das bordas do controle:
Propriedade |
Descrição |
Default |
|---|---|---|
Arredondar Borda |
Opções:
|
3px |
Texto
Propriedade |
Descrição |
Default |
|---|---|---|
Fonte |
Define os atributos da fonte do controle Opções:
|
Source Sans Pro 18 |
Alinhamento |
Define o alinhamento vertical do texto dentro do controle. Opções:
|
Centro |
Informações
É uma breve descrição, dica ou informação do controle.
Permissões
Restringir visualização
Nesta configuração, é possível definir uma ou mais Área de Processo para restringir a visualização do controle na tela(dashboard) de um Conector.
Caso especificada uma ou mais áreas, somente usuários com as permissões pertinentes na(s) Área(s) de Processo selecionada(s) poderão visualizar o controle.
Caso nenhuma Área de Processo seja selecionada, o controle será visível na tela(dashboard) de um Conector para qualquer usuário com acesso a tela.
Restringir interação
Nesta configuração, é possível definir uma ou mais Área de Processo para restringir a interação do usuário com o controle na tela(dashboard) de um Conector.
Caso especificada uma ou mais áreas, somente usuários com as permissões pertinentes na(s) Área(s) de Processo selecionada(s) poderão interagir com o controle.
Caso nenhuma Área de Processo seja selecionada, o controle permitirá a interação de qualquer usuário que tenha acesso ao mesmo.
Propriedades Específicas
Limites
Define a faixa de valores que será representada pelo controle através de uma barra de progresso:
Vários Níveis
Permite configurar se o controle deve apresentar em sua barra de progresso com uma única cor ou se deve considerar uma representação diferente de acordo com valores de “níveis” configurados.
Temos as seguintes configurações de vários níveis:
Não;
Sim.
Por padrão, essa opção fica desabilitada, ou seja, o controle trata apenas os limites configurados anteriormente e uma cor única em sua barra de progresso. Esta cor pode ser alterada através da seção Cor.
Quando selecionado “Sim” para vários níveis, é apresentada uma nova seção no lugar da Cor chamada de Níveis.
Mínimo
Tipo |
Descrição |
Default |
|---|---|---|
Constante |
Valor constante associado ao limite mínimo de valor apresentado pelo controle. Opções:
|
0 |
De um Dado |
Permite selecionar um Dado para que seu valor seja utilizado como limite mínimo do valor do controle. Caso selecionado um Dado Vetor, deve-se especificar o índice do elemento que será utilizado para tal. |
Máximo
Tipo |
Descrição |
Default |
|---|---|---|
Constante |
Valor constante associado ao limite máximo de valor apresentado pelo controle. Opções:
|
100 |
De um Dado |
Permite selecionar um Dado para que seu valor seja utilizado como limite máximo do valor do controle. Caso selecionado um Dado Vetor, deve-se especificar o índice do elemento que será utilizado para tal. |
Cor
Caso desabilite a opção Vários Nível, temos as seguinte configuração:
Propriedade |
Descrição |
Default |
|---|---|---|
Cor |
Cor padrão da barra |
#000000 |
Níveis
Caso habilite a opção Vários Nível, temos as seguintes configurações:
Configurações globais dos Níveis
Propriedade |
Descrição |
Default |
|---|---|---|
Valor |
Fonte do valor que o controle utilizará para determinar o valor de cada nível configurado Opções:
|
Constante |
Padrão de cor |
Permite configurar o padrão de cor que a barra do controle seguirá na apresentação de valores. É possivel inverter a ordem das cores dos setores clicando-se no botão texto “Padrão de cor”. Não serão alterados as proporções destinadas aos setores. Opções:
|
Única |
Configurações específicas de cada Nível
Propriedade |
Descrição |
Default |
|---|---|---|
Cor |
Cor do Nível na barra |
Depende |
Abre as configurações do marcador do Nível no controle |
Nenhuma |
|
Valor do nível |
Valor do Nível(utilizado na cor da barra e no marcador) |
Depende |
Remove o Nível |
Nenhuma |
Quando selecionado o ícone , temos acesso as configurações do marcador associado ao Nível. Este marcador apresenta no controle alguns efeitos visuais para demarcar o valor do Nível no mesmo. Então vamos as configurações:
Propriedade |
Descrição |
|---|---|
Mostrar marcador |
Mostra o marcador do Nível no controle |
Ícone |
Configura o ícone do marcador. Opções:
|
Texto |
Configura o texto(valor do nível) do marcador. Opções:
|
Traço |
Configura o traço do marcador a ser apresentado no controle. Opções:
|