{"id":45120,"date":"2019-05-31T03:01:15","date_gmt":"2019-05-30T17:01:15","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=45120"},"modified":"2019-05-31T13:25:33","modified_gmt":"2019-05-31T03:25:33","slug":"same-domain-popup-moveto-canvas-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/same-domain-popup-moveto-canvas-tutorial\/","title":{"rendered":"Same Domain Popup Moveto Canvas Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/move_around_edge.htm\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Same Domain Popup Moveto Canvas Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/popup_signature.jpg\" title=\"Same Domain Popup Moveto Canvas Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Same Domain Popup Moveto Canvas Tutorial<\/p><\/div>\n<p>The current popup window project we are constructing on top of yesterday&#8217;s <a title='Same Domain Popup Moveto User Control Tutorial' href='#sdpmuct'>Same Domain Popup Moveto User Control Tutorial<\/a> relies on non-mobile platform principles and though we are sad this is the case we want to persevere because there are interesting ideas to follow, we hope.<\/p>\n<p>Today&#8217;s (interesting idea) is to add into the mix an HTML <a target=_blank title='HTML Canvas element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp'>canvas<\/a> element (as introduced with HTML5).  As you might surmise reading about the canvas element here or elsewhere this graphical &#8220;masterpiece&#8221; of functionality normally needs a lot of room on the webpage, and today is no exception.  That means a couple of our favourite &#8220;overlay&#8221; (CSS) features to &#8220;kick down the road&#8221; come into play, a lot, today, namely &#8230;<\/p>\n<ul>\n<li><a target=_blank title='CSS z-index information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_pos_z-index.asp'>z-index<\/a><\/li>\n<li><a target=_blank title='CSS opacity property information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/css3_pr_opacity.asp'>opacity<\/a><\/li>\n<\/ul>\n<p>What&#8217;s the idea of the canvas element usage?  Adding onto yesterday&#8217;s dual usage modes of &#8230;<\/p>\n<ul>\n<li>automated edge creeping popup windows &#8230; and\/or &#8230;<\/li>\n<li>&#8220;break out&#8221; user drag of popup window user positioning<\/li>\n<\/ul>\n<p> &#8230; we add a &#8220;drawing&#8221; (or sort of &#8220;tracing&#8221;) feature set, allowing for three new buttons &#8230;<\/p>\n<ul>\n<li>Draw Back As Is<\/li>\n<li>Draw Back Your Interventions Only<\/li>\n<li>Draw Back Default Moves Only<\/li>\n<\/ul>\n<p> &#8230; which we hope are self explanatory &#8220;modes of usage&#8221;.  <a target=_blank title=\"but there's more\" href=\"http:\/\/www.youtube.com\/watch?v=iiATDMHU7gc\">&#8220;But there&#8217;s more&#8221;<\/a> here.  We need a way that a click of any of these buttons differentiates &#8230;<\/p>\n<ul>\n<li>pen down &#8230; the default &#8230; from &#8230;<\/li>\n<li>pen up<\/li>\n<\/ul>\n<p> &#8230; behaviour.  We decide on a &#8220;timing and flagging&#8221; paradigm, allowing the user to (periodically be able to) &#8220;move&#8221; the popup window in a <i>&#8220;break out&#8221; user drag of popup window user positioning<\/i> scenario.  After a short period of allowance the web application reverts back to its default pen down mode of usage.  You can see us &#8220;drawing&#8221; our signature to the canvas (also featuring the &#8220;overlay&#8221; CSS <a target=_blank title='CSS position:absolute information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_class_position.asp'>position:absolute<\/a> property) with today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/popup_signature.jpg\" title=\"Tutorial picture\">tutorial picture<\/a>.<\/p>\n<p>Again, you can try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/move_around_edge.html--GETME\" title=\"move_around_edge.htm\">this changed HTML<\/a> out yourself with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/move_around_edge.html--GETME\" title=\"move_around_edge.htm\">move_around_edge.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/move_around_edge.htm\" title=\"Click picture\">live run<\/a> link.<\/p>\n<hr>\n<p id='sdpmuct'>Previous relevant <a target=_blank title='Same Domain Popup Moveto User Control Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/same-domain-popup-moveto-user-control-tutorial\/'>Same Domain Popup Moveto User Control 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\/move_around_edge.htm\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Same Domain Popup Moveto User Control Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/move_around_edge_take_control.jpg\" title=\"Same Domain Popup Moveto User Control Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Same Domain Popup Moveto User Control Tutorial<\/p><\/div>\n<p>Moving along &#8230; chortle chortle &#8230; from yesterday&#8217;s <a title='Same Domain Popup Moveto Primer Tutorial' href='#sdpmpt'>Same Domain Popup Moveto Primer Tutorial<\/a> automated (ie. programmed) screen edge popup window moving, can we allow the user to control the popup window positioning?<\/p>\n<p>Before you say &#8220;of course we can, we don&#8217;t run this web application&#8221; we need to explain that <i>popup windows<\/i> are a different kettle of fish in terms of &#8230;<\/p>\n<ul>\n<li>parent &#8230; communicating with &#8230;<\/li>\n<li>child<\/li>\n<\/ul>\n<p> &#8230; than <i>iframes<\/i> are.  With <i>popup windows<\/i> there is no &#8220;parent.&#8221; DOM relationship usage or &#8220;.contentWindow&#8221; DOM content usage, but you can have a &#8230;<\/p>\n<ul>\n<li>Window object <b>via<\/b> &#8230;<br \/>\n<code><br \/>\n var <b>winObj<\/b> = window.open([URL], [WindowName], [pwhx]);<br \/>\n<\/code><br \/>\n &#8230; and today, to monitor position, from that Window object we can access &#8230;<\/li>\n<li>winObj.screenX and winObj.screenY (left and top positioning respectively)<\/li>\n<\/ul>\n<p> &#8230; enough for us to work with comparing these with default edge creeping X and Y to determine if the user has taken control as per the <i>setInterval(tracker, 200)<\/i> controlled &#8230;<\/p>\n<p><code><br \/>\n    var allowmove=true;  \/\/ ie. allow computer to move the popup ... versus the user<br \/>\n    var inarow=0;<br \/>\n    function tracker() {<br \/>\n      if (wois) {<br \/>\n        if (eval('' + pindex) &gt; 0) {<br \/>\n        var ws='';<br \/>\n        var hs='';<br \/>\n        try {<br \/>\n           ws=('' + wois.screenX);<br \/>\n        } catch(wert) {<br \/>\n           ws=pwhx.replace(pwh,'').replace('screenX=','left=').split('left=')[1].split(',')[0];<br \/>\n        }<br \/>\n        try {<br \/>\n           hs=('' + wois.screenY);<br \/>\n        } catch(wert) {<br \/>\n           hs=pwhx.replace(pwh,'').replace('screenY=','top=').split('top=')[1].split(',')[0];<br \/>\n        }<br \/>\n        if (!allowmove && ws == '0') {<br \/>\n          inarow=0;<br \/>\n          allowmove=true;<br \/>\n          wois.focus();<br \/>\n        }<br \/>\n        if (pwhx.replace(pwh,'').indexOf('' + ws) == -1 && ('' + movetosx[eval(pindex % movetosx.length)]).indexOf('.0') != -1) { \/\/ || pwhx.replace(pwh,'').indexOf('' + wois.screenY) == -1) {<br \/>\n          inarow++;<br \/>\n          if (inarow &gt; 10 && ('' + ws + '~').indexOf('0~') == -1) { allowmove=false; }<br \/>\n          console.log('tracker here ' + pwhx + ' ' + ws + ' ... ' + hs);<br \/>\n        } else {<br \/>\n          inarow=0;<br \/>\n          console.log('Tracker Here ' + pwhx + ' ' + ws + ' ... ' + hs);<br \/>\n        }<br \/>\n        } else {<br \/>\n           console.log('pretracker here ');<br \/>\n       }<br \/>\n      }<br \/>\n    }<br \/>\n<\/code><\/p>\n<p> &#8230; combined with the webpage &#8220;blurb&#8221; (ie. instructions) &#8230;<\/p>\n<blockquote><p>\nIn some places you can move this to take the controls from the automated screen edge movements.  If so to relinquish control place at left hand edge again.\n<\/p><\/blockquote>\n<p>You can try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/move_around_edge.html-GETME\" title=\"move_around_edge.htm\">this changed HTML<\/a> out yourself with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/move_around_edge.html-GETME\" title=\"move_around_edge.htm\">move_around_edge.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/move_around_edge.htm\" title=\"Click picture\">live run<\/a> link.<\/p>\n<hr>\n<p id='sdpmpt'>Previous relevant <a target=_blank title='Same Domain Popup Moveto Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/same-domain-popup-moveto-primer-tutorial\/'>Same Domain Popup Moveto 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\/move_around_edge.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Same Domain Popup Moveto Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/move_around_edge.jpg\" title=\"Same Domain Popup Moveto Primer Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Same Domain Popup Moveto Primer Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a target=_blank title='Australian Postcode Place Modal Backdrop Popup Move Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/australian-postcode-place-modal-backdrop-popup-move-tutorial\/'>Australian Postcode Place Modal Backdrop Popup Move Tutorial<\/a> outlined a dilemma &#8230;<\/p>\n<blockquote cite='https:\/\/www.rjmprogramming.com.au\/ITblog\/australian-postcode-place-modal-backdrop-popup-move-tutorial\/'>\n<ul>\n<li><a target=_blank href='http:\/\/www.w3schools.com\/jsref\/met_win_open.asp' title='window.open information from w3schools'>window.open<\/a> based Window with that 3rd argument popup positioning used &#8230;<\/li>\n<li>Window object method <a target=_blank title='Window object method moveTo' href='https:\/\/www.w3schools.com\/jsref\/met_win_moveto.asp'>moveTo<\/a> &#8230; when that Window URL is &#8230;<\/li>\n<li>cross-domain<\/li>\n<\/ul>\n<\/blockquote>\n<p> &#8230; but today we change &#8220;cross&#8221; to &#8220;same&#8221; and show what is possible with the Window object method <a target=_blank title='Window object method moveTo' href='https:\/\/www.w3schools.com\/jsref\/met_win_moveto.asp'>moveTo<\/a> method.  We can even have webpage windows controlled by a parent window that does not even overlap the popups it is creating, so that we can ring a central window with moving popup windows.<\/p>\n<p>Try this out yourself with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/move_around_edge.html_GETME\" title=\"move_around_edge.html\">move_around_edge.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/move_around_edge.html\" title=\"Click picture\">live run<\/a> link, or see this with the video below &#8230;<\/p>\n<p><video style='width:100%;' controls><source src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/move_around_edge.mp4' type='video\/mp4'><\/source><\/video><\/p>\n<p>You can also see this play out at WordPress 4.1.1&#8217;s <a target=_blank title='Same Domain Popup Moveto Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/same-domain-popup-moveto-primer-tutorial\/'>Same Domain Popup Moveto 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='#d45097' onclick='var dv=document.getElementById(\"d45097\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/screen\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d45097' 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='#d45109' onclick='var dv=document.getElementById(\"d45109\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/setinterval\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d45109' 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='#d45120' onclick='var dv=document.getElementById(\"d45120\"); 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='d45120' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The current popup window project we are constructing on top of yesterday&#8217;s Same Domain Popup Moveto User Control Tutorial relies on non-mobile platform principles and though we are sad this is the case we want to persevere because there are &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/same-domain-popup-moveto-canvas-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,1,37],"tags":[184,355,400,576,652,2968,894,967,997,2256,1125,1319,1583],"class_list":["post-45120","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-uncategorised","category-tutorials","tag-canvas","tag-domain","tag-event","tag-html","tag-javascript","tag-moveto","tag-overlay","tag-popup","tag-programming","tag-screen","tag-setinterval","tag-tutorial","tag-window"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/45120"}],"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=45120"}],"version-history":[{"count":4,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/45120\/revisions"}],"predecessor-version":[{"id":45124,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/45120\/revisions\/45124"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=45120"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=45120"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=45120"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}