ترفندهای پیشرفته برای Inspector مرورگر Chrome (قسمت 27) : کار با شبیه ساز Sensors

- visibility ۰ mode_comment

همونطور که اطلاع دارید در جلسه قبل بحث نحوه مدیریت انیمیشن ها با استفاده از بخش Animations رو به پایان رسوندیم. در این جلسه میخوایم کار با تب شبیه ساز Sensor یا حسگرها رو یاد بگیریم و از اونا استفاده کنیم.

از اونجایی که بیشتر کامپیوترهایی که استفاده میکنیم تراشه های مربوط به GPS و شتاب سنج (Accelerometer) رو ندارند، پس تست کردن اونا کار خیلی سختی است و از این رو Inspector امکانی رو قرار داده که با استفاده از اونا میتونیم این موارد رو به راحتی شبیه سازی کنیم.

در این آموزش دو کار رو انجام میدیم:

  • شبیه سازی مختصات Geolocation برای تست موقعیت فعلی کاربر
  • شبیه سازی Device orientation یا جهت گیری دستگاه برای تست داده های شتاب سنج

نحوه دسترسی به تب Sensors

برای شبیه سازی سنسورهای مختلف باید ابتدا وارد پنل Sensors در Inspector بشید. برای اینکار ابتدا Inspector رو باز کرده و بعد از مسیر زیر Sensors رو باز کنید:

با اینکار تب Sensors در Drawer و زیر Inspector باز خواهد شد:

حالا میتونین در این قسمت موارد مختلف رو شبیه سازی کنید و در کدهاتون چیزایی که میخواید رو به راحتی تست کنید.

بازنویسی اطلاعات مکانی یا Geolocation

برخلاف کامپیوترهای Desktop دستگاه های هوشمند مانند تلفن همراه از سخت افزار GPS برای تشخیص موقعیت مکانی استفاده می کنند. در تب Sensors میتونین اطلاعات مربوط به Geolocation رو تغییر بدین و درون کدهاتون با استفاده از Geolocation API به موقعیت دسترسی داشته باشید. در حالت اول تنظیمات موقعیتی در تب Sensors بصورت No override می باشد و هیچ تغییر و بازنویسی در موقعیت فعلی داده نشده است:

در این حالت اگر از Geolocation API استفاده کنیم، میتونیم به اطلاعات موقعیت فعلی کاربر دسترسی داشته باشیم. برای اینکار کد زیر رو در Console قرار داده و Enter میزنیم:

میبینید که از متد getCurrentPosition مربوط به geolocation استفاده کردیم و اطلاعات موقعیت فعلی رو در Console چاپ کردیم. با اینکار یک درخواست نمایش داده میشه و کاربر باید اجازه دسترسی به اطلاعات مکانی خودش رو بدهد.

اگر بر روی Allow کلیک کنید میتونین به این اطلاعات دسترسی داشته باشید.

خروجی بصورت زیر خواهد بود:

میبینید که عرض و طول جغرافیایی مربوط به موقعیت فعلی قرار داده شده است. دستگاه من از سیستم موقعیتی پشتیبانی میکنه. اگر دستگاهی که این کد رو روی اون اجرا میکنید از GPS و سیستم موقعیت یابی پشتیبانی نکند، یا اروری رو مشاهده خواهید کرد و یا هیچ چیزی رو نمیبینید. در اینجا هست که میتونین از تب Sensors برای شبیه سازی موقعیت مکانی استفاده کنید و متدهای GeoLocation API رو مورد تست قرار بدین.

برای شبیه سازی، امکانات زیادی در اختیارمون قرار داده شده. برای اینکار بر روی Dropdown کلیک میکنیم تا لیست مواردی که میتونیم ازشون استفاده کنیم باز بشه:

  1. این مورد پیش فرض است و در این حالت موقعیت اصلی کاربر در صورت وجود داشتن نمایش داده می شود.
  2. با استفاده از این مورد میتونین اطلاعات دلخواهی رو برای طول و عرض جغرافیایی قرار بدین
  3. با استفاده از این قسمت میتونین موقعیت های از پیش تعیین شده مربوط به چند شهر معروف رو به عنوان موقعیت فعلی قرار بدین.
  4. با استفاده از انتخاب Location unavailable میتونین در دسترس نبودن موقعیت رو شبیه سازی کنید.

