{"id":47256,"date":"2019-11-26T03:01:22","date_gmt":"2019-11-25T17:01:22","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=47256"},"modified":"2019-11-26T18:44:35","modified_gmt":"2019-11-26T08:44:35","slug":"mobile-two-finger-gesture-name-game-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/mobile-two-finger-gesture-name-game-tutorial\/","title":{"rendered":"Mobile Two Finger Gesture Name Game Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Mobile Two Finger Gesture Name Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures_name_game_share_twofinger.jpg\" title=\"Mobile Two Finger Gesture Name Game Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Mobile Two Finger Gesture Name Game Tutorial<\/p><\/div>\n<p>Up until yesterday&#8217;s <a title='Mobile Swipe Gesture Name Game Share Tutorial' href='#msgngst'>Mobile Swipe Gesture Name Game Share Tutorial<\/a> the mobile gesture logic has all been based on &#8230;<\/p>\n<ul>\n<li>one finger touch gestures &#8230; but as users of touch devices will tell you &#8230;<\/li>\n<li>two (or more) finger touch gestures &#8230;<\/li>\n<\/ul>\n<p> &#8230; such as &#8220;pinch&#8221; and &#8220;stretch&#8221; two finger touch scaling gestures are very common and very intuitively used the mobile device world over.<\/p>\n<p>Mobile touch event logic, as a layer of complexity above mouse logic, can determine the <b>number of fingers synchronously touching<\/b> the mobile device as per &#8230;<\/p>\n<p><code><br \/>\nfunction getTouches(evt) {<br \/>\n  return evt.touches ||             \/\/ browser API<br \/>\n         evt.originalEvent.touches; \/\/ jQuery<br \/>\n}<br \/>\n<br \/> <br \/>\nfunction handleTouchStart(evt) {<br \/>\n    <b>numf = getTouches(evt).length;<\/b><br \/>\n    \/\/ rest of ontouchstart logic follows<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; and as a programmer, quite naturally, we may be interested in coding logic to take advantage of this mobile device event complexity, &#8220;on occasions&#8221;.   We say &#8220;on occasions&#8221; because it can be quite difficult to get three or more fingers to be &#8220;synchronous enough&#8221; to make that &#8220;numf&#8221; variable above reflect that &#8220;three or more fingers count&#8221;.  More on that tomorrow, but for today, let&#8217;s write code for the &#8220;pinch&#8221; and &#8220;stretch&#8221; gesture scaling events as per &#8230;<\/p>\n<p><code><br \/>\ndocument.addEventListener('gestureend', function(e) {<br \/>\n    if (e.scale &lt; 1.0 && numf == 2) {<br \/>\n        \/\/ User moved fingers closer together<br \/>\n        if (oname != '') {<br \/>\n        if (lookupw == '') {<br \/>\n        gtrue=true;<br \/>\n        document.title='Ouch!';<br \/>\n        document.getElementById('ifnicknames').src='.\/mg.php';<br \/>\n        } else {<br \/>\n        dopinch('Ouch!');<br \/>\n        }<br \/>\n        } else {<br \/>\n        dopinch('Ouch!');<br \/>\n        }<br \/>\n    } else if (e.scale &gt; 1.0 && numf == 2) {<br \/>\n        \/\/ User moved fingers further apart<br \/>\n        if (oname != '') {<br \/>\n        if (lookupw == '') {<br \/>\n        gtrue=false;<br \/>\n        document.title='Aaaah!';<br \/>\n        document.getElementById('ifnicknames').src='.\/mg.php';<br \/>\n        } else {<br \/>\n        dostretch('Aaaah!');<br \/>\n        }<br \/>\n        } else {<br \/>\n        dostretch('Aaaah!');<br \/>\n        }<br \/>\n    }<br \/>\n}, false);<br \/>\n<\/code><\/p>\n<p> &#8230; thanks to the advice from <a target=_blank title='Useful link, thanks' href='https:\/\/stackoverflow.com\/questions\/11183174\/simplest-way-to-detect-a-pinch'>this excellent link<\/a>.<\/p>\n<p>If you have that &#8220;pinch&#8221; or &#8220;stretch&#8221; gesture capable mobile device, and you want to try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.html----GETME\" title=\"Click picture\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.html----GETME\" title=\"mobile_gestures.htm\">mobile_gestures.htm<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.htm\" title=\"Click picture\">live run<\/a>, please feel free!<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/mobile-two-finger-gesture-name-game-tutorial\/'>Mobile Two Finger Gesture Name Game Tutorial<\/a>.<\/p>\n\n\n\n\n\n<hr>\n\n\n\n\n\n<p id='msgngst'>Previous relevant <a target=_blank title='Mobile Swipe Gesture Name Game Share Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/mobile-swipe-gesture-name-game-share-tutorial\/'>Mobile Swipe Gesture Name Game Share Tutorial<\/a> is shown below.<\/p>\n\n\n\n\n\n[caption id=\"\" align=\"alignnone\" width=\"220\" caption=\"Mobile Swipe Gesture Name Game Share Tutorial\"]<a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Mobile Swipe Gesture Name Game Share Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures_name_game_share.gif\" title=\"Mobile Swipe Gesture Name Game Share Tutorial\"  style=\"float:left;\"   \/><\/a>[\/caption]\n\n\n\n\n\n<p>Yesterday's <a title='Mobile Swipe Gesture Name Game Tutorial' href='#msgngt'>Mobile Swipe Gesture Name Game Tutorial<\/a> was collaborative in its Name Game functionality for ...<\/p>\n\n\n\n\n\n<ul>\n\n\n<li>two players within calling distance and able to get to the same device ( &#128053; \/ &#128584; ) ... and today we cover ...<\/li>\n\n\n\n\n<li>two players not within calling distance and not able to get to the same device ( &#128053; &#128231; &#128053; )<\/li>\n\n\n<\/ul>\n\n\n\n\n\n<p> ... and we think, considering this, that <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=KM2K7sV-K74'><strike>Shirley<\/strike>surely<\/a> this would just involve an email link, <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=1RIHFL105XA'><strike>Shirley<\/strike>surely<\/a>?!   Yes, that would do it, but it would also give away (to a savvy user) the innards of the game, and yet, we were envisaging the game as a surprise for the second player.   But this conundrum is exactly where an <a target=_blank title='HTML Email information fromWikipedia, thanks' href='https:\/\/en.wikipedia.org\/wiki\/HTML_email'>Inline HTML Email<\/a> (via PHP <a target=_blank title='PHP mail method information' href='http:\/\/php.net\/manual\/en\/function.mail.php'>mail<\/a>) email can come in really handy because it is another level of savvy again for your user to see any of the \"business logic\" involved in the game when you present them with an Inline HTML Email button (actually an \"a\" link with <i>style=\"text-decoration:none;\"<\/i> ...<\/p>\n\n\n\n<code>\n&lt;a target=_blank style='text-decoration: none; border:3px solid red; padding: 15px 15px 15px 15px; background-color: yellow; height: 60px; border-radius: 40px;' id=aclick href='\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.htm?name=&array='&gt;<i>Name Game for ~ Courtesy of `<\/i>&lt;\/a&gt;\n<\/code>\n\n\n\n<p>) to click with some short <i>\"does not give the game away\"<\/i> text.  Why an \"a\" element here?  Well, as you would glean when reading our \"early days\" (for us) discussion on this, with <a target=_blank title='PDF Slideshow and Form Creation Helper Inline Email Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/pdf-slideshow-and-form-creation-helper-inline-email-tutorial\/'>PDF Slideshow and Form Creation Helper Inline Email Tutorial<\/a>, that the Javascript \"onclick\" logic of another approach would be rejected by Email Clients like <a target=_blank title='Gmail' href='https:\/\/gmail.com'>Gmail<\/a>, as one example.  You will notice, though, from snippet of \"Inline HTML Email\" HTML above, that inline CSS of the &lt;body&gt; &lt;\/body&gt; section is fine.  Hence our ability to make an \"a\" tag resemble a \"button\".<\/p>\n\n \n\n\n\n<p>And back at the supervisor we just add another HTML \"button\" element to allow for this.  This allows for an HTML form method=POST navigation to a PHP email helper (via an HTML iframe) be called into play.<\/p>\n\n\n\n\n\n<p>Why a <a target=_blank title='HTML button tag information from W3schools' \n href='https:\/\/www.w3schools.com\/tags\/tag_button.asp'>\"button\"<\/a> element, rather than an \"input type='button'\" element?<\/p>\n\n\n\n<code>\n&lt;!--input onclick=\"genask('');\" type=button value=\"Two Player Game ... You Set It Up for Other Player who Turns Away Now\"&gt;&lt;\/input--&gt;\n&lt;button style=\"height:90px;\" onclick=\"genask('');\"&gt;Two Player Name Game &amp;#128053; \/ &amp;#128584; ... &lt;br&gt;You &amp;#128053; Set It Up for Other &lt;br&gt;Player &amp;#128584; who Turns Away Now&lt;\/button&gt;&lt;br&gt;&lt;br&gt;\n&lt;button style=\"height:90px;\" onclick=\"drest(); genask('');\"&gt;Two Player Name Email Game &amp;#128053; &amp;#128231; &amp;#128053; ... &lt;br&gt;You &amp;#128053; Set It Up for Other &lt;br&gt;Player &amp;#128053; via Email &amp;#128231;&lt;\/button&gt;\n<\/code>\n\n\n\n<p>Well, at least for non-mobile platforms, a button with complex wording, we'd like to spread over a few lines of height (as a \"button\" element can, defining this wording via its innerHTML property which can contain &lt;br&gt; line feeds).  And what helps with mobile platforms that still only show the top line of the innerHTML property of a \"button\" element?   Well, we start to involve emojis, and a means of brevity for your more complex concepts you want explained in a web application.<\/p>\n\n\n\n\n\n<p>If you want to try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.html--GETME\" title=\"Click picture\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.html--GETME\" title=\"mobile_gestures.htm\">mobile_gestures.htm<\/a>'s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.htm\" title=\"Click picture\">Two Player Name Game<\/a>, feel free!  Or try it below ...<\/p>\n\n\n\n<iframe src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.htm\" style=\"width:100%;height:800px;\"><\/iframe>\n\n<!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/mobile-swipe-gesture-name-game-share-tutorial\/'>New Mobile Swipe Gesture Name Game Share Tutorial<\/a>.<\/p-->\n<hr>\n<p id='msgngt'>Previous relevant <a target=_blank title='Mobile Swipe Gesture Name Game Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/mobile-swipe-gesture-name-game-tutorial\/'>Mobile Swipe Gesture Name Game Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Mobile Swipe Gesture Name Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures_name_game.jpg\" title=\"Mobile Swipe Gesture Name Game Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Mobile Swipe Gesture Name Game Tutorial<\/p><\/div>\n<p>Today&#8217;s extension of mobile device &#8220;swipe gesture&#8221; event functionality onto yesterday&#8217;s <a title='Mobile Swipe Gesture Detection Primer Tutorial' href='#msgdpt'>Mobile Swipe Gesture Detection Primer Tutorial<\/a> is to turn the &#8220;proof of concept&#8221; feel into an optional Name Game for Two Players web application.<\/p>\n<p>In this Name Game a &#8230;<\/p>\n<ul>\n<li>first player asks the second player to turn away &#8230;<\/li>\n<li>first player starts up <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.html-GETME\" title=\"Click picture\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.html-GETME\" title=\"mobile_gestures.htm\">mobile_gestures.htm<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.htm\" title=\"Click picture\">Two Player Name Game<\/a> &#8230;<\/li>\n<li>first player clicks the one button of the web application, and, in so doing &#8230;<\/li>\n<li>first player is prompted for a user entry such as &#8230;<br \/>\n<code><br \/>\n[1,2,3,4] Cate<br \/>\n<\/code><br \/>\n &#8230; as an example to have second player Cate be sent to [URL1, URL2, URL3, URL4] as Cate respectively swipes [Up, Down, Left, Right] &#8230; noting here that first player can define their own URL suggestions where any &#8220;~&#8221; character is replaced by the second player&#8217;s name &#8230; and then &#8230;<\/li>\n<li>first player calls in second player so that &#8230;<\/li>\n<li>second player swipes wherever they wish &#8230; and depending on swipe type &#8230;<\/li>\n<li>second player can see the first player&#8217;s (tailored) surprises as they play (and swipe)<\/li>\n<\/ul>\n<p>Pretty simple game, huh?!<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank href='\/\/www.rjmprogramming.com.au\/ITblog\/mobile-swipe-gesture-name-game-tutorial\/'>Mobile Swipe Gesture Name Game Tutorial<\/a>.<\/p-->\n<hr>\n<p id='msgdpt'>Previous relevant <a target=_blank title='Mobile Swipe Gesture Detection Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/mobile-swipe-gesture-detection-primer-tutorial\/'>Mobile Swipe Gesture Detection Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Mobile Swipe Gesture Detection Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.jpg\" title=\"Mobile Swipe Gesture Detection Primer Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Mobile Swipe Gesture Detection Primer Tutorial<\/p><\/div>\n<p>Have you ever been curious about &#8220;the behind the scenes&#8221; detection of &#8220;swipe&#8221; gestures on mobile platforms, whether that be&#8230;<\/p>\n<ul>\n<li>swipe right<\/li>\n<li>swipe left<\/li>\n<li>swipe down<\/li>\n<li>swipe up<\/li>\n<\/ul>\n<p>?  The answer for us is &#8220;yes&#8221;.  So we decided to start down a road of discovery largely with the help of <a target=_blank title='Swipe advice, thanks' href='https:\/\/stackoverflow.com\/questions\/2264072\/detect-a-finger-swipe-through-javascript-on-the-iphone-and-android'>this useful link<\/a>, thanks.<\/p>\n<p>This research led us to write an &#8220;in all innocence&#8221; &#8220;proof of concept&#8221; &#8220;gesture playground&#8221; HTML and Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.html_GETME\" title=\"mobile_gestures.html\">mobile_gestures.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.html\" title=\"Click picture\">live run<\/a> for you to swipe away, and be detected!  It may be all you need to dive into some mobile web application development!<\/p>\n<p><!--p>You can also see this play out at WordPressa 4.1.1's <a target=_blank title='Mobile Swipe Gesture Detection Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/mobile-swipe-gesture-detection-primer-tutorial'>Mobile Swipe Gesture Detection Primer Tutorial<\/a>.<\/p-->\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d47228' onclick='var dv=document.getElementById(\"d47228\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/swipe\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d47228' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d47232' onclick='var dv=document.getElementById(\"d47232\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/game\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d47232' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d47235' onclick='var dv=document.getElementById(\"d47235\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/email\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d47235' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d47256' onclick='var dv=document.getElementById(\"d47256\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/pinch\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d47256' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Up until yesterday&#8217;s Mobile Swipe Gesture Name Game Share Tutorial the mobile gesture logic has all been based on &#8230; one finger touch gestures &#8230; but as users of touch devices will tell you &#8230; two (or more) finger touch &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/mobile-two-finger-gesture-name-game-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[222,1604,281,380,385,400,476,485,503,576,2487,652,795,2505,2723,873,945,952,997,1133,1137,3151,1209,1229,1294,1319,1874],"class_list":["post-47256","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-collaborate","tag-collaboration","tag-css","tag-email","tag-emoji","tag-event","tag-game","tag-gesture","tag-gmail","tag-html","tag-inline","tag-javascript","tag-mobile","tag-name","tag-ontouchmove","tag-ontouchstart","tag-pinch","tag-player","tag-programming","tag-share","tag-sharing","tag-stretch","tag-style","tag-swipe","tag-touch","tag-tutorial","tag-two-finger-gesture"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/47256"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=47256"}],"version-history":[{"count":8,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/47256\/revisions"}],"predecessor-version":[{"id":47269,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/47256\/revisions\/47269"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=47256"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=47256"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=47256"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}