Graphiques d'état des capteurs connectés à l'Internet des objets IoT

L’un des avantages de connecter un réseau de capteurs à l’Internet des objets est de pouvoir analyser les données obtenues. En représentant graphiquement ces informations, une personne (contrairement à un programme) peut comprendre de manière plus intuitive la signification des grandeurs surveillées, par exemple en les comparant entre elles ou en suivant leur évolution dans le temps.

Cet article commence une série, composée de quatre parties, qui explique une proposition simple de représentation graphique des données obtenues par des capteurs connectés à l'IoT. Avec la même philosophie que dans d’autres articles, la méthode proposée est parfaitement fonctionnelle bien que l’objectif principal soit didactique. Comme le profil technique du public auquel s'adresse le blog polaridad.es, et ce texte concerne l'électronique et non le développement web, chacune des sections sert d'introduction aux langages ou technologies utilisés : HTML, CSS, SVG y JavaScript.

Les articles de la série précédente sur comment stocker les données obtenues par les appareils connectés à l'Internet des objets (IoT) Ils ont terminé en expliquant comment accéder aux informations stockées dans les bases de données. Dans les exemples de la série, pour faciliter le processus, un serveur Web a été utilisé comme intermédiaire, chargé de recevoir les données via des requêtes POST du protocole HTTP, de les stocker dans une base de données et de les afficher sur une page Web.

