New: Yocto-Visualization (for web)

New: Yocto-Visualization (for web)

This year, Santa Claus is a bit early. After offering you last week a web version of the VirtualHub, Yoctopuce is now offering you the web version of Yocto-Visualization, our ever-popular application that allows you to visualize Yoctopuce sensor data. Let's unwrap your gift together, shall we...




Why a web version?

Actually, YoctoCloud, the ancestor of Yocto-Visualization is a web application. It is only later that we decided to make a native equivalent. But we realized that even if it is useful for everyday use, the native version of Yocto-Visualization is not very practical to monitor long term experiments unless you run the software on a computer dedicated to the experiment in question. So, we had the idea to make a web version that can be installed directly on a Yoctopuce Hub. We had explored this principle a few years ago, but this time, we went all out.

Yocto-Visualization in your web browser votre navigateur web, how about this?
Yocto-Visualization in your web browser votre navigateur web, how about this?



Installation

Yocto-Visualization (for web) can be installed on all types of Yoctopuce hubs: the YoctoHub-Ethernet, the Yoctohub-Wireless, the VirtualHub and especially the VirtualHub (for web). In theory, it also works on the Yoctohub-GSM, but it's not very useful unless you can establish incoming connections to the Yoctohub-GSM, which is not for everyone.

There are several ways to install Yocto-Visualization (for web) on the hub of your choice.

Method 1, the online installer for Yocto-Visualization (for web)

If you want to install Yocto-Visualization (for web) on a VirtualHub (for web). You can simply use the installer below. You just need to know the address of your VirtualHub and the path of the instance you want to install it on. Note that once launched, this installer works autonomously without interaction with our servers. In other words, any passwords you might have to enter during the installation doesn't go through the Yoctopuce servers.

This is not a screenshot, you can really use it


You can find the same installer on our "Tools" page in the Yocto-Visualization (for web) section.

Unless you have a web browser configured to accept mixed contents, it's unlikely that the above installer will work with a YoctoHub-Ethernet, a Yoctohub-Wireless or a native VirtualHub V1, because these only work in HTTP.

Method 2, via the hub interface

If you have a YoctoHub or a Virtualhub that meets the following three conditions:

  • The firmware version is at least 52200,
  • The network interface of the hub is up
  • The hub, or the VirtualHub used to access it, has the ability to connect to www.yoctopuce.com to download the installer

Then you can find in the hub configuration interface a button to launch the installer.

Under certain conditions, the hub interface presents a button to launch the installer
Under certain conditions, the hub interface presents a button to launch the installer



Method 3, the offline installer

Make sure that Node.js is installed on your machine, it is required. Download the sources of Yocto-Visualization (for web) from our "Tools" page, unzip the .zip file into the directory of your choice, place yourself in this directory, and type the following command

npm run installer


This command creates a small temporary web server that serves the installer file and then opens a web browser on this installer.

Method 4, test offline

If you just want to see what Yocto-Visualization (for web) looks like without installing it on one of your hubs, it is quite possible: download and unpack the archive as described in method 3 and use the following command:

npm run app-server



This time, this command creates a small temporary web server that serves an instance of Yocto-Visualization (for web) and then opens a web browser on it.

Usage

If you have used the native version of Yocto-Visualization, you will have no trouble finding your way around. If, on the contrary, you have never heard of Yocto-Visualization before, you should be able to get by: the interface is supposed to be intuitive. In the worst case, you can find the documentation for the native version here.

By default, the hub on which Yocto-Visualization (for web) is installed is present in the list of hubs in the global configuration, but you can of course add others. Just remember that for this to work, the added hubs must be accessible from your web browser, Yocto-Visualization (for web) runs in your browser, not on the server that serves the application file.

All hubs in the configuration must be accessible from the web browser running Yocto-Visualization (for web)
All hubs in the configuration must be accessible from the web browser running Yocto-Visualization (for web)


Your own cloud, for free

If you have a PHP host and combine Yocto-Visualization (for web) with VirtualHub (for web) you obtain, thanks to the VirtualHub (for web) datalogger emulation, your own free cloud for storing and visualizing Yoctopuce sensor data. All you have to do is:

  1. Install VirtualHub (for web) on your PHP host and create an instance
  2. Configure your local hubs to callback on your instance
  3. Install Yocto-Visualization (for web) on the same instance of VirtualHub (for web)
  4. Configure Yocto-Visualization (for web) graphs to use data logger data.


From there, you can display data coming from Yoctopuce sensors connected to any hub which can process callbacks, i.e. VirtualHub, YoctoHub-Ethernet, Yoctohub-Wireless and Yoctohub-GSM.

Note that in addition to being accessible from anywhere, the interest of this architecture is that the data logger emulation provided by the VirtuaHub (for web) is much faster than their physical version. As a result, the content of the graphs loads much faster.

Compatibility and limitations

Now that we've had our fun, let's talk about the points that can be annoying.

Compatible browsers

You must use a recent browser, more exactly a browser that supports ecmascript modules. Basically if your browser version is from after 2018, it should work. Unless... you are using Safari, on this browser Yocto-Visualization (for web) does not work at all and the reason remains a big mystery.

Obviously, this leaves out people who use old browsers on old operating systems such as Windows XP 32bits. We feel a bit sorry for them, but we really needed the functionality of a modern browser for this project to have a chance to succeed.

Limitations

The native version is a multi-window application, each of which contains a widget. In the web version, you can still have as many widgets as you want, but they remain confined to the same window: the browser window.

The web version is largely as responsive as the native version, but since browsers tend to severely slow down pages that are not directly visible, either because the browser is minimized or because it is opened on another tab, it is possible that the graphs will have rendering defects if the web page that contains them has been hidden for a while.

You may need to update the firmware of your YoctoHubs: Yocto-Visualization (for web) needs at least version 43805 to work properly.

The same limitations as the native version apply: Yocto-Visualization (for web) is based on the YSensor class, only sensors are supported, it is not possible to display the status of actuators.

Conclusion

This week, we have covered the main points that will allow you to take your first steps with Yocto-Visualization (for web). But this new Yoctopuce application does not only mimic the behavior of the native version, there are other possible uses... We'll have the opportunity to talk about them some other time.

Add a comment No comment yet Back to blog












Yoctopuce, get your stuff connected.