基于 HTML5 的计量站三维可视化监控系统 Web 组态工控应用

本文主要是介绍基于 HTML5 的计量站三维可视化监控系统 Web 组态工控应用,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

得益于 HTML5 WebGL 技术的成熟,从技术上对工控管理的可视化,数据可视化变得简单易行!完成对工控设备的管理效率,资源管理,风险管理等的大幅度提高,同时也对国家工业4.0计划作出有力响应!

如本案例所示,是一个基于 HTML5 WebGL 技术实现的计量站三维可视化监控系统,在本案例中,具体宏观的展示一个油田站点的整体场景,然后点击可以进入内景看到油田计量站内景的具体情况,同时可以看到各个设备的参数的当前状态。

同样的其中功能组件具有很高的复用性,所以也会非常方便的应用到其他场景中!

如下所示,便是本案例运行动态图:

此项目链接:基于 HTML5 WebGL 的计量站三维可视化监控系统 Web 组态工控应用

(http://www.hightopo.com/demo/metering-station/)

在这个场景中主要有如下几个功能:

1、点击来回切换场景;

2、管线流动效果;

3、数据面板动态显示;

确认功能需求后就可以开始实施实现,动手实现之前要先确认场景有哪些,如下所示主要有油田外景和内景。

外景:

内景:

技能储备

本 demo 需要掌握 HT for Web 的 2d 和 3d 相关 技术,具体技术参考资料可以去 HT for Web 官网图扑软件了解。

实现功能

1、默认视角

在三维场景中,需要先设置一个默认视角,当重新打开页面时候直接回到默认视角,通过 setFar , setEye 和 setCenter 方法实现。

gv.setFar(100000);
gv.setEye([1247, 600, 1972]);
gv.setCenter([0, 0, 0]);

2、视角限制

由于三维场景的特性,如果不作出视角限制,就会出现穿模,翻底等现象,尤其本案例有天空球效果,如果不作出视角限制当用户无限拉远后会出现视角跑到天空球外,场景消失问题,这将会非常尴尬!

具体实现是通过 setEye 方法和 setCenter 方法控制场景的 eye 和 center 变量实现,放置到 gv.mp 函数内。

mp(listener, scope, ahead)  增加自身属性变化事件监听器
//限制eye
gv.mp(function (e) {if (e.property === 'eye') {if (gv.getEye()[1] < 90) {gv.getEye()[1] = 90;}if (gv.getEye()[1] > 1500) {gv.getEye()[1] = 1500;}if (gv.getEye()[0] > 2400) {gv.getEye()[0] = 2400;}if (gv.getEye()[0] < -2400) {gv.getEye()[0] = -2400;}if (gv.getEye()[2] > 2500) {gv.getEye()[2] = 2500;}if (gv.getEye()[2] < -2400) {gv.getEye()[2] = -2400;}}
})

3、点击切换场景

通过 mi 添加交互事件监听器为要点机交互模型绑定事件,通过 e.kind 判断点击事件,然后通过 tag 标签名获取要点击交互的模型对象。

首先在点击时候有个拉近效果和周围模型透明化效果,则是通过 flyTo 实现拉近效果和 setStyle 方法实现拉近后其他模型透明化。

具体代码如下:

gv.mi(function (e) {if (e.kind === 'clickData') {for (var i = 1; i <= 2; i++) {if (e.data.getTag() === 'engineRoom' + i) {//点击拉近场景gv.flyTo(e.data, {animation: true,distance: 500});//选中模型实化e.data.setStyle('shape3d.transparent', false);e.data.setStyle('shape3d.opacity', 1);//其他模型透明化dm.each(data => {if (data.getTag() != 'engineRoom' + i) {data.setStyle('shape3d.transparent', true);data.setStyle('shape3d.opacity', 0.3);data.setStyle('all.transparent', true);data.setStyle('all.opacity', 0.5);}})}}}
})

实现效果如下:

然后在完成拉近场景和透明化其他模型后,开始搞场景切换效果。

场景切换的核心是通过 gv.deserialize() 反序列化显示路径对应场景,通过输入场景路径参数,在回调函数内完成场景渲染显示,代码如下:

gv.deserialize('scenes/油田.json', function (json, dm, gv, datas) {if (json.title) document.title = json.title;if (json.a['json.background']) {var bgJSON = json.a['json.background'];if (bgJSON.indexOf('displays') === 0) {var bgGv = new ht.graph.GraphView();bgGv.deserialize(bgJSON);bgGv.addToDOM();graphView.addToDOM(bgGv.getView());}else if (bgJSON.indexOf('scenes') === 0) {var bgG3d = new ht.graph3d.Graph3dView();bgG3d.deserialize(bgJSON);bgG3d.addToDOM();graphView.addToDOM(bgG3d.getView());}graphView.handleScroll = function () { };}
})

但在在这之前有一个问题,就是如何处理当前场景和通过反序列化渲染显示场景的关系,如果不作处理,就会出现当前场景和要切换显示的场景重合问题,所以在点击切换场景过程中,要先清空当前场景,为后来要切换的场景腾出地方。

所以在前面要先加一行代码:

dm.clear();

做完处理后,现在是完成了切换过去效果,但还有要切换回来的功能,这个实现非常简单,取了个巧,直接 window.location.reload(); 刷新页面就好。

最终这部分完整代码如下:

function jump(position3d) {var timer = setInterval(function () {clearInterval(timer)var distance = ht.Default.getDistance(gv.getEye(), position3d);if (distance <= 501) {var home = g2d.dm().getDataByTag('home');home.s('2d.visible', true);var line = g2d.dm().getDataByTag('line');line.s('2d.visible', true);dm.clear();gv.deserialize('scenes/油田.json', function (json, dm, gv, datas) {if (json.title) document.title = json.title;if (json.a['json.background']) {var bgJSON = json.a['json.background'];if (bgJSON.indexOf('displays') === 0) {var bgGv = new ht.graph.GraphView();bgGv.deserialize(bgJSON);bgGv.addToDOM();graphView.addToDOM(bgGv.getView());}else if (bgJSON.indexOf('scenes') === 0) {var bgG3d = new ht.graph3d.Graph3dView();bgG3d.deserialize(bgJSON);bgG3d.addToDOM();graphView.addToDOM(bgG3d.getView());}graphView.handleScroll = function () { };}})}}, 500)
}

我将它放置到 jump 函数内,然后将 jump 函数放到前面点击事件中调用,让代码整体简洁一些。

实现效果如下图:

4、管线流动效果和动态数据面板

最后两个功能实现非常简单,我就放到一块来说。

首先效果如下图所示:

管线流动效果的实现核心就是控制 UV 贴图偏移,所以通过动画控制器 startAnim 控制 UV 贴图偏移量就可以实现,在动画结束时,在 finishFunc 内回调函数即可实现动画循环。

pipelineAnim(0.1)
function pipelineAnim(offset1) {var anim1 = ht.Default.startAnim({duration: 2000,action: function () {offset1 += 0.015;var pipelines = gv.dm().getDataByTag('pipeline');pipelines.setStyle('shape3d.uv.offset', [-offset1, 0]);},finishFunc: function () {pipelineAnim(offset1);}})
}

数据面板则是通过定时器在固定间隔时间循环执行赋予随机数即可,在这里通过随机数模拟真实数据,在实际当中是通过和后台对接实现真实数据动态变化,代码如下:

setInterval(function () {for (var i = 1; i <= 4; i++) {var panels = gv.dm().getDataByTag('panel' + i);for (var j = 1; j <= 3; j++) {if (panels.a('text' + j) != undefined) {var num = parseFloat(Math.random() * (100 - 10 + 1) + 10, 10).toFixed(2);var textJson = { "参数名": "出口温度", "参数值": num, "参数单位": panels.a('text' + j)['参数单位'] };panels.a('text' + j, textJson);}}}
}, 1000)

结束语

以上便是我今天给大家带来的工控案例,希望各位看官能够喜欢本demo,在本案例中能够得到一些启发。

 

 

 

 

这篇关于基于 HTML5 的计量站三维可视化监控系统 Web 组态工控应用的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1120649

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

流媒体平台/视频监控/安防视频汇聚EasyCVR播放暂停后视频画面黑屏是什么原因?

视频智能分析/视频监控/安防监控综合管理系统EasyCVR视频汇聚融合平台,是TSINGSEE青犀视频垂直深耕音视频流媒体技术、AI智能技术领域的杰出成果。该平台以其强大的视频处理、汇聚与融合能力,在构建全栈视频监控系统中展现出了独特的优势。视频监控管理系统EasyCVR平台内置了强大的视频解码、转码、压缩等技术,能够处理多种视频流格式,并以多种格式(RTMP、RTSP、HTTP-FLV、WebS

不懂推荐算法也能设计推荐系统

本文以商业化应用推荐为例,告诉我们不懂推荐算法的产品,也能从产品侧出发, 设计出一款不错的推荐系统。 相信很多新手产品,看到算法二字,多是懵圈的。 什么排序算法、最短路径等都是相对传统的算法(注:传统是指科班出身的产品都会接触过)。但对于推荐算法,多数产品对着网上搜到的资源,都会无从下手。特别当某些推荐算法 和 “AI”扯上关系后,更是加大了理解的难度。 但,不了解推荐算法,就无法做推荐系

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

中文分词jieba库的使用与实景应用(一)

知识星球:https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义: 精确模式(默认模式): 全模式: 搜索引擎模式: paddle 模式(基于深度学习的分词模式): 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取

基于人工智能的图像分类系统

目录 引言项目背景环境准备 硬件要求软件安装与配置系统设计 系统架构关键技术代码示例 数据预处理模型训练模型预测应用场景结论 1. 引言 图像分类是计算机视觉中的一个重要任务,目标是自动识别图像中的对象类别。通过卷积神经网络(CNN)等深度学习技术,我们可以构建高效的图像分类系统,广泛应用于自动驾驶、医疗影像诊断、监控分析等领域。本文将介绍如何构建一个基于人工智能的图像分类系统,包括环境

水位雨量在线监测系统概述及应用介绍

在当今社会,随着科技的飞速发展,各种智能监测系统已成为保障公共安全、促进资源管理和环境保护的重要工具。其中,水位雨量在线监测系统作为自然灾害预警、水资源管理及水利工程运行的关键技术,其重要性不言而喻。 一、水位雨量在线监测系统的基本原理 水位雨量在线监测系统主要由数据采集单元、数据传输网络、数据处理中心及用户终端四大部分构成,形成了一个完整的闭环系统。 数据采集单元:这是系统的“眼睛”,

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

hdu1240、hdu1253(三维搜索题)

1、从后往前输入,(x,y,z); 2、从下往上输入,(y , z, x); 3、从左往右输入,(z,x,y); hdu1240代码如下: #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#inc