forked from sebmatton/jQuery-Flight-Indicators
-
Notifications
You must be signed in to change notification settings - Fork 9
/
example.html
152 lines (126 loc) · 6.17 KB
/
example.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!--
jQuery Flight Indicators plugin
By Sébastien Matton ([email protected])
Published under GPLv3 License.
https://github.com/sebmatton/jQuery-Flight-Indicators
-->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- Syntax coloration -->
<link rel="stylesheet" type="text/css" href="_examples_data/prism/prism.css" />
<!-- This page style -->
<link rel="stylesheet" type="text/css" href="_examples_data/style.css" />
<!-- Flight Indicators library styles -->
<link rel="stylesheet" type="text/css" href="css/flightindicators.css" />
<title>jQuery Flight Indicators Plugin</title>
</head>
<body>
<div class="container">
<!-- Introduction -->
<h1>Flight Indicators jQuery Plugin</h1>
<p>The Flight Indicators Plugin allows you to display high quality flight indicators using html, css3, jQuery and SVG images. The methods make customization and real time implementation really easy. Further, since all the images are vector svg you can resize the indicators to your application without any quality loss ! </p>
<p>This project is hosted on Github : <a href="https://github.com/sebmatton/jQuery-Flight-Indicators">https://github.com/sebmatton/jQuery-Flight-Indicators</a></p>
<!-- First example -->
<h2>Attitude example</h2>
<p>This is a simple example showing an attitude indicator with pitch of 3 degrees and roll of 8 degrees. As you can see, the size can be chosen to be as big as you want since we only use vector graphics (svg). For this example size was set to 350 pixels.</p>
<p><pre><code class="language-javascript">var first_attitude = $.flightIndicator('#first_attitude', 'attitude', {size:350, roll:8, pitch:3, showBox : true});</code></pre></p>
<div class="examples">
<!-- The block where we want to place an indicator -->
<span id="first_attitude"></span>
</div>
<!-- Second example -->
<h2>Realtime indicators</h2>
<p>This example shows a real time application for each type of indicator.</p>
<div class="examples">
<div>
<span id="airspeed"></span>
<span id="attitude"></span>
<span id="altimeter"></span>
</div><div>
<span id="turn_coordinator"></span>
<span id="heading"></span>
<span id="variometer"></span>
</div>
</div>
<p>The code of this example is quite simple. The html :</p>
<p><pre><code class="language-javascript">
<span id="airspeed"></span>
<span id="attitude"></span>
<span id="altimeter"></span>
<span id="turn_coordinator"></span>
<span id="heading"></span>
<span id="variometer"></span>
</code></pre></p>
<p>And the javascript :</p>
<p><pre><code class="language-javascript">// Dynamic examples
var attitude = $.flightIndicator('#attitude', 'attitude', {roll:50, pitch:-20, size:200, showBox : true});
var heading = $.flightIndicator('#heading', 'heading', {heading:150, showBox:true});
var variometer = $.flightIndicator('#variometer', 'variometer', {vario:-5, showBox:true});
var airspeed = $.flightIndicator('#airspeed', 'airspeed', {showBox: false});
var altimeter = $.flightIndicator('#altimeter', 'altimeter');
var turn_coordinator = $.flightIndicator('#turn_coordinator', 'turn_coordinator', {turn:0});
// Update at 20Hz
var increment = 0;
setInterval(function() {
// Airspeed update
airspeed.setAirSpeed(80+80*Math.sin(increment/10));
// Attitude update
attitude.setRoll(30*Math.sin(increment/10));
attitude.setPitch(50*Math.sin(increment/20));
// Altimeter update
altimeter.setAltitude(10*increment);
altimeter.setPressure(1000+3*Math.sin(increment/50));
increment++;
// TC update
turn_coordinator.setTurn(30*Math.sin(increment/10));
// Heading update
heading.setHeading(increment);
// Vario update
variometer.setVario(2*Math.sin(increment/10));
}, 50);
</code></pre></p>
</div>
<footer>
jQuery Flight Indicator plugin by Sébastien Matton - License GPLv3<br/>
<a title="By Mysid [CC-BY-SA-3.0 (http://creativecommons.org/licenses/by-sa/3.0) or GFDL (http://www.gnu.org/copyleft/fdl.html)], via Wikimedia Commons" href="http://commons.wikimedia.org/wiki/File%3ATurn_coordinator.svg">Turn Coordinator SVG from Wikimedia Commons</a>
</footer>
<!-- Syntax color -->
<script src="_examples_data/prism/prism.js"></script>
<!-- Importing jQuery library -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!-- Importing the FlightIndicators library -->
<script src="js/jquery.flightindicators.js"></script>
<!-- Let start our scripts -->
<script type="text/javascript">
// First static example
var first_attitude = $.flightIndicator('#first_attitude', 'attitude', {size:350, roll:8, pitch:3, showBox : true});
// Dynamic examples
var attitude = $.flightIndicator('#attitude', 'attitude', {roll:50, pitch:-20, size:200, showBox : true});
var heading = $.flightIndicator('#heading', 'heading', {heading:150, showBox:true});
var variometer = $.flightIndicator('#variometer', 'variometer', {vario:-5, showBox:true});
var airspeed = $.flightIndicator('#airspeed', 'airspeed', {showBox: false});
var altimeter = $.flightIndicator('#altimeter', 'altimeter');
var turn_coordinator = $.flightIndicator('#turn_coordinator', 'turn_coordinator', {turn:0});
// Update at 20Hz
var increment = 0;
setInterval(function() {
// Airspeed update
airspeed.setAirSpeed(80+80*Math.sin(increment/10));
// Attitude update
attitude.setRoll(30*Math.sin(increment/10));
attitude.setPitch(50*Math.sin(increment/20));
// Altimeter update
altimeter.setAltitude(10*increment);
altimeter.setPressure(1000+3*Math.sin(increment/50));
increment++;
// TC update - note that the TC appears opposite the angle of the attitude indicator, as it mirrors the actual wing up/down position
turn_coordinator.setTurn((30*Math.sin(increment/10))*-1);
// Heading update
heading.setHeading(increment);
// Vario update
variometer.setVario(2*Math.sin(increment/10));
}, 50);
</script>
</body>
</html>