वेब एप्लिकेशन मल्टीटच विकास

स्मार्टफोन या टैबलेट जैसे मोबाइल उपकरणों में आमतौर पर संवर्धित उपयोगकर्ता अनुभव के लिए एक कैपेसिटिव टच स्क्रीन होती है।

हर दिन, मोबाइल एप्लिकेशन अधिक से अधिक कठिन होते जा रहे हैं। वेब डेवलपर्स को टचस्क्रीन की सभी विशेषताओं का उपयोग करने के लिए एपीआई की भी आवश्यकता होती है। उदाहरण के लिए, कुछ आर्केड या फाइटिंग गेम में कुछ बटन दबाने की जरूरत होती है, यह फीचर मल्टी-टच सपोर्ट के साथ स्क्रीन प्रदान कर सकता है।

Apple ने iOS 2.0 में अपने टच इवेंट API की शुरुआत की, जल्द ही Android डिवाइसों को भी यह अवसर मिल गया, और टच इवेंट्स API वास्तविक मानक बन गया। W3C वर्किंग ग्रुप को हाल ही में टच इवेंट स्पेसिफिकेशन पर काम करने के लिए इकट्ठा किया गया है।
इस लेख में, मैं स्पर्श घटनाओं एपीआई पर विचार करूंगा जो आईओएस और एंड्रॉइड डिवाइस हमें प्रदान करते हैं, और हम सीखेंगे कि स्पर्श घटनाओं एपीआई का उपयोग करके क्या एप्लिकेशन बनाए जा सकते हैं। लेख में कई उपयोगी उदाहरण और तकनीकें हैं जो टच ईवेंट एपीआई के साथ लेखन अनुप्रयोगों को आसान बनाते हैं।

घटनाओं

ये तीन मुख्य कार्यक्रम विनिर्देश में प्रस्तुत किए गए हैं और कई उपकरणों द्वारा समर्थित हैं:
टचस्टार्ट : DOM तत्व (mousedown के अनुरूप) को स्पर्श करें।
टचमोव : DOM तत्व (mousemove के अनुरूप) के साथ उंगली की गति।
टचेंड : उंगली को DOM एलिमेंट (एनालॉग माउसअप) के साथ हटाया गया।

प्रत्येक ईवेंट में स्पर्श बिंदुओं (उंगली सूचियों) की तीन सूचियाँ शामिल हैं:
टच : स्क्रीन पर सभी स्पर्श बिंदुओं की एक सूची।
targetTouches : वर्तमान तत्व पर बिंदुओं की एक सूची।
बदली गई चीजें : वर्तमान घटना में भाग लेने वाली उंगलियों की सूची। उदाहरण के लिए, टचेंड इवेंट में, यह वह उंगली है जिसे हटा दिया गया था।

सूची का प्रत्येक तत्व प्रारूप का एक उद्देश्य है:
पहचानकर्ता : उंगली की विशिष्ट पहचानकर्ता, जो अब स्क्रीन पर है
लक्ष्य : DOM तत्व, जो घटना का उद्देश्य है
क्लाइंट / पृष्ठ / स्क्रीन निर्देशांक : वह बिंदु जिस पर स्क्रीन पर घटना हुई
त्रिज्या और रोटेशनअंजल : एक दीर्घवृत्त जो एक उंगली के आकार का वर्णन करता है

एप्लिकेशन स्पर्श करें

टचस्टार्ट, टचमोव और टचेंड ईवेंट सभी सामान्य मल्टी-टच जेस्चर - ज़ूम, रोटेशन, और इसी तरह किसी भी टच-आधारित इंटरैक्शन बनाने के लिए एक शक्तिशाली पर्याप्त एपीआई प्रदान करते हैं।

यह उदाहरण आपको एक बिंदु स्पर्श का उपयोग करके DOM तत्व को खींचने की अनुमति देता है:

