Production lines in industrial enterprises run at high speed, and the amount of data generated, collected and processed by industrial equipment is much larger than the data generated by computers and humans in enterprises. The high-speed operation of production lines also requires higher real-time performance of data. Cracking these big data is the key for enterprises to win competitiveness in the new manufacturing revolution. Therefore, industrial production visualization system is the best choice for industrial manufacturing.

Industrial production visualization integrates virtual reality technology into the industrial monitoring system. The system display interface is based on the simulation scene of the production plant, and restores the form of each section and important equipment. The operation flow state can be directly displayed in the view of the plant. In the view of single equipment, the running mode of mechanical equipment is directly displayed in the form of simulation animation. Through the integration of image, 3D animation and computer program control technology with solid model, the visual expression of equipment is realized, so that managers can have a vivid and specific concept of the equipment they manage. At the same time, all the parameters generated in the operation of equipment are clear at a glance, thus greatly reducing the labor intensity of managers, improve management efficiency and management level.

The following is a GIF of the specific solution of the podium monitoring system based on HT for Web (http://www.hightopo.com/) :

http://www.hightopo.com/demo/annexMonitor/ HTML 5 technology based on HT for Web (http://www.hightopo.com/) in addition to the application in the industry, Practical HT now more and more users in urban services, agriculture, building, pipe rack, security, BIM, tunnel and so on traditional areas of the real-time network monitoring, the entities by means of digital identical twins equipment and specific data transmission in the past, convenient administrator management, also for the regulation saves a lot of manpower cost. The initial requirement of the customer was to realize the function of animation and switch animation. The proportion of the switch controlling animation and lighting on the screen should not be too large. According to the common operation mode of human beings, it is most appropriate to put it on the upper right corner, and the rest of the screen is filled with 3D scenes, with clear priorities.

3D scene construction

To visualize industrial production, 3D display is essential. HT needs to create a 3D component, and the construction is realized by two lines of code:

var g3d = new ht.graph3d.Graph3dView(); // Hightopo 3D component (3D scene foundation) g3d.addtodom (); // Add the 3D group to the bodyCopy the code

HT components are generally embedded BorderPane (https://hightopo.com/guide/guide/core/borderpane/ht-borderpane-guide.html), SplitView (https://hightopo.com/gui DE/guide/core/splitview/ht – splitview – guide. HTML) and TabView (https://hightopo.com/guide/guide/core/tabview/ht-tabview-guide.html), and other containers in use, 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 functions that implement the following logic, where iv is short for invalidate:

addToDOM = function(){var self = this, view = self.getView(),// get the component's bottom div style = view.style; document.body.appendChild(view); // Add the component's underlying div to the body. Left ='0'; // Ht sets position for all components to absolute. Right ='0';
    style.top = '0';
    style.bottom = '0';
    window.addEventListener('resize'.function () { self.iv(); }, false); // Window size change event, call refresh function}Copy the code

Next we need to add various models to the scene. Generating models in code is very painful. We put the entire scene model into a JSON file and use the HT.default. xhrLoad method to convert the JSON to 3D scene to display on the interface:

var dm = g3d.dm(); Ht.default.xhrload (hT.default.xhrLoad (hT.default.xhrLoad))'scenes/system.json'.function(text) { dm.deserialize(text); // Pass the function's text (json) argument to the deserialize deserialize method, which adds elements from the JSON content to the dataModel data container for display}Copy the code

The ht.default. xhrLoad method is an asynchronous method to load JSON files. The first parameter is the incoming JSON file, and the path is relative to the HTML file. The second parameter is the callback function, which does the operation after the incoming JSON file is parsed. This method is asynchronous loading, so if you need to obtain or operate data in the DM data container, you need to write the code of obtaining/operation after dm.deserialize(text) method, because there are nodes in the DM data container at this time. After serializing the JSON file to the DM data container, the interface appears as follows:

The rotation of impeller in the scene

The rotation of the industrial impeller cannot be the rotation of the whole model, but the rotation of the “roller” in the middle, which requires the designer to separate this part when creating the model, and then I set the tag of this part as “Yelun”. Get the node with dm.getDatabyTag (‘ Yelun ‘) and animate it. HT scheduling in the process is, first through the DataModel (https://hightopo.com/guide/guide/core/datamodel/ht-datamodel-guide.html) to add scheduling tasks, DataModel will traverse all DataModel primions callback the action function of the scheduling task when the time interval specified by the scheduling task arrives. In this function, corresponding property modification can be made to the incoming Data primions to achieve animation effect. According to the above description of scheduling tasks, we know that adding scheduling tasks to THE DM data container will traverse the whole data container, which may not be felt when there is little content in the data container, but when there is much content in the data container and the model is heavy, it is necessary to filter the DM data container. Moreover, if multiple scheduling tasks are added to traverse the entire data container, the performance requirements on the computer can be imagined. At the beginning, I omitted the filtering of THE DM data container. Since the scene was not large, I didn’t feel it at first. Later, after the lighting was added, it was very heavy, and there was an immediate problem. Therefore, the action method passes a data value in the parameter object passed by the scheduling task, which is used to set the object of the current animation. If it is not this object, it can return it without doing anything:

var task = [];
var yelun = dm.getDataByTag('yelun'); Task. yelunTask = {interval: 100,// Animation duration action:function(data) {// Animation contentif(data ! == yelun)return; // Set the X-axis rotation of the Yelun node to the current X-axis rotation value plus math.pi /12 Yelun.setrotationx (Yelun.getrotationx () + math.pi /12); } } dm.addScheduleTask(task.yelunTask); // Add the scheduling task to the data containerCopy the code

The rise and fall of the water level of a container

The rise and fall of the water level in the container is also the embodiment of digital twin (twin). The data is presented to the monitoring personnel synchronously, and the monitoring personnel can directly obtain the current data without data acquisition by the system.

The action of the yelunTask scheduling task in the previous section should be changed. The action of the yelunTask scheduling task in the previous section should be changed. Since the above code only operates on the Yelun node, we need to operate on the water container as well. Firstly, get the container containing water, and set the unique tag of this node as “cylinder” :

var cylinder = dm.getDataByTag('cylinder'); Then change the action section of the schedule: action:function(data) {
    if(! (data === yelun || data === cylinder))return; // Yelun.setrotationx (yelun.getrotationx () + math.pi /12); // The container level changesif(cylinder.getTall() === 100) cylinder.setTall(0); // When the container water level reaches the value of 100, it is reset to 0else cylinder.setTall(cylinder.getTall() + 1);
}
Copy the code

Impeller rotation fault display

Since there was no data transmission, I had to fabricate the data for the fault information. I created a random integer number within 10 to determine whether the value was 1. If it was 1, THE normal operation icon would be transformed into an alarm icon. At the same time, I also set the dm data container to add/remove scheduling tasks to control the current impeller rotation/stop and whether the water level of the container changes:

var alarm = dm.getDataByTag('alarm'); // Obtain the alarm icon nodesetInterval(function() {
    var random = Math.floor(Math.random()*5);
    if (random === 1) {
        alarm.s('shape3d.image'.'Symbols/telecom/fault 2.json'); Dm.removescheduletask (task.yeluntask); // Set the alarm icon to fault. // Add the animation of the impeller to}else {
        alarm.s('shape3d.image'.'Symbols/telecom/normal 2.json'); Dm.addscheduletask (task.yeluntask); // Set the alarm icon to Normal. }}, 1000);Copy the code

Turn animation on/off

We already mentioned how to turn animation on/off in the previous section. Here we use the form form to manually turn animation on and off (note: only the “flow switch” in the first line is described here). Industrial Internet also has a benefit, is able to remote control the site of the switch, but also can quickly monitor the failure of equipment, timely feedback to maintenance personnel, reduce the time cost, and reduce the risk of production stagnation. First, we need to create a formPane (https://hightopo.com/guide/guide/plugin/form/ht-form-guide.html) form components, add rows of data in the form components, Here I use the checkbox to open and close the animation. The value changes only true and false. This is a better choice in this case. Then set the animation on (add) or off (remove) by listening for the checkbox change event.

functioncreateForm(task) { var form = new ht.widget.FormPane(); // Create the form component object form.setwidth (160); // Set the width of the form component form.setheight (90); // Set the height of the form component // Set the style property of the underlying div of the form component form.getView().style.right ='10px';
    form.getView().style.top = '10px';
    form.getView().style.background = 'rgba (255, 255, 255, 0.2)';
    form.getView().style.borderRadius = '5px'; document.body.appendChild(form.getView()); Form. addRow([// add a line of data to the form {checkBox: {// CheckBox class, HT encapsulates this in the form to actually create an ht.widget.CheckBox component label:'Flow switch'// Set the checkbox text content labelColor:'#fff'// Set the checkbox text color to selected:true,// Sets whether onValueChanged is checked for this checkbox:function() {// listen for value change eventsif(this.isSelected()) dm.addScheduleTask(task.arrowTask); // If the checkBox is checked, add animation (open water valve)elsedm.removeScheduleTask(task.arrowTask); // If the checkBox is not checked, remove the animation (close the water valve)}}}], [0.1]); // Set the width of the column in the row datareturn form;
}
Copy the code

AddRow (items, widths, height, params) adds a row of components

  • Items are an array of elements, which can be strings, component parameter information described in JSON format, HTML elements, or null
  • Widths is an array of information about the width of each element. A width value greater than 1 represents a fixed absolute value, a width value less than or equal to 1 represents a relative value, or a combination of 80+0.3
  • Height refers to the information of row height. The value greater than 1 represents the fixed absolute value, while the value less than or equal to 1 represents the relative value. It can also be a combination of 80+0.3
  • Params are additional arguments in JSON format, such as inserting row indexes and row borders or background colors, such as {index: 2, background: ‘yellow’, borderColor: ‘red’} The arrowTask mentioned in the above code is the animation scheduling task added to the “arrow” flow in the scene. You can directly operate whether the DM adds/removes the animation scheduling task by controlling whether the checkbox in the form is checked.

Light on/off

Controls lighting on and off, again via the checkbox on the form. It is generally recommended not to use lighting, rendering is too inefficient, here is just for effect to add a note. First we need to create a “lamp” node, and then set the lamp type, color, lamp range, and so on by setting the style property setStyle:

Var light = new ht.light (); / / create a Lantern Festival point (inherited from ht. Node) (https://hightopo.com/guide/guide/core/lighting/ht-lighting-guide.html) light. P3 ([15, 120, 50]); // Set the location of this object light.settag ('light'); Dm.add (light); // Add this node to the DM data container to display light.s({// set the style properties of this nodesetStyle 简写为 s
    'light.type': 'point'// Set the lamp type'light.color': 'RGB (252252149).// Set the lamp color'light.range': 1400,// Set the lamp range'3d.visible': false// Make this node invisible on 3D});Copy the code

Then add a line to the form to control the light switch and the light color function:

// form. AddRow ([// add a line {id:'lightDisabled'Form. getItemById checkBox: {// checkBox component label:'Lights on and lights off',// Set the checkbox text content labelColor:'#fff',// Set the text color of the checkbox to selected:true,// Set the checkbox to check whether onValueChanged is selected:function() {// Listen for the value change event dm.getDatabyTag ('light').s('light.disabled',! this.getValue()); // Get the light point and set whether to turn off the light effect. The light. Disabled property defaults tofalse, can be set totrue}}}, {colorPicker: {// colorPicker component value:'RGB (252252149).,// set the current value instant:true,// If the model is in the live state, change the model value onValueChanged in real time:function() {// Listen for the value change event dm.getDatabyTag ('light').s('light.color', enclosing the getValue ()) / / set the color of the lamp to the currently selected color}}}], [0.1, 0.1]);Copy the code

Click to switch model

HT will be listening to the packaging to mi events (https://hightopo.com/guide/guide/core/3d/ht-3d-guide.html#ref_interactionlistener), mi method has a variety of events, Here we need to listen for the clickData event by checking whether the event type e.Kinind is clickData and then setting the model for the node:

var waterPump6 = dm.getDataByTag('pump 06'); // Get waterpump6.s ({set the style attribute for this node'note': 'Click me toggle model'// Set the text content of the annotation'note.transparent': true// Set the annotation to be transparent in 3D'note.t3': [0, 0, -50],// Set the annotation offset in 3D'note.reverse.flip': true// set whether the back of the annotation shows the positive content}); g3d.mi(function(e) {// Listen for events on 3D componentsif(e.kind === 'clickData') {// Click node event // Model click toggleif (e.data === waterPump6 && e.data.s('shape3d') = = ='Models/Pump. json') e.data.s('shape3d'.'models/fengji.json'); // Set the shape3D style property of the click nodeelse if (e.data === waterPump6 && e.data.s('shape3d') = = ='models/fengji.json') e.data.s('shape3d'.'Models/Pump. json'); // Set the shape3D style property of the click node}});Copy the code

The HT setting model is implemented by setting the node’s style property Node.setStyle (abbreviated node.s) to shape3D. If (e.type === ‘clickData’) {if (e.type == ‘clickData’) {if (e.type === ‘clickData’);

var waterPump5 = dm.getDataByTag('pump 05');
waterPump6.s({
    'note': 'Click me toggle model'.'note.transparent': true.'note.t3': [0, 0, - 50].'note.reverse.flip': true
});
g3d.mi(function(e) {
    if(e.kind === 'clickData') {// Model click toggleif (e.data === waterPump6 && e.data.s('shape3d') = = ='Models/Pump. json') e.data.s('shape3d'.'models/fengji.json');
        else if (e.data === waterPump6 && e.data.s('shape3d') = = ='models/fengji.json') e.data.s('shape3d'.'Models/Pump. json'); // Model click to hide/show properties windowif(e.data === waterPump5) {// Check whether the pixel clicked is waterPump5if(giveWater.s('3d.visible'GiveWater. S () {// Check whether the current property window is displayed.'3d.visible'.false); // Make the properties window invisible e.data.s('note'.'Click I show properties window'); // Change the display in the annotation}else {
                  giveWater.s('3d.visible'.true); // Set the properties window to see e.data.s('note'.'Click I hide properties window')// Change the content displayed in the annotation}}}});Copy the code

Text content/color transformation

Industrial production field data is certainly constantly changing, and the digital twin characteristics are also fully displayed here, according to the data returned by the equipment constantly updated display data, clearly showing the current equipment dynamic.

Obtain the node of the corresponding property window in the scene through tag. This node is a panel, equivalent to a hexahedron with six sides, and this node type has only one side. And by setting the attribute shape3d. Image set of pictures on this node to tooltips. Json vector icon (https://hightopo.com/guide/guide/core/vector/ht-vector-guide.html). Vector is short for vector graphics in Hightopo (HT). Raster bitmaps, such as PNG and JPG, describe graphics by storing the color information of each pixel. Images in this way will appear blurred graphics, thick lines and jagged lines when they are stretched and enlarged or reduced. Vector images, on the other hand, describe images with points, lines, and polygons, so they can be zoomed in and out with consistent accuracy. HT vector graphics also has a very important feature, that is, it can bind any part of the vector graphics. That is to say, we can draw only one of the five graphs in the figure above, and change the text and numerical content on the graph through data binding. Data binding in vector ICONS can be used for production kanban in industry, data display in large screens, and so on, all in an efficient way to integrate products. Vector graphics data binding can write an article to elaborate, here will not mention, we go to the official website to view the “vector manual” and “data binding manual”, the explanation is more detailed. After obtaining the corresponding node, Through the node. A method can get and set the attribute of data binding (https://hightopo.com/guide/guide/core/databinding/ht-databinding-guide.html#ref_vector), Here we bind the text content “label” and the value “value” and the value color “valueColor” :

var billboardArray = []; Var temperature1 = dM.getDatabyTag ('Return water temperature 1'); // Get the tag as"Return water temperature 1"The node billboardArray. Push (temperature1); var temperature2 = dm.getDataByTag('Return water temperature 2');
billboardArray.push(temperature2);
var returnPress = dm.getDataByTag('Backwater pressure');
billboardArray.push(returnPress);
var givePress = dm.getDataByTag('Water supply pressure');
billboardArray.push(givePress);
var giveTemp = dm.getDataByTag('Water supply temperature');
billboardArray.push(giveTemp);
var giveWater = dm.getDataByTag('Water flow'); billboardArray.push(giveWater); // BillboardarRay.foreach (function(billboard) {
    billboard.a('label', billboard.getTag()); // Set the data binding attribute to label to the current node tag content}); // Text label number transform + color transform Changes the value of the bound icon propertysetInterval(function() {
    billboardArray.forEach(function(billboard) {
        var random = Math.random()*100;
        billboard.a('value', random.toFixed(2)); // Set "value content color" in the iconif (random > 70 && random <= 80) billboard.a('valueColor'.'#00FFFF');
        else if (random > 80 && random <= 90) billboard.a('valueColor'.'#FFA000');
        else if (random > 90) billboard.a('valueColor'.'#FF0000');
        else billboard.a('valueColor'.' ');
    });
}, 1000);
Copy the code

Industrial Internet 3D visualization application is very wide, in addition to the podium monitoring system, industrial equipment such as transformer data monitoring and intelligent buildings there are many, many, even can be used in agriculture and urban planning…… Finally, interested friends can send messages or messages to exchange skills or make friends.