Yoctopuce products enable you - among other things - to remotely control a device via the Internet. What's special about the Yoctopuce solution is that it's not based on a proprietary infrastructure, which could shut down any day and render all these systems inoperable, as has already happened far too often. Yoctopuce offers remote control tools which you are free to install on the host of your choice, and which you can move to another host in a few years' time if need be...
The key to controlling Yoctopuce modules over the Internet is the system of HTTP callbacks, by which a YoctoHub-Ethernet or a YoctoHub-GSM-4G, for example, connects to a PHP server to receive commands.
A few years ago, we illustrated how this works with the example of a Web application to remotely switch on a heating system, using our PHP library in HTTP callback mode. The price we had to pay for not depending on a proprietary Cloud server was that we had to create a small PHP program to manage the deferred interaction between the commands sent by the user and the transmission to the Yoctopuce modules. Although we provided a sample code, putting it into production required programming skills in PHP.
In the meantime, Yoctopuce has released a new tool that facilitates the use of modules through HTTP callbacks: VirtualHub for Web. Once installed on any public PHP server, this software lets you view and interact with Yoctopuce modules connected to the server via an HTTP callback almost as if they were connected live:
The VirtualHub (for web) interface
Interestingly, it's not just a web interface: VirtualHub for Web can also be used to drive Yoctopuce modules using our programming libraries, as if it were a local hub. So you can write a small WebApp in HTML/JavaScript (or other variants such as TypeScript, JSX, and so on) to provide a user-friendly interface to remotely control Yoctopuce modules.
As an example, we're going to revisit the example mentioned above for remotely switching on a heater, and turn it into a more modern version in HTML and TypeScript.
The body of the HTML page is trivial. Compared with the original PHP version, which relied on the Web server's authentication mechanism, this version includes an interface for requesting the system's password, essential for establishing a connection with VirtualHub for Web. The main interface is not visible until the password is verified, as the buttons would not work anyway.
<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>
The login window
The code that handles the login is very generic: it simply tries to establish a connection with VirtualHub for Web using the RegisterHub function, and changes the <div> displayed once the connection has been successfully established.
{
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 = '';
};
The application-specific initialization code is trivial: we simply search for a relay with a given logical name, to ensure that the system is operational, and trigger a periodic status update.
if(!await HeatingRelay.isOnline()) {
setStatus('Relay not found');
return;
}
setTimeout(updateStatus, 100);
The most interesting part is the one specific to the actual switching operation: the switchOn callback. This function simply asks the relay to switch to the active position for the specified duration (in hours), or to switch to the inactive position if the parameter is null. As switching is not immediate - it only takes place when the hub issues the next HTTP callback - an information message is shown. The message is automatically replaced by the status transmitted by the relay as soon as the next HTTP callback occurs.
{
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...');
};
You'll find the complete source files for this project, including the code for the updateStatus function which retrieves the remaining time announced by the relay and displays it in the form of days-hours-minutes, among the HTML examples in our TypeScript library, in the Prog-VHub4Web directory. If you run npm run build in this directory, you get an app.min.js file which is the minified equivalent of the TypeScript application code, including the necessary classes from the Yoctopuce library. Simply copy it alongside the bundled.html file into the directory of your choice on the server where you've installed VirtualHub for Web, and you'll have your Web application:
The simple but functional web interface of our remote control WebApp
This Web application can be added to the home screen on an Android phone, where it is recognizable by the icon included in the HTML file. This allows it to be launched on a phone with a single click:
And there you have a personalized remote control application, without depending on a proprietary cloud. Nice, isn't it?
