Web SCADA industrial control mobile applications based on HTML5

Web SCADA industrial control mobile applications based on HTML5

The concept of Web SCADA in the field of industrial automation, such as electric power, Oilfield Gas, and water supply pipe network, has been put forward for many years, most of the Web SCADA front-end technologies in the previous years were based on heavy client solutions such as Flex, Silverlight, and even Applet. Before the popularity of HTML5, VML and SVG were actually pure Web Solutions and there were many applications, in recent years, with the popularity of HTML5 and the popularity of mobile terminals for HTML5 support, more and more new projects have begun to adopt truly pure HTML5 solutions. More specifically, the Canvas solution with higher application performance than SVG in large data volumes, it has gradually become the first standard solution for Web SCADA front-end technology.

Recently, the customer used the HT for Web graphical interface component to implement the HMI of Industrial SCADA, such as the oil field gas pipe network and water supply pipe network, and run the system on Android and iOS mobile terminals such as tablets and mobile phones, here we will sort out and share some knowledge points in the technical support process, hoping to provide some help to partners interested in the Web SCADA field.

In the technical option phase, the user proposed the technical line of SVG. After all, there are still some standards and applications in the Early electric power field, but SVG does not support well on older Android terminals, in addition, the SVG component method causes the problem of poor performance when there are too many elements, and finally decides to adopt the vector technology solution provided by HT for Web, the HT vector technology solution can be referred to for details in "HT fully vectoring graphic Component Design" and "HT graphic component design path (ii, moreover, the HT vector scheme not only achieves scaling but also provides powerful dynamic data binding functions, this is especially convenient for the industrial control field to be driven by real-time data, such as fan rotation, pipeline flow, switch opening and closing, and other control functions.

For the network loading problem of scada hmi network topology of man-machine interface Pipe Network, the user adopted our suggested Web Client Cache solution, it solves the problem of slow network loading when switching to multiple network topologies. For more information, see the article "HTML5 Web Client five offline storage methods summary, select your local storage solution based on your specific project situation. In fact, the Web local storage solution has already seen the use of black magic in many fields, and someone has applied LocalStorage to store Web Font, in the gaming field, the use of Web clients to store game resources is far from being fully explored.

In terms of mobile terminal presentation, HMI interface layout applications have similar issues with the gaming field. Generally, horizontal or vertical la s have better layout effects. For example, some games only support horizontal la S, this is not a problem for apps using Native. You can configure the App to be horizontally or vertically deployed, but it is a bit embarrassing for mobile terminal browsers, at present, most terminals do not allow you to limit the user's rotation plane, resulting in layout changes. To this end, we provide users with conventional HTML5 game solutions through window. addEventListener ('orientationchange': the direction of a simple mobile phone changes. When you are in an unsupported direction, the full screen displays an image prompting the user to perform operations after the screen rotation. This solution seems simple, however, the whole user experience is much better than the interface with no prompt to rotate the layout. This simple solution reduces a lot of boring customer service work and no customers blame the interface for being unavailable, however, when the interface direction is incorrect, the system prompts that the image can be rotated automatically.

The default HTML5 solution is certainly weaker than the Native solution, but the HTML5 browser standards have been improved. orientation. lock ('landscape ') or screen. orientation. lock ('portrait') function has been supported by the Chrome browser on Android, can refer to the http://caniuse.com/#feat=screen-orientation just our users are using the Android tablet, after the new Chrome browser is installed, the browser must lock the layout direction.

For some HTML5 application pages, users need to embed the WebView of the Native App into the Native application interface for integration. In the past, this solution, especially on the Android end, always gave me hair, the old Android WebView component is integrated with an odd version of Chromium, which cannot be controlled yet. It was once used to self-package the new version of Chromium to the App, as a result, the entire App has increased the number of MB. However, with the development of Android4. *, all changes have been made, and Google has finally released the chrome version of Android WebView, by default, the current version is sufficient for more than 30 versions, and automatic upgrade will be available in the future. For more details, refer to this article.

Before Android 4.4 all devices run Android WebKit as their WebView. (Is this the same Android WebKit as their default browser? Don't know yet .)
From Android 4.4 the WebView is Chromium 30.
From Android 4.4.3 the WebView is Chromium 33.
From Android 5 the WebView is Chromium 37. in addition, the promise is that the Android 5 WebView will be updated to newer versions app-wise, I. e. without a firmware update. I will keep an eye on that.

There is no pitfall in iOS, and we found that because HT for Web supports retina accuracy, it will be based on the device window. the devicePixelRatio parameter controls the size of the memory Canvas of the topology Canvas. It is often the width parameter on the viewport where the meta is not set, or if this parameter is set too large, the browser on the iOS terminal cannot display the topology content. In this case, no error is reported, but no content is displayed. In this case, the simple solution is to let the user

Set a certain width parameter to test whether the problem is caused, or set ht forcibly. default. if you set the HT parameter of devicePixelRatio to 1, the precision of the retina device is lost. Therefore, we recommend that you reduce the width parameter of the viewport, after all, the interface is reduced too much operation control button is too small to operate normally.

The penetration of HTML5 applications in the HTML5-Based Neural cat game last year, the rapid spread of viruses has been truly recognized by the industry, and now has become an important entry for gaming, advertising, and other industries, similarly, Web SCADA industrial control mobile applications based on HT for Web can also be used in the middle. The following is a screenshot of several applications based on HT for Web customer projects. It is based on html5. monitoring can be so simple, within your control: