Descrição

Todos os atributos de uma visualização gráfica e seus pontos associados são editáveis na página de edição da visualização gráfica. Visualizações contém uma coleção de compontentes de visualização, que podem ser conteúdo estático ou dinâmico baseados em um ou mais pontos.

Atributos de visualizações gráficas

Todas as visualizações gráficas têm um nome pelo qual são referenciadas dentro das listas de visualizações gráficas. Este nome deveria ser único, mas não é obrigatório. Uma visualização pode, opcionalmente, ter uma Imagem de fundo sobre a qual seus componentes são superpostos. Usuários podem usar qualquer tipo de de imagem que pode ser exibida em um navegador como imagem de fundo, incluindo imagens com os formatos GIF, JPEG e PNG. O atributo Acesso anônimo determina se os usuários que não logados podem acessar a visualização. Editar significa que usuários anônimos podem definir valores de pontos "setáveis" na visualização. Leitura significa que usuários anônimos podem acessar a visualização, mas não definir valores a pontos. Nenhum significa que usuários anônimos não podem acessar a visualização.

Componentes de visualização

Componentes de visualização podem ser adicionados a uma visualização através da seleção do tipo de componente da lista e clicando no ícone . Novos componentes são exibidos por padrão no centro da visualização, mas podem ser reposicionados em qualquer lugar sobre a imagem de fundo ao serem arrastados e soltos no local desejadoS. Atenção que visualizações de pontos podem cobrir umas às outras. Enquanto a visualização estiver sendo editad, os componentes são escritos na ordem que forem definidos. Este comportamento pode afetar como componentes irão se sobrepor, quando uma sobreposição ocorrer.

Conteúdo estático

Selecione um componente do tipo HTML para adicionar conteúdo estático. Por padrão o ícone representa o conteúdo (Este ícone será sempre que não houver conteúdo definido). Como estes componentes são independentes de valores de pontos, ele são processados uma vez quando a visualização é carregada e permanecem inalterados a partir de então. Arraste o elemento para a posição desejada. Para edita, paire o cursor sobre o conteúdo para expor os controles de edição. Para alterar o conteúdo, clique no ícone () e insira qualquer trecho html válido. O conteúdo será escrito literalmente na visualização, assim qualquer trecho HTML válido incluindo Javascript pode ser usado. Classes de estilo de arquivos CSS podem ser referenciada ou estilos podem ser definidos diretamente. Por exemplo, para incluir um rótulo, o seguinte poderia ser usado:

  <span
style="background-color:yellow;font-size:25px;font-weight:bold;border:2px solid
orange;">My label</span>

Isto iria resultar em: My label

Conteúdo estático também pode ser referenciado em outros servidores. Por examplo, imagens externas podem ser colocadas nas views:

  <img
src="http://bluebrain.epfl.ch/webdav/site/bluebrain/shared/
21june_06_singleNeuron_200.jpg"/>

Isto seria mostrado:

Componentes de pontos

Todos os outros tipos de componentes na lista de componentes dependem de um ou mais pontos para serem processados. Uma vez que um componente for adicionado à visualização, sua representação padrão é o ícone de ponto genérico (). Este será o caso até que o componente tenha informação para ser processado apropriadamente. A informação necessária depende do tipo de componente. A página de edição de visualização se comporta de maneira similar à página de visualização onde o valor atual do ponto é mostrado e atualizado para que os usuários possam ver exatamente como o ponto irá aparecer na visualização.

Processamento de componentes de ponto

O processamento de um componente de ponto pode ser alterado ao pairar o cursor sobre o componente para mostrar os controles de edição. Os controles mostrados na página de edição diferem daqueles mostrados na pĆ”gina de visualização exceto pelo controle de informação (), que mostra o valor atual e tempo da última alteração para o ponto.

