preface
During the flight, the screen above the seats in the cabin will switch to an aircraft flight monitoring system from time to time, in addition to playing TV dramas and advertisements. The main purpose of this monitoring system is to enable passengers to know the overall condition of the aircraft during the flight, the course of the flight from the destination and some possible emergencies. To a certain extent, the aircraft flight monitoring system can make passengers get accurate information sources during the journey, and the most important thing is to make passengers feel at ease during the journey. In addition to ensuring that passengers can obtain the actual information source, the aircraft navigation monitoring system can also timely feed back the collected data to the aviation personnel, and save the data records for the use, monitoring and maintenance of aviation personnel and aviation personnel after the aircraft passes the station or flight. HT for Web product of Hightopo (HT for short) has a variety of configurations to choose from between 2D configuration and 3D configuration. This paper will introduce how to use HT rich 2/3D configuration to build a solution for aircraft navigation monitoring system.
Preview address: flight-monitor
System analysis
Aircraft flight monitoring is a simple and practical method to measure and track aircraft performance. In daily flight, the relevant parameters of aircraft cruising are recorded with airborne instruments and compared with the original performance. The main parameters of monitoring are: the amount of fuel consumed per unit of flight time, the cruising speed of the aircraft and the horizontal distance of the aircraft consumed per unit of fuel. They represent the overall performance of the engine, aircraft and aircraft engine respectively. They represent the overall performance of the engine, aircraft and aircraft engine respectively. The results of performance monitoring can not only provide possible fault information for aircraft maintenance, but also provide reliable performance basis for making flight plan.
At present, the advanced jet transport all installed flight condition monitoring system, it recorded about parameter values, and stored in a data management device, the data can be sent to or sent to the station after the plane landed, with a special computer program to calculate and correction, make the performance monitoring data gathering, sending, meter Bi analysis automation work, saves the manpower, improved the accuracy.
1. Flight Data recorder:Since the birth of FDR (Flight Data Recorder), “commonly known as the black box”, the detailed and accurate Flight Data it provides provides an important basis for accident investigation, aircraft maintenance and security, safety operation monitoring, and has become an important management means of aviation safety operation.
2. Overview of ACMS (Aireraft Condition Monitoring System) :ACMS is an advanced airborne data acquisition and processing system installed on the aircraft. It collects data in real time, monitors engine conditions and flight performance, and conducts special engineering investigations. The aircraft Communications Addressing and Reporting System (ACARS) sends the data to a ground receiving station via a ground/air data link, and finally to an airline terminal. The data can also be saved by a quick access Recorder (QAR) for use by aviation and crew during a stop or after flight.
The business functions realized by HT can be displayed through the data collected by THE ACMS system, which can be displayed accurately through the real-time monitoring data, so as to monitor the status of the aircraft and give immediate feedback on the changes of information data.
The implementation process
Moving through the clouds
In order to achieve the effect of flying through the clouds, the problem I encountered at the beginning was the layering of the flight of the plane, also known as the perspective effect. Here, I used the cloud passage and the cloud background to flow at different speeds to create a perspective effect of flight. I used texture to present the clouds, but only texture would block the sky and the plane, which greatly affected the appearance of the plane in flight. Therefore, I turned on transparent and opacity of the corresponding image elements, and set different transparencies for cloud background and cloud passage, which not only increased the sense of layering, but also gave people the illusion that clouds were passing before their eyes. The type of cloud passage is HT. Polyline. The scale of the passage increases the proportion of Y axis, so that the cloud passage has a larger longitudinal space. Reverse. The cloud background adopts the HT. Node type, and only one plane display is set as the cloud background. Offset offset is used to achieve the overall cloud flow effect, and the effect of moving through the aircraft cloud is achieved by changing the mapping offset of corresponding pixel or corresponding pixel surface. The code is as follows:
var i = 1,
p = 0;
setInterval((a)= > {
i -= 0.1; p += 0.005;
clouds.s('shape3d.uv.offset', [i, 0]);
cloudBackground.s('all.uv.offset', [p, 0]);
}, 100);Copy the codeHeave effect
Although achieved the effect of the plane through the cloud, but if the plane is just flying straight, it will reduce the feelings of flying the airplane believe friends must have met because of airflow turbulence, also often feel climb and fall of the aircraft flight, it is because the plane’s route is not always fixed on a highly, sometimes climbing sometimes down, So I used hT-animation.js HT animation extension to achieve the effect of airplane turbulence. The code is as follows:
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]); }},/ /... Omit the similar
start: ["back1"]});Copy the codeBall fan Angle limit
Flight after effect is perfect, then I met a more difficult problem, because while looking at the plane is actually in the sea of clouds, but only in flight in the channel, the background is just flat map, so when the Angle of view to some degree will have a strong sense of acosmia and unreality, requires a perspective limit, Get the Angle adjustment just right in range. If you don’t know much about it, you can go to the 3D manual on hightopo’s official website. There are detailed explanations in it. I won’t go into details here. Due to the perspective range, I decided to fix the location of center as follows:
g3d.addPropertyChangeListener(e= > {
// Fix the center point
if (e.property === 'center') {
e.newValue[0] = center[0];
e.newValue[1] = center[1];
e.newValue[2] = center[2]; }}Copy the code
At the beginning, I limited my eye to a cube space, but the interaction effect was not ideal. Considering that in the default interaction of G3D, when the Angle of view was changed by dragging and moving the mouse, In fact, eye moves on a sphere with center as the center of the sphere, so I decided to dig out a piece of the sphere as the limited space of eye, namely the sphere sector. For those who don’t understand, please refer to this picture:
The Angle of view of the sphere sector requires three parameters, namely, the central reference axis, the Angle formed by the central axis and the outside, and the limiting radius of the sphere. The central reference axis can be determined according to the extension line connecting the initial eye and center. The limiting radius of the sphere can be divided into maximum and minimum limits, and the codes are as follows:
function limitEye(g3d, eye, center, options) {
var limitMaxL = options.limitMaxL,
limitMinL = options.limitMinL,
limitA = options.limitA;
g3d.addPropertyChangeListener(e= > {
// Fix the center point
if (e.property === 'center') {
e.newValue[0] = center[0];
e.newValue[1] = center[1];
e.newValue[2] = center[2];
}
// Restrict the perspective
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);
// Prevent movement Angle greater than 180 degrees, Angle reversal
if (oldAngle > Math.PI / 2) {
realEye.negate();
}
e.newValue[0] = realEye.x;
e.newValue[1] = realEye.y;
e.newValue[2] = realEye.z; }}})}Copy the code
Aircraft surveillance system
As the monitoring system, of course, it is only natural that have the monitoring, small increase in the lower right corner of the map, and provides three modes, respectively is focused on the plane, flight path and is focused on the map, and according to the aircraft’s flight direction control the flow of the flight path effect, which fitData focus plane would follow the plane motion, make the plane has been at the center of the small map, the code is as follows:
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); }});/ /... omit
Copy the code
Add the name prompt by moving the mouse to the corresponding position of the aircraft, double-click the information panel of the corresponding position of the aircraft and focus the perspective on the panel, click any place of the aircraft to switch back to the aircraft flight mode and other effects.
Add monitoring panel on the left instead of double-clicking the corresponding position mentioned above, this step will directly focus on the information panel of the corresponding position, where the button opens interaction and adds the corresponding interaction logic, the code is as follows:
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())
})
}
});
/ /... omit
Copy the code
Sky rendering effect
Since it’s a surveillance system, it has to be a 24-hour surveillance system, which involves one problem, I can’t always fly through the blue sky in the middle of the night, it’s not real, so there’s a process of the sky going from light to dark and then from dark to light, I have tentatively scheduled this process to two periods: 06:00-06:30 and 19:00-19:30. The sky was shape3D: ‘sphere’, wrapped the whole scene, then dyed with reverse.flip back copy and Blend, then the sky could be rendered to the color I wanted, if I changed the sky light and shade according to the time I just changed the color value. However, due to the different lighting conditions of day and night, the intensity of reflected light from clouds is also different, resulting in the difference between day and night clouds. Therefore, the opacity of the texture of cloud path and cloud background should also be adjusted, and the opacity is more at night. The code is as follows:
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)) {
/ /... omit
} else if (hour == 6 && minutes < 15 ) {
/ /... omit
} else if (hour == 6 && minutes >= 15 && minutes < 30) {
/ /... omit
} else if (hour == 19 && minutes < 15) {
/ /... omit
} else if (hour == 19 && minutes >= 15 && minutes < 30) {
/ /... omit
}Copy the code
Here, I also added the support for the time status icon in the upper right corner of the time panel, and added the fade out effect when the icon is switched, and added the function of clicking to switch to the next time status icon in the time panel. In order to demonstrate the effect, I added the time times speed button. The following picture shows the change of the time flow rate at 500 times:
conclusion
In the era of big data, we have ushered in the new journey of 5G and the new reform of industry 4.0 under the environment of faster and faster development of network technology. Under the integration of information data acquisition and transmission and data visualization system, many solutions of industry control and visualization system can be found. And HT has long been committed to the diversification of visualization of industry system and in the experience accumulated by the technology industry, through the research and development of independent innovation of technology products, has created many industry representative significance on visual control system, for example, there are also monitoring visualization system for aircraft: unmanned aerial vehicles (uavs) 3 d visualization system
2019 we also updated the hundreds of industrial Internet 2 d / 3 d visualization case set, here you can find many novel instance, can also find different industrial Internet: mp.weixin.qq.com/s/ZbhB6LO2k… At the same time, you can also see more cases and results: www.hightopo.com/demos/index…