{"id":18900,"date":"2015-12-17T02:01:51","date_gmt":"2015-12-16T16:01:51","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=18900"},"modified":"2015-12-18T05:13:35","modified_gmt":"2015-12-17T19:13:35","slug":"the-three-p-three-modes-drag-and-drop-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/the-three-p-three-modes-drag-and-drop-tutorial\/","title":{"rendered":"The Three P Three Modes Drag and Drop Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/interactive_becomes_web.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"The Three P Three Modes Drag and Drop Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/profile_your_callingcard.jpg\" title=\"The Three P Three Modes Drag and Drop Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">The Three P Three Modes Drag and Drop Tutorial<\/p><\/div>\n<p>Today we extend the &#8220;Calling Card&#8221; functionality of yesterday, with &#8220;Calling Card&#8221; functionality you can, optionally, create and control via drag and drop functionality<strike style='color:red;'>, at least for non-mobile platforms<\/strike>.<\/p>\n<p>You can drag parts of the Profile Report you want onto an HTML5 <a target=_blank title='HTML Canvas element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp'><i>canvas<\/i><\/a> element to create your personalized calling card.  You can also create a &#8220;set&#8221; Calling Card from yesterday&#8217;s <a target=_blank title='The Three P Three Modes Calling Card Tutorial' href='#ttptmcct'>The Three P Three Modes Calling Card Tutorial<\/a> as shown below, if that&#8217;s how your sausage rolls.<\/p>\n<p>Nothing else from yesterday&#8217;s ideas changes &#8230; just more functionality &#8230; so &#8230;<\/p>\n<blockquote>\n<p>We have then, today, a new &#8220;Calling Card&#8221; HTML <i>a<\/i> link, which looks a bit like a button, and when pressed shows you the created Calling Card (image) below.  Right click options on this image allow you to &#8230;<\/p>\n<ul>\n<li>copy that image into a buffer<\/li>\n<li>save the image to a hard disk<\/li>\n<li>copy the image ready to paste it into the body section of an Email, as per yesterday&#8217;s <a target=_blank title='The Three P Three Modes Sharing Tutorial' href='#ttptmst'>The Three P Three Modes Sharing Tutorial<\/a> as shown below &#8230; bit like an Email signature<\/li>\n<\/ul>\n<\/blockquote>\n<p> &#8230; all, still applies to today&#8217;s work.<\/p>\n<p>Eventwise, you&#8217;ll want to research &#8230;<\/p>\n<p>So what events were relevant to the left hand (drag) side areas?<\/p>\n<ul>\n<li><a target=_blank title='Event ondragstart information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_ondragstart.asp'>ondragstart<\/a>=&#8221;drag(event)&#8221; &#8230; where we can differentiate a drag and drop from a click\/touch <font color=red>(with mobile and non-mobile platforms we allow for <i>onclick<\/i> event also)<\/font><\/li>\n<p><!--li><a target=_blank title='Event onclick information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onclick.asp'>onclick<\/a>=\"adrag(event)\" ... to allow for platforms that do not support drag and drop<\/li-->\n<\/ul>\n<p>And what additional property?<\/p>\n<ul>\n<li><a target=_blank title='Property draggable information from w3schools' href='http:\/\/www.w3schools.com\/tags\/att_global_draggable.asp'>draggable<\/a>=&#8221;true&#8221;<\/li>\n<\/ul>\n<p>So what events were relevant to the right hand canvas element drop zone?<\/p>\n<ul>\n<!--li><a target=_blank title='Event onmouseover information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onmouseover.asp'>onmouseover<\/a>=\" if (!misdown && pickedcard != '') { omo(event); } \" ... allows for identification of the dropped onto card\/image in a drag and drop event<\/li>\n\n\n\n\n<li><a target=_blank title='Event onmouseup information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onmouseup.asp'>onmouseup<\/a>=\"omu(event)\" ... allows for identification of the dropped onto card\/image in a drag and drop event<\/li>\n\n\n\n\n<li><a target=_blank title='Event onclick information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onclick.asp'>onclick<\/a>=\"omu(event)\" ... to allow for platforms that do not support drag and drop to allow for identification of the right hand image<\/li-->\n<li><a target=_blank title='Event ondragover information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_ondragover.asp'>ondragover<\/a>=&#8221;allowDrop(event)&#8221; <font color=red>(with mobile and non-mobile platforms we allow for <i>onclick<\/i> event to call allowDrop(event) and drop(event))<\/font><\/li>\n<li><a target=_blank title='Event ondrop information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_ondrop.asp'>ondrop<\/a>=&#8221;drop(event)&#8221; <font color=red>(with mobile and non-mobile platforms we allow for <i>onclick<\/i> event to call allowDrop(event) and drop(event))<\/font><\/li>\n<\/ul>\n<p>Yet again, please take a look at the PHP source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/interactive_becomes_web.php---GETME\" title=\"interactive_becomes_web.php\">interactive_becomes_web.php<\/a> changed from yesterday in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/interactive_becomes_web.php---GETME\" title=\"interactive_becomes_web.php\">this way<\/a> and for that first Surfing the Web mode we can give you a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/interactive_becomes_web.php\" title=\"Click picture\">live run<\/a> link to peruse, as well.  And yet again, we really hope this helps you with some ideas you&#8217;ve been working on lately.<\/p>\n<p><b><i><font color=red>Stop Press:<\/font><\/i><\/b><\/p>\n<p><font color=red>Code above allows for mobile platform functionality with touch on left and separate touch on canvas element to right, rather than drag and drop.<\/font><\/p>\n<hr>\n<p id='ttptmcct'>Previous relevant <a target=_blank title='The Three P Three Modes Calling Card Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/the-three-p-three-modes-calling-card-tutorial\/'>The Three P Three Modes Calling Card Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/interactive_becomes_web.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"The Three P Three Modes Calling Card Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/profile_callingcard.jpg\" title=\"The Three P Three Modes Calling Card Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">The Three P Three Modes Calling Card Tutorial<\/p><\/div>\n<p>Today, we extend the Email functionality of yesterday, with a &#8220;Calling Card&#8221; functionality idea.<\/p>\n<p>Yesterday&#8217;s work personalized the application in the sense that you could &#8220;share&#8221; your profile with others, but each time you had to either dig up an old email, or run through the profile questions again, but today, with our &#8220;Calling Card&#8221; idea we offer you the chance to snapshot the Profile Report into an image you can (download and) keep.<\/p>\n<p>In order to do this, at the client end, we have the HTML5 <a target=_blank title='HTML Canvas element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp'><i>canvas<\/i><\/a> element, and its brilliant <a target=_blank title='HTML Canvas element information from w3schools mentions toDataURL method' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp'><i>toDataURL<\/i><\/a> method to thank &#8230; so &#8230; ta muchly, CatDurl.<\/p>\n<p>We have then, today, a new &#8220;Calling Card&#8221; HTML <i>a<\/i> link, which looks a bit like a button, and when pressed shows you the created Calling Card (image) below.  Right click options on this image allow you to &#8230;<\/p>\n<ul>\n<li>copy that image into a buffer<\/li>\n<li>save the image to a hard disk<\/li>\n<li>copy the image ready to paste it into the body section of an Email, as per yesterday&#8217;s <a target=_blank title='The Three P Three Modes Sharing Tutorial' href='#ttptmst'>The Three P Three Modes Sharing Tutorial<\/a> as shown below &#8230; bit like an Email signature<\/li>\n<\/ul>\n<p>Again, please take a look at the PHP source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/interactive_becomes_web.php--GETME\" title=\"interactive_becomes_web.php\">interactive_becomes_web.php<\/a> changed from yesterday in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/interactive_becomes_web.php--GETME\" title=\"interactive_becomes_web.php\">this way<\/a> and for that first Surfing the Web mode we can give you a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/interactive_becomes_web.php\" title=\"Click picture\">live run<\/a> link to peruse, as well.  Again, we really hope this helps you with some ideas you&#8217;ve been working on.<\/p>\n<hr>\n<p id='ttptmst'>Previous relevant <a target=_blank title='The Three P Three Modes Sharing Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/the-three-p-three-modes-sharing-tutorial\/'>The Three P Three Modes Sharing Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/interactive_becomes_web.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"The Three P Three Modes Sharing Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/profile_email.jpg\" title=\"The Three P Three Modes Sharing Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">The Three P Three Modes Sharing Tutorial<\/p><\/div>\n<p>Do you remember yesterday&#8217;s (<a target=_blank title='The Three P Three Modes Primer Tutorial' href='#ttptmpt'>The Three P Three Modes Primer Tutorial<\/a>) Rudimentary Profile Report featuring The Three Ps and The Three (PHP) Modes of Use?  Well, we thought we could improve that application by offering the user a sharing functionality idea, and that is, as so often at this blog, the chance for the user to send an email snapshot of their Profile Report.<\/p>\n<p>Please take a look at the PHP source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/interactive_becomes_web.php-GETME\" title=\"interactive_becomes_web.php\">interactive_becomes_web.php<\/a> changed from yesterday in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/interactive_becomes_web.php-GETME\" title=\"interactive_becomes_web.php\">this way<\/a> and for that first Surfing the Web mode we can give you a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/interactive_becomes_web.php\" title=\"Click picture\">live run<\/a> link to peruse, as well.  We hope this helps you with some ideas.<\/p>\n<p>We send the user off to their default email client by using HTML <i>a<\/i> tags with <i>href<\/i> properties starting with <a target=_blank title='Mailto information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tryit.asp?filename=tryhtml_link_mailto'><i>mailto:<\/i><\/a> to achieve this.<\/p>\n<p>If you examine the code you&#8217;ll see that a large number of calls are made to &#8230;<\/p>\n<ul>\n<li>PHP&#8217;s <a target=_blank title='PHP urlencode information' href='http:\/\/php.net\/manual\/en\/function.urlencode.php'>urlencode<\/a> and <a target=_blank title='PHP urldecode information' href='http:\/\/php.net\/manual\/en\/function.urldecode.php'>urldecode<\/a> methods<\/li>\n<li>Javascript&#8217;s <a target=_blank title='Javascript encodeURIComponent information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_encodeuricomponent.asp'>encodeURIComponent<\/a> method<\/li>\n<\/ul>\n<p> &#8230; to have it so that the link in the email is user genial.<\/p>\n<p>We add little bits of CSS styling to make the HTML <i>a<\/i> tags look a bit like buttons, as well, and we hope this gives you some ideas.<\/p>\n<hr>\n<p id='ttptmpt'>Previous relevant <a target=_blank title='The Three P Three Modes Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/the-three-p-three-modes-primer-tutorial\/'>The Three P Three Modes 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\/PHP\/interactive_becomes_web.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"The Three P Three Modes Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/profile.jpg\" title=\"The Three P Three Modes Primer Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">The Three P Three Modes Primer Tutorial<\/p><\/div>\n<p>Today we show three PHP modes of use with a Rudimentary Profile Report application, showing our usual (modes of use (ideas of)) &#8230;<\/p>\n<ul>\n<li>Surfing the Web &#8211; with a URL typed into web browser address bar and interactively piecing together the (profile) report<\/li>\n<li>Command Line PHP &#8211; with an interactive entry session on the (Bash) Linux command line on a MacBook Pro Terminal application session, and then firing off the report to a web browser (profile) report<\/li>\n<li>Curl use of PHP &#8211; with a command on the (Bash) Linux command line on a MacBook Pro Terminal application session, and then firing off an interactive web page piecing together the (profile) report to a web browser report<\/li>\n<\/ul>\n<p>And today we detect The Three P&#8217;s sleigh riding again, with &#8230;<\/p>\n<ul>\n<li>PHP as the primary web server language used, using its <a target=_blank title='PHP exec() method information' href='http:\/\/php.net\/manual\/en\/function.exec.php'>exec<\/a> method to call &#8230;<\/li>\n<li>Python helps the Command Line PHP and Curl use of PHP modes fire up the web page in a web browser from the command line via the <a target=_blank title='Advice for this came from this useful link ... thanks' href='http:\/\/stackoverflow.com\/questions\/3124556\/clean-way-to-launch-the-web-browser-from-shell-script'>-mwebbrowser<\/a> (Python command line usage) switch<\/li>\n<li>Perl is used, a bit like the Linux <i>sed<\/i> command, to help the Command Line PHP and Curl use of PHP modes populate the Javascript DOM innerHTML property of the following web page&#8217;s H1 heading, to give context to whose profile is involved<\/li>\n<\/ul>\n<p>We tried an idea for the first time today.  Paring it down, the idea is the use of a PHP function &#8230;<\/p>\n<p><code><br \/>\nfunction get_line($inidea, $j) {<br \/>\n  $suffix=\"\";<br \/>\n  if ($j == 1) $suffix=\"&lt;script&gt; document.getElementById('myh1').innerHTML='Profile for ' + document.getElementById('t0').innerHTML + ' ' + document.getElementById('t1').innerHTML; &lt;\/script&gt;\";<br \/>\n  return \"\\n\" . '&lt;script&gt; document.write((\"&lt;td&gt;' . $inidea . '&lt;\/td&gt;&lt;td id=t' . $j . '&gt;\" + prompt(\"What is your ' . $inidea . '?  You can Cancel or OK nothing.\",\"\") + \"&lt;\/td&gt;\").replace(\"&lt;td&gt;' . $inidea . '&lt;\/td&gt;&lt;td id=t' . $j . '&gt;&lt;\/td&gt;\",\"&lt;td&gt;&lt;\/td&gt;&lt;td id=t' . $j . '&gt;&lt;\/td&gt;\").replace(\"&lt;td&gt;' . $inidea . '&lt;\/td&gt;&lt;td id=t' . $j . '&gt;null&lt;\/td&gt;\",\"&lt;td&gt;&lt;\/td&gt;&lt;td id=t' . $j . '&gt;&lt;\/td&gt;\")); &lt;\/script&gt;' . $suffix . \"\\n\";<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; that embeds within a &lt;tr&gt;&lt;\/tr&gt; HTML table row, cell data information within those rows &#8220;on the fly&#8221;, by interactively asking for Profile (Report) information, at the client, via the Javascript <a target=_blank title='Javascript prompt() method information' href='http:\/\/www.w3schools.com\/jsref\/met_win_prompt.asp'>prompt()<\/a> method, encased within the Javascript DOM <a target=_blank title='Javascript DOM document.write() method information' href='http:\/\/www.w3schools.com\/jsref\/met_doc_write.asp'>document.write()<\/a> method.<\/p>\n<p>So please take a look at the PHP source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/interactive_becomes_web.php_GETME\" title=\"interactive_becomes_web.php\">interactive_becomes_web.php<\/a> and for that first Surfing the Web mode we can give you a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/interactive_becomes_web.php\" title=\"Click picture\">live run<\/a> link to peruse, as well.  We hope this helps you with some ideas.<\/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='#d18850' onclick='var dv=document.getElementById(\"d18850\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/php\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d18850' 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='#d18876' onclick='var dv=document.getElementById(\"d18876\"); 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='d18876' 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='#d18889' onclick='var dv=document.getElementById(\"d18889\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/canvas\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d18889' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<p><\/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='#d18900' onclick='var dv=document.getElementById(\"d18900\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/html5\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d18900' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Today we extend the &#8220;Calling Card&#8221; functionality of yesterday, with &#8220;Calling Card&#8221; functionality you can, optionally, create and control via drag and drop functionality, at least for non-mobile platforms. You can drag parts of the Profile Report you want onto &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/the-three-p-three-modes-drag-and-drop-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":[184,352,364,380,400,405,578,707,916,932,997,1761,1012,1115,1200,1319],"class_list":["post-18900","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-canvas","tag-document-write","tag-drag-and-drop","tag-email","tag-event","tag-exec","tag-html5","tag-linux","tag-perl","tag-php","tag-programming","tag-prompt","tag-python","tag-sed","tag-stop-press","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/18900"}],"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=18900"}],"version-history":[{"count":12,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/18900\/revisions"}],"predecessor-version":[{"id":18934,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/18900\/revisions\/18934"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=18900"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=18900"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=18900"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}