基于 HTML5 的工业互联网 3D 可视化应用
工业企业中生产线处于高速运转,由工业设备所产生、采集和处理的数据量远大于企业中计算机和人工产生的数据,生产线的高速运转则对数据的实时性要求也更高。破解这些大数据就是企业在新一轮制造革命中赢得竞争力的钥匙。因此,工业生产可视化系统是工业制造业的最佳选择。
工业生产可视化是将虚拟现实技术有机融入了工业监控系统,系统展现界面以生产厂房的仿真场景为基础,对各个工段、重要设备的形态都进行复原,作业流转状态可以在厂房视图当中直接显示。在单体设备视图中,机械设备的运行模式直接以仿真动画的形式展现,通过图像、三维动画以及计算机程控技术与实体模型相融合,实现对设备的可视化表达,使管理者对其所管理的设备有形象具体的概念。同时,对设备运行中产生的所有参数一目了然,从而大大减少管理者的劳动强度,提高管理效率和管理水平。
以下是基于 HT for Web(http://www.hightopo.com/)的裙房监控系统的具体解决方案动图:
3D 场景搭建
var g3d = new ht.graph3d.Graph3dView();// Hightopo 的 3D 组件(三维场景地基)
g3d.addToDOM();// 将 3D 组将添加到 body 体中
addToDOM = function(){
var self = this,
view = self.getView(),//获取组件的底层 div
style = view.style;
document.body.appendChild(view);//将组件底层div添加进body中
style.left = '0';//ht 默认将所有的组件的position都设置为absolute绝对定位
style.right = '0';
style.top = '0';
style.bottom = '0';
window.addEventListener('resize', function () { self.iv(); }, false);//窗口大小改变事件,调用刷新函数
}
var dm = g3d.dm();// 获取 HT 3D 组件的数据容器
ht.Default.xhrLoad('scenes/system.json', function(text) {
dm.deserialize(text);// 将函数的 text(json)参数传给 deserialize 反序列化方法,可将 json 内容中的元素添加到 dataModel 数据容器中进行显示
}
场景中叶轮的转动
var task = [];
var yelun = dm.getDataByTag('yelun');// 获取 tag 为 yelun 的节点
// 创建一个动画调度任务
task.yelunTask = {
interval: 100,// 动画持续时间
action: function(data) {// 动画内容
if (data !== yelun) return;
// 设置 yelun 节点的 x 轴旋转为当前 x 轴旋转值再加上 Math.PI/12
yelun.setRotationX(yelun.getRotationX() + Math.PI/12);
}
}
dm.addScheduleTask(task.yelunTask);// 将调度任务添加到数据容器中
容器水位的上升下降
容器中水位的上升下降也是数字孪生(双胞胎)的体现,数据同步进行展现给监控人员,监控人员不需要进行数据采集系统也能直接获取当前数据。
action: function(data) {
if (!(data === yelun || data === cylinder)) return;
// 叶轮转动
yelun.setRotationX(yelun.getRotationX() + Math.PI/12); // 容器水位变化
if (cylinder.getTall() === 100) cylinder.setTall(0);// 容器水位高度到达 100 的值时,重置为 0else cylinder.setTall(cylinder.getTall() + 1);
}
叶轮转动故障展示
var alarm = dm.getDataByTag('alarm');// 获取告警图标节点
setInterval(function() {
var random = Math.floor(Math.random()*5);
if (random === 1) {
alarm.s('shape3d.image', 'symbols/电信/故障 2.json');// 设置告警图标节点为“故障”图标
dm.removeScheduleTask(task.yelunTask);// 将叶轮的动画加上
}
else {
alarm.s('shape3d.image', 'symbols/电信/正常 2.json');// 设置告警图标节点为“正常”图标
dm.addScheduleTask(task.yelunTask);// 移除叶轮的动画
}
}, 1000);
开启/关闭动画
function createForm(task) {
var form = new ht.widget.FormPane();// 创建 form 表单组件对象
form.setWidth(160);// 设置表单组件的宽度
form.setHeight(90);// 设置表单组件的高度
// 设置表单组件底层 div 的样式属性
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 表单底层 div 添加到 body 体中 // 水阀开启和关闭
form.addRow([// 给 form 表单添加一行数据
{
checkBox: {// 复选框类,HT 将此封装到 form 中 实际上创建了一个 ht.widget.CheckBox 组件
label: '水流开关',// 设置 checkbox 的文本内容
labelColor: '#fff',// 设置 checkbox 文本颜色
selected: true,// 设置此 checkbox 是否选中
onValueChanged: function() {// 监听值变化事件
if (this.isSelected()) dm.addScheduleTask(task.arrowTask);// 如果这个 checkBox 选中,则添加动画(开启水阀)
else dm.removeScheduleTask(task.arrowTask);// 如果这个 checkBox 未被选中,则移除动画(关闭水阀)
}
}
}
], [0.1]);// 设置这个行数据中列的宽度
return form;
}
- items为元素数组,元素可为字符串、json 格式描述的组件参数信息、html 元素或者为 null 的空
- widths 为每个元素宽度信息数组,宽度值大于 1 代表固定绝对值,小于等于 1 代表相对值,也可为 80+0.3 的组合
- height 为行高信息,值大于 1 代表固定绝对值,小于等于 1 代表相对值,也可为 80+0.3 的组合,为空时采用默认行高
- params 为 json 格式的额外参数,例如插入行索引以及行边框或背景颜色等,如 { index: 2, background: 'yellow', borderColor: 'red' }
灯光的开启/关闭
// 添加灯光
var light = new ht.Light();// 创建一个灯节点(继承于 ht.Node) (https://hightopo.com/guide/guide/core/lighting/ht-lighting-guide.html)
light.p3([15, 120, 50]);// 设置此节点的位置
light.setTag('light');// 设置此节点的唯一标识
dm.add(light);// 将此节点添加到 dm 数据容器中进行显示
light.s({// 设置此节点的样式属性 setStyle 简写为 s
'light.type': 'point',// 设置灯类型
'light.color': 'rgb(252,252,149)',// 设置灯颜色
'light.range': 1400,// 设置灯照范围
'3d.visible': false// 设置此节点在 3d 上不可见
});
// 9、灯光开启和关闭 以及颜色切换
form.addRow([// form 中添加一行 {
id: 'lightDisabled',// 设置此项的 id 值,可通过 form.getItemById 获取此项
checkBox: {// 复选框组件
label: '开关灯',// 设置复选框文本内容
labelColor: '#fff',// 设置复选框文本颜色
selected: true,// 设置复选框是否选中
onValueChanged: function() {// 监听值变化事件
dm.getDataByTag('light').s('light.disabled', !this.getValue());// 获取灯节点并设置是否关闭灯光效果,light.disabled 属性默认为false,可设置为true关闭灯效果
}
}
},
{
colorPicker: {// 颜色选择器组件
value: 'rgb(252,252,149)',// 设置当前值
instant: true,// 设置是否处于即时状态,将会实时改变模型值
onValueChanged: function() {// 监听值变化事件
dm.getDataByTag('light').s('light.color', this.getValue())// 设置灯的颜色为当前选中的颜色 }
}
}
], [0.1, 0.1]);
点击切换模型
var waterPump6 = dm.getDataByTag('水泵06');// 获取 tag 为“水泵06”的节点
waterPump6.s({// 设置该节点的样式属性
'note': '点我切换模型',// 设置标注文字内容
'note.transparent': true,// 设置标注在 3D 下是否透明
'note.t3': [0, 0, -50],// 设置标注在 3D 下的偏移
'note.reverse.flip': true//设置标注背面是否显示正面的内容
});
g3d.mi(function(e) {// 监听 3D 组件上的事件
if(e.kind === 'clickData') {// 点击节点事件
// 模型点击切换
if (e.data === waterPump6 && e.data.s('shape3d') === 'models/裙房系统/水泵.json') e.data.s('shape3d', 'models/fengji.json');// 设置点击节点的 shape3d 样式属性
else if (e.data === waterPump6 && e.data.s('shape3d') === 'models/fengji.json') e.data.s('shape3d', 'models/裙房系统/水泵.json');// 设置点击节点的 shape3d 样式属性
}
});
点击隐藏/显示属性窗口
var waterPump5 = dm.getDataByTag('水泵05');
waterPump6.s({
'note': '点我切换模型',
'note.transparent': true,
'note.t3': [0, 0, -50],
'note.reverse.flip': true
});
g3d.mi(function(e) {
if(e.kind === 'clickData') {
// 模型点击切换
if (e.data === waterPump6 && e.data.s('shape3d') === 'models/裙房系统/水泵.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/裙房系统/水泵.json'); // 模型点击 隐藏/显示属性窗口
if (e.data === waterPump5) {// 判断点击的图元是否为 waterPump5
if(giveWater.s('3d.visible')) {// 判断当前属性窗口是否为显示状态
giveWater.s('3d.visible', false);// 设置属性窗口不可见
e.data.s('note', '点我显示属性窗口');// 更改标注中的显示内容
}
else {
giveWater.s('3d.visible', true);// 设置属性窗口可见
e.data.s('note', '点我隐藏属性窗口')// 更改标注中的显示内容 }
}
}
});
文本内容/颜色变换
工业生产现场数据肯定是不断地变化,数字孪生的特性也在这里充分地展示出来,根据设备返回的数据不断地更新显示数据,清晰地展示了当前设备的动态。
var billboardArray = [];
// 通过 tag 获取节点
var temperature1 = dm.getDataByTag('回水温度1');// 获取 tag 为"回水温度1"的节点
billboardArray.push(temperature1);
var temperature2 = dm.getDataByTag('回水温度2');
billboardArray.push(temperature2);
var returnPress = dm.getDataByTag('回水压力');
billboardArray.push(returnPress);
var givePress = dm.getDataByTag('供水压力');
billboardArray.push(givePress);
var giveTemp = dm.getDataByTag('供水温度');
billboardArray.push(giveTemp);
var giveWater = dm.getDataByTag('供水流量');
billboardArray.push(giveWater);
// 文字标签内容变换
billboardArray.forEach(function(billboard) {
billboard.a('label', billboard.getTag());// 设置数据绑定属性为 label 的属性值为当前节点的 tag 内容
});
// 文字标签数字变换+颜色变换 更改图标中绑定的 value 属性值
setInterval(function() {
billboardArray.forEach(function(billboard) {
var random = Math.random()*100;
billboard.a('value', random.toFixed(2)); // 设置图标中“数值内容颜色”
if (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);
工业互联网 3D 的可视化应用非常广泛,除了裙房监控系统,工业设备比如变压器的数据监控以及智能楼宇外还有很多很多,甚至可以运用到农业以及城市规划上......最后,有兴趣的朋友可以私信或留言交流一下技术或者交个朋友。
基于 HTML5 的工业互联网 3D 可视化应用的更多相关文章
- 基于 HTML5 WebGL 的地铁站 3D 可视化系统
前言 工业互联网,物联网,可视化等名词在我们现在信息化的大背景下已经是耳熟能详,日常生活的交通,出行,吃穿等可能都可以用信息化的方式来为我们表达,在传统的可视化监控领域,一般都是基于 Web SCAD ...
- 基于 HTML5 WebGL 的挖掘机 3D 可视化应用
前言 在工业互联网以及物联网的影响下,人们对于机械的管理,机械的可视化,机械的操作可视化提出了更高的要求.如何在一个系统中完整的显示机械的运行情况,机械的运行轨迹,或者机械的机械动作显得尤为的重要,因 ...
- 基于 HTML5 WebGL 的加油站 3D 可视化监控
前言 随着数字化,工业互联网,物联网的发展,我国加油站正向有人值守,无人操作,远程控制的方向发展,传统的人工巡查方式逐渐转变为以自动化控制为主的在线监控方式,即采用数据采集与监控系统 SCADA.SC ...
- 基于 HTML5 + WebGL 的地铁 3D 可视化系统
前言 工业互联网,物联网,可视化等名词在我们现在信息化的大背景下已经是耳熟能详,日常生活的交通,出行,吃穿等可能都可以用信息化的方式来为我们表达,在传统的可视化监控领域,一般都是基于 Web SCAD ...
- 基于 HTML5 WebGL 的发动机 3D 可视化系统
前言 工业机械产品大多体积庞大.运输成本高,在参加行业展会或向海外客户销售时,如果没有实物展示,仅凭静态.简单的图片说明书介绍,无法让客户全面了解产品,不仅工作人员制作麻烦,客户看得也费力.如 ...
- 基于 HTML5 的工业互联网云平台监控机房 U 位
前言 机柜 U 位管理是一项突破性创新技术--继承了 RFID 标签(电子标签)的优点的同时,完全解决了 RFID 技术(非接触式的自动识别技术)在机房 U 位资产监控场应用景中的四大缺陷,采用工业互 ...
- 基于 HTML5 + WebGL 的无人机 3D 可视化系统
前言 近年来,无人机的发展越发迅速,既可民用于航拍,又可军用于侦察,涉及行业广泛,也被称为“会飞的照相机”.但作为军事使用,无人机的各项性能要求更加严格.重要.本系统则是通过 Hightopo 的 ...
- 基于 HTML5 结合工业互联网的智能飞机控制
前言 从互联网+的概念一出来,就瞬间吸引了各行各业的能人志士,想要在这个领域分上一杯羹.现在传统工业生产行业运用互联网+的概念偏多,但是在大众创业万众创新的背景下,“互联网+”涌出了层出不穷的“玩法” ...
- HTML5+WebGL 的加油站 3D 可视化监控
前言 随着数字化,工业互联网,物联网的发展,我国加油站正向有人值守,无人操作,远程控制的方向发展,传统的人工巡查方式逐渐转变为以自动化控制为主的在线监控方式,即采用数据采集与监控系统 SCADA.SC ...
随机推荐
- 个人项目:Java实现WC
Java实现WC Github项目地址:https://github.com/auxshaw/WC 项目要求 wc.exe 是一个常见的工具,它能统计文本文件的字符数.单词数和行数.这个项目要求写一个 ...
- 使用fiddler对手机上的程序进行抓包
用fiddler对手机上的程序进行抓包,网上有很多的资料,这里写一下来进行备用. 前提: 1.必须确保安装fiddler的电脑和手机在同一个wifi环境下 备注:如果电脑用的是台式机,可以安装一个 ...
- C#-运算符(四)
算术运算符 +:两个操作数相加,例:2+3得5 -:第一个操作数减去第二个操作数 例:5-3得2 *:两个操作数相乘,例:2*3得6 /:分子除以分母,例:5/2得2 %:取模运算符,整除后的余数,例 ...
- 洗礼灵魂,修炼python(70)--爬虫篇—补充知识:json模块
在前面的某一篇中,说完了pickle,但我相信好多朋友都不懂到底有什么用,那么到了爬虫篇,它就大有用处了,而和pickle很相似的就是JSON模块 JSON 1.简介 1)JSON(JavaScrip ...
- 初识kafka
简介 Kafka经常用于实时流数据架构,用于提供实时分析.本篇将会简单介绍kafka以及它为什么能够广泛应用. kafka的增长是爆炸性的.2017年超过三分之一的世界五百强公司在使用kafk ...
- 学习笔记---json和xml区别
测试web时经常和网页数据打交道,会遇到json格式和xml格式,整理整理,记录下来. json最常用的格式是键值对. {"firstName": "Brett" ...
- "敏捷革命"读书笔记
最近看可一本书 书名叫<敏捷革命>外国著作中文翻译 本来想自己总结读后感但是本书后面都有本章的总结,所以下面都已摘抄为主,以备之后快速浏览 第一章 世界的运作方式已经打破 规划是有用的,而 ...
- lua 编译安装
官网http://www.lua.org/download.html Building Lua is implemented in pure ANSI C and compiles unmodifie ...
- Jenkins的环境部署
一.Tomcat环境安装 1.安装JDK(Java环境) JDK下载地址:https://www.oracle.com/technetwork/java/javase/downloads/index. ...
- linux学习笔记整理(九)
第十章 Centos7-系统进程管理本节所讲内容:10.1 进程概述和ps查看进程工具10.2 uptime查看系统负载-top动态管理进程10.3 前后台进程切换- nice进程优先级-实战scre ...