Os atributos da visualização do ponto podem ser definidos ao clicar no ícone de edição de visualização de ponto (). Quando clicado, um painél de edição será mostrado e terá prioridade dentro do contexto da visualização gráfica. Por exemplo, se um ponto normalmente pode ser definido pelo usuário, este ponto pode ser alterado de maneira contrária. Pontos que originalmente não não poderiam ter seu valor definido pelo usuário não podem ser reconfigurados para aceitar esse tipo de definição. Neste painél também é onde o ponto ou pontos que suportam o componente podem ser definidos. Apenas pontos com o tipo de dados apropriado para o componente serão mostrados na lista de pontos.

O processamento gráfico de um componente pode ser alterado ao clicar no ícone de processamento gráfico (). Quando clicado, um painél será exibido que permite que os atributos de processamento do componente sejam editados. Por examplo, o componente Gráfico análogo pode ser usado para visualmente quantificar um ponto numérico. Usando os valores Min e M´x,as imagens são uniformemente distribuídas sobre uma faixa numérica e mostrados apropriadamente. Um processamento gráfico para uma Imagem biná é aplicável apenas a pontos binários, e permite que uma de duas imagens seja mostrada dependendo do valor atual do ponto. Imagens animadas são suportadas de maneira que uma animação pode ser usada para visualmente diferenciar um equipamento de quando está ou não funcionando. A representação textual de um ponto também podem ser mostrada em imagens ao selcionar a opção Mostrar texto. Um Ponto simples mostra apenas a representação textual do ponto.

O componente Gráfico dinâmico é similar ao processador de imagens analógicos, em que pode visualizar um ponto numérico, mas ao invés de escolher uma imagem de um conjunto, o indicador do valor ´ desenhado dinamicamente. Por examplo, o ponteiro pode ser desenhado em uma imagem única de um mostrado. Para adicionar um novo processador dinâmico, adicione um subdiretório no diretório de imagens com a imagem estática e um arquido de informações apropriado. Então, adicione uma função de processamento no arquivo resources/view.js. A função deve ser nomeada de acordo com o nome dado ao subdiretório. Veja o gr´fico do Mostrador como exemplo.

Um componente de Script de servidor pode ser usado para definir sua lógica de processamento particular. A linguagem de script usada aqui é JavaScript, também conhecida como ECMAScript (A especificação completa para ECMAScript está disponível aqui). Não exitem, entretanto, objetos "window" ou "document" disponíveis pelo fato do script ser executado no servidor ao invés do navegador. Como alternativa, o valor atual do ponto fica disponível pela variável value var e o timestamp da amostra é dado pela var time. Além destas, as vars pointComponent and point também são definidas, como valores análogos. Qualquer valor pode retornar do script, mas será escrito textualmente para o conteúdo da visualização do ponto, assim HTML válido é o mais útil. Por exemplo, o código a seguir irá condicionalmente mostrar uma mensagem piscando quando o ponto binário tiver valor "1" (traduzido como "true" para o script):

  if (value)
      return '<blink><span
style="background-color:orange;font-size:15px;font-weight:bold;">Warning:
point is ON</span></blink>';
  return "";

Note that, on the editing page, if a script returns no content the icon will be displayed so that the controls can still be exposed upon hover.

O timestamp da amostra é fornecido em milissegundos desde de 01 de janeiro de 1970. Pode ser convertido para um objeto ECMA Date com o seguinte código:

  var d = new Date();
  d.setTime(time);
O objeto Date "d" pode então ser usado como for necessário pelo restante do script.

Visualizações de pontos podem ser apagadas clicando no ícone apagar visualização de ponto (), que é mostrado ao pairar o cursor do mouse.

Salvando visualizações gráficas

Todas as alteraƧçõs a visualizações gráficas são salvas apenas quando o botão Salvar é clicado. Se alteraçõs incorretas foram feitas a uma visualização, essas podem ser abortadas clicando no botão Cancelar. Para apagar uma visualização inteira, clique no botão Apagar.