মাল্টি-টাচ ওয়েব ডেভেলপমেন্ট

Boris Smus

ভূমিকা

স্মার্টফোন এবং ট্যাবলেটের মতো মোবাইল ডিভাইসগুলিতে সাধারণত ব্যবহারকারীর আঙুল দিয়ে তৈরি মিথস্ক্রিয়া ক্যাপচার করার জন্য একটি ক্যাপাসিটিভ স্পর্শ-সংবেদনশীল স্ক্রিন থাকে। মোবাইল ওয়েব ক্রমবর্ধমান পরিশীলিত অ্যাপ্লিকেশন সক্ষম করার জন্য বিকশিত হয়, ওয়েব বিকাশকারীদের এই ঘটনাগুলি পরিচালনা করার জন্য একটি উপায় প্রয়োজন৷ উদাহরণস্বরূপ, প্রায় যেকোন দ্রুত-গতির গেমের জন্য প্লেয়ারকে একবারে একাধিক বোতাম টিপতে হয়, যা একটি টাচস্ক্রিনের প্রেক্ষাপটে মাল্টি-টাচ বোঝায়।

অ্যাপল আইওএস 2.0 এ তাদের স্পর্শ ইভেন্ট API চালু করেছে। অ্যান্ড্রয়েড এই ডি-ফ্যাক্টো স্ট্যান্ডার্ডটি ধরছে এবং ব্যবধান বন্ধ করছে। সম্প্রতি একটি W3C ওয়ার্কিং গ্রুপ এই টাচ ইভেন্ট স্পেসিফিকেশনে কাজ করার জন্য একত্রিত হয়েছে।

এই নিবন্ধে আমি আইওএস এবং অ্যান্ড্রয়েড ডিভাইসগুলির দ্বারা প্রদত্ত টাচ ইভেন্ট API, সেইসাথে স্পর্শ সমর্থন করে এমন হার্ডওয়্যারে ডেস্কটপ ক্রোম এবং আপনি কী ধরণের অ্যাপ্লিকেশন তৈরি করতে পারেন তা অন্বেষণ করব, কিছু সেরা অনুশীলন উপস্থাপন করব এবং দরকারী কৌশলগুলি কভার করব স্পর্শ-সক্ষম অ্যাপ্লিকেশনগুলি বিকাশ করা সহজ করে তোলে।

স্পর্শ ঘটনা

তিনটি বেসিক টাচ ইভেন্ট স্পেসে রূপরেখা দেওয়া হয়েছে এবং মোবাইল ডিভাইস জুড়ে ব্যাপকভাবে প্রয়োগ করা হয়েছে:

• touchstart : একটি আঙুল একটি DOM উপাদানের উপর স্থাপন করা হয়।
• touchmove : একটি আঙুল একটি DOM উপাদান বরাবর টেনে আনা হয়।
• touchend : একটি আঙুল একটি DOM উপাদান থেকে সরানো হয়।

প্রতিটি স্পর্শ ইভেন্টে স্পর্শের তিনটি তালিকা রয়েছে:

• স্পর্শ : বর্তমানে স্ক্রিনে থাকা সমস্ত আঙ্গুলের একটি তালিকা৷
• টার্গেট টাচ : বর্তমান DOM এলিমেন্টে আঙ্গুলের একটি তালিকা।
• পরিবর্তিত স্পর্শ : বর্তমান ইভেন্টে জড়িত আঙ্গুলের একটি তালিকা। উদাহরণস্বরূপ, একটি টাচএন্ড ইভেন্টে, এটি সেই আঙুলটি হবে যা সরানো হয়েছে।

এই তালিকায় এমন বস্তু রয়েছে যাতে স্পর্শের তথ্য থাকে:

• শনাক্তকারী : একটি সংখ্যা যা স্পর্শ সেশনে বর্তমান আঙুলটিকে অনন্যভাবে সনাক্ত করে।
• লক্ষ্য : DOM উপাদান যা কর্মের লক্ষ্য ছিল।
• ক্লায়েন্ট/পৃষ্ঠা/স্ক্রিন স্থানাঙ্ক : স্ক্রিনে যেখানে অ্যাকশন ঘটেছে।
• ব্যাসার্ধ স্থানাঙ্ক এবং ঘূর্ণনকোণ : আঙ্গুলের আকৃতির আনুমানিক উপবৃত্তাকার বর্ণনা করুন।

