۱۹
فروردین

جلسه ۱۴ : آموزش کار با پلاگین Device Orientation در کوردوا

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

فهرست

مقدمه

با سلام خدمت کاربران گرامی سایت پی وی لرن و کاربرانی که علاقمند به فراگیری دوره آموزش کوردوا هستند. در جلسه قبل آموزش کار با پلاگین Accelerometer به شما ارائه گردید و نحوه تعیین شتاب در Device و نیز تنظیمات مربوط به آن، آموزش داده شد. در این جلسه از سلسله جلسات آموزش Cordova، آموزش کار با پلاگین Device Orientation در کوردوا ارائه می گردد.

آموزش کار با پلاگین Device Orientation در کوردوا

آموزش کار با پلاگین Device Orientation در کوردوا به صورت گام به گام و مرحله به مرحله به شما خواهیم آموخت که چگونه این پلاگین را نصب نموده و تنظیمات مربوط به آن را انجام دهید و در نهایت آن را به کار ببرید.

مرحله ۱ – نصب پلاگین Device Orientation

پنجره command prompt را باز کرده و کد زیر را اجرا نمایید.

مثال :

C:\Users\username\Desktop\CordovaProject>cordova plugin 
   add cordova-plugindevice-orientation

1 2	C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugindevice-orientation

مرحله ۲ – اضافه کردن دکمه ها

پلاگین Device Orientation بسیار شبیه به پلاگین acceleration است. اجازه دهید دو دکمه در فایل index.html ایجاد نماییم.

مثال :

<button id = "getOrientation">GET ORIENTATION</button>
<button id = "watchOrientation">WATCH ORIENTATION</button>

1 2	<button id = "getOrientation">GET ORIENTATION</button> <button id = "watchOrientation">WATCH ORIENTATION</button>

مرحله ۳ – اضافه کردن Event Listener

حالا event listeners را در درون تابع onDeviceReady در ایجاد index.js می نماییم.

مثال :

document.getElementById("getOrientation").addEventListener("click", getOrientation);
document.getElementById("watchOrientation").addEventListener("click", watchOrientation);

1 2	document.getElementById("getOrientation").addEventListener("click", getOrientation); document.getElementById("watchOrientation").addEventListener("click", watchOrientation);

مرحله ۴ – ایجاد توابع

در این مرحله دو تابع ایجاد می کنیم.
اولین تابع مربوط به تولید شتاب فعلی است و دومین تابع نیز تغییرات جهت یابی را بررسی می نماید.
همان طور که می بینید دوباره از گزینه frequency برای بررسی تغییرات ایجاد شده در هر سه ثانیه استفاده کرده ایم.

مثال :

function getOrientation() {
   navigator.compass.getCurrentHeading(compassSuccess, compassError);

   function compassSuccess(heading) {
      alert('Heading: ' + heading.magneticHeading);
   };

   function compassError(error) {
      alert('CompassError: ' + error.code);
   };
}

function watchOrientation(){
   var compassOptions = {
      frequency: 3000
   }
   var watchID = navigator.compass.watchHeading(compassSuccess, 
      compassError, compassOptions);

   function compassSuccess(heading) {
      alert('Heading: ' + heading.magneticHeading);

      setTimeout(function() {
         navigator.compass.clearWatch(watchID);
      }, 10000);
   };

   function compassError(error) {
      alert('CompassError: ' + error.code);
   };
};

function getOrientation() {

navigator.compass.getCurrentHeading(compassSuccess, compassError);

function compassSuccess(heading) {

alert('Heading: ' + heading.magneticHeading);

};

function compassError(error) {

alert('CompassError: ' + error.code);

};

}

function watchOrientation(){

var compassOptions = {

frequency: 3000

}

var watchID = navigator.compass.watchHeading(compassSuccess,

compassError, compassOptions);

function compassSuccess(heading) {

alert('Heading: ' + heading.magneticHeading);

setTimeout(function() {

navigator.compass.clearWatch(watchID);

}, 10000);

};

function compassError(error) {

alert('CompassError: ' + error.code);

};

از آن جا که پلاگین compass کم و بیش همان پلاگین acceleration است؛ به شما یک کد خطا نمایش داده می شود.
بعضی از Device ها از قابلیت سنسور مغناطیسی (magnetic sensor) که لازم کار پلاگین compass است؛ برخوردار نیستند.
اگر Device شما فاقد سنسور مغناطیسی بود؛ خطای زیر نمایش داده خواهد شد.

آموزش کار با پلاگین Device Orientation در کوردوا

cordova compass error

کلام آخر

در این جلسه آموزش کار با پلاگین Device Orientation در کوردوا و جهت یابی مسیر Device را آموختید.
در جلسه بعدی آموزش کار با پلاگین Dialogs ارائه خواهید گردید.
با پی وی لرن همراه باشید.

QR: جلسه ۱۴ : آموزش کار با پلاگین Device Orientation در کوردوا

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 2

Farid
اردیبهشت ۵, ۱۳۹۸
با سلام و تشکر
تابع watchorentation یک آکولاد “}” انتهایی در آخر کد کم دارد.
با تشکر از شما
پاسخ دادن
- پی وی لرن
  اردیبهشت ۵, ۱۳۹۸
  سلام
  بله درست است اصلاح شد.
  ممنون از اطلاع شما
  پاسخ دادن

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۱۴ : آموزش کار با پلاگین Device Orientation در کوردوا

مقدمه

آموزش کار با پلاگین Device Orientation در کوردوا

مرحله ۱ – نصب پلاگین Device Orientation

مرحله ۲ – اضافه کردن دکمه ها

مرحله ۳ – اضافه کردن Event Listener

مرحله ۴ – ایجاد توابع

کلام آخر

لیست مطالب دوره

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