Web SCADA report based on HTML5

Background

Recently, a SCADA project has encountered the need to present device reports in a Web page. A complete report that typically contains a variety of elements, such as a filter operation area, a table, a chart, a display board, and a data table that is the most commonly used control. In previous industrial projects, all the tables looked the same, showing the information through numbers and simple background color changes. But now, with a variety of mobile apps and Web apps, people's aesthetics and requirements are constantly improving, especially in WEB projects, and the use of old-fashioned digital forms is a bit outdated.

How do I choose an appropriate HTML front-end Table control? You can omit 10,000 words here. Ha ha. There are many mature cases in the control libraries in the JQuery, Angular, React and other camps, but these DOM-based controls also have deficiencies and one is the efficiency issue: If you use a custom cell control in a large data table, the burden on the browser is too heavy, especially for the mobile side. Another problem is the development of efficiency, the above-mentioned control Library of the respective package level, interface form are different, but the overall requirements of the developer of CSS, JS have a deeper understanding. There are also problems with the reuse, embedding, publishing, and porting of controls.

Based on the above considerations, a Canvas-based HT is finally used. With the HT tabular control's custom rendering interface and the multi-threaded data simulation of the Web Worker, the Table control effect is as follows:

Http://www.hightopo.com/demo/pagetable/index.html

Begin

The first thing we need to do is to combine the business logic and make different renderings of the data in different columns in the table. For example, the equipment history information in the running time, downtime, etc., more suitable to use a pie chart to summarize the display, the user can be very intuitive from the list to compare the history of the device. Let's take a look at how this step is implemented.

HT has its own Datamodel data model, omitting our development work on data state management, time distribution, and UI refresh. The child element data in the Datamodel container, which is the most basic database structure in HT, can be mapped to a different UI control. On the canvas, data can be displayed as vectors, pictures, or text, and on a tree control, data is displayed as a node of the tree. In the table, each Data corresponds to a row row in the table. That is, the table control itself contains a datamodel that, when drawn, draws each Data in the Model to a single line. Different columns, showing the different properties in the Data. For example, we can save the device's downtime to the stopping property of the Data. When you configure column columns for a table, we can specify that the column's header describes "downtime", whose data cells correspond to the stopping property of the database and the custom drawing format:

