Fermer

mai 8, 2019

Composants de page Web SVG pour IoT et Makers (Partie 1)21 minutes de lecture



L'IoT comprend de plus en plus de périphériques dotés de nombreux propriétaires. Les développeurs Web seront confrontés au problème de la recherche de moyens permettant aux propriétaires d’interagir avec leurs appareils. Mais, ce problème suscite beaucoup d’affaires. Explorons certains aspects du développement de pages Web pour l’Internet des objets (IoT) déjà demandés.

Le marché de l’IoT en est encore à ses débuts, mais il est en train de prendre de la vitesse. Nous sommes à l'aube de l'histoire de l'IdO. Les marchés quadruplent au cours des cinq dernières années, de 2015 à 2020. Pour les développeurs Web, cette croissance de l'IdO est significative. Il existe déjà une forte demande pour les techniques Web IoT.

De nombreux périphériques seront répartis géographiquement, et leurs propriétaires désireront un contrôle et une gestion à distance. Des piles Web complètes doivent être créées pour créer des canaux de téléopération. En outre, l'interaction se fera avec un ou plusieurs périphériques IoT à la fois. L'interaction doit être en temps réel du monde physique.

Cette discussion se penche sur les exigences d'interface utilisant Vue.js en tant que catalyseur et illustre une méthode de page Web permettant de communiquer avec de nombreuses substitutions.

Voici quelques-uns des objectifs planifiés pour cette discussion:

  1. Créer une application Web SPWA d'une seule page hébergeant des groupes d'interfaces homme-machine IoT (on peut appeler ces «groupes de panneaux»);
  2. Afficher les listes de identifiants de groupe de panneaux résultant de l'interrogation d'un serveur;
  3. Afficher les panneaux d'un groupe sélectionné à la suite d'une requête;
  4. Vérifiez que l'affichage des panneaux est chargé paresseusement et s'anime rapidement;
  5. Assurez-vous que les panneaux synchroniser avec les appareils IoT.

IoT et la croissance rapide des pages Web

La présentation de graphiques pour la visualisation et le contrôle à distance du matériel ainsi que la synchronisation de pages Web avec des processus physiques en temps réel relèvent du domaine de la page Web. La résolution de problèmes inhérente à cet avenir IoT.

Nous sommes nombreux à rechercher des techniques de présentation IoT, mais il existe quelques standards Web ainsi que quelques techniques de présentation que nous pouvons commencer à utiliser maintenant. Si nous explorons ensemble ces normes et techniques, nous pourrons rejoindre cette vague IoT.

Les tableaux de bord et la visualisation de données sont en demande. De plus, la demande d'aller au-delà des pages Web qui fournissent des formulaires, des listes d'affichage ou du contenu textuel est forte. Les tableaux de bord pour l'IoT doivent être pictographiques, animés. Les animations doivent être synchronisées avec les processus physiques en temps réel afin de fournir aux utilisateurs une vue véridique de l'état de la machine. L'état de la machine, tel qu'une flamme qui brûle ou non, l'emporte sur l'état de l'application et fournit des informations cruciales aux opérateurs, voire des informations de sécurité.

Les tableaux de bord nécessitent plus que la visualisation des données. Nous devons garder à l'esprit que la partie de de l'IdO est constituée d'appareils qui ont non seulement des capteurs mais également des interfaces de contrôle. Dans les implémentations matérielles, les MCU sont étendues avec des commutateurs, des commutateurs de seuil, des paramètres, etc. Néanmoins, les pages Web peuvent prendre la place de ces composants de contrôle matériel .

Rien de nouveau. Les interfaces informatiques pour le matériel informatique existent depuis longtemps, mais la croissance rapide de l'utilisation de pages Web pour ces interfaces fait partie de notre expérience actuelle. WebRTC et Speech API sont sur une voie de développement qui a débuté en 2012. WebSockets s'est développé dans le même laps de temps.

L'IoT a été dans notre esprits depuis longtemps. L'IoT fait partie du dialogue humain depuis 1832. Mais, IoT et le sans fil, comme nous venons de le savoir, ont été imaginés par Tesla vers 1926. Forbes 2018 State of Iot nous dit la orientation actuelle du marché pour l'IoT. Cet article présente un intérêt pour les développeurs Web:

