۱۹
فروردین

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

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

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

فهرست

مقدمه

با سلام خدمت کاربران گرامی سایت پی وی لرن و کاربرانی که علاقمند به فراگیری دوره آموزش کوردوا هستند. در جلسه قبل با پلاگین Device و قابلیت های آن آشنا شدید. در این جلسه با آموزش کار با پلاگین Accelerometer در کوردوا و کاربردها و قابلیت های آن دوره آموزشی کوردوا را ادامه می دهیم.

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

پلاگین Accelerometer ( پلاگین شتاب سنج ) که به آن device-motion نیز می گویند یک پلاگین برای بررسی مسیر حرکت device در سه بعد است.
آموزش کار با پلاگین Accelerometer در کوردوا به صورت مرحله به مرحله نحوه نصب و کار با این پلاگین را خواهد آموخت.

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

ما از cordova-CLI برای نصب پلاگین Accelerometer استفاده خواهیم کرد.
کد زیر را در پنجره command prompt تایپ کنید.

مثال :

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

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

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

در این مرحله دو دکمه به فایل اضافه خواهیم کرد.
از یکی از دکمه ها برای شتاب مورد فعلی استفاده می کنیم و از دکمه دوم نیز برای بررسی تغییر شتاب.

مثال :

<button id = "getAcceleration">GET ACCELERATION</button>
<button id = "watchAcceleration">WATCH ACCELERATION</button>

1 2	<button id = "getAcceleration">GET ACCELERATION</button> <button id = "watchAcceleration">WATCH ACCELERATION</button>

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

اجازه دهید برای دو دکمه ایجاد شده خود event listeners را به تابع onDeviceReady در داخل index.js اضافه نماییم.

مثال :

document.getElementById("getAcceleration").addEventListener("click", getAcceleration);
document.getElementById("watchAcceleration").addEventListener(
   "click", watchAcceleration);

document.getElementById("getAcceleration").addEventListener("click", getAcceleration);

document.getElementById("watchAcceleration").addEventListener(

"click", watchAcceleration);

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

در این مرحله دو تابع ایجاد می کنیم.
اولین تابع برای به دست آوردن شتاب فعلی و دومین تابع نیز برای بررسی شتاب مورد استفاده قرار می گیرند.
اطلاعات مربوط به شتاب نیز هر سه ثانیه نمایش داده خواهند شد.
علاوه بر این تابع clearWatch پیچیده شده توسط تابع setTimeout را اضافه خواهیم کرد تا مانع بررسی شتاب بعد از تعیین چارچوب زمانی شویم.
از پارامتر frequency نیر برای نمایش تابع (callback function) در هر سه ثانیه استفاده می کنیم.

مثال :

function getAcceleration() {
   navigator.accelerometer.getCurrentAcceleration(
      accelerometerSuccess, accelerometerError);

   function accelerometerSuccess(acceleration) {
      alert('Acceleration X: ' + acceleration.x + '\n' +
         'Acceleration Y: ' + acceleration.y + '\n' +
         'Acceleration Z: ' + acceleration.z + '\n' +
         'Timestamp: '      + acceleration.timestamp + '\n');
   };

   function accelerometerError() {
      alert('onError!');
   };
}

function watchAcceleration() {
   var accelerometerOptions = {
      frequency: 3000
   }
   var watchID = navigator.accelerometer.watchAcceleration(
      accelerometerSuccess, accelerometerError, accelerometerOptions);

   function accelerometerSuccess(acceleration) {
      alert('Acceleration X: ' + acceleration.x + '\n' +
         'Acceleration Y: ' + acceleration.y + '\n' +
         'Acceleration Z: ' + acceleration.z + '\n' +
         'Timestamp: '      + acceleration.timestamp + '\n');

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

   function accelerometerError() {
      alert('onError!');
   };
	
}

function getAcceleration() {

navigator.accelerometer.getCurrentAcceleration(

accelerometerSuccess, accelerometerError);

function accelerometerSuccess(acceleration) {

alert('Acceleration X: ' + acceleration.x + '\n' +

'Acceleration Y: ' + acceleration.y + '\n' +

'Acceleration Z: ' + acceleration.z + '\n' +

'Timestamp: ' + acceleration.timestamp + '\n');

};

function accelerometerError() {

alert('onError!');

};

}

function watchAcceleration() {

var accelerometerOptions = {

frequency: 3000

}

var watchID = navigator.accelerometer.watchAcceleration(

accelerometerSuccess, accelerometerError, accelerometerOptions);

function accelerometerSuccess(acceleration) {

alert('Acceleration X: ' + acceleration.x + '\n' +

'Acceleration Y: ' + acceleration.y + '\n' +

'Acceleration Z: ' + acceleration.z + '\n' +

'Timestamp: ' + acceleration.timestamp + '\n');

setTimeout(function() {

navigator.accelerometer.clearWatch(watchID);

}, 10000);

};

function accelerometerError() {

alert('onError!');

};

}

حالا اگر بر دکمه GET ACCELERATION کلیک کنیم می توانیم مقدار شتاب فعلی را به دست آوریم.
در صورت کلیک بر دکمه WATCH ACCELERATION پیغام هشدار در هر سه ثانیه ظاهر خواهد شد.
بعد از نمایش سومین پیغام هشدار تابع فراخوانی شده و تا زمانی که timeout را تا ۱۰۰۰۰ میلی ثانیه تنظیم نکنیم؛ دیگر هیچ پیغام هشداری دریافت نخواهیم کرد.

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

cordova get acceleration

کلام آخر

در آموزش کار با پلاگین Acceleration تعیین شتاب Device و کار با آن و تنظیمات مرتبط با آن را آموختیم.
در جلسه آتی، آموزش جهت یابی Device در کوردوا را به شما خواهیم آموخت.
با پی وی لرن همراه باشید.

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

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

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

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

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

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

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

مقدمه

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

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

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

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

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

کلام آخر

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

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