Les produits Yoctopuce permettent - entre autres - de contrôler un appareil à distance, à travers Internet. La particularité de la solution Yoctopuce est qu'elle n'est pas basée sur une infrastructure propriétaire, qui pourrait s'arrêter d'un jour à l'autre et rendre tous ces systèmes inopérants, comme cela s'est déjà produit bien trop souvent. Yoctopuce propose des outils de contrôle à distance que vous êtes libres d'installer chez l'hébergeur de votre choix, et que vous pourrez déplacer chez un autre hébergeur dans quelques années si besoin...
L'élément clé pour piloter les modules Yoctopuce à travers Internet est le système de callbacks HTTP, par lesquels un YoctoHub-Ethernet ou un YoctoHub-GSM-4G par exemple vont se connecter sur un serveur PHP pour y recevoir des ordres.
Nous avions illustré il y a quelques années ce fonctionnement avec un exemple d'application Web pour allumer un chauffage à distance, utilisant notre librairie PHP en mode callback HTTP. Le prix à payer pour ne pas dépendre d'un serveur Cloud propriétaire était de devoir créer un petit programme en PHP qui gère l'intéraction différée entre les commandes envoyées par l'utilisateur et la transmission aux modules Yoctopuce,. Même si nous fournissions un code d'exemple, sa mise en production exigeait des connaissances de programmation en PHP.
Entre temps, Yoctopuce a mis à disposition un nouvel outil qui facilite l'utilisation de modules à travers les callbacks HTTP: VirtualHub for Web. Une fois installé sur n'importe quel serveur PHP public, ce logiciel permet de voir et d'intéragir avec des modules Yoctopuce connectés au serveur par un callback HTTP presque comme s'ils étaient connectés en direct:
L'interface de VirtualHub (for web)
Ce qui est intéressant, c'est qu'il ne s'agit pas seulement d'une interface Web: VirtualHub for Web est aussi utilisable pour piloter les modules Yoctopuce à l'aide de nos librairies de programmation, comme si c'était un hub local. On peut donc écrire une petite WebApp en HTML/JavaScript (ou autres variantes comme TypeScript, JSX, etc.) pour offrir une interface conviviale permettant de piloter à distance des modules Yoctopuce.
A titre d'exemple, nous allons revisiter l'exemple cité précédemment pour allumer à distance un chauffage, et en faire une version plus moderne en HTML et TypeScript.
Le corps de la page HTML est trivial. Par rapport à la version originale en PHP qui comptait sur le mécanisme d'authentification du serveur Web, cette version inclut une interface pour demander le mot de passe du système, indispensable pour établir une connexion avec VirtualHub for Web. L'interface principale n'est pas visible tant que le mot de passe n'est pas vérifié, car les boutons ne fonctionneraient de toute manière pas.
<h2>Remote heating control</h2>
<div id="status">Enter password</div>
<div id="auth">
<input type="password" id="pwd" onchange="login()">
<input type="button" value="Connect"/>
</div>
<div id="ui" style="display: none;">
<input type="button" value="Turn on for 2 days" onclick="switchOn(48)"/>
<input type="button" value="Turn on for 1 day" onclick="switchOn(24)"/>
<input type="button" value="⏻ Turn off" onclick="switchOn(0)"/>
</div>
</div>
Le fenêtre de connexion
Le code qui gère le login est très générique: il essaie simplement d'établir une connexion avec VirtualHub for Web à l'aide de la fonction RegisterHub, et change la <div> affichée une fois que la connexion est établie avec succès.
{
await YAPI.LogUnhandledPromiseRejections();
await YAPI.DisableExceptions();
// Connect to VirtualHub for Web instance and locate the heating relay
let pwd: string = (<HTMLInputElement>wdg('pwd')).value;
let vhub: string = location.host + '/virtualhub-for-web/heating';
let url: string = `https://admin:${pwd}@${vhub}`;
let errmsg: YErrorMsg = new YErrorMsg();
if(await YAPI.RegisterHub(url, errmsg) != YAPI.SUCCESS) {
setStatus('Error: '+errmsg.msg);
return;
}
(<HTMLElement>wdg('auth')).style.display = 'none';
(<HTMLElement>wdg('ui')).style.display = '';
};
Le code d'initialisation spécifique à l'application est trivial: on recherche simplement un relai qui porte un nom logique donné, pour s'assurer que le système est bien opérationnel, et on déclenche une mise à jour périodique du statut.
if(!await HeatingRelay.isOnline()) {
setStatus('Relay not found');
return;
}
setTimeout(updateStatus, 100);
La partie plus intéressante est celle qui est spécifique à l'application de commutation: le callback switchOn. Cette fonction va simplement demander au relai de commuter en position active pour la durée spécifiée (en heures), ou de basculer en position inactive si le paramètre est nul. Comme la commutation n'est pas immédiate - elle n'aura lieu que lors du prochain callback HTTP par le hub - on met un message d'information pour l'utilisateur. Le message sera automatiquement remplacé par l'état transmis par le relai dès le prochain callback HTTP.
{
if(nHours) {
// pulse requires a duration in [ms]
await HeatingRelay.pulse(nHours * 3600 * 1000);
} else {
await HeatingRelay.set_output(YRelay.OUTPUT_OFF);
if(!prevCount) return; // no change expected
}
setStatus('<span class="wait">⏳</span>Sending command...');
};
Vous trouverez les fichiers sources complets pour ce projet, y compris le code de la fonction updateStatus qui récupère le délai restant annoncé par le relai et l'affiche sous la forme jours-heures-minutes, parmis les exemples HTML de notre librairie TypeScript, dans le répertoire Prog-VHub4Web. Si vous lancez npm run build dans ce répertoire, vous obtiendrez un fichier app.min.js qui est l'équivalent minifié du code de l'application TypeScript, y compris les classes nécessaires de la librairie Yoctopuce. Il suffit de le copier aux côtés du fichier bundled.html dans le répertoire de votre choix sur le serveur où vous avez installé VirtualHub for Web, et vous aurez votre application Web:
L'interface web toute simple, mais fonctionnelle, de notre WebApp de contrôle à distance
Cette application Web peut être ajoutée à l'écran d'accueil sur un téléphone Android, où elle sera reconnaissable grâce à l'icône inclue dans le fichier HTML. Cela permet de la lancer sur un téléphone en un seul clic:
Et voilà une application de contrôle personnalisée, sans dépendre d'un Cloud propriétaire. Pratique, non?