{    ' stopping ',       // corresponding data attribute    accessType: ' attr ',    ' center ',             ' #E2E2E2 ',       // text color    displayName: ' Stop ',    // table Header Description     drawCell:pageTable.getDrawLegend (' stopping ', ' #E2E2E2 ')},

Custom rendering

In the cell's basic display format, has already provided the text, the array, the color and so on the default type, may automatically format the data, and displays as the text or the background color and so on, but does not satisfy our individuality request, therefore must overload the Column in the Drawcell the custom render function. Drawcell Parameters: Function (g, data, selected, column, X, y, W, h, view), where G is the environment information of the Canvas, and data is the body of that row, and we use this information to reuse the HTML5 native Canvas API to draw the desired effect.

Lazy to personally use the native interface of HTML5 directly? HT provides a wrapper interface to the Canvas API, including various vector types and some simple Chart. With this feature, you can easily combine complex effects, and refer to our vector Manual (http://www.hightopo.com/guide/guide/core/vector/ht-vector-guide.html) for details.

Creates an object that is responsible for containing descriptive information about the combined vector, and then passes the image object and the context information of the Drawcell into the HT as a parameter. Default.drawstretchimage function, you can implement a custom drawing.

//Drawcellfunction(g, data, selected, column, X, y, W, H, TableView) {varValue =data.a (attr); varImage ={width:60, Height:30, comps: [{type:' Rect ', rect: [11,11,8,8], BorderWidth:1, BorderColor:' #34495E ', Background:legendcolor, Depth:3}, {type:' Text ', Text:value, rect:[30, 0, 30, 30], align:' Left ', Color:' #eee ', font:' Bold 12px Arial '            }        ]}; Ht. Default.drawstretchimage (g, image,' Centeruniform ', X, Y, W, h);}

Because there are multiple columns Legend The legend display, we can simply wrap it up with a getdrawlegend function, the parameter is the color of the column legend and the Data property name, and the return value is the Drawcell function.

function (Attr,legendcolor) {return Drawcell}

At this point, we have completed the custom drawing of the start-Stop time columns:

The pie chart for the "stats" column is actually simpler. Using the HT vector interface, the above time data can be passed into the pie vector structure.

varValues =[Data.a (' Running '), DATA.A (' Stopping '), DATA.A (' Overhauling ')];varImage ={width:200, Height:200, comps: [{type:' Piechart ', rect: [20,20, 150, 150], Hollow:false, Label:false, Labelcolor:' White ', Shadow:true, Shadowcolor:' Rgba (0, 0, 0, 0.8) ', Values:values, StartAngle:Math.PI, colors:piecolors}]};

The rendering process for other columns is similar. In the "Wind speed" column, we can calculate a color transparency value according to the wind speed, to achieve a mapping transformation of the same color, than the original kind of non-red and green alarm table, looks more comfortable. In the "Availability" column, the effect of the progress bar is simulated by varying the length of the Rect. Slightly different in the power curve, because you want to achieve the color gradient of the coverage area of the curve, the interface is not found in the linechart of HT, so the Canvas is drawn directly.

In order to run efficiency considerations, drawing charts in the table cells should be simple and straightforward. These few Legend legends are small rectangles that should actually be drawn on the table header. In order to be lazy, I painted in the cell, causing the picture to appear a bit messy.

Web Worker

As we all know, the browser's JS environment is based on a single process, in the case of more page elements, and there is a lot of computing needs, it will result in the inability to balance the rendering tasks and computing tasks, causing the page to stutter or lose response. In this case, consider using the multi-threaded Web Worker to share some computational tasks.

Web Worker is a multithreaded API for HTML5, and is different from the multithreaded development of our original traditional concept. There is no concept of memory sharing between threads of a Web Worker, and all information interactions take the asynchronous pass of message. This makes it impossible for multiple threads to access the other's context, or to access the other's member variables and functions, or to the notion of a mutex. The data passed in the message is also passed by value, not by address.

In demo, we use Web Worker as the simulated backend to generate virtual data. and using the front-end paging method, from the worker to get the current page display the relevant data of the item. In the main thread, create a WEB worker Registration message listener function.

 worker = new  worker ("Worker.js"  ' message ', function   (e) { //  After receiving the worker's message, refresh the table   pagetable.update (e.data);}); Pagetable.request  = function   () { Span style= "COLOR: #008000" >//   Worker.postmessage ({PageIndex:pageTable.getPageIndex (), Pagerowsize:page                 Table.getpagerowsize ()}); }; Pagetable.request ();  

The new worker in this department is created, asynchronously for the main thread, and so on when the worker.js is loaded, and after initialization is complete, the worker is the real usable state. We do not need to consider the available state of the worker and can send the message directly after the statement is created. Requests sent to it before the initialization is completed are automatically saved in the temporary message queue of the main thread, and when the worker is created, the information is transferred to the worker's official message queue.

In the worker, the virtual random data is created, the main thread message is monitored, and the specified data is returned.

function (e) {    var pageInfo = getpageinfo (e.data.pageindex, e.data.pagerowsize);        false);

Because of the previously mentioned inability to share memory, Web Worker cannot manipulate the Dom and does not apply to frequent interactions with the main thread for large amounts of data. So what does Web Worker do in a production environment? In our application scenario, the Web Worker is suitable for data cleansing in the background, and can perform interpolation calculation, format conversion, etc. from the backend to the device history data, and then with the front page of HT, it can realize the pressure-free display of large amount of data.

Page out

Traditionally there are back-end paging and front-end paging, we can be based on the actual project data volume, speed, database and other factors integrated consideration.

With back-end paging, you can simplify the front-end architecture. The disadvantage is that there is a delay in page change and the user experience is not good. And in the case of high concurrency, frequent historical data queries can cause great pressure on the backend database.

Using front-end paging, you need to worry about the amount of data. The amount of data in the whole table is too large, causing the load to be too slow for the first time, and the front-end resource consuming too much.

In this project, thanks to the GOLDEN real-time database, we can safely use front-end paging. Historical data interpolation, statistics and other operations can be done at the database level, passed to the front end is the initial streamlined data. In the historical query of thousands of devices, the amount of data obtained can be sent at once, and then displayed by the front page paging.

In some scenarios, we will show some real-time data in the table, which must be dynamically acquired. Similar to the trend refresh effect in the Demo, we can get all the historical data in bulk when the table is created, and then dynamically get the real-time data needed for the current page from the database. If the network speed is not ideal, you can only get the first page of historical data, and then slowly receive the full data in the background thread.

Such a framework enables the rapid loading of massive amounts of data, no delay in page-changing operations, and the final effect of the current page element dynamic refresh.

There are also traditional customers who like to filter, sort, and manipulate data on a large, complete table.

We can change the amount of data in the Demo to 10,000, the number of pages is 10,000, to test:

Unexpectedly, HT has withstood the test with a complex table of tens of thousands of data. Page scrolling, click and other interactions without impact, dynamic refresh without delay, table loading, sorting and other operations, there will be a small lag, within acceptable degree. Of course, it is also related to the client machine configuration. As you can imagine, tens of thousands of chart displays and dynamic refreshes are almost impossible tasks for DOM-based controls. Other vectors and controls for HT also have high performance features: http://www.hightopo.com/demo/fan/index.html

Postscript

As mentioned earlier, our HT-based forms enable a customizable representation of massive amounts of data and achieve satisfying results. Here are some things that can be improved.

In the Demo, a custom rendering is implemented by overloading the Drawcell of the HT Table control, and then putting the Drawcell into the Pagetable prototype function for Column invocation. In fact, a better approach would be to encapsulate these common charts and legends into the base type of column, so that when you configure a table column, you can specify a type of Piechart or Linechart, and you don't need to draw related vectors yourself.

For the chart in these tables, you can also add some interactive interfaces, such as the ability to add custom rendering to the cell Tooltip, and a more informative Chart when hovering over a specific device for a more in-depth understanding.
Beautiful interface optimization. The control of HT is color-customized and can be configured via the relevant interface:

var tableheader = pagetable.gettablepane (). Gettableheader ();     = ' Rgba (51,51,51,1) ';     Tableheader.setcolumnlinecolor (' #777 '); var tableView = pagetable.gettablepane (). Gettableview ();                 Tableview.setselectbackground (' #3D5D73 '); Tableview.setrowlinecolor (' #222941 '); Tableview.setcolumnlinevisible (false);                Tableview.setrowheight (30);

In the future, the Htconfig can be configured globally, and the overall management of the style in a separate file will enable the separation of the appearance style and function and help the project management.

Web SCADA report based on HTML5