{"id":48271,"date":"2020-03-17T03:01:00","date_gmt":"2020-03-16T17:01:00","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=48271"},"modified":"2020-03-17T09:45:44","modified_gmt":"2020-03-16T23:45:44","slug":"javascript-convex-polygon-analyze-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-convex-polygon-analyze-tutorial\/","title":{"rendered":"Javascript Convex Polygon Analyze Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/rectangle_analyze.htm\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Javascript Rotated Rectangle Analyze Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/rectangle_analyze_notall_four.jpg\" title=\"Javascript Rotated Rectangle Analyze Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Javascript Convex Polygon Analyze Tutorial<\/p><\/div>\n<p>We progress on our latest web application from the progress up to <a title='Javascript Rotated Rectangle Analyze Tutorial' href='#jrrat'>Javascript Rotated Rectangle Analyze Tutorial<\/a> by allowing for &#8230;<\/p>\n<ul>\n<li>unrotated triangle<\/li>\n<li>unrotated convex 5 sided polygon<\/li>\n<li>unrotated convex 6 sided polygon<\/li>\n<li>unrotated convex 7 sided polygon<\/li>\n<li>unrotated convex 8 sided polygon &#8230; onto the previously (attended to) &#8230;<\/li>\n<li>unrotated rectangle<\/li>\n<li>rotated rectangle<\/li>\n<\/ul>\n<p> &#8230; and we turn to those HTML div element &#8220;innards&#8221;.  Up to yesterday those &#8220;innard&#8221; innerHTML were unimportant, but today, with those extensions to functionality we need <a target=_blank title='HTML svg information from w3schools' href='https:\/\/www.w3schools.com\/html\/html5_svg.asp'>SVG<\/a> &#8220;innards&#8221; like &#8230;<\/p>\n<p><code><br \/>\n&lt;svg height=\"100%\" width=\"100%\"&gt;&lt;polygon points=\"51,0 102,0 153,54.333333333333336 153,108.66666666666667 102,163 51,163 0,108.66666666666667 0,54.333333333333336\" style=\"fill:blue;stroke:purple;stroke-width:1\"&gt;&lt;\/polygon&gt;&lt;\/svg&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; and to further differentiate these non-four sided polygons from the four sided rectangle (polygons) of recent times, we add to that relevant HTML div &#8220;encasing&#8221; element&#8217;s <i>title<\/i> attribute the non-translated co-ordinate set of that SVG <i>points<\/i> attribute above (representing the &#8220;absolute&#8221; positioning data we need for our trigonometrical and geometrical calculations to match with HTML div (encasing or not) <i>style=position:absolute;left:[topLeftX]px;top:[topLeftY]px;<\/i> (familiar to <a target=_blank title='Overlay postings' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay'>&#8220;overlay&#8221;<\/a> reader enthusiasts)), the heads up needed for knowing to do this coming from the predecessor <a target=_blank title='SVG Absolute Positioning Sharing Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/svg-absolute-positioning-sharing-tutorial\/'>SVG Absolute Positioning Sharing Tutorial<\/a>.<\/p>\n<p>And so, again, you can try this with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/rectangle_analyze.html-----GETME\" title=\"rectangle_analyze.htm\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/rectangle_analyze.html-----GETME\" title=\"rectangle_analyze.htm\">rectangle_analyze.htm<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/rectangle_analyze.htm\" title=\"Click picture\">live run<\/a> link is there for your perusal.<\/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\/javascript-convex-polygon-analyze-tutorial\/'>Javascript Convex Polygon Analyze Tutorial<\/a>.<\/p-->\n<hr>\n<p id='jrrat'>Previous relevant <a target=_blank title='Javascript Rotated Rectangle Analyze Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-rotated-rectangle-analyze-tutorial\/'>Javascript Rotated Rectangle Analyze 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\/rectangle_analyze.htm\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Javascript Rotated Rectangle Analyze Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/rectangle_analyze_polygon_four.jpg\" title=\"Javascript Rotated Rectangle Analyze Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Javascript Rotated Rectangle Analyze Tutorial<\/p><\/div>\n<p>The Javascript logic of the recent <a title='Javascript Rectangle Analyze Follow Up Tutorial' href='#jrafut'>Javascript Rectangle Analyze Follow Up Tutorial<\/a> needed no trigonometrical mathematics, but the simple progression from &#8230;<\/p>\n<ul>\n<li>HTML div rectangle data &#8230; to &#8230;<\/li>\n<li>randomly rotated HTML div rectangle data &#8230; via CSS <i>style=&#8221;transform:rotate(30deg);transform-origin:left top;&#8221;<\/i> type syntax &#8230; (we are going to start referring to as &#8220;polygon&#8221; below &#8230; though a very small subset &#8230; we need to continue past today&#8217;s work)<\/li>\n<\/ul>\n<p> &#8230; input complicates the Javascript logic hugely, as well as needing trigonometrical mathematics via Javascript Math.sin and Math.cos and the great help we got from various online sources we used with the blog posting thread headed by <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/viewport-and-css-calc-intersection-resize-tutorial\/' title='Viewport and CSS Calc Intersection Resize Tutorial'>Viewport and CSS Calc Intersection Resize Tutorial<\/a> to &#8230;<\/p>\n<ul>\n<li>determine if a point lies within a polygon &#8230; on the way to &#8230;<\/li>\n<li>determine if two polygons intersect (and so, also, if one polygon lies totally within another, and if the area of an intersecting polygon is zero that those two polygons are adjacent)<\/li>\n<\/ul>\n<p>Again, you can try this with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/rectangle_analyze.html----GETME\" title=\"rectangle_analyze.htm\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/rectangle_analyze.html----GETME\" title=\"rectangle_analyze.htm\">rectangle_analyze.htm<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/rectangle_analyze.htm\" title=\"Click picture\">live run<\/a> link is there for your perusal.<\/p>\n<p>Perhaps you have deduced why this trivial changed step to the web application sophistication was important, but not the be all and end all for proceeding past four sided polygons?!  We&#8217;ll be explaining more at a later date.<\/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\/javascript-rotated-rectangle-analyze-tutorial\/'>Javascript Rotated Rectangle Analyze Tutorial<\/a>.<\/p-->\n<hr>\n<p id='jrafut'>Previous relevant <a target=_blank title='Javascript Rectangle Analyze Follow Up Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-rectangle-analyze-follow-up-tutorial\/'>Javascript Rectangle Analyze Follow Up 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\/rectangle_analyze.htm\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Javascript Rectangle Analyze Follow Up Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/rectangle_analyze_more.jpg\" title=\"Javascript Rectangle Analyze Follow Up Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Javascript Rectangle Analyze Follow Up Tutorial<\/p><\/div>\n<p>As improvements to yesterday&#8217;s <a title='Javascript Rectangle Analyze Primer Tutorial' href='#jrapt'>Javascript Rectangle Analyze Primer Tutorial<\/a> we thought &#8230;<\/p>\n<ul>\n<li>allow the user to change the number of colours from its default 11 &#8230; and we thank <a target=_blank title='Useful link, thanks' href='https:\/\/htmlcolorcodes.com\/color-names\/'>Color Names \u2014 HTML Color Codes<\/a> to allow us to get to around 140 HTML colour names &#8230;<br \/>\n<code><br \/>\n        \/\/ Thanks to https:\/\/htmlcolorcodes.com\/color-names\/ below<br \/>\n        var allcols=['lime','black','blue','purple','navy','teal','fuchsia','olive','maroon','gray','green',<br \/>\n'IndianRed','LightCoral','Salmon','DarkSalmon','LightSalmon','Crimson','Red','FireBrick','DarkRed',<br \/>\n'Pink','LightPink','HotPink','DeepPink','MediumVioletRed','PaleVioletRed','Coral',<br \/>\n'Tomato','OrangeRed','DarkOrange','Orange','Gold','Yellow','LightYellow',<br \/>\n'LemonChiffon','LightGoldenrodYellow','PapayaWhip','Moccasin','PeachPuff',<br \/>\n'PaleGoldenrod','Khaki','DarkKhaki','Lavender','Thistle',<br \/>\n'Plum','Violet','Orchid','Fuchsia','Magenta',<br \/>\n'MediumOrchid','MediumPurple','RebeccaPurple',<br \/>\n'BlueViolet','DarkViolet','DarkOrchid','DarkMagenta',<br \/>\n'Indigo','SlateBlue','DarkSlateBlue','MediumSlateBlue',<br \/>\n'GreenYellow','Chartreuse','LawnGreen','LimeGreen',<br \/>\n'PaleGreen','LightGreen','MediumSpringGreen','SpringGreen',<br \/>\n'MediumSeaGreen','SeaGreen','ForestGreen','DarkGreen',<br \/>\n'YellowGreen','OliveDrab','DarkOliveGreen','MediumAquamarine','DarkSeaGreen',<br \/>\n'LightSeaGreen','DarkCyan','Aqua','Cyan','LightCyan','PaleTurquoise',<br \/>\n'Aquamarine','Turquoise','MediumTurquoise','DarkTurquoise',<br \/>\n'CadetBlue','SteelBlue','LightSteelBlue','PowderBlue',<br \/>\n'LightBlue','SkyBlue','LightSkyBlue','DeepSkyBlue','DodgerBlue','CornflowerBlue',<br \/>\n'MediumSlateBlue','RoyalBlue','MediumBlue','DarkBlue','Navy',<br \/>\n'MidnightBlue','Cornsilk','BlanchedAlmond','Bisque','NavajoWhite','Wheat',<br \/>\n'BurlyWood','Tan','RosyBrown','SandyBrown','Goldenrod',<br \/>\n'DarkGoldenrod','Peru','Chocolate','SaddleBrown','Sienna','Brown','Snow',<br \/>\n'HoneyDew','MintCream','Azure','AliceBlue','GhostWhite','WhiteSmoke','SeaShell',<br \/>\n'Beige','OldLace','FloralWhite','Ivory','AntiqueWhite','Linen',<br \/>\n'LavenderBlush','MistyRose','Gainsboro','LightGray','Silver','DarkGray','DimGray',<br \/>\n'LightSlateGray','SlateGray','DarkSlateGray'];<br \/>\n<\/code><br \/>\n &#8230; for use here &#8230; <font color=blue>checking for prompt window driven user (?numcols=) argument control<\/font> response &#8230;<br \/>\n <code><br \/>\n        var bks='&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;';<br \/>\n        <font color=blue>var argnumcols=location.search.split('numcols=')[1] ? decodeURIComponent(location.search.split('numcols=')[1].split('&')[0]) : '11';<\/font><br \/>\n        var cols=['lime','black','blue','purple','navy','teal','fuchsia','olive','maroon','gray','green'];<br \/>\n        var xs=[0,0,0,0,0,0,0,0,0,0,0];<br \/>\n        var ys=[0,0,0,0,0,0,0,0,0,0,0];<br \/>\n        var ls=[0,0,0,0,0,0,0,0,0,0,0];<br \/>\n        var ts=[0,0,0,0,0,0,0,0,0,0,0];<br \/>\n        var ws=[0,0,0,0,0,0,0,0,0,0,0];<br \/>\n        var hs=[0,0,0,0,0,0,0,0,0,0,0];<br \/>\n        var pw=[null,null,null,null,null,null,null,null,null,null,null];<br \/>\n        var ps=[null,null,null,null,null,null,null,null,null,null,null];<br \/>\n        if (eval('' + argnumcols) != 11) {<br \/>\n          if (eval('' + argnumcols) >= 40) { bks='&amp;nbsp;&amp;nbsp;'; }<br \/>\n          cols=[];<br \/>\n          xs=[];<br \/>\n          ys=[];<br \/>\n          ls=[];<br \/>\n          ts=[];<br \/>\n          ws=[];<br \/>\n          hs=[];<br \/>\n          pw=[];<br \/>\n          ps=[];<br \/>\n          for (var ijk=0; ijk&lt;argnumcols; ijk++) {<br \/>\n           cols.push(allcols[ijk]);<br \/>\n           xs.push(0);<br \/>\n           ys.push(0);<br \/>\n           ls.push(0);<br \/>\n           ts.push(0);<br \/>\n           ws.push(0);<br \/>\n           hs.push(0);<br \/>\n           pw.push(null);<br \/>\n           ps.push(null);<br \/>\n          }<br \/>\n        }<br \/>\n <\/code>\n<\/li>\n<li>and if this results in a bit too crowded a scenario we now allow a click on the GIS Report Table to open that report in a new popup window <font color=blue>as per the changed<\/font> &#8230;<br \/>\n<code><br \/>\n        var prehtmltablerteport='&lt;table <font color=blue>onclick=\"woit(this);\" title=\"Show in new window\" <\/font>id=mytable border=1 id=trep style=width:30%;align:right;z-index:67;margin-right:10px;&gt;&lt;tr&gt;&lt;th&gt;Colour&lt;\/th&gt;&lt;th&gt;Intersects?&lt;\/th&gt;&lt;th&gt;Is within?&lt;\/th&gt;&lt;th&gt;Adjacent to?&lt;\/th&gt;&lt;th&gt;Separate to?&lt;input id=iootw type=text style=position:absolute;top:-200px;left:-200px; value=\"\"&gt;&lt;\/input&gt;&lt;\/th&gt;&lt;\/tr&gt;&lt;\/table&gt;';<br \/>\n<\/code><br \/>\n &#8230; calling on the new Javascript function &#8230;<br \/>\n<code><br \/>\n        var wo=null;<br \/>\n        function woit(tois) {<br \/>\n          if (wo != null) {<br \/>\n            wo.close();<br \/>\n            wo=null;<br \/>\n          }<br \/>\n          wo=window.open('','_blank','top=20,left=20,width=900,height=900');<br \/>\n          wo.document.write('&lt;html&gt;&lt;body&gt;' + tois.outerHTML + '&lt;\/body&gt;&lt;\/html&gt;');<br \/>\n        }<br \/>\n<\/code>\n<\/ul>\n<p>You can try this with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/rectangle_analyze.html---GETME\" title=\"rectangle_analyze.htm\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/rectangle_analyze.html---GETME\" title=\"rectangle_analyze.htm\">rectangle_analyze.htm<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/rectangle_analyze.htm\" title=\"Click picture\">live run<\/a> link is there for your perusal should this be of interest.<\/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\/javascript-rectangle-analyze-follow-up-tutorial\/'>Javascript Rectangle Analyze Follow Up Tutorial<\/a>.<\/p-->\n<hr>\n<p id='jrapt'>Previous relevant <a target=_blank title='Javascript Rectangle Analyze Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-rectangle-analyze-primer-tutorial\/'>Javascript Rectangle Analyze 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\/rectangle_analyze.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Javascript Rectangle Analyze Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/rectangle_analyze.jpg\" title=\"Javascript Rectangle Analyze Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Javascript Rectangle Analyze Primer Tutorial<\/p><\/div>\n<p>We&#8217;re not trying to compare programming to Michelangelo&#8217;s art, but did you know that he chose the marble he wanted at the quarry, presumably imagining what was possible with that marble?<\/p>\n<p>In line with that, do you like &#8220;glass half full&#8221; thinking rather than &#8220;glass half empty&#8221; thinking?   We prefer the &#8220;glass half full&#8221; choice, and use that thinking (and a &#8220;laziness&#8221; &#8220;background noise&#8221;) to see what has come before to shape the workings of a new programming project.<\/p>\n<p>This new project touches on GIS (<a target=_blank href='https:\/\/en.wikipedia.org\/wiki\/Geographic_information_system' title='GIS information from Wikipedia'>Geographic Information System<\/a>) ideas, but is a simplified form, so far, regarding unrotated rectangle HTML (div) data set (of 11) to check (amongst them) for &#8230;<\/p>\n<ul>\n<li>does rectangle A <b>intersect with<\/b> rectangle B?<\/li>\n<li>is rectangle A <b>within<\/b> rectangle B?<\/li>\n<li>is rectangle A <b>adjacent to<\/b> rectangle B?<\/li>\n<li>is rectangle A <b>separate to<\/b> rectangle B?<\/li>\n<\/ul>\n<p>How to approach our programming aim above?  Well, we thought we&#8217;d base it on that of <a title='HTML\/Javascript PopUp Mouseover Event Game Tutorial' href='#html\/jpumegt'>HTML\/Javascript PopUp Mouseover Event Game Tutorial<\/a>.  Huh?!  Yes, &#8220;laziness&#8221; thoughts will have a programmer&#8217;s mind fishing for another project that randomly creates those (HTML div) elements, and this was the attraction.  Then you need to start &#8220;Michelangelo&#8221;ing the new web application from the old, and we decided if we could not creep up on a web application that can create a &#8220;tabular report (of any sort) to the right&#8221; within an hour&#8217;s work, then we would classify that as a bad &#8220;glass half full&#8221; approach.  Thankfully, though, it panned out to be a good approach, so read on.<\/p>\n<p>And then there is all that knowledge on the &#8220;net&#8221; helping formulate three Javascript functions to help with the GIS logic thoughts above as per &#8230;<\/p>\n<p><code><br \/>\n        function intersectRect(r1, r2) { \/\/ thanks to <a target=_blank title='https:\/\/stackoverflow.com\/questions\/2752349\/fast-rectangle-to-rectangle-intersection' href='https:\/\/stackoverflow.com\/questions\/2752349\/fast-rectangle-to-rectangle-intersection'>https:\/\/stackoverflow.com\/questions\/2752349\/fast-rectangle-to-rectangle-intersection<\/a><br \/>\n         return !(r2.left &gt; r1.right ||<br \/>\n           r2.right &lt; r1.left ||<br \/>\n           r2.top &gt; r1.bottom ||<br \/>\n           r2.bottom &lt; r1.top);<br \/>\n        }<br \/>\n<br \/> <br \/>\n        function adjacentTo(r1, r2) { \/\/ thanks to <a target=_blank title='https:\/\/stackoverflow.com\/questions\/2752349\/fast-rectangle-to-rectangle-intersection' href='https:\/\/stackoverflow.com\/questions\/2752349\/fast-rectangle-to-rectangle-intersection'>https:\/\/stackoverflow.com\/questions\/2752349\/fast-rectangle-to-rectangle-intersection<\/a><br \/>\n           if (intersectRect(r1, r2)) {<br \/>\n           return (r2.left == r1.right ||<br \/>\n           r2.right == r1.left ||<br \/>\n           r2.top == r1.bottom ||<br \/>\n           r2.bottom == r1.top);<br \/>\n           } else {<br \/>\n           return false;<br \/>\n           }<br \/>\n        }<br \/>\n<br \/> <br \/>\n        function contains(r1, r2) {  \/\/ thanks to <a target=_blankl title='https:\/\/stackoverflow.com\/questions\/27768039\/find-out-if-a-rectangle-is-inside-another-rectangle-c' href='https:\/\/stackoverflow.com\/questions\/27768039\/find-out-if-a-rectangle-is-inside-another-rectangle-c'>https:\/\/stackoverflow.com\/questions\/27768039\/find-out-if-a-rectangle-is-inside-another-rectangle-c<\/a><br \/>\n           if (   (r2.right) &lt; (r1.right)<br \/>\n               && (r2.left) &gt; (r1.left)<br \/>\n               && (r2.top) &gt; (r1.top)<br \/>\n               && (r2.bottom) &lt; (r1.bottom) ) {<br \/>\n             return true;<br \/>\n           } else {<br \/>\n             return false;<br \/>\n           }<br \/>\n        }<br \/>\n<\/code><\/p>\n<p> &#8230; <font color=blue>&#8220;data organized&#8221;<\/font> via &#8230;<\/p>\n<p><code><br \/>\n        var cmds=[];<br \/>\n        var rects=[];<br \/>\n<br \/>\n        function MakePopup(event, popupWindow, popupIsShown, colis, lis, tis, wis, his<font color=blue>, indx<\/font>) {<br \/>\n            if (<font color=blue>1 == 56 && <\/font>window.createPopup) {        \/\/Internet Explorer<br \/>\n                if (!popupWindow) {<br \/>\n                    popupWindow = window.createPopup();<br \/>\n                    var popupBody = popupWindow.document.body;<br \/>\n                    popupBody.style.backgroundColor = colis; \/\/\"lightblue\";<br \/>\n                    <font color=blue>cmds.push(\"document.getElementById('col\" + indx + \"').style.backgroundColor='\" + colis + \"'\");<br \/>\n                    if (indx == 0) {  setTimeout(andlater,200);     } <\/font><br \/>\n                    popupBody.style.border = \"solid black 1px\";<br \/>\n                    if (1 == 2) popupBody.innerHTML = \"Click outside to close.\";<br \/>\n                }<br \/>\n                popupWindow.show (lis, tis, wis, his, document.body); \/\/100, 100, 150, 25, document.body);<br \/>\n                pword=\"client\";<br \/>\n            }<br \/>\n            else {<br \/>\n                if (!popupIsShown) {<br \/>\n                    if (!popupWindow) {<br \/>\n                       popupWindow = document.createElement(\"div\");<br \/>\n                        popupWindow.style.backgroundColor = colis; \/\/\"lightblue\";<br \/>\n                    <font color=blue>cmds.push(\"document.getElementById('col\" + indx + \"').style.backgroundColor='\" + colis + \"'\");<br \/>\n                    if (indx == 0) {  setTimeout(andlater,200);     } <\/font><br \/>\n                        popupWindow.style.border = \"solid black 1px\";<br \/>\n                        popupWindow.style.position = \"absolute\";<br \/>\n                        popupWindow.style.width = wis + \"px\";  \/\/150<br \/>\n                        popupWindow.style.height = his + \"px\";  \/\/25<br \/>\n                        popupWindow.style.top = tis + \"px\";  \/\/\"100px\";<br \/>\n                        popupWindow.style.left = lis + \"px\";  \/\/\"100px\";<br \/>\n                        if (1 == 2) popupWindow.innerHTML = \"Click outside to close.\";<br \/>\n                    }<br \/>\n<br \/>\n                    document.body.appendChild(popupWindow);<br \/>\n                    <font color=blue>rects.push(popupWindow.<a target=_blank title='Javascript getBoundingClientRect method information from Mozilla' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/getBoundingClientRect'>getBoundingClientRect<\/a>());<\/font><br \/>\n                    if (pword == \"\") window.addEventListener('mouseover', MouseOver, true);<br \/>\n                    popupIsShown = true;<br \/>\n                    \/\/ to avoid that the current click event propagates up<br \/>\n                    if (pword == \"\") event.stopPropagation ();<br \/>\n                }<br \/>\n                pword=\"page\";<br \/>\n            }<br \/>\n        }<br \/>\n<\/code><\/p>\n<p> &#8230; and feeding into the GIS report HTML table updating Javascript &#8230;<\/p>\n<p><code><br \/>\n        function andlater() {<br \/>\n          for (var ji=0; ji&lt;cmds.length; ji++) {<br \/>\n            eval(cmds[ji]);<br \/>\n          }<br \/>\n          for (var kji=0; kji&lt;rects.length; kji++) {<br \/>\n            var seprt=false;<br \/>\n            document.getElementById('intersects' + kji).innerHTML='';<br \/>\n            document.getElementById('within' + kji).innerHTML='';<br \/>\n            document.getElementById('adjacent' + kji).innerHTML='';<br \/>\n            document.getElementById('separate' + kji).innerHTML='';<br \/>\n            for (var mji=0; mji&lt;rects.length; mji++) {<br \/>\n             if (mji != kji) {<br \/>\n              seprt=true;<br \/>\n              if (mji &gt; kji || 1 == 1) {<br \/>\n                if (intersectRect(rects[kji], rects[mji])) {<br \/>\n                  seprt=false;<br \/>\n                  if (document.getElementById('intersects' + kji).innerHTML.indexOf(cmds[mji].split(\"='\")[1].split(\"'\")[0]) == -1) {<br \/>\n                  document.getElementById('intersects' + kji).innerHTML+='&lt;span style=background-color:' + cmds[mji].split(\"='\")[1].split(\"'\")[0] + ';&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/span&gt;';<br \/>\n                  }<br \/>\n                }<br \/>\n                if (adjacentTo(rects[kji], rects[mji])) {<br \/>\n                  seprt=false;<br \/>\n                  if (document.getElementById('adjacent' + kji).innerHTML.indexOf(cmds[mji].split(\"='\")[1].split(\"'\")[0]) == -1) {<br \/>\n                  document.getElementById('adjacent' + kji).innerHTML+='&lt;span style=background-color:' + cmds[mji].split(\"='\")[1].split(\"'\")[0] + ';&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/span&gt;';<br \/>\n                  }<br \/>\n                }<br \/>\n              }<br \/>\n              if (contains(rects[mji], rects[kji])) {<br \/>\n                seprt=false;<br \/>\n                if (document.getElementById('within' + kji).innerHTML.indexOf(cmds[mji].split(\"='\")[1].split(\"'\")[0]) == -1) {<br \/>\n                document.getElementById('within' + kji).innerHTML+='&lt;span style=background-color:' + cmds[mji].split(\"='\")[1].split(\"'\")[0] + ';&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/span&gt;';<br \/>\n                }<br \/>\n              }<br \/>\n              if (seprt) {<br \/>\n                document.getElementById('separate' + kji).innerHTML+='&lt;span style=background-color:' + cmds[mji].split(\"='\")[1].split(\"'\")[0] + ';&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/span&gt;';<br \/>\n              }<br \/>\n             }<br \/>\n            }<br \/>\n          }<br \/>\n          cmds=[];<br \/>\n          rects=[];<br \/>\n        }<br \/>\n<\/code><\/p>\n<p><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/rectangle_analyze.html--GETME\" title=\"rectangle_analyze.html\">The chiselled<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/rectangle_analyze.html--GETME\" title=\"rectangle_analyze.html\">rectangle_analyze.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/rectangle_analyze.html\" title=\"Click picture\">live run<\/a> link is there for your perusal should this be of interest.<\/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\/html\/javascript-popup-mouseover-event-game-tutorial\/'>HTML\/Javascript PopUp Mouseover Event Game Tutorial<\/a>.<\/p-->\n<hr>\n<p id='html\/jpumegt'>Previous relevant <a target=_blank title='HTML\/Javascript PopUp Mouseover Event Game Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html\/javascript-popup-mouseover-event-game-tutorial\/'>HTML\/Javascript PopUp Mouseover Event 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\/popuptest.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML\/Javascript PopUp Mouseover Event Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/popuptest.jpg\" title=\"HTML\/Javascript PopUp Mouseover Event Game Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript PopUp Mouseover Event Game Tutorial<\/p><\/div>\n<p>Are you &#8230;<\/p>\n<ul>\n<li>a fan of <a target=_blank title='Tom Cruise avoiding laser beams' href='http:\/\/www.youtube.com\/watch?v=ar0xLps7WSY'>Mission Impossible<\/a><\/li>\n<li>amazed when Rafael Nadal avoids walking on the lines<\/li>\n<li>when accidentally dropping your toast, hoping it lands butter up<\/li>\n<\/ul>\n<p>&#8230;?  If you scored 2 or above &#8230; please read on.  If you scored zero &#8230; well, I&#8217;m speechless!<\/p>\n<p>Today we&#8217;ve written a mouse movement and popup window game for your perusal after the great advice we stumbled upon with this webpage about the <a target=_blank title='Window object createPopup method' href='http:\/\/help.dottoro.com\/ljsxcrhv.php'>createPopup<\/a> Window (object) method &#8230; thanks.<\/p>\n<p>The idea of this game (for laptops) is to &#8230;<\/p>\n<ul>\n<li>not step on any tiles of the obstacle course presented to you once you click the button<\/li>\n<li>keep your mouse moving in an interesting way<\/li>\n<li>move the mouse fast enough to avoid the program claim of passivity &#8230; like in <a target=_blank title='Judo passivity' href='http:\/\/judoadvisor.com\/2011\/07\/pressure-passivity-shido-yuko-and-how-they-work-in-judo-competition\/'>Judo<\/a><\/li>\n<\/ul>\n<p>The workings of the game in HTML and Javascript rely on &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Window object createPopup method' href='http:\/\/help.dottoro.com\/ljsxcrhv.php'>createPopup<\/a> Window object method<\/li>\n<li>the <a target=_blank href='http:\/\/www.w3schools.com\/jsref\/event_onmouseover.asp' title='Mouseover event information from w3schools'>(on)mouseover<\/a> mouse event<\/li>\n<li>Javascript <a target=_blank href='http:\/\/www.w3schools.com\/jsref\/met_win_setinterval.asp' title='Javascript setInterval information from w3schools'>setInterval<\/a> timer<\/li>\n<li>clearing and rewriting document.body.<a target=_blank href='http:\/\/www.w3schools.com\/jsref\/prop_html_innerhtml.asp' title='Javascript DOM innerHTML information from w3schools'>innerHTML<\/a> (rather than reloading webpage with a URL of any sort)<\/li>\n<\/ul>\n<p>So try the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/popuptest.html\" title=\"Click picture\">live run<\/a> and\/or examine, download, or use the HTML and Javascript (DOM) source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/popuptest.html_GETME\" title=\"popuptest.html\">popuptest.html<\/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='#d14772' onclick='var dv=document.getElementById(\"d14772\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/?tag=DOM\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d14772' 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='#d48239' onclick='var dv=document.getElementById(\"d48239\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/gis\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d48239' 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='#d48248' onclick='var dv=document.getElementById(\"d48248\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/colour\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d48248' 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='#d48265' onclick='var dv=document.getElementById(\"d48265\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/rotation\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d48265' 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='#d48271' onclick='var dv=document.getElementById(\"d48271\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/svg\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d48271' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We progress on our latest web application from the progress up to Javascript Rotated Rectangle Analyze Tutorial by allowing for &#8230; unrotated triangle unrotated convex 5 sided polygon unrotated convex 6 sided polygon unrotated convex 7 sided polygon unrotated convex &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-convex-polygon-analyze-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":[2824,3253,224,1585,342,2654,484,2208,3256,1525,3252,748,752,2641,894,962,1988,2132,1071,1072,3255,1226,2167,3254],"class_list":["post-48271","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-absolute","tag-adjacent","tag-colour","tag-convex-polygon","tag-div","tag-geographic-information-system","tag-geometry","tag-getboundingclientrect","tag-html-colour-name","tag-innerhtml","tag-intersect","tag-mapping","tag-mathematics","tag-michelangelo","tag-overlay","tag-polygon","tag-position","tag-rectangle","tag-rotate","tag-rotation","tag-separate","tag-svg","tag-title","tag-within"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/48271"}],"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=48271"}],"version-history":[{"count":7,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/48271\/revisions"}],"predecessor-version":[{"id":48279,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/48271\/revisions\/48279"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=48271"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=48271"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=48271"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}