first commit

.gitignore

@@ -0,0 +1 @@
+README.html

README.md

@@ -0,0 +1,133 @@
+jQuery Flight Indicators
+===================
+
+"Flight Indicators" gives the ability to display web based flight indicator using html, css3, jQuery and SVG. Currently supported indicators are :
+* Attitude (artificial horizon)
+* Heading 
+* Vertical speed
+* Air speed
+* Altimeter
+
+Example & Demo
+-------------------
+![demo](https://raw.githubusercontent.com/sebmatton/jQuery-Flight-Indicators/master/example.png "demo")
+
+Demo can be found here : [http:https://sebmatton.github.io/flightindicators/](http:https://sebmatton.github.io/flightindicators/)
+
+Usage
+-------------------
+### Initialization
+To use this plugin you need to import the css file in the head of your html file :
+
+```html
+<link rel="stylesheet" type="text/css" href="css/flightindicators.css" />
+```
+
+Before the `</body>` tag, include jQuery and this plugin :
+
+```html
+<script src="js/jquery.js"></script>
+<script src="js/jquery.flightindicator.js"></script>
+```
+
+### Using the plugin
+Create a `<span>` section to put an indicator in :
+
+```html
+<span id="attitude"></span>
+```
+
+Then, when the span is ready in the DOM (maybe you need to wait for document ready), you can run the indicator function :
+
+```js
+var indicator = $.flightIndicator('#attitude', type, options);
+```
+Where the first argument is the selector, the type value specify the indicator type and the options overwrite the default settings.
+
+To display the most simple indicator, as for example the attitude indicator, we use :
+
+```js
+var indicator = $.flightIndicator('#attitude', 'attitude');
+```
+
+The type may be `attitude`, `heading`, `variometer`, `airspeed` or `altimeter`. If the type is not correct, the default type will be attitude.
+
+Initial settings can be modified using the `options` parameter. Here are the valid options and the default settings :
+
+```js
+var options = {
+ size : 200,
+ roll : 0,
+ pitch : 0,
+ heading: 0,
+ vario: 0,
+ airspeed: 0,
+ altitude: 0,
+ pressure: 1000,
+ showBox : true,
+ img_directory : 'img/'
+}
+```
+
+##### Size
+The `size` option sets the size in pixels of the indicator.
+
+##### Roll
+The `roll` option sets the roll angle in degrees for an attitude indicator.
+
+##### Pitch
+The `pitch` option sets the pitch angle in degrees for an attitude indicator.
+
+##### Heading
+The `heading` option sets the heading angle in degrees for an heading indicator.
+
+##### Vario
+The `vario` option sets the variometer value in 1000 feets per minute for the variometer indicator !
+
+##### Airspeed
+The `airspeed` option sets the air speed angle knots for an air speed indicator.
+
+##### Altitude
+The `altitude` option sets the altitude in feets for an altimeter indicator.
+
+##### Pressure
+The `pressure` option sets the pressure in hpa for an altimeter indicator.
+
+##### ShowBox
+The `showBox` option sets if the outer squared box is visible or not. It may only take the value `true` of `false`.
+
+##### img_directory
+the `img_directory` option sets the directory where the images are saved. The default value is `img/` directory.
+
+### Updating the indicator informations
+Some methods are used to update the indicators, giving the opportunity to create realtime GUI !
+
+The way to use it is really simple.
+
+```js
+var attitude = $.flightIndicator('#attitude', 'attitude');
+attitude.setRoll(30); // Sets the roll to 30 degrees
+```
+
+Here are the valid methods :
+
+```js
+indicator.setRoll(roll); // Sets the roll of an attitude indicator
+indicator.setPitch(pitch); // Sets the pitch of an attitude indicator
+indicator.setHeading(heading); // Sets the heading of an heading indicator
+indicator.setVario(vario); // Sets the climb speed of an variometer indicator
+indicator.setAirSpeed(speed); // Sets the speed of an airspeed indicator
+indicator.setAltitude(altitude); // Sets the altitude of an altimeter indicator
+indicator.setPressure(pressure); // Sets the pressure of an altimeter indicator
+indicator.resize(size); // Sets the size of any indicators
+indicator.showBox(); // Make the outer squared box of any instrument visible
+indicator.hideBox(); // Make the outer squared box of any instrument invisible
+```
+
+Author and License
+-----------
+Hi ! I'm Sebastien Matton and I'm from Belgium. This project was initialy developped for an engineering project during my Master's Thesis. Feel free to use it.
+
+Thanks
+---------
+Thanks to igneosaur for work on which this project was initialy based ([Project on Bitbucket](https://bitbucket.org/igneosaur/attitude-indicator))

css/flightindicators.css

@@ -0,0 +1,38 @@
+div.instrument {
+ width: 250px;
+ height: 250px;
+ position: relative;
+ display: inline-block;
+ overflow: hidden;
+}
+div.instrument .box {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+}
+div.instrument.attitude div.roll {
+ transform: rotate(0deg);
+}
+div.instrument.attitude div.roll div.pitch {
+ top: 0%;
+}
+div.instrument.heading div.yaw {
+ transform: rotate(0deg);
+}
+div.instrument.vario div.vario {
+ transform: rotate(0deg);
+}
+div.instrument.speed div.airspeed {
+ transform: rotate(90deg);
+}
+div.instrument.altimeter div.pressure {
+ transform: rotate(40deg);
+}
+div.instrument.altimeter div.needle {
+ transform: rotate(90deg);
+}
+div.instrument.altimeter div.needleSmall {
+ transform: rotate(90deg);
+}

example.html

@@ -0,0 +1,54 @@
+<!-- 
+
+WebFlightIndicators by Sébastien Matton
+https://github.com/sebmatton/WebFlightIndicators
+
+This work was inspired by https://bitbucket.org/igneosaur/attitude-indicator
+ 
+ -->
+<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:;}
+ </style>
+</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>
+<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>
+
+<script src="js/jquery.js"></script>
+<script src="js/jquery.flightindicator.js"></script>
+<script type="text/javascript">
+var first_attitude = $.flightIndicator('#first_attitude', 'attitude', {size:300, showBox : true});
+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');
+var altimeter = $.flightIndicator('#altimeter', 'altimeter');
+
+var increment = 0;
+setInterval(function() {
+ increment++;
+ attitude.setRoll(30*Math.sin(increment/10));
+ attitude.setPitch(50*Math.sin(increment/20));
+ heading.setHeading(increment);
+ variometer.setVario(2*Math.sin(increment/10));
+ airspeed.setAirSpeed(80+80*Math.sin(increment/10));
+ altimeter.setAltitude(10*increment);
+ altimeter.setPressure(1000+3*Math.sin(increment/50));
+}, 50);
+</script>
+</body>
+</html>