Web 三维组态的仿真运用案例:民航飞机的数据监控

2024-08-30 10:58

本文主要是介绍Web 三维组态的仿真运用案例:民航飞机的数据监控,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前言

在飞机航行的过程中,客舱里座位上方的荧屏上,除了播放电视剧和广告之外,还会时不时的切换到一个飞机航行的监控系统。这个监控系统的主要目的是,让乘客可以了解到飞机在航行过程中的整体状况、距离目的地的航线进程以及一些有可能出现的突发事件。飞机航行的监控系统在一定程度上,可以使乘客在旅途过程中得到准确的信息源,最重要的是可以使乘客在旅途中得到安心。在保障乘客获取到实际信息源的同时,飞机航行的监控系统也能将采集到的数据及时的反馈给航务人员,而且将数据记录保存下来,在飞机过站或航后供航务和机务人员使用和监测维护。介于 2D 组态和 3D 组态上,Hightopo(以下简称 HT )的 HT for Web 产品上的有着丰富的组态化可供选择,本文将介绍如何运用 HT 丰富的 2/3D 组态搭建出一个飞机航行的监控系统的解决方案。

预览地址:flight-monitor

系统分析

飞机航行监控是一种测量、跟踪飞机性能变化趋势的简单而实用方法。在日常航班飞行中,用机载仪表记录飞机巡航时的有关参数,并将其与原有性能进行比较。监控的主要参数有:飞行单位时间消耗的燃油量、飞机的巡航飞行速度和消耗单位燃油量飞机飞过的水平距离。它们分别表示发动机、飞机及飞机发动机的综合性能。它们分别表示发动机、飞机及飞机发动机的综合性能。性能监控的结果,既可为飞机维修提供可能的故障信息,又为制定飞行计划提供可靠的性能依据。

目前,先进的喷气运输机都已安装飞行状态监控系统,它记录下有关参数值,并存储在数据管理装置中,这些数据可以发送到或在飞机着陆后送到地面站,用专用计算机程序进行计算和修正,使性能监控数据采集、发送、计箅分析工作自动化,节省了人力,提高了精确度。

1、飞行数据记录器:自从飞行数据记录器 FDR(Flight Data Recorder)“俗称黑匣子”诞生以来,其提供的详实准确的飞行数据为事故调查、机务维护保障、安全运营监控提供了重要依据,成为航空安全运营的重要管理手段。

2、ACMS(Aireraft Condition Monitoring System)的系统概述:ACMS 系统是飞机上安装的先进机载数据采集和处理系统,它能以实时方式收集数据,对发动机状态和飞行性能进行监控以及进行特殊的工程调查。由飞机通信寻址与报告系统(ACARS)通过地空数据链发送到地面接收站,最后传送到航空公司的终端,也可通过快速存取记录器(QAR)将数据记录保存下来,在飞机过站或航后供航务和机务人员使用。

而 HT 实现的业务功能可以通过ACMS 系统采集到的数据,对接到显示终端去展示,通过实时监测的数据准确地显示出来,起到对飞机状态的监控功能并即时反馈信息数据的变化。

实现过程

云中穿行效果

为了达到飞机云中穿行的效果,最开始我遇到的问题是飞机飞行的层次感,也就通常所说的透视效果,这里我采用的是云通道和云背景以不同的速度流动,制造一种飞行的透视效果。

云我采用的是贴图的方式呈现的,但是仅仅是贴图会遮挡天空和飞机,非常影响飞机飞行的观感,所以我开启了相应图元的transparentopacity,云背景和云通道设置不同的透明度,不仅增加了层次感,还会让人产生云朵从眼前飘过的错觉。

云通道采用的是ht.Polyline类型,通道缩放拉大了 Y 轴的比例,使云通道有更大的纵向空间,设置reverse.flip背拷贝使云通道内部也显示出贴图,仿佛让飞机置身于云海中穿梭;云背景采用ht.Node类型,只设置一个面显示充当云背景。

整体的云流动效果采用offset偏移实现,改变相应图元或相应图元面的贴图偏移量来达到飞机云中穿行的效果, 代码如下:

var i = 1,p = 0;
setInterval(() => {i -= 0.1; p += 0.005;clouds.s('shape3d.uv.offset', [i, 0]);cloudBackground.s('all.uv.offset', [p, 0]);
}, 100);
升降颠簸效果