Bien que le principal inconvénient de ce système soit la performance (qui pourrait être atténuée avec des alternatives telles que Node.js et MongoDB, qui seront expliquées dans les prochains articles), il offre en échange deux grands avantages : sa mise en œuvre est très simple (y compris la disponibilité des services publics) et peut afficher les données dans un navigateur, c'est-à-dire qu'il n'a pas besoin d'applications spécifiques (telles qu'une application pour appareil mobile) pour présenter les informations stockées qui représenteraient l'état historique des appareils connectés à l'Internet de Des choses.

Exploitant l'avantage de pouvoir présenter facilement sur une page Web les informations stockées avec ce système sur l'état des appareils connectés à l'IoT, cet article explique comment afficher graphiquement ces informations en utilisant le format SVG dès JavaScript pour générer dynamiquement une page Web dans HTML.

Il existe de nombreuses librairies JavaScript avec lequel résoudre la présentation graphique des données. Ces articles n’ont pas pour intention d’en développer un autre ; Le but de ce texte est de comprendre le processus et d'être capable de développer vos propres implémentations ; un objectif didactique et productif. Si vous souhaitez utiliser un produit plutôt que de le développer vous-même, je vous recommande de jeter un œil à certaines des excellentes bibliothèques permettant de générer des graphiques avec JavaScript avec des licences gratuites comme Graphiques.js, Highcharts, Outils de graphiques Google, Epoch, Raphaël, Graphique (basé sur Raphaël), dc.js, Chartiste.js, D3.js (ma recommandation), C3.js (basé sur D3.js), NVD3 (graphiques réutilisables pour D3.js) ...

Structure de document HTML avec graphiques SVG

Dans la proposition de cet article de présenter graphiquement les données des capteurs, la page web sur laquelle elles sont affichées est composée de :

• le document qui sert de contenant est rédigé en HTML,
• l'apparence de la page est définie avec du code CSS,
• le dessin du graphique se fait en utilisant le langage SVG y
• La lecture des données du serveur et l'affichage des graphiques sont programmés dans JavaScript

Tous les éléments, notamment le code HTML de la page, peut être généré sur le serveur avec PHP comme expliqué dans l'article sur le Langage de programmation PHP de la série sur stockage de données à partir d'appareils connectés à l'Internet des objets.

Le code CSS y JavaScript peut être chargé (importé) dans le code HTML au lieu d'être écrit directement dans le cadre du document HTML. Cela présente l'avantage de pouvoir réutiliser les mêmes documents sur plusieurs pages et de pouvoir les éditer plus confortablement ; mais peut-être l'inconvénient de mettre un peu plus de temps à charger selon que l'on peut utiliser le code contenu dans le cache (chargé lors d'une utilisation précédente) ou même un CAN. En phase de production, il est trivial d'intégrer tout le code de PHP, générant un seul document dans HTML avec toutes les informations si vous choisissez cette alternative. Tout au long de cette série d’articles, par souci de clarté, il est considéré que nous travaillons avec des documents distincts.

Aux fins qui nous intéressent, l'utiliser comme conteneur graphique, et très grossièrement, le contenu du premier niveau de la structure d'un document HTML serieuse:

La première ligne sert à indiquer au navigateur Web que le document qu'il lit est écrit en HTML, plus précisément dans la version 5 (appelée HTML5). Les versions précédentes de HTML, basé sur SGML (Standard Generalized Markup Language), comprenait une définition du type de document (DTD) dans lequel le type de règles utilisées dans le langage pour décrire le document a été déclaré.

La deuxième et dernière ligne contiennent le code HTML parmi les directives <html> y </html> qui fonctionnent respectivement comme ouverture et fermeture. Les directives HTML Ils enserrent le nom et les attributs entre les signes « inférieur à » et « supérieur à » formant une sorte de signes « parenthèse aiguë ». Les éléments HTML qui entourent le contenu ont une directive de fermeture qui inclut la barre oblique devant le nom comme dans </html>.

Les propriétés ou attributs des éléments sont séparés par des espaces du nom et les uns des autres et sont exprimés sous forme de texte brut ou, plus fréquemment, sous forme de texte (le nom de la propriété) suivi d'un signe égal et d'une valeur entre guillemets. Dans le cas de la directive d'ouverture de code HTML la propriété a été utilisée lang avec le courage es, lang="es" pour indiquer que le texte du document HTML utilise la langue espagnole.

Un commentaire a été inclus après la directive d'ouverture du code HTML. Les commentaires dans HTML Ils peuvent occuper plusieurs lignes et utiliser le code comme signe d'ouverture <!-- et en guise de conclusion -->

Le code HTML Il est composé de deux blocs : l'en-tête <head> et le corps <body>. Le premier vise à informer sur le document lui-même, y compris les informations le concernant (méta-informations) et le second est à soutenir le contenu du document.

Dans la directive <body> un événement a été inclus onload avec lequel exécuter automatiquement une fonction JavaScript une fois le contenu chargé. Cette ressource permet de démarrer l'exécution du code qui définira les objets graphiques et de les mettre à jour au fur et à mesure du chargement des informations depuis le serveur sur l'état des capteurs qui représentent ces graphiques.

De toutes les métainformations pouvant être incluses dans l’en-tête du document HTML, nous sommes particulièrement intéressés à connaître celui décrit par les directives suivantes :

• <title> qui sert à donner un titre au document. Il apparaîtra normalement dans la fenêtre du navigateur ou sur l'onglet correspondant et nous aidera à identifier les graphiques qu'il contient.
• <charset> déclare le jeu de caractères utilisé pour coder le document. C'est particulièrement important pour les signes « spéciaux » tels que les eñes ou les accents.
• <link> permet d'établir une relation entre le document HTML actuels et autres externes. Cela nous aidera à charger la feuille de style au format CSS avec l'apparition du document.
• <script> contient un script avec du code exécutable. En utilisant cette directive nous allons charger les fonctions JavaScript avec lequel générer ou modifier des graphiques SVG.

Comme on peut le voir dans l'exemple de HTML ci-dessus, le nom (et le chemin, le cas échéant) du document avec le style CSS est indiqué par l'attribut href, tandis que dans le cas du code JavaScript S'utilise src. Les deux actionnaires type avec le courage text/css y text/javascript respectivement.

Par rapport au contenu du document, la partie qui correspond à l'élément <body>, HTML5 Il permet de créer des structures spécifiques pour les composants les plus fréquents sur une page web comme un pied de page, une section latérale ou une barre de navigation, mais ce qui nous intéresse c'est d'utiliser le document comme conteneur graphique. SVG sont les éléments <div> qui fonctionnent comme des blocs indépendants permettant de définir une structure hiérarchique en imbriquant certains <div> chez les autres.

Dans l'exemple précédent, un élément est utilisé <div> qui en contient deux autres. Cet exemple introduit deux propriétés très importantes pour l’usage que l’on souhaite faire du code. HTML: id qui est utilisé pour attribuer un identifiant unique à un élément HTML (a <div>, dans ce cas) et class avec lequel on lui attribue une catégorie que nous utiliserons pour établir l'apparence. La catégorie, la classe, ne doit pas nécessairement être unique, en fait, une grande partie de son efficacité réside dans plusieurs éléments partageant le même aspect.

L'élément (ou la balise) <p> sert à définir un paragraphe qui contiendra normalement du texte (bien qu'en HTML il n'y a aucune limitation à cet égard). Pour effectuer des regroupements au sein d'un paragraphe (ou d'un <div>, il n'y a pas non plus de limitations) la balise est utilisée <span>. Avec cet élément, il est possible, par exemple, d'inclure du texte dans un paragraphe pour lui donner une apparence différente comme souligné ou gras.

La définition des caractéristiques graphiques et en général du comportement associé à un élément HTML L'attribution d'une classe se fait dans le code CSS; dans le cas de l'exemple précédent du document aspecto.css.

Pour optimiser l’affectation des caractéristiques CSS il est possible que le même élément HTML appartient à plusieurs classes et a donc l'apparence ou le comportement défini par celles-ci. Pour réaliser cette affectation, écrivez les noms des différentes classes en les séparant par des virgules à droite de la propriété. class

Dans l'exemple précédent, l'élément <div> qui a été identifié comme primer_hijo Trois classes ont été assignées : aspecto_de_hijo, aspecto_raro y tipografia_grande, qui sont censés définir ensemble l’apparence et le comportement de l’élément. Comme expliqué dans l'article suivant sur Définition de l'apparence Web des graphiques des capteurs IoT avec CSS, lors de l'utilisation de plusieurs classes, si l'une des propriétés qui définissent l'aspect est définie dans les deux, la dernière référencée prévaut.

Comme on l'a vu, les éléments <div> Ils peuvent contenir d'autres éléments, notamment d'autres <div>. Un cas plus simple serait <div> qui contenait du texte. Le look qui définit le style CSS affecterait également le texte contenu dans l’élément.

Pour optimiser l’affectation des caractéristiques CSS il est possible que le même élément HTML appartient à plusieurs classes et a donc l'apparence ou le comportement défini par celles-ci. Pour réaliser cette affectation, écrivez les noms des différentes classes en les séparant par des virgules à droite de la propriété. class

Dans l'exemple précédent, les trois classes associées au <div> primer_hijo Ils définiraient l'apparence de l'élément et du texte qui le contient, par exemple en rendant la police utilisée pour l'écrire grande (si le but indiqué par son nom dans la dernière classe est vrai)

Depuis la version 5 (HTML5) il est possible d'inclure le code graphique au format SVG dans le code lui-même HTML comme un élément supplémentaire. Du point de vue du code HTML, le contenu SVG c'est un élément <svg> qui contient les différents éléments graphiques (lignes, cercles, rectangles...)

Bien qu'il ait été dit que les caractéristiques graphiques des éléments HTML sont définis dans un style CSS et y sont associés via une classe, il est également possible d'en affecter certains directement aux éléments de deux manières. D'une part, vous pouvez utiliser la propriété style et attribuer les différentes caractéristiques graphiques de l'objet comme valeur. Logiquement, il est préférable d'utiliser la technique précitée d'affectation de l'aspect à une classe, mais avec cette possibilité on peut ajouter une petite correction à un élément (une exception très particulière) sans avoir à créer une nouvelle classe.

En revanche, certains éléments HTML Ils permettent d'utiliser des propriétés spécifiques qui définissent leur apparence. En général, même si ces propriétés existent, il est préférable d'utiliser des classes mais, malheureusement, tous les éléments n'offrent pas cette alternative, certains s'attendent à ce qu'une certaine valeur soit indiquée directement avec ces propriétés spécifiques au lieu de faire référence à la classe associée. L'un des éléments qui ont ce type de comportement est précisément le code SVG, auquel il faut attribuer la valeur en pourcentage de la largeur et de la hauteur dans les propriétés width y height, respectivement, au lieu de la classe.

Comme on le verra plus en détail dans le article qui parle du code SVG, afin d'utiliser la méthode simple proposée, il convient de considérer les dimensions du graphique en pourcentages. Dans le cas de la taille totale de l'objet, en indiquant 100% dans la valeur de largeur et de hauteur, ce sera le conteneur qui fixera les dimensions finales (la <div> avec id="dibujo", dans l'exemple précédent)

Dans le cas des différentes composantes du graphique SVG (lignes, cercles, rectangles...), sont inclus dans une zone qui mesure 100×100 (n'importe quelle unité) et s'étendent en forme rectangulaire sans conserver les proportions. Les propriétés viewBox y preserveAspectRatio de l'élément SVG Ils sont responsables de l’établissement de ces valeurs. dans le premier cas avec une vue rectangulaire qui va du point de coordonnées (0,0) au point de coordonnées (100,100) et s'exprime comme "0 0 100 100" et dans le second avec la valeur none.

Avec tout ce qui précède, vous pouvez désormais définir un code complet qui servirait de conteneur graphique. SVG généré ou modifié à partir de JavaScript. L'exemple ci-dessous contient quatre blocs graphiques qui utilisent le format HTML de la proposition de représentation que nous allons utiliser.

Ci-dessous, vous pouvez voir à quoi ressemblerait le code précédent, formaté avec le style CSS correspondant, générant avec JavaScript les graphismes SVG avec des lectures sur serveur des données stockées par des capteurs connectés à l’IoT. Sauf que les données ne sont pas chargées depuis le serveur mais sont générées aléatoirement dans le client (votre navigateur), le reste du code est ce qui sera utilisé dans la proposition définie dans cette série d'articles.

Le prochain article de cette série explique comment définir les styles CSS pour donner une apparence au code HTML qui fait office de conteneur pour les graphiques SVG avec lequel représenter l'état des capteurs connectés à l'Internet des objets (IoT).