Image List

Esta página apresenta a descrição e as propriedades de configuração do controle Image List (Lista de Imagens).

Este controle pode ser utilizado para criar uma lista de imagens associadas a um valor de um Dado, sendo ideal para animação de imagens em virtude do valor de um dado.

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 avaliado para que então o controle apresente a imagem associada ao valor.

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 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}

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 Estilo (determinando que o estilo do controle será aplicado posteriormente nos controles selecionados);

• Por fim, selecione no painel sinótico os controles(semelhantes) em que deseja-se aplicar o estilo conforme definido no controle “original”.

Uma outra operação possível é reverter as configurações de estilo para o padrão de sistema(estilo 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.

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.

Atenção

Quando precisar rotacionar, formate o tamanho da largura e altura antes para ficar igual o desejado, pois após rotacionar não suporta um grande aumento do comprimento.

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 Tracejada Pontilhada Dupla Sulco Cume Embutida Saltada Nenhuma	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: Não 3px 5px 10px 20% 50%	3px

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

Lista de Imagens

Permite configurar o comportamento dos itens de seleção do controle entre utilizar Listas de Texto criadas em Dados, configurações do contrato ou criar uma lista local no próprio controle.

Para isso, são disponibilizadas as seguintes opções no campo Origem:

Identificação	Descrição
Controle	Apresenta os campos para configuração de uma lista de texto local ao controle
Dado	Apresenta a Lista de Texto cadastrada no Dado associado a este controle.
Global	Apresenta as Listas de Textos do contrato (que foram criadas em algum cadastro de Dado ou nas configurações do contrato)

Ao selecionar uma origem, a lista de texto será exibida toda colapsada (mostrando apenas os textos).

A seção Opções engloba toda a lista, exibindo o ícone , então caso queira expandir todos os itens, poderá clicar nesse ícone, transformando-o em .

Para expandir mais de um item específico da lista, clique neles com o CTRL pressionado.

A exibição da lista de texto possui sua própria barra de rolagem, podendo ser acessada pelo scroll do mouse, clique ou arrasto com o clique do mouse pressionado.

Caso seja configurada a Origem como Controle, serão apresentadas as seguintes opções:

Propriedade	Descrição
Texto	Texto que será apresentado pelo controle quando o Dado alcançar o valor determinado, mas não tiver uma imagem associada
Ícone	Apresentado antes do Texto, permite definir a Imagem selecionada como o padrão da lista(caso o valor do Dado não corresponda a nenhum item da lista)
Ícone balde	Apresentado ao lado do Texto, permite definir a cor de fundo para imagem com fundo transparente (png)
Valor	Valor que irá determinar a apresentação
Imagem	URL da imagem(de uma Biblioteca de Imagens ou externa) que será apresentada pelo controle quando o dado alcançar o valor determinado
Botão Nova imagem	Adiciona um novo item na lista(novo conjunto imagem/valor)

Atenção

Após alterar a Origem de Dado ou Global para Controle, será salvo localmente a lista anterior, porém podendo modificá-la. Além de limpar a lista com o ícone na seção Opções ou excluir um item específico pelo mesmo ícone na frente do item da lista.