Cette année, le Père Noël est un peu en avance. Après vous avoir proposé la semaine dernière une version Web du VirtualHub, Yoctopuce vous propose aujourd'hui la version web de Yocto-Visualization, notre application si populaire qui permet de visualiser les données de capteurs Yoctopuce. Déballons votre cadeau ensemble, voulez-vous...
Pourquoi une version Web?
En fait, YoctoCloud, l'ancêtre de Yocto-Visualization est une application web. Ce n'est que plus tard qu'on a décidé de faire un équivalent natif. Mais à l'usage, on s'est rendu compte que même si elle rend bien service au quotidien, la version native de Yocto-Visualization n'est pas très pratique pour surveiller des expériences au long cours à moins de faire tourner le logiciel sur un ordinateur dédié à l'expérience en question. Alors, on a eu l'idée de faire une version web qui puisse être installée directement sur un Hub Yoctopuce. On avait exploré ce principe il y a quelques années, mais cette fois, on a mis les petits plats dans les grands.
Yocto-Visualization dans votre navigateur web, ça vous dit?
Installation
Yocto-Visualization (for web) peut être installé sur tous les types de hubs Yoctopuce: le YoctoHub-Ethernet, les Yoctohub-Wireless, le VirtualHub et surtout VirtualHub (for web). En théorie, ça marche aussi sur les Yoctohub-GSM, mais ce n'est pas très utile à moins de pouvoir établir des connexions entrantes vers le Yoctohub-GSM, ce qui n'est pas donné a tout le monde.
Il y a plusieurs façons d'installer Yocto-Visualization (for web) sur le hub de votre choix.
Methode 1, l'installeur en ligne pour Yocto-Visualization (for web)
Si vous souhaitez installer Yocto-Visualization (for web) sur un VirtualHub (for web). Vous pouvez tout simplement utiliser l'installeur ci-dessous. Vous avez juste besoin de connaître l'adresse de votre VirtualHub et le chemin de l'instance sur laquelle vous souhaitez faire l'installation. Notez qu'une fois lancé, cet installeur fonctionne de manière autonome sans interaction avec nos serveurs. En d'autres termes, les mots de passe que vous pourriez avoir à entrer pendant l'installation ne transiteront pas par les serveurs Yoctopuce.
Ceci n'est pas une capture d'écran, vous pouvez vraiment l'utiliser
Vous trouverez le même installeur sur notre page "Utilitaires" dans la section Yocto-Visualization (for web).
A moins que vous n'ayez un navigateur web configuré pour accepter de travailler avec des "mixed contents", il y a peu de chances que l'installeur ci-dessus fonctionne avec un YoctoHub-Ethernet, un Yoctohub-Wireless ou encore un VirtualHub V1 natif, parce que ces derniers ne fonctionnent qu'en HTTP.
Methode 2, via l'interface des hubs
Si vous avez un YoctoHub ou un Virtualhub qui respecte les trois conditions suivantes:
- La version du firmware est au moins 52200,
- L'interface réseau du hub est connectée
- Le hub, ou le VirtualHub utilisé pour y accéder, a la possibilité de se connecter sur www.yoctopuce.com pour télécharger l'installeur
Alors vous trouverez dans l'interface de configuration du hub un bouton pour lancer l'installeur.
Sous certaines conditions, l'interface des hubs présente un bouton pour lancer l'installeur
Methode 3, l'installeur hors ligne
Assurez-vous au préalable que Node.js est installé sur votre machine, c'est indispensable. Téléchargez les sources de Yocto-Visualization (for web) depuis notre page "utilitaires", décompressez le fichier .zip dans le répertoire de votre choix, placez-vous dans ce répertoire, tapez la commande suivante
npm run installer
Cette commande crée un petit serveur web temporaire qui sert le fichier de l'installeur puis ouvre un navigateur web sur cet installeur.
Methode 4, tester hors ligne
Si vous voulez juste voir à quoi ressemble Yocto-Visualization (for web) sans l'installer sur un de vos hubs, c'est tout à fait possible: téléchargez et décompressez l'archive comme décrit à la méthode 3 et utilisez la commande suivante:
npm run app-server
Cette fois, cette commande crée un petit serveur web temporaire qui sert une instance de Yocto-Visualization (for web) de puis ouvre un navigateur web dessus.
Utilisation
Si vous avez l'habitude d'utiliser la version native de Yocto-Visualization, vous n'aurez aucun mal à retrouver vos marques. Si au contraire, vous n'aviez jamais entendu parler de Yocto-Visualization jusqu'ici, vous devriez arriver à vous en sortir: l'interface est censée être intuitive. Dans le pire des cas, la documentation pour la version native se trouve ici.
Par défaut, le hub sur lequel est installé Yocto-Visualization (for web) est présent dans la liste des hubs de la configuration globale, mais vous pouvez bien sûr en rajouter d'autres. Rappelez-vous simplement que pour que ça marche, les hubs ajoutés doivent être accessibles depuis votre navigateur web, Yocto-Visualization (for web) tourne dans votre navigateur, pas sur le serveur qui sert le fichier de l'application.
Tous les hubs de la configuration doivent être accessibles depuis le navigateur web qui fait tourner Yocto-Visualization (for web)
Votre propre cloud, pour pas un sou
Pour peu que vous disposiez d'un hébergement PHP et que vous combiniez Yocto-Visualization (for web) avec VirtualHub (for web) vous obtiendrez, grâce à l'émulation du datalogger du VirtualHub (for web), votre propre cloud gratuit de stockage et de visualisation de données issues de capteurs Yoctopuce. Tout ce que vous avez à faire, c'est:
- Installer VirtualHub (for web) sur votre hébergement PHP et créer une instance
- Configurer vos hub locaux pour qu'ils fassent un callback sur votre instance
- Installer Yocto-Visualization (for web) sur cette même instance de VirtualHub (for web)
- Configurer les graphes de Yocto-Visualization (for web) pour qu'ils utilisent les données des datalogger.
A partir de là, vous pourrez afficher les données provenant de capteurs Yoctopuce connectés à n'importe quel hub capable de faire un callback, c'est-à-dire le VirtualHub, le YoctoHub-Ethernet, les Yoctohub-Wireless et les Yoctohub-GSM.
Notez qu'en plus d'être accessible depuis n'importe où, l'intérêt de cette architecture est que l'émulation du datalogger fourni par VirtuaHub (for web) est bien plus rapide que leur version physique. Du coup, le contenu des graphes se charge bien plus rapidement.
Compatibilité et limitations
Maintenant qu'on a bien frimé, parlons des points qui peuvent fâcher.
Navigateurs compatibles
Vous devez utiliser un navigateur récent, plus exactement un navigateur qui supporte les Modules ecmascript. En gros si la version de votre navigateur date d'après 2018, ça devrait marcher. Sauf si... vous utilisez Safari, sur ce navigateur Yocto-Visualization (for web) ne marche pas du tout et la raison reste un grand mystère.
Évidement, ça laisse sur la touche les gens qui utilisent des vieux navigateurs sur des vieux OS comme Windows XP 32bits. On se sent un peu désolés pour eux, mais on avait vraiment besoin des fonctionnalités d'un navigateur moderne pour que ce projet ait une chance d'aboutir.
Limitations
La version native est une application multi-fenêtres qui contiennent chacune un afficheur. Dans la version Web, vous pouvez toujours avoir autant d'afficheurs que vous le désirez, mais ils restent cantonnés à la même fenêtre: celle du navigateur.
La version web est largement aussi réactive que la version native, mais les navigateurs ayant tendance à sévèrement ralentir les pages qui ne sont pas directement visibles, soit que le navigateur soit minimisé soit qu'il soit ouvert sur un autre onglet; il est possible que les graphes présentent des défauts de rendu si la page web qui les contient est restée cachée pendant un moment.
Vous aurez peut-être à mettre à jour le firmware de vos YoctoHubs: Yocto-Visualization (for web) a besoin au minimum de la version 43805 pour fonctionner correctement.
Les mêmes limitations que la version native s'appliquent: Yocto-Visualization (for web) est basé sur la classe YSensor, seuls les capteurs sont supportés, il n'est pas possible d'afficher l'état d'actuateurs.
Conclusion
Cette semaine, on a abordé les principaux points qui vous permettront de faire vos premiers pas avec Yocto-Visualization (for web). Mais cette nouvelle application Yoctopuce ne se contente pas d'imiter le comportement de la version native, il y a d'autres utilisations possibles... Vous trouverez plus de détails dans les liens ci dessous.
- Le mode d'emploi de la version native.
- Comparaison entre la version web et la version native.
- Intégration de votre propre page web dans Yocto-Visualization (for web).
- Intéger Yocto-Visualization (for web) dans votre propre page web
- Page web, Yocto-Visualization et actuateurs