Skip to content

Commit

Permalink
Changed example to typical "six-pack" configuration
Browse files Browse the repository at this point in the history 
Changed the example to show a typical “six-pack” instrument
configuration with the addition of the turn-coordinator instrument.
  • Loading branch information
@canuk
canuk committed Aug 18, 2014
1 parent b463f71 commit f2077da
Show file tree
Hide file tree
Showing 4 changed files with 85 additions and 42 deletions.
62 changes: 38 additions & 24 deletions example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,21 +40,25 @@ <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>
<span id="airspeed"></span>
<span id="altimeter"></span>
</div>
</div>

<p>The code of this example is quite simple. The html :</p>
<p><pre><code class="language-javascript">&lt;span id=&quot;attitude&quot;&gt;&lt;/span&gt;
&lt;span id=&quot;heading&quot;&gt;&lt;/span&gt;
&lt;span id=&quot;variometer&quot;&gt;&lt;/span&gt;
&lt;span id=&quot;airspeed&quot;&gt;&lt;/span&gt;
&lt;span id=&quot;altimeter&quot;&gt;&lt;/span&gt;</code></pre></p>
<p><pre><code class="language-javascript">
&lt;span id=&quot;airspeed&quot;&gt;&lt;/span&gt;
&lt;span id=&quot;attitude&quot;&gt;&lt;/span&gt;
&lt;span id=&quot;altimeter&quot;&gt;&lt;/span&gt;
&lt;span id=&quot;turn_coordinator&quot;&gt;&lt;/span&gt;
&lt;span id=&quot;heading&quot;&gt;&lt;/span&gt;
&lt;span id=&quot;variometer&quot;&gt;&lt;/span&gt;
</code></pre></p>

<p>And the javascript :</p>
<p><pre><code class="language-javascript">// Dynamic examples
Expand All @@ -63,28 +67,34 @@ <h2>Realtime indicators</h2>
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));

// Airspeed update
airspeed.setAirSpeed(80+80*Math.sin(increment/10));

// Altimeter update
altimeter.setAltitude(10*increment);
altimeter.setPressure(1000+3*Math.sin(increment/50));
increment++;
}, 50);</code></pre></p>
}, 50);
</code></pre></p>
</div>

<footer>
Expand All @@ -110,27 +120,31 @@ <h2>Realtime indicators</h2>
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));

// Airspeed update
airspeed.setAirSpeed(80+80*Math.sin(increment/10));

// Altimeter update
altimeter.setAltitude(10*increment);
altimeter.setPressure(1000+3*Math.sin(increment/50));
increment++;
}, 50);
</script>
</body>
Expand Down
34 changes: 34 additions & 0 deletions img/fi_tc_airplane.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
19 changes: 1 addition & 18 deletions img/turn_coordinator.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 12 additions & 0 deletions js/jquery.flightindicators.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
size : 200,
roll : 0,
pitch : 0,
turn : 0,
heading: 0,
vario: 0,
airspeed: 0,
Expand Down Expand Up @@ -40,6 +41,10 @@
$(this).html('<div class="instrument vario"><img src="' + settings.img_directory + 'fi_box.svg" class="background box" alt="" /><img src="' + settings.img_directory + 'vertical_mechanics.svg" class="box" alt="" /><div class="vario box"><img src="' + settings.img_directory + 'fi_needle.svg" class="box" alt="" /></div><div class="mechanics box"><img src="' + settings.img_directory + 'fi_circle.svg" class="box" alt="" /></div></div>');
_setVario(settings.vario);
break;
case 'turn_coordinator':
$(this).html('<div class="instrument turn_coordinator"><img src="' + settings.img_directory + 'fi_box.svg" class="background box" alt="" /><img src="' + settings.img_directory + 'turn_coordinator.svg" class="box" alt="" /><div class="turn box"><img src="' + settings.img_directory + 'fi_tc_airplane.svg" class="box" alt="" /></div><div class="mechanics box"><img src="' + settings.img_directory + 'fi_circle.svg" class="box" alt="" /></div></div>');
_setTurn(settings.turn);
break;
case 'airspeed':
$(this).html('<div class="instrument airspeed"><img src="' + settings.img_directory + 'fi_box.svg" class="background box" alt="" /><img src="' + settings.img_directory + 'speed_mechanics.svg" class="box" alt="" /><div class="speed box"><img src="' + settings.img_directory + 'fi_needle.svg" class="box" alt="" /></div><div class="mechanics box"><img src="' + settings.img_directory + 'fi_circle.svg" class="box" alt="" /></div></div>');
_setAirSpeed(settings.airspeed);
Expand Down Expand Up @@ -80,6 +85,12 @@
});
}

function _setTurn(turn){
placeholder.each(function(){
$(this).find('div.instrument.turn_coordinator div.turn').css('transform', 'rotate('+turn+'deg)');
});
}

function _setVario(vario){
if(vario > constants.vario_bound){vario = constants.vario_bound;}
else if(vario < -constants.vario_bound){vario = -constants.vario_bound;}
Expand Down Expand Up @@ -136,6 +147,7 @@
this.setRoll = function(roll){_setRoll(roll);}
this.setPitch = function(pitch){_setPitch(pitch);}
this.setHeading = function(heading){_setHeading(heading);}
this.setTurn = function(turn){_setTurn(turn);}
this.setVario = function(vario){_setVario(vario);}
this.setAirSpeed = function(speed){_setAirSpeed(speed);}
this.setAltitude = function(altitude){_setAltitude(altitude);}
Expand Down

0 comments on commit f2077da

Please sign in to comment.