基于 HTML5 WebGL 的 3D 棉花加工监控系统
前言
现在的棉花加工行业还停留在传统的反应式维护模式当中，当棉花加下厂的设备突然出现故障时，控制程序需要更换。这种情况下，首先需要客户向设备生产厂家请求派出技术人员进行维护，然后生产厂家才能根据情况再派人到现场进行处理。由于棉花加工设备分布在中国各地乃至出口到世界各地，从客户反应问题到厂家派人到达现场的时间周期就会很长，少则 一天，个别偏远的地方可能会需要几天，不同程度地影响到企业生产活动的继续进行。传统的反应式维护存在以下缺点：售后服务响应速度慢；维护成本高；生产效率低下；停车率高；管理成本高；无法应对合格工程师不足的情况。
远程监控系统主要是通过分布于棉花加工生产线各种设备的传感器、开关信号、视频监控设备、 PLC 控制器等装置，通过智能联网设备集成到互联网和局域网上面，实现对生产、运营情况的随时掌握，建立网络范围内的监控数据和网上知识资源库，根据现场采集的设备运行数据进行远程诊断和在线维修。
http://www.hightopo.com/demo/...
代码实现
创建场景
var dm = new ht.DataModel();// 数据容器
var g3d = new ht.graph3d.Graph3dView(dm);// 三维组件
g3d.addToDOM();// 将三维组件添加到 body 体中为了最外层组件加载填充满窗口的方便性，HT 的所有组件都有 addToDOM 函数，其实现逻辑如下，其中 iv 是 invalidate 的简写：
addToDOM = function(){var self = this,view = self.getView(),//获取组件的底层 divstyle = 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);//窗口大小改变事件，调用刷新函数
}ht.Default.xhrLoad('scenes/抓棉机.json', function(text) {// 加载 JSON 文件dm.deserialize(text);// 将 JSON 反序列化到数据容器中
});场景动画
var equipment = dm.getDataByTag('equipment');// 获取轧棉机的节点
var hand = dm.getDataByTag('hand');// 获取轧棉机“手”节点
var light = dm.getDataByTag('light');// 获取轧棉机顶部的指示灯的节点
<script src="ht.js"></script> <!--先引入ht.js-->
<script src="ht-animation.js"></script>这里总共有三个部分有动画，采用的方法大致相同，这里仅对整个轧棉机的机身的左右移动的动画进行说明。
equipment.setAnimation({// 动画调用方法moveDown: {// 定义了一个名为 moveDown 的动画过程，这个动画过程改变图元的 x 轴坐标，将其从 623 变化至 -256from: 623,// 动画开始时的属性值to: -256,// 动画结束时的属性值interval: equipInterval,// 动画间隔，单位msnext: ["moveUp"],// 字符串类型，指定当前动画完成之后，要执行的下个动画，可将多个动画融合onUpdate: function(value) {// 回调函数，动画的每一帧都会回调此函数this.setX(value);// 设置该节点的 x 轴的值为当前动画 from 到 to 的值formPane.getItemById('xValue').element = value.toFixed(2);// 获取 form 表单上的 xValue 元素，同时改变此值formPane.iv();// 表单内容变化后要通知表单进行刷新变化}},moveUp: {// 定义了一个名为 moveUp 的动画过程，这个动画过程改变图元的 x 轴坐标，将其从 -256 变化至 623from: -256,to: 623,interval: equipInterval,next: ["moveDown"],onUpdate: function(value) {this.setX(value);formPane.getItemById('xValue').element = value.toFixed(2);formPane.iv();}},start: ['moveDown']// start是一个数组，用于指定要启动的一个或多个动画
});dm.enableAnimation();表单创建
// 创建 form 表单
function createForm() {var fp = new ht.widget.FormPane();// 创建表单组件实例fp.setWidth(200);// 设置表单组件的宽度fp.setHeight(250);// 设置表单组件的高度fp.getView().style.top = '8%';// 设置表单组件的样式fp.getView().style.right = 0;fp.getView().style.background = 'rgba(255, 255, 255, 0.3)';document.body.appendChild(fp.getView());// 将表单组件的底层 div 添加到 body 体中var equipment = dm.getDataByTag('equipment');// 通过 tag 唯一标识获取元素var hand = dm.getDataByTag('hand');fp.setLabelAlign('right');// 设置表单的文本对齐方式fp.addRow([// 向表单中添加一行 此方法的参数一为元素数组，可在一行中添加多个元素{// 元素一 显示文本内容为 “机器号”element: '机器号',color: '#fff'},{// 元素二 显示文本内容为 “Machine”element: 'Machine',color: '#fff'}], [0.1, 0.1]);// 参数二为每个元素宽度信息数组，宽度值大于1代表固定绝对值，小于等于1代表相对值，也可为80+0.3的组合fp.addRow([// 向表单中添加一行 此方法的参数为一个数组，可在一行中添加多个元素{// 元素一 显示文本内容为 “机器号”element: '抓棉机动画',color: '#fff'},{// 元素二 显示文本内容为 一个按钮元素button: {label: '开始',onClicked: function() {// 按钮点击触发事件，启动轧棉机左右移动动画dm.enableAnimation();// 启动全局动画定时器var light = dm.getDataByTag('light');if (!light) return;lightColor(light);colorTimer = setInterval(function() {lightColor(light);}, 1000);}}},{button: {label: '停止',onClicked: function() {// 按钮点击触发事件，关闭轧棉机左右移动动画dm.disableAnimation();// 停止全局动画定时器clearInterval(colorTimer);var light = dm.getDataByTag('light');if (light) light.s('all.color', 'rgba(0,0,255,0.51)');}}}], [0.2, 0.1, 0.1]);// 将一行中的三个元素都分配宽度进行显示fp.addRow([// 向表单中添加一行 此方法的参数为一个数组，可在一行中添加多个元素{// 元素一 显示文本内容为“小车行走速度”element: '小车行走速度',color: '#fff'},{// 元素二 显示文本内容为一个 滑动条id: 'slide',slider: {// 滑动条value: equipInterval,// slider 当前值min: 0,// slider 最小值max: 300,// slider 最大值step: 20,// slider 每移动一步的值onValueChanged: function() {// slider 值变化触发事件var anim = dm.getDataAnimation(equipment);// 获得参数data的动画配置anim.moveDown.interval = this.getValue();// 设置 moveDown 动画的 interval 内容anim.moveUp.interval = this.getValue();// 设置 moveUp 动画的 interval 内容}}}], [0.1, 0.1]);fp.addRow([// 向表单中添加一行 此方法的参数为一个数组，可在一行中添加多个元素{element: 'X 轴',color: '#fff'},{id: 'xValue',element: equipment.getX().toFixed(2),// 获取轧棉机当前 x 轴值color: '#fff'}], [0.1, 0.1]);return fp;
}有趣的部分就说这么多，如果有什么建议和意见，欢迎留言或者私信~或者上官网查阅相关资料（https://hightopo.com/）
总结
基于 HTML5 WebGL 的 3D 棉花加工监控系统相关推荐
- 基于 HTML5 WebGL 的民航客机飞行监控系统
前言 前些日子出差,在飞机上看到头顶的监控面板,除了播放电视剧和广告之外,还会时不时的切换到一个飞机航行的监控系统,不过整个监控系统让人感到有一点点的简陋,所以我就突发奇想制作了一个采用 HT for ...
- 基于 HTML5 WebGL 的 3D 工控裙房系统
前言 工业物联网在中国的发展如火如荼,网络基础设施建设,以及工业升级的迫切需要都为工业物联网发展提供了很大的机遇.中国工业物联网企业目前呈现两种发展形式并存状况:一方面是大型通讯.IT企业的布局:一方 ...
- 基于 HTML5 WebGL 的故宫人流量动态监控系统
前言 在当代社会,故宫已经成为一个具有多元意义的文化符号,在历史.艺术.文化等不同领域发挥着重要的作用,在国际上也成为能够代表中国文化甚至中国形象的国际符号.近几年故宫的观众接待量逐年递增,年接待量已 ...
- c#web页面显示弹窗_基于 HTML5 WebGL 的 3D 风机 Web 组态工业互联网应用
前言 在目前大数据时代背景之下,数据可视化的需求也变得越来越庞大,在数据可视化的背景之下,通过智能机器间的链接并最终将人机链接,结合软件和大数据分析的工业互联网也将变得越来越容易实现! 国家也敏锐意识 ...
- html5 光影效果,基于 HTML5 WebGL 的 3D 场景中的灯光效果
原标题:基于 HTML5 WebGL 的 3D 场景中的灯光效果 构建 3D 的场景除了创建模型,对模型设置颜色和贴图外,还需要有灯光的效果才能更逼真的反映真实世界的场景.这个例子我觉得既美观又代表性 ...
- 基于 HTML5 的计量站三维可视化监控系统 Web 组态工控应用
得益于 HTML5 WebGL 技术的成熟,从技术上对工控管理的可视化,数据可视化变得简单易行!完成对工控设备的管理效率,资源管理,风险管理等的大幅度提高,同时也对国家工业4.0计划作出有力响应! 如 ...
- 基于 HTML5 WebGL 的 3D 智慧隧道漫游巡检
前言 这次为大家展示的是通过 HT for Web 灵活的图型化编辑工具打造的智慧隧道监控系统.通过 HTML5 技术实现了桌面和移动端的跨平台性,同时现实了可视化运维. 这次主要跟大家分享里面的漫游 ...
- 基于 HTML5 WebGL 的 3D 服务器与客户端的通信
这个例子的初衷是模拟服务器与客户端的通信,我把整个需求简化变成了今天的这个例子.3D 机房方面的模拟一般都是需要鹰眼来辅助的,这样找产品以及整个空间的概括会比较明确,在这个例子中我也加了,这篇文章就算 ...
- 基于 HTML5 WebGL 的 3D 渲染引擎构建工厂运作系统
前言 今天为大家带来一个很酷的作品,依然运用了强大的 HT for Web 的 3D 图形组件,动作流畅性能好,大家可以先来欣赏一下效果! 点我进入! 整体风格为科技金属风,制作精良,由于上传 gif ...
最新文章
- zabbix监控添加psql数据库和sql_server数据库模板
- adpcm 解码音量小_Oriolus 1795解码耳放评测：仅仅蓝牙还不够，我要的是“真无线”...
- java枚举比较大小写_Spring 3.0 MVC绑定枚举区分大小写
- linux tcp 内核模块,C – Linux – 内核模块 – TCP头
- 单载波DSP模块介绍
- 升级Webwork2.2版本注意点
- 使用POI导入导出Excel2003、2007示例
- Cyborg Genes UVA - 10723
- java虚拟机内存模型与垃圾回收知识复习总结
- dingo php,Laravel+Dingo/Api 自定义响应的实现
- 书城项目 软件可行性分析报告
- omnet++ tictoc2 实例分析
- scratch打棒球游戏 电子学会图形化编程scratch等级考试四级真题和答案解析2019-12
- elasticsearch6.4.3实现搜索同义词
- 三星为Ativ S发布WP8更新
- 新更新....llq原创考试第二题
- 国企，私企与外企利弊通观--关键时刻给应届毕业生及时点拨（二）
- jquery-重要的方法和注意事项
- [译文]优雅的现代JavaScript设计模式: 冰冻工厂
- linux ssh keygen r,SSH的ssh-keygen命令基本用法详解