{"id":65323,"date":"2024-10-28T03:01:00","date_gmt":"2024-10-27T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=65323"},"modified":"2024-10-28T12:06:09","modified_gmt":"2024-10-28T02:06:09","slug":"image_3d-php-package-almalinux-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/image_3d-php-package-almalinux-tutorial\/","title":{"rendered":"Image_3D PHP Package AlmaLinux Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Image_3D\/index.php?rand=658796\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Image_3D PHP Package AlmaLinux Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Image_3D\/image3d_almalinux.gif\" title=\"Image_3D PHP Package AlmaLinux Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Image_3D PHP Package AlmaLinux Tutorial<\/p><\/div>\n<p>We had occasion to revisit the PHP (<a target=\"_blank\" href=\"\/\/pear.php.net\/package\/Image_3D\" title=\"https:\/\/pear.php.net\/package\/Image_3D\" rel=\"noopener\">Pear installed<\/a>) Image_3D package (we last talked about with <a title='Image_3D PHP Package Sharing Tutorial' href='#i_3dphppst'>Image_3D PHP Package Sharing Tutorial<\/a>) inhouse interfacing web application, in it&#8217;s new home on AlmaLinux.  Yes, there were issues moving from a PHP environment on &#8230;<\/p>\n<ul>\n<li>CentOS Apache PHP version starting with a 5 &#8230; to &#8230;<\/li>\n<li>AlmaLinux Apache PHP version starting with an 8<\/li>\n<\/ul>\n<p> &#8230; and found an alarming looking lot of errors, which panned out mainly the same few errors &#8230; so &#8230; <font size=3>don&#8217;t panic!<\/font><\/p>\n<p>Most of this list involved deprecated calls to the PHP GD library <font color=blue>fixed via<\/font> &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n        if (true) {<br \/>\n            <font color=blue>\/\/<\/font>imageFilledPolygon($this-&gt;_image, $coords, $coordCount, $this-&gt;_getColor($polygon-&gt;getColor()));<br \/>\n            <font color=blue><a target=\"_blank\" title='PHP GD imagefilledpolygon function information' href='https:\/\/www.php.net\/manual\/en\/function.imagefilledpolygon.php' rel=\"noopener\">imageFilledPolygon<\/a>($this-&gt;_image, $coords, $this-&gt;_getColor($polygon-&gt;getColor()));<\/font><br \/>\n        } else {<br \/>\n            <font color=blue>\/\/<\/font>imagePolygon($this-&gt;_image, $coords, $coordCount, $this-&gt;_getColor($polygon-&gt;getColor()));<br \/>\n            <font color=blue>imagePolygon($this-&gt;_image, $coords, $this-&gt;_getColor($polygon-&gt;getColor()));<\/font><br \/>\n        }<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; in <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/Image_3D\/Image\/3D\/Driver\/Gd.php-GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Image_3D\/Image\/3D\/Driver\/Gd.php-GETME\" rel=\"noopener\">Gd.php<\/a> as the GD interfacing part to this great Image_3D package.<\/p>\n<p>We noticed <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/Image_3D\/index.php-GETME\" rel=\"noopener\">our changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Image_3D\/index.php-GETME\" rel=\"noopener\">index.php<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Image_3D\/index.php?rand=65879656\" rel=\"noopener\">inhouse Image_3D interfacing<\/a> web application was lacking a bit of &#8220;branding&#8221;, should we say?!  So, in the existing table&#8217;s single row of cells, we <font color=blue>add a new one<\/font> with id=&#8217;tdright&#8217; &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n$htmlforms.=\"<font color=blue>&lt;td id=tdright&gt;&lt;\/td&gt;<\/font>&lt;\/tr&gt;&lt;\/table&gt;&lt;iframe onload=diframe(this); id=ifinv name=ifinv style='display:none;' src=''&gt;&lt;\/iframe&gt;&lt;div id=otherimg&gt;&lt;\/div&gt;<br \/>\n&lt;form target='eifinv' action=\\\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/emailhtml.php\\\" style='display:none;' method=POST&gt;<br \/>\n&lt;input type=hidden id=emailto name=emailto value=''&gt;&lt;\/input&gt;<br \/>\n&lt;input type=hidden id=subject name=subject value='Image_3D Graphics'&gt;&lt;\/input&gt;<br \/>\n&lt;textarea style='display:none;' id=hcont name=hcont value='' cols=120 rows=90&gt;&lt;\/textarea&gt;<br \/>\n&lt;input id=iemail style='display:none;' type=submit value='Email'&gt;&lt;\/input&gt;<br \/>\n&lt;\/form&gt;&lt;iframe id=eifinv name=eifinv style='display:none;' src=''&gt;&lt;\/iframe&gt;<br \/>\n&lt;\/body&gt;&lt;\/html&gt;\";<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; and off the document.body onload event Javascript function <font color=blue>we have new<\/font> &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n function tdtitle() {<br \/>\n     if (document.getElementById('topimg')) {<br \/>\n      if ((document.getElementById('topimg').title) != '') {<br \/>\n       if (document.getElementById('td_' + tdfs)) {<br \/>\n        document.getElementById('td_' + tdfs).title=document.getElementById('topimg').title;<br \/>\n       }<br \/>\n      }<br \/>\n     }<br \/>\n     <font color=blue>if (document.getElementById('tdright') && window.self == window.parent) {<br \/>\n       if (document.getElementById('tdright').innerHTML == '') {<br \/>\n        document.title=document.title.split(' and ')[0];<br \/>\n        if (document.title.indexOf(' - ') != -1) {<br \/>\n          var dt=document.title;<br \/>\n          var urlars=document.title.split(' http');<br \/>\n          var thisurlis='';<br \/>\n          for (var iu=eval(-1 + eval('' + urlars.length)); iu&gt;=1; iu--) {<br \/>\n          \/\/alert(iu);<br \/>\n            thisurlis='http' + urlars[iu].split(' ')[0];<br \/>\n          \/\/alert(thisurlis);<br \/>\n            dt=dt.replace(thisurlis, '&lt;a target=_blank href=\\\"' + thisurlis.replace('https:','').replace('http:','') + '\\\" title=\\\"' + thisurlis + '\\\"&gt;' + thisurlis + '&lt;\/a&gt;');<br \/>\n          \/\/alert('dt=' + dt);<br \/>\n          }<br \/>\n          document.getElementById('tdright').innerHTML='&lt;h1 id=myh1&gt;' + dt.split(' - ')[0] + '&lt;\/h1&gt;&lt;h3 id=myh3&gt;' + dt.split(dt.split(' - ')[0] + ' - ')[1].split(' ... ')[0] + '&lt;h3&gt;&lt;h4 id=myh4&gt;' + ('' + dt.replace(dt.split(' ... ')[0], '')).replace(' thanks to ',' ').replace(\/^\\ \\.\\.\\.\/g, 'Thanks to ') + '&lt;\/h4&gt;';<br \/>\n        }<br \/>\n       }<br \/>\n     }<\/font><br \/>\n }<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; ready for you to try yourself, below &#8230;<\/p>\n<p><iframe style=\"width:98%;height:1400px;\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Image_3D\/index.php?rand=7564765876\"><\/iframe><\/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\/image_3d-php-package-almalinux-tutorial\/' rel=\"noopener\">Image_3D PHP Package AlmaLinux Tutorial<\/a>.<\/p-->\n<hr>\n<p id='i_3dphppst'>Previous relevant <a target=\"_blank\" title='Image_3D PHP Package Sharing Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/image_3d-php-package-sharing-tutorial\/' rel=\"noopener\">Image_3D PHP Package 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\/Image_3D\/\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Image_3D PHP Package Sharing Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Image_3D\/image3d_par_email.jpg\" title=\"Image_3D PHP Package Sharing Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Image_3D PHP Package Sharing Tutorial<\/p><\/div>\n<p>You guessed it.   Taking off from where we left off with yesterday&#8217;s <a title='Image_3D PHP Package Overlay Tutorial' href='#i_3dphppot'>Image_3D PHP Package Overlay Tutorial<\/a> &#8220;data-uri&#8221; promise, today we allow for some emailing with HTML attachments snapshotting the status of your Image_3D web application.<\/p>\n<p>When you email (via our new form input type=button &#8220;Email&#8221; element (button)) an HTML attachment it becomes a file:\/\/ protocol controlled webpage after downloading and opening with a web browser.  Worry about relative URL links as they are unlikely to work in this scenario.  Absolute URLs might work.  But as far as image data goes, the data-uri inherent in our HTML, as of yesterday, can be adjusted &#8230;<\/p>\n<p><code><br \/>\n function emailit() {<br \/>\n    emailee=prompt(\\\"Enter email recipient (and can change default subject 'Image_3D Graphics' via |[subject] suffix)\\\", emailee);<br \/>\n    if (emailee == null) { emailee=''; }<br \/>\n    if (emailee.indexOf('@') != -1) {<br \/>\n        document.getElementById('emailto').value=emailee.split('|')[0];<br \/>\n        if (emailee.indexOf('|') == -1) {<br \/>\n        document.getElementById('subject').value='Image_3D Graphics';<br \/>\n        } else {<br \/>\n        document.getElementById('subject').value=emailee.split('|')[1];<br \/>\n        }<br \/>\n        var prehcontis='&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;' + document.head.innerHTML + '&lt;\/head&gt;&lt;body&gt;';<br \/>\n        var hcontis=document.body.innerHTML + '&lt;\/body&gt;&lt;\/html&gt;';<br \/>\n        var thdsh=hcontis.split('&lt;\/td&gt;');<br \/>\n        \/\/hcontis=hcontis.replace(thdsh[0], thdsh[0].replace(\/ title\\=\/g, ' TITLE='));<br \/>\n        var duris=hcontis.split(' title=\\\"data:');<br \/>\n        for (var ij=1; ij&lt;duris.length; ij++) {<br \/>\n          if (ij == 1) {<br \/>\n          hcontis=hcontis.replace(' title=\\\"data:' + duris[ij].split('\\\"')[0] + '\\\"', '');<br \/>\n          } else {<br \/>\n          hcontis=hcontis.replace(' title=\\\"data:' + duris[ij].split('\\\"')[0] + '\\\"', '&gt;&lt;img src=\\\"data:' + duris[ij].split('\\\"')[0] + '\\\"&gt;&lt;\/img');<br \/>\n          }<br \/>\n        }<br \/>\n        var xh=hcontis.split('&lt;\/table&gt;');<br \/>\n        var xhh=xh[0].replace(\/\\&lt;iframe\/g, '&lt;!--iframe').replace(\/\\&lt;\\\/iframe\\&gt;\/g, '&lt;\/iframe--&gt;');<br \/>\n        hcontis=hcontis.replace(xh[0], xhh);<br \/>\n        document.getElementById('hcont').innerHTML=prehcontis + hcontis.replace(' action=\\\"\/\/www.rjmprogramming.com.au', ' action=\\\"http:\/\/www.rjmprogramming.com.au');<br \/>\n        document.getElementById('iemail').click();<br \/>\n    }<br \/>\n }<br \/>\n<\/code><\/p>\n<p> &#8230; to use the &#8220;data-uri&#8221; in table cell CSS background scenarios, as required, to help the user.<\/p>\n<p>Again, we think you&#8217;d be best off examining <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/Image_3D\/cone.php---GETME\" title=\"cone.php\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Image_3D\/cone.php---GETME\" title=\"cone.php\" rel=\"noopener\">cone.php<\/a>&#8216;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Image_3D\/\" title=\"Click picture\" rel=\"noopener\">live run (of a cone)<\/a> link, to see what we mean here.  Or try below &#8230;<\/p>\n<p><iframe style='width:100%;height:1120px;' src='http:\/\/www.rjmprogramming.com.au\/PHP\/Image_3D\/cone.php?shape=cube' title='Cube'><\/iframe><\/p>\n<hr>\n<p id='i_3dphppot'>Previous relevant <a target=\"_blank\" title='Image_3D PHP Package Overlay Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/image_3d-php-package-overlay-tutorial\/' rel=\"noopener\">Image_3D PHP Package Overlay 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\/Image_3D\/\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Image_3D PHP Package Overlay Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Image_3D\/image3d_par_overlay.jpg\" title=\"Image_3D PHP Package Overlay Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Image_3D PHP Package Overlay Tutorial<\/p><\/div>\n<p>On top of the progress with yesterday&#8217;s <a title='Image_3D PHP Package Parameterize Tutorial' href='#xi_3dphpppt'>Image_3D PHP Package Parameterize Tutorial<\/a> today we go one better than a three word slogan, and do a two word slogan, hoping that one day we can perfect the &#8220;Zero Word Slogan&#8221;, those words being &#8230;<\/p>\n<ol>\n<li>overlay (one of our <a target=\"_blank\" title='overlay blog postings' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay' rel=\"noopener\">favourite words<\/a> regarding web design <font size=1>along with <a target=\"_blank\" title='overlay blog postings' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/reveal' rel=\"noopener\">reveal<\/a><\/font>)<\/li>\n<li><a target=\"_blank\" title='Data URI information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Data_URI_scheme' rel=\"noopener\">data-URI<\/a> (the minus sign saving us from embarrassment)<\/li>\n<\/ol>\n<p> &#8230; to do with, respectively &#8230;<\/p>\n<ol>\n<li>increased and more sophisticated functionality<\/li>\n<li>data transportability and independence<\/li>\n<\/ol>\n<p>More on data-URI tomorrow, but for today, what is the broad brush approach to overlay (of 3D graphic images) functionality today &#8230;<\/p>\n<ul>\n<li>we add a form input type=button &#8220;Overlay&#8221; element (button) that &#8230; <\/li>\n<li>performs the onclick logic Javascript <i>function topoverlay<\/i> snippet (like) &#8230;<br \/>\n<code><br \/>\n     if (document.getElementById('form_' + tdfs).method.toUpperCase() != 'GET') {<br \/>\n     document.getElementById('form_' + tdfs).target='ifinv';<br \/>\n     document.getElementById('form_' + tdfs).method='GET';<br \/>\n     document.getElementById('submit_' + tdfs).click();<br \/>\n     setTimeout(topoverlay, 5000);<br \/>\n     }<br \/>\n<\/code><br \/>\n &#8230; to change from form method=POST to method=GET (that knowledge used to reason if such a method=GET scenario has been the call, the invocation called just outputs an invisible HTML img with the user definitions, opening up the ability to have the image data be shared up through the webpage hierarchy) and click the input type=submit button to an invisible HTML iframe name=ifinv to re-execute this webpage as the creator of that user defined image whose data-URI is saved into the title property of this webpage&#8217;s parent table cell as well as to a new HTML img element starting to deploy some overlay favourites &#8230;\n<\/li>\n<li><a target=\"_blank\" title='CSS opacity property information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/css3_pr_opacity.asp' rel=\"noopener\">opacity<\/a> <font size=1>0.5<\/font> CSS property (which is also applied to the original img element as well)<\/li>\n<li><a target=\"_blank\" title='CSS position:absolute information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_class_position.asp' rel=\"noopener\">position:absolute<\/a> CSS property &#8230; <\/li>\n<li>in the top window (of its ilk)<\/li>\n<\/ul>\n<p> &#8230; giving us a platform to do more useful functionality into the future.<\/p>\n<p>We think you&#8217;d be best off examining <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/Image_3D\/cone.php--GETME\" title=\"cone.php\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Image_3D\/cone.php--GETME\" title=\"cone.php\" rel=\"noopener\">cone.php<\/a>&#8216;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Image_3D\/\" title=\"Click picture\" rel=\"noopener\">live run (of a cone)<\/a> link, to see what we mean here.  Or try below &#8230;<\/p>\n<p><iframe style='width:100%;height:1120px;' src='http:\/\/www.rjmprogramming.com.au\/PHP\/Image_3D\/cone.php?shape=sphere' title='Sphere'><\/iframe><\/p>\n<hr>\n<p id='xi_3dphpppt'>Previous relevant <a target=\"_blank\" title='Image_3D PHP Package Parameterize Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/image_3d-php-package-parameterize-tutorial\/' rel=\"noopener\">Image_3D PHP Package Parameterize 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\/Image_3D\/\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Image_3D PHP Package Parameterize Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Image_3D\/image3d_par.jpg\" title=\"Image_3D PHP Package Parameterize Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Image_3D PHP Package Parameterize Tutorial<\/p><\/div>\n<p>Up to now with our PHP <a target=\"_blank\" title='Image_3D PHP package' href='https:\/\/pear.php.net\/package\/Image_3D' rel=\"noopener\">&#8220;Image_3D&#8221;<\/a> package inspired web application of <a title='Pear Install of Image_3D PHP Package Tutorial' href='#pii_3dphppt'>Pear Install of Image_3D PHP Package Tutorial<\/a> we&#8217;ve &#8220;come to grips&#8221; with some of the concepts by following leads from that previous link and <a target=\"_blank\" title='Paint 3-D images with PHP' href='https:\/\/www6.software.ibm.com\/developerworks\/education\/os-php-3d\/os-php-3d-a4.pdf' rel=\"noopener\">Paint 3-D images with PHP<\/a>, as we need help to know where to look.  Those 3D graphic shape examples used &#8220;hardcodings&#8221;, principally numbers, involved with suitable shape constructions and displays.<\/p>\n<p>That&#8217;s all fine and good, but how else can you take some steps in keeping up the learning, and at the same time progressing the project?  We find &#8220;parameterizing&#8221; a useful exercise, quite often, with regard to this.  We define &#8220;parameterizing&#8221; in PHP (or in another language) as &#8230;<\/p>\n<ul>\n<li>changing &#8220;hardcodings&#8221; (involving modes and colours and scales and offsets and rotations and detail and radii and lengths) into variables &#8230;<\/li>\n<li>maintained in HTML form (method=POST) input fields and a shape select (dropdown) element &#8230; passed back to the same PHP where we &#8230;<\/li>\n<li>check $_POST data to tailor the 3D graphical display &#8230; and at the same time &#8230;<\/li>\n<li>update the HTML form input fields for those passed in values &#8230; that form of interest being in a &#8230;<\/li>\n<li>table cell (within the one table row) labelled with the shape name is visible &#8230; whereas &#8230;<\/li>\n<li>other table cells (within the one table row) labelled with other shape names are initially set display:none (ie. invisible)<\/li>\n<\/ul>\n<p> &#8230; and a design feature we have with this web application, now, is to have a separate PHP $_GET[&#8216;shape&#8217;] (or ?shape=[shapename]) arrangements allowing the change of dropdown shape to cause one of the invisible table cells to open up and contain an HTML iframe element showing that shape with good appropriate initial values on which to build, should the user choose to.  That is up to them.<\/p>\n<p>You&#8217;d be best off examining <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/Image_3D\/cone.php--GETME\" title=\"cone.php\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Image_3D\/cone.php--GETME\" title=\"cone.php\" rel=\"noopener\">cone.php<\/a>&#8216;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Image_3D\/\" title=\"Click picture\" rel=\"noopener\">live run (of a cone)<\/a> link, to see what we mean here.  Or try below &#8230;<\/p>\n<p><iframe style='width:100%;height:1120px;' src='http:\/\/www.rjmprogramming.com.au\/PHP\/Image_3D\/cone.php?shape=cone' title='Cone'><\/iframe><\/p>\n<hr>\n<p id='pii_3dphppt'>Previous relevant <a target=\"_blank\" title='Pear Install of Image_3D PHP Package Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/pear-install-of-image_3d-php-package-tutorial\/' rel=\"noopener\">Pear Install of Image_3D PHP Package 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\/Image_3D\/pearinstall.pdf\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Pear Install of Image_3D PHP Package Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Image_3D\/pearinstall.jpg\" title=\"Pear Install of Image_3D PHP Package Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Pear Install of Image_3D PHP Package Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Image_3D PHP Package Primer Tutorial' href='#i_3dphpppt'>Image_3D PHP Package Primer Tutorial<\/a> introduced for this blog the very useful looking PHP <a target=\"_blank\" title='Image_3D PHP package' href='https:\/\/pear.php.net\/package\/Image_3D' rel=\"noopener\">&#8220;Image_3D&#8221;<\/a> (3D graphics) package.  But how did we reach this discovery?  Well, it comes from &#8220;cPanelling&#8221; around, a faux verb an Apache web administrator will probably understand.  The <a target=\"_blank\" href='https:\/\/cpanel.net\/' title='cPanel landing page' rel=\"noopener\">cPanel<\/a> web server administrative suite of software has a vast number of features, and under &#8230;<\/p>\n<p><code><br \/>\nModule Installers<br \/>\n<\/code><\/p>\n<p> &#8230; you&#8217;ll see there a pretty old installer, now, called <a target=\"_blank\" title='Pear PHP installer' href='https:\/\/en.wikipedia.org\/wiki\/PEAR' rel=\"noopener\">Pear<\/a> (the PHP Extension and Application Repository), which we&#8217;d never used, but were curious about, so we tried the link chain &#8230;<\/p>\n<p><code><br \/>\n<a target=\"_blank\" title='PHP Documentation' href='https:\/\/www.php.net\/docs.php' rel=\"noopener\">PHP Documentation<\/a> -&gt; <a target=\"_blank\" title='Pear manual' href='https:\/\/pear.php.net\/manual\/' rel=\"noopener\">Documentation of PEAR and the various packages<\/a> -&gt; <a target=\"_blank\" title='Pear Packages' href='https:\/\/pear.php.net\/packages.php' rel=\"noopener\">Pear Packages<\/a> -&gt; <a target=\"_blank\" title='Pear Package Image_3D' href='https:\/\/pear.php.net\/package\/Image_3D' rel=\"noopener\">Pear Package Image_3D<\/a><br \/>\n<\/code><\/p>\n<p> &#8230; which got us to thinking to deploy that to our PHP 7 (Image_3D needs PHP 5 or above) local MAMP web server system.  To do this we needed to install Pear itself via &#8230;<\/p>\n<ol>\n<li>download from <a target=\"_blank\" title='go-pear.phar' href='https:\/\/pear.php.net\/go-pear.phar' rel=\"noopener\">https:\/\/pear.php.net\/go-pear.phar<\/a> &#8230; to Downloads &#8230;<\/li>\n<li>copy to \/Applications\/MAMP &#8230;<\/li>\n<li>be in Terminal &#8230;<\/li>\n<li>cd \/Applications\/MAMP<\/li>\n<li>php go-pear.phar<\/li>\n<li>can add Pear to PATH (for &#8220;pear install Image_3D&#8221; command) or apply the &#8220;longhand&#8221; (in our case) \/Users\/user\/pear\/bin\/pear install Image_3D\n<\/ol>\n<p> &#8230; and which you can see a lot of examining today&#8217;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Image_3D\/pearinstall.pdf\" title=\"Click picture\" rel=\"noopener\">PDF slideshow<\/a>.<\/p>\n<p>Apply that knowledge and software development over to the rjmprogramming.com.au domain, and then you can take a look at some new shapes (thanks to <a target=\"_blank\" title='Paint 3-D images with PHP' href='https:\/\/www6.software.ibm.com\/developerworks\/education\/os-php-3d\/os-php-3d-a4.pdf' rel=\"noopener\">Paint 3-D images with PHP<\/a>) we&#8217;ve added for <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/Image_3D\/cone.php-GETME\" title=\"cone.php\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Image_3D\/cone.php-GETME\" title=\"cone.php\" rel=\"noopener\">cone.php<\/a>&#8216;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Image_3D\/\" title=\"Click picture\" rel=\"noopener\">live run (of a cone)<\/a> link &#8230;<\/p>\n<table style='width:100%;'>\n<tr>\n<th style='width:100%;'><a style='text-decoration:underline;cursor:pointer;' onclick=\"document.getElementById('ispherocube').src=document.getElementById('ispherocube').src.split('&#038;')[0] + '';\">Spherocube<\/a> <a style='text-decoration:underline;cursor:pointer;' onclick=\"document.getElementById('ispherocube').src=document.getElementById('ispherocube').src.split('&#038;')[0] + '&#038;metal=';\">(metal)<\/a><\/th>\n<\/tr>\n<tr>\n<td style='width:100%;'><iframe style='width:100%;height:420px;' name=ispherocube id=ispherocube src='http:\/\/www.rjmprogramming.com.au\/PHP\/Image_3D\/cone.php?shape=spherocube' title='Spherocube'><\/iframe><\/td>\n<\/tr>\n<tr>\n<th style='width:100%;'><a style='text-decoration:underline;cursor:pointer;' onclick=\"document.getElementById('ihelicoid').src=document.getElementById('ihelicoid').src.split('&#038;')[0] + '';\">Helicoid<\/a> <a style='text-decoration:underline;cursor:pointer;' onclick=\"document.getElementById('ihelicoid').src=document.getElementById('ihelicoid').src.split('&#038;')[0] + '&#038;metal=';\">(metal)<\/a><\/th>\n<\/tr>\n<tr>\n<td style='width:100%;'><iframe style='width:100%;height:420px;' name=ihelicoid id=ihelicoid src='http:\/\/www.rjmprogramming.com.au\/PHP\/Image_3D\/cone.php?shape=helicoid' title='Helicoid'><\/iframe><\/td>\n<\/tr>\n<tr>\n<th style='width:100%;'><a style='text-decoration:underline;cursor:pointer;' onclick=\"document.getElementById('istar').src=document.getElementById('istar').src.split('&#038;')[0] + '';\">Star<\/a> <a style='text-decoration:underline;cursor:pointer;' onclick=\"document.getElementById('istar').src=document.getElementById('istar').src.split('&#038;')[0] + '&#038;metal=';\">(metal)<\/a><\/th>\n<\/tr>\n<tr>\n<td style='width:100%;'><iframe style='width:100%;height:420px;' name=istar id=istar src='http:\/\/www.rjmprogramming.com.au\/PHP\/Image_3D\/cone.php?shape=star' title='Star'><\/iframe><\/td>\n<\/tr>\n<tr>\n<th style='width:100%;'><a style='text-decoration:underline;cursor:pointer;' onclick=\"document.getElementById('ibundt').src=document.getElementById('ibundt').src.split('&#038;')[0] + '';\">Bundt<\/a> <a style='text-decoration:underline;cursor:pointer;' onclick=\"document.getElementById('ibundt').src=document.getElementById('ibundt').src.split('&#038;')[0] + '&#038;metal=';\">(metal)<\/a><\/th>\n<\/tr>\n<tr>\n<td style='width:100%;'><iframe style='width:100%;height:420px;' name=ibundt id=ibundt src='http:\/\/www.rjmprogramming.com.au\/PHP\/Image_3D\/cone.php?shape=bundt' title='Bundt'><\/iframe><\/td>\n<\/tr>\n<\/table>\n<hr>\n<p id='i_3dphpppt'>Previous relevant <a target=\"_blank\" title='Image_3D PHP Package Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/image_3d-php-package-primer-tutorial\/' rel=\"noopener\">Image_3D PHP Package 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\/Image_3D\/\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Image_3D PHP Package Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Image_3D\/pear_install_9.jpg\" title=\"Image_3D PHP Package Primer Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Image_3D PHP Package Primer Tutorial<\/p><\/div>\n<p>Today, we&#8217;re starting out on a new 3d graphics idea, talking about a PHP package named <a target=\"_blank\" title='Image_3D PHP package' href='https:\/\/pear.php.net\/package\/Image_3D' rel=\"noopener\">&#8220;Image_3D&#8221;<\/a> written by Arne Nordmann, Tobias Schlitt and Kore Nordmann.  You may recall an alternative 3d graphics idea called WebGL talked about with the thread of blog postings down from <a title='WebGL Prism Canvas Email Tutorial' href='#wglpcet'>WebGL Prism Canvas Email Tutorial<\/a>.<\/p>\n<p>We installed &#8220;Image_3D&#8221; via the Pear PHP installer, but we shall talk more about that tomorrow.  For today, it is more &#8220;proof of concept&#8221; territory, taking leads from the excellent <a target=\"_blank\" title='Paint 3-D images with PHP' href='https:\/\/www6.software.ibm.com\/developerworks\/education\/os-php-3d\/os-php-3d-a4.pdf' rel=\"noopener\">Paint 3-D images with PHP<\/a> resource we thank profusely.<\/p>\n<p>So take a look at &#8230;<\/p>\n<table style='width:100%;'>\n<tr>\n<th style='width:100%;'><a style='text-decoration:underline;cursor:pointer;' onclick=\"document.getElementById('icone').src=document.getElementById('icone').src.split('&#038;')[0] + '';\">Cone<\/a> <a style='text-decoration:underline;cursor:pointer;' onclick=\"document.getElementById('icone').src=document.getElementById('icone').src.split('&#038;')[0] + '&#038;metal=';\">(metal)<\/a><\/th>\n<\/tr>\n<tr>\n<td style='width:100%;'><iframe style='width:100%;height:420px;' name=icone id=icone src='http:\/\/www.rjmprogramming.com.au\/PHP\/Image_3D\/cone.php?shape=cone' title='Cone'><\/iframe><\/td>\n<\/tr>\n<tr>\n<th style='width:100%;'><a style='text-decoration:underline;cursor:pointer;' onclick=\"document.getElementById('isphere').src=document.getElementById('isphere').src.split('&#038;')[0] + '';\">Sphere<\/a> <a style='text-decoration:underline;cursor:pointer;' onclick=\"document.getElementById('isphere').src=document.getElementById('isphere').src.split('&#038;')[0] + '&#038;metal=';\">(metal)<\/a><\/th>\n<\/tr>\n<tr>\n<td style='width:100%;'><iframe style='width:100%;height:420px;' name=isphere id=isphere src='http:\/\/www.rjmprogramming.com.au\/PHP\/Image_3D\/cone.php?shape=sphere' title='Sphere'><\/iframe><\/td>\n<\/tr>\n<tr>\n<th style='width:100%;'><a style='text-decoration:underline;cursor:pointer;' onclick=\"document.getElementById('itorus').src=document.getElementById('itorus').src.split('&#038;')[0] + '';\">Torus<\/a> <a style='text-decoration:underline;cursor:pointer;' onclick=\"document.getElementById('itorus').src=document.getElementById('itorus').src.split('&#038;')[0] + '&#038;metal=';\">(metal)<\/a><\/th>\n<\/tr>\n<tr>\n<td style='width:100%;'><iframe style='width:100%;height:420px;' name=itorus id=itorus src='http:\/\/www.rjmprogramming.com.au\/PHP\/Image_3D\/cone.php?shape=torus' title='Torus'><\/iframe><\/td>\n<\/tr>\n<tr>\n<th style='width:100%;'><a style='text-decoration:underline;cursor:pointer;' onclick=\"document.getElementById('icube').src=document.getElementById('icube').src.split('&#038;')[0] + '';\">Cube<\/a> <a style='text-decoration:underline;cursor:pointer;' onclick=\"document.getElementById('icube').src=document.getElementById('icube').src.split('&#038;')[0] + '&#038;metal=';\">(metal)<\/a><\/th>\n<\/tr>\n<tr>\n<td style='width:100%;'><iframe style='width:100%;height:420px;' name=icube id=icube src='http:\/\/www.rjmprogramming.com.au\/PHP\/Image_3D\/cone.php?shape=cube' title='Cube'><\/iframe><\/td>\n<\/tr>\n<\/table>\n<p> &#8230; and at this starting PHP <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Image_3D\/cone.php_GETME\" title=\"cone.php\" rel=\"noopener\">cone.php<\/a>&#8216;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Image_3D\/\" title=\"Click picture\" rel=\"noopener\">live run (of a cone)<\/a> link.<\/p>\n<hr>\n<p id='wglpcet'>Previous relevant <a target=\"_blank\" title='WebGL Prism Canvas Email Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/webgl-prism-canvas-email-tutorial\/' rel=\"noopener\">WebGL Prism Canvas Email 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\/ShapeDraw\/webgl_test.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"WebGL Prism Canvas Email Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ShapeDraw\/webgl_again.jpg\" title=\"WebGL Prism Canvas Email Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">WebGL Prism Canvas Email Tutorial<\/p><\/div>\n<p>Today we&#8217;re revisiting our &#8220;Convex Polygon shape with an added dimension by displaying its 3D prism equivalent via the <a target=\"_blank\" href='https:\/\/www.safaribooksonline.com\/library\/view\/webgl-up-and\/9781449326487\/ch01.html' title='WebGL information ... thanks' rel=\"noopener\">WebGL API<\/a> scenario&#8221;, we last talked about with <a title='PHP and Javascript and CSS WebGL Prism Tutorial' href='#pajacwpt'>PHP and Javascript and CSS WebGL Prism Tutorial<\/a> as shown below.  We revisit with a view to &#8230;<\/p>\n<ul>\n<li>make it more aesthetically pleasing, we hope<\/li>\n<li>centre the main graphical elements of the web application when unsupervised and avoid our old &#8220;sinful&#8221; <i>align=&#8217;center&#8217;<\/i> &#8220;habit&#8221; usage we talked about at <a target=\"_blank\" title='W3C XHTML Nu Checker Validation Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/w3c-xhtml-nu-checker-validation-primer-tutorial\/' rel=\"noopener\">W3C XHTML Nu Checker Validation Primer Tutorial<\/a> going on, which we diligently changed to <i>style=&#8221; width:100%;text-align:center; &#8220;<\/i> here today &#8230; when unsupervised, but &#8230;<\/li>\n<li>left justify the main graphical elements of the web application when supervised, so this involved <b><i>detecting &#8220;supervision&#8221;<\/i><\/b> and Javascript DOM <b>changes<\/b> at &#8230;<br \/>\n<code><br \/>\nwindow.onload = function init() {<br \/>\n    <b>if (document.URL.indexOf('huh=') != -1<i> || parent.document.getElementById('glcanvas') != null<\/i> || (document.referrer.indexOf('\/HTMLCSS\/ShapeDraw') != -1 && document.referrer.indexOf('.htm') == -1)) {<br \/>\n      document.getElementById('myform').innerHTML+='&lt;input type=hidden name=huh value=&gt;&lt;\/input&gt;';<br \/>\n      document.getElementById('mydiv').style.position='absolute';<br \/>\n      document.getElementById('mydiv').style.top='0px';<br \/>\n      document.getElementById('mydiv').style.left='0px';<br \/>\n      document.getElementById('mydiv').style.width='300px';<br \/>\n      document.getElementById('mydiv').style.textAlign='left';<br \/>\n      document.getElementById('mydiv').innerHTML='&lt;canvas id=\"gl-canvas\" width=\"300\" height=\"300\"&gt;&lt;\/canvas&gt;';<br \/>\n      document.getElementById('mydiv2').style.position='absolute';<br \/>\n      document.getElementById('mydiv2').style.top='310px';<br \/>\n      document.getElementById('mydiv2').style.left='0px';<br \/>\n      document.getElementById('mydiv2').style.textAlign='left';<br \/>\n      document.getElementById('mydiv3').style.position='absolute';<br \/>\n      document.getElementById('mydiv3').style.top='330px';<br \/>\n      document.getElementById('mydiv3').style.left='0px';<br \/>\n      document.getElementById('mydiv3').style.textAlign='left';<br \/>\n    } else {<br \/>\n      document.getElementById('mydiv').innerHTML='&lt;canvas id=\"gl-canvas\" width=\"400\" height=\"400\"&gt;&lt;\/canvas&gt;';<br \/>\n    }<br \/>\n    <\/b><br \/>\n    canvas = document.getElementById( \"gl-canvas\" );<br \/>\n    \/\/ more follows ...<br \/>\n<\/code>\n<\/li>\n<li>adding new Email functionality via <a target=\"_blank\" title='mailto information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tryit.asp?filename=tryhtml_link_mailto' rel=\"noopener\"><i>mailto:<\/i><\/a> tags linking to the user&#8217;s default Email client program, featuring the ability to &#8230;<\/li>\n<li>have the body section of that email be able to have a clipboard image <i>pasted<\/i> into it, for which we can utilize HTML5 <a target=\"_blank\" title='HTML Canvas element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp' rel=\"noopener\">canvas<\/a> element&#8217;s <a target=\"_blank\" title='HTML5 canvas element toDataURL method information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/HTMLCanvasElement\/toDataURL' rel=\"noopener\">toDataURL<\/a>() method, teamed up with a <a target=\"_blank\" href='http:\/\/www.w3schools.com\/jsref\/met_win_open.asp' title='window.open information from w3schools' rel=\"noopener\"><i>window.open<\/i><\/a> popup window of the <i>toDataURL<\/i> image data, which can be <i>selected<\/i> and <i>copied<\/i>, optionally, by the user themselves, should they wish this to make their email more self explanatory &#8230; and that canvas element&#8217;s &#8220;meeting of minds&#8221; with WebGL <b>changing<\/b> as per &#8230;<\/li>\n<li><code><br \/>\ngl = WebGLUtils.setupWebGL( canvas<b>, {preserveDrawingBuffer:true} <\/b>);<br \/>\n<\/code><br \/>\n &#8230; the help for which we got great ideas from this <a target=\"_blank\" title='Useful link' href='https:\/\/jsfiddle.net\/greggman\/HdVje\/' rel=\"noopener\">useful link<\/a>, thanks, and which allows the canvas element content to be retained long enough to be available for the <i>toDataURL()<\/i> call of it<\/li>\n<\/ul>\n<p>As we&#8217;ve said before about email, as a communication tool, its use can add a lot of accountability to your web applications, as well as being a great &#8220;sharing&#8221; method.<\/p>\n<p>So please feel free to try &#8230;<\/p>\n<ul>\n<li>an unsupervised <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ShapeDraw\/webgl_test.html\" title='Click picture' rel=\"noopener\">live run<\/a><\/li>\n<li>a supervised <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ShapeDraw\/\" title='Supervised' rel=\"noopener\">live run<\/a><\/li>\n<li>HTML and Javascript and CSS (supervised) <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ShapeDraw\/webgl_test.html-GETME\" title=\"webgl_test.html\" rel=\"noopener\">webgl_test.html<\/a> &#8230;<\/li>\n<li>changed in <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ShapeDraw\/webgl_test.html-GETME\" title=\"webgl_test.html\" rel=\"noopener\">this way<\/a> &#8230;<\/li>\n<li>PHP (supervisor) <a target=\"_blank\" title='ShapeDraw.php' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ShapeDraw\/ShapeDraw.php---GETME' rel=\"noopener\">ShapeDraw.php<\/a> is unchanged<\/li>\n<li>see today&#8217;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ShapeDraw\/webgl_again.jpg\" title='tutorial picture' rel=\"noopener\">tutorial picture<\/a> up close<\/li>\n<\/ul>\n<p>When will we see you &#8230; <a target=\"_blank\" title='The Three Degrees' href='https:\/\/www.youtube.com\/watch?v=T6fVDAjs9f0' rel=\"noopener\">again<\/a> &#8230; da, da da, da da?<\/p>\n<hr>\n<p id='pajacwpt'>Previous relevant <a target=\"_blank\" title='PHP and Javascript and CSS WebGL Prism Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/PHP and Javascript and CSS WebGL Prism Tutorial\/' rel=\"noopener\">PHP and Javascript and CSS WebGL Prism 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\/ShapeDraw\/\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"PHP and Javascript and CSS WebGL Prism Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ShapeDraw\/OpenGL-95of.jpg\" title=\"PHP and Javascript and CSS WebGL Prism Tutorial\"  style=\"float:left;\"  id='zqpwo' onmouseover=\" this.src=this.src.replace('-94of.j','-95of.xj').replace('-95of.j','-96of.xj').replace('-96of.j','-94of.xj').replace('.x','.');   \" \/><\/a><p class=\"wp-caption-text\">PHP and Javascript and CSS WebGL Prism Tutorial<\/p><\/div>\n<p>To infinity and beyo<font size=4>n<\/font><font size=5>d!!<\/font> &#8230; well, at least to the 3rd  dimension &#8230; yes, we&#8217;re rejoining our Geometry and Land Surveying theme today, rejoining the discussion of <a target=\"_blank\" title='PHP and Javascript and CSS Shape Rotation Tutorial' href='#pajacsrt' rel=\"noopener\">PHP and Javascript and CSS Shape Rotation Tutorial<\/a> as shown below, but giving some additional functionality to show the Convex Polygon shape with an added dimension by displaying its 3D prism equivalent via the <a target=\"_blank\" href='https:\/\/www.safaribooksonline.com\/library\/view\/webgl-up-and\/9781449326487\/ch01.html' title='WebGL information ... thanks' rel=\"noopener\">WebGL API<\/a>, modelling the additional code via the public generosity and wonderful resources from the <a target=\"_blank\" title='Useful resources for WebGL within here ... thanks' href='http:\/\/www.cs.unm.edu\/' rel=\"noopener\">University of New Mexico<\/a> &#8230; our heartfelt thanks.<\/p>\n<p>If you have been a recent reader you&#8217;ll have seen that we have been discussing <a target=\"_blank\" title='OpenGL information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/OpenGL' rel=\"noopener\">OpenGL<\/a>. OpenGL has a <a target=\"_blank\" title='OpenGL landing page' href='http:\/\/OpenGL.org' rel=\"noopener\">OpenGL.org<\/a> landing page which will talk about all the platforms supported, and let&#8217;s just remind you about the purpose, with a quote from the webpage &#8230;<\/p>\n<blockquote>\n<p>\nThe Industry&#8217;s Foundation for High Performance Graphics<br \/>\nfrom games to virtual reality, mobile phones to supercomputers\n<\/p>\n<\/blockquote>\n<p> &#8230; well, today, we use <i>some<\/i> of that knowledge &#8230; <i>some<\/i> being the operative word, and we&#8217;ll talk more on this tomorrow, but &#8230; with the sequence of blog posts culminating in <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/ITblog\/c-opengl-in-xcode-generic-regular-prism-drawing-tutorial\/' title='C++ OpenGL in Xcode Generic Regular Prism Drawing Tutorial' rel=\"noopener\">C++ OpenGL in Xcode Generic Regular Prism Drawing Tutorial<\/a> we learnt some things about graphics software and the concepts of &#8230;<\/p>\n<ul>\n<li>object vertices definition<\/li>\n<li>object colour<\/li>\n<li>lighting \u2026 direction, type, angle, numbers of sources etcetera<\/li>\n<li>perspective \u2026 field of view, aspect ratio, Z position<\/li>\n<\/ul>\n<p> &#8230; and the Land Surveying use of thinking about Survey Traverses as an idea to genericize the vertex definition phase, as this is the major difference between drawing a &#8220;cube&#8221; or a &#8220;hexagonal prism&#8221; or a &#8220;butterfly in Brazil&#8221; (just kidding &#8230; that&#8217;s for tomorrow (in Klingon time)).<\/p>\n<p>So the wonderful code from the <a target=\"_blank\" title='Useful resources for WebGL within here ... thanks' href='http:\/\/stackoverflow.com\/questions\/26742317\/drawing-a-cube-in-webgl' rel=\"noopener\">University of New Mexico<\/a> (via StackOverflow) was to show a cube, and the use of buttons to display animation and rendering &#8220;smarts&#8221; &#8230; so am really really really keen for you to examine this additional HTML code of today you could call <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ShapeDraw\/webgl_test.html_GETME' title='webgl_test.html' rel=\"noopener\">webgl_test.html<\/a> &#8230; we change it to add some Land Surveying feeling to the creation of vertices for our Convex Polygon extended into a Prism arrangement as per the Javascript code &#8230;<\/p>\n<p><code><br \/>\nvar numsides = location.search.split('numsides=')[1] ? location.search.split('numsides=')[1].split('&')[0] : 4;<br \/>\nvar NumVertices  = eval((numsides * 2) * 3);<br \/>\nvar evalc=\"\", evalcol=\"\";<br \/>\nvar delim=\"[\";<br \/>\nvar sidelen=eval((1.0 * 3.0) \/ numsides);<br \/>\nvar x=eval(0.0 - (sidelen \/ 2.0) * (numsides \/ 3)), y=eval(0.0 - (sidelen \/ 2.0) * (numsides \/ 3)), z=1.5, otherz=0.5, thisis=1;<br \/>\nvar bearing=0.0;<br \/>\nvar prevbearing;<br \/>\nvar nextx, nexty, nextis=2;<br \/>\nvar prevx, prevy, previs=numsides, downis=eval(numsides);<br \/>\ndownis++;<br \/>\nevalc=\"\";<br \/>\nfor (ij=0; ij&lt;eval(numsides * 2); ij++) {<br \/>\n  if (ij == numsides) {<br \/>\n    z=0.5;<br \/>\n    otherz=1.5;<br \/>\n  }<br \/>\n  nextx=eval(x + sidelen * Math.sin(bearing \/ 57.2957795));<br \/>\n  if (Math.abs(nextx) &lt; 0.00001) nextx = 0.0;<br \/>\n  nexty=eval(y + sidelen * Math.cos(bearing \/ 57.2957795));<br \/>\n  if (Math.abs(nexty) &lt; 0.00001) nexty = 0.0;<br \/>\n  prevbearing = ((bearing + 540 - (360.0 \/ numsides)) % 360.0);<br \/>\n  prevx=eval(x + sidelen * Math.sin(prevbearing \/ 57.2957795));<br \/>\n  if (Math.abs(prevx) &lt; 0.00001) prevx = 0.0;<br \/>\n  prevy=eval(y + sidelen * Math.cos(prevbearing \/ 57.2957795));<br \/>\n  if (Math.abs(prevy) &lt; 0.00001) prevy = 0.0;<br \/>\n  if (eval((ij + 1) % numsides) != 0) {<br \/>\n   evalc += (delim + \"vec4(\" + x + \",\" + y + \",\" + z + \",1.0) \/\" + \"\/\" + thisis + \"\\n\");<br \/>\n   evalcol += (delim + \"vec4( 1.0, 0.0, 0.0, 1.0 ) \/\" + \"\/red \\n\");<br \/>\n   delim=\",\";<br \/>\n   evalc += (delim + \"vec4(\" + nextx + \",\" + nexty + \",\" + z + \",1.0) \/\" + \"\/\" + nextis + \"\\n\");<br \/>\n   evalcol += (delim + \"vec4( 1.0, 0.0, 0.0, 1.0 ) \/\" + \"\/red \\n\");<br \/>\n  }<br \/>\n  if ((ij % numsides) == 0) {<br \/>\n   evalc += (delim + \"vec4(\" + x + \",\" + y + \",\" + z + \",1.0) \/\" + \"\/\" + thisis + \"\\n\");<br \/>\n   evalcol += (delim + \"vec4( 1.0, 0.0, 0.0, 1.0 ) \/\" + \"\/red \\n\");<br \/>\n   evalc += (delim + \"vec4(\" + prevx + \",\" + prevy + \",\" + z + \",1.0) \/\" + \"\/\" + previs + \"\\n\");<br \/>\n   evalcol += (delim + \"vec4( 1.0, 0.0, 0.0, 1.0 ) \/\" + \"\/red \\n\");<br \/>\n   previs = eval(previs * 2);<br \/>\n  }<br \/>\n  if (ij &lt; numsides) {<br \/>\n   evalc += (delim + \"vec4(\" + x + \",\" + y + \",\" + z + \",1.0) \/\" + \"\/\" + thisis + \"\\n\");<br \/>\n   evalcol += (delim + \"vec4( 1.0, 0.0, 0.0, 1.0 ) \/\" + \"\/red \\n\");<br \/>\n   evalc += (delim + \"vec4(\" + x + \",\" + y + \",\" + otherz + \",1.0) \/\" + \"\/\" + downis + \"\\n\");<br \/>\n   evalcol += (delim + \"vec4( 1.0, 0.0, 0.0, 1.0 ) \/\" + \"\/red \\n\");<br \/>\n  }<br \/>\n  x = nextx;<br \/>\n  y = nexty;<br \/>\n  thisis++;<br \/>\n  nextis++;<br \/>\n  downis++;<br \/>\n  bearing += (360.0 \/ numsides);<br \/>\n}<br \/>\nevalc += \"];\";<br \/>\nevalcol += \"];\";<br \/>\nvar vertices;<br \/>\nvertices = eval(evalc);<br \/>\n<\/code><\/p>\n<p>WebGL API performs its graphics via the use of the HTML5 <a target=\"_blank\" title='HTML5 canvas element information from w3schools ... thanks' href='http:\/\/www.w3schools.com\/html\/html5_canvas.asp' rel=\"noopener\">canvas<\/a> element.  We&#8217;ll be discussing more on this topic, no doubt, as time goes on.<\/p>\n<p>Here is a link to Shape Draw live run (with Google Line Chart and HTML svg and WebGL 3D Prism drawing and University of New Mexico inspired animation functionality) <a target=\"_blank\" title='Shape Draw live run with Google Line Chart and HTML svg' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ShapeDraw\/ShapeDraw.php' rel=\"noopener\">here<\/a>.<br \/>\nHere is a link to Shape Draw PHP source code <a target=\"_blank\" title='ShapeDraw.php' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ShapeDraw\/ShapeDraw.php---GETME' rel=\"noopener\">ShapeDraw.php<\/a> with changes from previous code as per <a target=\"_blank\" title='ShapeDraw.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ShapeDraw\/ShapeDraw.php---GETME' rel=\"noopener\">this link<\/a>.<\/p>\n<p>Try it out, and get into web based 3D graphics via the WebGL API &#8230; you&#8217;ll be drawing <a target=\"_blank\" title='Prism animals' href='https:\/\/www.google.com.au\/search?q=%22prism+animals%22&#038;biw=1280&#038;bih=661&#038;source=lnms&#038;tbm=isch&#038;sa=X&#038;ved=0CAYQ_AUoAWoVChMI2JCo672WxgIViIG8Ch1BPQAD#q=%22prism+animals%22&#038;tbm=isch&#038;tbs=itp:clipart&#038;imgrc=mXgZpl8bE4nNTM%253A%3B8gO4cHyO2xrs5M%3Bhttp%253A%252F%252Fpayload107.cargocollective.com%252F1%252F8%252F262499%252F4458273%252F2.jpg%3Bhttp%253A%252F%252Fwww.rodrigodimarzo.com%252FVortex%3B670%3B446' rel=\"noopener\">prism animals<\/a> before the sun goes down!<\/p>\n<hr>\n<p id=\"pajacsrt\">Previous relevant <a target=\"_blank\" title='PHP and Javascript and CSS Shape Rotation Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/php-and-javascript-and-css-shape-rotation-tutorial\/' rel=\"noopener\">PHP and Javascript and CSS Shape Rotation 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\/ShapeDraw\/\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"PHP and Javascript and CSS Shape Rotation Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ShapeDraw\/ShapeDraw.gif\" title=\"PHP and Javascript and CSS Shape Rotation Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">PHP and Javascript and CSS Shape Rotation Tutorial<\/p><\/div>\n<p>We&#8217;re continuing on with our Geometry and Land Surveying theme today, following on from yesterday&#8217;s <a target=\"_blank\" title='PHP and Javascript and CSS Shape Drawing Tutorial' href='#pajacsdt' rel=\"noopener\">PHP and Javascript and CSS Shape Drawing Tutorial<\/a> as shown below.  When there are only small distances we talk about Plane Geometry because the curvature of the earth doesn&#8217;t come into the equation.  When Earth curvature matters, over longer distances, in Land Surveying the term <a target=\"_blank\" href='http:\/\/civilengineersforum.com\/geodetic-surveying\/' rel=\"noopener\">Geodetic Surveying<\/a> is often used.  Here, the equations used need to model the Earth as close as possible to known measurements.<\/p>\n<p>If you read yesterday&#8217;s posting you&#8217;ll see that we added some popup window functionality to display the Convex Polygon created by the web application in a relative sense, and to do this we called on (where var<font size=1>iable<\/font> &#8220;opop&#8221; is global in scope) &#8230;<\/p>\n<ul>\n<li><code><br \/>\n  opop = <a target=\"_blank\" title='Window.open method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_open.asp' rel=\"noopener\">window.open<\/a>(\"\", \"Polygon \" + numlegs, \"left=400,top=250,height=\" + parseFloat(50 + maxy) + \",width=\" + parseFloat(50 + maxx));<br \/>\n<\/code><\/li>\n<li><code><br \/>\n  opop.<a target=\"_blank\" title='Document.write method information from w3schools' href='http:\/\/www.w3schools.com\/js\/js_output.asp' rel=\"noopener\">document.write<\/a>([someDerivedHTML]);<br \/>\n<\/code><\/li>\n<\/ul>\n<p>We&#8217;re here, today, to remind you, that that popup doesn&#8217;t have to be like a dead fish, just displaying information.  It can be interactive itself, and is known to the &#8220;parent&#8221; window, so can have its own &#8220;hidden input&#8221; HTML element (for example) as per &#8230;<\/p>\n<p><code><br \/>\n&lt;input id=\"myunload\" type=\"hidden\" value=\"\"&gt;&lt;\/input&gt;<br \/>\n<\/code><\/p>\n<p>&#8230; that is updated when a button as per (this function, that is used to create this button and a related dropdown) &#8230;<\/p>\n<p><code><br \/>\nfunction buttonideas() {<br \/>\n  var crotate1 = \"&lt;input type='button' onclick=' if (document.getElementById(\\\"myunload\\\") != null) { document.getElementById(\\\"myunload\\\").value=\\\"\" +  initiallength + \",\" + numlegs + \",\" + \"\\\" + document.getElementById(\\\"myselect\\\").value; }' value='Rotate Clockwise'&gt;&lt;\/input&gt;&nbsp;&lt;select id='myselect'&gt;&lt;option value='\" + eval(180.0 \/ numlegs) + \"'&gt;By \" + eval(180.0 \/ numlegs) + \"\u00b0 ... vs ...&lt;\/option&gt;&lt;\/select&gt;\";<br \/>\n  for (var steps=0; steps&lt;=360; steps++) {<br \/>\n    crotate1=crotate1.replace(\"&lt;\/option&gt;&lt;\/select&gt;\", \"&lt;\/option&gt;&lt;option value='\" + steps + \"'&gt;By \" + steps + \"\u00b0&lt;\/option&gt;&lt;\/select&gt;\");<br \/>\n  }<br \/>\n  return crotate1;<br \/>\n}<br \/>\n<\/code><\/p>\n<p>&#8230; then our &#8220;parent&#8221; window can swing into action via a setInterval() scenario (where var<font size=1>iable<\/font> sipos is global) &#8230;<\/p>\n<p><code><br \/>\n  sipos = <a target=\"_blank\" title='Javascript setInterval method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_setinterval.asp' rel=\"noopener\">setInterval<\/a>(takealook, 5000);<br \/>\n<\/code><\/p>\n<p>&#8230; with code like &#8230;<\/p>\n<p><code><br \/>\nfunction takealook() {<br \/>\n  var things;<br \/>\n  if (opop != null) {<br \/>\n    if (opop.document.getElementById('myunload').value.indexOf(\",\") != -1) {<br \/>\n      things = opop.document.getElementById('myunload').value.split(\",\");<br \/>\n      opop.close();<br \/>\n      opop = null;<br \/>\n      if (things.length >= 3) {<br \/>\n        if (sipos != null) { clearInterval(sipos); sipos = null; }<br \/>\n        var bis = 0.0;<br \/>\n        bis += parseFloat(initialbearing);<br \/>\n        bis += parseFloat(things[2]);<br \/>\n        window.location = \".\/ShapeDraw.php?sides=\" + things[1] + \",0&length=\" + things[0] + \"&bearing=\" + posval(bis);<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n}<br \/>\n<\/code><\/p>\n<p>&#8230; to allow for some HTML <a target=\"_blank\" title='SVG information from w3schools' href='http:\/\/www.w3schools.com\/svg\/' rel=\"noopener\">&#8220;svg&#8221;<\/a> element rotation functionality, if the button is pressed, that is.  One last nicety is to use the Window Event &#8220;onunload&#8221; to clear the setInterval handler with a web browser close or a user closing the parent webpage as per &#8230;<\/p>\n<p><code><br \/>\n&lt;body onunload=\" if (sipos != null) { clearInterval(sipos); sipos = null; }\" style=\"background-color: #fffff0;\"&gt;<br \/>\n<\/code><\/p>\n<p>Link to Shape Draw live run (with Google Line Chart and HTML svg functionality) <a target=\"_blank\" title='Shape Draw live run with Google Line Chart and HTML svg' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ShapeDraw\/ShapeDraw.php' rel=\"noopener\">here<\/a>.<br \/>\nLink to Shape Draw PHP source code <a target=\"_blank\" title='ShapeDraw.php' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ShapeDraw\/ShapeDraw.php--GETME' rel=\"noopener\">ShapeDraw.php<\/a> with changes from code yesterday as per <a target=\"_blank\" title='ShapeDraw.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ShapeDraw\/ShapeDraw.php--GETME' rel=\"noopener\">this link<\/a>.<\/p>\n<p>You may be interested in CSS3 ways to rotate HTML elements as well, so we&#8217;ll leave you with <a target=\"_blank\" title='Rotation blog posts here' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/?tag=rotation' rel=\"noopener\">this link<\/a> to point you in the direction of where we have discussed this previously.<\/p>\n<hr>\n<p id=\"pajacsdt\">Previous relevant <a target=\"_blank\" title='PHP and Javascript and CSS Shape Drawing Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/php-and-javascript-and-css-shape-drawing-tutorial\/' rel=\"noopener\">PHP and Javascript and CSS Shape Drawing 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\/ShapeDraw\/\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"PHP and Javascript and CSS Shape Drawing Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ShapeDraw\/ShapeDraw.jpg\" title=\"PHP and Javascript and CSS Shape Drawing Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">PHP and Javascript and CSS Shape Drawing Tutorial<\/p><\/div>\n<p>It is no coincidence that Geometry and Land Surveying have a lot in common.  When there are only small distances we talk about Plane Geometry because the curvature of the earth doesn&#8217;t come into the equation.  When Earth curvature matters, over longer distances, in Land Surveying the term <a target=\"_blank\" href='http:\/\/civilengineersforum.com\/geodetic-surveying\/' rel=\"noopener\">Geodetic Surveying<\/a> is often used.  Here, the equations used need to model the Earth as close as possible to known measurements.<\/p>\n<p>So today, with our Plane Geometry web application, we start with our previous Survey Traverse web application, and add to its functionality with ability for it to fill out more for the user to describe a regular polygon of their choosing, defined by &#8230;<\/p>\n<ol>\n<li>number of polygon sides<\/li>\n<li>length of each polygon side<\/li>\n<\/ol>\n<p>We also add to the Google Charts Line Graph of the Drawn Shape a popup window showing the polygon as an HTML <a target=\"_blank\" title='HTML svg information from w3schools' href='http:\/\/www.w3schools.com\/svg\/' rel=\"noopener\">svg<\/a> element.  Part of the reason for this is that the Google Chart Line Graph can exaggerate the x or y co-ordinate of its plots, but with the HTML svg element, you avoid this issue, as we are just showing you a &#8220;relative&#8221; view of the shape (ie. as distinct from an &#8220;absolute&#8221; view with distinct co-ordinates).<\/p>\n<p>The thinking here started with a look at New Century Maths stages 5.2\/5.3 &#8220;Exterior angle sum of a convex polygon&#8221;.  Did you know?<\/p>\n<blockquote><p>\nThe sum of the exterior angles of a convex polygon is 360\u00b0.\n<\/p><\/blockquote>\n<p>What we found to be the case, practically speaking, to imagine the drawing of a regular even-sided convex polygon (with &#8220;numsides&#8221; sides) was &#8230;<\/p>\n<ul>\n<li>look north &#8230;<\/li>\n<li>turn clockwise (360\u00b0 \/ numsides) for first line to draw (NB. there is more symmetry if this number is then divided by 2) &#8230; then from then on &#8230;<\/li>\n<li>off this previous line, turn clockwise (180\u00b0 +  (360\u00b0 \/ numsides)) for subsequent lines<\/li>\n<\/ul>\n<p>Link to Shape Draw live run (with Google Line Chart and HTML svg functionality) <a target=\"_blank\" title='Shape Draw live run with Google Line Chart and HTML svg' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ShapeDraw\/ShapeDraw.php' rel=\"noopener\">here<\/a>.<br \/>\nLink to Shape Draw PHP source code <a target=\"_blank\" title='ShapeDraw.php' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ShapeDraw\/ShapeDraw.php-GETME' rel=\"noopener\">ShapeDraw.php<\/a> with changes from code below as per <a target=\"_blank\" title='ShapeDraw.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ShapeDraw\/ShapeDraw.php-GETME' rel=\"noopener\">this link<\/a>.<\/p>\n<p>Hope you enjoy the geometry ideas, and will leave you with a very useful link that helped with the Convex Polygon method to calculate the Surface Area <a target=\"_blank\" href='http:\/\/www.mathsisfun.com\/geometry\/area-irregular-polygons.html' link='Useful link for surface area' rel=\"noopener\">here<\/a>.<\/p>\n<hr>\n<p id=\"hajcstt\">Previous relevant <a target=\"_blank\" title='HTML and Javascript and CSS Survey Traverse Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-and-javascript-and-css-survey-traverse-tutorial\/' rel=\"noopener\">HTML and Javascript and CSS Survey Traverse 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\/SurveyTraverse\/\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML and Javascript and CSS Survey Traverse Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/SurveyTraverse.jpg\" title=\"HTML and Javascript and CSS Survey Traverse Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">HTML and Javascript and CSS Survey Traverse Tutorial<\/p><\/div>\n<p>Here is a tutorial showing some client-side basics in HTML and Javascript and CSS all in the one HTML file, to simplify concepts.   The tutorial subject matter is a webpage to perform Survey Traverse calculations.   A Survey Traverse is:<\/p>\n<blockquote><p>Traverse is a method in the field of surveying to establish control networks.[1] It is also used in geodesy. Traverse networks involve placing survey stations along a line or path of travel, and then using the previously surveyed points as a base for observing the next point. Traverse networks have many advantages, including:<\/p>\n<p>    Less reconnaissance and organization needed;<br \/>\n    While in other systems, which may require the survey to be performed along a rigid polygon shape, the traverse can change to any shape and thus can accommodate a great deal of different terrains;<br \/>\n    Only a few observations need to be taken at each station, whereas in other survey networks a great deal of angular and linear observations need to be made and considered;<br \/>\n    Traverse networks are free of the strength of figure considerations that happen in triangular systems;<br \/>\n    Scale error does not add up as the traverse is performed. Azimuth swing errors can also be reduced by increasing the distance between stations.<\/p>\n<p>The traverse is more accurate than triangulateration[2] (a combined function of the triangulation and trilateration practice).[3]<\/p><\/blockquote>\n<p>Let&#8217;s see some simple <a target=\"_blank\" title='click picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/' rel=\"noopener\">HTML<\/a> in action in a tutorial &#8230;<\/p>\n<p>Link to HTML &#8220;spiritual home&#8221; &#8230; <a target=\"_blank\" title='W3Schools' href='http:\/\/www.w3schools.com\/html\/' rel=\"noopener\">at W3Schools<\/a> has many tutorials.<br \/>\nLink to Survey Traverse live run &#8230; <a target=\"_blank\" title='Survey Traverse live run' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/SurveyTraverse.html' rel=\"noopener\">here<\/a>.<br \/>\nLink to Survey Traverse live run (additional Google Line Chart functionality)  <a target=\"_blank\" title='Survey Traverse live run with Google Line Chart' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/SurveyTraverse.php' rel=\"noopener\">here<\/a>.<br \/>\nLink to Survey Traverse information &#8230; <a target=\"_blank\" title='Survey Traverse information' href='http:\/\/en.wikipedia.org\/wiki\/Traverse_(surveying)' rel=\"noopener\">from Wikipedia from which quote above comes<\/a>.<br \/>\nLink to some downloadable HTML code &#8230; rename to <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/SurveyTraverse.html_GETME' title='Download me' rel=\"noopener\">SurveyTraverse.html<\/a> which packages up a lot of Javascript and a little bit of CSS &#8230; or JaCvasScriptS &#8230; not sure whether this would ever catch on.<br \/>\nLink to some downloadable PHP programming code (additional Google Line Chart functionality) &#8230; rename to <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/SurveyTraverse.php_GETME' title='Download me' rel=\"noopener\">SurveyTraverse.php<\/a>\n<\/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='#d1271' onclick='var dv=document.getElementById(\"d1271\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?cat=59\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d1271' 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='#d15361' onclick='var dv=document.getElementById(\"d15361\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/?tag=mathematics\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d15361' 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='#d15374' onclick='var dv=document.getElementById(\"d15374\"); 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='d15374' 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='#d15472' onclick='var dv=document.getElementById(\"d15472\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/?tag=geometry\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d15472' 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='#d23066' onclick='var dv=document.getElementById(\"d23066\"); 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='d23066' 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='#d46262' onclick='var dv=document.getElementById(\"d46262\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/sphere\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d46262' 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='#d46271' onclick='var dv=document.getElementById(\"d46271\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/installer\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d46271' 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='#d46281' onclick='var dv=document.getElementById(\"d46281\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/parameterize\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d46281' 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='#d46289' onclick='var dv=document.getElementById(\"d46289\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d46289' 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='#d46299' onclick='var dv=document.getElementById(\"d46299\"); 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='d46299' 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='#d65323' onclick='var dv=document.getElementById(\"d65323\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/shape\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d65323' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We had occasion to revisit the PHP (Pear installed) Image_3D package (we last talked about with Image_3D PHP Package Sharing Tutorial) inhouse interfacing web application, in it&#8217;s new home on AlmaLinux. Yes, there were issues moving from a PHP environment &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/image_3d-php-package-almalinux-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":[4855,4650,2985,1550,590,4972,3070,870,3069,3071,932,997,1226,1319],"class_list":["post-65323","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-uncategorised","category-tutorials","tag-almalinux","tag-deprecate","tag-deprecation","tag-gd","tag-image","tag-imagefilledpolygon","tag-image_3d","tag-onload","tag-package","tag-pear","tag-php","tag-programming","tag-svg","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/65323"}],"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=65323"}],"version-history":[{"count":11,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/65323\/revisions"}],"predecessor-version":[{"id":65376,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/65323\/revisions\/65376"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=65323"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=65323"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=65323"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}