স্পর্শ-সক্ষম অ্যাপ

টাচস্টার্ট , টাচমুভ , এবং টাচএন্ড ইভেন্টগুলি কার্যত যে কোনও ধরণের স্পর্শ-ভিত্তিক মিথস্ক্রিয়াকে সমর্থন করার জন্য একটি সমৃদ্ধ পর্যাপ্ত বৈশিষ্ট্য সেট সরবরাহ করে – এতে পিঞ্চ-জুম, ঘূর্ণন ইত্যাদির মতো সাধারণ মাল্টি-টাচ অঙ্গভঙ্গি সহ।

এই স্নিপেট আপনাকে একক আঙুলের স্পর্শ ব্যবহার করে একটি DOM উপাদান টেনে আনতে দেয়:

var obj = document.getElementById('id');
obj.addEventListener('touchmove', function(event) {
  // If there's exactly one finger inside this element
  if (event.targetTouches.length == 1) {
    var touch = event.targetTouches[0];
    // Place element where the finger is
    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);

ডেমো

পল আইরিশ এবং অন্যদের দ্বারা এই ক্যানভাস-ভিত্তিক ড্রয়িং ডেমোর মতো বেশ কয়েকটি আকর্ষণীয় মাল্টি-টাচ ডেমো ইতিমধ্যেই বনে রয়েছে৷

এবং ব্রাউজার নিনজা , একটি টেক ডেমো যা একটি ফ্রুট নিনজা ক্লোন যা CSS3 রূপান্তর এবং রূপান্তর, সেইসাথে ক্যানভাস ব্যবহার করে:

সর্বোত্তম অনুশীলন

জুম করা প্রতিরোধ করুন

ডিফল্ট সেটিংস মাল্টি-টাচের জন্য খুব ভাল কাজ করে না, যেহেতু আপনার সোয়াইপ এবং অঙ্গভঙ্গিগুলি প্রায়ই ব্রাউজার আচরণের সাথে যুক্ত থাকে, যেমন স্ক্রলিং এবং জুমিং।

জুমিং অক্ষম করতে, আপনার ভিউপোর্ট সেটআপ করুন যাতে এটি নিম্নলিখিত মেটা ট্যাগ ব্যবহার করে ব্যবহারকারীর পরিমাপযোগ্য না হয়:

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

আপনার ভিউপোর্ট সেট করার বিষয়ে আরও তথ্যের জন্য এই মোবাইল HTML5 নিবন্ধটি দেখুন।

স্ক্রোলিং প্রতিরোধ করুন

কিছু মোবাইল ডিভাইসে টাচমুভের জন্য ডিফল্ট আচরণ রয়েছে, যেমন ক্লাসিক iOS ওভারস্ক্রোল প্রভাব, যার কারণে স্ক্রলিং বিষয়বস্তুর সীমা ছাড়িয়ে গেলে দৃশ্যটি ফিরে আসে। এটি অনেক মাল্টি-টাচ অ্যাপ্লিকেশনে বিভ্রান্তিকর, এবং সহজেই অক্ষম করা যেতে পারে:

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

সাবধানে রেন্ডার

আপনি যদি একটি মাল্টি-টাচ অ্যাপ্লিকেশন লিখছেন যাতে জটিল মাল্টি-আঙ্গুলের অঙ্গভঙ্গি জড়িত থাকে, তবে আপনি স্পর্শ ইভেন্টগুলিতে কীভাবে প্রতিক্রিয়া দেখান সে সম্পর্কে সতর্ক থাকুন, যেহেতু আপনি একসাথে অনেকগুলি পরিচালনা করবেন। পূর্ববর্তী বিভাগে নমুনা বিবেচনা করুন যা পর্দায় সমস্ত স্পর্শ আঁকে। একটি স্পর্শ ইনপুট পাওয়ার সাথে সাথে আপনি আঁকতে পারেন:

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);

দ্রষ্টব্য: টিপ: সেটইন্টারভাল অ্যানিমেশনের জন্য দুর্দান্ত নয়, কারণ এটি ব্রাউজারের নিজস্ব রেন্ডারিং লুপকে বিবেচনা করে না। আধুনিক ডেস্কটপ ব্রাউজার রিকোয়েস্ট অ্যানিমেশনফ্রেম প্রদান করে, যা কর্মক্ষমতা এবং ব্যাটারি লাইফের কারণে অনেক ভালো বিকল্প। একবার মোবাইল ব্রাউজারে সমর্থিত হলে, এটিই হবে পছন্দের কাজ করার উপায়।

টার্গেট টাচ এবং পরিবর্তিত টাচ ব্যবহার করুন

মনে রাখবেন যে event.touches হল স্ক্রিনের সংস্পর্শে থাকা সমস্ত আঙ্গুলের একটি বিন্যাস, শুধু DOM উপাদানের টার্গেটে নয়। এর পরিবর্তে event.targetTouches বা event.changedTouches ব্যবহার করা আপনার কাছে অনেক বেশি উপযোগী মনে হতে পারে।

পরিশেষে, যেহেতু আপনি মোবাইলের জন্য বিকাশ করছেন, তাই আপনাকে সাধারণ মোবাইলের সর্বোত্তম অনুশীলন সম্পর্কে সচেতন হতে হবে, যা এরিক বিডেলম্যানের নিবন্ধের পাশাপাশি এই W3C নথিতে অন্তর্ভুক্ত রয়েছে।

ডিভাইস সমর্থন

দুর্ভাগ্যবশত, স্পর্শ ইভেন্ট বাস্তবায়ন সম্পূর্ণতা এবং মানের মধ্যে ব্যাপকভাবে পরিবর্তিত হয়। আমি একটি ডায়াগনস্টিক স্ক্রিপ্ট লিখেছি যা স্পর্শ API বাস্তবায়ন সম্পর্কে কিছু প্রাথমিক তথ্য প্রদর্শন করে, কোন ইভেন্টগুলি সমর্থিত এবং টাচমুভ ফায়ারিং রেজোলিউশন সহ। আমি Nexus One এবং Nexus S হার্ডওয়্যারে Android 2.3.3, Xoom-এ Android 3.0.1 এবং iPad এবং iPhone-এ iOS 4.2 পরীক্ষা করেছি।

সংক্ষেপে, সমস্ত পরীক্ষিত ব্রাউজার touchstart , touchend , এবং touchmove ইভেন্ট সমর্থন করে৷

বৈশিষ্ট্য তিনটি অতিরিক্ত স্পর্শ ইভেন্ট প্রদান করে, কিন্তু কোন পরীক্ষিত ব্রাউজার তাদের সমর্থন করে:

• touchenter : একটি চলমান আঙুল একটি DOM উপাদানে প্রবেশ করে।
• touchleave : একটি চলমান আঙুল একটি DOM উপাদান ছেড়ে যায়।
• touchcancel : একটি স্পর্শ বাধাপ্রাপ্ত হয় (বাস্তবায়ন নির্দিষ্ট)।

প্রতিটি স্পর্শ তালিকার মধ্যে, পরীক্ষিত ব্রাউজারগুলি স্পর্শ , টার্গেট টাচ এবং পরিবর্তিত টাচ স্পর্শ তালিকাও প্রদান করে। যাইহোক, কোনো পরীক্ষিত ব্রাউজার radiusX, radiusY বা rotationAngle সমর্থন করে না, যা স্ক্রিনে স্পর্শ করা আঙুলের আকৃতি নির্দিষ্ট করে।

একটি টাচ মুভের সময়, সমস্ত পরীক্ষিত ডিভাইস জুড়ে ইভেন্টগুলি সেকেন্ডে প্রায় 60 বার আগুন লাগে।

অ্যান্ড্রয়েড 2.3.3 (নেক্সাস)

অ্যান্ড্রয়েড জিঞ্জারব্রেড ব্রাউজারে (নেক্সাস ওয়ান এবং নেক্সাস এস-এ পরীক্ষা করা হয়েছে), কোনও মাল্টি-টাচ সমর্থন নেই। এটি একটি পরিচিত সমস্যা ।

Android 3.0.1 (Xoom)

Xoom এর ব্রাউজারে, মৌলিক মাল্টি-টাচ সমর্থন আছে, কিন্তু এটি শুধুমাত্র একটি একক DOM উপাদানে কাজ করে। ব্রাউজার বিভিন্ন DOM উপাদানে দুটি যুগপত স্পর্শে সঠিকভাবে সাড়া দেয় না। অন্য কথায়, নিম্নলিখিত দুটি একযোগে স্পর্শে প্রতিক্রিয়া জানাবে:

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।

একক স্পর্শ ঘটনা

আপনি যদি আপনার ডেস্কটপে একক-টাচ ইভেন্ট অনুকরণ করতে চান, Chrome বিকাশকারী সরঞ্জামগুলি থেকে টাচ ইভেন্ট ইমুলেশন প্রদান করে। বিকাশকারী সরঞ্জামগুলি খুলুন, তারপরে সেটিংস গিয়ার নির্বাচন করুন, তারপরে "ওভাররাইড" বা "ইমুলেশন", এবং "এমুলেট টাচ ইভেন্ট" চালু করুন।

অন্যান্য ব্রাউজারগুলির জন্য, আপনি ফ্যান্টম লিম্ব ব্যবহার করে দেখতে চাইতে পারেন, যা পৃষ্ঠাগুলিতে স্পর্শ ইভেন্টগুলিকে অনুকরণ করে এবং বুট করার জন্য একটি বিশাল হাত দেয়৷

এছাড়াও স্পর্শযোগ্য jQuery প্লাগইন রয়েছে যা প্ল্যাটফর্ম জুড়ে টাচ এবং মাউস ইভেন্টকে একীভূত করে।

মাল্টি-টাচ ইভেন্ট

আপনার মাল্টি-টাচ ওয়েব অ্যাপ্লিকেশনকে আপনার ব্রাউজারে আপনার মাল্টি-টাচ ট্র্যাকপ্যাডে কাজ করতে সক্ষম করতে (যেমন একটি Apple MacBook বা MagicPad), আমি MagicTouch.js পলিফিল তৈরি করেছি। এটি আপনার ট্র্যাকপ্যাড থেকে টাচ ইভেন্ট ক্যাপচার করে এবং সেগুলিকে স্ট্যান্ডার্ড-সামঞ্জস্যপূর্ণ টাচ ইভেন্টে পরিণত করে।

1. ~/Library/Internet Plug-Ins/-এ npTuioClient NPAPI প্লাগইন ডাউনলোড এবং ইনস্টল করুন।
2. ম্যাকের ম্যাজিকপ্যাডের জন্য TongSeng TUIO অ্যাপটি ডাউনলোড করুন এবং সার্ভার চালু করুন।
3. MagicTouch.js ডাউনলোড করুন, একটি জাভাস্ক্রিপ্ট লাইব্রেরি যা npTuioClient কলব্যাকের উপর ভিত্তি করে স্পেক-সামঞ্জস্যপূর্ণ টাচ ইভেন্ট অনুকরণ করতে।
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>

আপনাকে প্লাগইন সক্ষম করতে হতে পারে।

magictouch.js সহ একটি লাইভ ডেমো paulirish.com/demo/multi এ উপলব্ধ:

আমি শুধুমাত্র Chrome 10 এর সাথে এই পদ্ধতিটি পরীক্ষা করেছি, তবে এটি শুধুমাত্র ছোটখাট পরিবর্তন সহ অন্যান্য আধুনিক ব্রাউজারগুলিতে কাজ করা উচিত।

যদি আপনার কম্পিউটারে মাল্টি-টাচ ইনপুট না থাকে, তাহলে আপনি অন্যান্য TUIO ট্র্যাকার ব্যবহার করে টাচ ইভেন্টগুলি অনুকরণ করতে পারেন, যেমন reacTIVision ৷ আরও তথ্যের জন্য, TUIO প্রকল্প পৃষ্ঠা দেখুন।

মনে রাখবেন যে আপনার অঙ্গভঙ্গিগুলি OS-স্তরের মাল্টি-টাচ অঙ্গভঙ্গির অনুরূপ হতে পারে৷ OS X-এ, আপনি সিস্টেম পছন্দগুলিতে ট্র্যাকপ্যাড পছন্দ ফলকে গিয়ে সিস্টেম-ব্যাপী ইভেন্টগুলি কনফিগার করতে পারেন।

যেহেতু মাল্টি-টাচ বৈশিষ্ট্যগুলি মোবাইল ব্রাউজারগুলিতে আরও ব্যাপকভাবে সমর্থিত হয়ে উঠেছে, তাই নতুন ওয়েব অ্যাপ্লিকেশনগুলি এই সমৃদ্ধ API-এর সম্পূর্ণ সুবিধা নিতে দেখে আমি খুবই উত্তেজিত।