مقدمه html5

تلفن های همراه نظیر گوشی های هوشمند و تبلت ها معمولا دارای صفحه لمسی خازنی هستند که قادرند تماس های انگشتان کاربر با خود را شناسایی کنند. با بیشتر شدن اپلیکیشن های پیچیده در سایت های موبایل، برنامه نویسان باید راهی برای بدست گرفتن اوضاع پیدا کنند. برای مثال یک گیم پر تحرک کاربر را وادار می کند که چندین کلید را همزمان فشار دهد و همین موضوع در حیطه صفحه های لمسی به چند لمسی (Multi-Touch) اطلاق می شود.

در این مقاله به Touch Events API در کوشی های اندروید می پردازیم و در می یابیم که چه نوع اپلیکیشن هایی می توان با این API ساخت همچنین تکنیک هایی را بررسی خواهیم کرد تا بتوانیم اپلیکیشن های با قابلیت لمسی را راحت تر بسازیم.

رویداد های لمسی

سه رویداد لمسی مهم در ضمینه گوشی های موبایل و تبلت ها وجود دارد:

• touchstart: قرار گرفتن انگشت روی یک DOM element.
• touchmove: کشیده شدن DOM element توسط انگشت.
• touchend: برداشتن انگشت از یک DOM element.

که هر کدام از این ها خود سه عملکرد لمسی دارند :

• touches: تمامی انگشتان بر روی صفحه.
• targetTouches: چند انگشت بر روی DOM
  element جاری.
• changedTouches: چند انگشت در رویداد جاری. برای مثال در یک رویداد لمسی این انگشت است از روی صفحه برداشته می شود.

این حالت حا شامل شئ هایی هستند که حاوی اطلاعات لمسی می باشند:

• شناسه (identifier):
  عددی است که منحصرا انگشتی که به تازگی صفحه را لمس کرده است را شناسایی می کند.
• هدف (target):
  همان “DOM element ی” می باشد که در واقع هدف عمل است.
• مختصات صفحه نمایش (client/page/screen coordinates):
  جایی که عمل در آنجا انجام می پذیرد.
• شعاع مختصات و زاویه چرخش (radius coordinates and rotationAngle):
  بیضی را که انگشت با تماس خود روی صفحه نمایش ترسیم می کند را تعریف می کند.

اپلیکیشن های با قابلیت لمسی

رویداد های touchstart, touchmove, و
touchend مجموعه تنظیماتی غنی را برای پشتیبانی مجازی از هر نوع تعامل لمسی نظیر همه حالت های چند لمسی از جمله بزرگنمایی، چرخش و غیره فراهم آورده اند.

این ریزکد به شما این امکان را می دهد که با لمس صفحه نمایش توسط تنها یک انگشت DOM element را به این طرف و آن طرف بکشید:

var obj = document.getElementById('id');
obj.addEventListener('touchmove', function(event) {
  // اگر فقط یک انگشت در این عنصر دخیل باشد
  if (event.targetTouches.length == 1) {
    var touch = event.targetTouches[0];
    // عنصر را جایی که انگشت قرار می گیرد می گذارد
    obj.style.left = touch.pageX + 'px';
    obj.style.top = touch.pageY + 'px';
  }
}, false);

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

// Setup canvas and expose context via ctx variable
canvas.addEventListener('touchmove', function(event) {
  for (var i = 0; i < event.touches.length; i++) {
    var touch = event.touches[i];
    ctx.beginPath();
    ctx.arc(touch.pageX, touch.pageY, 20, 0, 2*Math.PI, true);
    ctx.fill();
    ctx.stroke();
  }
}, false);

نسخه نمایشی

می توانید یک نسخه تمایشی چند لمسی جالب مانند نقاشی در کانواس را بررسی کنید.
این نسخه نمایشی توسط پاول آیریش و دیگران تهیه شده است.

بهترین راه کار ها

جلوگیری از بزرگنمایی (prevent zooming)