«Les utilisateurs ou les utilisateurs précoces de l'IoT hiérarchisent les tableaux de bord, les rapports et les cas d'utilisation de l'IdO qui fournissent des flux de données intégrés à l'analyse, à la visualisation avancée et à l'exploration de données».

le marché est énorme. Cet article Taille du marché donne une prévision du nombre d'appareils qui apparaîtront: 2018: 23,14 milliards ⇒ 2025: 75,44 milliards. Et, il tente de mettre un chiffre financier dessus: 2014: 2,99 milliards de dollars ⇒ 2020: 8,90 milliards de dollars. La demande en compétences IoT connaîtra la croissance la plus rapide: IoT in Demand .

Alors que nous développons des interfaces claires pour le contrôle et la surveillance des dispositifs, nous nous heurtons à un nouveau problème pour développer nos interfaces. Les nombreux milliards d'appareils appartiendront à de nombreuses personnes (ou organisations). En outre, chaque personne peut posséder un nombre illimité d'appareils. Certains dispositifs seront peut-être même partagés.

Les interfaces modernes conçues pour les commandes de machine ont souvent une structure bien définie, propre à une machine particulière ou à l'installation de quelques machines. Par exemple, dans une maison intelligente, un système haut de gamme aura un écran LCD avec des panneaux pour les appareils soigneusement placés. Cependant, à mesure que la version Web de l'IoT évoluera, il y aura un nombre indéterminé de panneaux pour un flux de périphériques dynamique et même mobile.

La gestion des panneaux pour les périphériques devient similaire à la gestion des connexions sociales sur des sites Web sociaux. 19659020] "Nos interfaces utilisateur devront gérer de manière dynamique le panneau en temps réel hautement animé qui doit être affiché à la fois pour chaque utilisateur."

Le tableau de bord est une application Web à page unique SPWA. Et, on peut imaginer une base de données de panels. Par conséquent, si un seul utilisateur souhaite accéder à un certain nombre de panneaux et de configurations pour ses périphériques éparpillés sur la planète, SPWA doit accéder aux composants de panneau à la demande. Les panneaux et certains des composants JavaScript associés devront être chargés paresseusement.

«Nos interfaces devront fonctionner avec des cadres de page Web permettant d'incorporer des liaisons de composants asynchrones sans réinitialiser leurs cadres.»

Utilisons Vue.js, WebSockets, MQTT et SVG font leur entrée sur le marché de l'IdO.

Lectures recommandées : Création d'une infographie interactive avec Vue.js

Architecture de haut niveau pour une application Web IoT

Lors de la conception de l'interface de la page Web IoT, plusieurs options sont toujours disponibles. Une option pourrait être de dédier une seule page à un seul périphérique. La page peut même être rendue côté serveur. Le serveur aurait pour tâche d'interroger le périphérique afin d'obtenir ses valeurs de capteur, puis de placer les valeurs aux emplacements appropriés de la chaîne HTML.

Nous sommes nombreux à connaître les outils permettant d'écrire des modèles HTML avec des marqueurs spéciaux qui indiquer où mettre des valeurs variables. Voir {{température}} dans un tel modèle nous indique, ainsi que le moteur de la vue de prendre la température demandée d'un périphérique et de remplacer le {{température}} symbole avec elle. Ainsi, après avoir attendu que le serveur interroge le périphérique, que le périphérique réponde, rende la page et affiche la page, l'utilisateur pourra enfin voir la température indiquée par le périphérique.

Pour cette page par architecture de périphérique, l'utilisateur peut alors souhaiter envoyer une commande à l'appareil. Pas de problème, il peut remplir un formulaire HTML et le soumettre. Le serveur peut même avoir une route juste pour le périphérique, ou peut-être un peu plus intelligemment, une route pour le type de périphérique et l'ID de périphérique. Le serveur traduirait alors les données de formulaire en un message à envoyer au périphérique, l'écrirait dans un gestionnaire de périphérique et attendrait un accusé de réception. Ensuite, le serveur peut enfin répondre à la requête de publication et dire à l'utilisateur que tout va bien pour le périphérique.

 Architecture de page Web permettant de traiter l'IdO comme un serveur de formulaires - à la recherche de quelque chose de mieux.
architecture pour traiter l'IdO en tant que serveur de formulaires – chercher quelque chose de mieux. ( Grand aperçu )