var obj = document.getElementById('id'); obj.addEventListener('touchmove', function(event) { //  1    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); 

नीचे एक उदाहरण है जो स्क्रीन पर सभी टच को प्रदर्शित करता है।

छवि क्लिक करने योग्य है
यहाँ उसका कोड है:

 //    canvas 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"> 

अधिक ठीक-ट्यूनिंग के लिए, इस लेख को देखें www.html5rocks.com/mobile/mobifying.html#toc-met-viewport

स्क्रॉलिंग निवारण

कुछ मोबाइल उपकरणों में टचमोव जेस्चर के लिए डिफ़ॉल्ट व्यवहार होता है, जैसे कि 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); //  60fps timer = setInterval(function() { renderTouches(touches); }, 15); 

सेटर्सटरवल पर टाइमर एनिमेशन बनाने के लिए एक अच्छा तरीका नहीं है, जैसा कि यह ब्राउज़र redraw चक्र के साथ सिंक्रनाइज़ नहीं होता है। आधुनिक डेस्कटॉप ब्राउजर रिक्वेस्टएनिमेशनफ्रेम फ़ंक्शन प्रदान करता है, जो लूपिंग एनिमेशन के लिए बेहतर अनुकूल है - यह अधिक कुशल है और कम बैटरी की खपत करता है। एक बार जब यह सभी आधुनिक ब्राउज़रों द्वारा समर्थित हो जाता है, तो setInterval का उपयोग करना एक बुरा रूप होगा।

टारगेट और चेंजटच का उपयोग करना

यह समझना महत्वपूर्ण है कि event.touches उन सभी उंगलियों का एक सरणी है जो स्क्रीन के संपर्क में हैं, न कि केवल उन जो DOM तत्व को छूते हैं। सबसे उपयुक्त आमतौर पर event.targetTouches या event.changedTouches है।

अंत में, यदि आप मोबाइल उपकरणों के लिए विकसित कर रहे हैं, तो आपको उन महत्वपूर्ण बिंदुओं को जानना चाहिए जो एरिक बिडेलमैन लेख और डब्ल्यू 3 डी दस्तावेज़ में वर्णित हैं।

डिवाइस का समर्थन

दुर्भाग्य से, सभी डिवाइस उचित गुणवत्ता में स्पर्श घटनाओं का समर्थन नहीं करते हैं। मैंने डायग्नॉस्टिक्स के लिए एक स्क्रिप्ट लिखी, जो एक उपकरण द्वारा टच एपीआई के समर्थन के बारे में जानकारी, साथ ही साथ टचमोव की सटीकता के बारे में जानकारी प्रदर्शित करता है। मैंने नेक्सस वन और नेक्सस एस पर Android 2.3.3, Xoom पर Android 3.0.1 और iPad और iPhone पर iOS 4.2 का परीक्षण किया।

संक्षेप में, ये सभी ब्राउज़र टचस्टार्ट, टचेंड और टचमोव का समर्थन करते हैं।
विनिर्देश 3 और घटनाओं का वर्णन करता है, लेकिन कोई भी ब्राउज़र उनका समर्थन नहीं करता है:
स्पर्शक : उंगली DOM तत्व दर्ज करें।
टचअलीव : उंगली डोम तत्व को छोड़ती है।
स्पर्शक : स्पर्श बाधित (कार्यान्वयन निर्भर)।

सभी परीक्षण किए गए ब्राउज़र टच लिस्ट - टच, टारगेट और चेंज टच भी प्रदान करते हैं। हालाँकि, कोई भी ब्राउज़र त्रिज्या, त्रिज्या, या घूर्णन कोण का समर्थन नहीं करता है, जो उंगली के आकार को निर्धारित करता है।

Touchmove घटना, सभी परीक्षण उपकरणों पर प्रति सेकंड लगभग 60 बार आग।

Android 2.3.3 (Nexus)

Android जिंजरब्रेड ब्राउज़र (Nexus One और Nexus S) में मल्टी-टच सपोर्ट का अभाव है। यह एक ज्ञात मुद्दा है ।

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 डिवाइस पूरी तरह से टच एपीआई का समर्थन करते हैं।

डेवलपर उपकरण

मोबाइल विकास में, कंप्यूटर पर प्रोटोटाइप करना हमेशा आसान होता है और यदि आवश्यक हो, तो परीक्षण के लिए एक लाइव मोबाइल डिवाइस का उपयोग करें। मल्टी-टच उन सभी चीजों में से एक है जो एक नियमित पीसी पर परीक्षण करना मुश्किल है, क्योंकि कई पीसी मल्टी-टच का समर्थन नहीं करते हैं।

मोबाइल उपकरणों पर परीक्षण की आवश्यकता विकास चक्र को बढ़ा सकती है, जैसे आपको सर्वर में प्रत्येक परिवर्तन को अपलोड करना होगा, और फिर डिवाइस को (लगभग प्रति बहुत कठिन)। मोबाइल उपकरणों में आवश्यक डेवलपर टूल का अभाव है।

इस समस्या का समाधान आपके पीसी पर एक स्पर्श घटना का अनुकरण करना है। एक-बिंदु स्पर्श माउस के साथ सिम्युलेटेड हो सकता है। मल्टी-टच को उन उपकरणों पर अनुकरण किया जा सकता है जो मल्टी-टच का समर्थन करते हैं, उदाहरण के लिए, नए ऐप्पल मैकबुक पर।

सिंगल पॉइंट इवेंट्स

यदि आप अपने पीसी पर एक-सूत्रीय घटना का अनुकरण करना चाहते हैं, तो फैंटम लिम्ब को आज़माएं, जो पृष्ठों पर स्पर्श की घटनाओं का अनुकरण करता है।

JQuery के लिए एक Touchable प्लगइन भी है जो माउस और स्पर्श घटनाओं को जोड़ता है।

मल्टी-टच इवेंट्स (MAC only solution)

मल्टीटच डिवाइस (Apple मैकबुक या मैजिकपैड) का उपयोग करके अपने ब्राउज़र में मल्टीटच घटनाओं को संभालने की क्षमता को सक्षम करने के लिए। मैंने MagicTouch.js बनाया, यह आपके ट्रैकपैड से घटनाओं को पकड़ता है और उन्हें मानक के अनुरूप घटनाओं में परिवर्तित करता है।
आरंभ करने के लिए:
1. npTuioClient NPAPI प्लगइन को ~ / लाइब्रेरी / इंटरनेट प्लग-इन में डाउनलोड और इंस्टॉल करें।
2. MagicPad के लिए TongSeng TUIO ऐप डाउनलोड करें और सर्वर शुरू करें।
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> 

मैंने इस विधि का परीक्षण केवल क्रोम 10 में किया है, लेकिन इसे अन्य आधुनिक ब्राउज़रों में काम करना चाहिए।

यदि आपका पीसी मल्टी-टच का समर्थन नहीं करता है, तो आप अन्य TUIO ट्रैकर्स जैसे रिएक्विज़न का उपयोग करके टच ईवेंट का अनुकरण कर सकते हैं। विस्तृत जानकारी TUIO परियोजना की वेबसाइट पर उपलब्ध है।

आपके इशारे ओएस इशारों के साथ ओवरलैप हो सकते हैं। OS X पर, आप सिस्टम वरीयताओं को सिस्टम वरीयताएँ> ट्रैकपैड में कॉन्फ़िगर कर सकते हैं

मल्टी-टच इवेंट मोबाइल ब्राउज़र की बढ़ती संख्या द्वारा समर्थित हैं। मुझे बहुत खुशी है कि नए वेब एप्लिकेशन पूरी ताकत से इस एपीआई का उपयोग कर रहे हैं।

अनुवादक से
मूल लेख की टिप्पणियों में, एक लिंक भी फिसल गया: iPhone पर टच करना और इशारे करना
सुझाव, इच्छा, आलोचना का स्वागत है!