Skip to content

Commit

Permalink
documentation + minor
Browse files Browse the repository at this point in the history
  • Loading branch information
@sebmatton
sebmatton committed Apr 1, 2014
1 parent 3a14892 commit fcd8bf7
Show file tree
Hide file tree
Showing 6 changed files with 226 additions and 21 deletions.
104 changes: 83 additions & 21 deletions example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,28 +9,90 @@
-->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/flightindicators.css" />
<title>jQuery WebFlightIndicators</title>
<style type="text/css">
body {background-color:#fafafa; font-family: sans-serif; color: #333;}
a {color:;}
pre {background-color: #eaeaea; padding: 10px; border: 1px solid #ccc; border-radius: 5px; white-space: pre-wrap;}
</style>
<meta charset="utf-8">
<!-- Syntax coloration -->
<link rel="stylesheet" type="text/css" href="examples/prism/prism.css" />
<!-- This page style -->
<link rel="stylesheet" type="text/css" href="examples/style.css" />
<!-- Flight Indicators library styles -->
<link rel="stylesheet" type="text/css" href="css/flightindicators.css" />
<title>jQuery Flight Indicators Plugin</title>
</head>
<body>
<h1>jQuery WebFlightIndicators Example</h1>
<p>Github project : <a href="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/sebmatton/WebFlightIndicators">https://github.com/sebmatton/WebFlightIndicators</a></p>
<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>var first_attitude = $.flightIndicator('#first_attitude', 'attitude', {size:350, roll:8, pitch:3, showBox : true});</pre></p>
<span id="first_attitude"></span>
<h2>Realtime indicators</h2>
<span id="attitude"></span>
<span id="heading"></span>
<span id="variometer"></span>
<span id="airspeed"></span>
<span id="altimeter"></span>
<div class="container">
<!-- Introduction -->
<h1>jQuery Flight Indicators Plugin Example</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="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/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="attitude"></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>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');

// Update at 20Hz
var increment = 0;
setInterval(function() {
// Attitude update
attitude.setRoll(30*Math.sin(increment/10));
attitude.setPitch(50*Math.sin(increment/20));

// 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>
</div>

<footer>
jQuery Flight Indicator plugin by Sébastien Matton - License GPLv3
</footer>

<!-- Syntax color -->
<script src="examples/prism/prism.js"></script>

<!-- Importing jQuery library -->
<script src="http:https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
Expand All @@ -52,7 +114,7 @@ <h2>Realtime indicators</h2>
// Update at 20Hz
var increment = 0;
setInterval(function() {
// Attitude update
// Attitude update
attitude.setRoll(30*Math.sin(increment/10));
attitude.setPitch(50*Math.sin(increment/20));

Expand Down
0 example.png → examples/example.png
View file
File renamed without changes
0 example_highres.png → examples/example_highres.png
View file
File renamed without changes
126 changes: 126 additions & 0 deletions examples/prism/prism.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
/**
* prism.js default theme for JavaScript, CSS and HTML
* Based on dabblet (http:https://dabblet.com)
* @author Lea Verou
*/

code[class*="language-"],
pre[class*="language-"] {
color: black;
text-shadow: 0 1px white;
font-family: Consolas, Monaco, 'Andale Mono', monospace;
direction: ltr;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;


-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;

-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}

pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
text-shadow: none;
background: #b3d4fc;
}

pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
text-shadow: none;
background: #b3d4fc;
}

@media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
}

/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: #f5f2f0;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
padding: .1em;
border-radius: .3em;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
}

.token.punctuation {
color: #999;
}

.namespace {
opacity: .7;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol {
color: #905;
}

.token.selector,
.token.attr-name,
.token.string,
.token.builtin {
color: #690;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
color: #a67f59;
background: hsla(0,0%,100%,.5);
}

.token.atrule,
.token.attr-value,
.token.keyword {
color: #07a;
}


.token.regex,
.token.important {
color: #e90;
}

.token.important {
font-weight: bold;
}

.token.entity {
cursor: help;
}

9 changes: 9 additions & 0 deletions examples/prism/prism.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 8 additions & 0 deletions examples/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
body {background-color:#fafafa; font-family: sans-serif; color: #333; border-top: 20px solid #EFECEA; margin: 0; padding: 0;}
.container {width: 960px; margin: 0 auto;}
h1 {font-size: 2.5em;}
a {color:#D72;}
.examples {text-align: center;}
:not(pre) > code[class*="language-"], pre[class*="language-"] {background-color: #EFECEA;}
.token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string, .token.variable{background-color: transparent;}
footer {text-align: center; background-color: #EFECEA; padding: 10px; color: #666}

0 comments on commit fcd8bf7

Please sign in to comment.