De nombreux CMS fonctionnent de cette manière pour mettre à jour les entrées de blog et autres. Rien ne semble étrange à ce sujet. Il semble que HTML sur HTTP ait toujours été conçu pour obtenir les pages rendues et pour envoyer les données de formulaire à gérer par le serveur Web. De plus, il existe des milliers de CMS parmi lesquels choisir. Ainsi, afin de mettre en place notre système IoT, il semble raisonnable de parcourir ces milliers de CMS afin de déterminer lequel convient le mieux. Ou bien, nous pourrions commencer par appliquer un filtre sur les CMS.

Nous devons tenir compte de la nature en temps réel de ce dont nous traitons. Ainsi, bien que le HTML dans sa forme originale convienne très bien à de nombreuses tâches d’entreprise, il a besoin d’un peu d’aide pour devenir le mécanisme de diffusion de la gestion IoT. Nous avons donc besoin d’un CMS ou d’un serveur Web personnalisé qui aide HTML à effectuer ce travail IoT. Nous pouvons également penser au serveur car nous supposons que CMS fournit les fonctionnalités du serveur. Nous devons simplement garder à l'esprit que le serveur doit fournir une animation basée sur les événements, de sorte que la page ne puisse pas être une impression statique finalisée à 100%.

Voici quelques paramètres susceptibles de guider les choix de notre page Web liée à un périphérique, choses à faire:

  1. Recevoir les données du capteur et d'autres messages d'état du périphérique de manière asynchrone ;
  2. Rendre les données du capteur de la page dans le client (presque corollaire à 1);
  3. Commande de publication vers un périphérique ou un groupe de périphériques de manière asynchrone ;
  4. Vous pouvez éventuellement envoyer des commandes via le serveur ou les contourner.
  5. Conservez en toute sécurité la relation de propriété entre le périphérique et l'utilisateur;
  6. Gestion du périphérique critique. ne pas interférer ou ne pas forcer le fonctionnement.

Cette liste nous vient à l’esprit lorsque l’on pense à une seule page agissant en tant qu’interface avec un périphérique sélectionné . Nous voulons pouvoir communiquer librement avec le périphérique en ce qui concerne les commandes et les données.

