Dessinez des graphiques de données à partir de capteurs connectés à l'Internet des objets (IoT) avec SVG

Dans cet article de la série sur représenter des graphiques de données dans l'IoT J'explique comment tracer les graphiques en utilisant le Langage SVG. Comme à d’autres occasions, l’article sert également de brève introduction à la langue.

Format SVG

SVG correspond à l'acronyme de Scalable Vector Graphics (graphiques vectoriels scalables, en anglais). C'est un langage de balisage qui est basé sur XML et cela permet, principalement, de décrire un dessin par la géométrie qui le définit ; par opposition à la méthode matricielle, utilisée par exemple pour une photographie, qui utiliserait une grille de pixels colorés pour l'encoder.

à l'intérieur d'un dessin SVG Une image (une matrice de pixels) peut également être incluse, soit faisant référence à un document externe, soit intégrée au dessin lui-même. SVG.

La version linguistique en vigueur au moment de la rédaction de cet article est la Svg 1.1 bien que la définition de la version soit déjà en cours d'élaboration Svg 2. Dans la mesure du possible, j'essaierai de faire en sorte que ce qui est expliqué en introduction, même si cela fait référence à Svg 1.1 servir également à Svg 2.

Si le dessin SVG Il est inclus dans un document séparé et non dans le code HTML (ma proposition dans cette solution pour représenter les données IoT l'intègre dans le code HTML) doit être précédé d'une référence XML et un définition du type de document (DTD).

Dans la première ligne du code précédent la version est notifiée XML utilisé (1.0) encodage de caractères (UTF-8) et indique si vous avez besoin de définitions externes (standalone="no") ou s'agit-il d'un document autonome (standalone="yes"). La deuxième ligne exprime le définition du type de document (DTD), qui ne sera pas nécessaire dans la prochaine version de SVG.

Le code avec lequel le dessin est défini est placé entre les étiquettes <sgv> y </sgv> qui indiquent également, comme déjà mentionné en parlant de Code HTML qui agit comme un conteneur pour les graphiques de données dans l'IoT, les mesures, la partie du total représentée, la proportion ainsi que le type et la version.

L'exemple ci-dessus définit un dessin de 500 pixels de large sur 250 pixels de haut (fenêtre 500x250) qui sera recadré avec un rectangle de 460x80 (fenêtre 460x80) commençant aux coordonnées 20,10 en utilisant tout l'espace disponible dans le conteneur (un élément sur une page web, en notre cas) sans respecter la proportion d'origine à utiliser preserveAspectRatio="none". De plus, vous pouvez désormais voir le premier contenu du document, les commentaires qui sont inclus parmi <!-- y --> comme dans d'autres formats basés sur XML.

Le système de coordonnées choisi par SVG Il est orienté horizontalement (axe X) et verticalement (axe Y) et la direction positive est celle de l'écriture occidentale, c'est-à-dire que les valeurs de l'axe X grandissent vers la droite et les valeurs positives de l'axe Y grandissent vers le bas.

Définir le graphique avec SVG

Pour définir le graphisme des informations stockées par nos capteurs connectés à l'IoT nous devrons préciser le type d'objet qui est dessiné, sa géométrie (coordonnées, dimensions...) et son aspect (épaisseur, couleur...) dans le exemple de cet article un graphique linéaire qui peut être réalisé en joignant des segments de ligne avec l'objet line, très utile pour tracer des éléments indépendants, ou avec une ligne multi-segments, un objet path, plus pratique pour les séries de lignes connectées.

Avec l'élément path Le but est de réaliser un dessin comme celui de l'image ci-dessous, composé d'un tracé fermé rempli d'une couleur plus claire surmonté en haut par un tracé ouvert, sans remplissage et dessiné d'un trait épais.

Pour décrire une ligne on utilise une expression du type :

Dans laquelle X1,Y1 sont les coordonnées du premier point de la droite et X2,Y2 sont les coordonnées du second. Un attribut a été utilisé stroke-width pour définir l'épaisseur. Il existe plusieurs manières de définir l'apparence des objets SVG, avec ses propriétés individuelles, comme la précédente, ou avec la propriété style qui les rassemble tous et quelle est la méthode qui sera utilisée dans la proposition d'article.

Le code ci-dessus rejoint la propriété style les valeurs de stroke (la couleur du trait), stroke-width (l'épaisseur de la ligne) et stroke-opacity (l'opacité de l'objet)

La description d'un objet path a la forme

Le code ci-dessus utilise les opérations SVG M, L y Z à l'intérieur de la propriété d, qui signifient respectivement « moveto » (déplacer vers), « lineto » (ligne vers) et « closepath » (fermer le chemin). Ils peuvent être exprimés en majuscules ou en minuscules pour indiquer une valeur absolue ou relative le cas échéant (dans le cas de Z, par exemple, n'est pas pertinent). Il existe de nombreuses autres opérations avec lesquelles, par exemple, nous pouvons dessiner des courbes circulaires, des courbes elliptiques, des courbes de Bézier... dont nous n'aurons pas besoin dans cet exemple.

Bien que cette proposition dessine des graphiques linéaires pouvant délimiter une zone, il peut être utile de dessiner d'autres éléments simples pour marquer des points ou mettre en évidence des zones. Parmi ceux disponibles dans SVG Les polygones (avec lesquels vous pouvez également dessiner le remplissage), les rectangles (plus pratiques pour le cas spécifique), les ellipses et les cercles (comme cas particulier des ellipses) peuvent être intéressants. La syntaxe de ces éléments peut être vue dans l'exemple de code suivant.

L'apparence du code précédent ressemblerait à l'image suivante (avec une astuce pour pouvoir réutiliser les points de l'exemple ci-dessus)

Les points du polygone (polygon) sont indiqués dans la propriété points sous forme de paires de coordonnées x, y séparées par des espaces entre elles. Pour définir les ellipses (ellipse) les propriétés sont utilisées cx (coordonnée x du centre), cy (coordonnée y du centre), rx (largeur) et ry (haut). Au lieu de deux valeurs de rayon (rayon horizontal et vertical, rx y ry) le cercle (circle) est défini par un rayon de propriété r et les coordonnées du centre avec cx y cy. Pour définir le rectangle (rectangle) les coordonnées du coin supérieur gauche sont indiquées (x e y) la largeur (width) et le grand (height)

Enfin, pour inclure du texte, l'objet est utilisé text comme suit:

La position du texte est indiquée par les coordonnées x et y, la police correspond à la propriété font-family, la taille avec font-size et la couleur avec la propriété fill.

HTML permet d'intégrer des dessins SVG comme un autre élément de la page. Comme les autres objets, vous pouvez utiliser la propriété ID de leur attribuer un identifiant unique avec lequel ils pourront ensuite être référencés depuis JavaScript pour les manipuler. Du point de vue de HTML, un objet SVG aurait la forme suivante :

Avec ce que nous avons vu jusqu'à présent, il serait possible de dessiner le type de graphe de base recherché dans cette proposition mais, pour donner de la flexibilité à l'apparence du conteneur (la page web), la proportion du graphe sera affectée (Par exemple preserveAspectRatio="none") en modifiant sa taille pour l'adapter à la disposition dans la fenêtre du navigateur des éléments HTML.

D'une manière générale, il existe deux alternatives au comportement lors de la modification de la taille de la fenêtre du navigateur qui affiche la page Web contenant le graphique : (1) conserver la taille du graphique SVG laisser un espace vide s'il y a un excès ou ajouter des barres de défilement s'il est manquant ou (2) modifier la taille du graphique SVG de manière rythmée pour modifier la taille de la fenêtre du navigateur qui affiche le Web. Si vous choisissez la première formule, vous pouvez prédire les grandeurs et dessiner avec des mesures absolues, bien que corrigées en fonction de la taille choisie et des valeurs du graphique. Si vous choisissez la deuxième voie, qui est celle que je propose, les grandeurs sont toujours des pourcentages des valeurs représentées. L'avantage de la deuxième méthode est son adaptabilité au web et l'inconvénient est le dessin des éléments qui accompagnent le graphique, comme des points ou des textes.

Pour corriger la déformation qui pourrait survenir dans l'épaisseur des traits, l'effet est utilisé. vector-effect="non-scaling-stroke" sur les itinéraires nécessaires (ceux qui ont une valeur de stroke autre que none). Pour les objets text Il n’existe pas d’effet comparable, il est donc nécessaire de les déformer (ainsi que ceux qui leur sont associés) dans le sens opposé à celui produit par le changement de taille du conteneur.

Les transformations en SVG Ils peuvent être appliqués à des groupes d'objets afin que plusieurs textes et autres objets d'un graphique puissent être intégrés dans un seul groupe et, plus facilement, effectuer une transformation pour chacun d'eux.

Les éléments faisant partie d'un groupe sont inclus parmi les balises <g> y </g>, pour attribuer une transformation, la propriété est utilisée transform et une série d'opérations qui, dans notre cas, sont pertinentes scale, auquel est indiqué un facteur de grossissement horizontal et vertical. Si la valeur de scale est supérieur à un élargit l'axe correspondant et s'il est inférieur à un, une réduction de la taille des objets le long de cet axe se produit.

Dans l'exemple précédent, le premier et le deuxième texte sont modifiés en divisant par deux leur mesure horizontale et en doublant la mesure verticale par les valeurs 0.5 et 2.0 utilisées dans scale(0.5,2.0)

Le prochain article de la série sur représentation de graphiques de données provenant de capteurs connectés à l'IoT explique comment générer ou modifier des graphiques en temps réel à l'aide de JavaScript ce qui vous permettra de voir une animation du graphique lors de la représentation des dernières valeurs chargées depuis le serveur.

Ce qui suit est un exemple de ce à quoi ressembleraient les graphiques générés à l’aide de cette proposition.