Web-based SCADA mobile application of the HT for web

In the field of electric power, oilfield gas, water supply network and other industrial automation, the concept of Web SCADA has been proposed for many years, the previous years of web SCADA front-end technology is based on Flex, Silverlight and even the applet of the heavy client solution, In HTML5 before the popularity of VML and SVG is a true pedigree Web solution is also a lot of applications, in recent years with the popularity of HTML5, coupled with mobile terminal to HTML5 support, more and more new projects began to adopt a truly pure HTML5 scheme, More specifically, the large data volume application performance is higher than the SVG canvas scheme, and has become the preferred standard solution for today's web SCADA front-end technology.

Recently, the customer adopted the HT for Web GUI component, realized the HMI interface of industrial SCADA such as oil field gas pipe network and water supply pipe network, and ran the system on Android and iOS mobile terminal, such as tablet and mobile phone, in which we combed and shared some knowledge points in the technical support process. We hope to help our partners who are interested in the field of Web Scada.

Technical Options Stage User has proposed the SVG technical route, after all, in the early power domain SVG still has the certain standard and the application, but the SVG in the older Android terminal support and is not good, and the SVG component way causes the graph element to be too poor performance problem, finally decided to adopt the HT for Web-based vector technology solutions, HT's vector technology solution in the "HT full vectorization Graphics component design" and "HT graphics component design of the road (ii)" has a detailed introduction to the reference, and the use of HT vector scheme not only has a bit of scaling not distorted, but also has the powerful features of dynamic data binding, This is particularly convenient for industrial control applications such as fan rotation, pipe flow, switch opening and closing, etc., based on real-time data driven.

For the SCADA HMI interface Network load problem, the user adopts our proposed WEB client caching scheme, which solves the problem of more network topology diagram switching to open the network load slowly, and can refer to the article "HTML5 WEB client five offline storage methods" According to your specific project situation to choose the right local storage solution, in fact, the Web local storage solution has appeared in many fields of strange application of black magic, someone application Localstorage storage Web Font, game domain using Web Client storage game resources, etc. Web Client storage is far from being fully mined.

Mobile terminal presentation, the HMI interface layout application and the game field have similar problems, generally to the horizontal or vertical version will have better layout effect, for example, some games only support the play of the horizontal version, which is not a problem with the application of native, can be configured to the app can only be horizontal or vertical layout, But for the mobile terminal browser is a bit awkward, most of the current terminal you can not limit the user rotation plane caused layout changes. To this end we provide users with the HTML5 game field of conventional solutions, through the Window.addeventlistener (' Orientationchange ' Simple phone direction change, when in the direction that you do not support, full screen display a picture that prompts the user to rotate the screen before doing normal operation, the scheme seems simple, but the whole user experience is better than no hint to rotate out of the layout mess interface experience, this simple solution to reduce a lot of boring customer service Work, no customer blame interface can not be used, but the interface is not in the wrong direction, prompting the picture so that people naturally know to rotate the screen.

Pure HTML5 scheme The default scheme will certainly be weaker than the native scheme, but the HTML5 browser standard has been perfected, the recently proposed Screen.orientation.lock (' landscape ') or Screen.orientation.lock (' portrait ') function has been supported on Android by Chrome browser, can refer to http://caniuse.com/#feat =screen-orientation   Just as our users are using the Android tablet, installing a newer Chrome browser will require the browser to lock the layout direction.

for some HTML5 application pages, users need to embed the native app's WebView and native application interface to do the integration, before this scenario, especially on the Android side, always makes me creepy, The old Android WebView component integrates the odd rotten chromium old version, still unable to control its upgrade, even once adopted the self-packaged chromium new version to the app, resulting in the entire app increased the problem of good dozens of M, But now with the development of android4.* all have a qualitative change, Google finally released the Android WebView version of the chromium, the default is now enough to engage in more than 30 of the version, the future can be automatically upgraded, more specific reference to this article   http://www.quirksmode.org/blog/archives/2015/02/android_webview.html

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 are that the Android 5 WebView would be updated to newer versions app-wise, i.e. without a firmware Update. I'll keep an eye on that.

In iOS is also not no pit, we found that due to the HT for Web to support retinal precision, According to the device Window.devicepixelratio parameter control topology map canvas of the size of the canvas, often encountered the user does not set meta viewport width parameter, or the parameter settings too large causes the iOS terminal browser can not display the topology map content, this situation will not be an error But there is no content, a simple solution to this situation is to let the user <meta name= "viewport" content= "User-scalable=no, width=600″> Set a certain width parameter to test whether the problem is caused by this issue, or to force the setting of HT. Default.devicepixelratio HT parameter, for example, set it to 1, of course, this loss of retinal equipment under the fine effect, it is generally recommended to adjust the width of the viewport parameter, after all, the interface to reduce too many operation control buttons too small is not normal operation.

HTML5 application of penetration in the last year based on the HTML5 of the neuro-cat game, in the viral rapid spread of the industry has been truly recognized its strength, has now become a game, advertising and other industries to apply the important portal, as well as the HT for Web-based web SCADA mobile applications can also be used in the dissemination of , here are a few app grabs based on the HT for Web customer project, yes, based on HTML5, monitoring can be so simple and truly within your control:

Web-based SCADA mobile application of the HT for web