تنظیات پیش فرض برای چند لمسی به خوبی عمل نمی کنند چرا که مثلا در پیمایش و بزرگنمایی (scrolling and zoomig)، ضربت ها و حالت انگشتان کاربر اغب به رفتار مرورگر وابسته هستند.

برای غیر فعال کرن بزرگنمایی، viewport خود را با استفاده از متا تگ زیر طوری تنظیم کنید که توسط کاربر قابل تنظیم نباشد:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

جلوگیری از پیمایش (prevent scrolling)

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

document.body.addEventListener('touchmove', function(event) {
  event.preventDefault();
}, false);

دستورات را با دقت رندر کنید

اگر دارید اپلیکیشنی چند لمسی درست می کنید که درای حالت های پیچیده لمس با چند انگشت است، دقت داشته باشید که برنامه تان چگونه در مقابل رویداد های لمسی (Touch Events) عکس العمل نشان می دهد. نمونه ای که در بخش پیش مشاهده کردید را در نظر بگیرید، دیدید که چگونه تماس های انگشت با صفحه نمایش را به نقاشی تبدیل کرد. در واقع شما زمانی قادر به نقاشی با آن شدید که یک ورودی لمسی وجود داشته باشد:

canvas.addEventListener('touchmove', function(event) {
  renderTouches(event.touches);
}, false);

اما این تکنیک با تعداد انگشت ها روی صفحه نمایش تناسب ندارد. در عوض، باید تمام انگشت هایتان را دنبال کنید و آن ها را در یک حلقه رندر کنید تا برنامه تان کارایی بهتری داشته باشد:

var touches = []
canvas.addEventListener('touchmove', function(event) {
  touches = event.touches;
}, false);

// Setup a 60fps timer
timer = setInterval(function() {
  renderTouches(touches);
}, 15);

نکته: برای اینکه setInterval حلقه رندر خود مرورگر را در نظر نمی گیرد بنابراین برای انیمیشن سازی اپلیکیشن مناسب و کافی نیست. مرورگر های جدید رایانه های شخصی، requestAnimationFrame را ارائه می کنند که گزینه ای به مراتب بهتر در کارایی و طول عمر باتری قلمداد می شود. با پشتیبانی این ویژگی در مرورگرهای موبایل نیز این بهترین گزینه خواهد بود.

کاربرد targetTouches و changedTouches

به یاد داشته باشید که event.touches یک حلقه برای تمام انگشت های کاربر که در تماس با صفحه نمایش قرار می گیرد است و نه فقظ آن انگشت هایی که روی هدف قرار گرفته اند. بنابراین ممکن است بخواهید به جای آن از event.targetTouches یا event.changedTouches استفاده کنید.

بنابراین از آنجایی که شما برای موبایل ها و تبلت ها برنامه نویسی می کنید باید از این راه کار های کلی آگاه باشید. درباره این راه کار ها
بیشتر بخوانید.

پشتیبانی دستگاه

شوربختانه پیاده سازی رویداد های لمسی بسیار در کیفیت و کمیت متفاوت اند.
در
اینجا اطلاعات پایه درباره پیاده سازی آنها را می توانید مشاهده و بررسی کنید که بر روی اندروید ۲٫۳٫۳ Nexus S و Nexus One و Android
3.0.1 Xoom و iOS 4.2 iPad و iPhone تست شده است.

تمامی مرورگر های تست شده از رویدادهای touchstart,
touchend و touchmove پشتیبانی می کنند.

رویداد های لمسی دیگری نیز هستند اما هیچ یک از مرورگر های تست شده آن ها را پشتیبانی نمی کنند:

• touchenter: انگشت کاربر بر روی DOM element قرار می گیرد.
• touchleave: انگشت کاربر از DOM element فاصله می گیرد.
• touchcancel: تماس انگشت با صفحه نمایش قطع می شود (implementation
  specific).