虽然达到了飞机云中穿行的效果,但是如果飞机只是直直的飞行,那也会降低飞行的实感,相信坐过飞机的朋友肯定都遇到过因气流产生的颠簸,也经常感受到飞机飞行途中的爬升和下降,这其实是因为飞机的航线并不是一直固定在一个高度上,有时会爬升有时会下降,所以我就用ht-animation.jsHT 动画扩展插件去实现飞机颠簸效果,代码如下:

dm.enableAnimation(20);
plane.setAnimation({back1: {from: 0,to: 160,easing: 'Cubic.easeInOut',duration: 8000,next: "up1",onUpdate: function (value) {value = parseInt(value);var p3 = this.p3();this.p3(value, p3[1], p3[2]);}},//...省略相似start: ["back1"]
});
球扇形视角限制

飞行效果完善之后,这时我就遇到了一个比较棘手的问题,因为实际上虽然看着飞机是在云海中穿梭,但是仅仅是在通道中飞行,背景其实也只是平面贴图,所以当视角到达某种程度的时候就会有强烈的违和感和不真实感,就需要一个视角限制,使视角的调整刚刚好在一个范围内。

视角限制的话一般是限制 g3d 的 eyecenter ,不太了解的朋友可以去看 hightopo 官网中的 3d 手册,里面有详细的说明,这里我就不再赘述了;因为视角范围的关系,所以我决定固定center的位置,代码如下:

