Industrial Web configuration in PID control system application solution

Preface

With the popularization and development of  industrial Internet of Things  and  Internet technology  , artificial filling methods have been gradually replaced by mechanical equipment. Manufacturing features such as reducing misoperations, improving equipment safety, and pursuing high efficiency have put higher standards and stricter requirements on equipment. At the same time, machinery production still needs to follow the standard management of the entire project process, and how to implement management and handover is also a serious challenge. Therefore, a set of visual interfaces on the management process should also be developed throughout the production process .

In industrial process control, a control system that controls the proportion, integral and derivative of the error generated by comparing the information collected in real-time data of the controlled object with the given value is called  PID control system for short . The PID control production environment has the characteristics of strong adaptability, robustness, and convenient use. The feeding system involves ultra-high pressure technology, which is widely used in assembly line systems. It can realize semi-automatic or automatic feeding operations of equipment and solve the problems of inaccurate measurement of traditional feeding methods, pollution of the working environment and high labor intensity of workers, so as to achieve efficient Assembly line processing. Combining PID and automation deployment, it can supply and demand for power, machinery, metallurgy, chemical, food, textile and other industries or civilian industries.

The HT for Web  product of Hightopo (hereinafter referred to as HT)  provides a wealth of 2D configuration. This article helps us understand how to use  HT to  realize a visual PID control by building a 2D scene and data interface display of a hazardous waste feeding system Feeding system.

Interface display and effect preview

Overall collaboration scene

 

More industry data visualization cases/application trial: https://www.hightopo.com/demos/index.html

Grab operation scene

 

Feeding scene

 

Code build

Build the scene

This article mainly implements the 2D scene, we need to use the related api of the topology component to build the basic scene:

// 数据容器，用来存取数据节点 Node
dataModel = new ht.DataModel(); 
// 拓扑组件
graphView = new ht.graph.GraphView(dataModel); 
// 将组件添加到 body 中
graphView.addToDOM();

The above code to add components to the body uses the addToDOM() method. HT components are generally embedded in containers such as BorderPane, SplitView, and TabView, while the outermost HT component requires the user to manually set the underlying div element returned by getView() Add to the DOM element of the page. It should be noted here that when the size of the parent container changes, if the parent container is the HT predefined container components such as BorderPane and SplitView, the HT container will automatically recursively call the child component invalidate function notification Update. But if the parent container is a native html element, the HT component cannot know that it needs to be updated. Therefore, the outermost HT component generally needs to monitor the window size change event of the window and call the outermost component invalidate() function to update.

For the convenience of loading and filling the window with the outermost components, all HT components have the addToDOM() function. The implementation logic is as follows, where iv() is the abbreviation of invalidate():

addToDom = function(){
    var self = this,
        // 获取组件的底层 div
        view = self.getView(), 
        style = view.style;    // 将组件底层 div 添加到 body 中
    document.body.appendChild(view);     // 默认所有组件的 position 都设置为 absolute 绝对定位
    style.left = '0'; 
    style.right = '0';
    style.top = '0';
    style.bottom = '0';
    // 窗口改变大小，调用刷新函数
    window.addEventListener('resize',function(){ 
        self.iv(); 
    }, false); 
}

 

Expand animation

HT encapsulates the ht.Default.startAnim() function for the animation, and obtains the animation duration by setting the duration, the animation properties that are not executed in the action function, and the callback function after the execution of the finishFunc animation. This case contains a total of 8 animations, including self-driving And asynchronous animation.

This example first dynamically obtains the Data node through the for loop and dataModel.getDataByTag according to the created circulating water flow (the tag tag has been bound), and judges the water flow direction by the number carried in the tag name, and finally uses Data.setStyle (which can be abbreviated as Data.s) ) Set the offset distance of the dotted line.

 

Take the above circulating water flow as an example, if lineJson[tags] += value (fixed value), when the user zooms in the view, the number of primitives will decrease, and the action function in the animation will be called several times to increase the flow speed and reduce the power. Therefore, the solution of value = speed * deltaTime is adopted to solve the problem of inconsistent playback speed of views under different zoom zoom conditions. The specific principles are as follows:

