Nouveau: Yocto-Visualization (for web)

Nouveau: Yocto-Visualization (for web)

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?
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
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)
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:

  1. Installer VirtualHub (for web) sur votre hébergement PHP et créer une instance
  2. Configurer vos hub locaux pour qu'ils fassent un callback sur votre instance
  3. Installer Yocto-Visualization (for web) sur cette même instance de VirtualHub (for web)
  4. 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.


Commenter 2 commentaires Retour au blog



1 - francknos Lundi 24 juin 2024 18H10

I have tried to use Yocto-Visualization (for web) but I can't see anything on :
script type="module"

Only grey area.
It works well with classic Yocto-Visualization.

Some help ?

2 - martinm (Yocto-Team)Mardi 25 juin 2024 4H52

@francknos : Your problem description is a bit vague. Contact support directly, it will make it easier to diagnose.

Yoctopuce, get your stuff connected.