Il y a quelques semaines, on vous a montré comment faire une petite WebApp de contrôle à distance d'un chauffage à l'aide d'un simple fichier HTML et de quelques dizaines de lignes de code TypeScript, grâce à VirtualHub for Web. Cette semaine, nous allons voir comment l'améliorer en y ajoutant un graphique qui montre l'historique des températures mesurées.
Si nous devions coder entièrement pour cet article la création d'un graphique à partir des données enregistrées, avec la possibilité de zoomer, scroller, etc, ce ne serait pas une mince affaire. Heureusement, Yoctopuce met à disposition une application écrite en TypeScript qui permet de faire exactement cela: Yocto-Visualization for Web. De plus, elle a été conçue pour pouvoir être facilement intégrée dans une autre application, sous forme de module EcmaScript. Voyons comment faire...
Intégration de Yocto-Visualization for Web
Pour intégrer Yocto-Visualization for Web à notre Web App, il faut lui préparer une div dédiée dans laquelle il affichera le graphique, et d'indiquer l'id de cette div dans la configuration du graphe. Cette div doit impérativement utiliser un positionnement de type absolute ou relative. Dans notre cas, nous voulons afficher un seul graphique qui s'insère dans le flot de l'application, donc on utilise la solution relative, avec une hauteur fixe. On alloue 100% de la largeur à la div, pour permettre au graphique de s'adapter naturellement à la taille de l'écran. Les marges gauche et droite seront définies au niveau de la configuration du graphique. Voici donc le style que nous appliquons à cette div:
display: block;
position: relative;
width: 100%;
height: 400px;
}
Le code qui lance Yocto-Visualization for Web tient en une fonction de quelques lignes:
- On charge depuis le serveur la configuration du graphique, qu'on a choisi de stocker dans un fichier XML séparé pour pouvoir être modifiée facilement si nécessaire.
- On appelle la méthode YWebPage.run() qui gèrera de manière autonome le chargement des données et leur affichage.
- Seule petite subtilité: comme nous avons choisi, dans la configuration du graphique, de définir sa taille relativement à la div pour que le graphique occupe toute la largeur de la fenêtre, nous envoyons un événement resize au démarrage, pour forcer Yocto-Visualization for Web à calculer sa taille initiale.
Voici ce que cela donne en TypeScript:
async function startYoctoVisualization4web(): Promise<boolean>
{
let configXml = await fetch('config.xml');
if (!configXml.ok) {
return false;
}
YWebPage.run(await configXml.text());
// trigger a resize event to force a graph refresh
setTimeout(window.dispatchEvent, 100, new Event("resize"));
return true;
}
Sur le principe, c'est tout ce qui est nécessaire pour que Yocto-Visualization for Web fonctionne entièrement à l'intérieur d'une WebApp en TypeScript, et obtenir une interface très conviviale comme ci-dessous:
Notre WebApp intégrant Yocto-Visualization for Web
Vous trouverez le projet complet, y compris les outils nécessaires à le constuire, sur notre repository d'exemples GitHub.
Pour ceux qui souhaitent en savoir plus, voyons d'où proviennent les différents fichiers de ce projet...
Les librairies TypeScript précompilées
Pour ne pas devoir dupliquer tous les fichiers sources de Yocto-Visualization for Web dans ce projet, ce qui aurait compliqué sa structure, nous avons choisi d'intégrer directement le bundle monolithique précompilé en JavaScript, que l'on trouve dans le répertoire dist/es2017 du repository de Yocto-Visualization for Web. Comme nous n'avons besoin que de l'interface de consultation du graphique, et pas des fonctions de modification, nous avons utilisé le fichier yv4web-readonly.js. L'ajout du fichier de prototypes correspondant, yv4web-readonly.d.ts, permet au compilateur TypeScript et à l'éditeur de valider le typage des arguments.
Pour commuter le relais, nous avons besoin de la librairie Yoctopuce. Comme la librairie de base est déjà présente dans le bundle de Yocto-Visualization for Web, nous allons l'importer de cet endroit plutôt que de l'inclure à double. Pour cela, nous créons un fichier d'import yocto_api.js un peu factice, qui se contente de réexporter tout le contenu de yv4web-readonly.js:
// This will export a bit more than the original yocto_api.js, but it won't hurt
export * from './yv4web-readonly.js';
Il nous reste à ajouter le fichier de la librairie Yoctopuce spécifique à la commutation de relais. Nous l'intégrons aussi à notre projet directement sous forme précompilée en JavaScript, telle que vous la trouverez dans le répertoire dist/esm de la librairie TypeScript, avec là aussi le fichier yocto_relay.d.ts permettant au compilateur TypeScript et à l'éditeur de valider le typage des arguments.
Le fichier XML de configuration du graphique
Vous pouvez bien sûr partir du fichier config.xml de notre projet et modifier les paramètres selon vos besoins. Vous devrez au minimum changer le numéro de série correspondant au capteur que vous voulez afficher. Si vous préférez recréer une configuration complète de Yocto-Visualization for Web à l'aide de l'interface interactive, c'est aussi possible. La manière la plus simple consiste à charger l'archive .zip de Yocto-Visualization for Web à l'aide du lien figurant sur notre page Outils et de lancer la commande:
Cela lancera l'interface de Yocto-Visualization for Web dans une nouvelle fenêtre de navigateur. Configurez votre graphique comme vous le souhaitez, puis choisissez l'option du menu contextuel. A la place d'être véritablement sauvée, la configuration XML sera affichée dans la fenêtre du navigateur, de sorte à vous permettre de la copier-coller. Notez que le code XML contiendra toutes les clés supportées par Yocto-Visualization for Web. Il n'est donc pas aussi lisible que celui que nous fournissons en exemple dans ce projet, mais vous pouvez sans risque supprimer toutes les clés correspondant à des paramètres que vous n'utilisez pas.
Important: veillez à supprimer complètement la section <Hubs> du fichier de configuration XML, afin de ne pas y laisser de mot de passe. La définition des hubs n'est pas nécessaire dans notre cas d'utilisation, car notre programme principal en TypeScript fait lui-même l'appel à YAPI.RegisterHub(), en utilisant le mot de passe saisi directement par l'utilisateur.
Compiler et installer le projet
Le projet d'exemple que nous avons mis à votre disposition sur GitHub comprend un fichier package.json qui permet d'exécuter les quelques commandes suivantes:
- npm install, pour installer le compilateur TypeScript, si vous ne l'avez pas déjà installé globalement
- npm run build, pour construire le bundle minimisé app.min.js qui contient l'ensemble du code TypeScript transpilé, aussi bien celui spécifique à l'application que les modules importés.
- npm run app-server, pour tester l'application en local: la commande lance un petit serveur Web dont vous trouverez le code dans app-server.ts, puis ouvre une fenêtre de navigateur permettant de tester l'interface web sans devoir transférer les fichiers sur votre véritable serveur Web
Une fois que l'interface correspond à vos voeux, il ne vous reste plus qu'à copier sur un serveur Web public les trois fichiers suivant:
- app.html
- app.min.js
- config.xml
Petit détail intéressant: cette application n'a pas besoin d'être hébergée sur le même serveur que VirtualHub for Web. Si le serveur qui héberge ces trois fichiers et le serveur VirtualHub for Web supportent le protocole https://, le navigateur acceptera d'effectuer les requêtes triangulaires (cross-origin), car VirtualHub for Web fournit toutes les entêtes d'autorisation CORS nécessaires à ce type de fonctionnement.