در هر یک از این حالت ها، مرورگر های تست شده رویداد های
touches, targetTouches و
changedTouches را تامین می کنند. اما هیچ یک از این مرورگر ها از radiusX, radiusY یا rotationAngle که شکل تماس انگشت با صفحه نمایش را مشخص می کنند را پشتیبانی نمی کنند. در طی یک touchmove, رویداد ها۶۰ بار بر ثانیه در تمامی دستگاه ها اجرا می شوند.

اندروید ۲٫۳٫۳ (Nexus)

مرورگر اندروید شیرینی زنجفیلی از حالت چند لمسی (Multi-Touch) پشتیبانی نمی کند.
اطلاعات بیشتر را می توانید در اینجا مطالعه کنید.

اندروید ۳٫۰٫۱ (Xoom)

مرورگر این نسخه از اندروید ویژگی چند لمسی را به طور پایه ای پشتیبانی می کند و فقط در DOM element تکی کار می کند. مرورگر به تماس های همزمان روی DOM element های مختلف به خوبی پاسخ نمی دهد. به بیان دیگر کد زیر می تواند به دو تماس همزمان پاسخ دهد:

obj1.addEventListener('touchmove', function(event) {
  for (var i = 0; i < event.targetTouches; i++) {
    var touch = event.targetTouches[i];
    console.log('touched ' + touch.identifier);
  }
}, false);

var objs = [obj1, obj2];
for (var i = 0; i < objs.length; i++) {
  var obj = objs[i];
  obj.addEventListener('touchmove', function(event) {
    if (event.targetTouches.length == 1) {
      console.log('touched ' + event.targetTouches[0].identifier);
    }
  }, false);
}

iOS 4.x در (iPad, iPhone)

iOS کاملا ویژگی چند لمسی را پشتیبانی می کند و قادر است چندین انگشت را دنبال کند و در مرورگر تجربه بسیار خوبی را تداعی می کند.

ابزار های برنامه نویسی

در برنامه نویسی گوشی های لمسی و تبلت ها اغلب شروع نمونه اولیه کار در رایانه شخصی و سپس تست آن در گوشی مربوطه ساده تر است. لمس چندگانه یکی از ویژگی هایی است که تست آن در محیط رایانه شخصی مشکل است چرا که اغلب آن ها ورودی لمسی ندارند.

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

راه حل این مساله در واقع شبیه سازی رویدادهای لمسی روی ماشین برنامه نویسی تان است. برای تک تماس ها، رویداد های لمسی را می توان بر مبنای رویداد های موشواره(ماوس) تنظیم کرد. در تماس های چندگانه نیز نی توان این شبیه سازی را با دستگاه هایی مانند Apple MacBook جدید انجام داد.

رویداد های تک لمسی (Single-touch events)

If you would like to simulate single-touch events on your desktop, try out
Phantom Limb, which
simulates touch events on pages and also gives a giant hand to boot.

There’s also the Touchable
jQuery plugin that unifies touch and mouse events across platforms.

رویداد های چند لمسی (Multi-touch events)

برای اینکه اپلیکیشن چند لمسی شما بتواند در مرورگر کار کند از
MagicTouch.js polyfill استفاده کنید.
این اسکریپت رویداد های لمسی را از صفحه نمایش می گیرد و آن ها را به رویداد های لمسی سازگار با استاندارد تبدیل می کند.

1. npTuioClient NPAPI plugin را دانلود و در
   /Library/Internet Plug-Ins/~ نصب کنید.
2. TongSeng TUIO app
   را برای Mac’s MagicPad دانلود کنید و استارت سرور را بزنید.
3. MagicTouch.js که یک کتابخانه جاوااسکریپت است را دانلود کنید.
4. اسکریپت magictouch.js و پلاگین npTuioClient را مانند زیر در اپلیکیشن خود قرار دهید:

<head>
  ...
  <script src="/path/to/magictouch.js"></script>
</head>

<body>
  ...
  <object id="tuio" type="application/x-tuio" style="width: 0px; height: 0px;">
    Touch input plugin failed to load!
  </object>
</body>