Aperçu

Tous les attributs d'une vue graphique et de ses points associés sont modifiables dans la page édition de la vue graphique. Les vues contiennent une bibliothèque de composants de vues, qui peuvent être statiques ou dynamiques basés sur un ou plusieurs points.

Attributs des vues graphiques

Toutes les vues sont référencées par un nom qui apparait dans la liste déroulante. Ce nom devrait être unique même si ce n'est pas obligatoire. Une vue peut avoir éventuellement une Image de fond sur laquelle seront superposés ses composants. N'importe quel type d'image peut servir d'image de fond, y compris les formats GIF, JPEG, et PNG. L'option Acces anonyme permet aux utilisateurs non identifiés d'accèder Ó la vue. L'option Définir signifie que les utilisateurs anonymes peuvent définir les valeur règlables des points de la vue. Lecture signifie que les utilisateurs anonymes peuvent accéder à la vue mais pas modifier les valeurs. Aucun interdit l'accès aux utilisateurs anonymes.

Composants de la vue

Des composants peuvent être ajoutés à la vue, sélectionnez un composant dans la liste et cliquez sur l'icône . Par défaut les nouveaux composant sont placés au centre de la vue, mais peuvent être déplacés par un glisser-déposer, n'importe ou à l'intérieur des limites de l'arrière plan. Notez que les points ajoutés peuvent se superposés. Lors de l'édition de la vue, les composants sont écrits dans l'ordre dans lequel ils sont définis. En cas de superposition de composants le comportement de ces chevauchements peut en être affecté.

Contenu statique

Sélectionnez le composant HTML pour ajouter un contenu statique. Par défaut l'icône représente le contenu. (Cette icône est utilisée tant que le contenu n'est pas défini.) Ces composants sont indépendants des valeurs des points, ils apparaissent au chargement de la page et ne changent plus. Glissez l'élément à l'emplacement désiré. Pour l'éditer, placez le curseur sur l'élément et affichez les contrôles d'édition. Pour le modifier, cliquez sur l'icône ) et entrez du code html valide. Le contenu sera intégralement repris dans la vue, ainsi tout code HTML valide (y compris du code Javascript) peut être utilisé. Vous pouvez définir des styles directement ou utiliser des classes de style CSS à partir de fichiers référencés. Par exemple, pour ajouter un label, les éléments suivant peuvent être employés:

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

Ceci affichera : Mon étiquette

Le contenu statique peut aussi faire référence à d'autres serveurs. Par exemple, vous pouvez placez une image externe sur vos vues:

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

Ceci affichera:

Composants de point

L'affichage de tous les autres composants de la liste dépendent d'un ou plusieurs points. Une fois le composant ajouté dans la vue, il est représenté par défaut par l'icône générique ()jusqu'à ce que le composant est assez d'informations pour être affiché correctement. Ces informations dépendent du type de composant. En mode édition l'affichage de la vue est le même qu'en mode utilisation. Lors de sa création un point est affiché et mis à jour ainsi l'utilisateur sait exactement comment apparaitra le point dans la vue.

traitement des composants du point

On peut modifier l'affichage d'un composant en passant la souris sur le composant, cela affichera les commandes d'édition. En mode édition les contrôles affichés sont différents de ceux de la page vue sauf pour le contrôle de l'information (), qui affiche la valeur actuelle du point et l'heure de mise à jour.

Les attributs d'un point de la vue peuvent être paramètrés en cliquant sur l'icône (). Un panneau d'édition apparait, qui permet de remplacer les attributs du point dans la vue. Par exemple, on peut changer un point règlable en point non règlable dans la vue (l'inverse n'est pas vrai, un point non règlable ne peut devenir règlable). C'est aussi dans ce panneau que l'on va définir le(s) point(s) à afficher. Les points proposés dans la liste dérourantes dépendent du type du composant choisi.

L'affichage d'un point peut être changé en cliquant sur l'icône (). Un panneau apparait, permettant de modifier l'affichage du point. Par exemple, le composant GIF analogique peut être utilisé pour visualiser la valeur numérique d'un point. Renseignez les valeurs Min et Max, les images seront uniformément réparties sur la plage numérique et affichées correctement. Un GIF binaire est disponible uniquement pour les points binaires, et affichera une des deux images disponibles suivant la valeur actuelle du point. Des gifs animés sont aussi applicables pour représenter l'état de fonctionnement d'un équipement (quand il marche ou pas). On peut ajouter un texte à la représentation d'un point en cochant l'option Afficher texte. Simple point Affiche seulement le texte du point.

Le composant GIF dynamique est similaire au GIF analogique dans le sens qu'il peut afficher la valeur numérique d'un point, mais au lieu de choisir un ensemble d'images il dessine dynamiquement l'indicateur de la valeur. Par exemple, le pointeur peut être dessiné sur l'image unique d'une montre. Pour ajouter un élément dynamique, ajoutez un sous dossier dans le répertoire "graphics", dans ce nouveau dossier placez vos propres images et un fichier info.txt associé. Puis, ajoutez une fonction dans le fichier "/resources/view.js". Le nom de la fonction doit être celui du dossier précédemment créé. Consultez par exemple le GIF Dial.

Script serveur est utilisé pour définir vos propres logiques d'affichage. Le langage de script utilisé est JavaScript, aussi connu ECMAScript. (La spécification complète ECMAScript est disponible ici ici.) Cependant, il n'existe pas d'objets "window" ou "document" disponible puisque le script est interprété coté serveur et non dans le navigateur. Au lieu de cela, la valeur actuelle du point est disponible à travers la variable value , et le timestamp de l'échantillon via la variable time. En outre, les variables pointComponent et point sont aussi définies, avec des valeurs similaires à "htmlText" et "renderedText". Enfin "events" donne la liste des évènements actifs actuellement et "hasUnacknowledgdEvent" est une valeur booléenne indiquant si au moins un des évènements actifs n'est pas acquitté.

Toute valeur peut être renvoyée par le script et affichée simplement, mais il est plus intéressant d'insérer dans le script du code HTML. Par exemple, le script suivant affichera selon le cas un message clignotant lorsque la valeur du point est "1" (interprété par "true" par le script):

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

Notez,que sur la page d'édition si le script ne renvoit rien l'icône sera affichée afin d'accéder aux contrôle du point (survol de la souris sur l'icône).

Le timestamp de l'échantillon est donné en millisecondes avec le 1 janvier 1970 comme origine. Il peut être converti en objet Date ECMA avec le code suivant:

  var d = new Date();
  d.setTime(time);

L'objet Date "d" peut être utilisé si necéssaire dans la suite du script.

Les points de la vue peuvent être supprimés en cliquant sur l'icône (), en survolant le point avec la souris.

Enregistrer une vue

Tous les changements d'une vue sont sauvegardés uniquement avec la bouton Enregistrer. En cas de changement erronés sur la vue cliquez sur le bouton Annuler. Pour supprimer une vue cliquez sur le bouton Supprimer.