// global
var lastTime = Date.now();// 距离var distance = 0; 
// 速度var speed = 20; 
// actionht.Default.startAnim({    duration:5000,
    action:function(){
        var time = Date.now();
        var deltaTime = (time - lastTime) / 1000; 
        distance += speed * deltaTime;        lastTime = time;
    },    finishFunc:function(){//TODO}
})

HT realizes animation not only can be driven by startAnim, but also can be realized by scheduling addScheduleTask, the code is as follows:

dataModel.addScheleTask({
    // 调度间隔
    interval,     // 调度开始之前的动作
    beforeAction(){},     // 调度任务
    action(){},     // 调度结束之后的动作
    afterAction(){} })

You can also use callLater for implementation. The ht built-in function encapsulates a lot of interesting and practical apis about animation. If you are interested, you can enter the official website of Tupu Software  for understanding and learning, or you can apply for a framework trial package online. If you want to know more about the operation of the HT packaged animation, you can refer to other articles.

 

Operable

Of course, HT also draws on the natural advantages of the subscription-publishing model. By driving the data to change the view, it is more intuitive to feel the binding process of the data and the view. The following provides two kinds of operational interfaces provided by HT. The first is by creating panel components. HT provides a series of general panel components including formPane, borderPane, and TablePane. Here we take formPane as an example, first in index.html Introduce ht-form.js into the main page, which encapsulates the api of the formPane panel.

 

At this point, we only need to point the previously defined speed to fp.v('speed'), and we can simply implement data view binding:

The other is through HT's vector graphics library. Vector graphics use point, line or polygonal graphic description, which solves the problem of distortion in png, jpg and other format pictures during zooming. To create vector graphics, you can write code through regular editors such as webstorm and webstorm, or you can create graphics directly through the HT-2D editor. Basically, you can simply create graphics without operating code. Someone who has learned 3dmax or CAD drawing Classmates should be familiar with this. With the continuous improvement of the editor, there are already many excellent icon and component cases inside. Here you can directly quote some small cases. First, you need to create a drawing, and then directly pull a self-made icon. The effect is similar to the legend. After drawing a line, you can directly see the effect by changing the text part.

The key is the functional components. The icons display the display interface. The functional components support event triggering. First pull the slider icon in the control, then pull the slider component from the component bar, and set the maximum, minimum, and default values ​​of the control, etc. A series of parameters.

 

It can be known that there are two values ​​we are about to change, one is the slider, the other is the text value, and the default is 20. We bind unique labels to these two Data objects, namely sliderValue and textValue, and first pass the current value of the progress bar Change the value of the text:

var sliderValue = dataModel.getDataByTag('sliderValue');
var textValue = dataModel.getDataByTag('textValue');
// value 改变触发事件
sliderValue.a('ht.onChange',function(){  
　　textValue.a('textValue',sliderValue.a('ht.value'));
})

Then the animation gets the current value of the progress bar and points to speed.

 

Of course, you can also customize multiple sliders to control different animations separately. How to achieve it depends on your needs.

Not limited to 2D visualization scenes, there are also many cases of visualization scene simulations related to 3D production environments, as follows:

Industrial Internet Code: 3D Cement Factory Production Line Visualization Case Sharing

 

New Development of Industrial Internet: Visualization System of Blast Furnace Ironmaking Plant Based on HTML5 WebGL

 

to sum up

Through the maintenance of the visualization system, human resources and time costs are largely saved, and a complete set of technological processes can also be presented through rich 2D configuration. The development of information network is the trend of Industry 4.0, and the integration of industrial control and data visualization is also the core of the industrial Internet. This can realize some complex industry standards through a series of simple and clear animations plus real-time data feedback. Build a visual operation and maintenance system with representative industry process standards in the industrial field. Of course, through continuous improvement of HT, the product not only has 2D configuration that can be easily used by users, but also has many interesting and fun methods for users to build in 3D configuration!