En ce qui concerne la page, il suffit de le demander une fois au serveur Web. Nous nous attendions à ce que le serveur Web (ou l'application associée) fournisse un chemin de communication sécurisé. Et le chemin ne doit pas nécessairement passer par le serveur, ou peut-être devrait-il éviter complètement le serveur car le serveur peut avoir des tâches plus prioritaires, autres que la communication d'une page pour les données provenant de capteurs.

peut imaginer que les données arrivent d'un capteur une fois par seconde, et nous ne nous attendons pas à ce que le serveur Web lui-même fournisse une seconde mise à jour constante pour des milliers de flux de capteurs individuels multipliés par des milliers de téléspectateurs. Bien sûr, un serveur Web peut être partitionné ou configuré dans un cadre d’équilibrage de charge, mais d’autres services sont personnalisés pour les commandes de remise de capteur et de marshaling au matériel.

Le serveur Web devra livrer un paquet afin que le Cette page peut établir des canaux de communication sécurisés avec le périphérique. Nous devons faire attention à l’envoi de messages sur des canaux qui ne permettent pas de gérer le type de messages qui passent. Il faut savoir si un périphérique se trouve dans un mode pouvant être interrompu ou si l'utilisateur peut demander à réagir si un périphérique est hors de contrôle. Ainsi, le serveur Web peut aider le client à obtenir les ressources appropriées pour en savoir plus sur le périphérique. La messagerie pourrait être faite avec quelque chose comme un serveur MQTT. De plus, certains services de préparation du serveur MQTT peuvent être lancés lorsque l'utilisateur accède à son panneau via le serveur Web.

En raison du monde physique avec ses exigences en temps réel et de considérations de sécurité supplémentaires, notre diagramme devient un peu différent de l'original.

 Une application à une seule page qui communique avec un MCU.
Une application à une seule page qui communique avec un MCU. Il interagit maintenant de manière asynchrone avec la MCU indépendamment du serveur de pages Web. ( Grand aperçu )

Nous n’arrivons pas à nous arrêter ici. Configurer une seule page par périphérique, même s’il est réactif et gère bien la communication, n’est pas ce que nous avions demandé. Nous devons supposer qu'un utilisateur va se connecter à son compte et accéder à son tableau de bord. À partir de là, il demandera une liste de projets de contenu (projets sur lesquels il travaille probablement). Chaque élément de la liste fera référence à un certain nombre de ressources. Lorsqu'il sélectionne un élément en cliquant ou en tapant dessus, il aura accès à un ensemble de panneaux, chacun d'entre eux contenant des informations sur une ressource ou un périphérique IoT particulier.

N'importe quel nombre de panneaux livrés en réponse à la requête générée. à la suite de l'action d'interface de l'utilisateur peuvent être ces panneaux qui interagissent avec des périphériques en direct. Ainsi, dès qu'un panneau apparaît, il doit afficher l'activité en temps réel et pouvoir envoyer une commande à un périphérique.

Le mode d'affichage des panneaux sur la page est une décision de conception. Il peut s’agir de fenêtres flottantes ou de boîtes sur un arrière-plan déroulant. Quoi qu’il en soit, les panneaux seront marqués par le temps, la température, la pression, la vitesse du vent ou tout ce que vous pouvez imaginer. Nous nous attendons à ce que les panneaux soient animés par rapport à diverses échelles graphiques. La température peut être présentée comme un thermomètre, la vitesse comme un indicateur de vitesse semi-circulaire, le son comme une forme d'onde en continu, etc.

Le serveur Web a pour tâche de fournir les bons panneaux au bon utilisateur, en répondant à une base de données de panneaux. et étant donné que les appareils doivent être physiquement disponibles. De plus, étant donné qu’il y aura de nombreux types d’appareils, les panneaux de chaque appareil seront probablement différents. Ainsi, le serveur Web devrait pouvoir fournir les informations pictographiques nécessaires au rendu d'un panneau. Cependant, la page HTML du tableau de bord ne doit pas nécessairement être chargée avec tous les panneaux possibles.

Voici quelques paramètres qui pourraient guider les choix de notre page de tableau de bord, comme il se doit:

  1. Présentez une manière de sélectionner des groupes de panneaux de périphériques associés;
  2. Utilisez des mécanismes de communication de périphérique simultanés pour un certain nombre de périphériques;
  3. Activez les panneaux de périphériques lorsque l'utilisateur le demande;
  4. Intégrez des graphiques chargés paresseux pour des conceptions de panneau uniques;
  5. Utilisez des jetons de sécurité et des paramètres en rapport avec
  6. Maintenez la synchronisation avec tous les périphériques contrôlés par l'utilisateur
 Une application à page unique qui communique avec plusieurs MCU de manière asynchrone et indépendante du serveur de pages Web.
Une application à page unique qui communique avec plusieurs MCU, de manière asynchrone et indépendante du serveur de pages Web. ( Grand aperçu )

On peut commencer à voir comment le jeu change, mais dans le monde de la conception de tableaux de bord, le jeu change un peu ici et là depuis un certain temps. Nous devons simplement nous limiter à des outils de développement de pages actualisés et utiles pour nous mettre en route.

Commençons par la façon dont nous pouvons rendre les panneaux. Cela semble déjà être un gros travail. Nous imaginons de nombreux types de panneaux. Mais, si vous utilisiez un logiciel audio de musique, vous verriez comment ils ont utilisé les graphiques pour que les panneaux ressemblent aux périphériques analogiques utilisés par les groupes d’il ya très longtemps. Tous les panneaux de DAW sont dessinés par les plugins qui fonctionnent sur le son. En fait, beaucoup de ces plugins DAW peuvent utiliser SVG pour afficher leurs interfaces. Nous nous limitons donc à la gestion des interfaces SVG, qui peuvent à leur tour être n'importe quel graphique imaginable.

Choix de SVG pour les panneaux

Bien sûr, j'aime les DAW et l'utiliserais par exemple, mais SVG est un site Web. page standard. SVG est une norme W3C. Il s’agit de transporter des dessins au trait sur les pages Web. SVG était un citoyen de seconde classe sur la page Web, obligé de vivre dans iFrames. Mais, depuis HTML5, c'est un citoyen de première classe. Peut-être, quand SVG2 sortira, qu'il sera capable d'utiliser des éléments de formulaire. Pour l'instant, les éléments de formulaire sont des objets étrangers en SVG. Mais cela ne devrait pas nous empêcher de faire de SVG le substrat des panneaux.

SVG peut être dessiné, stocké pour l'affichage et chargé paresseux. En fait, en explorant le système de composants, nous verrons que SVG peut être utilisé pour les modèles de composants. Dans cette discussion, nous allons utiliser Vue.js pour créer des composants pour les panneaux.

Il n'est pas difficile de dessiner en SVG, car il existe de nombreux programmes de dessin de lignes faciles à obtenir. Si vous dépensez de l'argent, vous pouvez avoir Adobe Illustrator, qui exporte du SVG. Inkscape fait partie de la création de fichiers SVG depuis un certain temps. Il est open source et fonctionne bien sous Linux, mais peut également être exécuté sur Mac et Windows. Ensuite, il existe plusieurs programmes d'édition de pages Web SVG open source, ainsi que certaines versions SaaS également.

Je cherchais un éditeur SVG Web open source. Après avoir regardé autour de moi, je suis tombé sur SVG-Edit . Vous pouvez l'inclure dans vos propres pages Web, peut-être si vous créez un blog basé sur SVG ou quelque chose de ce genre.

 Schéma électrique prêt pour l'animation au format SVG.
Un schéma électrique est assez détaillé, mais nous pouvons l'obtenir facilement dans SVG et animez-le avec juste un peu de code. ( Grand aperçu )

Lorsque vous enregistrez votre travail dans un fichier, SVG-Edit le télécharge dans votre navigateur et vous permet de le récupérer dans votre répertoire de téléchargement.

L'image que j'ai dessiné montre une porte ET contrôlant un intégrateur. Ce n’est pas ce à quoi on s’attend habituellement dans un panneau pour un MCU. Le panneau pourrait avoir un bouton pour alimenter l’une des entrées de la porte ET, par exemple. Ensuite, il pourrait avoir un affichage d'un ADC qui lit la sortie de l'intégrateur. Peut-être que ce sera un graphique en courbes sur un axe temporel. La plupart des panneaux auront des graphiques qui permettent à l'utilisateur de se rapporter à ce qui se passe à l'intérieur de la MCU. Et, si notre circuit doit vivre n'importe où, il se trouvera à l'intérieur de la MCU.

Néanmoins, notre schéma électronique peut être utilisé pour discuter d'animation. Ce que nous voulons faire, c'est jeter un coup d'œil au SVG et voir où nous pouvons trouver certaines des balises DOM que nous aimerions changer d'une manière ou d'une autre. Nous pouvons ensuite animer le SVG en utilisant un peu de JavaScript vanille et une minuterie. Faisons clignoter la porte AND dans différentes couleurs.

Le SVG que nous recherchons se trouve dans la boîte de code suivante. Cela n’a pas l’air très amical pour le programmeur, même si l’utilisateur sera très heureux. Néanmoins, il y a encore des pistes à suivre pour trouver quel élément du DOM nous souhaitons opérer. Premièrement, la plupart des outils de dessin SVG permettent d’obtenir des propriétés d’objet, en particulier l’attribut id . SVG-Edit a aussi un chemin. Dans l'éditeur, sélectionnez la porte AND et observez la barre d'outils. Vous verrez également un champ pour la classe id et la classe CSS .

Grand aperçu )

Si vous ne parvenez pas à accéder à un outil de montage pour une raison quelconque, vous pouvez ouvrir le fichier SVG dans un navigateur et inspecter le DOM. Dans tous les cas, nous avons constaté que notre porte avait id = “svg_1”.


 
   Couche 1 
  
  
  
  
  
  
  
  
   
   
   
   
   
   
   
   
   
   
   
  
 
 

Nous avons maintenant besoin d’un peu de JavaScript. Nous notons d’abord que l’attribut d’élément «fill» est présent. Ensuite, il y a juste le programme simple qui suit:


    
    

         

  

Notez que nous avons une page HTML minimale. Vous pouvez couper et coller le code dans votre éditeur préféré. Et n’oubliez pas de couper et coller le SVG pour remplacer le commentaire. Ma version de Chrome requiert que la page soit au format HTML pour que la section JavaScript soit disponible. Il s’agit donc d’un navigateur qui traite toujours SVG de manière distincte. Mais, nous sommes bien loin des jours