Foreword
In today's industry 4.0 under the impetus of a new era, not only ushered in the industry of Internet development, but also opened a 5G new dimension of time. With the improvement of bandwidth, the rapid development of network information, energy management and real-time warning also occupy a pivotal position in the industrial Internet, and for the development of blast furnace ironmaking, the digitalization and intelligence of 260 domestic blast furnaces have been completed. The implementation of the big data platform for ironmaking in Russia, Vietnam, Iran, Indonesia and other “Belt and Road” countries and steel companies fully reflects the blast furnace intelligent large-screen industry came into being. We will use the web configuration on the HT for Web product of Hightopo (hereinafter referred to as HT) to tell you about the visualization system of the blast furnace ironworks built by 2 / 3D fusion.
HT can quickly achieve rich 2D configuration and 3D configuration effects. You can use your imagination according to your needs, play with many novel functions, and complete a complete set of visualization system solutions through the complementarity of advantages. Therefore, in the realization of the visualization system, the 3D scene adopts the HT lightweight HTML5 / WebGL modeling solution to achieve rapid modeling, runtime lightweighting, and even the mobile terminal browser can be a good effect of 3D visualization operation and maintenance; and in The corresponding 2D drawings use unique vectors without distortion at various scales, and the layout mechanism solves the display problem at different screen scales.
This article will share with you the realization of the blast furnace ironworks on the large-screen display from the following three aspects:
1. Page construction : Introduce the basic 2D drawings and 3D scene fusion project construction;
2. Data connection : display and display panel data;
3. Animation realization : realization of hot metal tank truck transportation, conveyor belt transportation and scene roaming;
Interface introduction and effect preview
On the 2D panel of the visualization system of the entire blast furnace iron plant, some important early warning data of yesterday ’s history and today ’s real-time are presented, which can play a real-time monitoring role in management and control, and can also be compared with historical data, so that production and safety Achieve the expected early warning effect; secondly, the 3D scene presents the basic operation process of a blast furnace ironworks and the animation of iron and steel tank truck transporting steel through a lightweight model, plus the surrounding roaming effect, which plays a comprehensive real-time monitoring status change .
Code
1. Page construction
In terms of content implementation, the HT lightweight model and web configuration are adopted, and the 2D drawings and 3D scenes are completely presented through JSON deserialization in a 2 / 3D combination. First, 2D and 3D content will be presented by creating ht.graph.GraphView and ht.graph3d.Graph3dView . The 2D view component and the 3D view component deserialize () deserialize the corresponding url registered json to display the content of the scene and the drawing. The two perform data binding by setting tags on the subelements in the data model DataModel to achieve functionality Display.
// 三维拓扑视图
let g2d = new ht.graph.GraphView();
let g3dDm = g2d.dm();
// 三维拓扑视图
let g3d = new ht.graph3d.Graph3dView();
let g3dDm = g3d.dm();
// 2D 视图组件和 3D 视图组件进行反序列化
g2d.deserialize('displays/index.json');
g3d.deserialize('scenes/index.json');
In the content presentation, the component needs to be added to the body. Generally, 2 / 3D combined projects will use the 2D component to join the root div of the 3D component, and then add the 3D component to the body to achieve the panel and scene. load.
// 将 3D 组件加入到 body 下
g3d.addToDOM();
// 将 2D 组件加入到 3D 组件的根 div 下，父子 DOM 事件会冒泡，这样不会影响 3D 场景的交互
g2d.addToDOM(g3d.getView());
At the same time, some implementation methods have been changed in interaction and presentation. For example, the interaction mode of the left and right buttons is modified, and the left button click is used to rotate the 3D scene, and the right button click is the scene movement method of pan screenshot. Secondly, when you click on 2D to get to the pixel of the primitive, we want to not trigger 3D interaction. For example, when you slide the wheel in the 2D panel table, it will trigger the zooming of the 3D scene. Here, by monitoring the mousedown, touchstart and wheel three To control the interaction, for the wheel monitoring method, in order to ensure compatibility, the event name is obtained by encapsulating a getWheelEventName () method.
// 修改左右键交互方式
let mapInteractor = new ht.graph3d.MapInteractor(this.g3d);
g3d.setInteractors([mapInteractor]);
// 设置修改最大仰角为 PI / 2
mapInteractor.maxPhi = Math.PI / 2;
// 避免 2D 与 3D 交互重叠
let div2d = g2d.getView();
const handler = e => {
if (g2d.getDataAt(e)) {
e.stopPropagation();
}
};
div2d.addEventListener('mousedown', handler);
div2d.addEventListener('touchstart', handler);
div2d.addEventListener(getWheelEventName(div2d), handler);
// 在一个 HTMLElement 上，可能支持下面三个事件的一种或者两种，但实际回调只会回调一种事件，优先回调标准事件，触发标准事件后，不会触发兼容性事件
function getWheelEventName(element) {
if ('onwheel' in element) {
// 标准事件
return 'wheel';
} else if (document.onmousewheel !== undefined) {
// 通用旧版事件
return 'mousewheel';
} else {
// 旧版 Firefox 事件
return 'DOMMouseScroll';
}
}
2. Data connection
On the presentation of the 2D panel, there will be a lot of chart data information, we can get the data by accessing the background data interface, and then obtain the corresponding data model dataModel on the corresponding component of 2D or 3D, by setting a unique identifier in the data model The data of the tag's child nodes can be connected. For example, now that we want to bind the data of the 2D panel, we only need to get the data model through the g2d of the 2D component, and through g2d.dm (). GetDataByTag (tag) we can get the tag node with a unique identifier to connect the data Or the setting status is displayed.
For the acquisition of the data interface, you can use ajax under the mainstream jQuery framework, axios of the HTTP library based on promise to obtain data in real time through the polling call interface, or use a protocol provided by HTML5 for full-duplex communication on a single TCP connection WebSocket can carry out two-way data transmission, and can meet its own implementation needs in the selection and application. This system uses the axios call interface to obtain real-time data.
// 昨日利用系数数据对接
axios.get('/yesterdayUse').then(res => {
setBindingDatasWithAnim(dm, res, undefined, v => v.toFixed(2));
});
// 昨日燃料比数据对接
axios.get('/yesterdayFuel').then(res => {
setBindingDatasWithAnim(dm, res, undefined, v => v.toFixed(2));
});
// 昨日入炉品位数据对接
axios.get('/yesterdayIn').then(res => {
setBindingDatasWithAnim(dm, res, undefined, v => v.toFixed(2));
});
// 昨日燃气利用率数据对接
axios.get('/yesterdayCoal').then(res => {
setBindingDatasWithAnim(dm, res, undefined, v => v.toFixed(2));
});
// 实时警报信息面板表格轮询载入数据进行滚动播放
this.addTableRow();
setInterval(() => {
this.addTableRow();
}, 5000);
Through the axios polling call interface, the safety index and real-time data information (air volume, air temperature and oxygen enrichment) are obtained in real time:
requestData() {
let dm = this.view.dm();
// 安全指数数据对接并载入圆环动画
axios.get('/levelData').then(res => {
setBindingDatasWithAnim(dm, res, 800, v => Math.round(v));
});
// 实时数据(风量、风温和富氧量)数据对接并载入进度条动画
axios.post('/nature', [
'windNumber', 'windTemp', 'oxygenNumber'
]).then(res => {
setBindingDatasWithAnim(dm, res, 800, v => parseFloat(v.toFixed(1)));
});
}
After the data is docked, some animations of increasing or decreasing the value of the ring or progress bar are implemented. Essentially, the animation function ht.Default.startAnim () that comes with HT is used to determine the properties of the data binding, and then set the new value and The animation of the range of the old value difference, and then the user-defined function easing parameter controls the speed of the animation's movement through mathematical formulas, such as uniform speed change, first slow and then fast.
Here we encapsulate a difference animation effect through the animation function, the parameters are as follows:
- node : node for animation processing;
- name : the name of the data binding;
- value : the value of data binding;
- format : format specification of the bound data value;
- accesstype : attribute binding of data binding;
- duration : animation time;
}
// 默认通过取值器 getter 得到数据绑定的值
else {
oldValue = node[ht.Default.getter(name)]();
}
// 设置新旧值的差额
let range = value - oldValue;
// 执行动画函数
ht.Default.startAnim({
duration: duration,
easing: function (t) { return 1 - (--t) * t * t * t; },
action: (v, t) => {
// 新值增长的动画范围
let newValue = oldValue + range * v;
// 判断有格式则制定数据格式
if (format) {
newValue = format(newValue);
}
// 判断数据绑定为自定义属性 attr 后设定新值
if (accesstype === 'a') {
node.a(name, newValue);
}
// 判断数据绑定为样式属性 style 后设定新值
else if (accesstype === 's') {
node.s(name, newValue);
}
// 默认通过存值器 setter 设置数据绑定的新值
else {
node[ht.Default.setter(name)]()(node, newValue);
}
}
});
}
We often see carousel scrolling data information in public warning occasions or publicity occasions. Using this method will not miss any piece of data information at the same time of publicity. If it is matched with some transition effects such as fading in and out, it will be even more Attract attention. The realization of the panel form of real-time alarm information also realizes a transitional UI immersion when adding new data, mainly using the HT's own animation function ht.Default.startAnim () , horizontal By scrolling by 100 widths and the data transparency slowly emerges, new alarm information is added by vertically shifting the table row height down by 54 rows.
addTableRow() {
// 获取表格节点
let table = this.right3;
// 通过 axios 的 promise 请求接口数据
axios.get('getEvent').then(res => {
// 获取表格节点滚动信息的数据绑定
let tableData = table.a('dataSource');
// 通过向 unshift() 方法可向滚动信息数组的开头添加一个或更多元素
tableData.unshift(res);
// 初始化表格的纵向偏移
table.a('ty', -54);
// 开启表格滚动动画
ht.Default.startAnim({
duration: 600,
// 动画执行函数 action
action: (v, t) => {
table.a({
// 通过添加数据后，横向滚动 100
'firstRowTx': 100 * (1 - v),
// 第一行行高出现的透明度渐变效果
'firstRowOpacity': v,
// 纵向偏移 54 的高度
'ty': (v - 1) * 54
});
}
});
});
}
Three, animation realization
Under static scenes and panels, it is difficult to intuitively reflect the superiority of a 2 / 3D mosaic system. Animation is where the soul of life is given. A proper UI animation design can bring the interactive experience of the panel to life. In 3D scenes, the transportation through a set of simple images of a hot metal tank truck and conveyor belt can make people clearly understand the production. The transportation process, for the control of the model building, using a good perspective entry point, we can set up a full range of immersive roaming patrols. In summary, through the superposition of the advantages of lightweight model scenes and vector component panels, a flexible production early warning system for blast furnace ironworks can be presented.
In the roaming tour, in order to more fully reflect the scene, we display and hide the panel data on both sides by cropping. The following uses the cropping animation of the hidden panel as an example:
hidePanel() {
// 将左侧数据绑定裁剪的子元素存放进一个数组里
let leftStartClipIndexs = (() => {
let arr = [];
for (let i = 1; i <= 4; i++) arr.push(this['left' + i].s('clip.percentage'));
return arr;
})();
// 将右侧数据绑定裁剪的子元素存放进一个数组里
let rightStartClipIndexs = (() => {
let arr = [];
for (let i = 1; i <= 3; i++) arr.push(this['right' + i].s('clip.percentage'));
return arr;
})();
// 设置面板裁剪的延迟时间，使得视觉上更有层次感
let delayArrays = [400, 800, 1200, 1600];
// 动画执行函数
let action = (index) => {
ht.Default.startAnim({
duration: 700,
easing: Easing.swing,
action: (v, t) => {
this['left' + index].s('clip.percentage', leftStartClipIndexs[index - 1] + (0 - leftStartClipIndexs[index - 1]) * v);
this['right' + index].s('clip.percentage', rightStartClipIndexs[index - 1] + (0 - rightStartClipIndexs[index - 1]) * v);
}
});
};
// 通过判定延迟时间数组的长度，回调 action 动画的执行
for (let i = 0, l = delayArrays.length; i < l; i++) {
ht.Default.callLater(action, this, [i + 1], delayArrays.shift());
}
}
data.s ('clip.percentage') is the style attribute that comes with the HT node. Its essential meaning is that the entire vector icon can be cropped by the specified direction:
A movie can show different narrative effects through the switching of various lenses. The rapid switching of the hot blood running in the sunset of the Japanese drama or the fading fading in the dark corner are all a kind of narrative treatment. Similarly, there is also the HT set of 3D scenes are a multitude of narrative technique, the most basic settings is through the subjective eye scene eye and the center of the scene center to match to achieve a variety of animation, can set their own value Can be modified by HT's own method functions. For example, flyTo () and moveCamera () are the most basic camera animations. If you are interested, you can learn about it. Try it with yourself. The advantages of 3D scenes.
The roaming animation is to better patrol the scene from different perspectives. As long as you set up several sets of eye perspectives, use HT 's moveCamera () camera perspective animation to sequentially switch the scenes under different perspectives. Effect.
// 默认设置的眼睛视角数组
const ROAM_EYES = [
[1683.6555274005063, 939.9999999999993, 742.6554147474625],
[1717.1004359371925, 512.9256996098727, -1223.5575465999652],
[-181.41773461002046, 245.58303266170844, -2043.6755074222654],
[-1695.7113902533574, 790.0214102589537, -877.645744191523],
[-1848.1700283399357, 1105.522705042774, 1054.1519814237804],
[-108, 940, 1837]
];
// 开启相机移动漫游动画
playRoam() {
// 设置场景眼睛视角
let eye = ROAM_EYES[this.roamIndex];
// 开启相机视角移动动画 moveCamera
this._roamAnim = this.view.moveCamera(eye, [0, 0, 0], {
duration: this.roamIndex ? 3000 : 4000,
easing: Easing.easeOut,
finishFunc: () => {
this.roamIndex ++;
let nextEye = ROAM_EYES[this.roamIndex];
// 判断是否有下一组眼睛视角，有的话继续执行相机视角移动动画，反之则重置漫游动画
if (nextEye) {
this.playRoam();
}
else {
// 事件派发执行显示面板动画
event.fire(EVENT_SHOW_PANEL);
this.resetRoam();
}
}
});
}
If the scene perspective roaming is a reflection of the overall view, then the loading and transportation of the molten iron tank car and the transportation of the conveyor belt are a puzzle of the blast furnace ironmaking process . Through the expression of a series of animation processes, you will clearly find that the explanation in a specific 3D scene has a complete series of stories.
The following is the animation process of loading and transportation of hot metal tank truck:
In the 3D scene, x, y, z are used to represent the three axes, and the displacement effect can be achieved by continuously modifying the 3D coordinates of the node car.setPosition3d (x, y, z), and for the loading label on the hot metal tank truck Use the adsorption function to make it adhere to the hot metal tank car and then move along with it, and then use car.s ('3d.visible', true | false) to control the appearance and hiding of the hot metal tank car at the specified spatial coordinate position Effect.
The instructions for the transmission of coal and iron ore on the conveyor belt and the gas circulation of the pipeline will be much more convenient by using the offset of the UV texture map. Let's take a look at the effect:
For the three-dimensional model, there are two important coordinate systems, namely the vertex position coordinates (X, Y, Z) and UV coordinates. Visually speaking, UV is the basis for mapping the texture onto the model surface. U and V are the coordinates of the picture in the horizontal and vertical directions of the display, respectively, and the values are generally 0 ~ 1. The instructions of the conveyor belt and the pipeline are implemented in this way. The HT model node has its own uv value style attributes. We only need to constantly control its offset changes to achieve the transmission effect:
// 设置初始偏移值
let offset1 = 0, trackOffset = 0;
// 一直调用设置偏移值
setInterval(() => {
flows.each(node => {
node.s({
'top.uv.offset': [-offset1, 0],
'front.uv.offset': [-offset1, 0],
});
});
track.s('shape3d.uv.offset', [0, -trackOffset]);
// 偏移值增加
offset1 += 0.1;
trackOffset += 0.03;
}, 100);
to sum up
Digital and intelligent large-screen control is the industry of Internet trends, largely liberated human and labor, in the information age of rapid communications, combined with large data visualization and intelligent control, it will deduce many surprising results collision. Under the supervision of real-time data, early warning information is also very important. While ensuring the orderly production, we must also pay attention to security issues, so many of the content presented on the big screen are extremely representative of the industry ’s pace to keep up with the industrial Internet.
In 2019, we have also updated hundreds of industrial Internet 2D / 3D visualization case sets, where you can find many novel examples and discover different industrial Internet: https://mp.weixin.qq.com/s / ZbhB6LO2kBRPrRIfHlKGQA
At the same time, you can also view more cases and effects: https://www.hightopo.com/demos/index.html