فرض کنید که از لیست بالا London رو انتخاب کنیم:

میبینید که طول و عرض جغرافیایی مربوط به لندن نمایش داده شده است. حالا اگر مجددا از کد Javascript استفاده کنیم، خروجی بصورت زیر میشه:

میبینید که همون طول و عرض نمایش داده شده است.

اگر Location unavailable رو انتخاب کنیم، خروجی بصورت undefined نمایش داده خواهد شد.

شبیه سازی جهت گیری یا Orientation دستگاه

برای تست کرده داده های شتاب سنج میتونین از شبیه ساز Orientation استفاده کنید. برای اینکار با استفاده از سه متغیر آلفا، بیتا و گاما جهت گیری دستگاه در فضای سه بعدی رو مشخص میکنیم. از Orientation اغلب اوقات برای بازی ها استفاده میشه. مثلا بازی ماشینی رو در نظر بگیرید که با چپ و راست کردن موبایل، میتونین ماشین رو هدایت کنید. در اینجا برای تست کردن از Orientation API استفاده میکنیم. بصورت زیر:

میبینید که یک رویداد بنام deviceorientation به window اضافه کردیم و زمانی که این رویداد انجام بشه، تابع مورد نظر فراخوانی میشه و رویداد در Console چاپ خواهد شد. در حالت اول و قبل از استفاده از شبیه ساز اگر کد بالا رو در Console قرار بدیم، خروجی بصورت زیر خواهد بود:

میبینید که در حالت اولیه مقدار سه ویژگی alpha و beta و gamma برابر با null می باشد. حالا میتونیم از شبیه ساز برای این منظور استفاده کنیم. بر روی Dropdown کلیک میکنیم تا لیست امکانات مربوطه به ما نمایش داده شود:

  1. در این حالت شبیه ساز غیرفعال می باشد. این مورد بصورت پیش فرض فعال است.
  2. با استفاده از این گزینه میتونین داده های سفارشی و دلخواه رو وارد کنید و همچنین با استفاده از درگ کردن موبایل در سمت راست، جهت گیری دستگاه رو مشخص کنید
  3. با استفاده از این موارد هم میتونین از امکانات از پیش تعریف شده استفاده کنید. مثلا Display Up به معنای اینه که صفحه دستگاه به سمت بالا باشد. بصورت زیر:

میبینید که در این حالت سه مقدار 0 هستند و در سمت راست نیز تصویری از دستگاه نمایش داده شده است. حالا اگر مجددا از Orientation API استفاده کنیم، خروجی بصورت زیر میشه:

میبینید که در اینجا دیگه مقادیر آلفا و ... null نیست و برابر با 0 می باشد. همچنین شما با استفاده از درگ کردن میتونین جهت گیری رو تغییر بدین و هر بار که جهت گیری رو به هر نحوی تغییر بدین، چون یک Event Listener قرار دادین، اطلاعات مربوط به جهت گیری فعلی در Console نمایش داده می شود.

شبیه سازی حالت لمسی و Touch برای دستگاه

در نهایت یک امکان دیگه در Sensors وجود داره که با استفاده از اون میتونین حالت لمسی رو برای سایت فعلی شبیه سازی کنید. برای اینکار گزینه Force Enabled رو انتخاب میکنیم:

با اینکار دیگه ماوس بصورت پیش فرض نیست و حالت لمسی مانند خواهد داشت و میتونین سایتتون رو در حالت لمسی تست کنید.

شکل ماوس بصورت دایره تصویر بالا خواهد شد.

به همین راحتی میتونین از Sensors استفاده کنید.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق باشید

یا علی

comment دیدگاه کاربران
ارسال نظرات

کاربر گرامی، امکان ارسال نظر و پشتیبانی برای دوره های مجازی فقط برای دانشجویان این دوره امکان پذیر می باشد.