g3d.addPropertyChangeListener(e => {// 固定中心点if (e.property === 'center') {e.newValue[0] = center[0];e.newValue[1] = center[1];e.newValue[2] = center[2];}
}

然后再把eye限制在某一个范围内就大功告成了,然而这里却并不是那么简单,最开始我把eye限制在一个立方体的空间内,但交互效果很不理想,考虑到 g3d 默认交互中,鼠标拖拽平移视角变换时,实际上eye是在一个以center为球心的球面上运动的,所以我决定从这个球中挖出来一块作为eye的限制空间,也就是球扇形,不太理解的朋友可以参考这个图:

球扇形视角限制,一共需要三个参数,分别是中心参考轴、中心轴和外边所成角度、所在球限制半径,其中中心参考轴可根据初始eyecenter的连接延长线确定,所在球限制半径又分最大限制和最小限制,代码如下:

function limitEye(g3d, eye, center, options) {var limitMaxL   = options.limitMaxL,limitMinL   = options.limitMinL,limitA      = options.limitA;g3d.addPropertyChangeListener(e => {// 固定中心点if (e.property === 'center') {e.newValue[0] = center[0];e.newValue[1] = center[1];e.newValue[2] = center[2];}// 限制视角if (e.property === 'eye') {var newEyeV = new ht.Math.Vector3(e.newValue),centerV = new ht.Math.Vector3(center),refEyeV = new ht.Math.Vector3(eye),refVector = refEyeV.clone().sub(centerV),newVector = newEyeV.clone().sub(centerV);if (centerV.distanceTo(newEyeV) > limitMaxL) {newVector.setLength(limitMaxL);e.newValue[0] = newVector.x;e.newValue[1] = newVector.y;e.newValue[2] = newVector.z;}if (centerV.distanceTo(newEyeV) < limitMinL) {newVector.setLength(limitMinL);e.newValue[0] = newVector.x;e.newValue[1] = newVector.y;e.newValue[2] = newVector.z;}if (newVector.angleTo(refVector) > limitA) {var oldLength = newVector.length(),oldAngle  = newVector.angleTo(refVector),refLength = oldLength * Math.cos(oldAngle),vertVector,realVector,realEye;refVector.setLength(refLength);newEyeV = newVector.clone().add(centerV);refEyeV = refVector.clone().add(centerV);vertVector = newEyeV.clone().sub(refEyeV);vertLength = refLength * Math.tan(limitA);vertVector.setLength(vertLength);realVector = vertVector.clone().add(refEyeV).sub(centerV);realVector.setLength(oldLength);realEye = realVector.clone().add(centerV);// 防止移动角度大于 180 度,视角反转if (oldAngle > Math.PI / 2) {realEye.negate();}e.newValue[0] = realEye.x;e.newValue[1] = realEye.y;e.newValue[2] = realEye.z;}  }})
}

飞机监控系统

当然作为监控系统,自然要有监控了,增加右下角的小地图,并提供三种模式,分别是聚焦飞机,聚焦飞行轨迹和聚焦地图,并根据飞机的飞行方向控制飞行轨迹的流动效果,其中聚焦飞机会跟随飞机移动进行fitData,使飞机一直处于小地图的中心,代码如下:

var fitFlowP = function (e) {if (e.property === 'position' && e.data === plane) {mapGV.fitData(plane, false);}
};
buttonP.s({'interactive': true,'onClick': function (event, data, view, point, width, height) {map.a('fitDataTag', 'plane2D');mapGV.fitData(plane, false);mapDM.md(fitFlowP);}
});
buttonL.s({'interactive': true,'onClick': function (event, data, view, point, width, height) {mapDM.umd(fitFlowP);map.a('fitDataTag', 'flyLine');mapGV.fitData(flyLine, false);}
});
// ...省略

在这里插入图片描述

增加鼠标移到飞机相应位置进行名称的提示、双击后显示飞机相应位置的信息面板并将视角聚焦到面板上、点击飞机任意地方切换回飞机飞行模式等效果。

左侧增加监控面板替代上面提到的双击相应位置这步操作直接聚焦到相应位置的信息面板上,这里按钮开启了交互并添加了相应的交互逻辑,代码如下:

button_JC.s({'interactive': true,'onClick': function (event, data, view, point, width, height) {event.preventDefault();let g3d = G.g3d,g3dDM = G.g3d.dm();g3d.fireInteractorEvent({kind: 'doubleClickData',data: g3dDM.getDataByTag(data.getTag())})}
});
//...省略

天空渲染效果

既然是监控系统肯定是 24 小时无差别的监控,这就涉及到一个问题,我总不可能半夜的时候飞机也从瓦蓝瓦蓝的天空上飞过,这就很欠缺真实性了,所以要有一个天空从亮到暗再从暗到亮的过程,这个过程我暂定到 06:00-06:30 和19:00-19:30 这两个时间段。

天空采用的是shape3d : 'sphere’球形,包裹整个场景,然后使用reverse.flip背拷贝 和blend染色,之后天空就可以渲染成我想要的颜色,如果按照时间改变天空明暗只要改变染色值就可以了。

但是由于白天和晚上光照情况的不同,云反射光的强度也不同,就导致了白天和晚上云的差异,所以也要调整云道和云背景的贴图的opacity透明度,晚间更为透明度,代码如下:

if ((hour > 6 && hour < 19) || (hour == 6 && minutes >= 30)) {timePane && timePane.a({'morning.visible': false,'day.visible': true,'dusk.visible': false,'night.visible': false,'day.opacity': 1})skyBox.s({"shape3d.blend": 'rgb(127, 200, 240)',})cloudBackground.s({"back.opacity": 0.7,})clouds.s({"shape3d.opacity": 0.7,})
} else if ((hour < 6 || hour > 19) || (hour == 19 && minutes >= 30)) {
//...省略
} else if (hour == 6 && minutes < 15 ) {
//...省略
} else if (hour == 6 && minutes >= 15 && minutes < 30) {
//...省略
} else if (hour == 19 && minutes < 15) {
//...省略
} else if (hour == 19 && minutes >= 15 && minutes < 30) {
//...省略
}


这里我还增加了对右上角时间面板时间状态图标的支持,并增加了图标切换时的渐隐渐显效果,同时给时间面板状态图标位置增加了点击切换到下一时间状态的功能。

为了演示效果我增加了时间倍速按钮,下图是 500 倍时间流速下的变化情况:

总结

身处大数据时代的我们,在网络科技发展越来越快的环境下,迎来了 5G 的新征程和工业4.0的新变革,在信息数据采集传输和数据可视化系统的融合下,可以发掘出许多行业管控可视化系统的解决方案。而 HT 长久以来一直致力于多样化行业系统可视化的搭建,涉猎的技术行业所累积的经验,通过自主创新研发的技术产品,已经打造出许多行业上具有代表性意义的可视化管控系统,例如同样有关于飞机的监控可视化系统:无人机 3D 可视化系统

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hvYQGzq8-1591092123840)(https://img2020.cnblogs.com/blog/1496396/202006/1496396-20200601185137243-2111613258.gif)]

2019 我们也更新了数百个工业互联网 2D/3D 可视化案例集,在这里你能发现许多新奇的实例,也能发掘出不一样的工业互联网:https://mp.weixin.qq.com/s/ZbhB6LO2kBRPrRIfHlKGQA

同时,你也可以查看更多案例及效果:https://www.hightopo.com/demos/index.html

这篇关于Web 三维组态的仿真运用案例:民航飞机的数据监控的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



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

相关文章

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

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

大模型研发全揭秘:客服工单数据标注的完整攻略

在人工智能(AI)领域,数据标注是模型训练过程中至关重要的一步。无论你是新手还是有经验的从业者,掌握数据标注的技术细节和常见问题的解决方案都能为你的AI项目增添不少价值。在电信运营商的客服系统中,工单数据是客户问题和解决方案的重要记录。通过对这些工单数据进行有效标注,不仅能够帮助提升客服自动化系统的智能化水平,还能优化客户服务流程,提高客户满意度。本文将详细介绍如何在电信运营商客服工单的背景下进行

基于MySQL Binlog的Elasticsearch数据同步实践

一、为什么要做 随着马蜂窝的逐渐发展,我们的业务数据越来越多,单纯使用 MySQL 已经不能满足我们的数据查询需求,例如对于商品、订单等数据的多维度检索。 使用 Elasticsearch 存储业务数据可以很好的解决我们业务中的搜索需求。而数据进行异构存储后,随之而来的就是数据同步的问题。 二、现有方法及问题 对于数据同步,我们目前的解决方案是建立数据中间表。把需要检索的业务数据,统一放到一张M

关于数据埋点,你需要了解这些基本知识

产品汪每天都在和数据打交道,你知道数据来自哪里吗? 移动app端内的用户行为数据大多来自埋点,了解一些埋点知识,能和数据分析师、技术侃大山,参与到前期的数据采集,更重要是让最终的埋点数据能为我所用,否则可怜巴巴等上几个月是常有的事。   埋点类型 根据埋点方式,可以区分为: 手动埋点半自动埋点全自动埋点 秉承“任何事物都有两面性”的道理:自动程度高的,能解决通用统计,便于统一化管理,但个性化定

Hadoop企业开发案例调优场景

需求 (1)需求:从1G数据中,统计每个单词出现次数。服务器3台,每台配置4G内存,4核CPU,4线程。 (2)需求分析: 1G / 128m = 8个MapTask;1个ReduceTask;1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务(4    3    3) HDFS参数调优 (1)修改:hadoop-env.sh export HDFS_NAMENOD

使用SecondaryNameNode恢复NameNode的数据

1)需求: NameNode进程挂了并且存储的数据也丢失了,如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2)故障模拟 (1)kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 (2)删除NameNode存储的数据(/opt/module/hadoop-3.1.4/data/tmp/dfs/na

异构存储(冷热数据分离)

异构存储主要解决不同的数据,存储在不同类型的硬盘中,达到最佳性能的问题。 异构存储Shell操作 (1)查看当前有哪些存储策略可以用 [lytfly@hadoop102 hadoop-3.1.4]$ hdfs storagepolicies -listPolicies (2)为指定路径(数据存储目录)设置指定的存储策略 hdfs storagepolicies -setStoragePo

Hadoop集群数据均衡之磁盘间数据均衡

生产环境,由于硬盘空间不足,往往需要增加一块硬盘。刚加载的硬盘没有数据时,可以执行磁盘数据均衡命令。(Hadoop3.x新特性) plan后面带的节点的名字必须是已经存在的,并且是需要均衡的节点。 如果节点不存在,会报如下错误: 如果节点只有一个硬盘的话,不会创建均衡计划: (1)生成均衡计划 hdfs diskbalancer -plan hadoop102 (2)执行均衡计划 hd

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

性能分析之MySQL索引实战案例

文章目录 一、前言二、准备三、MySQL索引优化四、MySQL 索引知识回顾五、总结 一、前言 在上一讲性能工具之 JProfiler 简单登录案例分析实战中已经发现SQL没有建立索引问题,本文将一起从代码层去分析为什么没有建立索引? 开源ERP项目地址:https://gitee.com/jishenghua/JSH_ERP 二、准备 打开IDEA找到登录请求资源路径位置