How to use JQuery Flight Indicator plugin


Jquery Flight Indicator plugin dapat didownload pada link berikut. Plugin tersebut dapat digunakan untuk menampilkan flight indicator dengan kualitas yang sangat baik dengan menggunakan Html, css3, JQuery dan SVG images. Semua gambar SVG tersebut dapat automatis resize menyesuaikan aplikasi yang anda kerjakan tanpa mengurangi kualitas gambarnya.

Berikut indicator yang dapat disupport oleh plugin tersebut :

  • Attitude (artificial horizon)
  • Heading
  • Vertical speed
  • Air speed
  • Altimeter

Cara Menggunakan :

Untuk menggunakan plugin tersebut dalam sebuah website, berikut langkah-langkahnya :

  • Download plugin JQuery
  • Download plugin Fligh Indicator
  • Buat sebuah folder, misal flight dan buat file html didalamnya misal index.html, dan buat script seperti berikut :
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery Flight Indicators</title>
</head>
<body>

</body>
</html>
  • Copy folder css, img dan js dari hasil download file flight indcator ke dalam folder flight yang sudah dibuat sebelumnya
  • Copy file jquery-3.2.1.min.js juga ke dalam folder “flight/js/“, sehinggah path foldernya menjadi seperti berikut :
Flight
|
|__css
|  |__flightindicators.min.css
|
|__img
|  |__file image yang dibutuhkan
|
|__js
|  |__jquery.flightindicators.js
|  |__jquery-3.2.1.min.js
|
|__index.html
  • Tambahkan path file css, js ke dalam file index.html, agar plugin tersebut dapat digunakan pada halaman web yang sudah dibuat
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery Flight Indicators</title>
    	<link rel="stylesheet" type="text/css" href="css/flightindicators.min.css"/>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/jquery.flightindicators.js"></script>
</head>
<body>

</body>
</html>
  • Selanjutnya menambahkan attitude indicator pada halaman web dengan menambahkan tab span berikut pada file index.html di bagian bawah tag body sebagai tempat untuk meletakkan tamplian attitude indicator tersebut
<span id="attitude"></span>
  • Tambahkan kode javascript untuk meng-generate tampilan attitude indicator pada tag head seperti berikut :
$(function(){
var options = {
	size : 200,				// Sets the size in pixels of the indicator (square)
	roll : 0,				// Roll angle in degrees for an attitude indicator
	pitch : 0,				// Pitch angle in degrees for an attitude indicator
	showBox : true,			// Sets if the outer squared box is visible or not (true or false)
	img_directory : 'img/'	// The directory where the images are saved to
}
var attitude = $.flightIndicator('#attitude', 'attitude',options );
});
  • Sehingga akhir file index.html menjadi seperti berikut :
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery Flight Indicators</title>
    	<link rel="stylesheet" type="text/css" href="css/flightindicators.min.css"/>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/jquery.flightindicators.js"></script>
    <script type="text/javascript">
      $(function(){
        var options = {
            size : 200,				// Sets the size in pixels of the indicator (square)
            roll : 0,				// Roll angle in degrees for an attitude indicator
            pitch : 0,				// Pitch angle in degrees for an attitude indicator
            showBox : true,			// Sets if the outer squared box is visible or not (true or false)
            img_directory : 'img/'	// The directory where the images are saved to
        }
        var attitude = $.flightIndicator('#attitude', 'attitude',options );
    });
    </script>
</head>
<body>
    <span id="attitude"></span>
</body>
</html>
  • Jalankan file index.html pada browser dan hasilnya akan seperti berikut

attitude

untuk lebih detail tentang penggunaan indicator yang lainnya bisa mengunjungi link demo online berikut.

Terimkasih, semoga bermanfaat

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s