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.
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 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.
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:
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.
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.
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.