preface
With the popularization and development of industrial Internet of Things and Internet technology, the way of artificial filler has gradually been replaced by mechanical equipment. Industrial manufacturers reduce misoperation, improve equipment safety and the pursuit of high efficiency and other manufacturing characteristics of equipment requirements are increasingly high standards, strict requirements. At the same time, the mechanical production needs to comply with the standard management of the whole project process, and how to implement the management and handover is also a serious challenge. Therefore, the entire production process should also develop a set of visual interface about the management process.
In industrial process control, the control system, referred to as PID control system, is controlled by the proportion, integral and differential of the error generated by comparing the information collected from the real-time data of the controlled object with the given value. PID control production environment has strong adaptability, strong robustness, easy to use and so on. The feeding system involves ultra-high pressure technology, which is widely used in the assembly line system. It can realize semi-automatic equipment or automatic feeding operation, and solve the problems of inaccurate measurement, working environment pollution and high labor intensity of workers in the traditional feeding way, so as to realize efficient assembly line processing. Combined with PID and automatic deployment, it can supply and demand for power, machinery, metallurgy, chemical, food, textile and other industrial or civil industries. HT for Web product of Hightopo (hereinafter referred to as HT) provides rich 2D configuration. This article helps us understand how to use HT to realize a visual PID control feeding system by building 2D scene and data interface display of the hazardous waste feeding system.
Results the preview
Address the preview of the project: www.hightopo.com/demo/PID-fe…
Overall collaboration scenario
Grab bucket operation scenario
Feed the scene
The code to build
Set the scene
This paper mainly realizes 2D scene, we need to use the related API of topology component to build the basic scene:
// The data container is used to access the data Node Node
dataModel = new ht.DataModel();
// Topology components
graphView = new ht.graph.GraphView(dataModel);
// Add the component to the body
graphView.addToDOM();Copy the codeThe code above adds a component to the body using the addToDOM() method. HT components are typically embedded in containers such as BorderPane, SplitView, and TabView. The outermost HT component requires the user to manually add the underlying div element returned by getView() to the DOM element of the page. It is important to note that when the parent container size changes, if the parent container is BorderPane, SplitView and other predefined HT container components, The HT container will automatically recursively call the invalidate function of the child component to notify the update. However, 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 usually needs to listen for the window size change event and call the invalidate() function of the outermost component to update.
For ease of loading and filling Windows for the outermost components, all components of HT have addToDOM(), which implements the following logic, where iv() is short for invalidate() :
addToDom = function(){
var self = this.// Get the underlying div of the component
view = self.getView(),
style = view.style;
// Add the component's underlying div to the body
document.body.appendChild(view);
// Position is set to absolute for all components by default
style.left = '0';
style.right = '0';
style.top = '0';
style.bottom = '0';
// The window is resized and the refresh function is called
window.addEventListener('resize'.function(){
self.iv();
}, false);
}Copy the codeReset the view default method:
// Disable mouse drag and drop for panning
graphView.setPannable(false);
// Disable box selection on the topology
graphView.setRectSelectable(false);
// Disable the move filter function
graphView.setMovableFunc((a)= >{false});Copy the codeCreating a 2D graph in the 2D editor generates a JSON file that needs to be deserialized to introduce the generated scene:
ht.Default.xhrLoad('Displays/Industry /PID- Feed system.json'.function(text){
// Parse to a JSON object
var json = ht.Default.parse(text);
// Deserialize to the scene
dataModel.deserialize(json);
})Copy the codeIn HT, an id attribute is automatically assigned to a Data object when it is constructed, which can be obtained and set through data.getid () and data.setid (id). The ID value cannot be changed after the Data object is added to the DataModel. Datamodel.getdatabyid (ID) is a quick way to find Data objects. However, it is generally recommended that the id attribute be automatically assigned by HT, and the unique identifier of the user’s business significance can be stored on the tag attribute. Data#setTag(tag) function allows arbitrary dynamic change of tag value. The corresponding Data object can be found by DataModel#getDataByTag(tag) and can be deleted by DataModel#removeDataByTag(tag). Datamodel.getdatabytag (tag) = datamodel.getDatabyTag (tag);
{
"c": "ht.Node"."i": 407."p": {
"displayName": "Gripper's knot."."parent": {
"__i": 403
},
"tag": "gripKnot"."image": "Symbols/Symbol Factory/garbage handling/clutter.json"."position": {
"x": 569.62125."y": 117.05025
},
"width": 50."height": 25
},
"s": {
"select.width": 0}}Copy the codevar gripRightPaw = dataModel.getDataByTag('gripRightPaw');
var girpLeftPaw = dataModel.getDataByTag('grapLeftPaw');
var gripKnot = dataModel.getDataByTag('gripKnot');Copy the code
An animation
Ht.default.startanim () encapsulates the hT.default.startanim () function, set duration to get the animation duration, the action function is the animation property executed, and the finishFunc callback function after the animation is executed. Includes self-driven and asynchronous animations. The 8th animation (circulating water) is used as an example to understand the ht’s built-in animation:
// Circulating water flows
function animation() {
var lineJson = {};
var name = ' ';
var speed = 20,
lastTime = Date.now();
// Loop to get the stream tag and set shape.dash. Offset to 0
for (var i = 1; i <= 9; i++ ) {
if(i ! =8) {
name = 'line'+i;
lineJson[name] = 0;
}
}
ht.Default.startAnim({
duration: 5000.action: function () {
var time = Date.now(), deltaTime = (time-lasttime) /1000;
for (var tags in lineJson) {
if (tags.split('e') [1] % 2) {
lineJson[tags] += deltaTime * speed;
} else {
lineJson[tags] -= deltaTime * speed;
}
var lines = dataModel.getDataByTag(tags);
lines.setStyle('shape.dash.offset',lineJson[tags]);
}
lastTime = time
},
finishFunc: function () {
animation();
// TODO... You can also call the next animation asynchronously from here}})}Copy the codeThis example starts by dynamically fetching the Data node from the for loop and datamodel.getDatabyTag based on the created cyclic flow (with a bound tag), and determines the flow direction by the number carried by the tag name. Finally, use data.setstyle (data.s for short) to set the offset of the dashed line.
For example, if lineJson[tags] += value (constant value), when the user enlarges the view, the number of pixels decreases, the action function in Anim will be called several times, and the flow speed increases, and the same is true when the user shrinks. Therefore, value = speed * deltaTime is adopted to solve the problem of inconsistent playback speeds of views at different zoom levels. The specific principle is as follows:
// global
var lastTime = Date.now();
/ / distance
var distance = 0;
/ / speed
var speed = 20;
// action
ht.Default.startAnim({
duration:5000.action:function(){
var time = Date.now();
var deltaTime = (time - lastTime) / 1000;
distance += speed * deltaTime;
lastTime = time;
},
finishFunc:function(){//TODO}
})Copy the codeHt animation can not only be driven by startAnim, but also by scheduling addScheduleTask. The code is as follows:
dataModel.addScheleTask({
// Scheduling interval
interval,
// Action before scheduling begins
beforeAction(){},
// Schedule tasks
action(){},
// Action after scheduling ends
afterAction(){}
}) Copy the codeHt built-in functions encapsulate a lot of interesting and practical APIS about animation. If you are interested, you can go to the official website (www.hightopo.com) to learn about it, or apply for a trial package of the Framework online. If you want to know more HT encapsulation of animation, you can refer to www.cnblogs.com/xhload3d/p/… And other articles.
operational
Of course, HT also takes advantage of the natural benefits of the subscription-publish model by driving data to change the view, making the data-view binding process more intuitive. The following two kinds of operable interfaces provided by HT are provided. The first one is by creating panel components. HT provides a series of general panel components including formPane, borderPane, TablePane, etc. Here we take formPane as an example. Ht-form. js is introduced in the index.html main page, which encapsulates the formPane API, with the following pseudocode:
// Create a panel object
var fp = new ht.widget.FormPane();
fp.setWidth(200);
fp.setHeight(100);// Panel row height
fp.setRowHeight(30); fp.setPadding(16);Fp.getview () is a normal DOM node
fp.getView().className = 'main';
// Add text and progress bars via the addRow method
fp.addRow([{
id:'text'.element:'Current Speed === 20'.align:'center'}], [0.1]);
fp.addRow([{
id:'speed'./ / the progress bar
slider:{
min:0.max:100.// Current progress value
value:20.step:1.// Trigger the function when value changes
onValueChanged(){
var speed = fp.v('speed');
fp.v('text'.'Current Speed === '+ speed); }}}], [0.1]);
document.body.appendChild(fp.getView());Copy the code
At this point, we simply point the speed we defined earlier to fp.v(‘speed’) to implement data view binding:
function animation(fp){
var lineJson = {};
var name = ' ';
var lastTime = Date.now();
var speed;
for (var i = 1; i <= 9; i++ ) {
if(i ! =8) {
name = 'line'+i;
lineJson[name] = 0;
}
}
ht.Default.startAnim({
duration: 5000.action: function () {
speed = fp.v('speed');
var time = Date.now(),
deltaTime = (time - lastTime) / 1000;
for (var tags in lineJson) {
if (tags.split('e') [1] % 2) {
lineJson[tags] += deltaTime * speed;
} else {
lineJson[tags] -= deltaTime * speed;
}
var lines = dataModel.getDataByTag(tags);
lines.setStyle('shape.dash.offset',lineJson[tags]);
}
lastTime = time;
},
finishFunc: function () { animation(fp); }})}Copy the codeThe other is through HT vector graphics library, vector graphics using point, line or polygon graphic description, to solve the PNG, JPG and other formats in the zoom distortion phenomenon. Vector graphics can be created through regular editors such as Webstorm, webstorm code, and hT-2D editor directly to create graphics, basically do not need to operate code to create graphics, students who have learned 3DMAX or CAD drawing should be familiar with this. With the continuous improvement of the editor, there are many excellent ICONS and component cases inside, so you can directly reference some small cases here. First, you need to create a drawing, and then directly pull a self-made icon. The effect similar to Legend is drawn by drawing lines, and you can directly see the effect by changing the text part.
Key or functional components, icon display display interface, functional components support event trigger, first in the control to pull slider icon, and then to the component bar slider component, set the maximum value, minimum value and default value of the control and a series of parameters.
The default value is 20. We bind the two Data objects with unique labels, sliderValue and textValue respectively. First, change the textValue by the current value of the progress bar:
var sliderValue = dataModel.getDataByTag('sliderValue');
var textValue = dataModel.getDataByTag('textValue');
// value changes the trigger event
sliderValue.a('ht.onChange'.function(){textValue. (a.'textValue',sliderValue.a('ht.value'));
})Copy the codeThe animation then gets the current value of the progress bar, pointing to speed:
function animation(data) {
var lineJson = {};
var name = ' ';
var lastTime = Date.now();
var speed;
for (var i = 1; i <= 9; i++ ) {
if(i ! =8) {
name = 'line'+i;
lineJson[name] = 0;
}
}
ht.Default.startAnim({
duration: 5000.action: function () {
speed = data.a('ht.value');
var time = Date.now(),
deltaTime = (time - lastTime) / 1000;
for (var tags in lineJson) {
if (tags.split('e') [1] % 2) {
lineJson[tags] += deltaTime * speed;
} else {
lineJson[tags] -= deltaTime * speed;
}
var lines = dataModel.getDataByTag(tags);
lines.setStyle('shape.dash.offset',lineJson[tags]);
}
lastTime = time;
},
finishFunc: function () { animation(data); }})}Copy the code
Of course, you can also customize multiple sliders to control different animations, depending on your needs.
Not limited to 2D visual scenes, there are also many cases of visual scene simulation related to 3D production environment, as follows:
3 d cement factory process: www.hightopo.com/demo/Cement…
3 d blast furnace ironmaking industry process: www.hightopo.com/demo/large-…
conclusion
Through the maintenance of visual system, the cost of human resources and time is saved to a great extent, and a complete process can be presented through the rich 2D configuration. The development of information network is the trend of the industry of 4.0, and the integration of the industrial control and data visualization and are also at the heart of the Internet industry, it can realize some complex industry standards through a series of simple and clear feedback of animation, combined with real-time data, build an industry representative visualization operational system of process industry standards. Of course, HT keeps improving itself. The product not only has 2D configuration that users can easily use, but also has many interesting methods for users to build 3D configuration.
2019 we also updated the hundreds of industrial Internet 2 d / 3 d visualization case set, here you can find many novel instance, can also find different industrial Internet: mp.weixin.qq.com/s/ZbhB6LO2k…
At the same time, you can also see more cases and results: www.hightopo.com/demos/index…