基于Web SCADA平台构建实时数字化产线 - 初篇
如各位对Web SCADA平台及技术感兴趣，欢迎转发或私信我，大家共同学习，相互交流共同进步；
构建数字化产线是近几年国家推出两化融化后、智能制造等相应政策后的产物，传统的信息化、工业化相对独立的走了大几十年，目前迎来了两化的大融合，当然也是技术与行业发展的一个必然，其中组态系统一直存在于上层管理信息化与下层自动化之间，融合前组态（SCADA）系统大多以CS架构出现，其重点是关键生产工艺，大多数的使用场景是在车间中控室内，伴随着移动设备及相应WEB技术的不断成熟，基于Web技术的SCADA系统得到了快速发展，通过WEB SCADA平台能够实现的场景因其所在的企业内的位置就决定了其应用的广泛性，本篇重点关注如何通过WEB SCADA平台构建数字化产线，如下：
当前我们讨论的数字化产线只是单纯意义的底层数据采集并通过采集后的数据驱动3D模型所实现的单向数字化产线，重点在展示；
第一步：
目前通用的做法是通过3D建模软件对产线上关键性的设备进行三维建模，这个过程如果需要将效果做的更加的真实，需要配合动画效果，将关键设备及所采集的数据与设备部件加以关联，制作出对应的动画效果，最终导出带有动画的GLB或GLTF格式的文件；
第二步 ：
将GLB文件通过ThreeJS的GLTFLoader JS包进行引入，如下：
<!--引入three.js三维引擎--><script src="./scripts/three.js"></script><!-- 引入global加载器 --><script src="./scripts/GLTFLoader.js"></script><!--引入轨道控件OrbitControls.js--><script src="./scripts/OrbitControls.js"></script><script type='text/javascript'src='system/scripts/igrX2.js'></script>loader.load('./glb/labeling_machine5.glb', function (glb) {glb.scene.position.set( 0,0,0)glb.scene.add(moonMassLabel); scene.add(glb.scene);}, undefined, function ( error ) {console.error( error );} );第三步：
将引入后的GLB动画文件，通过ThreeJS进行动画控制，如下：
mixer = new THREE.AnimationMixer( model );
console.log('mixer' + mixer);
idleAction = mixer.clipAction( animations[ 0 ] );
walkAction = mixer.clipAction( animations[ 3 ] );
runAction = mixer.clipAction( animations[ 1 ] );
actions = [ idleAction, walkAction, runAction ];//控制其动画的播放
actions.forEach( function ( action ) {action.play();
} );第四步：
比较关键的一步是需要将底层采集到的数据与ThreeJS代码进行整合，实现整体的效果，IGX Web SCADA 平台已经将底层采集的数据封装为JS包，IGX Web SCADA附带了一些额外的专有功能或方法来简化编程工作，主要用于与服务器通信的脚本。setTag（'TagName'，Data）用于设置Tag 值，其中TagName 是字符串中的标签，Data 是保存值以设置到特定Tag 中的变量。getTag（'TagName'）用于获取Tag 值，它返回相关数据类型中的值。sleep（DELAY）用于保持脚本执行指定的时间，DELAY 以毫秒为单位。setTimeout（）和setInterval（）在大多数情况下可能无法在服务器端工作。所以此处通过getTag（'TagName'） 获取到设备部件相应的数据，通过变量与JS脚本进行融合使其插入动画；
如下：
//控制其动画的播放
if (getTag('Tag') == 1）
{actions.forEach( function ( action ) {action.play();} );
}关于对应设备数据标签的实时显示，通过引入2D文本渲染JS包，如下：
import { CSS2DRenderer, CSS2DObject } from './jsm/renderers/CSS2DRenderer.js';并与IGX Web SCADA提供的igrX2.js中的getTag('tagName')相结合，实现定时的数据获取与展示，如下：
function setVal1(){var t;var para = getTag('part_a');t = setTimeout(function(){setVal1()},2000);document.getElementById("label_id").innerHTML= "</br><strong>一线灌装机</strong></br>" + "</br>实际速度(B/H): <font color='#87CEEB'>" + getTag('part_a').toFixed(2) + '</font></br></br>' + "环缸压力(Bar): <font color='#FF4500'>" + getTag('part_b').toFixed(2) + '</font></br></br>' + '操作小时数(H): ' + getTag('part_c').toFixed(2) + '</br></br>' + "供料温度(℃): <font color='#EEE8AA'>" + getTag('part_c').toFixed(2) + '</font></br></br>' +"调节阀开度(%): <font color='#EEE8AA'>" + getTag('app.currentTime.second').toFixed(2)+ '</font></br></br>';
}初步的实现效果如下：
当前属于一条产线的一台设备的加载与展示，其细节仍需要地进行相应的优化，多台设备的加载方式与当前设备一致，动画环节我们在随后几篇文章中进行展示，请持续关注；
整体代码发布如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"><link rel="stylesheet" type="text/css" href="system/styles/igrX.css" /><title>pb展示</title><!--引入three.js三维引擎--><script src="./scripts/three.js"></script><!-- 引入global加载器 --><script src="./scripts/GLTFLoader.js"></script><!--引入轨道控件OrbitControls.js--><script src="./scripts/OrbitControls.js"></script><style>.label {color: #FFF;font-family: sans-serif;padding: 2px;background: rgba( 0, 0, 0, .6 );}</style></head>
<body><div id="junying"></div><!-- Import maps polyfill --><!-- Remove this when import maps will be widely supported --><script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script><script type="importmap">{"imports": {"three": "./build/three.module.js"}}</script><!-- 加载模型文件 --><!-- <script src="./scripts/3dmodel_KRONES.js"></script> --><script type="module">import { OrbitControls } from './jsm/controls/OrbitControls.js';import { CSS2DRenderer, CSS2DObject } from './jsm/renderers/CSS2DRenderer.js';import { GUI } from './jsm/libs/lil-gui.module.min.js';let gui;let camera, scene, renderer, labelRenderer;let junying = document.getElementById("junying");const layers = {'Toggle Name': function () {camera.layers.toggle( 0 );},'Toggle Mass': function () {camera.layers.toggle( 1 );},'Enable All': function () {camera.layers.enableAll();},'Disable All': function () {camera.layers.disableAll();}}const clock = new THREE.Clock();const textureLoader = new THREE.TextureLoader();let moon;init();animate();setVal1(); function init() {const EARTH_RADIUS = 1;const MOON_RADIUS = 1.27;camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 1000);camera.position.set( 100,40,120 );camera.layers.enableAll();//camera.layers.toggle( 0.1 );scene = new THREE.Scene();scene.background = new THREE.Color( 0xb0b0b0 );const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );hemiLight.position.set( 0, 200, 0 );scene.add( hemiLight );const directionalLight = new THREE.DirectionalLight( 0xffffff );directionalLight.position.set( 0, 200, 100 );directionalLight.castShadow = true;directionalLight.shadow.camera.top = 180;directionalLight.shadow.camera.bottom = - 100;directionalLight.shadow.camera.left = - 120;directionalLight.shadow.camera.right = 120;scene.add( directionalLight );const ground = new THREE.Mesh( new THREE.PlaneGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );ground.rotation.x = - Math.PI / 2;ground.receiveShadow = true;scene.add( ground );const grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );grid.material.opacity = 0.2;grid.material.transparent = true;scene.add( grid );// 加载模型var loader = new THREE.GLTFLoader();const moonMassDiv = document.createElement( 'div' );moonMassDiv.className = 'label';moonMassDiv.id="label_id";moonMassDiv.textContent = '7.342e22 kg';moonMassDiv.style.marginTop = '2px';moonMassDiv.style.width='154px';moonMassDiv.style.height='167px';moonMassDiv.style.border = '1px solid #000';const moonMassLabel = new CSS2DObject( moonMassDiv );moonMassLabel.position.set( 10, 2 * 22, 0 );//glb.add( moonMassLabel );moonMassLabel.layers.set( 1 );loader.load('./glb/labeling_machine5.glb', function (glb) {glb.scene.position.set( 0,0,0)glb.scene.add(moonMassLabel); scene.add(glb.scene);}, undefined, function ( error ) {console.error( error );} );//renderer = new THREE.WebGLRenderer();renderer.setPixelRatio( window.devicePixelRatio );renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );labelRenderer = new CSS2DRenderer();labelRenderer.setSize( window.innerWidth, window.innerHeight );labelRenderer.domElement.style.position = 'absolute';labelRenderer.domElement.style.top = '0px';document.body.appendChild( labelRenderer.domElement );const controls = new OrbitControls( camera, labelRenderer.domElement );controls.minDistance = 0;controls.maxDistance = Infinity;//window.addEventListener( 'resize', onWindowResize );initGui();}function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize( window.innerWidth, window.innerHeight );labelRenderer.setSize( window.innerWidth, window.innerHeight );}function animate() {requestAnimationFrame( animate );const elapsed = clock.getElapsedTime();renderer.render( scene, camera );labelRenderer.render( scene, camera );}function initGui() {gui = new GUI();gui.add( layers, 'Toggle Name' );gui.add( layers, 'Toggle Mass' );gui.add( layers, 'Enable All' );gui.add( layers, 'Disable All' );}function setVal1(){var t;var para = getTag('part_a');t = setTimeout(function(){setVal1()},2000);document.getElementById("label_id").innerHTML= "</br><strong>一线灌装机</strong></br>" + "</br>实际速度(B/H): <font color='#87CEEB'>" + getTag('part_a').toFixed(2) + '</font></br></br>' + "环缸压力(Bar): <font color='#FF4500'>" + getTag('part_b').toFixed(2) + '</font></br></br>' + '操作小时数(H): ' + getTag('part_c').toFixed(2) + '</br></br>' + "供料温度(℃): <font color='#EEE8AA'>" + getTag('part_c').toFixed(2) + '</font></br></br>' +"调节阀开度(%): <font color='#EEE8AA'>" + getTag('app.currentTime.second').toFixed(2)+ '</font></br></br>';}</script></script><style>body { margin: 0;overflow: hidden;}</style>
</body>
</html><script type='text/javascript'src='system/scripts/igrX2.js'></script>如各位对Web SCADA平台及技术感兴趣，欢迎转发或私信我，大家共同学习，相互交流共同进步；
基于Web SCADA平台构建实时数字化产线 - 初篇相关推荐
- 基于Web SCADA平台构建数字化车间的MES系统
数字化车间的MES系统与偏管理的信息化系统(如ERP.CRM.SRM等)最大的区别在于数据的"实时性",以传统的管理为主线的信息化系统因无法及时的将数据录入进系统,使得管理信息化中 ...
- 基于Web SCADA平台构建气体计量系统及SCADA监控系统
如各位对Web SCADA平台及技术感兴趣,欢迎转发或私信我,大家共同学习,相互交流共同进步: Ecava IGX Validates for Fairview Gas Metering Syste ...
- 基于最新WEB技术的Web SCADA平台构建数字化车间
近年来,随着工业4.0在我国的逐渐普及和深化发展,企业的信息化建设不断的深入,制造业也在向物联网的方向发展.在现在的工厂管理中,由于使用了大量的设备,因此对设备运行状态以及能源耗用,包括环境参数监控成 ...
- 基于Web SCADA平台的食品饮料行业数字化系统
管理信息化和工业自动化的融合是企业进一步降本增效.实现工艺及质量管控最有效的一种方案,这种方法的出现只是两者相互影响并各自发展了多年后的一个必然结果,这种融合是大势所趋. 近期经常和伙伴及客户们聊起来 ...
- 基于IGX Web SCADA平台构建 - 污水处理厂监控系统
如各位对Web SCADA平台及技术感兴趣,欢迎转发或私信我,大家共同学习,相互交流.共同进步.共赢: Ecava IGX Takes Control of Sungai Udang Sewage T ...
- 恒丰银行基于大数据平台构建数据仓库的研究与实践
恒丰银行原传统数据仓库是建立在IOE(IBM.ORACLE.EMC)传统架构体系上,已接入数据源系统有30多个,配套建立监管数据集市.数据分析集市,风险数据集市三个主要数据集市,负责十几个管理应用和监 ...
- 基于嵌入式图像处理平台的实时多目标识别算法
基于嵌入式图像处理平台的实时多目标识别算法 人工智能技术与咨询 昨天 本文来自<科学技术与工程>,作者 王旭辉等 摘 要 提出了一种适用于空间观测任务的实时多目标识别算法,它基于DSP和F ...
- 基于芯片研发平台构建运维体系
基于芯片研发平台构建运维体系 说起芯片研发平台的运维,一定要从EDA(电子设计自动化)研发环境的信息化建设说起.一块电脑主板的研发,到整台服务器的研发,都涉及到EDA研发环境的运维,是一个复杂的信息化 ...
- 华为云MRS基于Hudi和HetuEngine构建实时数据湖最佳实践
数据湖与实时数据湖是什么? 各个行业企业都在构建企业级数据湖,将企业内多种格式数据源汇聚的大数据平台,通过严格的数据权限和资源管控,将数据和算力开放给各种使用者.一份数据支持多种分析,是数据湖最大的特 ...
最新文章
- 「要拼就拼运维」5分钟一台？它让我爱上工作了！
- 表现层框架Struts/Tapestry/JSF架构比较 [转]
- CentOS7.0重置Root的密码
- 《ArcGIS Engine+C#实例开发教程》第三讲 MapControl与PageLayoutControl同步
- 脑植入芯片实现脑机交互，脑神经链会如星链般放大马斯克的光环吗
- lstm 变长序列_keras在构建LSTM模型时对变长序列的处理操作
- Dojo 如何测试 widget 1
- C语言课后习题(40)
- 3像素尺寸是多少_纸张的尺寸
- 级联MobileNet-V2实现CelebA人脸关键点检测（附训练源码）
- 使用dd工具对磁盘RAID5和10进行I/O性能测试
- graphics java_Graphics
- mac 中用到的svn命令 持续更新
- keras图像风格迁移
- AI 场景存储优化：云知声超算平台基于 JuiceFS 的存储实践
- yarn : 无法加载文件 C:\Users\Emily\AppData\Roaming\npm\yarn.ps1，因为在此系统上禁止运行脚本。
- 五个成人必看的故事！
- wcs开发_WCS 5.2的评论—用于Webcast和Webcam开发人员的WebRTC服务器
- 史上最全Python快速入门教程，让你快速入门python学好python
- DP专题考试总结（4）