Robert James Metcalfe Blog

Earth Scanner Longitude Prompt Tutorial

Posted on July 22, 2024 by admin

Earth Scanner Longitude Prompt Tutorial

Sometimes in I.T. you plan for something, and there’s an unplanned for “side benefit”. We more often see this the other way around, where your plan causes “side harm”, but we’ll take today’s “side benefit” of …

Slowing things down (as discussed below)

… anyday, regarding the plan to add some …

“when” style logic new functionality … onto the …
“where” style functionality … so predominant, in our inhouse Earth Scanner web application …

… we last talked about, recently, with Earth Scanner Initial Placename Popup Window Tutorial.

Yes, as we’ve outlined many times, we think the software of I.T. is best suited to the “where” of life, followed by the “when” of life matters, in that order. And for us, where (tee hee) “where” meets “when” is easiest to grasp, for us, with Timezone places, which PHP is very good at, luckily enough.

So we decided to add in “right click” (ie. oncontextmenu event) (~~sorry~~ and using ontouchend (happening on a click), mobile users) logic, as a new independent layer of functionality for those curious users who happen to “right click” on our Earth Scanner map …

initially, perhaps, anywhere, when they are told if they “right click” …
a particuar Longitude, then Timezone place current times of relevance to that Longitude’s value will be shown in a Javascript prompt window

Then, in making this happen for the changed and tweaked …

… earth_scanner.html code for the Earth Scanner web application, we realized it was “slowing the progression” of the Earth Scanner’s relentless push to “move on”, and so could help some users who do not necessarily want to “move on” so quickly, and instead want to see what is showing on the Earth Scanner map at the time they “right clicked”. Well, we’d like to say …

And all because you asked for it.

… but we’d be joshing?!

Previous relevant Earth Scanner Initial Placename Popup Window Tutorial is shown below.

Earth Scanner Initial Placename Popup Window Tutorial

With the Earth Bearing Distance Missing Two Hashtagged Mailto Sharing Tutorial it was the same Earth Scanner web application involved as talked about in Earth Scanner Placements Tutorial where it talked about the URL …

https://www.rjmprogramming.com.au/HTMLCSS/earth_scanner.html?nontz=Alice_Springs%7C133.8807%7C_23.6980%7CAU#Alice_Springs

… or equivalent in this case regarding real mantissa … remember rules?

https://www.rjmprogramming.com.au/HTMLCSS/earth_scanner.html?nontz=Alice_Springs%7C133.8807%7C_23.6980%7CAU#Alice_Springs

On revisiting this posting it occurred to us, that an improvement for our Earth Scanner web application would be to acknowledge this …

initial place … especially given it might disappear from the maps presented too soon …
if possible, and Wikipedia can help, present a popup window featuring background images regarding that place

… to supplement map information with real life photography, thanks Wikipedia. A new Javascript function …

… helped us with this tweaking of the changed earth_scanner.html code for the Earth Scanner web application.

Previous relevant Earth Bearing Distance Missing Two Hashtagged Mailto Sharing Tutorial is shown below.

Earth Bearing Distance Missing Two Hashtagged Mailto Sharing Tutorial

We’re returning to our Missing Two web application, after …

the recent Earth Bearing Distance Missing Two Earth Scanner Integration Tutorial Earth Scanner integration … because, today …
it becomes our “guinea pig” web application helping out the …
1. Ajax … and …
2. FormData … methodologies we use a lot around here in the past …
3. calling PHP emailhtml.php … to send …
4. emails containing (HTML perhaps) inline content or attachments … that being the “old way” being helped out by …
5. intervention in the code_s so that an “a” link “mailto:” with hashtagging scenario can augment this (ie. back it up)
… approaches we use with lots of our web application sharing functionalities

We found, in a “first draft” look at this there were three parts to the solution.

At the PHP code of emailhtml.php PHP mail based email creator code add this near the end …
<?php `if ($mailto != '') { echo "<ht" . "ml> <he" . "ad> <scr" . "ipt type='text/javascript'> function mto() { document.getElementById('amto').click(); } </scr" . "ipt> </he" . "ad> <bo" . "dy onload=mto();> <a target=_top style=display:none; href='" . $mailto . "' id=amto>Email</a> </bo" . "dy></ht" . "ml>"; }` ?> … helped out by, at the correct place … <?php `$mailto='mailto:' . $to . '?subject=' . str_replace('+','%20',urlencode($subject)); $mailto.='&body=https://www.rjmprogramming.com.au/htmlemail.html?rand=' . ('' . time()); $mailto.='#' . base64_encode(urlencode($hcont)); // base64_encode($hcont);` ?> … in the changed emailhtml.php PHP mail email inhouse interfacer
A totally new HTML/Javascript inhouse simple reader of hashtag data to display webpage data …
<html> <head> <title>Display Hashtagged HTML Data - RJM Programming - March, 2024</title> <script type='text/javascript'> var lh=(('' + location.hash).replace(/^null/g,'').replace(/^undefined/g,'')).replace(/^\#/g,''); if (lh != '') { if (lh.indexOf('JTNDY') == 0) { lh=decodeURIComponent(window.atob(decodeURIComponent(lh))).replace(/\+/g,' '); } else if (lh.indexOf(window.btoa('<')) == 0 \|\| lh.indexOf('PGJ') == 0) { lh=window.atob(lh).replace(/\+/g,' '); } else { lh=decodeURIComponent(lh).replace(/\+/g,' '); } } var lhdatas=lh.split('data:'); var prefixer='"'; var bodyis='<body></body>', headis=''; for (var ilh=1; ilh<lhdatas.length; ilh++) { prefixer=lhdatas[eval(-1 + ilh)].slice(-1).replace('(',')').replace('[',']').replace('{','}'); if (lhdatas[ilh].split(prefixer)[0].indexOf(' ') != -1) { lh=lh.replace(lhdatas[ilh].split(prefixer)[0], lhdatas[ilh].split(prefixer)[0].replace(/\ /g,'+')); } } if (lh.indexOf('</body>') != -1 && lh.indexOf('<body') != -1) { bodyis='<body' + lh.split('<body')[1].split('</html>')[0]; } else if (lh.trim() != '' && lh.indexOf('<head') == -1) { bodyis=lh; } if (lh.indexOf('</head>') != -1 && lh.indexOf('<head') != -1) { headis='<head' + lh.split('<head')[1].split('</head>')[0] + '</head>'; document.write(headis.replace(/https\:\/\//g,'//').replace(/http\:\/\//g,'//') + bodyis.replace(/https\:\/\//g,'//').replace(/http\:\/\//g,'//')); } else if (bodyis != '<body></body>') { document.write(bodyis.replace(/https\:\/\//g,'//').replace(/http\:\/\//g,'//')); } </script> </head> <body> </body> </html> … in htmlemail.html Hashtag Email Data Reader and Display “first draft”
Missing Two web application (as an example of what others will try to achieve, as time goes on) this way …
var xzhr=null; xzhr = new XMLHttpRequest(); var xform=new FormData(); xform.append('inline',''); xform.append('to',em.trim()); if (em.trim() != em) { xform.append('subj','Missing Two'); //var cbgtd=document.getElementById('tdlook').getBoundingClientRect(); xform.append('body','<body>' + document.body.innerHTML.replace(/\ id\=\"mysel\"/g, ' name="mysel" id="mysel"').replace(/\ size\=\"3\"/g, ' size="4"').replace(/\ data\-href\=/g, ' target=_blank href=').replace('</form>', '<br><br><input style=background-color:lightgreen; type=submit value=Solve></input></form>').replace('DISPLAY:table-row','DISPLAY:none').replace(lastfis,lasttis).replace(lasteis,lastenow).replace(lasteis2,lastenow2).replace(lastsis,lastsnow).replace(lastsis2,lastsnow2).replace('absolute;','absolute;display:none;').replace(flatf,tlatf).replace(flongf,tlongf).replace(flatt,tlatt).replace(flongt,tlongt).replace(fbrg,tbrg).replace(fdist,tdist) + '</body>'); } else { xform.append('subj','Missing Two'); xform.append('body','<body>' + document.body.innerHTML.replace(/\ id\=\"mysel\"/g, ' name="mysel" id="mysel"').replace(/\ size\=\"3\"/g, ' size="4"').replace(/\ data\-href\=/g, ' target=_blank href=').replace('</form>', '<br><br><input style=background-color:lightgreen; type=submit value=Solve></input></form>').replace('DISPLAY:table-row','DISPLAY:none').replace(lastfis,lasttis).replace(lasteis,lastenow).replace(lasteis2,lastenow2).replace(lastsis,lastsnow).replace(lastsis2,lastsnow2).replace('absolute;','absolute;display:none;').replace(flatf,tlatf).replace(flongf,tlongf).replace(flatt,tlatt).replace(flongt,tlongt).replace(fbrg,tbrg).replace(fdist,tdist) + '</body>'); } xzhr.onreadystatechange=stateChanged; xzhr.open('post','//www.rjmprogramming.com.au/HTMLCSS/emailhtml.php',true); xzhr.send(xform); … Ajax calling of … `function stateChanged() { if (xzhr.readyState == 4) { if (xzhr.status == 200) { //alert(xzhr.response); if (xzhr.response.indexOf('</a>') != -1) { document.getElementById('mtodiv').innerHTML='<a' + xzhr.response.split('<a')[eval(-1 + xzhr.response.split('<a').length)].split('</a>')[0] + '</a>'; var alista=document.getElementsByTagName('a'); alista[eval(-1 + alista.length)].click(); } } } }` … in a changed missing_two.html‘s “Missing Two” web application

The hashtagging email story continues!

Stop Press

A tweaked missing_two.html‘s “Missing Two” web application prioritizes timezone place name geolocations over other placename ideas.

Previous relevant Earth Bearing Distance Missing Two Earth Scanner Integration Tutorial is shown below.

Earth Bearing Distance Missing Two Earth Scanner Integration Tutorial

Today we’re combining precedents from …

yesterday’s Earth Scanner Google Chrome Speech to Text Tutorial‘s work on our recent Earth Scanner web application … and ….
the latest Earth Bearing Distance Missing Two Trip Geolocation Elevation Tutorial about the Missing Two web application

… where we integrate the first into the second. Yes, you can code for a web application, to start with, normally, as a “topmost” one, but when it is asked to be “called upon” as a tool for another web application, lots of surprises can happen. Our surprise in this integration above, a bit different to a lot we do, was …

the Earth Scanner performs well in a popup window … but …
the Earth Scanner does not perform well in an iframe

… we guess, because of those calculations for the variables screenwidth and screenheight which are so crucial to the scrolling required for that Earth Scanner.

At first we thought we’d just whack into a popup window from the Missing Two host, a URL to the Earth Scanner relevant to the two places in the Missing Two web application. But then we had some time to think about it, and remembered how the work of Earth Scanner Map Image Margin Tutorial introduced …

a sliver of margin applied to the map image (big img element) … and we wondered “who owns that sliver?” … so, in case it was the document.body element, as we hoped, we’d try …
img element onclick event arrangement amendment …
document.getElementById('myimg').onclick=function(event) { event.stopPropagation(); movesallowed=false; gmovesallowed=false; if (gdefv != '') { askfor=ourprompt(event,'Earth Scanner - RJM Programming - February, 2024 ... ' + String.fromCharCode(10) + 'Thanks to https://github.com/nvkelso/natural-earth-raster/blob/master/50m_rasters/HYP_50M_SR_W/HYP_50M_SR_W.README.html ... ' + String.fromCharCode(10) + 'Currently top left of screen is (Longitude,Latitude) ' + '(' + eval(-180 + xp * 360 / 100) + ',' + eval(90 - yp * 180 / 100) + ') and bottom right is (' + eval(-180 + screenlong + xp * 360 / 100) + ',' + eval(90 - screenlat - yp * 180 / 100) + ') and around the middle is (' + eval(-180 + eval(screenlong / 2) + xp * 360 / 100) + ',' + eval(90 - eval(screenlat / 2) - yp * 180 / 100) + ').' + String.fromCharCode(10) + 'Where do you want middle of screen to be in terms of Longitude,Latitude? Suffix with space to show meridians and/or prefix with space to not show meridians.', gdefv); gdefv=''; } else { askfor=ourprompt(event,'Earth Scanner - RJM Programming - February, 2024 ... ' + String.fromCharCode(10) + 'Thanks to https://github.com/nvkelso/natural-earth-raster/blob/master/50m_rasters/HYP_50M_SR_W/HYP_50M_SR_W.README.html ... ' + String.fromCharCode(10) + 'Currently top left of screen is (Longitude,Latitude) ' + '(' + eval(-180 + xp * 360 / 100) + ',' + eval(90 - yp * 180 / 100) + ') and bottom right is (' + eval(-180 + screenlong + xp * 360 / 100) + ',' + eval(90 - screenlat - yp * 180 / 100) + ') and around the middle is (' + eval(-180 + eval(screenlong / 2) + xp * 360 / 100) + ',' + eval(90 - eval(screenlat / 2) - yp * 180 / 100) + ').' + String.fromCharCode(10) + 'Where do you want middle of screen to be in terms of Longitude,Latitude? Suffix with space to show meridians and/or prefix with space to not show meridians.', ''); } if (('' + askfor).replace('(','').replace(')','').replace('[','').replace(']','').indexOf(',') != -1) { ameridian=''; acircleoflatitude=''; enforcedlong=false; enforcedxp=-999; } movesallowed=true; gmovesallowed=true; };
… augmented by …
positive action around the “equivalent of document.body onload event” for the Earth Scanner …
var thecss=''; var earth_scanner_css=location.search.split('css=')[1] ? (decodeURIComponent(location.search.split('css=')[1].split('&')[0]).replace(/\+/g,' ')) : ''; thecss=earth_scanner_css; var atendest='<input type=hidden id=posturl style=display:none; value=""></input><input type=button id=dbutton onclick=checkforstt(); style=display:none;></input>'; var atend='<br><br><div id=dc><canvas title="" id=ourcanvas width=' + ('' + eval(-15 + (window.orientation == 0 ? window.screen.height: window.screen.width)) + 'px').replace('pxpx','').replace('px','') + ' height=660 style="width:' + ('' + eval(-15 + (window.orientation == 0 ? window.screen.height: window.screen.width)) + 'px').replace('pxpx','px') + ';height:660px;border:1px solid red;background-color:' + bcol + ';' + extrastyle + '"></canvas></div><div id=xdscriptstuff></div><div id=xdstylestuff></div><textarea id=myta style=display:none; value=""></textarea><iframe onload=scranal(this); id=scrmytaif style=display:none; src=></iframe><iframe onload=styanal(this); id=stymytaif style=display:none; src=></iframe><iframe class="spag" scrolling="no" data-onload="iifopen(this);" id="cbi" frameborder="0" style="position:fixed;top:0px;left:150px;width:173px;height:218px;margin-top:-204px;display:none;" src="/HTMLCSS/client_browsing.htm?straighttext=312160562686"></iframe><textarea id=result1 style=display:none;></textarea><textarea id=result2 style=display:none;></textarea>' + exdstylestuff + exdscriptstuff + atendest; var parentiframe=''; var iol=''; if (window.opener) { var pu=window.opener.document.URL; if (pu.indexOf('#') == -1 && ('' + window.opener.location.hash).replace(/^null/g,'').replace(/^undefined/g,'') != '') { pu+=('#' + ('' + window.opener.location.hash)).replace(/^\#\#/g, '#'); } thecss+='display:block;'; parentiframe='<br><iframe id=mtif style="width:100%;height:800px;z-index:987;margin:0 0 0 0;margin-left:10px;margin-top:10px;background-color:rgba(0,0,255,0.5);" src="' + pu + '"></iframe><div id=dhiddens style=display:none;><div id=goagain></div><input type=hidden id=ltf value=></input><input type=hidden id=lgf value=></input><input type=hidden id=ltt value=></input><input type=hidden id=lgt value=></input><div id=slong></div><iframe id=niframe src=></iframe></div>'; iol=' onload="document.body.onclick=function(){ document.getElementById(' + "'myimg'" + ').style.display=document.getElementById(' + "'myimg'" + ').style.display.replace(' + "'block','NONE'" + ').replace(' + "'none','block'" + ').replace(' + "'NONE','none'" + '); if (1 == 2) { document.getElementById(' + "'dstyle'" + ').style.display=document.getElementById(' + "'dstyle'" + ').style.display.replace(' + "'visible','HIDDEN'" + ').replace(' + "'hidden','visible'" + ').replace(' + "'HIDDEN','hidden'" + '); } if (document.getElementById(' + "'myimg'" + ').style.display == ' + "'none'" + ') { window.scrollTo(0,0); document.body.style.backgroundColor=' + "'rgba(255,0,0,0.5)'" + '; } else { window.scrollTo(cspx, cspy); document.body.style.backgroundColor=' + "'rgba(0,0,255,0.5)'" + '; } } " '; setInterval(getcsp, 5000); } document.write("<img" + iol + " src='/HTMLCSS/HYP_50M_SR_W.jpg' id=myimg width=" + eval(zoomf * 10800) + " height=" + eval(zoomf * 5400) + " style='margin:0 0 0 0;margin-left:10px;margin-top:10px;" + thecss + "'></img><div id=dstyle style=visibility:visible;></div><input id=sdtitle type=hidden value='Earth Scanner'></input><input id=sdtext type=hidden value='Earth Scanner - RJM Programming'></input><input id=sdurl type=hidden value='" + document.URL.split('#')[0] + ('' + location.hash).replace(/^null/g,'').replace(/^undefined/g,'') + "'></input><iframe scrolling=no farmeborder=0 style='z-index:3456;position:fixed;top:55px;left:15px;width:30px;height:24px;' onload='storeshare(this);' src='/HTMLCSS/web_share_api_test.html?emojize=128231'></iframe><input type=hidden id=itworked value=''></input><iframe onload=coordit(this); id=wif style=display:none;margin-left:50px; src='//wikipedia.org/wiki/Saint_George,_Antigua_and_Barbuda'></iframe><iframe onload=coordittwo(this); id=wiftwo style=display:none; src=></iframe><input type=hidden id=placegeo title='' value=''></input>" + atend + parentiframe);
… calling …
var cspx=0, cspy=0; function getcsp() { // Thanks to https://stackoverflow.com/questions/31712287/get-scroll-position-in-javascript var ourcspx = eval('' + (document.body.scrollX || document.body.scrollLeft || document.getElementsByTagName("html")[0].scrollLeft)); var ourcspy = eval('' + (document.body.scrollY || document.body.scrollTop || document.getElementsByTagName("html")[0].scrollTop)); if (ourcspx > 100) { cspx=ourcspx; cspy=ourcspy; } //document.title='cspx=' + cspx + ' and cspy=' + cspy + ' ourcspx=' + ourcspx + ' and ourcspy=' + ourcspy; }

… surprising us regarding how much could be done at the “child” to make this popup window arrangement be fitting into the integration so that …

user calls the “parent” Missing Two web application …
user fills in the two places … now a clickable details/summary “reveal” “Earth Scanner …” arrangement, if clicked …
opens new Earth Scanner popup window with the calling URL hosted in a popup window iframe element below it … so that …
clicking in the left hand “document.body” element’s “sliver” which might involve “user scrolling to”, to find (and yes, that is where the ownership lies, luckily) toggles the Earth Scanner topmost with Missing Two “clone” topmost …
with the scrolling remembered (our testing shows … “for the main part”) … or the user can choose to …
close the popup window in order to fall back to calling “parent” Missing Two web application window, only (still with the “Earth Scanner …” details/summary “reveal” arrangement showing)

Codewise …

a changed missing_two.html‘s “Missing Two” web application can now call the integrated …
and changed twenty fourth draft of the Earth Scanner web application

Previous relevant Earth Bearing Distance Missing Two Trip Geolocation Elevation Tutorial is shown below.

Earth Bearing Distance Missing Two Trip Geolocation Elevation Tutorial

Onto yesterday’s Earth Bearing Distance Missing Two Trip Geolocation Tutorial and its Geolocation progress we started the day with a different course of action to how we ended it. The day’s motivation was to automate a Place Name elevation knowledge in order to help with that …

What’s out there in the distance?

… thinking we talked about, first, at Earth Bearing Distance Missing Two Place Name and Horizon Tutorial.

We suspected that we were naive in our thinking because Google searches lead to nothing with our theory, that theory being that we could combine …

event event.DeviceMotionEvent’s event.accelerationIncludingGravity.z … perhaps the minimum such value detected … along with …
Circular Motion and Satellite Motion – Lesson 3 – Universal Gravitation … The Value of g … idea, thanks, that (where “d” is distance from centre of Earth, “G” and “M_earth” are constants, “g” is gravitational acceleration (typically, about 9.8 m/s² at sea level)) …
∴ d = Math.pow((G * M_earth) / g, 0.5) ∴ elevation = (Math.pow((G * M_earth) / g, 0.5) - EarthRadius_latitude)

… could derive for us a semi reliable elevation value. There’s theory, though, and then there’s empirical application, and we could not get the application of the former match the aims with the latter, but will leave you with our Javascript attempt via …

After abandoning this approach, sadly, later in the day some sporadically happier news was that we discovered that the Geolocation API can sometimes pass across a decent elevation value, which we applied as below into our code’s thinking in our changed missing_two.html‘s “Missing Two” web application.

Previous relevant Earth Bearing Distance Missing Two Trip Geolocation Tutorial is shown below.

Earth Bearing Distance Missing Two Trip Geolocation Tutorial

Okay, it’s the day where gobsmacked readers of Earth Bearing Distance Missing Two Trip Compass Tutorial and (all) users of its “Missing Two” web application can be relieved of their “gobsmackederhood“?! Yes …

on top of our Wikipedia way to glean Latitude and Longitude for a Place Name … today (oh, but the shame of it all, the shame, leaving it for so long … ~~oh, the shame of~~“okay, that’s it … pull yourself together”) we finally get around to …
“Here” Place Name based HTML5 Geolocation API (should the user be allowing Location Services (into their frightfully busy lives) for their web browser of use) … yayyyyyyyy!

… is flagged to the user via that top textbox’s “placeholder” blurb being adjusted (for 7 seconds) as a user focuses there via changed HTML …

<h1 id=myh1 style='display:block;'>Missing Two (<font size=1>optional</font> <span onclick="this.innerHTML=this.innerHTML.replace('to','From').replace('from','to').replace('From','from'); document.getElementById('ipn').focus(); " id=spfr title='Click me to toggle between from and to' style='cursor:pointer;'>from</span> <input onfocus='hereit(this,"");' title='Optionally semicolon separate an elevation affecting horizon distance used for Place Name/Bearing (where Compass app might show you this elevation value) input scenarios. Note that a Place Name/Distance scenario shows a Locality Distance Ring map. Append space for gyroscope bearing.' onblur='lkwk(this,"");' style='display:inline-block;width:280px;' placeholder='Place Name' id=ipn value='' type=text></input>) in Table Column <span data-onfocus="document.getElementById('semail').innerHTML='';" data-title='Email to (append a space to just show the table cell with the gradient)?' data-contenteditable=true data-onblur=preemail(this.innerHTML); onclick=emailit(''); id=semail title=Email>📧</span> <span data-onfocus="document.getElementById('semail').innerHTML='';" data-title='SMS to?' data-contenteditable=true data-onblur=preemail(this.innerHTML); onclick=toize(''); id=ssms title=SMS>📟</span><div id=dntable style=display:none;> <table border=1 id=ntable style="background-color:pink;display:inline-block;font-size:10px;"><tr><td>N</td></tr><tr><td>⬆</td></tr></table> <div style='display:inline-block;cursor:pointer;' id=arrowup title='To Portrait Up ... line up, parallel, with compass N to face North the ideal way' onclick='alert(this.title);'>⬆</div></div></h1>

… calling on new Javascript …

… and if the user types in the Here we are looking for …

… new Geolocation API Javascript code swings into action …

… into our changed missing_two.html‘s “Missing Two” web application.

What a programmer’s relief!

Previous relevant Earth Bearing Distance Missing Two Trip Compass Tutorial is shown below.

Earth Bearing Distance Missing Two Trip Compass Tutorial

The recent Earth Bearing Distance Missing Two Trip North Point Tutorial set up a …

mobile device “North point” additional functionality … and today …
more compass use helpers to guide user towards facing North … as well as …
allow for Degrees Minutes Seconds as alternative angular method of entry harnessing changed HTML … exemplified by …
Latitude (decimal degrees): <input title='' style='width:90px;display:inline-block;' onchange='this.style.backgroundColor="pink";cwhat[0]=false; cwhat[1]=false; if (!decided) { if (!cwhat[5]) { cwhat[5]=true; } if (!cwhat[4]) { cwhat[4]=true; } decided=true; } top.document.getElementById("ltf").value=this.value; ' onblur='this.style.backgroundColor="pink"; cwhat[0]=false; cwhat[1]=false; if (!decided) { if (!cwhat[5]) { cwhat[5]=true; } if (!cwhat[4]) { cwhat[4]=true; } decided=true; } top.document.getElementById("ltf").value=mdms(this.value,this); ' id=latf name=latf type=number onfocus='ati=0; atic=[]; atis=[];' onkeydown='couldbedms(event);' min=-90.0000000 max=90.0000000 step=0.0000010 value='0.0000000'></input><br>
… helped out by new Javascript …
var ati=0, atis=[], atic=[]; function mdms(tvis, otvis) { var altvl=0.0, dvr=1.0, isv=0; if (eval('' + atic.length) >= 1) { //alert('ov=' + otvis.value + ' and atic[0]=' + atic[0]); if (atic[0].indexOf('-') != -1 && otvis.value.indexOf('-') == -1) { isv++; } else if (atic[0].indexOf('+') != -1 && otvis.value.indexOf('+') == -1) { isv++; } else if (eval('' + atis.length) >= 2) { if (eval('' + atis[1]) > 60) { isv++; } } } if (eval('' + atic.length) > 1) { //alert('Here ' + atic.length + ' last is=' + atic[eval(-1 + atic.length)]); for (var ijh=0; ijh<atic.length; ijh++) { if (atic[ijh].trim() != '') { isv++; if (atic[0].indexOf('-') != -1) { altvl-=eval(eval('' + dvr) * eval(atic[ijh].replace('-',''))); } else { altvl+=eval(eval('' + dvr) * eval(atic[ijh].replace('-',''))); } //alert('Here ' + altvl); dvr/=60.0; } } if (isv > 1) { tvis='' + altvl; otvis.value='' + altvl; } } ati=0; atic=[]; atis=[]; return tvis; } function idms(otvis) { var altvl=0.0, dvr=1.0, isv=0; if (eval('' + atic.length) >= 1) { //alert('Ov=' + otvis.value + ' and Atic[0]=' + atic[0]); if (atic[0].indexOf('-') != -1 && otvis.value.indexOf('-') == -1) { isv++; } else if (atic[0].indexOf('+') != -1 && otvis.value.indexOf('+') == -1) { isv++; } else if (eval('' + atis.length) >= 2) { if (eval('' + atis[1]) > 60) { isv++; } } } if (eval('' + atic.length) > 1) { //alert('here ' + atic.length + ' last is=' + atic[eval(-1 + atic.length)]); for (var ijh=0; ijh<atic.length; ijh++) { if (atic[ijh].trim() != '') { isv++; if (atic[0].indexOf('-') != -1) { altvl-=eval(eval('' + dvr) * eval(atic[ijh].replace('-','').replace('+',''))); } else { altvl+=eval(eval('' + dvr) * eval(atic[ijh].replace('-','').replace('+',''))); } //alert('here ' + altvl); dvr/=60.0; } } if (isv > 1) { otvis.value='' + altvl; } } ati=0; atic=[]; atis=[]; return otvis; } function couldbedms(event) { var wasc=''; if (eval('' + event.keyCode) == 69 || eval('' + event.keyCode) == 78 || eval('' + event.keyCode) == 87 || eval('' + event.keyCode) == 83 || eval('' + event.keyCode) == 187 || eval('' + event.keyCode) == 189 || eval('' + event.keyCode) == 190 || (eval('' + event.keyCode) >= 48 && eval('' + event.keyCode) <= 57)) { if (ati == 0) { atis=[]; atis.push(0); atic.push(''); } else if (ati < 0) { ati=0; } ati++; atis[eval(-1 + atis.length)]=ati; if (eval('' + event.keyCode) == 87 || eval('' + event.keyCode) == 83) { if (atic[0].indexOf('-') == -1) { wasc=atic[0]; atic[0]='-' + wasc; } } else if (eval('' + event.keyCode) == 69 || eval('' + event.keyCode) == 78) { if (atic[0].indexOf('+') == -1) { wasc=atic[0]; atic[0]='+' + wasc; } } else if (eval('' + event.keyCode) != 187) { atic[eval(-1 + atic.length)]+=String.fromCharCode(eval(eval('' + event.keyCode) % 144)); } } else { ati=-1; if (eval('' + event.keyCode) >= 65 && eval('' + event.keyCode) <= 90) { atis.push(eval('' + event.keyCode)); } else { atis.push(0); } atic.push(''); } }

… improving the functionality and ease of use of our changed missing_two.html‘s “Missing Two” web application when using a mobile platform.

Previous relevant Earth Bearing Distance Missing Two Trip North Point Tutorial is shown below.

Earth Bearing Distance Missing Two Trip North Point Tutorial

We build on the recent Earth Bearing Distance Missing Two Trip Tap Orientation Tutorial and help out those “what’s out there in the distance” dreamers of Earth Bearing Distance Missing Two Trip Details Orientation Tutorial by, today adding a “North point” (HTML table element) to …

today’s changed missing_two.html‘s Missing Two live run that is affected, but two other web applications as per …
today’s changed yaw_etc.html‘s Device Orientation live run … and …

… on some mobile platforms, such as the iOS iPad we tested, adding compass like new functionality, as per the new HTML …

<h1 id=myh1 style='display:block;'>Missing Two (<font size=1>optional</font> <span onclick="this.innerHTML=this.innerHTML.replace('to','From').replace('from','to').replace('From','from'); document.getElementById('ipn').focus(); " id=spfr title='Click me to toggle between from and to' style='cursor:pointer;'>from</span> <input title='Optionally semicolon separate an elevation affecting horizon distance used for Place Name/Bearing (where Compass app might show you this elevation value) input scenarios. Note that a Place Name/Distance scenario shows a Locality Distance Ring map. Append space for gyroscope bearing.' onblur='lkwk(this);' style='display:inline-block;width:280px;' placeholder='Place Name' id=ipn value='' type=text></input>) in Table Column <span data-onfocus="document.getElementById('semail').innerHTML='';" data-title='Email to (append a space to just show the table cell with the gradient)?' data-contenteditable=true data-onblur=preemail(this.innerHTML); onclick=emailit(''); id=semail title=Email>📧</span> <span data-onfocus="document.getElementById('semail').innerHTML='';" data-title='SMS to?' data-contenteditable=true data-onblur=preemail(this.innerHTML); onclick=toize(''); id=ssms title=SMS>📟</span><div id=dntable style=display:none;> <table border=1 id=ntable style="background-color:pink;display:inline-block;font-size:10px;"><tr><td>N</td></tr><tr><td>⬆</td></tr></table> ⬆</div></h1>

… and Javascript …

var wasthisso='' + (screen.msOrientation || screen.mozOrientation || (screen.orientation || {}).type); //"portrait"; var wasangle=eval(180 - eval('' + window.orientation)); if (1 == 1) { window.addEventListener("orientationchange", function() { // Announce the new orientation number wasangle=eval(180 - eval('' + window.orientation)); var thisso='' + screen.msOrientation || screen.mozOrientation || (screen.orientation || {}).type; if (('' + thisso) == 'undefined') { var mql=window.matchMedia("(orientation: portrait)"); // If there are matches, we're in portrait if (mql.matches) { thisso="Portrait"; // Portrait orientation } else { thisso="Landscape"; // Landscape orientation } } if (thisso != wasthisso) { wasthisso=thisso; //alert('ori'); } }, false); } if (window.DeviceOrientationEvent) { if (1 == 2) { alert(1); } // Listen for orientation changes ... thanks to https://davidwalsh.name/orientation-change // Listen for the deviceorientation event and handle the raw data window.addEventListener('deviceorientation', function(eventData) { // gamma is the left-to-right tilt in degrees, where right is positive if (1 == 2) { alert(11); } if (document.getElementById('ipn')) { //if (('' + document.getElementById('ipn').placeholder).indexOf('Append space and face north for gyroscope bearing.') == -1) { if (('' + document.getElementById('ipn').placeholder).indexOf(' and ') == -1) { document.getElementById('ipn').className='ph'; document.getElementById('ipn').placeholder+='. Append space and portrait face north for gyroscope bearing.'; document.getElementById("myviewport").setAttribute("content", "width=device-width, initial-scale=1.5, minimum-scale=0.1, maximum-scale=8, user-scalable=yes"); setTimeout(asafn, 5000); } } //eventData.absolute=true; var eventDataalpha = eval(360.0 - eval('' + eventData.alpha)); // lalpha)); // if (eventData.absolute !== true && +eventData.webkitCompassAccuracy > 0 && +eventData.webkitCompassAccuracy < 50) { eventDataalpha = eval('' + eventData.webkitCompassHeading || 0); if (document.getElementById('dntable')) { document.getElementById('dntable').style.display='inline-block'; } } if (!datstart) { eventDataalpha-=initial_yaw; } tiltLeftToRight = eval('' + eventData.gamma); // beta is the front-to-back tilt in degrees, where front is positive tiltFrontToBack = eval('' + eventData.beta); // alpha is the compass direction the device is facing in degrees lastalpha='' + eventData.alpha; // lalpha; // dorbrg = eval('' + eventDataalpha); //compassHeading(eval('' + eventDataalpha), tiltFrontToBack, tiltLeftToRight); if (1 == 2) { alert(dorbrg); } if (document.URL.indexOf('aleJUNKrt=') != -1) { alert(dorbrg); } if (document.URL.indexOf('upJUNKdate=') != -1 || (fplacen != '' && tplacen == '')) { if (eventData.absolute || 1 == 1) { //document.getElementById('brg').value='' + eval(eval(540.0 - eval('' + dorbrg)) % 360.0); //document.getElementById('brg').value='' + eval(eval(720.0 - eval('' + dorbrg)) % 360.0); //document.getElementById('brg').value='' + dorbrg; if (eval(dcnt % 10) == 0) { document.getElementById('brg').value='' + eval(eval(720.0 + eval('' + dorbrg)) % 360.0); document.getElementById('brg').style.backgroundColor='yellow'; } dcnt++; } } if (datstart && (fplacen != '' && tplacen == '')) { datstart=false; //initial_yaw=eval(360.0 - eval('' + lalpha)); //eventData.alpha)); //alert('0:' + initial_yaw); if (!eventData.absolute) { initial_yaw=eval(360.0 - eval('' + eventData.alpha)); // lalpha)); // } //alert('' + initial_yaw); initial_pitch=Math.round(tiltFrontToBack); initial_roll=Math.round(tiltLeftToRight); //alert(initial_yaw + ',' + initial_pitch + ',' + initial_roll); } if (document.getElementById('ntable')) { var ts=450; if (wasangle != 0) { ts+=wasangle; } try { document.getElementById('ntable').style.webkitTransform = ("rotate(" + eval(ts - Math.round(dorbrg)) + "deg)"); } catch(e10) { } try { document.getElementById('ntable').style.MozTransform = ("rotate(" + eval(ts - Math.round(dorbrg)) + "deg)"); } catch(e1000) { } try { document.getElementById('ntable').style.msTransform = ("rotate(" + eval(ts - Math.round(dorbrg)) + "deg)"); } catch(e100) { } try { document.getElementById('ntable').style.OTransform = ("rotate(" + eval(ts - Math.round(dorbrg)) + "deg)"); } catch(e10000) { } try { document.getElementById('ntable').style.transform = ("rotate(" + eval(ts - Math.round(dorbrg)) + "deg)"); } catch(e1) { } } handleOrientationEvent(tiltFrontToBack, tiltLeftToRight, dorbrg, eventData.absolute); if ((fplacen != '' && tplacen == '') && document.getElementById('ipn')) { //if (('' + document.getElementById('ipn').placeholder).indexOf('Append space and face north for gyroscope bearing.') != -1) { if (('' + document.getElementById('ipn').placeholder).indexOf('Append space and ') != -1) { document.getElementById('ipn').style.backgroundColor='#f0f0f0'; //document.getElementById('ipn').placeholder=document.getElementById('ipn').placeholder.split('Append space and face north for gyroscope bearing.')[0] + ' Now swivel to direction of interest then tap yellow textbox.'; document.getElementById('ipn').placeholder=document.getElementById('ipn').placeholder.split('Append space and ')[0] + ' Now swivel to direction of interest then tap yellow textbox.'; document.getElementById("myviewport").setAttribute("content", "width=device-width, initial-scale=1.2, minimum-scale=0.1, maximum-scale=8, user-scalable=yes"); //window.scrollBy(0,50); //location.href='#brg'; } } }, false); }

Previous relevant Earth Bearing Distance Missing Two Trip Tap Orientation Tutorial is shown below.

Earth Bearing Distance Missing Two Trip Details Tap Tutorial

Earth Bearing Distance Missing Two Trip Tap Orientation Tutorial

That window.DeviceOrientationEvent event work of the recent Earth Bearing Distance Missing Two Trip Details Orientation Tutorial was missing an important point. We learnt about this point by debugging on an iOS (iPhone 7) Google Chrome web browser, as we showed with yesterday’s Google Chrome on iOS Web Browser Debug Tutorial. That tutorial’s finding lead us to the Google search for …

ERROR NotAllowedError Requesting device

… and onto the excellent How to requestPermission for devicemotion and deviceorientation events in iOS 13+ …

One more thing

One more thing to keep in mind is that requestPermission could only be called on a user gesture (e.g. click). This is reasonable UX too as we would want to tell users why we are asking for such permissions and let them confirm before prompting them so that they see it coming.

Otherwise you would get this error:

Console error: NotAllowedError: Requesting device orientation or motion access requires a user gesture to prompt

… where we needed to shift our oft-used document.body onload event code placement thinking to allow for this thinking, plus the provision of a button for the user to tap, as required, should the “permission” popup window be required to seek permission to, effectively, access that device’s gyroscope measurements via that window.DeviceOrientationEvent and/or window.DeviceMotionEvent event(s).

This is a similar Apple requirement, as it applies to iOS playing audio files, which we have mentioned quite a bit at this blog. One could say …

We should have known.

… and luckily two is too polite to say …

You blockhead!

… to which we are infinitely grateful, and will install for the rest of the day, that …

Two is our favourite number (for the rest of today, that is).

But it’s not only …

today’s changed missing_two.html‘s Missing Two live run that is affected, but two other web applications as per …
today’s changed yaw_etc.html‘s Device Orientation live run … and …
today’s changed simon_says.html‘s Simon Says live run

… for you to try for yourself, perhaps there on your mobile device with an accessible gyroscope on a compatible web browser such as Google Chrome (or others, now) on iOS.

Previous relevant Earth Bearing Distance Missing Two Trip Details Orientation Tutorial is shown below.

Earth Bearing Distance Missing Two Trip Details Orientation Tutorial

Humans, particularly before the advent of the mobile devices, were probably (as a whole) more skilled regarding navigation via “landmarks” or “sunmarks” or “moonmarks” working out …

In which direction is North?

Well, the irony here, today, is that the better you have been hanging onto these skills you are, the better you can use our new …

mobile phone …
containing a gyroscope … but …
not an accessible compass (or if so, the knowledge of where North is becomes superfluous below) …
using a compatible web browser such as Google Chrome …
a good indication your scenario is compatible being that at some stage you answer “Allow” to a prompt as below …

… at some point … using …
today’s changed missing_two.html‘s live run link modifications … using …
1. window.DeviceOrientationEvent event … and perhaps you could use …
2. window.DeviceMotionEvent event
…
software detection to offer that user …

… the chance to mix technology with human navigational instincts to answer that perennial question similarly asked in Earth Bearing Distance Missing Two Place Name and Horizon Tutorial …

What’s out there in the distance?

… via …

using a compatible web browser such as Google Chrome … live run …
point your mobile phone in portrait to North (or at least arrange to do this just before tapping the Done link in step below) …
enter in a Place Name into that top textbox (to which, it’s good, as known, to append semicolon elevation) and add a space, and because you are on a mobile device, tap the Done link
bearing text will start being updated with bearing of your mobile device portrait mode top pointing direction … so …
when you’ve swivelled the mobile device to be pointing (in portrait) to the (What’s out there in the distance?) direction of interest, tap that yellow bearing textbox, then tap the Done link … resulting in …
Google Chart Map Chart showing your Place Name and (the calculated) Horizon Position in that direction of your choosing

… meaning the combination of …

your mobile device’s gyroscope’s angle measuring talent (akin to those theodolite talents Land Surveyors are using) … and …
your navigational talents knowing where North is

… save you having to know that awkward “bearing” (in degrees) textbox answer to What’s out there in the distance? Perhaps see what we mean viewing today’s animated GIF presentation.

Onto yesterday’s Earth Bearing Distance Missing Two Trip Details Styling Tutorial and since the last time we ventured into the wooooorrrrrlllldddd of “window.DeviceOrientationEvent” logic we’ve gotten great help Javascript coding for the permissions side to the handling of this event, as per …

if ((navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i) || document.URL.indexOf('alert=') != -1) && document.URL.toLowerCase().indexOf('https:') != 0) { location.href=document.URL.replace('http:','https:') + '&random=' + Math.floor(Math.random() * 174765654); } if ((navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i) || document.URL.indexOf('update=') != -1) && document.URL.toLowerCase().indexOf('https:') != 0) { location.href=document.URL.replace('http:','https:') + '&random=' + Math.floor(Math.random() * 174765654); } // Thanks to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await and // https://gist.github.com/Ajasra/ddd616505013a4309c0dda8a8ba626cb async function myfunction() { console.log('Inside of myfunction'); //alert(0); if (window.DeviceOrientationEvent && typeof(DeviceOrientationEvent.requestPermission) === "function") { //alert(4); const permissionState = await DeviceOrientationEvent.requestPermission().then(response => { if (response === 'granted') { if (1 == 2) { alert('GrAnted'); } //window.addEventListener('deviceorientation', OrientationHandler, true); dorh(); } else if (result.state === 'prompt') { if (1 == 2) { alert("Need prompt!"); } } else { if (1 == 2) { alert("Not Supported!"); } } }).catch(console.error); //if (permissionState === "granted") { // alert('granted'); //} else { // alert('denied'); //} } else if (window.DeviceOrientationEvent) { //alert(44); dorh(); } if (window.DeviceMotionEvent && typeof(DeviceMotionEvent.requestPermission) === "function") { //alert(24); const permissionStateM = await DeviceMotionEvent.requestPermission().then(response => { if (response === 'granted') { if (1 == 2) { alert('GranTed'); } window.addEventListener('devicemotion', function(event) { lalpha='' + event.rotationRate.alpha; }); //window.addEventListener('deviceorientation', OrientationHandler, true); } else if (result.state === 'prompt') { if (1 == 2) { alert("NeeD prompt!"); } } else { if (1 == 2) { alert("NoT Supported!"); } } }).catch(console.error); //if (permissionStateM === "granted") { // alert('Granted'); //} else { // alert('Denied'); //} } else if (window.DeviceMotionEvent) { //alert(244); window.addEventListener('devicemotion', function(event) { lalpha='' + event.rotationRate.alpha; }); } } // Here we wait for the myfunction to finish // and then returns a promise that'll be waited for aswell // It's useless to wait the myfunction to finish before to return // we can simply returns a promise that will be resolved later // Also point that we don't use async keyword on the function because // we can simply returns the promise returned by myfunction function start() { return myfunction(); } // Call start (async() => { console.log('before start'); await start(); console.log('after start'); })(); var degtorad = Math.PI / 180; // Degree-to-Radian conversion ... thanks to https://www.w3.org/TR/orientation-event/#worked-example function dorh() { //let laSensor = new LinearAccelerationSensor({frequency: 60}); //laSensor.addEventListener('reading', e => { // console.log("Linear acceleration along the X-axis " + laSensor.x); // console.log("Linear acceleration along the Y-axis " + laSensor.y); // console.log("Linear acceleration along the Z-axis " + laSensor.z); //}); //laSensor.start(); //window.addEventListener('devicemotion', function(event) { // alert(event.rotationRate.alpha + ' m/s2'); //}); if (1 == 3) { window.addEventListener("orientationchange", function() { // Announce the new orientation number var thisso='' + screen.msOrientation || screen.mozOrientation || (screen.orientation || {}).type; if (('' + thisso) == 'undefined') { var mql=window.matchMedia("(orientation: portrait)"); // If there are matches, we're in portrait if (mql.matches) { thisso="Portrait"; // Portrait orientation } else { thisso="Landscape"; // Landscape orientation } } if (thisso != wasthisso) { wasthisso=thisso; alert('ori'); } }, false); } if (window.DeviceOrientationEvent) { if (1 == 2) { alert(1); } // Listen for orientation changes ... thanks to https://davidwalsh.name/orientation-change // Listen for the deviceorientation event and handle the raw data window.addEventListener('deviceorientation', function(eventData) { // gamma is the left-to-right tilt in degrees, where right is positive if (1 == 2) { alert(11); } if (document.getElementById('ipn')) { //if (('' + document.getElementById('ipn').placeholder).indexOf('Append space and face north for gyroscope bearing.') == -1) { if (('' + document.getElementById('ipn').placeholder).indexOf(' and ') == -1) { document.getElementById('ipn').className='ph'; document.getElementById('ipn').placeholder+='. Append space and portrait face north for gyroscope bearing.'; document.getElementById("myviewport").setAttribute("content", "width=device-width, initial-scale=1.5, minimum-scale=0.1, maximum-scale=8, user-scalable=yes"); setTimeout(asafn, 5000); } } //eventData.absolute=true; var eventDataalpha = eval(360.0 - eval('' + eventData.alpha)); // lalpha)); // if (!datstart) { eventDataalpha-=initial_yaw; } tiltLeftToRight = eval('' + eventData.gamma); // beta is the front-to-back tilt in degrees, where front is positive tiltFrontToBack = eval('' + eventData.beta); // alpha is the compass direction the device is facing in degrees lastalpha='' + eventData.alpha; // lalpha; // dorbrg = eval('' + eventDataalpha); //compassHeading(eval('' + eventDataalpha), tiltFrontToBack, tiltLeftToRight); if (1 == 2) { alert(dorbrg); } if (document.URL.indexOf('aleJUNKrt=') != -1) { alert(dorbrg); } if (document.URL.indexOf('upJUNKdate=') != -1 || (fplacen != '' && tplacen == '')) { if (eventData.absolute || 1 == 1) { //document.getElementById('brg').value='' + eval(eval(540.0 - eval('' + dorbrg)) % 360.0); //document.getElementById('brg').value='' + eval(eval(720.0 - eval('' + dorbrg)) % 360.0); //document.getElementById('brg').value='' + dorbrg; if (eval(dcnt % 10) == 0) { document.getElementById('brg').value='' + eval(eval(720.0 + eval('' + dorbrg)) % 360.0); document.getElementById('brg').style.backgroundColor='yellow'; } dcnt++; } } if (datstart && (fplacen != '' && tplacen == '')) { datstart=false; //initial_yaw=eval(360.0 - eval('' + lalpha)); //eventData.alpha)); //alert('0:' + initial_yaw); if (!eventData.absolute) { initial_yaw=eval(360.0 - eval('' + eventData.alpha)); // lalpha)); // } //alert('' + initial_yaw); initial_pitch=Math.round(tiltFrontToBack); initial_roll=Math.round(tiltLeftToRight); //alert(initial_yaw + ',' + initial_pitch + ',' + initial_roll); } handleOrientationEvent(tiltFrontToBack, tiltLeftToRight, dorbrg, eventData.absolute); if ((fplacen != '' && tplacen == '') && document.getElementById('ipn')) { //if (('' + document.getElementById('ipn').placeholder).indexOf('Append space and face north for gyroscope bearing.') != -1) { if (('' + document.getElementById('ipn').placeholder).indexOf('Append space and ') != -1) { document.getElementById('ipn').style.backgroundColor='#f0f0f0'; //document.getElementById('ipn').placeholder=document.getElementById('ipn').placeholder.split('Append space and face north for gyroscope bearing.')[0] + ' Now swivel to direction of interest then tap yellow textbox.'; document.getElementById('ipn').placeholder=document.getElementById('ipn').placeholder.split('Append space and ')[0] + ' Now swivel to direction of interest then tap yellow textbox.'; document.getElementById("myviewport").setAttribute("content", "width=device-width, initial-scale=1.2, minimum-scale=0.1, maximum-scale=8, user-scalable=yes"); //window.scrollBy(0,50); //location.href='#brg'; } } }, false); } } var handleOrientationEvent = function(tiltFrontToBack, tiltLeftToRight, dorbrg, absis) { // do something amazing if (1 == 2) { alert(dorbrg); } if (document.URL.indexOf('alJUNKert=') != -1) { alert(dorbrg); } if (document.URL.indexOf('upJUNKdate=') != -1 || (fplacen != '' && tplacen == '')) { if (absis || 1 == 1) { //document.getElementById('brg').value='' + eval(eval(540.0 - eval('' + dorbrg)) % 360.0); //document.getElementById('brg').value='' + eval(eval(720.0 - eval('' + dorbrg)) % 360.0); //document.getElementById('brg').value='' + dorbrg; if (eval(dcnt % 10) == 0) { document.getElementById('brg').value='' + eval(eval(720.0 + eval('' + dorbrg)) % 360.0); document.getElementById('brg').style.backgroundColor='yellow'; } dcnt++; } } }; function asafn() { if (document.getElementById('ipn')) { //if (('' + document.getElementById('ipn').placeholder).indexOf('Append space and face north for gyroscope bearing.') == -1) { if (('' + document.getElementById('ipn').placeholder).indexOf('Append space and portrait face north for ') != -1) { document.getElementById('ipn').placeholder=document.getElementById('ipn').placeholder.split('Append space and ')[0] + 'Append space and portrait face north onto ;elevation(m)?'; setTimeout(asafn, 5000); } else if (('' + document.getElementById('ipn').placeholder).indexOf('Append space and ') != -1) { document.getElementById('ipn').placeholder=document.getElementById('ipn').placeholder.split('Append space and ')[0] + 'Append space and portrait face north for horizon bearing.'; setTimeout(asafn, 5000); } } }

Today we added a meta viewport, and for the first time that we can recall, we started styling the “placeholder” of that top textbox as per (thanks to https://stackoverflow.com/questions/44679144/how-to-make-input-placeholder-font-size-different-from-input-value-font-size) …

<meta id="myviewport" name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.1, maximum-scale=8, user-scalable=yes" > <style> summary { background-color: #f0f0f0; } .ph::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: red; opacity: 1; /* Firefox */ font-size: 8px; } .ph:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: red; font-size: 8px; } .ph::-ms-input-placeholder { /* Microsoft Edge */ color: red; font-size: 8px; } </style>

Previous relevant Earth Bearing Distance Missing Two Trip Details Styling Tutorial is shown below.

Earth Bearing Distance Missing Two Trip Details Styling Tutorial

On top of the recent Earth Bearing Distance Missing Two Trip Details Reveal Tutorial, today we discuss styling strategies a little. When and where do you style your webpage? We think you do it all along, but for us, we like “little spurts” at it too, so we might let a web application project progress in a practical approach not worrying about aesthetics too much until we do a “little spurt” bubble of activity regarding styling. Often times ideas for that can be developed away from the laptop you might write the code on. For example, today’s changed missing_two.html‘s live run link modifications were directed by an email we sent to ourselves …

Jobs

Robert Metcalfe
Sun, Sep 12, 8:16 PM (5 days ago)
to me

Vertical-align: top
I frame too high
To after horizon leaves horizon I frame title
Lat long display online-block
Coloured summary background colour
Th header cells text-align center

Sent from my iPhone

… “mind map” type ideas that may or may not be followed through to fruition, depending on …

where possible
where feasible
where wise

This strategy above is for your small projects, else if much bigger, or involving multiple people to produce, or being written to a specification, or being written for a third party, you’d be much better placed to think about styling issues from the start, in a plan. You might want to use wireframes?

On these small projects we also don’t mind just involving the one HTML (or PHP writing HTML) source file and use a combination of …

inline <style> CSS styling goes here </style> within the webpage <head></head> header section … or …
in amongst the HTML via “style” attribute … eg. <p id=”myp” style=” CSS styling for p element goes here “> Content for p element goes here </p>

… or Javascript DOM code such as …

document.getElementById('myp').style.fontSize='18px';

… and it is very rare, with these small projects, though very good in organizational terms, to write all your CSS styling in an external CSS (styling file) arrangement such as …

<head> <link href='./my_styling.css' rel='stylesheet' type='text/css'> </head>

There are many ways to … well, you know what I mean … a cat! Not only were “no cats harmed in the making of this tutorial” but no cats were even roughed up?!

Previous relevant Earth Bearing Distance Missing Two Trip Details Reveal Tutorial is shown below.

Earth Bearing Distance Missing Two Trip Details Reveal Tutorial

Yes, there’s only so long you can use the wonderful details/summary HTML element combination as with the recent Earth Bearing Distance Missing Two Trip Details Summary Tutorial‘s …

we often use to “reveal”, or not, webpage “real estate”, but today we default to the “open” look

… just using that “open” element mode of use, and not want to make use of its “reveal” talents. How so? Well, a bit like the dropdown element, we find that the details/summary combination allows for the containment of lots of data for a controlled amount of “reveal”. In this day and age of responsiveness to limited screen sizes, that is a big advantage.

Today, then, with our changed missing_two.html‘s live run link, we have …

that first (at first) “open” details/summary nesting a Google Chart Map Chart iframe summarizing the entirety of your Trip … today …
festooned with up arrow emoji (⬆) “button” links which, when clicked, zero in (into a new topmost “only open” details/summary nesting Google Chart Map Chart iframe set of data) on any one “leg” of your trip, displaying its own crow fly distance and Google Maps Directions information link, as well as new …
accommodation (🛌) links ala accommodation in Springwood, New South Wales Google image search style links

… to enhance a Trip Planner’s user experience. Perhaps best to explain a bit codewise is to say “follow the Javascript variable interesting in code below” …

Previous relevant Earth Bearing Distance Missing Two Trip Details Summary Tutorial is shown below.

Earth Bearing Distance Missing Two Trip Details Summary Tutorial

The recent Earth Bearing Distance Missing Two Locality Distance Ring Tutorial coalesced “From” Place name functionality for …

defined bearing … deriving horizon place
defined distance … deriving ring of positions … and today we consider …
Trip functionality thoughts via “To” Place name definitions supplementing the already entered “From” Place name

We say “Trip Details Summary” in our blog posting title today as a hint about how we present a nester of Google Chart Map Chart display data.

The details/summary HTML element combination we often use to “reveal”, or not, webpage “real estate”, but today we default to the “open” look and add Wikipedia links and crowfly distance and Google Maps Directions information into the summary tag, for extra interest with your Trip planning.

The user can access this functionality with our changed missing_two.html‘s live run link …

user enters “From” Place Name via new textbox … eg. “Lawson, New South Wales”
user enters “To” Place Name via new textbox … eg. “Katoomba”
user clicks/taps the “Fill” button
optionally the user can add more places to the Map Chart by adding more “From” and/or “To” Place Name definitions

Previous relevant Earth Bearing Distance Missing Two Locality Distance Ring Tutorial is shown below.

Earth Bearing Distance Missing Two Locality Distance Ring Tutorial

The corollary to yesterday’s Earth Bearing Distance Missing Two Place Name and Horizon Tutorial‘s …

locality and bearing derivation of a “place on horizon” position … is, today …
locality and distance derivation of a “locality distance ring” set of positions

… again, combining the geodata talents of Wikipedia and a Google Chart Map Chart, we figure.

And so a user accessing this functionality with our changed missing_two.html‘s live run link …

user enters “From” Place Name via new textbox … eg. “Lawson, New South Wales”
user enters “Distance” (eg. “5000.000” metres) and tabs out … we use the “onblur” event …
var dok=true; function dfillablemaybe(brgo) { if (!dok) { return ''; } var i, ourbrg=0.0, ourdist=0.0, j, dvlat='', dvlong=''; if (('' + brgo.value).replace(/0/g,'').replace('.','') != '') { //alert('356:' + document.getElementById('dist').value); if (('' + document.getElementById('dist').value).replace(/0/g,'').replace('.','') == '' || (fplacen != '' && tplacen == '')) { //alert(456); if (('' + document.getElementById('latt').value).replace(/0/g,'').replace('.','') == '' || (fplacen != '' && tplacen == '')) { //alert(556); if (('' + document.getElementById('longt').value).replace(/0/g,'').replace('.','') == '' || (fplacen != '' && tplacen == '')) { //alert(656); if (('' + document.getElementById('ssf').innerHTML) != '') { //alert(756); if (!viastart) { //document.getElementById('brg').focus(); document.getElementById('brg').value='0.0000001'; //brgo.focus(); } if (mu.indexOf('[051.5072,') != -1) { //alert(856); if (!viastart) { //alert(1); document.getElementById('ifill').click(); //alert(11); } mu=mu.replace('[051.5072,','[' + eval('' + document.getElementById('latt').value).toFixed(3) + ','); mu=mu.replace(',-00.1275,',',' + eval('' + document.getElementById('longt').value).toFixed(3) + ','); if (('' + brgo.value).indexOf('000.000') != -1) { //mu=mu.replace(encodeURIComponent('looking out North'), encodeURIComponent(('' + brgo.value).split('000.000')[0] + 'km Ring')); mu=mu.replace(',~LonDon~]',',~' + encodeURIComponent(fplacen + ' looking North') + '~]'); mu=mu.replace('=London','=' + encodeURIComponent(fplacen + (' ' + brgo.value).split('000.000')[0] + 'km Ring')); } else { mu=mu.replace(',~LonDon~]',',~' + encodeURIComponent(fplacen + ' looking North') + '~]'); mu=mu.replace('=London','=' + encodeURIComponent(fplacen + ' looking out North')); } //mu=mu.replace(',~LonDon~]',',~' + encodeURIComponent(fplacen + ' looking North') + '~]'); //mu=mu.replace('=London','=' + encodeURIComponent(fplacen + ' looking out North')); //alert('956:' + mu); //document.getElementById('hplacen').innerHTML='<input type=hidden name=fplacen value="' + mu + '"></input>'; //document.getElementById('tdmid').innerHTML='<iframe src="' + mu + '" style="width:100%;height:700px;"></iframe>'; if (viastart) { for (var dbrg=30; dbrg<=330; dbrg+=30) { //document.getElementById('brg').value='' + dbrg + '.0000000'; if (('' + document.getElementById('mysel').value) == '2') { ourbrg=eval(eval(540.0 + 180.0 + eval('' + document.getElementById(eles[2]).value)) % 360.0); } else { ourbrg=eval('' + document.getElementById(eles[2]).value); } ourbrg=eval('' + dbrg); for (j=eval(3 - eval(('' + document.getElementById('mysel').value))); j>=1; j--) { ourdist=eval('' + document.getElementById(eles[3]).value); //Let first point latitude be la1, ///longitude as lo1, //d be distance, //R as radius of Earth, //Ad be the angular distance i.e d/R and. //θ be the bearing, //Here is the formula to find the second point, when first point, bearing and distance is known: //latitude of second point = la2 = asin(sin la1 * cos Ad + cos la1 * sin Ad * cos θ), and //longitude of second point = lo2 = lo1 + atan2(sin θ * sin Ad * cos la1 , cos Ad – sin la1 * sin la2) dvlat='' + eval(eval(eval(180.0 / Math.PI) * Math.asin( Math.sin(eval(Math.PI / 180.0) * eval('' + document.getElementById(eles[0]).value)) * Math.cos(eval(eval('' + ourdist) / 6371000.0)) + Math.cos(eval(Math.PI / 180.0) * eval('' + document.getElementById(eles[0]).value)) * Math.sin(eval(eval('' + ourdist) / 6371000.0)) * Math.cos(eval(Math.PI / 180.0) * eval('' + ourbrg))))); //Let first point latitude be la1, //longitude as lo1, //d be distance, //R as radius of Earth, //Ad be the angular distance i.e d/R and //θ be the bearing, // longitude of second point = lo2 = lo1 + atan2(sin θ * sin Ad * cos la1 , cos Ad – sin la1 * sin la2) dvlong='' + eval(eval(180.0 / Math.PI) * eval(eval(eval(Math.PI / 180.0) * eval('' + document.getElementById(eles[1]).value)) + Math.atan2( eval(eval('' + Math.sin(eval(Math.PI / 180.0) * eval('' + ourbrg)) * eval('' + Math.sin(eval(eval('' + ourdist) / 6371000.0)))) * eval('' + Math.cos(eval(Math.PI / 180.0) * eval('' + document.getElementById(eles[0]).value)))), eval(eval('' + Math.cos(eval(eval('' + ourdist) / 6371000.0))) - eval(eval('' + Math.sin(eval(Math.PI / 180.0) * eval('' + document.getElementById(eles[0]).value)))) * eval('' + Math.sin(eval(Math.PI / 180.0) * eval('' + document.getElementById(eles[4]).value))))))); mu+=',[' + eval('' + dvlat).toFixed(3) + ',' + eval('' + dvlong).toFixed(3) + ',~' + dbrg + '~]'; } } document.getElementById('tdmid').innerHTML='<iframe src="' + mu + '" style="width:100%;height:700px;"></iframe>'; fplacen=''; } } } } } } } }
… logic of that occurrence to say it is this scenario and above … so …
set bearing to value “0.0000001” (ie. start the locality distance ring looking North)
we programmatically click the yellow “Fill” button
a Google Chart Map Chart is displayed with both …
- observer position … and this approximate calculated …
- locality distance ring set of positions at 30 degree intervals around the ring whose radius is the Distance value (in metres) entered by the user

Previous relevant Earth Bearing Distance Missing Two Place Name and Horizon Tutorial is shown below.

Earth Bearing Distance Missing Two Place Name and Horizon Tutorial

Yesterday’s Earth Bearing Distance Missing Two Place Name Tutorial left off with …

We hope so, and there is another reason for this preparatory work that will be explained tomorrow. Stay tuned!

Well, today’s “tomorrow”. Let me ask first, did you read our Compass iOS App Primer Tutorial? Well, the use of the Compass iOS (and am sure Android would have their own version of) mobile app fits into our scenario whereby …

we had occasion to be looking at a long distance view into the distance down a road both …
1. during the day … and also seeing …
2. lights at night
… which set us (being of the “where are we” looking curious set) wondering …
where are we looking?
whipping out the iPhone’s Compass app gave us all of …
1. bearing to distant view …
2. elevation in metres … interesting …
3. latitude, longitude of where we were (though we think we’ll get help from Wikipedia here, thanks)
… meaning …
we could offer the user of our changed missing_two.html‘s live run link the chance to involve data items 1 and 2 above directly and 3 (via Wikipedia) … to have it that …
1. user enters “From” Place Name via new textbox (and add the Compass app elevation (in metres) as a semicolon separated data item) … eg. “Lawson, New South Wales;740”
2. user enters “Bearing” (eg. “185” (off the Compass app)) and tabs out … we use the “onblur” event …
  var dok=true; function fillablemaybe(brgo) { if (('' + brgo.value).replace(/0/g,'').replace('.','') != '') { //alert('356:' + document.getElementById('dist').value); if (('' + document.getElementById('dist').value).replace(/0/g,'').replace('.','') == '' || (fplacen != '' && tplacen == '')) { //alert(456); if (('' + document.getElementById('latt').value).replace(/0/g,'').replace('.','') == '' || (fplacen != '' && tplacen == '')) { //alert(556); if (('' + document.getElementById('longt').value).replace(/0/g,'').replace('.','') == '' || (fplacen != '' && tplacen == '')) { //alert(656); if (('' + document.getElementById('ssf').innerHTML) != '') { //alert(756); if (!viastart) { dok=false; document.getElementById('dist').focus(); if (1 == 1) { // assume 2m elevation ... thanks to https://en.wikipedia.org/wiki/Horizon document.getElementById('dist').value='' + Math.floor(Math.pow(eval(eval(2.0 * eval('' + elev)) * 6371000.0), 0.5)) + '.000'; } else { document.getElementById('dist').value='5000.000'; } elev=2.0; brgo.focus(); } if (mu.indexOf('[051.5072,') != -1) { //alert(856); if (!viastart) { document.getElementById('ifill').click(); } mu=mu.replace('[051.5072,','[' + document.getElementById('latt').value + ','); mu=mu.replace(',-00.1275,',',' + document.getElementById('longt').value + ','); mu=mu.replace(',~LonDon~]',',~' + encodeURIComponent(fplacen + ' looking out at bearing ' + brgo.value + ' degrees towards horizon') + '~]'); mu=mu.replace('=London','=' + encodeURIComponent(fplacen + ' looking out at bearing ' + brgo.value + ' degrees towards horizon')); //alert('956:' + mu); //document.getElementById('hplacen').innerHTML='<input type=hidden name=fplacen value="' + mu + '"></input>'; document.getElementById('tdmid').innerHTML='<iframe src="' + mu + '" style="width:100%;height:700px;"></iframe>'; if (viastart) { fplacen=''; } } } } } } } }
  … logic of that occurrence to say it is this scenario and above … so compute …
3. the distance to horizon is computed via square root of two times elevation (in meters) times radius of earth (in meters) … then …
4. we programmatically click the yellow “Fill” button
5. a Google Chart Map Chart is displayed with both …
  1. observer position … and this approximate calculated …
  2. horizon position
  … to help you un-nut “where are we looking?” … we hope

… which you can see the gist of with today’s animated GIF presentation.

Bit like relaxed orienteering, would you say?!

Previous relevant Earth Bearing Distance Missing Two Place Name Tutorial is shown below.

Earth Bearing Distance Missing Two Place Name Tutorial

It’s often a good news story in I.T. when you can replace or supplement numbers with names (without being too nosy about it, that is!) And so, extending the functionality of our “Missing Two” web application talked about, last, with Earth Bearing Distance Missing Two Trip Share Tutorial we allow the user to enter in Place Names as an alternative to entering in the Latitude and Longitude co-ordinates of that place’s position on the earth, especially apt for any web application purporting to be helpful regarding “trip” functionality.

Being suckers for “the where of life” web applications out there, we’re tickled pink to be offering this “red zone” special extension to functionality, and all because you asked for it (well, that’s my story, and am sticking with it).

As we went along coding for this change, and implications of this into the future, we realized we needed to allow for two more (GET argument) data items to be catered for, the codelines below responsible for “reading them in” …

var fplacen=location.search.split('fplacen=')[1] ? (' ' + decodeURIComponent(location.search.split('fplacen=')[1].split('&')[0]).replace(/\+/g,' ')) : ''; var tplacen=location.search.split('tplacen=')[1] ? (' ' + decodeURIComponent(location.search.split('tplacen=')[1].split('&')[0]).replace(/\+/g,' ')) : '';

… and allowed for within the (static) HTML’s form element‘s HTML as per …

<h1 id=myh1 style='display:block;'>Missing Two (<font size=1>optional</font> <span id=spfr>from</span> <input onblur='lkwk(this);' style='display:inline-block;' placeholder='Place Name' id=ipn value='' type=text></input>) in a Table Column <span data-onfocus="document.getElementById('semail').innerHTML='';" data-title='Email to (append a space to just show the table cell with the gradient)?' data-contenteditable=true data-onblur=preemail(this.innerHTML); onclick=emailit(''); id=semail title=Email>📧</span> <span data-onfocus="document.getElementById('semail').innerHTML='';" data-title='SMS to?' data-contenteditable=true data-onblur=preemail(this.innerHTML); onclick=toize(''); id=ssms title=SMS>📟</span></h1>

… and …

… and populated via supportive “onload” event based Javascript DOM “Wikipedia (thanks) based” logic as per …

if (fplacen != '') { document.getElementById('ssf').innerHTML=fplacen; fplacen=''; } if (tplacen != '') { document.getElementById('sst').innerHTML=tplacen; tplacen=''; }

… as the incoming code paradigm, living with the outgoing paradigm’s work based on that “lkwk(this);” Javascript function …

… supporting the relevant (new static) HTML …

<iframe onload='checkit(this);' style='display:none;' id=ifplacegeo src='../PHP/fgc/index.php'></iframe> <input type=hidden id=placegeo value=''></input>

Believe it or not, with this web application, it is important what input type=text textboxes are “visited”, and up until today, we had no concerns with that “ordering” issue very much, because we only coded for “real user” interactive input, but today’s place name functionality modifications mean that we feel we need to programmatically force the order somewhat in these place name entry scenarios, but we were not sure whether our non-mobile only (and slightly kludgy feeling) [input type=text element].focus(); interventions would/could work. But they did, happily, at least for non-mobile platforms! This means input type=text element “onblur” events must have been triggered, we figure, which is an interesting finding (well, you had to be there, didn’t you?!)

Perhaps, then, the changed missing_two.html‘s live run link will spark your interest? We hope so, and there is another reason for this preparatory work that will be explained tomorrow. Stay tuned!

Previous relevant Earth Bearing Distance Missing Two Trip Share Tutorial is shown below.

Earth Bearing Distance Missing Two Trip Share Tutorial

When Ajax came on the scene, HTML form navigation got that bit daggier. But as time has gone on, we’ve started appreciating those more traditional HTML form navigation methodologies more for a few major reasons …

the FormData in the Ajax/FormData combination of navigational methodologies simulates static HTML form element functionality
we’ve grown to really admire “Inline HTML Email” sharing via PHP mail to the email and back again out to the “www” wooooorrrrrlllllddd via an “Inline HTML Email Form” (as widens the scope of use for today’s web application)
we’ve grown to really admire a static HTML form element’s “onsubmit” event to massage an HTML form element’s content on the way through to accepting the “action” form navigational destination, or reject that
we’ve grown to really admire the concept of multiple submit button elements without or with an associated name attribute to be able to detect which submit button was clicked/touched

… and it seems to me there are now in the web application wooooorrrrrllllddd a plethora of navigational functionality choices for programmers out there. Yayyyyy!

And so, onto Earth Bearing Distance Missing Two Trip Tutorial today we add two sharing conduit …

… means of functionality which call on …

… in the changed missing_two.html‘s live run link.

Previous relevant Earth Bearing Distance Missing Two Trip Tutorial is shown below.

Earth Bearing Distance Missing Two Trip Tutorial

If we were to nominate an “onions of the 4th dimension” improvement on top of the work of Earth Bearing Distance Missing Two Context Tutorial we’d nominate … anyone, anyone … yes, tenticle 5 of The Kraken … we’d want to allow our “Missing Two Geographical places via Bearing and Distance” web application be turned into a trip planner by allowing for multiple legs, perhaps of a trip, to be “represented” by our new incarnation of the web application. As per usual, with extensions of functionality, here, it is optional, and manifested by … anyone, anyone … yes, tenticle 9 3/4 of The Kraken … turning a hardcoded piece of (webpage) text into an HTML element with action logic behind it … our TAHPOWTIAHEWALBI moment, you could say?!

Seriously though, it is rare that a sizeable trip happens as a one leg with the one bearing and distance component, so we turn our old web application into a …

recursive …
parent/child (webpage/iframe) relationship …
linked list (trip) legs

… type of web application, in order to do that other thing we like to do, and that is to have the one (in this case just HTML/Javascript/CSS) codeset handle both simple and (optional) complex usage functionalities.

How do we differentiate a “top.document” parent from an (HTML) iframe (element) child? We use …

address bar URL ? and & argument (?latf=[previousToLatitude]&longf=[previousToLongitude]) usage (and analysis) via … checked for via …
<body onload=’moremaybe();’>
function moremaybe() { var latto=location.search.split('latf=')[1] ? decodeURIComponent(location.search.split('latf=')[1].split('&')[0]) : ''; var longto=location.search.split('longf=')[1] ? decodeURIComponent(location.search.split('longf=')[1].split('&')[0]) : ''; if (latto != '' && longto != '') { nextplease(); top.document.getElementById('goagain').style.display='block'; document.getElementById('latf').value=latto; document.getElementById('latf').style.backgroundColor="pink"; cwhat[0]=false; cwhat[1]=false; if (!decided) { if (!cwhat[5]) { cwhat[5]=true; } if (!cwhat[4]) { cwhat[4]=true; } decided=true; } top.document.getElementById("ltf").value=latto; document.getElementById('longf').value=longto; document.getElementById('longf').style.backgroundColor="pink"; cwhat[0]=false; cwhat[1]=false; if (!decided) { if (!cwhat[5]) { cwhat[5]=true; } if (!cwhat[4]) { cwhat[4]=true; } decided=true; } top.document.getElementById("lgf").value=longto; document.getElementById('dtop').style.display='none'; document.getElementById('trhead').style.display='none'; document.getElementById('trfoot').style.display='none'; document.getElementById('myt').border=0; var recti=parent.document.getElementById('niframe').getBoundingClientRect(); parent.document.getElementById('niframe').height=eval(200 + eval(('' + recti.height).replace('px',''))) + 'px'; if (parent.document.getElementById('niframe') != top.document.getElementById('niframe')) { var trecti=top.document.getElementById('niframe').getBoundingClientRect(); top.document.getElementById('niframe').height=eval(200 + eval(('' + trecti.height).replace('px',''))) + 'px'; } setTimeout(checkfill, 500); parent.document.getElementById("slong").innerHTML=":"; parent.document.getElementById("slong").title=""; parent.document.getElementById("slong").style.textDecoration="none"; //top.document.title+=' started '; } }

… where you can see that “top.document” (top) parent is just that … top.document … and that a parent of an (HTML) iframe (element) trip leg is referred to via … parent.document … and what is being done in the here and now of a simple scenario (just in the (top) parent) or a complex (non (top) parent leg) … document … references come into play. That parent.document.getElementById(“slong”) refers to the dynamically changed method of adding legs, by turning the …

hardcoded “:” (text) of the To longitude textbox labelling … into a clickable and onclick event working …
document.getElementById('slong').style.cursor='pointer'; document.getElementById('slong').style.textDecoration='underline'; document.getElementById('slong').title='Click for another leg of a trip, perhaps?'; document.getElementById('slong').innerHTML='+';
… optionally used, and dynamic extension to functionality … our “onions of the 4th dimension” moment … who said we don’t care about your health here?!

… so that top.document.getElementById(‘niframe’) is the representation of that “top.document” parent’s first (HTML) iframe (element) child.

Why ask that previous question? To have the one codebase service all the scenarios, we need (the code) to know “where it is at”, so to speak.

The changed missing_two.html‘s live run link can have you planning your own “where of life” trip itinerary of interest yourself.

Previous relevant Earth Bearing Distance Missing Two Context Tutorial is shown below.

Earth Bearing Distance Missing Two Context Tutorial

Mapping and navigational apps wouldn’t be as popular as they are without …

satellite based geodata available to our mobile and laptop (and cars etcetera) devices and their software … and …
the human urge to want to know where they are

… and so to leave yesterday’s Earth Bearing Distance Missing Two Primer Tutorial “proof of concept” web application the way it was, not showing much context to the latitude and longitude form “asks” would be a missed opportunity.

In this sense, we’ve decided to interface this web application to …

our changed tz_places.php‘s talents (last talked about with Other Side of the World Google Chart Tutorial) with PHP TimeZone places and deriving the nearest ones given a latitude and longitude geographical input
and to our interface to the Google Chart Geo Chart showing places on the Earth relative to a world map

… to give the changed missing_two.html‘s live run link that optional map (or visual) extra context. This is accessible off links applied to the previously hardcoded “From” and “To” table headers. Please feel free to give it a go to see what we mean.

Previous relevant Earth Bearing Distance Missing Two Primer Tutorial is shown below.

Earth Bearing Distance Missing Two Primer Tutorial

Get in a conversation with a Land Surveyor, and drop in your sentence, close to each other, the words “bearing” and “distance” and in all likelihood you’ll get a smile. Is it a curved smile? Maybe, they are interested in the geodesic aspects to these two terms. You see, the rules of Euclidean geometry are all fine and good and used by Land Surveyors for small distances involving local mapping or small area mapping, where the curvature of the Earth is not really a factor. In fact, in the early days of Land Surveying, the plotting of an area might have been done using a table resting on a tripod, which hopefully made that table level (all good terrestrial surveying wants you to be perpendicular to the imaginary plumb bob hanging from your instrument, and hanging down in accordance with gravity’s laws). Geodesic interest for Land Surveyors tries to take into account the curvature of the Earth, which we’ll assume for today, is a sphere, though in reality it takes on a spheroidal shape that is not quite a sphere.

Polar co-ordinate designations are an alternative “view” to placing yourself, as distinct from grid co-ordinates, or geographical latitude and longitude.

We talked about some of what we have written a proof of concept web application for today with the PHP Google Map Chart Bearing Distance Tutorial some time back, and revisited its excellent …

very useful link that talks about the Haversine distance formula, as well

… and rereading this excellent webpage, realized that two sets of formulae there (plus the great circle distance calculations before) could help us piece together a useful navigational web application that, out of …

From Latitude, Longitude	Bearing, Distance	To Latitude, Longitude

… we could get the user to fill out 2 of 3 columns of information above, and calculate the missing one for them.

How is this useful? Well, sometimes you want to know …

We are at X. We are crow flying to Y. In which direction do we set out? How far is it?
We are at X. That looks like a nice direction to head, so what compass reading is that? If I go however far, where do I end up?

Second one for those dreamers and adventurers (or perhaps, orienteerers) methinks. Anyway, feel free to try the HTML and Javascript ‘s live run link, or down below …

Previous relevant PHP Google Map Chart Bearing Distance Tutorial is shown below.

PHP Google Map Chart Bearing Distance Tutorial

There have been three recent things going on, for us, involving software integration of our interface to the great Google Chart Map Chart …

the work of PHP Wikipedia Australian List Integration Tutorial adding select (ie. Google Charts “onclick”) event Nearest TimeZone=Z and YouTube=Y functionalities … and also …
ongoing changes readying web applications that can work in an iOS WKWebView we started talking about at Conditional Alternative to Javascript Popup Windows in iOS Tutorial and which we shall return to … and then today’s new functionality to …
add new select (ie. Google Charts “onclick”) event functionality to show a Bearing (degrees) and Distance (kilometres) and To table of information relative to a clicked From place

As a worker with a background in Land Surveying, of course, the words “bearing” and “distance” were part of the “bread and butter” of this job. The modern day equipment can, at the observer’s tripod, and given the chainperson’s placement of equipment, deal with both of these “measures” at once, but you can still use the old theodolites and distance measuring chains if you like. You take your measurements and use calculations like those underlying the workings of the web application of HTML and Javascript and CSS Survey Traverse Tutorial which are all fine and dandy if the distances are relatively small, because we can think “planar geometry” as we mostly learn at school. But if the measurements involve long enough distances, you need to take into account that Earth is, basically, round … meanwhile, on the phone ….

You don’t say. You don’t say. You don’t say.

…

“What’d they say?” …

They didn’t say.

When distances are this large we need to turn towards “geodesic calculations” and today …

with our calculation of “bearings” between two sets of latitude and longitude we turned to this very useful link that talks about the Haversine distance formula, as well, thanks … and to help make the table of information more approachable we called on …
half hour time of day clock emojis we used for TimeZone Country Places Emoji Tutorial … and …
used the cursor techniques we talked about at HTML/Javascript Guided Snake Game Primer Tutorial

Here are some “live runs” …

make your own Google Chart Map Chart
left hand side of tutorial picture here
By The Time I Get To … can be seen below …

… and here’s the changed PHP map.php changed in this way.

Previous relevant PHP Wikipedia Australian List Integration Tutorial is shown below.

PHP Wikipedia Australian List Integration Tutorial

Yesterday’s PHP Wikipedia Australian List Makeover Tutorial got us thinking more about “where of life” functionality integration possibilities.

For us, with many “where of life” web applications, the Google Charts Map Chart is a core part of the functionality, as the receptacle, and more and more often as time goes on, also a launching pad out to other concepts, such as …

TimeZone … and …
Weather

… two of the concepts hovering about our “Other Side of the World” web application we last talked about with Other Side of the World Google Chart Tutorial, whose supervisory HTML other_side_of_the_world.htm‘s live run, changed in this way to tweak the the linking of …

latitude and longitude and (anywhere) placename … to …
TimeZone place(s) … and then (with great help from Weather Underground (thanks)) onto …
direct or nearby weather predictions

… coming off a new Map Chart Google Chart and its select event menu option …

Nearest TimeZone=Z (and onto Other Side of the World and Weather)
YouTube=Y (looking for placename)

… the latter integrating us with YouTube API for Iframe embedded videos interface HTML/Javascript “parent” web application called karaoke_youtube_api.htm HTML iframe elements in another direction additional to yesterday’s usage. Along the way, we tweak the Google Map=G menu option, adding more map type options and zooming in a little less by default, and with the Nearby Airports=A option making the default be a search for 3 (rather than 4) nearby airports. A lot of this all happens because of the changes to …

map.php‘s Google Charts Map Chart interface’s live run (changed this way)
Australian Lighthouses australian_lighthouses.php (changed this way)
Australian Waterfalls australian_waterfalls.php (changed this way)
Australian Dams australian_dams.php (changed this way)
Australian Ports australian_ports.php (changed this way)
Australian National Parks australian_parks.php (changed this way)

… which all got changed to allow for an “Animate” feature, allowing for an automated right to left “animation” (via hashtagging) of the Wikipedia based slides near the top of this suite of web application’s webpages. We hope you get to try all this out for yourself.

Previous relevant PHP Wikipedia Australian List Makeover Tutorial is shown below.

PHP Wikipedia Australian List Makeover Tutorial

Some time back we linked a Wikipedia “list” webpage to the Google Charts Map Chart functionality with PHP Modularization for Lighthouses in Australia Tutorial.

We’re revisiting, and finding some “peer” web applications, linked by a dropdown, that all …

access a relevant Wikipedia “list” webpage for Australian “things” and mentioning latitude and longitude … which link to …
Google Charts Map Chart

… for all of …

We were inspired to take on this “makeover” of “where of life” functionalities because earlier on today we discovered a stupendous online resource for Australian geography enthusiasts, the Bonzle Digital Atlas of Australia, with incredibly detailed and flexible search mechanisms, thanks heaps!

We’ve decided to include extra buttons (to those already linking to Google Maps links and to the relevant Wikipedia webpage) for that suite of web applications above for …

Bonzle Digital Atlas of Australia
Australian government website (sometimes)
YouTube API for Iframe embedded videos interface HTML/Javascript “parent” web application called karaoke_youtube_api.htm HTML iframe elements

Great for research and “surfing the Australian world”! Lose yourself!

What happened Javascript (australian_lighthouses.js changed this way) and PHP wise?

Previous relevant PHP Modularization for Lighthouses in Australia Tutorial is shown below.

PHP Modularization for Lighthouses in Australia Tutorial

Today we want to try two more things …

continuing on with our PHP code (you could call australian_lighthouses.php) for our Australian Lighthouses project
talk about PHP glob and its modularization sensibilities

… so let’s talk about the second one first … it’s south of north … chortle, chortle.

What does PHP’s glob do? It is doing functionality like the “underworkings” of any browse button you would see would do when you have a hard disk (in your life) … unfortunately, this is no longer a given (with mobile technology and the “cloud” challenging this thinking, sometimes). Give glob a file specification and a directory to start with, and it will happily (if you were both “globular” and “modular” you would be, too) provide you with a list of filenames, so that we use it to construct this PHP function for use with our lighthouses web application …

… and hope you can see that glob could be used for PHP code to self-detect sibling variation programs, so that, for instance, if we “plonked” (ie. eg. (s)ftp it) an egypt_lighthouses.php (probably with an egypt_lighthouses.js accompanying Javascript file) into the same directory as our …

australian_lighthouses.php (changed from yesterday as per this link) (uses australian_lighthouses.js) to arrive at a live run
new_zealand_lighthouses.php (uses new_zealand_lighthouses.js) to arrive at a live run
ireland_lighthouses.php (uses ireland_lighthouses.js) to arrive at a live run

… it would automatically be added into the functionality of its siblings without you having to change any code of those siblings … and that egypt_lighthouses.php is free to be a web application with a totally different method of functionality … cute, huh?!

As a matter of fact ireland_lighthouses.php is quite different, and if you examine the code, you will see that the Javascript putElement(s)By via PHP Relative URLs Tutorial is more apt to a discussion of its workings.

You see, there are so many many different ways to “skin a cat” in Information Technology, quite often … not always … but “quite often” … and why be cornered into thinking there is only one way to do things?

The other thing you’ll find is that even though ireland_lighthouses.php differs a lot to its nearest matching sibling (in terms of methodology), new_zealand_lighthouses.php the Javascript corresponding codesets called ireland_lighthouses.js and new_zealand_lighthouses.js are only superficially different … in other words our PHP coalesces concepts into a similar “client” look … a “modularization” of sorts … not everybody’s sort, but a sort none the less … and this begs a question?

Why is “modularization” a good thing? Well, to me, you don’t have to have any “modularization” going on at all, and this is fine by me, but you must deal with issues that allow you to modify many many codesets efficiently and accurately in vastly different ways to be efficient, or be “modular” and be able to, perhaps, even, automate your changes, because of these “modular” patterns you’ve created … many people find “modularization” blissful … and often it suits the work patterns for teams of programmers. Perhaps you want to read about MVC (and its like) as a coding modularization idea for PHP (or many other programming languages, for that matter).

Previous releveant PHP/Javascript Asynchronous Lighthouses in Australia Tutorial is shown below.

PHP/Javascript Asynchronous Lighthouses in Australia Tutorial

Today we want to try two things …

continuing on with our PHP code (you could call australian_lighthouses.php) for our Australian Lighthouses project
talk about Javascript asynchronous script tag option

… so let’s talk about the second one first … it’s south … chortle, chortle.

Why should you be interested in the HTML’s script tag attributes …

asynch=”asynch”
defer=”defer”

? Well, we want our web pages to load as fast as possible. Yaaaaaa?! So if there was the mechanism to do more than one bit of ((client) Javascript) thinking at a time would you avail yourself of the opportunity … or would you pick what’s behind door 3?

Do you want to hear more on this theory wise? It seems to me, there are web application mission critical parts, and there are embellishments, quite often … “nice to haves” but not “mission critical” … well, if those “nice to haves” could be arranged not to hog all the web application designated CPU that would be good, wouldn’t it?! Yaaaaaaaaaaa?!

So, that, in theory, is y why.

Now back to the project at hand … Australian Lighthouses … don’t you think some geographical sorting options and place name sorting options might be useful? Yaaaaaaaaaaaaaaaaa?! But for us it doesn’t feel mission critical … so we …

place the logic in some external Javascript called australian_lighthouses.js
we load it from the PHP via
<script type=”text/javascript” src=”australian_lighthouses.js” async=”async”></script>

… and this amounts to the only change to today’s PHP code from yesterday as per this link

… and this becomes a way to modularize your thinking regarding a project … please don’t think there are not a myriad of other ways … this is just one idea here.

With regard to how we approached our external Javascript we did not demand anything (much) of our parent PHP and this may not be the fastest way to approach this. What we mean by that is that, perhaps, as a general rule, external Javascript can perform faster with the parent PHP or HTML leaving it with a lot more HTML element id=”[elementId]” to hang its hats on, so to speak … instead, here, we acted innocently with our Javascript and used lots of calls to the Javascript DOM method getElementsByTagName() (which results in an array return value). Perhaps calls to getElementById() via (parent) arranged id=”[elementId]” would be faster?! Today, as with the previous Static HTML Javascript Primer Tutorial we concentrated on the “modular” feel to additional external Javascript code ideas.

So try a live run to see what we mean.

Previous relevant PHP Lighthouses in Australia Primer Tutorial is shown below.

PHP Lighthouses in Australia Primer Tutorial

Today we examine some of the methodology behind a project idea.

Projects need …

an idea … ours came from listening to the radio and hearing about Lighthouses, and how the technologies had changed what they look like and how they function these days … to quote Wikipedia with respect to Australian Lighthouses (thanks) …

The first lighthouse was Macquarie Lighthouse, which was lit in 1793 as a tripod mounted wood and coal fired beacon. The last manned lighthouse was Maatsuyker Island Lighthouse, off the south coast of Tasmania, which was automated in 1996.
a means to access information … much easier these days with the search engines … we went with a Google Search as per list of lighthouse positions … which led to …
the information source(s) … we settled, and were not surprised about the source, for Wikipedia’s List of lighthouses and lightvessels in Australia – Wikipedia … then, once happy about the quality of the source information, analyzed …
the source data format … initially, at least, via View->Page Source, relative to the webpage … to get ideas for how to parse the data … so that we can determine a …
programming language of choice … which is PHP … no surprise here … will need a server-side language … and a method like PHP’s file_get_contents() … from there …
PHP coding to parse the data and put it into another format that value adds … otherwise why do it, as the Wikipedia information is fine as is … that is where we determine that we should …
include an iframe that uses the Google Chart Map Chart to add that extra overall positional view of Lighthouses … a definite asset to the reader’s understanding of the subject … definitely a “where” web application … and in doing this we notice that …
Google Chart Map Chart map.php web application needed to be able to handle much larger input data streams than it could in its previous incarnation of only allowing PHP $_GET[] parameters … so we change it to allow $_POST[] parameters … maybe you noticed this with yesterday’s PHP/Javascript/HTML Google Chart Map Onclick Tutorial as shown below … as this meant that …
we need an HTML form that POSTs to the iframe with the Google Chart Map Chart map.php web application allowable because we are on the same domain with this thinking … and using an HTML textarea element to store the huge string of Lighthouse data that will be passed across via urldecode($_POST[‘data’]) at map.php … using PHP’s urldecode() and urlencode() methods and Javascript’s decodeURIComponent() method … as well as utilizing …
Google Chart Map Chart map.php web application onclick and tooltip functionality we’ve been working on lately … hence the talk about this below … working out what (component) tools could do with a “makeover” is an extremely important part of any project and can be a useful compartmentalizing of the project

… and so we end up with our live run behind which is the PHP programming source code you could call australian_lighthouses.php for your perusal.

Previous relevant PHP/Javascript/HTML Google Chart Map Onclick Tutorial is shown below.

PHP/Javascript/HTML Google Chart Map Onclick Tutorial

They say “the knee bone’s connected to the thigh bone” then they say “the thigh bone’s connected to the … hip bone” then they say “let’s call the whole thing off” … sometimes.

Today we say “the onmouseover event is connected to the onclick event” then we say “the onclick event is connected to the online woooooorld” … “do … the hokey pokey” x3 … “that’s what the onclick event preceeded by the onmouseover event within the environs you are encountering … is all about”.

That news is pretty good actually, because it means mobile users are not missing out on much not having easy access to any onmouseover (ie. hover) functionality … they’ll still reach any onclick logic you present them, in the default case of events where onclick is a valid “touch” event as well.

So the data structure of arrangements to allow for this onclick functionality is intrinsically the same as allowed for yesterday with the PHP/Javascript/HTML Google Chart Map Tooltips Tutorial as shown below, but we just check for some more delimitation issue matters, and our updated prompting window logic gets quite “blurby” as per the Javascript (via PHP) …

echo " datalinesuffix = prompt('Enter decimal Latitude,Longitude ' + thisline + extra + ' (for no more hit Cancel button and append with ' + '\\n\\n' + ',\"A tooltip and clicking link for Google Map of <a target=_blank href=https://www.google.com.au/maps/place/' + encodeURIComponent(dlp2) + '>' + dlp2 + '</a>\" ' + '\\n\\n' + ' or maybe perhaps ' + '\\n\\n' + ',\"A tooltip and clicking link for Google Map based on latitude and longitude of <a target=_blank href=https://maps.google.com.au/maps?' + encodeURIComponent('z=15&t=m&q=loc:') + '{latitude}{longitude}>' + dlp2 + '</a>\"' + '\\n\\n' + ' optionally (as (just) two examples of what is possible with HTML included (activates with onclick bit not onmouseover))', thisdef); " . "\n"; echo ' if (datalinesuffix != null) { if (datalinesuffix.indexOf("{latitude}") != -1) { dlsa=datalinesuffix.split(","); if (dlsa[0].indexOf("-") == -1) { datalinesuffix=datalinesuffix.replace("{latitude}",encodeURIComponent("+" + dlsa[0])); } else { datalinesuffix=datalinesuffix.replace("{latitude}",encodeURIComponent(dlsa[0])); } } if (datalinesuffix.indexOf("{longitude}") != -1) { dlsa=datalinesuffix.split(","); if (dlsa.length > 1) { if (dlsa[1].indexOf("-") == -1) { datalinesuffix=datalinesuffix.replace("{longitude}",encodeURIComponent("+" + dlsa[1])); } else { datalinesuffix=datalinesuffix.replace("{longitude}",encodeURIComponent(dlsa[1])); } } } } ' . "\n";

… as again we are making use of $_GET[] parameters coming into the PHP at the server side.

The bigger picture plan for how this helps something else we are trying will become apparent over time … in the fullness of time … at the appropriate juncture of juxtapositions.

Let’s see some PHP code in live action for this tutorial where you define your map characteristics and data.

Link to Google Chart Tools “spiritual home” … via Google.
Link to Google Chart Tools Map information … via Google.
Link to Google Chart tooltips information … via Google.

Link to some downloadable PHP programming code … rename to map.php which changed from yesterday as per this link.

Previous relevant PHP/Javascript/HTML Google Chart Map Tooltips Tutorial is shown below.

PHP/Javascript/HTML Google Chart Map Tooltips Tutorial

Here is a tutorial that is revisiting Google Graphs API, or Google Chart Tools, and its Map functionality, which we first talked about with PHP/Javascript/HTML Google Chart Map Tutorial as shown below. Please read …

Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.

Why are we revisiting? Well, we are interested in the interactive side to this wonderful product. We are going to start with a look into “tooltips”. Tooltips are those optional informational features of some webpages that happen when hovering over an HTML element, principally through the filling out of an HTML element’s title global attribute.. Google Charts functionality amounts to the use of Javascript, and, these days, SVG HTML elements, so “tooltips” are very relevant to the “user experience” when using Google Charts. With the Map Chart, the latitude, laongitude set is combined with a title, which can be the default “tooltip” shown, as this is all fine for many usages, but we want to extend it so that that title doesn’t have to be the tooltip.

The integration of this added functionality into the Google Chart Map Chart involves adding an extra “string” column to the data table as per the bold bits of the new Javascript (via PHP) snippet …

if (isset($_GET['value']) && (isset($_GET['tooltip']) || strpos($GETdata, "'") !== false)) { echo " var data = new google.visualization.DataTable(); /" . "/" . $GETlabel . $GETvalue . " \n"; echo " data.addColumn('number', '" . str_replace("'","",str_replace(",","",str_replace("['","",$GETlabel))) . "'); \n"; echo " data.addColumn('number', " . str_replace(",", "); data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}}); data.addColumn('string', ", str_replace("]","",$GETvalue)) . "); \n"; echo " data.addRows([ \n"; echo str_replace("''" . "''", "''", str_replace("~", "'", substr($GETdata,1))); echo " ]); \n"; } else { echo ' var data = google.visualization.arrayToDataTable([ ' . "\n"; echo " " . $GETlabel . $GETvalue . " \n"; echo str_replace("''" . "''", "''", str_replace("~", "'", $GETdata)); echo " ]);\n"; }

… making use of $_GET[] parameters coming into the PHP at the server side … you’ll find that Javascript loves to work with PHP as one of those Fred and Ginger relationships of the programming world … you’ll be happier writing Javascript from your PHP too … try it and you’ll see the advantages time and again and again and again … did we leave out one? … and again.

The bigger picture plan for how this helps something else we are trying will hopefully become apparent over time.

Let’s see some PHP code in live action for this tutorial where you define your map characteristics and data.

Link to Google Chart Tools “spiritual home” … via Google.
Link to Google Chart Tools Map information … via Google.
Link to Google Chart tooltips information … via Google.

Link to some downloadable PHP programming code … rename to map.php which changed from the days of Google Charts Emailing Primer Tutorial as per this link.

Previous relevant PHP/Javascript/HTML Google Chart Map Tutorial is shown below.

PHP/Javascript/HTML Google Chart Map Tutorial

Here is a tutorial that introduces you to Google Graphs API, or Google Chart Tools, and its Map functionality.

Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.

Let’s see some PHP code in live action for this tutorial where you define your map characteristics and data.

Link to Google Chart Tools “spiritual home” … via Google.
Link to Google Chart Tools Map information … via Google.

Link to some downloadable PHP programming code … rename to map.php.

If this was interesting you may be interested in this too.

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged Earth, earth scanner, event, geographicals, HTML, Javascript, latitude, longitude, oncontextmenu, PHP, programming, prompt, right click, Scanner, time, timestamp, timezone, tutorial, when, where | Leave a comment

Ffmpeg Install and Public Face Tutorial

Posted on July 21, 2024 by admin

Ffmpeg Install and Public Face Tutorial

Our recent web server VPS migration can not only be …

a migration of functionality (eg. this WordPress blog) … as well as …
an opportunity to open up new vistas of serverside functionality

… such as today’s ffmpeg install, which is only feasible because of the …

additional diskspace … chance on new web server allows for …
chance to install ffmpeg …
dnf config-manager --set-enabled powertools dnf install --nogpgcheck https://mirrors.rpmfusion.org/free/el/rpmfusion-free-release-$(rpm -E %rhel).noarch.rpm -y dnf install --nogpgcheck https://mirrors.rpmfusion.org/nonfree/el/rpmfusion-nonfree-release-$(rpm -E %rhel).noarch.rpm -y dnf install ffmpeg
… thanks to this great link, along with ImageMagick …

… on this new “public face” (even more public when DNS is applied later).

Codewise this involved …

the changed macos_ffmpeg_convert.php works the old way and now in the new way … and is helped out by …
a tweaked client_browsing.htm client side HTML and Javascript inhouse helper

… further to recent work touching these ideas with Animated GIF Creator Overlayed Images Top Left Tutorial.

See some of this public install of ffmpeg here.

Previous relevant Animated GIF Creator Overlayed Images Top Left Tutorial is shown below.

Animated GIF Creator Overlayed Images Top Left Tutorial

To add to the recent Animated GIF Creator Overlayed Images Tutorial‘s user interaction logic, we add a way to control those two “overlay” CSS properties …

left
top

… but more in the sense that we allow CSS …

margin-eft
margin-top

… come into the picture, after a dalliance with CSS calc thoughts.

This allows for offsetted images be part of the “overlay mix” that you can retry this at our changed tutorial_to_animated_gif.php inhouse public domain Animated GIF Creator.

Previous relevant Animated GIF Creator Overlayed Images Tutorial is shown below.

Animated GIF Creator Overlayed Images Tutorial

We wanted to add an “Overlayed Images” functionality component to the “Animated GIF Creator” of Animated GIF Creator Video Intranet Tutorial, today.

The work involves both of the HTML design “big concepts” we are keen on at this blog …

overlay … via CSS control of …
1. position:absolute;top:0px;left:0px;
2. opacity:1.0;
3. z-index:1;
reveal … lately, mostly, via HTML use of …
1. details
2. summary

… the latter being the “container” for our interactive input be able to control overlay items 2 and 3, which affect the “overlayed images” output display via the clicking of a new “Overlay Images” button. That button …

<input disabled onclick="overlaythem();" id="overlayit" type="button" title='Overlay Images' value='Overlay Images'></input>

… starts off as disabled … and works with new HTML div elements …

<div id=overlayedj><h1> </h1><br></div><div id=overlayedi></div>

… until at least two images are defined, at which time the button becomes enabled …

You can try this at our changed tutorial_to_animated_gif.php inhouse public domain Animated GIF Creator.

Previous relevant Animated GIF Creator Video Intranet Tutorial is shown below.

Animated GIF Creator Video Intranet Tutorial

With the recent Animated GIF Creator Video Revisit Tutorial (preceding Animated GIF Creator Video Share Tutorial) we wrote …

… one reason being that we do not want to install the wonderful ffmpeg (command line video creation tool) on the RJM Programming domain, but, in macOS, here with MAMP, we are quite happy to live with the Homebrew (Terminal application’s) install …

… setting up what could be “lost functionality”, but today, we come around to either adding a new …

Convert to Video

… dropdown option should all be ritchy ditch, and if not, often we will add new “Advice” dropdown options to remind the user what they’d need to arrange to get to a “Convert to Video” scenario.

Selecting “Convert to Video” sets up a hydrid “Internet/Intranet” feeling scenario where …

the user is using our changed tutorial_to_animated_gif.php inhouse public domain Animated GIF Creator containing this new “Convert to Video” option off the “ImageMagick” dropdown …
the user defines some image slide data … eg. browsing to create data-URIs (but careful not to do too many) …
the user selects that “Convert to Video” option …
a window.open popup calls URL like …
HTTP://localhost:8888/PHP/animegif/tutorial_to_animated_gif.php?video=1687644
… in a new window …
those data-URIs are converted into /tmp/jmtmp0*.[imageExt] files … ready for …
ffmpeg commands like …
ffmpeg -framerate 0.1 -i /tmp/jmtmp%03d.jpeg -c:v libvpx-vp9 -pix_fmt yuva420p -lossless 1 -c:a copy video.webm; ffmpeg -i video.webm video.mov 2>> video.bad
… be nested in PHP exec (via MAMP local web server incarnation of the inhouse Animated GIF Creator) as a way to create videos …
which can be downloaded within that public domain “parent” inhouse Animated GIF Creator session

Which begs the question …

How do we know when to offer the "Convert to Video" option on that dropdown?

This logic is centred around a few useful ideas (with this cross domain scenario ruling out Ajax and Iframe src= definitions, as useful ways to go) …

open the MAMP local web server “HTTP://localhost:8888/PHP/animegif/tutorial_to_animated_gif.php” URLs in an iframe (with onload event logics) pointed at by a window.open second argument (effectively avoiding any loose useful or not popup windows hanging around) …
the most we can ask at the receiver is that window.opener is defined … and if so, just at that discovery …
an image called “amhere.jpg” is created via PHP GD functionality … and back at the “public domain” parent within the iframe onload logic (where with contentWindow or contentDocument do not expect a document.body or even a document) …
we attempt to “hotlink” that MAMP local web server image … as per …
var tryit='http://localhost:8888/PHP/animegif/amhere.jpg'; document.getElementById('ctvopt').value='advice'; document.getElementById('ctvopt').innerHTML='Advice on Convert to Video'; if (tryit != '') { var im=new Image(); im.onload = function() { document.getElementById('ctvopt').value='video'; console.log('this.height=' + eval('' + this.height)); if (eval('' + this.height) >= 20) { document.getElementById('ctvopt').innerHTML='Convert to Video'; } else { document.getElementById('ctvopt').innerHTML='Convert to Video (but ffmpeg not installed or in unexpected place)'; } document.getElementById('imsel').title='All except Convert to Video, which needs ffmpeg installed, use ImageMagick'; }; im.src=tryit; tryit=''; }

Previous relevant Animated GIF Creator Video Revisit Tutorial is shown below.

Animated GIF Creator Video Revisit Tutorial

We hope you realize that our changed tutorial_to_animated_gif.php inhouse Animated GIF Creator (helped out by a changed emailhtml.php inhouse email creator helper serverside PHP web application) can be accessed …

in that public RJM Programming mode of use above … but even better can be …
download relevant code to macOS MAMP local web server places off /Applications/MAMP/htdocs/ $_SERVER[‘DOCUMENT_ROOT’] places …
- GIFEncoder.class.php … thanks … to “PHP/animegif/”
- tutorial_to_animated_gif.php to “PHP/animegif/”
- animegif.php to “PHP/animegif/”
- haiku_animated_gif.html to “PHP/animegif/”
- macos_ffmpeg_convert.php to $_SERVER[‘DOCUMENT_ROOT’]
- macos_textutil_convert.php to $_SERVER[‘DOCUMENT_ROOT’]
- macos_say_record.php to $_SERVER[‘DOCUMENT_ROOT’]
- client_browsing.htm to “HTMLCSS/”
- emailhtml.php to “HTMLCSS/”
- read_exif_off_image_rotate.php to “PHP/”
… and check the code for the validity of any ImageMagick paths … and if not all these conditions, simulate the same and cobble it together in the code

… one reason being that we do not want to install the wonderful ffmpeg (command line video creation tool) on the RJM Programming domain, but, in macOS, here with MAMP, we are quite happy to live with the Homebrew (Terminal application’s) install …

brew install ffmpeg

… to open a whole new woooooorrrrlllllddd of video creation opportunities using this MAMP local web URL …

HTTP://localhost:8888/PHP/animegif/tutorial_to_animated_gif.php# Animated GIF Creator on MAMP local web server

And so, onto yesterday’s Animated GIF Creator PDF Last Reveal Tutorial we decided to revisit video creation parts of our inhouse Animated GIF Creator on this MacBook Air. We needed to reinstall ffmpeg, and we show that in today’s animated GIF tutorial picture and also created the “video.mov” video below, in the process …

… we tweaked out of “video/mp4” ffmpeg created videos thinking towards “video/webm” or “video.mov” ffmpeg created videos that suit the “few frames but spaced out video” we wanted to achieve for all practical purposes, that “video/mp4” playing too fast for us to see anything much but the first and last slide …

<?php
$videofr=" -r " . (1000 / $delay) . " "; $videofr=" -r " . (1000 / $delay) . " -filter:v setpts=" . ($delay / 1000) . "*PTS "; $videomime="video/mp4"; $videoext=".mp4"; $videofr=" -framerate 0.1 "; $videoext=".webm"; $videomime="video/webm"; $videomidbit="-c:v libvpx-vp9 -pix_fmt yuva420p -lossless 1 -c:a copy"; //$videocmd=$videopath . "ffmpeg -r " . (1000 / $delay) . " -filter:v setpts=" . ($delay / 1000) . "*PTS " . " -i " . dirname(__FILE__) . DIRECTORY_SEPARATOR . "%03d.jpg " . dirname(__FILE__) . DIRECTORY_SEPARATOR . "video.mp4 2> " . dirname(__FILE__) . DIRECTORY_SEPARATOR . "video.bad"; //$svideocmd="ffmpeg -r " . (1000 / $delay) . " -filter:v setpts=" . ($delay / 1000) . "*PTS " . " -i " . "%03d.jpg " . "video.mp4"; $videocmd=$videopath . "ffmpeg " . $videofr . " -i " . dirname(__FILE__) . DIRECTORY_SEPARATOR . "%03d.jpg " . $videomidbit . " " . dirname(__FILE__) . DIRECTORY_SEPARATOR . "video" . $videoext . " 2> " . dirname(__FILE__) . DIRECTORY_SEPARATOR . "video.bad"; $svideocmd="ffmpeg " . $videofr . " -i " . "%03d.jpg " . $videomidbit . " " . "video" . $videoext; $videocmd.="; " . $videopath . "ffmpeg -i " . " " . dirname(__FILE__) . DIRECTORY_SEPARATOR . "video" . $videoext . " " . dirname(__FILE__) . DIRECTORY_SEPARATOR . "video.mov 2>> " . dirname(__FILE__) . DIRECTORY_SEPARATOR . "video.bad"; $svideocmd.="; " . "ffmpeg -i " . " " . dirname(__FILE__) . DIRECTORY_SEPARATOR . "video" . $videoext . " " . dirname(__FILE__) . DIRECTORY_SEPARATOR . "video.mov 2>> " . dirname(__FILE__) . DIRECTORY_SEPARATOR . "video.bad"; $videohtml="<video title='" . $svideocmd . "' controls id=ivideo type='" . $videomime . "'><source src='video.mov'></source><source src='video" . $videoext . "'></source></video>"; $videosuffix="";
?>

Previous relevant Animated GIF Creator PDF Last Reveal Tutorial is shown below.

Animated GIF Creator PDF Last Reveal Tutorial

As a web application programmer we like buttons. There are “buttons” and there are buttons. Yes, there is an HTML button element, and it and the input type=button element render as that part of a webpage most recognizable to users the world over. You click or tap this button and something usually happens.

But we also enjoy “Emoji Buttons” for we graphically challenged programmers. Using an emoji text and graphic can make span elements or p elements or lots of other HTML elements that have an innerHTML property, be like a very succinct button like entity, also appreciated around here because it takes up so little webpage “real estate”.

And so onto yesterday’s Animated GIF Creator PDF Order Tutorial we set about, today, “revealing” any enduring animated GIF and/or PDF created during a previous session, using Emoji Buttons as the email/SMS sharing action buttons.

We say “revealing” because, like the way “Emoji Buttons” save webpage “real estate”, so can the use of the HTML5 details/summary element combination. It is in that summary “enduring” header part of that combination we can place some “Emoji Buttons”. You will (once you start creating and sharing animated GIFs and/or PDFs) see from our changed tutorial_to_animated_gif.php inhouse Animated GIF Creator (helped out by a changed emailhtml.php inhouse email creator helper serverside PHP web application) that we place three Emoji Buttons …

📟 SMS (Animated GIF or PDF) Limited relevance period (ie. no data URIs involved, so rely on an absolute URL whose content might change or start not to exist down the track) … via “a” “sms:” link click/tap
📧 Email (Animated GIF or PDF) Limited relevance period (ie. no data URIs involved, so rely on an absolute URL whose content might change or start not to exist down the track) … via “a” “mailto:” link click/tap
📧 Email (Animated GIF or PDF) Enduring relevance (ie. data URIs involved, so do not rely on any absolute URL whose content might change or start not to exist down the track) … via PHP mail function means of sending email with HTML attachment containing the relevant Animated GIF or PDF

Yes, “Emoji Buttons” can have their size controlled but not by the usual CSS width and height properties, but by the CSS font-size property. Here is the new Javascript function that those Emoji Button “onclick” logic points to …

<?php eho ”
function askes(isemail, isoab) { var esask='', izhr=null, izform=null; var isoa=document.getElementById(isoab.id.replace('b','')); if (isemail) { esask=prompt('Please enter email address to send this to', ''); if (esask != null) { if (esask.indexOf('@') != -1) { if (isoa.outerHTML.indexOf('<img') == 0) { //alert('More Animated GIF to come'); izhr = new XMLHttpRequest(); izform=new FormData(); izform.append('to', esask.trim()); izform.append('inline', '" . dirname(__FILE__) . DIRECTORY_SEPARATOR . server_remote_addr() . ".gif" . "'); izform.append('subj', 'My Latest Animated GIF via RJM Programming ... '); izform.append('tdhuhta', ('<body><div title=\"" . explode('/animegif',$durlis)[0] . '/animegif/' . server_remote_addr() . "\" style=\"overflow:auto;-webkit-overflow-scrolling:touch;height:100%;\"><img style=\"width:100%;height:900px;\" src=\"" . dirname(__FILE__) . DIRECTORY_SEPARATOR . server_remote_addr() . ".gif" . "\"></img></div></body>')); izhr.open('post', '//www.rjmprogramming.com.au/HTMLCSS/emailhtml.php', true); izhr.send(izform); } else if (isoa.outerHTML.indexOf('<a') != 0) { //alert('More PDF to come'); izhr = new XMLHttpRequest(); izform=new FormData(); izform.append('to', esask.trim()); izform.append('inline', '" . dirname(__FILE__) . DIRECTORY_SEPARATOR . server_remote_addr() . "_animegif.pdf" . "'); izform.append('subj', 'My Latest PDF via Animated GIF via RJM Programming ... '); izform.append('tdhuhta', ('<body><div title=\"" . explode('/animegif',$durlis)[0] . '/animegif/' . server_remote_addr() . "_\" style=\"overflow:auto;-webkit-overflow-scrolling:touch;height:100%;\"><object style=\"width:100%;height:900px;\" type=\"application/pdf\" data=\"" . dirname(__FILE__) . DIRECTORY_SEPARATOR . server_remote_addr() . "_animegif.pdf" . "\"></object></div></body>')); izhr.open('post', '//www.rjmprogramming.com.au/HTMLCSS/emailhtml.php', true); izhr.send(izform); } else { isoa.href='mailto:' + esask.trim() + '?' + isoa.href.split('?')[1]; isoa.click(); } } } } else { esask=prompt('Please enter SMS number to send this to', ''); if (esask != null) { if ((esask.trim() != '' && esask.trim().replace(/0/g,'').replace(/1/g,'').replace(/2/g,'').replace(/3/g,'').replace(/4/g,'').replace(/5/g,'').replace(/6/g,'').replace(/7/g,'').replace(/8/g,'').replace(/9/g,'') == '')) { isoa.href='sms:' + esask.trim() + '&' + isoa.href.split('&')[1]; isoa.click(); } } } }
“; ?>

Cute, huh?!

Previous relevant Animated GIF Creator PDF Order Tutorial is shown below.

Animated GIF Creator PDF Order Tutorial

Order becomes an interesting subject to us today regarding the PDF conversions possible in amongst the Animated GIF creating of yesterday’s Animated GIF Creator PDF Share Tutorial.

That is because we may have some advanced users out there that want that possibility of differentiating the data of …

animated GIF … containing all features asked for, in totality … from the chance for the user to have any of the PDF conversion option sets below …
PDF … one of …
1. no PDF conversion
2. full PDF conversion … with the user choices regarding raw image content and title and watermarking and ImageMagick and GD modifiers
3. light PDF conversion … with the user choices regarding just raw image content (the only option out of these last three available before today’s work)
4. medium PDF conversion … with the user choices regarding just ImageMagick and GD modifiers

… perhaps as a “before and after” tool regarding presentations, maybe?

No dropdowns used here (enforcing an order), just the user’s order in which they choose to select the “PDF conversion” option from the ImageMagick dropdown (in relation to other selections) determining how and when this PDF conversion occurs in the workflow through to creating the animated GIF with our changed tutorial_to_animated_gif.php inhouse Animated GIF Creator serverside PHP web application. Just remember to select PDF Conversion as early as possible to do that “light PDF conversion” option above and last thing if you are interested in “full PDF conversion” (where you can create PDF documents with the bells and whistles ImageMagick and GD modifiers can offer) and today’s tutorial picture is an example of “medium PDF conversion” (when we ordered our settings by first Grayscale, second PDF conversion and last title and watermarking options). Clicking or tapping the ImageMagick link can get the user to the Javascript popup window where they might define the email or SMS recipient for that PDF conversion data file download.

Previous relevant Animated GIF Creator PDF Share Tutorial is shown below.

Animated GIF Creator PDF Share Tutorial

To share yesterday’s Animated GIF Creator PDF Conversion Tutorial PDF data formatted image slides (and then onto an animated GIF) would be a step forward, wouldn’t you say?

What sharing conduits do we code for? We always intended …

email … but as the day wore on trying to get the usage to work on mobile and non-mobile we decided to relinquish our wish to not have to create a user specific enduring (until that same browser type and user combination share) PDF document for the user request … mainly to get mobile email downloads to be friendly … and so this opened the door for …
SMS … to access that enduring PDF as a URL in the SMS message (that becomes a link for the recipient)

… the email methodology used being that “midair feeling” Ajax/FormData approach in our changed tutorial_to_animated_gif.php inhouse Animated GIF Creator serverside PHP web application …

<?php echo ”
function emailhtmlit() { var induri=ginduri; var pemail='" . urldecode($_GET['outpdf']) . urldecode($_POST['outpdf']) . "'; if (pemail != null) { if (pemail.indexOf('@') != -1 || (pemail.trim() != '' && pemail.trim().replace(/0/g,'').replace(/1/g,'').replace(/2/g,'').replace(/3/g,'').replace(/4/g,'').replace(/5/g,'').replace(/6/g,'').replace(/7/g,'').replace(/8/g,'').replace(/9/g,'') == '')) { if (induri.trim() == '') { if (induri == '') { document.getElementById('pdfproposed').src='./animegif.pdf?rand=' + Math.floor(Math.random() * 19854654); } else { ginduri='found'; } setTimeout(emailhtmlit, 15000); } else { ginduri=''; var zhr = new XMLHttpRequest(); var zform=new FormData(); if (pemail.indexOf('@') != -1) { zform.append('to', pemail); } zform.append('inline', '" . dirname(__FILE__) . DIRECTORY_SEPARATOR . "animegif.pdf" . "'); zform.append('subj', 'My PDF version of Animated GIF via RJM Programming ... '); zform.append('tdhuhta', ('<body><div title=\"" . explode('/animegif',$durlis)[0] . '/animegif/' . server_remote_addr() . "_\" style=\"overflow:auto;-webkit-overflow-scrolling:touch;height:100%;\"><object style=\"width:100%;height:900px;\" type=\"application/pdf\" data=\"" . dirname(__FILE__) . DIRECTORY_SEPARATOR . 'animegif.pdf' . "\"><embed style=\"width:100%;height:900px;\" type=\"application/pdf\" src=\"" . dirname(__FILE__) . DIRECTORY_SEPARATOR . 'animegif.pdf' . "\"></embed></object></div></body>')); //zform.append('tdhuhta', ('<body><iframe srcdoc=\"" . dirname(__FILE__) . DIRECTORY_SEPARATOR . 'animegif.pdf' . "\"></iframe></body>')); zhr.open('post', '//www.rjmprogramming.com.au/HTMLCSS/emailhtml.php', true); zhr.send(zform); if (pemail.indexOf('@') == -1) { var hrefp=document.getElementById('pdfsms').href.split('&body=')[0]; hrefp+=pemail.trim() + '&body=' + document.getElementById('pdfsms').href.split('&body=')[1]; document.getElementById('pdfsms').href=hrefp; document.getElementById('pdfsms').click(); } } } } }
“; ?>

… and this called on our PHP email creator helper to better interface in its $_POST arguments reading section in our changed emailhtml.php inhouse email creator helper serverside PHP web application …

<?php
$psacv=""; $okayin=true; $subd=""; $subptitle=''; $subdata=""; $subfile=""; $getpostfound=false; <br> foreach( $_POST as $name=>$val ) { if ($val != "") { // blah blah blah //file_put_contents("jnv." . $name, "jnv.inv00 " . strlen($phpcont)); if ($name == "tdhuhta" && $subfile != "" && $subdata != "" && strpos(str_replace("+"," ",urldecode($val)), $subfile) !== false) { if (strpos(str_replace("+"," ",urldecode($val)), ' srcdoc="') !== false || strpos(str_replace("+"," ",urldecode($val)), ' data="') !== false) { if (strpos(str_replace("+"," ",urldecode($val)), ' title="') !== false) { //file_put_contents('haaa.aaa',explode('/animegif/', explode('"', explode(' title="', str_replace("+"," ",urldecode($val)))[1])[0])[1]); if (!file_exists('../PHP/animegif/' . explode('/animegif/', explode('"', explode(' title="', str_replace("+"," ",urldecode($val)))[1])[0])[1] . 'animegif.pdf')) { if (file_exists('../PHP/animegif/animegif.pdf')) { copy('../PHP/animegif/animegif.pdf', '../PHP/animegif/' . explode('/animegif/', explode('"', explode(' title="', str_replace("+"," ",urldecode($val)))[1])[0])[1] . 'animegif.pdf'); } } $psacv=explode('"', explode(' title="', str_replace("+"," ",urldecode($val)))[1])[0] . 'animegif.pdf'; $subptitle='<a target=_blank href="' . explode('"', explode(' title="', str_replace("+"," ",urldecode($val)))[1])[0] . 'animegif.pdf">Mobile whole PDF</a><br>'; } $vrest=explode('"', explode(' srcdoc="',str_replace("+"," ",urldecode($val)))[1])[0]; $val=urlencode("<body>" . $subptitle . "<iframe style='width:100%;height:95vh;overflow:auto;-webkit-overflow-scrolling:touch;' srcdoc='<div style=width:92%;height:95vh;overflow:auto;-webkit-overflow-scrolling:touch;><object id=myobj style=width:95%;height:95vh; type=application/pdf data=\"" . $subdata . "\"></object></div>'></iframe></body>"); } // blah blah blah if ($name == "inline") { if (strpos(str_replace("+"," ",urldecode($val)), 'animegif.pdf') !== false && isset($_POST['tdhuhta'])) { if (file_exists(str_replace("+"," ",urldecode($val)))) { $subfile=str_replace("+"," ",urldecode($val)); $subdata='data:application/pdf;base64,' . base64_encode(file_get_contents(str_replace("+"," ",urldecode($val)))); $val=""; $name="x"; $okayin=false; } } // blah blah blah } }
?>

Creating the PDFs got helped out in “reliability terms” via the introduced animegif.php inhouse Wait Around Longer serverside PHP web application.

Previous relevant Animated GIF Creator PDF Conversion Tutorial is shown below.

Animated GIF Creator PDF Conversion Tutorial

Up to yesterday’s Animated GIF Creator Slide Specific Application Tutorial the recent progress had us …

knowing the good places to intervene between the original slide image data being read in and the animated GIF slide output … and …
involvement of ImageMagick … so, today, these two help us down the path to …
adding PDF as an output format possibility, in addition to the animated GIF and other ideas floated as output formats

… with our changed tutorial_to_animated_gif.php inhouse Animated GIF Creator serverside PHP web application.

We have more “reliability work” and “email sharing work” to go after today’s start, but it primarily called on ImageMagick command line’s talent for a command like …

convert /tmp/imtmp0*.*[gGmMiI]* /tmp/imtmp000.pdf

… to “concatenate” into the one output PDF file (called “/tmp/imtmp000.pdf”) the slides, arranged by our code into that “/tmp/imtmp0*.*[gGmMiI]*” (file specification) arrangement above. Yes, we meant “convert” above, as “mogrify” (batch work) appears not to be able to perform this task.

We hope you stay the course!

Previous relevant Animated GIF Creator Slide Specific Application Tutorial is shown below.

Animated GIF Creator Slide Specific Application Tutorial

It’s all fine and good improving on the ImageMagick and GD and Exif functionality modifications like with yesterday’s Animated GIF Creator Exif Rotation Compensation Tutorial, but in reality, if you are going to start creating animated GIFs to explain a process, you are going to want to apply these “slide modifiers” on a slide by slide basis, rather than enforcing a “whole of animated GIF slide set” paradigm, as for the last few days worth of work.

And so, we decided to do what we often do, “sliding in” more functionality (chortle, chortle). We tend to want to …

start with hardcoded text (or element) … somewhere … today it happens to be in an HTML span element that once involved just …
<span id="smyim"></span>
… and used to get filled, Javascript DOM wise, when needed via …
document.getElementById('smyim').innerHTML='ImageMagick switches: '; // and yes, it remains that way even now, but read on ...
add intelligence (quite often that being onclick logic(s)) to that hardcoded element via …
<span id=smyim title=Application onclick=applyto(); style=cursor:pointer;text-decoration:underline;></span>
that serves the purpose, as the user clicks/taps it (alerted to that fact, perhaps, because we underline the element and add an appropriate cursor when hovering over it (plus a title)), of calling Javascript …
function applyto() { var huhto=prompt('Apply ImageMagick and/or GD to which slides, in comma separated list, counting starting with 1? Defaults to applying to all slides. Comma delimit. Negatives mean all but. Ranges can be specified. For example ... 2,4-7,9', document.getElementById('appliedto').value); if (huhto == null) { huhto=''; } if (huhto.trim() == '') { document.getElementById('appliedto').value=''; document.getElementById('smyim').title='Application'; } else { document.getElementById('appliedto').value=huhto.trim(); document.getElementById('smyim').title=huhto.trim(); } }
to glean an (often times out of the normal workflow of the web application) informational piece of data, interactively, from the user, via a Javascript prompt popup

So that’s the clientside of this work … “alerting the user to the existance of the functionality” you might say.

And then there’s “the application” of that nuanced user requirement. And that’s where the “inhouse ‘our’ prefix to wrapper function name paradigms” come in handy. We introduced “blanket” functionality thoughts via this approach, and so to “partially undo” that thinking, we make the “our” prefix conditional, as is available to us with our changed tutorial_to_animated_gif.php inhouse Animated GIF Creator serverside PHP web application (helped out by a changed exif_rotation_check.php inhouse Exif detector PHP helper), as per …

<?php
function ourcomplicated($inio, $iappl) { $ideasl=explode(",", str_replace(' ','',$iappl)); $xour="our"; for ($iqa=0; $iqa<sizeof($ideasl); $iqa++) { if (trim($ideasl[$iqa]) != '') { $xour=""; if (('-' . $inio) == trim($ideasl[$iqa])) { return ""; } $ideasr=explode("-", str_replace(' ','',trim($ideasl[$iqa]))); for ($iqb=0; $iqb<sizeof($ideasr); $iqb++) { if (('' . $inio) == trim($ideasr[$iqb])) { return "our"; } if ($iqb == 1) { if (trim($ideasr[1]) == "") { $ideasr[1]="99999999"; } if ($inio >= $ideasr[0] && $inio <= $ideasr[1]) { return "our"; } } } } } return $xour; }
?>

… teamed with …

<?php
$ours="our"; for ($io=1; $io$ours=ourcomplicated($io, $iappliedto); // blah blah blah if (strpos($aphoto[0], ";base64,") !== false) { $gifphp.=str_replace("imagecreatefromjpeg('source01.jpg');", "" . $ours . "imagecreatefromstring(base64_decode('" . explode(";base64,",$aphoto[0])[1] . "'));", str_replace("\$text='';", "\$text=\"" . str_replace("+"," ",urldecode($atext)) . "\";", $eachonestring)); } else if (strpos(strtolower($aphoto[0]), "//") !== false) { $gifphp.=str_replace("imagecreatefromjpeg('source01.jpg');", "" . $ours . "imagecreatefromstring(@file_get_contents('" . $prefix . $aphoto[0] . "'));", str_replace("\$text='';", "\$text=\"" . str_replace("+"," ",urldecode($atext)) . "\";", $eachone)); } else if (strpos(strtolower($aphoto[0]), ".jp") !== false) { if (strpos($prefix, "../../") !== false && !file_exists($prefix . $aphoto[0]) && file_exists(str_replace("../../","../",$prefix) . $aphoto[0])) { $prefix=str_replace("../../","../",$prefix); } //file_put_contents('qpqp.qpqp', $eachone . "\n\n" . $atext . "\n\n" . str_replace("\$text='';", "\$text=\"" . str_replace("+"," ",urldecode($atext)) . "\";", $eachone)); $gifphp.=str_replace("imagecreatefromjpeg('source01.jpg');", "" . $ours . "imagecreatefromjpeg('" . $prefix . $aphoto[0] . "');", str_replace("\$text='';", "\$text=\"" . str_replace("+"," ",urldecode($atext)) . "\";", $eachone)); //file_put_contents('qpqpqp.qpqpqp', $gifphp); } else if (strpos(strtolower($aphoto[0]), ".png") !== false) { if (strpos($prefix, "../../") !== false && !file_exists($prefix . $aphoto[0]) && file_exists(str_replace("../../","../",$prefix) . $aphoto[0])) { $prefix=str_replace("../../","../",$prefix); } $gifphp.=str_replace("imagecreatefromjpeg('source01.jpg');", "" . $ours . "imagecreatefrompng('" . $prefix . $aphoto[0] . "');", str_replace("\$text='';", "\$text=\"" . str_replace("+"," ",urldecode($atext)) . "\";", $eachone)); } else if (strpos(strtolower($aphoto[0]), ".gif") !== false) { if (strpos($prefix, "../../") !== false && !file_exists($prefix . $aphoto[0]) && file_exists(str_replace("../../","../",$prefix) . $aphoto[0])) { $prefix=str_replace("../../","../",$prefix); } $gifphp.=str_replace("imagecreatefromjpeg('source01.jpg');", "" . $ours . "imagecreatefromgif('" . $prefix . $aphoto[0] . "');", str_replace("\$text='';", "\$text=\"" . str_replace("+"," ",urldecode($atext)) . "\";", $eachone)); } else if (strpos(strtolower($aphoto[0]), ".bmp") !== false) { if (strpos($prefix, "../../") !== false && !file_exists($prefix . $aphoto[0]) && file_exists(str_replace("../../","../",$prefix) . $aphoto[0])) { $prefix=str_replace("../../","../",$prefix); } $gifphp.=str_replace("imagecreatefromjpeg('source01.jpg');", "" . $ours . "imagecreatefrombmp('" . $prefix . $aphoto[0] . "');", str_replace("\$text='';", "\$text=\"" . str_replace("+"," ",urldecode($atext)) . "\";", $eachone)); } // blah blah blah }
?>

We use these “new abilities” better explaining “the abscence or otherwise of Exif checking”, and the implications of that in the animated GIF creator woooooorrrrrrlllllddd, contrasting the first two slides, showing one with “No Exif checking” (the bad old days) versus “With Exif checking” (the renaissance of liberated thinking in the South South East woooorrrrrlllldddd) in today’s animated GIF presentation.

Get the picture?!

Previous relevant Animated GIF Creator Exif Rotation Compensation Tutorial is shown below.

Animated GIF Creator Exif Rotation Compensation Tutorial

The recent couple of days of work like yesterday’s Animated GIF Creator GD Transformations Interfacing Tutorial have given us “rotation functionality” tools to counteract the unusual effects Exif …

Exchangeable image file format (officially Exif, according to JEIDA/JEITA/CIPA specifications) is a standard that specifies the formats for images, sound, and ancillary tags used by digital cameras (including smartphones), scanners and other systems handling image and sound files recorded by digital cameras.

… can have converting mobile device camera created images into animated GIFs via our changed tutorial_to_animated_gif.php inhouse Animated GIF Creator PHP web application.

But with some photos it’s there in the photo’s metadata information letting the future user know what orientation the camera of that mobile device was in as you took the photo. In order to help our animated GIF creator, the first slide image is scoured for Exif metadata and if found, a suitable rotation correction can be applied to the slides there and then. In order to scour for Exif metadata we needed to write a exif_rotation_check.php inhouse Exif detector PHP helper.

Previous relevant Animated GIF Creator GD Transformations Interfacing Tutorial is shown below.

Animated GIF Creator GD Transformations Interfacing Tutorial

The PHP GD image library is so much more useful than for the “filters” interfaced to with yesterday’s Animated GIF Creator GD Filter Interfacing Tutorial. Under an “umbrella term” transformations, today we add interfacing to GD functionality …

… into our changed tutorial_to_animated_gif.php inhouse Animated GIF Creator PHP web application. We found it more user friendly to tailor the asking of numerical parameters for these GD calls work via …

<?php
$gfcds=''; $gdfs=[]; if (strpos(($imvgn . $imafn . $imqty . $imgds), '|') !== false) { $gdfs=explode(';', trim(explode('|', $imvgn . $imafn . $imqty . $imgds)[1])); for ($itf=0; $itf<sizeof($gdfs); $itf++) { if (trim($gdfs[$itf]) != '') { if (trim($gdfs[$itf]) == strtolower(trim($gdfs[$itf]))) { $gfcds.=chr(10) . " imagefilter(" . "$" . "oimo, IMG_FILTER_" . strtoupper(trim($gdfs[$itf])) . "); " . chr(10); } else if (trim($gdfs[$itf]) == strtoupper(trim($gdfs[$itf]))) { $gfcds.=chr(10) . " image" . explode(',',explode(" ",strtolower(trim($gdfs[$itf])))[0])[0] . "(" . "$" . "oimo, IMG_" . str_replace(" ","_",strtoupper(trim( str_replace(explode(' ',$gdfs[$itf])[0] . ' ','',$gdfs[$itf]) ))) . "); " . chr(10); } else if (strpos(strtoupper(trim($gdfs[$itf])), "SCALE") !== false) { $gfcds.=chr(10) . " $" . "oimo=image" . explode(',',explode(" ",strtolower(trim($gdfs[$itf])))[0])[0] . "(" . "$" . "oimo" . str_replace(" ","_",(trim( str_replace(explode(',',explode(" ",(trim($gdfs[$itf])))[0])[0],'',$gdfs[$itf]) ))) . "); " . chr(10); } else if (strpos(strtoupper(trim($gdfs[$itf])), "COPY") === false) { $gfcds.=chr(10) . " image" . explode(',',explode(" ",strtolower(trim($gdfs[$itf])))[0])[0] . "(" . "$" . "oimo" . str_replace(" ","_",(trim( str_replace(explode(',',explode(" ",(trim($gdfs[$itf])))[0])[0],'',$gdfs[$itf]) ))) . "); " . chr(10); } else { $gfcds.=chr(10) . " image" . explode(',',explode(" ",strtolower(trim($gdfs[$itf])))[0])[0] . "(" . "$" . "oimo" . "," . "$" . "oimo" . explode("," . "$" . "oimo", $gdfs[$itf])[1] . "); " . chr(10); } } } }
?>

… to work with modified PHP writes PHP of the ilk …

<?php echo ”
function ourimagecreatefromstring(\$inidis) { global \$imvgn, \$imafn, \$imqty, \$imgds, \$gfcds; if ((\$imvgn . \$imafn . \$imqty . \$imgds) != '' && strpos(\$inidis, ';base64,') !== false) { \$extis=str_replace('jpeg','jpg',explode('/', explode(';base64,', \$inidis)[0])[1]); \$inextis=\$extis; \$sofarout='/tmp/imtmp.' . \$extis; foreach (glob('/tmp/imtmp.*') as \$imfilename) { unlink(\$imfilename); } file_put_contents(\$sofarout, base64_encode(explode(';base64,', \$inidis)[1])); \$fzis=filesize(\$sofarout); if (trim(explode('|', \$imvgn . \$imafn . \$imqty . \$imgds)[0]) != '') { exec('" . $immogpath . "mogrify ' . explode('|', \$imvgn . \$imafn . \$imqty . \$imgds)[0] . ' /tmp/imtmp.' . \$extis); } foreach (glob('/tmp/imtmp.*') as \$imfilename) { if (filesize(\$imfilename) != \$fzis) { // strpos(\$imfilename, '.' . \$extis) === false || \$sofarout=\$imfilename; \$extis=explode('.', \$imfilename)[1]; } } \$oimo=null; if (strtolower(\$extis) == 'png') { \$oimo=imagecreatefrompng('/tmp/imtmp.' . \$extis); " . $gfcds . " } else if (strtolower(\$extis) == 'bmp') { \$oimo=imagecreatefrombmp('/tmp/imtmp.' . \$extis); " . $gfcds . " } else if (strtolower(\$extis) == 'gif') { \$oimo=imagecreatefromgif('/tmp/imtmp.' . \$extis); " . $gfcds . " } else if (strpos(strtolower(\$extis), 'jp') !== false) { \$oimo=imagecreatefromjpeg('/tmp/imtmp.' . \$extis); " . $gfcds . " } if (\$oimo) { return \$oimo; } } else if ((\$imvgn . \$imafn . \$imqty . \$imgds) != '') { \$extis=str_replace('jpeg','jpg','" . $inextis . "'); \$inextis=\$extis; \$sofarout='/tmp/imtmp.' . \$extis; foreach (glob('/tmp/imtmp.*') as \$imfilename) { unlink(\$imfilename); } file_put_contents(\$sofarout, \$inidis); \$fzis=filesize(\$sofarout); if (strpos(strtolower((\$imvgn . \$imafn . \$imqty . \$imgds)), '-format ') === false) { \$imvgn.=' -format " . str_replace('jpg','jpeg',$inextis) . " '; } if (trim(explode('|', \$imvgn . \$imafn . \$imqty . \$imgds)[0]) != '') { exec('" . $immogpath . "mogrify ' . explode('|', \$imvgn . \$imafn . \$imqty . \$imgds)[0] . ' /tmp/imtmp.' . \$extis); } foreach (glob('/tmp/imtmp.*') as \$imfilename) { if (filesize(\$imfilename) != \$fzis) { // strpos(\$imfilename, '.' . \$extis) === false) { \$sofarout=\$imfilename; \$extis=explode('.', \$imfilename)[1]; } } \$oimo=null; if (strtolower(\$extis) == 'png') { \$oimo=imagecreatefrompng('/tmp/imtmp.' . \$extis); " . $gfcds . " } else if (strtolower(\$extis) == 'bmp') { \$oimo=imagecreatefrombmp('/tmp/imtmp.' . \$extis); " . $gfcds . " } else if (strtolower(\$extis) == 'gif') { \$oimo=imagecreatefromgif('/tmp/imtmp.' . \$extis); " . $gfcds . " } else if (strpos(strtolower(\$extis), 'jp') !== false) { \$oimo=imagecreatefromjpeg('/tmp/imtmp.' . \$extis); " . $gfcds . " } if (\$oimo) { return \$oimo; } } return imagecreatefromstring(\$inidis); }
“; “?>

… and to get there clientwise, in the Javascript …

Previous relevant Animated GIF Creator GD Filter Interfacing Tutorial is shown below.

Animated GIF Creator GD Filter Interfacing Tutorial

We are into image modification on the way to creating “compiled” animated GIF images, at the moment. Yesterday’s Animated GIF Creator ImageMagick Interfacing Tutorial got us interfacing (or integrating) …

ImageMagick batch processing “mogrify” ideas … and, today, it is the turn of …
GD image filters …

… into our changed tutorial_to_animated_gif.php inhouse Animated GIF Creator PHP web application.

Previous relevant Animated GIF Creator ImageMagick Interfacing Tutorial is shown below.

Animated GIF Creator ImageMagick Interfacing Tutorial

Yes, you guessed it! On top of yesterday’s ImageMagick Vignette Primer Tutorial, today we want to interface the ImageMagick batch processing “mogrify” ideas into our changed tutorial_to_animated_gif.php inhouse Animated GIF Creator PHP web application.

“Interfacing” (or integrating) into code often has you asking the question …

Where do we intervene to place our logic?

We’ve decided to “wrap” our PHP GD calls …

… into inhouse “our” prefixed function versions as per (PHP writing out PHP) …

<?php echo ”
\$imvgn='" . $imvgn . "'; /" . "/ vignette factor \$imafn='" . $imafn . "'; /" . "/ affine transformation \$imqty='" . $imqty . "'; /" . "/ image conversion and/or quality RE jpeg function ourimagecreatefromstring(\$inidis) { global \$imvgn, \$imafn, \$imqty; if ((\$imvgn . \$imafn . \$imqty) != '' && strpos(\$inidis, ';base64,') !== false) { \$extis=str_replace('jpeg','jpg',explode('/', explode(';base64,', \$inidis)[0])[1]); \$inextis=\$extis; \$sofarout='/tmp/imtmp.' . \$extis; foreach (glob('/tmp/imtmp.*') as \$imfilename) { unlink(\$imfilename); } file_put_contents(\$sofarout, base64_encode(explode(';base64,', \$inidis)[1])); \$fzis=filesize(\$sofarout); exec('" . $immogpath . "mogrify ' . \$imvgn . \$imafn . \$imqty . ' /tmp/imtmp.' . \$extis); foreach (glob('/tmp/imtmp.*') as \$imfilename) { if (filesize(\$imfilename) != \$fzis) { // strpos(\$imfilename, '.' . \$extis) === false || \$sofarout=\$imfilename; \$extis=explode('.', \$imfilename)[1]; } } if (strtolower(\$extis) == 'png') { return imagecreatefrompng('/tmp/imtmp.' . \$extis); } else if (strtolower(\$extis) == 'bmp') { return imagecreatefrombmp('/tmp/imtmp.' . \$extis); } else if (strtolower(\$extis) == 'gif') { return imagecreatefromgif('/tmp/imtmp.' . \$extis); } else if (strpos(strtolower(\$extis), 'jp') !== false) { return imagecreatefromjpeg('/tmp/imtmp.' . \$extis); } } else if ((\$imvgn . \$imafn . \$imqty) != '') { \$extis=str_replace('jpeg','jpg','" . $inextis . "'); \$inextis=\$extis; \$sofarout='/tmp/imtmp.' . \$extis; foreach (glob('/tmp/imtmp.*') as \$imfilename) { unlink(\$imfilename); } file_put_contents(\$sofarout, \$inidis); \$fzis=filesize(\$sofarout); if (strpos(strtolower((\$imvgn . \$imafn . \$imqty)), '-format ') === false) { \$imvgn.=' -format " . str_replace('jpg','jpeg',$inextis) . " '; } exec('" . $immogpath . "mogrify ' . \$imvgn . \$imafn . \$imqty . ' /tmp/imtmp.' . \$extis); foreach (glob('/tmp/imtmp.*') as \$imfilename) { if (filesize(\$imfilename) != \$fzis) { // strpos(\$imfilename, '.' . \$extis) === false) { \$sofarout=\$imfilename; \$extis=explode('.', \$imfilename)[1]; } } if (strtolower(\$extis) == 'png') { return imagecreatefrompng('/tmp/imtmp.' . \$extis); } else if (strtolower(\$extis) == 'bmp') { return imagecreatefrombmp('/tmp/imtmp.' . \$extis); } else if (strtolower(\$extis) == 'gif') { return imagecreatefromgif('/tmp/imtmp.' . \$extis); } else if (strpos(strtolower(\$extis), 'jp') !== false) { return imagecreatefromjpeg('/tmp/imtmp.' . \$extis); } } return imagecreatefromstring(\$inidis); } function ourimagecreatefromjpeg(\$inidis) { global \$imvgn, \$imafn, \$imqty; if ((\$imvgn . \$imafn . \$imqty) != '') { \$extis='jpg'; \$inextis=\$extis; \$sofarout='/tmp/imtmp.' . \$extis; foreach (glob('/tmp/imtmp.*') as \$imfilename) { unlink(\$imfilename); } file_put_contents(\$sofarout, \$inidis); \$fzis=filesize(\$sofarout); exec('" . $immogpath . "mogrify ' . \$imvgn . \$imafn . \$imqty . ' /tmp/imtmp.' . \$extis); foreach (glob('/tmp/imtmp.*') as \$imfilename) { if (filesize(\$imfilename) != \$fzis) { // strpos(\$imfilename, '.' . \$extis) === false) { \$sofarout=\$imfilename; \$extis=explode('.', \$imfilename)[1]; } } if (strtolower(\$extis) == 'png') { return imagecreatefrompng('/tmp/imtmp.' . \$extis); } else if (strtolower(\$extis) == 'bmp') { return imagecreatefrombmp('/tmp/imtmp.' . \$extis); } else if (strtolower(\$extis) == 'gif') { return imagecreatefromgif('/tmp/imtmp.' . \$extis); } else if (strpos(strtolower(\$extis), 'jp') !== false) { return imagecreatefromjpeg('/tmp/imtmp.' . \$extis); } } return imagecreatefromjpeg(\$inidis); } function ourimagecreatefrompng(\$inidis) { global \$imvgn, \$imafn, \$imqty; if ((\$imvgn . \$imafn . \$imqty) != '') { \$extis='png'; \$inextis=\$extis; \$sofarout='/tmp/imtmp.' . \$extis; foreach (glob('/tmp/imtmp.*') as \$imfilename) { unlink(\$imfilename); } file_put_contents(\$sofarout, \$inidis); \$fzis=filesize(\$sofarout); exec('" . $immogpath . "mogrify ' . \$imvgn . \$imafn . \$imqty . ' /tmp/imtmp.' . \$extis); foreach (glob('/tmp/imtmp.*') as \$imfilename) { if (filesize(\$imfilename) != \$fzis) { // strpos(\$imfilename, '.' . \$extis) === false) { \$sofarout=\$imfilename; \$extis=explode('.', \$imfilename)[1]; } } if (strtolower(\$extis) == 'png') { return imagecreatefrompng('/tmp/imtmp.' . \$extis); } else if (strtolower(\$extis) == 'bmp') { return imagecreatefrombmp('/tmp/imtmp.' . \$extis); } else if (strtolower(\$extis) == 'gif') { return imagecreatefromgif('/tmp/imtmp.' . \$extis); } else if (strpos(strtolower(\$extis), 'jp') !== false) { return imagecreatefromjpeg('/tmp/imtmp.' . \$extis); } } return imagecreatefrompng(\$inidis); } function ourimagecreatefromgif(\$inidis) { global \$imvgn, \$imafn, \$imqty; if ((\$imvgn . \$imafn . \$imqty) != '') { \$extis='gif'; \$inextis=\$extis; \$sofarout='/tmp/imtmp.' . \$extis; foreach (glob('/tmp/imtmp.*') as \$imfilename) { unlink(\$imfilename); } file_put_contents(\$sofarout, \$inidis); \$fzis=filesize(\$sofarout); exec('" . $immogpath . "mogrify ' . \$imvgn . \$imafn . \$imqty . ' /tmp/imtmp.' . \$extis); foreach (glob('/tmp/imtmp.*') as \$imfilename) { if (filesize(\$imfilename) != \$fzis) { // strpos(\$imfilename, '.' . \$extis) === false) { \$sofarout=\$imfilename; \$extis=explode('.', \$imfilename)[1]; } } if (strtolower(\$extis) == 'png') { return imagecreatefrompng('/tmp/imtmp.' . \$extis); } else if (strtolower(\$extis) == 'bmp') { return imagecreatefrombmp('/tmp/imtmp.' . \$extis); } else if (strtolower(\$extis) == 'gif') { return imagecreatefromgif('/tmp/imtmp.' . \$extis); } else if (strpos(strtolower(\$extis), 'jp') !== false) { return imagecreatefromjpeg('/tmp/imtmp.' . \$extis); } } return imagecreatefromgif(\$inidis); } function ourimagecreatefrombmp(\$inidis) { global \$imvgn, \$imafn, \$imqty; if ((\$imvgn . \$imafn . \$imqty) != '') { \$extis='bmp'; \$inextis=\$extis; \$sofarout='/tmp/imtmp.' . \$extis; foreach (glob('/tmp/imtmp.*') as \$imfilename) { unlink(\$imfilename); } file_put_contents(\$sofarout, \$inidis); \$fzis=filesize(\$sofarout); exec('" . $immogpath . "mogrify ' . \$imvgn . \$imafn . \$imqty . ' /tmp/imtmp.' . \$extis); foreach (glob('/tmp/imtmp.*') as \$imfilename) { if (filesize(\$imfilename) != \$fzis) { // strpos(\$imfilename, '.' . \$extis) === false) { \$sofarout=\$imfilename; \$extis=explode('.', \$imfilename)[1]; } } if (strtolower(\$extis) == 'png') { return imagecreatefrompng('/tmp/imtmp.' . \$extis); } else if (strtolower(\$extis) == 'bmp') { return imagecreatefrombmp('/tmp/imtmp.' . \$extis); } else if (strtolower(\$extis) == 'gif') { return imagecreatefromgif('/tmp/imtmp.' . \$extis); } else if (strpos(strtolower(\$extis), 'jp') !== false) { return imagecreatefromjpeg('/tmp/imtmp.' . \$extis); } } return imagecreatefrombmp(\$inidis); }
“; ?>

… and change existant calls into (equivalent inhouse) “our” function calls as above.

Previous relevant ImageMagick Vignette Primer Tutorial is shown below.

ImageMagick Vignette Primer Tutorial

Continuing on with the ImageMagick batch processing “mogrify” ideas of yesterday’s ImageMagick Batch Image Conversion Affine Transformation Tutorial and the “vignette” image editing ideas of Gimp Vignette Primer Tutorial, as below, today, we took some pet photos with an iPad’s Camera app and shared them off the Photos app via two Mail sharing option emails containing seven attachments each. Using an iPad, the JPEG “jpg” output files were too big for our inhouse Animated GIF Creator PHP web application to handle, and so to perform the …

animated GIF presentation, off these downloaded email photo attachments … and along the way …
quality adjusted them (yes, “mogrify” does not stuff JPG to JPG conversions, and we used “mogrify” -quality 20% switch here) … and …
rotate them 180 degrees (“mogrify” uses switches -affine -1,0,0,-1,0,0 -transform +repage here) … and …
vignette 50% (“mogrify” uses switch -vignette 50 here)

… on the way to compiling into an animated GIF image, and we turned to ImageMagick again, using its affine transformation talents, along with its awesome vignetting talents …

mogrify -quality 20% petvignettes12/*.jpg -comment "Straight off iPad 3x smaller to 1100x820 pet_photos_jpg_to_quality_20_jpg_1100_820.gif"

… where the last two dropdown options will be similar, the last showing the input image into ImageMagick can be an animated GIF that is truely treated like an animated GIF.

By the way, should you be interested in photo orientation off a mobile device camera, have a read of PHP Exif Image Information Revisit Tutorial.

Nala and Luna and Charlie bid you a fond farewell!

Previous relevant Gimp Vignette Primer Tutorial is shown below.

Gimp Vignette Primer Tutorial

The last time we talked about the miraculous, redolent and amazing image editor called Gimp am sure there was someone in a shower … it stands to reason … and one of those showerers, surely, would have been singing The Gimp Song … and if not … why not? … but we digress … anyway we had the Gimp Transparency Primer Tutorial as shown below go into some image transparency issues with Gimp.

In today’s tutorial we make use of a great tutorial (even so far as with direct quotes below) called Add a Vignette to a Photograph with GIMP (thanks) to try a photographic technique called vignetting on one of the photographs we added, recently, into the mix of those of the Custom Header Image mix at this blog … specifically the one of Nala, the dog, on the door ledge. Need to warn you here and now that if there was the time all over again, it would be better achieved that second time around, but this is not the point with learning, but rather getting some starting point with a great “product” like Gimp, and trying it yourself, once you have a method. It boils down to:

Open Gimp graphical editor application
File->Open … pick your image file
Layer->New Layer (we’ll call “Vg”) … pick Foreground Colour
In the Layers dialog, click on your “Vg” layer to select it, and select Soft light from the “Mode” drop-down box
Right click on your “Vg” layer and go to Add Layer Mask. In the dialog that pops up, you want “Initialise Layer Mask to” set to “White (full opacity)”. Click “Add”
Below Opacity bar select Link icon next to Eye icon, which will already be showing
Use the freeform select tool (press F to bring this up) and draw a selection somewhere around the primary point of interest in your photo
Use your bucket tool (Shift+B) and click within the selection to fill it
Deselect your selection with Select->None
Go to Filters->Blur->Gaussian Blur. In the dialog that comes up, you want “Radius” set to a very large amount; a tenth of the longest edge of the photo is not too much
Click on your “Vg” layer to select it (if it isn’t already selected), and then slide the opacity slider towards the right until the effect is subtle enough. Our (ever so subtle) example of Nala, in the tutorial, used an opacity of about 66%
Click Export button in two windows (NB. this overwrites the image file, so if this is not desirable, export to a different image file name and/or type)

Here is an image comparison link.

As with most Gimp ideas, jump in and give it a go, as you’ll find your own ways and means of using this great product … am pretty sure.

Link to Gimp “spiritual home” … here.
Link to Gimp forum … here.

Previous relevant Gimp Transparency Primer Tutorial is shown below.

Gimp Transparency Primer Tutorial

Here is a tutorial that adds to a previous Gimp Layers Primer Tutorial as shown below, and gives you more insight into the massive possibilities of using a sophisticated image editor and use layers with various amounts of transparency, especially suited to use with png image files.

Today’s tutorial where we construct a Birthday Card that needs tweaking for the words in front to be seen a bit more clearly, by making the image behind a bit more transparent, changes the transparency of a single image via:

Open Gimp graphical editor application
File->Open Layers … pick your image file
If Layers window not showing, make it show via Windows->Layers – Brushes
Below Opacity bar select Link icon next to Eye icon, which will already be showing
Change Opacity bar setting to a value of Transparency (100% is Opaque, 0% is Transparent) that suits … today we do 70%
File->Export
Click Export button in two windows (NB. this overwrites the image file, so if this is not desirable, export to a different image file name and/or type)

As with most Gimp ideas, jump in and give it a go, as you’ll find your own ways and means of using this great product … am pretty sure.

Link to Gimp “spiritual home” … here.
Link to Gimp forum … here.

Previous relevant Gimp Layers Primer Tutorial is shown below.

Gimp Layers Primer Tutorial

Here is a tutorial that gives you an insight into the massive possibilities of using a sophisticated image editor and use layers with various amounts of transparency, especially suited to use with png image files.

Transparency (or its obverse, opacity) can be used to have the one image achieve several “ends” (ie. purposes). Although it is a bit of a clumsy example in the tutorial, you can see that the technique can be used for artistic purposes … often called “Photoshopping” (named after the more famous, and also brilliant, rival product, Photoshop).

Lots of those classic “Photoshopping” techniques can be achieved in Gimp, and some other tutorials at this blog touch on that.

Am sure you can imagine what the concept of a layer is with regard to image manipulation. Within Gimp, for beginners not used to this concept, you find yourself underestimating and underplaying what can be achieved with the various layers of a multi-layered image. In simplistic terms each layer has the functionality in Gimp to be treated as a whole new image, and this is the best way to think of it when trying to achieve what you want to achieve with Gimp.

Link to Gimp “spiritual home” … here.
Link to Gimp forum … here.

If this was interesting you may be interested in this too.

Posted in Animation, eLearning, Installers, Operating System, Software, Tutorials | Tagged audio, dnf, exec, ffmpeg, image, install, installer, media, Package Manager, PHP, programming, serverside, tutorial, video, web server | Leave a comment

AlmaLinux WordPress Site Health Installs Tutorial

Posted on July 20, 2024 by admin

AlmaLinux WordPress Site Health Installs Tutorial

Yesterday’s AlmaLinux Apache/PHP/MySql WordPress Migration Tutorial was about …

configuring the major players, software wise, running WordPress 6.6 on AlmaLinux 9.0.4 … and today …
via the WordPress admin area’s Tools menu’s Site Health report “One or more recommended modules are missing” section … for our website it discovered missing …
1. exif
2. imagick
3. fileinfo
4. intl

… and after a bit of lack of success we discovered from the dnf package manager information that the list “verb” could be very useful. That, along with …

php -v

… resulting in 8.1.19 made the choice of module name [moduleName] in …

dnf install [moduleName]

… module install statements a doddle, as you can see.

Previous relevant AlmaLinux Apache/PHP/MySql WordPress Migration Tutorial is shown below.

AlmaLinux Apache/PHP/MySql WordPress Migration Tutorial

Yes, we’re migrating again (as we were talking about with Apache/PHP/MySql Web Hosting Website Migration ssh Tutorial), though as you read this blog posting, if hot off the press here on 19/7/2024, we’ll not have transferred the DNS over yet, which we’ll outline the reasons for into the future. But, today, we’re excited to outline some steps after …

data migration … which our web hoster, Crazy Domains, did a good job regarding … ahead of …
seeing HTML and Javascript and CSS working fine straight away … and today’s progress migrating the WordPress Blog (involving serverside PHP and MySql) you are reading now …

… in terms of a migration consisting of (just in terms of major players) …

Description	From	To
Hosting VPS	CentOS 6.4 x86.64 WHM cPanel 11.38.2 (build 23)	AlmaLinux 9.4.0 cPanel 11.120
Operating System type	Linux 2.6.32-220.13.1.el6.x86_64	Linux 5.14.0-362.18.1.el9_3.x86_64
Web Server type	Apache 2.2.29	Apache 2.4.61
Server Language	PHP 5.4.38	PHP 8.1.19
Database type	MySql 5.1.70	MySql 8.0.38
Blog type	WordPress 4.1.1	WordPress 6.6

… that PHP leap very big (and we were near an edge regarding PHP 5.4.38 where a WP-CLI approach as below can still work … some earlier 5’s will not work, we were told along the way), and trepidatious, to our mind, but at least for WordPress, now working, via (just highlights, and we’ll leave out that it is great to have a backup of the MySql WordPress software and database ideally, before starting (because we already had one courtesy of the data migration above)) …

install WP-CLI … via ssh -p 22 [adminUser]@[newIPaddressForRJMProgrammingIntoTheFuture] … profuse thanks to this great advice …
# cd ~[websiteUser] # cd public_html/ITblog # curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar # php wp-cli.phar --info # chmod +x wp-cli.phar # mv wp-cli.phar /usr/local/bin/wp
run the plan ideas past Crazy Domains …
just install the WordPress Codex software in wp-admin and wp-includes … via ssh -p 22 [adminUser]@[newIPaddressForRJMProgrammingIntoTheFuture] …
# su - [websiteUser] $ cd ~[websiteUser] $ cd public_html/ITblog $ wp core download --force --skip-content
iron out just the one (yee, ha) plugins and/or theme issues that can occur entering a URL such as https://[newIPaddressForRJMProgrammingIntoTheFuture]/ITblog into a web browser address bar … removing …
New Google Plus Badge Widget
… plugin folder and files, because it’s name was apparent in the error message in the video below, and once done WordPress 6.6 starting looking like it’s old self … yee, ha …
amend wp-config.php to add in code statement … thanks to this great advice …
define('RELOCATE',true);
… meaning URLs such as https://[newIPaddressForRJMProgrammingIntoTheFuture]/ITblog just address data and software on [newIPaddressForRJMProgrammingIntoTheFuture] proposed new AlmaLinux9 web server (rather than ducking off to https://www.rjmprogramming.com.au/ITblog/ or https://[oldIPaddressForRJMProgrammingFromTheNearFuturePast]/ITblog/)
on our way to WordPress admin section via https://[newIPaddressForRJMProgrammingIntoTheFuture]/ITblog/wp-admin into the web browser address bar …
WordPress MySql database was updated (to align with PHP 8.1.19 and MySql 8.0.38 and WordPress 6.6 requirements)
in WordPress admin section General Settings make sure both WordPress Address (URL) and Site Address (URL) get mapped to …
https://[newIPaddressForRJMProgrammingIntoTheFuture]/ITblog
… during our migration phase, at least
practice writing …
Blog posts
… in WordPress Code editor (showing HTML, as we are most familiar with, but you can edit in a visual mode of use, if you like)

Feel free to see some of what we did here in video below …

Previous relevant Apache/PHP/MySql Web Hosting Website Migration ssh Tutorial is shown below.

Apache/PHP/MySql Web Hosting Website Migration ssh Tutorial

One of the most amazing aspects to the Crazy Domains performed data migration for the RJM Programming domain on 17/1/2023, thanks, was the way, from our point of view, it was …

Changed	No change
IP address	Any usernames
Power management	Any passwords
DNS mappings	ssh access (just with changed IP address slotted in for old one)
	sftp access
	cPanel access (just with changed IP address slotted in for old one)

… with so little affecting our day to day interactions with the website.

And so, on this topic, adding to the recent Apache/PHP/MySql Web Hosting Website Migration DNS Tutorial we want to hone in on that Any usernames and Any passwords resisting any need to change. How so? Well, it’s to do with how ssh and sftp and RSA keys and Fingerprints work. Let’s ask experts some questions.

How does ssh use rsa keys to help with login?

And we liked What Is an SSH Key? Generation, Authentication, Key Pair Info & More …

How does SSH RSA key work?

An SSH key relies upon the use of two related keys, a public key and a private key, that together create a key pair that is used as the secure access credential. The private key is secret, known only to the user, and should be encrypted and stored safely.

That “stored safely” is the key (chortle, chortle) to the cleverness of the system. The key is stored on the same web server disk migrated, and so access to a username’s previous password is maintained that way.

How does ssh use a fingerprint to help with login?

And we liked Check the SSH host fingerprint of a server with the web console …

Secure Shell (SSH) uses a fingerprint generated with the unique server host key so that a client can identify the server. Whenever the host fingerprint changes, SSH issues the following warning: The host fingerprint can’t be verified or it has changed. When you configure the SSH server, the host key generates randomly.

And so, we can see that the fingerprint mechanism can help the user authenticate, and have the key refresh itself, in the new web server IP address environment, as you can see in today’s tutorial picture.

Cute, huh?!

Previous relevant Apache/PHP/MySql Web Hosting Website Migration DNS Tutorial is shown below.

Apache/PHP/MySql Web Hosting Website Migration DNS Tutorial

Regarding Apache/PHP/MySql web hosting, and the recent Apache/PHP/MySql Web Hosting Website Migration Tutorial‘s subject matter regarding a Crazy Domains inspired Data Migration here at RJM Programming on 17/1/2023, we wanted to go over a last set of DNS setting …

The Domain Name System (DNS) is a hierarchical and distributed naming system for computers, services, and other resources in the Internet or other Internet Protocol (IP) networks. It associates various information with domain names assigned to each of the associated entities. Most prominently, it translates readily memorized domain names to the numerical IP addresses needed for locating and identifying computer services and devices with the underlying network protocols.[1] The Domain Name System has been an essential component of the functionality of the Internet since 1985.

… steps that represented that final “tying the knot” of repositioning the RJM Programming domain to a new IP address and allowing cPanel and ssh and sftp website access methods not have to change regarding username and password usage, just IP addresses, perhaps totally “behind the scenes”. Think of it like a “renaming the underbelly” exercise, perhaps!

Until these DNS settings are adjusted in “A records” up at the web hoster by the Webmaster or Web Hoster, and there is, typically, about a five minute wait afterwards, the website cannot be reached via your usual …

https://www.rjmprogramming.com.au

… web browser address bar way to navigate to the Landing Page of the RJM Programming domain.

If this was interesting you may be interested in this too.

Posted in eLearning, Installers, Operating System, Software, Tutorials | Tagged command line, configuration, dnf, Linux, operating system, Package Manager, PHP, software, tutorial, Wordpress, wordpress blog | Leave a comment

AlmaLinux Apache/PHP/MySql WordPress Migration Tutorial

Posted on July 19, 2024 by admin

AlmaLinux Apache/PHP/MySql WordPress Migration Tutorial

data migration … which our web hoster, Crazy Domains, did a good job regarding … ahead of …
seeing HTML and Javascript and CSS working fine straight away … and today’s progress migrating the WordPress Blog (involving serverside PHP and MySql) you are reading now …

… in terms of a migration consisting of (just in terms of major players) …

Description	From	To
Hosting VPS	CentOS 6.4 x86.64 WHM cPanel 11.38.2 (build 23)	AlmaLinux 9.4.0 cPanel 11.120
Operating System type	Linux 2.6.32-220.13.1.el6.x86_64	Linux 5.14.0-362.18.1.el9_3.x86_64
Web Server type	Apache 2.2.29	Apache 2.4.61
Server Language	PHP 5.4.38	PHP 8.1.19
Database type	MySql 5.1.70	MySql 8.0.38
Blog type	WordPress 4.1.1	WordPress 6.6

install WP-CLI … via ssh -p 22 [adminUser]@[newIPaddressForRJMProgrammingIntoTheFuture] … profuse thanks to this great advice …
# cd ~[websiteUser] # cd public_html/ITblog # curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar # php wp-cli.phar --info # chmod +x wp-cli.phar # mv wp-cli.phar /usr/local/bin/wp
run the plan ideas past Crazy Domains …
just install the WordPress Codex software in wp-admin and wp-includes … via ssh -p 22 [adminUser]@[newIPaddressForRJMProgrammingIntoTheFuture] …
# su - [websiteUser] $ cd ~[websiteUser] $ cd public_html/ITblog $ wp core download --force --skip-content
iron out just the one (yee, ha) plugins and/or theme issues that can occur entering a URL such as https://[newIPaddressForRJMProgrammingIntoTheFuture]/ITblog into a web browser address bar … removing …
New Google Plus Badge Widget
… plugin folder and files, because it’s name was apparent in the error message in the video below, and once done WordPress 6.6 starting looking like it’s old self … yee, ha …
amend wp-config.php to add in code statement … thanks to this great advice …
define('RELOCATE',true);
… meaning URLs such as https://[newIPaddressForRJMProgrammingIntoTheFuture]/ITblog just address data and software on [newIPaddressForRJMProgrammingIntoTheFuture] proposed new AlmaLinux9 web server (rather than ducking off to https://www.rjmprogramming.com.au/ITblog/ or https://[oldIPaddressForRJMProgrammingFromTheNearFuturePast]/ITblog/)
on our way to WordPress admin section via https://[newIPaddressForRJMProgrammingIntoTheFuture]/ITblog/wp-admin into the web browser address bar …
WordPress MySql database was updated (to align with PHP 8.1.19 and MySql 8.0.38 and WordPress 6.6 requirements)
in WordPress admin section General Settings make sure both WordPress Address (URL) and Site Address (URL) get mapped to …
https://[newIPaddressForRJMProgrammingIntoTheFuture]/ITblog
… during our migration phase, at least
practice writing …
Blog posts
… in WordPress Code editor (showing HTML, as we are most familiar with, but you can edit in a visual mode of use, if you like)

Feel free to see some of what we did here in video below …

Previous relevant Apache/PHP/MySql Web Hosting Website Migration ssh Tutorial is shown below.

Apache/PHP/MySql Web Hosting Website Migration ssh Tutorial

One of the most amazing aspects to the Crazy Domains performed data migration for the RJM Programming domain on 17/1/2023, thanks, was the way, from our point of view, it was …

Changed	No change
IP address	Any usernames
Power management	Any passwords
DNS mappings	ssh access (just with changed IP address slotted in for old one)
	sftp access
	cPanel access (just with changed IP address slotted in for old one)

… with so little affecting our day to day interactions with the website.

How does ssh use rsa keys to help with login?

And we liked What Is an SSH Key? Generation, Authentication, Key Pair Info & More …

How does SSH RSA key work?

An SSH key relies upon the use of two related keys, a public key and a private key, that together create a key pair that is used as the secure access credential. The private key is secret, known only to the user, and should be encrypted and stored safely.

How does ssh use a fingerprint to help with login?

And we liked Check the SSH host fingerprint of a server with the web console …

Secure Shell (SSH) uses a fingerprint generated with the unique server host key so that a client can identify the server. Whenever the host fingerprint changes, SSH issues the following warning: The host fingerprint can’t be verified or it has changed. When you configure the SSH server, the host key generates randomly.

Cute, huh?!

Previous relevant Apache/PHP/MySql Web Hosting Website Migration DNS Tutorial is shown below.

Apache/PHP/MySql Web Hosting Website Migration DNS Tutorial

The Domain Name System (DNS) is a hierarchical and distributed naming system for computers, services, and other resources in the Internet or other Internet Protocol (IP) networks. It associates various information with domain names assigned to each of the associated entities. Most prominently, it translates readily memorized domain names to the numerical IP addresses needed for locating and identifying computer services and devices with the underlying network protocols.[1] The Domain Name System has been an essential component of the functionality of the Internet since 1985.

https://www.rjmprogramming.com.au

… web browser address bar way to navigate to the Landing Page of the RJM Programming domain.

If this was interesting you may be interested in this too.

Posted in eLearning, Hardware, Installers, Networking, Operating System, Software, Tutorials | Tagged AlmaLinux, Apache, blog, code, command line, configuration, configure, content management, Crazy Domains, data, database, hoster, install, Linux, migration, MySql, PHP, plugin, posting, setting, source, ssh, theme, tutorial, upgrade, web hosting, Wordpress, wp-cli | Leave a comment

Earth Scanner Initial Placename Popup Window Tutorial

Posted on July 18, 2024 by admin

Earth Scanner Initial Placename Popup Window Tutorial

https://www.rjmprogramming.com.au/HTMLCSS/earth_scanner.html?nontz=Alice_Springs%7C133.8807%7C_23.6980%7CAU#Alice_Springs

… or equivalent in this case regarding real mantissa … remember rules?

https://www.rjmprogramming.com.au/HTMLCSS/earth_scanner.html?nontz=Alice_Springs%7C133.8807%7C_23.6980%7CAU#Alice_Springs

On revisiting this posting it occurred to us, that an improvement for our Earth Scanner web application would be to acknowledge this …

initial place … especially given it might disappear from the maps presented too soon …
if possible, and Wikipedia can help, present a popup window featuring background images regarding that place

… to supplement map information with real life photography, thanks Wikipedia. A new Javascript function …

… helped us with this tweaking of the changed earth_scanner.html code for the Earth Scanner web application.

Previous relevant Earth Bearing Distance Missing Two Hashtagged Mailto Sharing Tutorial is shown below.

Earth Bearing Distance Missing Two Hashtagged Mailto Sharing Tutorial

We’re returning to our Missing Two web application, after …

the recent Earth Bearing Distance Missing Two Earth Scanner Integration Tutorial Earth Scanner integration … because, today …
it becomes our “guinea pig” web application helping out the …
1. Ajax … and …
2. FormData … methodologies we use a lot around here in the past …
3. calling PHP emailhtml.php … to send …
4. emails containing (HTML perhaps) inline content or attachments … that being the “old way” being helped out by …
5. intervention in the code_s so that an “a” link “mailto:” with hashtagging scenario can augment this (ie. back it up)
… approaches we use with lots of our web application sharing functionalities

We found, in a “first draft” look at this there were three parts to the solution.

At the PHP code of emailhtml.php PHP mail based email creator code add this near the end …
<?php `if ($mailto != '') { echo "<ht" . "ml> <he" . "ad> <scr" . "ipt type='text/javascript'> function mto() { document.getElementById('amto').click(); } </scr" . "ipt> </he" . "ad> <bo" . "dy onload=mto();> <a target=_top style=display:none; href='" . $mailto . "' id=amto>Email</a> </bo" . "dy></ht" . "ml>"; }` ?> … helped out by, at the correct place … <?php `$mailto='mailto:' . $to . '?subject=' . str_replace('+','%20',urlencode($subject)); $mailto.='&body=https://www.rjmprogramming.com.au/htmlemail.html?rand=' . ('' . time()); $mailto.='#' . base64_encode(urlencode($hcont)); // base64_encode($hcont);` ?> … in the changed emailhtml.php PHP mail email inhouse interfacer
A totally new HTML/Javascript inhouse simple reader of hashtag data to display webpage data …
<html> <head> <title>Display Hashtagged HTML Data - RJM Programming - March, 2024</title> <script type='text/javascript'> var lh=(('' + location.hash).replace(/^null/g,'').replace(/^undefined/g,'')).replace(/^\#/g,''); if (lh != '') { if (lh.indexOf('JTNDY') == 0) { lh=decodeURIComponent(window.atob(decodeURIComponent(lh))).replace(/\+/g,' '); } else if (lh.indexOf(window.btoa('<')) == 0 \|\| lh.indexOf('PGJ') == 0) { lh=window.atob(lh).replace(/\+/g,' '); } else { lh=decodeURIComponent(lh).replace(/\+/g,' '); } } var lhdatas=lh.split('data:'); var prefixer='"'; var bodyis='<body></body>', headis=''; for (var ilh=1; ilh<lhdatas.length; ilh++) { prefixer=lhdatas[eval(-1 + ilh)].slice(-1).replace('(',')').replace('[',']').replace('{','}'); if (lhdatas[ilh].split(prefixer)[0].indexOf(' ') != -1) { lh=lh.replace(lhdatas[ilh].split(prefixer)[0], lhdatas[ilh].split(prefixer)[0].replace(/\ /g,'+')); } } if (lh.indexOf('</body>') != -1 && lh.indexOf('<body') != -1) { bodyis='<body' + lh.split('<body')[1].split('</html>')[0]; } else if (lh.trim() != '' && lh.indexOf('<head') == -1) { bodyis=lh; } if (lh.indexOf('</head>') != -1 && lh.indexOf('<head') != -1) { headis='<head' + lh.split('<head')[1].split('</head>')[0] + '</head>'; document.write(headis.replace(/https\:\/\//g,'//').replace(/http\:\/\//g,'//') + bodyis.replace(/https\:\/\//g,'//').replace(/http\:\/\//g,'//')); } else if (bodyis != '<body></body>') { document.write(bodyis.replace(/https\:\/\//g,'//').replace(/http\:\/\//g,'//')); } </script> </head> <body> </body> </html> … in htmlemail.html Hashtag Email Data Reader and Display “first draft”
Missing Two web application (as an example of what others will try to achieve, as time goes on) this way …
var xzhr=null; xzhr = new XMLHttpRequest(); var xform=new FormData(); xform.append('inline',''); xform.append('to',em.trim()); if (em.trim() != em) { xform.append('subj','Missing Two'); //var cbgtd=document.getElementById('tdlook').getBoundingClientRect(); xform.append('body','<body>' + document.body.innerHTML.replace(/\ id\=\"mysel\"/g, ' name="mysel" id="mysel"').replace(/\ size\=\"3\"/g, ' size="4"').replace(/\ data\-href\=/g, ' target=_blank href=').replace('</form>', '<br><br><input style=background-color:lightgreen; type=submit value=Solve></input></form>').replace('DISPLAY:table-row','DISPLAY:none').replace(lastfis,lasttis).replace(lasteis,lastenow).replace(lasteis2,lastenow2).replace(lastsis,lastsnow).replace(lastsis2,lastsnow2).replace('absolute;','absolute;display:none;').replace(flatf,tlatf).replace(flongf,tlongf).replace(flatt,tlatt).replace(flongt,tlongt).replace(fbrg,tbrg).replace(fdist,tdist) + '</body>'); } else { xform.append('subj','Missing Two'); xform.append('body','<body>' + document.body.innerHTML.replace(/\ id\=\"mysel\"/g, ' name="mysel" id="mysel"').replace(/\ size\=\"3\"/g, ' size="4"').replace(/\ data\-href\=/g, ' target=_blank href=').replace('</form>', '<br><br><input style=background-color:lightgreen; type=submit value=Solve></input></form>').replace('DISPLAY:table-row','DISPLAY:none').replace(lastfis,lasttis).replace(lasteis,lastenow).replace(lasteis2,lastenow2).replace(lastsis,lastsnow).replace(lastsis2,lastsnow2).replace('absolute;','absolute;display:none;').replace(flatf,tlatf).replace(flongf,tlongf).replace(flatt,tlatt).replace(flongt,tlongt).replace(fbrg,tbrg).replace(fdist,tdist) + '</body>'); } xzhr.onreadystatechange=stateChanged; xzhr.open('post','//www.rjmprogramming.com.au/HTMLCSS/emailhtml.php',true); xzhr.send(xform); … Ajax calling of … `function stateChanged() { if (xzhr.readyState == 4) { if (xzhr.status == 200) { //alert(xzhr.response); if (xzhr.response.indexOf('</a>') != -1) { document.getElementById('mtodiv').innerHTML='<a' + xzhr.response.split('<a')[eval(-1 + xzhr.response.split('<a').length)].split('</a>')[0] + '</a>'; var alista=document.getElementsByTagName('a'); alista[eval(-1 + alista.length)].click(); } } } }` … in a changed missing_two.html‘s “Missing Two” web application

The hashtagging email story continues!

Stop Press

A tweaked missing_two.html‘s “Missing Two” web application prioritizes timezone place name geolocations over other placename ideas.

Previous relevant Earth Bearing Distance Missing Two Earth Scanner Integration Tutorial is shown below.

Earth Bearing Distance Missing Two Earth Scanner Integration Tutorial

Today we’re combining precedents from …

yesterday’s Earth Scanner Google Chrome Speech to Text Tutorial‘s work on our recent Earth Scanner web application … and ….
the latest Earth Bearing Distance Missing Two Trip Geolocation Elevation Tutorial about the Missing Two web application

the Earth Scanner performs well in a popup window … but …
the Earth Scanner does not perform well in an iframe

… we guess, because of those calculations for the variables screenwidth and screenheight which are so crucial to the scrolling required for that Earth Scanner.

a sliver of margin applied to the map image (big img element) … and we wondered “who owns that sliver?” … so, in case it was the document.body element, as we hoped, we’d try …
img element onclick event arrangement amendment …
document.getElementById('myimg').onclick=function(event) { event.stopPropagation(); movesallowed=false; gmovesallowed=false; if (gdefv != '') { askfor=ourprompt(event,'Earth Scanner - RJM Programming - February, 2024 ... ' + String.fromCharCode(10) + 'Thanks to https://github.com/nvkelso/natural-earth-raster/blob/master/50m_rasters/HYP_50M_SR_W/HYP_50M_SR_W.README.html ... ' + String.fromCharCode(10) + 'Currently top left of screen is (Longitude,Latitude) ' + '(' + eval(-180 + xp * 360 / 100) + ',' + eval(90 - yp * 180 / 100) + ') and bottom right is (' + eval(-180 + screenlong + xp * 360 / 100) + ',' + eval(90 - screenlat - yp * 180 / 100) + ') and around the middle is (' + eval(-180 + eval(screenlong / 2) + xp * 360 / 100) + ',' + eval(90 - eval(screenlat / 2) - yp * 180 / 100) + ').' + String.fromCharCode(10) + 'Where do you want middle of screen to be in terms of Longitude,Latitude? Suffix with space to show meridians and/or prefix with space to not show meridians.', gdefv); gdefv=''; } else { askfor=ourprompt(event,'Earth Scanner - RJM Programming - February, 2024 ... ' + String.fromCharCode(10) + 'Thanks to https://github.com/nvkelso/natural-earth-raster/blob/master/50m_rasters/HYP_50M_SR_W/HYP_50M_SR_W.README.html ... ' + String.fromCharCode(10) + 'Currently top left of screen is (Longitude,Latitude) ' + '(' + eval(-180 + xp * 360 / 100) + ',' + eval(90 - yp * 180 / 100) + ') and bottom right is (' + eval(-180 + screenlong + xp * 360 / 100) + ',' + eval(90 - screenlat - yp * 180 / 100) + ') and around the middle is (' + eval(-180 + eval(screenlong / 2) + xp * 360 / 100) + ',' + eval(90 - eval(screenlat / 2) - yp * 180 / 100) + ').' + String.fromCharCode(10) + 'Where do you want middle of screen to be in terms of Longitude,Latitude? Suffix with space to show meridians and/or prefix with space to not show meridians.', ''); } if (('' + askfor).replace('(','').replace(')','').replace('[','').replace(']','').indexOf(',') != -1) { ameridian=''; acircleoflatitude=''; enforcedlong=false; enforcedxp=-999; } movesallowed=true; gmovesallowed=true; };
… augmented by …
positive action around the “equivalent of document.body onload event” for the Earth Scanner …
var thecss=''; var earth_scanner_css=location.search.split('css=')[1] ? (decodeURIComponent(location.search.split('css=')[1].split('&')[0]).replace(/\+/g,' ')) : ''; thecss=earth_scanner_css; var atendest='<input type=hidden id=posturl style=display:none; value=""></input><input type=button id=dbutton onclick=checkforstt(); style=display:none;></input>'; var atend='<br><br><div id=dc><canvas title="" id=ourcanvas width=' + ('' + eval(-15 + (window.orientation == 0 ? window.screen.height: window.screen.width)) + 'px').replace('pxpx','').replace('px','') + ' height=660 style="width:' + ('' + eval(-15 + (window.orientation == 0 ? window.screen.height: window.screen.width)) + 'px').replace('pxpx','px') + ';height:660px;border:1px solid red;background-color:' + bcol + ';' + extrastyle + '"></canvas></div><div id=xdscriptstuff></div><div id=xdstylestuff></div><textarea id=myta style=display:none; value=""></textarea><iframe onload=scranal(this); id=scrmytaif style=display:none; src=></iframe><iframe onload=styanal(this); id=stymytaif style=display:none; src=></iframe><iframe class="spag" scrolling="no" data-onload="iifopen(this);" id="cbi" frameborder="0" style="position:fixed;top:0px;left:150px;width:173px;height:218px;margin-top:-204px;display:none;" src="/HTMLCSS/client_browsing.htm?straighttext=312160562686"></iframe><textarea id=result1 style=display:none;></textarea><textarea id=result2 style=display:none;></textarea>' + exdstylestuff + exdscriptstuff + atendest; var parentiframe=''; var iol=''; if (window.opener) { var pu=window.opener.document.URL; if (pu.indexOf('#') == -1 && ('' + window.opener.location.hash).replace(/^null/g,'').replace(/^undefined/g,'') != '') { pu+=('#' + ('' + window.opener.location.hash)).replace(/^\#\#/g, '#'); } thecss+='display:block;'; parentiframe='<br><iframe id=mtif style="width:100%;height:800px;z-index:987;margin:0 0 0 0;margin-left:10px;margin-top:10px;background-color:rgba(0,0,255,0.5);" src="' + pu + '"></iframe><div id=dhiddens style=display:none;><div id=goagain></div><input type=hidden id=ltf value=></input><input type=hidden id=lgf value=></input><input type=hidden id=ltt value=></input><input type=hidden id=lgt value=></input><div id=slong></div><iframe id=niframe src=></iframe></div>'; iol=' onload="document.body.onclick=function(){ document.getElementById(' + "'myimg'" + ').style.display=document.getElementById(' + "'myimg'" + ').style.display.replace(' + "'block','NONE'" + ').replace(' + "'none','block'" + ').replace(' + "'NONE','none'" + '); if (1 == 2) { document.getElementById(' + "'dstyle'" + ').style.display=document.getElementById(' + "'dstyle'" + ').style.display.replace(' + "'visible','HIDDEN'" + ').replace(' + "'hidden','visible'" + ').replace(' + "'HIDDEN','hidden'" + '); } if (document.getElementById(' + "'myimg'" + ').style.display == ' + "'none'" + ') { window.scrollTo(0,0); document.body.style.backgroundColor=' + "'rgba(255,0,0,0.5)'" + '; } else { window.scrollTo(cspx, cspy); document.body.style.backgroundColor=' + "'rgba(0,0,255,0.5)'" + '; } } " '; setInterval(getcsp, 5000); } document.write("<img" + iol + " src='/HTMLCSS/HYP_50M_SR_W.jpg' id=myimg width=" + eval(zoomf * 10800) + " height=" + eval(zoomf * 5400) + " style='margin:0 0 0 0;margin-left:10px;margin-top:10px;" + thecss + "'></img><div id=dstyle style=visibility:visible;></div><input id=sdtitle type=hidden value='Earth Scanner'></input><input id=sdtext type=hidden value='Earth Scanner - RJM Programming'></input><input id=sdurl type=hidden value='" + document.URL.split('#')[0] + ('' + location.hash).replace(/^null/g,'').replace(/^undefined/g,'') + "'></input><iframe scrolling=no farmeborder=0 style='z-index:3456;position:fixed;top:55px;left:15px;width:30px;height:24px;' onload='storeshare(this);' src='/HTMLCSS/web_share_api_test.html?emojize=128231'></iframe><input type=hidden id=itworked value=''></input><iframe onload=coordit(this); id=wif style=display:none;margin-left:50px; src='//wikipedia.org/wiki/Saint_George,_Antigua_and_Barbuda'></iframe><iframe onload=coordittwo(this); id=wiftwo style=display:none; src=></iframe><input type=hidden id=placegeo title='' value=''></input>" + atend + parentiframe);
… calling …
var cspx=0, cspy=0; function getcsp() { // Thanks to https://stackoverflow.com/questions/31712287/get-scroll-position-in-javascript var ourcspx = eval('' + (document.body.scrollX || document.body.scrollLeft || document.getElementsByTagName("html")[0].scrollLeft)); var ourcspy = eval('' + (document.body.scrollY || document.body.scrollTop || document.getElementsByTagName("html")[0].scrollTop)); if (ourcspx > 100) { cspx=ourcspx; cspy=ourcspy; } //document.title='cspx=' + cspx + ' and cspy=' + cspy + ' ourcspx=' + ourcspx + ' and ourcspy=' + ourcspy; }

… surprising us regarding how much could be done at the “child” to make this popup window arrangement be fitting into the integration so that …

user calls the “parent” Missing Two web application …
user fills in the two places … now a clickable details/summary “reveal” “Earth Scanner …” arrangement, if clicked …
opens new Earth Scanner popup window with the calling URL hosted in a popup window iframe element below it … so that …
clicking in the left hand “document.body” element’s “sliver” which might involve “user scrolling to”, to find (and yes, that is where the ownership lies, luckily) toggles the Earth Scanner topmost with Missing Two “clone” topmost …
with the scrolling remembered (our testing shows … “for the main part”) … or the user can choose to …
close the popup window in order to fall back to calling “parent” Missing Two web application window, only (still with the “Earth Scanner …” details/summary “reveal” arrangement showing)

Codewise …

a changed missing_two.html‘s “Missing Two” web application can now call the integrated …
and changed twenty fourth draft of the Earth Scanner web application

Previous relevant Earth Bearing Distance Missing Two Trip Geolocation Elevation Tutorial is shown below.

Earth Bearing Distance Missing Two Trip Geolocation Elevation Tutorial

What’s out there in the distance?

… thinking we talked about, first, at Earth Bearing Distance Missing Two Place Name and Horizon Tutorial.

We suspected that we were naive in our thinking because Google searches lead to nothing with our theory, that theory being that we could combine …

event event.DeviceMotionEvent’s event.accelerationIncludingGravity.z … perhaps the minimum such value detected … along with …
Circular Motion and Satellite Motion – Lesson 3 – Universal Gravitation … The Value of g … idea, thanks, that (where “d” is distance from centre of Earth, “G” and “M_earth” are constants, “g” is gravitational acceleration (typically, about 9.8 m/s² at sea level)) …
∴ d = Math.pow((G * M_earth) / g, 0.5) ∴ elevation = (Math.pow((G * M_earth) / g, 0.5) - EarthRadius_latitude)

Previous relevant Earth Bearing Distance Missing Two Trip Geolocation Tutorial is shown below.

Earth Bearing Distance Missing Two Trip Geolocation Tutorial

on top of our Wikipedia way to glean Latitude and Longitude for a Place Name … today (oh, but the shame of it all, the shame, leaving it for so long … ~~oh, the shame of~~“okay, that’s it … pull yourself together”) we finally get around to …
“Here” Place Name based HTML5 Geolocation API (should the user be allowing Location Services (into their frightfully busy lives) for their web browser of use) … yayyyyyyyy!

… is flagged to the user via that top textbox’s “placeholder” blurb being adjusted (for 7 seconds) as a user focuses there via changed HTML …

… calling on new Javascript …

… and if the user types in the Here we are looking for …

… new Geolocation API Javascript code swings into action …

… into our changed missing_two.html‘s “Missing Two” web application.

What a programmer’s relief!

Previous relevant Earth Bearing Distance Missing Two Trip Compass Tutorial is shown below.

Earth Bearing Distance Missing Two Trip Compass Tutorial

The recent Earth Bearing Distance Missing Two Trip North Point Tutorial set up a …

mobile device “North point” additional functionality … and today …
more compass use helpers to guide user towards facing North … as well as …
allow for Degrees Minutes Seconds as alternative angular method of entry harnessing changed HTML … exemplified by …
Latitude (decimal degrees): <input title='' style='width:90px;display:inline-block;' onchange='this.style.backgroundColor="pink";cwhat[0]=false; cwhat[1]=false; if (!decided) { if (!cwhat[5]) { cwhat[5]=true; } if (!cwhat[4]) { cwhat[4]=true; } decided=true; } top.document.getElementById("ltf").value=this.value; ' onblur='this.style.backgroundColor="pink"; cwhat[0]=false; cwhat[1]=false; if (!decided) { if (!cwhat[5]) { cwhat[5]=true; } if (!cwhat[4]) { cwhat[4]=true; } decided=true; } top.document.getElementById("ltf").value=mdms(this.value,this); ' id=latf name=latf type=number onfocus='ati=0; atic=[]; atis=[];' onkeydown='couldbedms(event);' min=-90.0000000 max=90.0000000 step=0.0000010 value='0.0000000'></input><br>
… helped out by new Javascript …
var ati=0, atis=[], atic=[]; function mdms(tvis, otvis) { var altvl=0.0, dvr=1.0, isv=0; if (eval('' + atic.length) >= 1) { //alert('ov=' + otvis.value + ' and atic[0]=' + atic[0]); if (atic[0].indexOf('-') != -1 && otvis.value.indexOf('-') == -1) { isv++; } else if (atic[0].indexOf('+') != -1 && otvis.value.indexOf('+') == -1) { isv++; } else if (eval('' + atis.length) >= 2) { if (eval('' + atis[1]) > 60) { isv++; } } } if (eval('' + atic.length) > 1) { //alert('Here ' + atic.length + ' last is=' + atic[eval(-1 + atic.length)]); for (var ijh=0; ijh<atic.length; ijh++) { if (atic[ijh].trim() != '') { isv++; if (atic[0].indexOf('-') != -1) { altvl-=eval(eval('' + dvr) * eval(atic[ijh].replace('-',''))); } else { altvl+=eval(eval('' + dvr) * eval(atic[ijh].replace('-',''))); } //alert('Here ' + altvl); dvr/=60.0; } } if (isv > 1) { tvis='' + altvl; otvis.value='' + altvl; } } ati=0; atic=[]; atis=[]; return tvis; } function idms(otvis) { var altvl=0.0, dvr=1.0, isv=0; if (eval('' + atic.length) >= 1) { //alert('Ov=' + otvis.value + ' and Atic[0]=' + atic[0]); if (atic[0].indexOf('-') != -1 && otvis.value.indexOf('-') == -1) { isv++; } else if (atic[0].indexOf('+') != -1 && otvis.value.indexOf('+') == -1) { isv++; } else if (eval('' + atis.length) >= 2) { if (eval('' + atis[1]) > 60) { isv++; } } } if (eval('' + atic.length) > 1) { //alert('here ' + atic.length + ' last is=' + atic[eval(-1 + atic.length)]); for (var ijh=0; ijh<atic.length; ijh++) { if (atic[ijh].trim() != '') { isv++; if (atic[0].indexOf('-') != -1) { altvl-=eval(eval('' + dvr) * eval(atic[ijh].replace('-','').replace('+',''))); } else { altvl+=eval(eval('' + dvr) * eval(atic[ijh].replace('-','').replace('+',''))); } //alert('here ' + altvl); dvr/=60.0; } } if (isv > 1) { otvis.value='' + altvl; } } ati=0; atic=[]; atis=[]; return otvis; } function couldbedms(event) { var wasc=''; if (eval('' + event.keyCode) == 69 || eval('' + event.keyCode) == 78 || eval('' + event.keyCode) == 87 || eval('' + event.keyCode) == 83 || eval('' + event.keyCode) == 187 || eval('' + event.keyCode) == 189 || eval('' + event.keyCode) == 190 || (eval('' + event.keyCode) >= 48 && eval('' + event.keyCode) <= 57)) { if (ati == 0) { atis=[]; atis.push(0); atic.push(''); } else if (ati < 0) { ati=0; } ati++; atis[eval(-1 + atis.length)]=ati; if (eval('' + event.keyCode) == 87 || eval('' + event.keyCode) == 83) { if (atic[0].indexOf('-') == -1) { wasc=atic[0]; atic[0]='-' + wasc; } } else if (eval('' + event.keyCode) == 69 || eval('' + event.keyCode) == 78) { if (atic[0].indexOf('+') == -1) { wasc=atic[0]; atic[0]='+' + wasc; } } else if (eval('' + event.keyCode) != 187) { atic[eval(-1 + atic.length)]+=String.fromCharCode(eval(eval('' + event.keyCode) % 144)); } } else { ati=-1; if (eval('' + event.keyCode) >= 65 && eval('' + event.keyCode) <= 90) { atis.push(eval('' + event.keyCode)); } else { atis.push(0); } atic.push(''); } }

… improving the functionality and ease of use of our changed missing_two.html‘s “Missing Two” web application when using a mobile platform.

Previous relevant Earth Bearing Distance Missing Two Trip North Point Tutorial is shown below.

Earth Bearing Distance Missing Two Trip North Point Tutorial

today’s changed missing_two.html‘s Missing Two live run that is affected, but two other web applications as per …
today’s changed yaw_etc.html‘s Device Orientation live run … and …

… on some mobile platforms, such as the iOS iPad we tested, adding compass like new functionality, as per the new HTML …

<h1 id=myh1 style='display:block;'>Missing Two (<font size=1>optional</font> <span onclick="this.innerHTML=this.innerHTML.replace('to','From').replace('from','to').replace('From','from'); document.getElementById('ipn').focus(); " id=spfr title='Click me to toggle between from and to' style='cursor:pointer;'>from</span> <input title='Optionally semicolon separate an elevation affecting horizon distance used for Place Name/Bearing (where Compass app might show you this elevation value) input scenarios. Note that a Place Name/Distance scenario shows a Locality Distance Ring map. Append space for gyroscope bearing.' onblur='lkwk(this);' style='display:inline-block;width:280px;' placeholder='Place Name' id=ipn value='' type=text></input>) in Table Column <span data-onfocus="document.getElementById('semail').innerHTML='';" data-title='Email to (append a space to just show the table cell with the gradient)?' data-contenteditable=true data-onblur=preemail(this.innerHTML); onclick=emailit(''); id=semail title=Email>📧</span> <span data-onfocus="document.getElementById('semail').innerHTML='';" data-title='SMS to?' data-contenteditable=true data-onblur=preemail(this.innerHTML); onclick=toize(''); id=ssms title=SMS>📟</span><div id=dntable style=display:none;> <table border=1 id=ntable style="background-color:pink;display:inline-block;font-size:10px;"><tr><td>N</td></tr><tr><td>⬆</td></tr></table> ⬆</div></h1>

… and Javascript …

Previous relevant Earth Bearing Distance Missing Two Trip Tap Orientation Tutorial is shown below.

Earth Bearing Distance Missing Two Trip Tap Orientation Tutorial

ERROR NotAllowedError Requesting device

… and onto the excellent How to requestPermission for devicemotion and deviceorientation events in iOS 13+ …

One more thing

One more thing to keep in mind is that requestPermission could only be called on a user gesture (e.g. click). This is reasonable UX too as we would want to tell users why we are asking for such permissions and let them confirm before prompting them so that they see it coming.

Otherwise you would get this error:

Console error: NotAllowedError: Requesting device orientation or motion access requires a user gesture to prompt

This is a similar Apple requirement, as it applies to iOS playing audio files, which we have mentioned quite a bit at this blog. One could say …

We should have known.

… and luckily two is too polite to say …

You blockhead!

… to which we are infinitely grateful, and will install for the rest of the day, that …

Two is our favourite number (for the rest of today, that is).

But it’s not only …

today’s changed missing_two.html‘s Missing Two live run that is affected, but two other web applications as per …
today’s changed yaw_etc.html‘s Device Orientation live run … and …
today’s changed simon_says.html‘s Simon Says live run

… for you to try for yourself, perhaps there on your mobile device with an accessible gyroscope on a compatible web browser such as Google Chrome (or others, now) on iOS.

Previous relevant Earth Bearing Distance Missing Two Trip Details Orientation Tutorial is shown below.

Earth Bearing Distance Missing Two Trip Details Orientation Tutorial

Humans, particularly before the advent of the mobile devices, were probably (as a whole) more skilled regarding navigation via “landmarks” or “sunmarks” or “moonmarks” working out …

In which direction is North?

Well, the irony here, today, is that the better you have been hanging onto these skills you are, the better you can use our new …

mobile phone …
containing a gyroscope … but …
not an accessible compass (or if so, the knowledge of where North is becomes superfluous below) …
using a compatible web browser such as Google Chrome …
a good indication your scenario is compatible being that at some stage you answer “Allow” to a prompt as below …

… at some point … using …
today’s changed missing_two.html‘s live run link modifications … using …
1. window.DeviceOrientationEvent event … and perhaps you could use …
2. window.DeviceMotionEvent event
…
software detection to offer that user …

… the chance to mix technology with human navigational instincts to answer that perennial question similarly asked in Earth Bearing Distance Missing Two Place Name and Horizon Tutorial …

What’s out there in the distance?

… via …

using a compatible web browser such as Google Chrome … live run …
point your mobile phone in portrait to North (or at least arrange to do this just before tapping the Done link in step below) …
enter in a Place Name into that top textbox (to which, it’s good, as known, to append semicolon elevation) and add a space, and because you are on a mobile device, tap the Done link
bearing text will start being updated with bearing of your mobile device portrait mode top pointing direction … so …
when you’ve swivelled the mobile device to be pointing (in portrait) to the (What’s out there in the distance?) direction of interest, tap that yellow bearing textbox, then tap the Done link … resulting in …
Google Chart Map Chart showing your Place Name and (the calculated) Horizon Position in that direction of your choosing

… meaning the combination of …

your mobile device’s gyroscope’s angle measuring talent (akin to those theodolite talents Land Surveyors are using) … and …
your navigational talents knowing where North is

… save you having to know that awkward “bearing” (in degrees) textbox answer to What’s out there in the distance? Perhaps see what we mean viewing today’s animated GIF presentation.

Previous relevant Earth Bearing Distance Missing Two Trip Details Styling Tutorial is shown below.

Earth Bearing Distance Missing Two Trip Details Styling Tutorial

Jobs

Robert Metcalfe
Sun, Sep 12, 8:16 PM (5 days ago)
to me

Vertical-align: top
I frame too high
To after horizon leaves horizon I frame title
Lat long display online-block
Coloured summary background colour
Th header cells text-align center

Sent from my iPhone

… “mind map” type ideas that may or may not be followed through to fruition, depending on …

where possible
where feasible
where wise

On these small projects we also don’t mind just involving the one HTML (or PHP writing HTML) source file and use a combination of …

inline <style> CSS styling goes here </style> within the webpage <head></head> header section … or …
in amongst the HTML via “style” attribute … eg. <p id=”myp” style=” CSS styling for p element goes here “> Content for p element goes here </p>

… or Javascript DOM code such as …

document.getElementById('myp').style.fontSize='18px';

… and it is very rare, with these small projects, though very good in organizational terms, to write all your CSS styling in an external CSS (styling file) arrangement such as …

<head> <link href='./my_styling.css' rel='stylesheet' type='text/css'> </head>

There are many ways to … well, you know what I mean … a cat! Not only were “no cats harmed in the making of this tutorial” but no cats were even roughed up?!

Previous relevant Earth Bearing Distance Missing Two Trip Details Reveal Tutorial is shown below.

Earth Bearing Distance Missing Two Trip Details Reveal Tutorial

Yes, there’s only so long you can use the wonderful details/summary HTML element combination as with the recent Earth Bearing Distance Missing Two Trip Details Summary Tutorial‘s …

we often use to “reveal”, or not, webpage “real estate”, but today we default to the “open” look

Today, then, with our changed missing_two.html‘s live run link, we have …

that first (at first) “open” details/summary nesting a Google Chart Map Chart iframe summarizing the entirety of your Trip … today …
festooned with up arrow emoji (⬆) “button” links which, when clicked, zero in (into a new topmost “only open” details/summary nesting Google Chart Map Chart iframe set of data) on any one “leg” of your trip, displaying its own crow fly distance and Google Maps Directions information link, as well as new …
accommodation (🛌) links ala accommodation in Springwood, New South Wales Google image search style links

… to enhance a Trip Planner’s user experience. Perhaps best to explain a bit codewise is to say “follow the Javascript variable interesting in code below” …

Previous relevant Earth Bearing Distance Missing Two Trip Details Summary Tutorial is shown below.

Earth Bearing Distance Missing Two Trip Details Summary Tutorial

The recent Earth Bearing Distance Missing Two Locality Distance Ring Tutorial coalesced “From” Place name functionality for …

defined bearing … deriving horizon place
defined distance … deriving ring of positions … and today we consider …
Trip functionality thoughts via “To” Place name definitions supplementing the already entered “From” Place name

We say “Trip Details Summary” in our blog posting title today as a hint about how we present a nester of Google Chart Map Chart display data.

The user can access this functionality with our changed missing_two.html‘s live run link …

user enters “From” Place Name via new textbox … eg. “Lawson, New South Wales”
user enters “To” Place Name via new textbox … eg. “Katoomba”
user clicks/taps the “Fill” button
optionally the user can add more places to the Map Chart by adding more “From” and/or “To” Place Name definitions

Previous relevant Earth Bearing Distance Missing Two Locality Distance Ring Tutorial is shown below.

Earth Bearing Distance Missing Two Locality Distance Ring Tutorial

The corollary to yesterday’s Earth Bearing Distance Missing Two Place Name and Horizon Tutorial‘s …

locality and bearing derivation of a “place on horizon” position … is, today …
locality and distance derivation of a “locality distance ring” set of positions

… again, combining the geodata talents of Wikipedia and a Google Chart Map Chart, we figure.

And so a user accessing this functionality with our changed missing_two.html‘s live run link …

user enters “From” Place Name via new textbox … eg. “Lawson, New South Wales”
user enters “Distance” (eg. “5000.000” metres) and tabs out … we use the “onblur” event …
var dok=true; function dfillablemaybe(brgo) { if (!dok) { return ''; } var i, ourbrg=0.0, ourdist=0.0, j, dvlat='', dvlong=''; if (('' + brgo.value).replace(/0/g,'').replace('.','') != '') { //alert('356:' + document.getElementById('dist').value); if (('' + document.getElementById('dist').value).replace(/0/g,'').replace('.','') == '' || (fplacen != '' && tplacen == '')) { //alert(456); if (('' + document.getElementById('latt').value).replace(/0/g,'').replace('.','') == '' || (fplacen != '' && tplacen == '')) { //alert(556); if (('' + document.getElementById('longt').value).replace(/0/g,'').replace('.','') == '' || (fplacen != '' && tplacen == '')) { //alert(656); if (('' + document.getElementById('ssf').innerHTML) != '') { //alert(756); if (!viastart) { //document.getElementById('brg').focus(); document.getElementById('brg').value='0.0000001'; //brgo.focus(); } if (mu.indexOf('[051.5072,') != -1) { //alert(856); if (!viastart) { //alert(1); document.getElementById('ifill').click(); //alert(11); } mu=mu.replace('[051.5072,','[' + eval('' + document.getElementById('latt').value).toFixed(3) + ','); mu=mu.replace(',-00.1275,',',' + eval('' + document.getElementById('longt').value).toFixed(3) + ','); if (('' + brgo.value).indexOf('000.000') != -1) { //mu=mu.replace(encodeURIComponent('looking out North'), encodeURIComponent(('' + brgo.value).split('000.000')[0] + 'km Ring')); mu=mu.replace(',~LonDon~]',',~' + encodeURIComponent(fplacen + ' looking North') + '~]'); mu=mu.replace('=London','=' + encodeURIComponent(fplacen + (' ' + brgo.value).split('000.000')[0] + 'km Ring')); } else { mu=mu.replace(',~LonDon~]',',~' + encodeURIComponent(fplacen + ' looking North') + '~]'); mu=mu.replace('=London','=' + encodeURIComponent(fplacen + ' looking out North')); } //mu=mu.replace(',~LonDon~]',',~' + encodeURIComponent(fplacen + ' looking North') + '~]'); //mu=mu.replace('=London','=' + encodeURIComponent(fplacen + ' looking out North')); //alert('956:' + mu); //document.getElementById('hplacen').innerHTML='<input type=hidden name=fplacen value="' + mu + '"></input>'; //document.getElementById('tdmid').innerHTML='<iframe src="' + mu + '" style="width:100%;height:700px;"></iframe>'; if (viastart) { for (var dbrg=30; dbrg<=330; dbrg+=30) { //document.getElementById('brg').value='' + dbrg + '.0000000'; if (('' + document.getElementById('mysel').value) == '2') { ourbrg=eval(eval(540.0 + 180.0 + eval('' + document.getElementById(eles[2]).value)) % 360.0); } else { ourbrg=eval('' + document.getElementById(eles[2]).value); } ourbrg=eval('' + dbrg); for (j=eval(3 - eval(('' + document.getElementById('mysel').value))); j>=1; j--) { ourdist=eval('' + document.getElementById(eles[3]).value); //Let first point latitude be la1, ///longitude as lo1, //d be distance, //R as radius of Earth, //Ad be the angular distance i.e d/R and. //θ be the bearing, //Here is the formula to find the second point, when first point, bearing and distance is known: //latitude of second point = la2 = asin(sin la1 * cos Ad + cos la1 * sin Ad * cos θ), and //longitude of second point = lo2 = lo1 + atan2(sin θ * sin Ad * cos la1 , cos Ad – sin la1 * sin la2) dvlat='' + eval(eval(eval(180.0 / Math.PI) * Math.asin( Math.sin(eval(Math.PI / 180.0) * eval('' + document.getElementById(eles[0]).value)) * Math.cos(eval(eval('' + ourdist) / 6371000.0)) + Math.cos(eval(Math.PI / 180.0) * eval('' + document.getElementById(eles[0]).value)) * Math.sin(eval(eval('' + ourdist) / 6371000.0)) * Math.cos(eval(Math.PI / 180.0) * eval('' + ourbrg))))); //Let first point latitude be la1, //longitude as lo1, //d be distance, //R as radius of Earth, //Ad be the angular distance i.e d/R and //θ be the bearing, // longitude of second point = lo2 = lo1 + atan2(sin θ * sin Ad * cos la1 , cos Ad – sin la1 * sin la2) dvlong='' + eval(eval(180.0 / Math.PI) * eval(eval(eval(Math.PI / 180.0) * eval('' + document.getElementById(eles[1]).value)) + Math.atan2( eval(eval('' + Math.sin(eval(Math.PI / 180.0) * eval('' + ourbrg)) * eval('' + Math.sin(eval(eval('' + ourdist) / 6371000.0)))) * eval('' + Math.cos(eval(Math.PI / 180.0) * eval('' + document.getElementById(eles[0]).value)))), eval(eval('' + Math.cos(eval(eval('' + ourdist) / 6371000.0))) - eval(eval('' + Math.sin(eval(Math.PI / 180.0) * eval('' + document.getElementById(eles[0]).value)))) * eval('' + Math.sin(eval(Math.PI / 180.0) * eval('' + document.getElementById(eles[4]).value))))))); mu+=',[' + eval('' + dvlat).toFixed(3) + ',' + eval('' + dvlong).toFixed(3) + ',~' + dbrg + '~]'; } } document.getElementById('tdmid').innerHTML='<iframe src="' + mu + '" style="width:100%;height:700px;"></iframe>'; fplacen=''; } } } } } } } }
… logic of that occurrence to say it is this scenario and above … so …
set bearing to value “0.0000001” (ie. start the locality distance ring looking North)
we programmatically click the yellow “Fill” button
a Google Chart Map Chart is displayed with both …
- observer position … and this approximate calculated …
- locality distance ring set of positions at 30 degree intervals around the ring whose radius is the Distance value (in metres) entered by the user

Previous relevant Earth Bearing Distance Missing Two Place Name and Horizon Tutorial is shown below.

Earth Bearing Distance Missing Two Place Name and Horizon Tutorial

Yesterday’s Earth Bearing Distance Missing Two Place Name Tutorial left off with …

We hope so, and there is another reason for this preparatory work that will be explained tomorrow. Stay tuned!

we had occasion to be looking at a long distance view into the distance down a road both …
1. during the day … and also seeing …
2. lights at night
… which set us (being of the “where are we” looking curious set) wondering …
where are we looking?
whipping out the iPhone’s Compass app gave us all of …
1. bearing to distant view …
2. elevation in metres … interesting …
3. latitude, longitude of where we were (though we think we’ll get help from Wikipedia here, thanks)
… meaning …
we could offer the user of our changed missing_two.html‘s live run link the chance to involve data items 1 and 2 above directly and 3 (via Wikipedia) … to have it that …
1. user enters “From” Place Name via new textbox (and add the Compass app elevation (in metres) as a semicolon separated data item) … eg. “Lawson, New South Wales;740”
2. user enters “Bearing” (eg. “185” (off the Compass app)) and tabs out … we use the “onblur” event …
  var dok=true; function fillablemaybe(brgo) { if (('' + brgo.value).replace(/0/g,'').replace('.','') != '') { //alert('356:' + document.getElementById('dist').value); if (('' + document.getElementById('dist').value).replace(/0/g,'').replace('.','') == '' || (fplacen != '' && tplacen == '')) { //alert(456); if (('' + document.getElementById('latt').value).replace(/0/g,'').replace('.','') == '' || (fplacen != '' && tplacen == '')) { //alert(556); if (('' + document.getElementById('longt').value).replace(/0/g,'').replace('.','') == '' || (fplacen != '' && tplacen == '')) { //alert(656); if (('' + document.getElementById('ssf').innerHTML) != '') { //alert(756); if (!viastart) { dok=false; document.getElementById('dist').focus(); if (1 == 1) { // assume 2m elevation ... thanks to https://en.wikipedia.org/wiki/Horizon document.getElementById('dist').value='' + Math.floor(Math.pow(eval(eval(2.0 * eval('' + elev)) * 6371000.0), 0.5)) + '.000'; } else { document.getElementById('dist').value='5000.000'; } elev=2.0; brgo.focus(); } if (mu.indexOf('[051.5072,') != -1) { //alert(856); if (!viastart) { document.getElementById('ifill').click(); } mu=mu.replace('[051.5072,','[' + document.getElementById('latt').value + ','); mu=mu.replace(',-00.1275,',',' + document.getElementById('longt').value + ','); mu=mu.replace(',~LonDon~]',',~' + encodeURIComponent(fplacen + ' looking out at bearing ' + brgo.value + ' degrees towards horizon') + '~]'); mu=mu.replace('=London','=' + encodeURIComponent(fplacen + ' looking out at bearing ' + brgo.value + ' degrees towards horizon')); //alert('956:' + mu); //document.getElementById('hplacen').innerHTML='<input type=hidden name=fplacen value="' + mu + '"></input>'; document.getElementById('tdmid').innerHTML='<iframe src="' + mu + '" style="width:100%;height:700px;"></iframe>'; if (viastart) { fplacen=''; } } } } } } } }
  … logic of that occurrence to say it is this scenario and above … so compute …
3. the distance to horizon is computed via square root of two times elevation (in meters) times radius of earth (in meters) … then …
4. we programmatically click the yellow “Fill” button
5. a Google Chart Map Chart is displayed with both …
  1. observer position … and this approximate calculated …
  2. horizon position
  … to help you un-nut “where are we looking?” … we hope

… which you can see the gist of with today’s animated GIF presentation.

Bit like relaxed orienteering, would you say?!

Previous relevant Earth Bearing Distance Missing Two Place Name Tutorial is shown below.

Earth Bearing Distance Missing Two Place Name Tutorial

… and allowed for within the (static) HTML’s form element‘s HTML as per …

… and …

… and populated via supportive “onload” event based Javascript DOM “Wikipedia (thanks) based” logic as per …

if (fplacen != '') { document.getElementById('ssf').innerHTML=fplacen; fplacen=''; } if (tplacen != '') { document.getElementById('sst').innerHTML=tplacen; tplacen=''; }

… as the incoming code paradigm, living with the outgoing paradigm’s work based on that “lkwk(this);” Javascript function …

… supporting the relevant (new static) HTML …

<iframe onload='checkit(this);' style='display:none;' id=ifplacegeo src='../PHP/fgc/index.php'></iframe> <input type=hidden id=placegeo value=''></input>

Perhaps, then, the changed missing_two.html‘s live run link will spark your interest? We hope so, and there is another reason for this preparatory work that will be explained tomorrow. Stay tuned!

Previous relevant Earth Bearing Distance Missing Two Trip Share Tutorial is shown below.

Earth Bearing Distance Missing Two Trip Share Tutorial

the FormData in the Ajax/FormData combination of navigational methodologies simulates static HTML form element functionality
we’ve grown to really admire “Inline HTML Email” sharing via PHP mail to the email and back again out to the “www” wooooorrrrrlllllddd via an “Inline HTML Email Form” (as widens the scope of use for today’s web application)
we’ve grown to really admire a static HTML form element’s “onsubmit” event to massage an HTML form element’s content on the way through to accepting the “action” form navigational destination, or reject that
we’ve grown to really admire the concept of multiple submit button elements without or with an associated name attribute to be able to detect which submit button was clicked/touched

… and it seems to me there are now in the web application wooooorrrrrllllddd a plethora of navigational functionality choices for programmers out there. Yayyyyy!

And so, onto Earth Bearing Distance Missing Two Trip Tutorial today we add two sharing conduit …

… means of functionality which call on …

… in the changed missing_two.html‘s live run link.

Previous relevant Earth Bearing Distance Missing Two Trip Tutorial is shown below.

Earth Bearing Distance Missing Two Trip Tutorial

Seriously though, it is rare that a sizeable trip happens as a one leg with the one bearing and distance component, so we turn our old web application into a …

recursive …
parent/child (webpage/iframe) relationship …
linked list (trip) legs

How do we differentiate a “top.document” parent from an (HTML) iframe (element) child? We use …

address bar URL ? and & argument (?latf=[previousToLatitude]&longf=[previousToLongitude]) usage (and analysis) via … checked for via …
<body onload=’moremaybe();’>
function moremaybe() { var latto=location.search.split('latf=')[1] ? decodeURIComponent(location.search.split('latf=')[1].split('&')[0]) : ''; var longto=location.search.split('longf=')[1] ? decodeURIComponent(location.search.split('longf=')[1].split('&')[0]) : ''; if (latto != '' && longto != '') { nextplease(); top.document.getElementById('goagain').style.display='block'; document.getElementById('latf').value=latto; document.getElementById('latf').style.backgroundColor="pink"; cwhat[0]=false; cwhat[1]=false; if (!decided) { if (!cwhat[5]) { cwhat[5]=true; } if (!cwhat[4]) { cwhat[4]=true; } decided=true; } top.document.getElementById("ltf").value=latto; document.getElementById('longf').value=longto; document.getElementById('longf').style.backgroundColor="pink"; cwhat[0]=false; cwhat[1]=false; if (!decided) { if (!cwhat[5]) { cwhat[5]=true; } if (!cwhat[4]) { cwhat[4]=true; } decided=true; } top.document.getElementById("lgf").value=longto; document.getElementById('dtop').style.display='none'; document.getElementById('trhead').style.display='none'; document.getElementById('trfoot').style.display='none'; document.getElementById('myt').border=0; var recti=parent.document.getElementById('niframe').getBoundingClientRect(); parent.document.getElementById('niframe').height=eval(200 + eval(('' + recti.height).replace('px',''))) + 'px'; if (parent.document.getElementById('niframe') != top.document.getElementById('niframe')) { var trecti=top.document.getElementById('niframe').getBoundingClientRect(); top.document.getElementById('niframe').height=eval(200 + eval(('' + trecti.height).replace('px',''))) + 'px'; } setTimeout(checkfill, 500); parent.document.getElementById("slong").innerHTML=":"; parent.document.getElementById("slong").title=""; parent.document.getElementById("slong").style.textDecoration="none"; //top.document.title+=' started '; } }

hardcoded “:” (text) of the To longitude textbox labelling … into a clickable and onclick event working …
document.getElementById('slong').style.cursor='pointer'; document.getElementById('slong').style.textDecoration='underline'; document.getElementById('slong').title='Click for another leg of a trip, perhaps?'; document.getElementById('slong').innerHTML='+';
… optionally used, and dynamic extension to functionality … our “onions of the 4th dimension” moment … who said we don’t care about your health here?!

… so that top.document.getElementById(‘niframe’) is the representation of that “top.document” parent’s first (HTML) iframe (element) child.

Why ask that previous question? To have the one codebase service all the scenarios, we need (the code) to know “where it is at”, so to speak.

The changed missing_two.html‘s live run link can have you planning your own “where of life” trip itinerary of interest yourself.

Previous relevant Earth Bearing Distance Missing Two Context Tutorial is shown below.

Earth Bearing Distance Missing Two Context Tutorial

Mapping and navigational apps wouldn’t be as popular as they are without …

satellite based geodata available to our mobile and laptop (and cars etcetera) devices and their software … and …
the human urge to want to know where they are

In this sense, we’ve decided to interface this web application to …

our changed tz_places.php‘s talents (last talked about with Other Side of the World Google Chart Tutorial) with PHP TimeZone places and deriving the nearest ones given a latitude and longitude geographical input
and to our interface to the Google Chart Geo Chart showing places on the Earth relative to a world map

Previous relevant Earth Bearing Distance Missing Two Primer Tutorial is shown below.

Earth Bearing Distance Missing Two Primer Tutorial

Polar co-ordinate designations are an alternative “view” to placing yourself, as distinct from grid co-ordinates, or geographical latitude and longitude.

We talked about some of what we have written a proof of concept web application for today with the PHP Google Map Chart Bearing Distance Tutorial some time back, and revisited its excellent …

very useful link that talks about the Haversine distance formula, as well

From Latitude, Longitude	Bearing, Distance	To Latitude, Longitude

… we could get the user to fill out 2 of 3 columns of information above, and calculate the missing one for them.

How is this useful? Well, sometimes you want to know …

We are at X. We are crow flying to Y. In which direction do we set out? How far is it?
We are at X. That looks like a nice direction to head, so what compass reading is that? If I go however far, where do I end up?

Second one for those dreamers and adventurers (or perhaps, orienteerers) methinks. Anyway, feel free to try the HTML and Javascript ‘s live run link, or down below …

Previous relevant PHP Google Map Chart Bearing Distance Tutorial is shown below.

PHP Google Map Chart Bearing Distance Tutorial

There have been three recent things going on, for us, involving software integration of our interface to the great Google Chart Map Chart …

the work of PHP Wikipedia Australian List Integration Tutorial adding select (ie. Google Charts “onclick”) event Nearest TimeZone=Z and YouTube=Y functionalities … and also …
ongoing changes readying web applications that can work in an iOS WKWebView we started talking about at Conditional Alternative to Javascript Popup Windows in iOS Tutorial and which we shall return to … and then today’s new functionality to …
add new select (ie. Google Charts “onclick”) event functionality to show a Bearing (degrees) and Distance (kilometres) and To table of information relative to a clicked From place

You don’t say. You don’t say. You don’t say.

…

“What’d they say?” …

They didn’t say.

When distances are this large we need to turn towards “geodesic calculations” and today …

with our calculation of “bearings” between two sets of latitude and longitude we turned to this very useful link that talks about the Haversine distance formula, as well, thanks … and to help make the table of information more approachable we called on …
half hour time of day clock emojis we used for TimeZone Country Places Emoji Tutorial … and …
used the cursor techniques we talked about at HTML/Javascript Guided Snake Game Primer Tutorial

Here are some “live runs” …

make your own Google Chart Map Chart
left hand side of tutorial picture here
By The Time I Get To … can be seen below …

… and here’s the changed PHP map.php changed in this way.

Previous relevant PHP Wikipedia Australian List Integration Tutorial is shown below.

PHP Wikipedia Australian List Integration Tutorial

Yesterday’s PHP Wikipedia Australian List Makeover Tutorial got us thinking more about “where of life” functionality integration possibilities.

TimeZone … and …
Weather

latitude and longitude and (anywhere) placename … to …
TimeZone place(s) … and then (with great help from Weather Underground (thanks)) onto …
direct or nearby weather predictions

… coming off a new Map Chart Google Chart and its select event menu option …

Nearest TimeZone=Z (and onto Other Side of the World and Weather)
YouTube=Y (looking for placename)

map.php‘s Google Charts Map Chart interface’s live run (changed this way)
Australian Lighthouses australian_lighthouses.php (changed this way)
Australian Waterfalls australian_waterfalls.php (changed this way)
Australian Dams australian_dams.php (changed this way)
Australian Ports australian_ports.php (changed this way)
Australian National Parks australian_parks.php (changed this way)

Previous relevant PHP Wikipedia Australian List Makeover Tutorial is shown below.

PHP Wikipedia Australian List Makeover Tutorial

Some time back we linked a Wikipedia “list” webpage to the Google Charts Map Chart functionality with PHP Modularization for Lighthouses in Australia Tutorial.

We’re revisiting, and finding some “peer” web applications, linked by a dropdown, that all …

access a relevant Wikipedia “list” webpage for Australian “things” and mentioning latitude and longitude … which link to …
Google Charts Map Chart

… for all of …

We’ve decided to include extra buttons (to those already linking to Google Maps links and to the relevant Wikipedia webpage) for that suite of web applications above for …

Bonzle Digital Atlas of Australia
Australian government website (sometimes)
YouTube API for Iframe embedded videos interface HTML/Javascript “parent” web application called karaoke_youtube_api.htm HTML iframe elements

Great for research and “surfing the Australian world”! Lose yourself!

What happened Javascript (australian_lighthouses.js changed this way) and PHP wise?

Previous relevant PHP Modularization for Lighthouses in Australia Tutorial is shown below.

PHP Modularization for Lighthouses in Australia Tutorial

Today we want to try two more things …

continuing on with our PHP code (you could call australian_lighthouses.php) for our Australian Lighthouses project
talk about PHP glob and its modularization sensibilities

… so let’s talk about the second one first … it’s south of north … chortle, chortle.

australian_lighthouses.php (changed from yesterday as per this link) (uses australian_lighthouses.js) to arrive at a live run
new_zealand_lighthouses.php (uses new_zealand_lighthouses.js) to arrive at a live run
ireland_lighthouses.php (uses ireland_lighthouses.js) to arrive at a live run

Previous releveant PHP/Javascript Asynchronous Lighthouses in Australia Tutorial is shown below.

PHP/Javascript Asynchronous Lighthouses in Australia Tutorial

Today we want to try two things …

continuing on with our PHP code (you could call australian_lighthouses.php) for our Australian Lighthouses project
talk about Javascript asynchronous script tag option

… so let’s talk about the second one first … it’s south … chortle, chortle.

Why should you be interested in the HTML’s script tag attributes …

asynch=”asynch”
defer=”defer”

So, that, in theory, is y why.

place the logic in some external Javascript called australian_lighthouses.js
we load it from the PHP via
<script type=”text/javascript” src=”australian_lighthouses.js” async=”async”></script>

… and this amounts to the only change to today’s PHP code from yesterday as per this link

… and this becomes a way to modularize your thinking regarding a project … please don’t think there are not a myriad of other ways … this is just one idea here.

So try a live run to see what we mean.

Previous relevant PHP Lighthouses in Australia Primer Tutorial is shown below.

PHP Lighthouses in Australia Primer Tutorial

Today we examine some of the methodology behind a project idea.

Projects need …

an idea … ours came from listening to the radio and hearing about Lighthouses, and how the technologies had changed what they look like and how they function these days … to quote Wikipedia with respect to Australian Lighthouses (thanks) …

The first lighthouse was Macquarie Lighthouse, which was lit in 1793 as a tripod mounted wood and coal fired beacon. The last manned lighthouse was Maatsuyker Island Lighthouse, off the south coast of Tasmania, which was automated in 1996.
a means to access information … much easier these days with the search engines … we went with a Google Search as per list of lighthouse positions … which led to …
the information source(s) … we settled, and were not surprised about the source, for Wikipedia’s List of lighthouses and lightvessels in Australia – Wikipedia … then, once happy about the quality of the source information, analyzed …
the source data format … initially, at least, via View->Page Source, relative to the webpage … to get ideas for how to parse the data … so that we can determine a …
programming language of choice … which is PHP … no surprise here … will need a server-side language … and a method like PHP’s file_get_contents() … from there …
PHP coding to parse the data and put it into another format that value adds … otherwise why do it, as the Wikipedia information is fine as is … that is where we determine that we should …
include an iframe that uses the Google Chart Map Chart to add that extra overall positional view of Lighthouses … a definite asset to the reader’s understanding of the subject … definitely a “where” web application … and in doing this we notice that …
Google Chart Map Chart map.php web application needed to be able to handle much larger input data streams than it could in its previous incarnation of only allowing PHP $_GET[] parameters … so we change it to allow $_POST[] parameters … maybe you noticed this with yesterday’s PHP/Javascript/HTML Google Chart Map Onclick Tutorial as shown below … as this meant that …
we need an HTML form that POSTs to the iframe with the Google Chart Map Chart map.php web application allowable because we are on the same domain with this thinking … and using an HTML textarea element to store the huge string of Lighthouse data that will be passed across via urldecode($_POST[‘data’]) at map.php … using PHP’s urldecode() and urlencode() methods and Javascript’s decodeURIComponent() method … as well as utilizing …
Google Chart Map Chart map.php web application onclick and tooltip functionality we’ve been working on lately … hence the talk about this below … working out what (component) tools could do with a “makeover” is an extremely important part of any project and can be a useful compartmentalizing of the project

… and so we end up with our live run behind which is the PHP programming source code you could call australian_lighthouses.php for your perusal.

Previous relevant PHP/Javascript/HTML Google Chart Map Onclick Tutorial is shown below.

PHP/Javascript/HTML Google Chart Map Onclick Tutorial

They say “the knee bone’s connected to the thigh bone” then they say “the thigh bone’s connected to the … hip bone” then they say “let’s call the whole thing off” … sometimes.

… as again we are making use of $_GET[] parameters coming into the PHP at the server side.

The bigger picture plan for how this helps something else we are trying will become apparent over time … in the fullness of time … at the appropriate juncture of juxtapositions.

Let’s see some PHP code in live action for this tutorial where you define your map characteristics and data.

Link to Google Chart Tools “spiritual home” … via Google.
Link to Google Chart Tools Map information … via Google.
Link to Google Chart tooltips information … via Google.

Link to some downloadable PHP programming code … rename to map.php which changed from yesterday as per this link.

Previous relevant PHP/Javascript/HTML Google Chart Map Tooltips Tutorial is shown below.

PHP/Javascript/HTML Google Chart Map Tooltips Tutorial

Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.

The bigger picture plan for how this helps something else we are trying will hopefully become apparent over time.

Let’s see some PHP code in live action for this tutorial where you define your map characteristics and data.

Link to Google Chart Tools “spiritual home” … via Google.
Link to Google Chart Tools Map information … via Google.
Link to Google Chart tooltips information … via Google.

Link to some downloadable PHP programming code … rename to map.php which changed from the days of Google Charts Emailing Primer Tutorial as per this link.

Previous relevant PHP/Javascript/HTML Google Chart Map Tutorial is shown below.

PHP/Javascript/HTML Google Chart Map Tutorial

Here is a tutorial that introduces you to Google Graphs API, or Google Chart Tools, and its Map functionality.

Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.

Let’s see some PHP code in live action for this tutorial where you define your map characteristics and data.

Link to Google Chart Tools “spiritual home” … via Google.
Link to Google Chart Tools Map information … via Google.

Link to some downloadable PHP programming code … rename to map.php.

If this was interesting you may be interested in this too.

Posted in eLearning, Event-Driven Programming, Not Categorised, Tutorials | Tagged absolute URL, address bar, Ajax, animation, annotate, annotating, annotation, antarctic circle, API, arctic circle, array, audio, autoplay, background image, background-position, base64, blog post, browse, browsing, clip-path, code, collaboration, collage, comma, comma separated list, CSS, curl, decode, delimitation, delimiter, delimiters, detail, device, Did you know, document.title, DOM, Earth, email, emoji, emoji flag, equator, external CSS, external Javascript, file, FileReader, filereader api, focus, geodata, geographicals, geography, geojson, Google, Google Chrome, Google Directions, greenwich meridian, hash, hashtag, hashtagging, horizontal rule, hotlink, HTML, IFRAME, image, img, interactive map, intranet, itinerary, Javascript, karaoke, keyframes, kinear-gradient, kludge, land, landscape, latitude, leg, legs, lengthy, line, linear gradient, lines, link, local web server, localStorage, longitude, making of, MAMP, mantissa, map, Mapping, margin, margin-left, margin-top, media, Mercator, meridian, microphone, mixed content, mobile, navigator.canShare, North Pole, onclick, one image website, operating system, order, orientation, overlay, Page Visibility API, Patsy Gallant, place, placement, placename, play, plot, pole, popup, portrait, programming, realtime, reference, Safari, screen height, screen width, screen.orientation, script, scroll, scrolling, sea, share, sharing, SMS, south pole, speech, speech to text, stop press, style, styling, syntax, tab, terrestrial, textarea, timestamp, timezone, timing, trip, trip leg, trip planning, trips, tropic of cancer, tropic of capricorn, tutorial, url, video, web browser, web browser tab.title, web share api, Web Speech, Web Speech API, when, where, Wikipedia, window, window.atob, window.open, wrapper, YouTube | Leave a comment

Code Difference Report Mixed Content Issue Tutorial

Posted on July 17, 2024 by admin

Code Difference Report Mixed Content Issue Tutorial

It took us a long time, but we now feel we’re better across, writing web applications, and dealing with URLs, that …

not mentioning protocols http: nor https: specifically is preferable …
As time goes on, more and more we see the benefits of URLs that start with “/” (but not HTTP:// nor HTTPS:// absolute URL designations), especially when it comes to pointing at a “tool” (eg. external Javascript). It has
the benefits of …
- is programmer controlled, so they can place the tool in Document Root folder (in the case of an Apache web server) … and, in so doing …
- it’s irrelevant where the “parent” (calling) web application is placed … and …
- mixed content issues are avoided by not using an absolute URL, though it kind of, is!

… both ideals above related to Mixed Content (ie. involving “competing protocols” within a webpage).

Sometimes, however, you can’t help but have to deal with explicit http: and/or https: protocol syntax. It is that way calling our Differences Reporting PHP web application. And we figure, we opened a small can of worms performing the work of the recent Code Difference Highlighting User Interface Tutorial, and in so doing, we hope, sincerely …

really improved those middle HTML iframe Linux diff based Difference Reports … but may have opened us up to …
upper and lower HTML iframes, containing new and old code versions respectively, sometimes had Mixed Content issues that stopped them displaying

Consider a URL such as …

https://www.rjmprogramming.com.au/PHP/Geographicals/diff.php?one=HTTP://www.rjmprogramming.com.au/PHP/australia_place_crowfly_distances.php-------GETME&f0=&f1=&f2=&f3=&f4=&f5=&f6=

… or …

http://www.rjmprogramming.com.au/PHP/Geographicals/diff.php?one=HTTPS://www.rjmprogramming.com.au/PHP/australia_place_crowfly_distances.php-------GETME&f0=&f1=&f2=&f3=&f4=&f5=&f6=

… and we suspect either of these two URLs might have caused this upper and lower HTML iframes issue up until today. How did we approach the remedy? We could have …

detected the Mixed Content potential of the incoming URL and in the PHP reissued the address bar call, effectively, via a header(‘Location: [newUrlFixedForNiMixedContent]’); style of recall … or, what we ended up doing, being (some readers may find the following “a little bit kludgy , this kludgy inside 🎵, am not one of those, who easily 🎶 kludgifies (at least in public)“) …
stayed on the same PHP execution call via …
<?php
if (isset($_GET['one'])) { // && !isset($_GET['two'])) { if (strpos(('' .$_SERVER['SERVER_PORT']), '443') !== false && strpos(strtoupper($_GET['one']), 'HTTP') !== false && strpos(strtoupper($_GET['one']), 'HTTPS') === false) { $_GET['one']='HTTPS' . substr($_GET['one'], 4); } else if (strpos(('' .$_SERVER['SERVER_PORT']), '443') === false && strpos(strtoupper($_GET['one']), 'HTTPS') !== false) { $_GET['one']='HTTP' . substr($_GET['one'], 5); } if (isset($_GET['two'])) { if (strpos(('' .$_SERVER['SERVER_PORT']), '443') !== false && strpos(strtoupper($_GET['two']), 'HTTP') !== false && strpos(strtoupper($_GET['two']), 'HTTPS') === false) { $_GET['two']='HTTPS' . substr($_GET['two'], 4); } else if (strpos(('' .$_SERVER['SERVER_PORT']), '443') === false && strpos(strtoupper($_GET['two']), 'HTTPS') !== false) { $_GET['two']='HTTP' . substr($_GET['two'], 5); } } // more PHP }
?>

… to not mix any of the apples with any of the pears!

Previous relevant Code Difference Highlighting User Interface Tutorial is shown below.

Code Difference Highlighting User Interface Tutorial

Unless a piece of your web application functionality is categorized as “internal use only” you, as a programmer, will want to offer functionality that does not ask the user to remember some arcane URL (GET ? and &) arrangement at the address bar of a web browser. And so, onto yesterday’s Code Difference Highlighting Tutorial, talking about our inhouse PHP Code Difference Reporting functionality, we wanted to offer …

… which is, in raw HTML, at initialization …

<input onchange=doprehs(this.value,0); title="Highlight colour" style=display:inline-block;width:2%; type=color id=mcol value="#000000"><input style="width:18%;background-color:yellow;" onblur="if (this.value.length > 0) { location.href=(document.URL.replace('highlight=','hl=').split(String.fromCharCode(35))[0] + '&highlight=' + encodeURIComponent(prehs + this.value.replace(/\;/g,'U+0003B'))).replace('.php&','.php?');; }" id="myhl" value="" title="Highlight optionally entered string." placeholder="Highlight optionally entered string."></input><input onchange=doprehs(this.value,1); title="Highlight background colour" style=display:inline-block;width:2%; type=color id=mbcol value="#ffff00"></input>

… those two HTML input type=color “textboxes”, respectively, addressing how the HTML mark highlighting element is coloured, via …

color (default black)
background-color (default yellow)

… as a new highlight functionality feature introduced today in diff.php code or try it yourself here.

Stop Press

The PHP diff.php code got changed so that a user entered comma separated list will be scrutinised for whether it represents a single string to find, or if highlighting should happen for each list member in the comma separated list.

Previous relevant Code Difference Highlighting Tutorial is shown below.

Code Difference Highlighting Tutorial

We last mentioned our inhouse PHP code difference mechanism with …

the recent Code Difference Saved User Settings Tutorial colour coding … and today we’re revisiting this diff.php PHP because …
also useful, here, could be a highlighting functionality making use of the HTML mark element, that we gave a sneak peek to regarding, yesterday, with Ants Up a Wall Game Mobile Tutorial if you were one of those readers to click the …

the errant ants that wander off to the right caused viewport disruption

… link

It meant, in that scenario yesterday, when a single variable usage “tells a story” in the code, this code difference highlighting might be more effective at explaining the issues rather than showing the code in a code element (even with inhouse colour coding), because there is also the “before” and “after” scenarios there on the screen for the reader to contextualize. See the newly changed PHP diff.php code or try it yourself here.

Previous relevant Code Difference Saved User Settings Tutorial is shown below.

Code Difference Saved User Settings Tutorial

As a PHP programmer it is easy to admire …

the server side file and database and operating system smarts of the great serverside language PHP is … all while …
PHP writing out HTML (with its CSS and Javascript) has a web application able to access all that clientside intelligence

… and with this in mind, we allow for saved CSS styling user settings, as of today, with our Difference Report web application arrangements.

Don’t we need a database for this? Well, that is possible, and with serverside PHP, could be done, but we opt for clientside window.localStorage usage to …

Save user CSS styling settings
Recall user CSS styling settings

… so that a user might opt to “set and forget” their preferred set of …

New additional

Changed single line

New block of lines

Deleted lines

Changed multiple lines

… (CSS Selector) sensitive “categories” of Difference Report data type settings.

As a result, building on yesterday’s Code Difference User Settings Tutorial, the deployment of CSS selector logic, in PHP, now changes to …

<?php
$style="<style> font { text-shadow: -1px 1px 1px #ff2d95; } </style>"; $legend=""; $mx=""; $onecommand=" function nocaret(invx) { var outvx=decodeURIComponent(invx); while (outvx.indexOf('<') > outvx.indexOf('>')) { outvx=outvx.replace('>' + outvx.split('>')[1].split('<')[0] + '<',''); } return encodeURIComponent(outvx); } function onb(event) { var othis=event.target, cih=''; if (('' + othis.id + ' ').substring(0,1) == 'f') { cih=('' + window.localStorage.getItem('diff_' + othis.id)).replace(/^undefined$/g,''.replace(/^null$/g,'')); if (('' + othis.innerHTML.replace(/\ \;/g,' ') + '~~').indexOf(' ~~') != -1) { if (cih == '') { window.localStorage.setItem('diff_' + othis.id, encodeURIComponent('14 >' + othis.innerText + '<')); } else { window.localStorage.removeItem('diff_' + othis.id); window.localStorage.setItem('diff_' + othis.id, nocaret(cih) + encodeURIComponent(' >' + othis.innerText + '<')); } } } } function blurize(othis) { if (1 == 2) { othis.onblur=function(event) { onb(event); }; } return othis; } function perhapsih(insg,ofo) { if (insg.indexOf('<') > insg.indexOf('<') && insg.indexOf('<') != -1) { ofo.innerHTML=insg.split('>')[1].split('>')[0]; ofo.setAttribute('data-ih', insg.split('>')[1].split('>')[0]); return insg.replace('>' + insg.split('>')[1].split('>')[0] + '<', ''); } } function givef(idn,cssis) { if (('' + document.getElementById('f' + idn).title).indexOf(' ' + decodeURIComponent(cssis) + ' ') == -1) { document.getElementById('f' + idn).title=document.getElementById('lspan').title + ' You have user CSS styling friendly one off setting of ' + decodeURIComponent(cssis) + ' for this category of Difference Reporting'; } } function getmaybe(foin,defis) { var mgs=document.URL.split(foin.id + '='); thatget=('' + window.localStorage.getItem('diff_' + foin.id)).replace(/^undefined$/g,'').replace(/^null$/g,''); if (thatget != '') { if (eval('' + mgs.length) == 1) { return decodeURIComponent(thatget); } else if (mgs[1].split('&')[0].split('#')[0] == '') { return decodeURIComponent(thatget); } } if (eval('' + mgs.length) > 1) { if (mgs[1].split('&')[0].split('#')[0] != '') { return decodeURIComponent(mgs[1].split('&')[0].split('#')[0]); } } return defis; } function getany() { var mgs=[],addget='',thisget=''; if (document.URL.replace('?','&').indexOf('&f') == -1 || 1 == 1) { for (var iig=0; iig<=6; iig++) { mgs=document.URL.split('f' + iig + '='); thisget=('' + window.localStorage.getItem('diff_f' + iig)).replace(/^undefined$/g,'').replace(/^null$/g,''); if (thisget != '') { document.getElementById('f' + iig).title=document.getElementById('lspan').title + ' You have user CSS styling friendly setting of ' + decodeURIComponent(thisget) + ' for this category of Difference Reporting'; } if (eval('' + mgs.length) > 1) { if (mgs[1].split('&')[0].split('#')[0] != '') { document.getElementById('f' + iig).title=document.getElementById('lspan').title + ' You have user CSS styling friendly setting of ' + decodeURIComponent(mgs[1].split('&')[0].split('#')[0]) + ' for this category of Difference Reporting'; } } if (document.URL.replace('?','&').indexOf('&f' + iig + '=') == -1) { addget+='&f' + iig + '=' + thisget; } } } if (addget != '') { location.href=(document.URL.split('#')[0] + addget).replace('.php&','.php?'); } } setTimeout(getany,2000); function removeany(newfo) { window.localStorage.removeItem('diff_' + newfo.id); } function addany(newishfo,newwhat) { removeany(newishfo); window.localStorage.setItem('diff_' + newishfo.id, newwhat); } function askabout(fo) { var defd='14', ccol='black', ccols=fo.outerHTML.split(' color=' + String.fromCharCode(34)), psizes=fo.outerHTML.split('px'); if (eval('' + ccols.length) > 1) { ccol=ccols[1].split(String.fromCharCode(34))[0]; } if (eval('' + psizes.length) > 1) { defd=psizes[0].split(':')[eval(-1 + psizes[0].split(':').length)].trim(); } var numis=prompt('How many px (ie. pixels) do you want for the font size of these ' + fo.innerHTML + ' parts of report? Optionally append after a space a colour that is not the default colour ' + ccol + ' for this category of difference report. Optionally append after a space any other styling you want ( eg. text-shadow: -1px 1px 1px #ff2d95; ). Append spaces to save for other Coding Difference Report sessions into the future. Prefix with minus ( ie. - ) to forget any remembered setting. An entry can be > followed by a new wording for this category followed by <', getmaybe(fo,defd)); if (numis != null) { if ((perhapsih(numis,fo) + 'x').trim().substring(0,1) == '-') { removeany(fo); numis=numis.replace('-',''); } if (('' + numis).trim() != '') { if (numis.replace(/\ $/g,'') != numis) { addany(fo,encodeURIComponent(numis.trim())); } location.href=(document.URL.split('#')[0] + '&' + fo.id + '=' + encodeURIComponent(numis.trim())).replace('.php&','.php?'); } } } "; if (isset($_GET['f0']) || isset($_GET['f1']) || isset($_GET['f2']) || isset($_GET['f3']) || isset($_GET['f4']) || isset($_GET['f5']) || isset($_GET['f6'])) { $onecommand.=" function sizefonts() { } setTimeout(sizefonts, 3000); "; for ($ij=0; $ij<=6; $ij++) { if (isset($_GET['f' . $ij])) { $ihbit=""; $words=str_replace('+',' ',urldecode($_GET['f' . $ij])); if (strpos($words, '<') !== false && strpos($words, '>') !== false) { if (strpos($words, '<') > strpos($words, '>')) { $ihbit=" document.getElementById('f" . $ij . "').innerHTML='" . str_replace("'", "' + String.fromCharCode(39) + '", explode('<',explode('>',$words)[1])[0]) . "'; "; } } if (trim($words) != '') { $onecommand=str_replace("} ", " givef(" . $ij . ",'" . $_GET['f' . $ij] . "'); } ", $onecommand); } $wordsa=explode(' ', trim($words)); if (sizeof($wordsa) > 1) { $words=substr($words,(1 + strlen($wordsa[0]))); for ($ijj=1; $ijj<sizeof($wordsa); $ijj++) { if (strpos($wordsa[$ijj], ':') === false && $ijj == 1) { $words=trim(substr($words,(0 + strlen($wordsa[$ijj])))); $style.='<style> .f' . $ij . " { font-color: " . trim($wordsa[$ijj]) . '; } </style>'; $onecommand=str_replace("} ", " document.getElementById('f" . $ij . "').color='' + '" . trim($wordsa[$ijj]) . "'; document.getElementById('f" . $ij . "').style.fontColor='' + '" . trim($wordsa[$ijj]) . "'; } ", $onecommand); } } if (trim($words) != '') { if (strpos($words, "{") !== false && strpos($words, "}") !== false) { $style.='<style> ' . $words . ' </style>'; $onecommand=str_replace("} ", " document.getElementById('dstyle').innerHTML+='<style> ' + '" . $words . " </style>'; } ", $onecommand); } else { $style.='<style> .f' . $ij . " { " . $words . ' } </style>'; $onecommand=str_replace("} ", " document.getElementById('dstyle').innerHTML+='<style> .f" . $ij . " { ' + '" . $words . " } </style>'; } ", $onecommand); } } } $onecommand=str_replace("} ", $ihbit . " document.getElementById('f" . $ij . "').style.fontSize='' + '" . trim($wordsa[0]) . "px'; } ", $onecommand); $style.='<style> .f' . $ij . " { font-size: " . trim($wordsa[0]) . 'px; } </style>'; } } }
?>

… to start making this happen (including being able to change our “inhouse category” names, if you like) in our changed diff.php‘s more colourful Code Differences helper.

Previous relevant Code Difference User Settings Tutorial is shown below.

Code Difference User Settings Tutorial

Yesterday’s Code Difference Privacy Tutorial represented too much of an echo chamber for our liking. Where possible, we prefer functionality that the users out there can tweak themselves.

In thinking about this, those 5 categories (involving 2 subcategories) …

New additional

Changed single line

New block of lines

Deleted lines

Changed multiple lines

… were what occurred to us could be the CSS Selector basis for us to improve the Code Difference reporting via CSS styling functionality.

Up to today the deployment of that CSS selector logic would have had to be more complex than necessary, but today’s …

giving new id and class attributes to the “legend” span id=lspan elements … and …
equivalent class attribute to report matching element data

… makes the deployment of CSS selector logic really easy, in PHP, as per …

<?php
$style="<style> font { text-shadow: -1px 1px 1px #ff2d95; } </style>"; $legend=""; $mx=""; $onecommand=" function askabout(fo) { var defd='14', ccol='black', ccols=fo.outerHTML.split(' color=' + String.fromCharCode(34)), psizes=fo.outerHTML.split('px'); if (eval('' + ccols.length) > 1) { ccol=ccols[1].split(String.fromCharCode(34))[0]; } if (eval('' + psizes.length) > 1) { defd=psizes[0].split(':')[eval(-1 + psizes[0].split(':').length)].trim(); } var numis=prompt('How many px (ie. pixels) do you want for the font size of these ' + fo.innerHTML + ' parts of report? Optionally append after a space a colour that is not the default colour ' + ccol + ' for this category of difference report. Optionally append after a space any other styling you want ( eg. text-shadow: -1px 1px 1px #ff2d95; )', defd); if (numis != null) { if (('' + numis).trim() != '') { location.href=(document.URL.split('#')[0] + '&' + fo.id + '=' + encodeURIComponent(numis.trim())).replace('.php&','.php?'); } } } "; if (isset($_GET['f0']) || isset($_GET['f1']) || isset($_GET['f2']) || isset($_GET['f3']) || isset($_GET['f4']) || isset($_GET['f5']) || isset($_GET['f6'])) { $onecommand.=" function sizefonts() { } setTimeout(sizefonts, 3000); "; for ($ij=0; $ij<=6; $ij++) { if (isset($_GET['f' . $ij])) { $words=str_replace('+',' ',urldecode($_GET['f' . $ij])); $wordsa=explode(' ', trim($words)); if (sizeof($wordsa) > 1) { $words=substr($words,(1 + strlen($wordsa[0]))); for ($ijj=1; $ijj<sizeof($wordsa); $ijj++) { if (strpos($wordsa[$ijj], ':') === false && $ijj == 1) { $words=trim(substr($words,(0 + strlen($wordsa[$ijj])))); $style.='<style> .f' . $ij . " { font-color: " . trim($wordsa[$ijj]) . '; } </style>'; $onecommand=str_replace("} ", " document.getElementById('f" . $ij . "').color='' + '" . trim($wordsa[$ijj]) . "'; document.getElementById('f" . $ij . "').style.fontColor='' + '" . trim($wordsa[$ijj]) . "'; } ", $onecommand); } } if (trim($words) != '') { if (strpos($words, "{") !== false && strpos($words, "}") !== false) { $style.='<style> ' . $words . ' </style>'; $onecommand=str_replace("} ", " document.getElementById('dstyle').innerHTML+='<style> ' + '" . $words . " </style>'; } ", $onecommand); } else { $style.='<style> .f' . $ij . " { " . $words . ' } </style>'; $onecommand=str_replace("} ", " document.getElementById('dstyle').innerHTML+='<style> .f" . $ij . " { ' + '" . $words . " } </style>'; } ", $onecommand); } } } $onecommand=str_replace("} ", " document.getElementById('f" . $ij . "').style.fontSize='' + '" . trim($wordsa[0]) . "px'; } ", $onecommand); $style.='<style> .f' . $ij . " { font-size: " . trim($wordsa[0]) . 'px; } </style>'; } } }
?>

… user tweakable (using window.prompt interactive entry) via clickable “legend” elements in our changed diff.php‘s more colourful Code Differences helper.

Previous relevant Code Difference Privacy Tutorial is shown below.

Code Difference Privacy Tutorial

Yesterday’s Code Difference Colour Coding Tutorial Difference Report modifications (still) had the inherent weakness …

it was possible, but unlikely, for users to see other user generated reports, if they happened to be asking for reports at exactly the same time … because …
we had not catered for busy traffic here … but, today …
we cater, better, for busy online traffic … and at the same time …
improve the privacy of the reporting on an IP address basis

The downside, at least for us managing this, is that we do not want a build up of files belonging to difference reports long gone. We arrange it, then, that as soon as the report is created, a window.open scenario is coded for …

<?php
$legend=' <span id=lspan><span><font size=2 color=purple>New additional</font></span> <span><font size=2 color=magenta>Changed single </font><font size=2 color=indigo> line</font></span> <span><font size=2 color=blue>New block of lines</font></span> <span><font size=2 color=orange>Deleted lines</font></span> <span><font size=2 color=darkgreen>Changed multiple </font><font size=2 color=olive>lines</font> <a id=myaa onclick="var wod=window.open(' . "'','_blank','left=100,top=100,width=600,height=600'" . '); wod.document.write(' . "'<textarea title=' + document.URL + ' cols=120 rows=40 style=background-color:pink;>' + " . 'window.atob(' . "'" . trim(base64_encode(file_get_contents("huh" . server_remote_addr() . ".huh"))) . "'" . ') + ' . "'</textarea>'" . '); wod.document.title=document.URL; " style=text-decoration:underline;cursor:pointer;>Original ...</a></span></span>'; $onecommand=" function muchl() { if (document.getElementById('lspan').innerHTML.indexOf(\".atob('')\") != -1) { document.getElementById('lspan').innerHTML=document.getElementById('lspan').innerHTML.replace(\".atob('')\", \".atob('" . trim(base64_encode(file_get_contents("huh" . server_remote_addr() . ".huh"))) . "')\"); } } setTimeout(muchl,8000); ";
?>

… leaving the door open for us to tidy up straight away in our changed diff.php‘s more colourful Code Differences helper.

Previous relevant Code Difference Colour Coding Tutorial is shown below.

Code Difference Colour Coding Tutorial

It’s coming up to a few years now, since we looked at the code differences reporting we offer the reader, as a way to scrutinize code changes, around here, when we presented Code Download Table Difference Functional Hover Tutorial. Well, we thought we might try some colour coding to perhaps lift the fog on the cryptic nature of Linux diff (difference) command based reports. They can be cryptic because they can feed into the automation feeding of the report into other Linux commands to facilitate ongoing editing endeavours, but we do not want to go into that here, at least today.

But on examining the reports we came up with the following difference report “categories” if you will …

New additional
Changed single line
New block of lines
Deleted lines
Changed multiple lines

… the header (of a block of interest) the dead give away, depending on the existence of “a” or “c” or “d” and/or “,” for a common sense reinterpretation by us not visiting “man diff” ourselves, yet, regarding this work.

Feel free to take a look at our changed diff.php‘s more colourful Code Differences helper.

Previous relevant Code Download Table Difference Functional Hover Tutorial is shown below.

Code Download Table Multiple Row Email Hover Tutorial

Code Download Table Difference Functional Hover Tutorial

Is it worth adding “onmouseover” event logic onto yesterday’s Code Download Table Difference Functional Linking Tutorial? You bet it is! Just because “onmouseover” has no relevance to mobile platforms, so, obversely, developing software with version control systems is irrelevant to mobile platforms.

… a place for everything and everything in its place …

… we figure. But this is of relevance to the programmer. Sometimes, rather than cater for all the platforms, settling on a subset (of those platforms) can be apt because …

one of mobile or non-mobile subsets of platforms is irrelevant to the scenario … as for today … or …
you try to reinvent the wheel on the pretext that you are waiting for a particular web browser or platform to allow the functionality in, into the future … you could be waiting a while, with the complexity of app arrangements going on around the net these days

Anyway, back to the “onmouseover” event on non-mobile platforms … it was the case that this event was a favourite for the conduit towards Ajax (client) functionality. And thinking on what we do today to nuance our Code Differences PHP web application, we were thinking …

What would Ajax (like to) do?

… and we decided Ajax would really like to …

populate a “div” style=display:inline-block; element adjacent to the functional detail to inform about … but this was not possible … so, instead, we …
populate a popup window near to the functional detail to inform about

… for a non-mobile “hover” (ie. “onmouseover”) event.

Along the way we add some more hashtag navigations and set up more colour coding to the output of (the optional) “functional links” Code Difference reporting.

So take a look at our changed diff.php Code Differences helper applied to itself below …

Previous relevant Code Download Table Multiple Row Email Report Tutorial is shown below.

Code Download Table Multiple Row Email Report Tutorial

Before leaving yesterday’s Download and Copy or Move Code Download Table Tutorial extensions to our Code Download Table functionality …

add copy onto a download functionality to the Code Download Table … today, we …
add a Multiple Row selection basis for a personalized Email Report for the user

… as we saw that there was scope for this as a sharing mechanism for project discussions and ideas, we hope.

Today’s tutorial picture tries to show the steps to emailing off a report of interest to a user …

User clicks the “Allow Multiple Row Clicks” checkbox …
prefixask=prefixask.replace('</div>', '<div id=divawrc style=display:inline-block;> Allow Multiple Row Clicks <input onchange="domrows();" id=awrc style=inline-block; type=checkbox></input> <div id=dawrc style=display:inline-block;></div></div></div>');
… which causes …
“Report” button shows to its right …
function domrows() { document.getElementById('dawrc').innerHTML='<input style=inline-block; type=button onclick=treportdo(); value=Report></input>'; var trsis=document.getElementsByTagName('tr'); for (var itrsis=0; itrsis<trsis.length; itrsis++) { trsis[itrsis].onclick = function(e) { if (e.target.innerHTML != '') { var trs=document.getElementsByTagName('tr'); for (var itrs=0; itrs<trs.length; itrs++) { if (trs[itrs].outerHTML.indexOf(e.target.innerHTML) != -1) { trs[itrs].style.border='2px dotted red'; } } } }; } }
… and table row onclick logic is dynamically applied to those “tr” elements
User clicks somewhere within rows they are interested in seeing be included in a report (which is a snippet of the whole Code Download Table, perhaps to do with a project of interest, or a learning topic of interest)
User optionally clicks the “Report” button …
function treportdo() { var trsis=document.getElementsByTagName('tr'); webc='<html><head><script type="text/javascript"> function emailto(eto) { window.opener.parentemailto(eto); } function xemailto(eto) { if (eto.indexOf("@") != -1) { var zhr=new XMLHttpRequest(); var zform=new FormData(); zform.append("inline",""); zform.append("to",eto); zform.append("subj","Code Download Table part"); zform.append("body",document.getElementById("mytable").outerHTML); zhr.open("post", "//www.rjmprogramming.com.au/HTMLCSS/emailhtml.php", true); zhr.send(zform); alert("Email sent to " + eto); } } </script></head><body><table id=mytable></table><br><br><br><input onblur=emailto(this.value); placeholder="Email to" type=email></input></body></html>'; for (var itrsis=0; itrsis<trsis.length; itrsis++) { if (itrsis == 0) { webc=webc.replace('</table>', trsis[itrsis].outerHTML + '</table>'); } if (trsis[itrsis].outerHTML.indexOf('>') > trsis[itrsis].outerHTML.indexOf('border:')) { if (trsis[itrsis].outerHTML.indexOf('dotted') > trsis[itrsis].outerHTML.indexOf('border:')) { webc=webc.replace('</table>', trsis[itrsis].outerHTML + '</table>'); } } } var woois=window.open('','_blank','top=20,left=20,width=600,height=600'); woois.document.write(webc); }
… which causes a …
New popup window opens showing the relevant snippet of Code Download Table of interest to the user … including …
Textbox for an optional emailee entry that can be filled in … to …
Set off Ajax/FormData methodology means …
function parentemailto(eto) { if (eto.indexOf("@") != -1) { var zhr=new XMLHttpRequest(); var zform=new FormData(); zform.append("inline",""); zform.append("to",eto); zform.append("subj","RJM Programming Code Download Table part"); zform.append("body", reltoabs('<table' + webc.split('</table>')[0].split('<table')[1] + '</table>')); zhr.open("post", "//www.rjmprogramming.com.au/HTMLCSS/emailhtml.php", true); zhr.send(zform); alert("Email sent to " + eto); } }
… to send off an Inline HTML Email report to the emailee … including …
Links of email can be clicked to get back to source code and other links back at the RJM Programming domain web server

… in our changed getmelist.js external Javascript code file (that you can try out for yourself at this live run link).

Previous relevant Download and Copy or Move Code Download Table Tutorial is shown below.

Download and Copy or Move Code Download Table Tutorial

After the “goings on” with the relatively recent PHP Blog Summary Fixed Title Events Tutorial we thought we were finished with “Code Download Table” functionality … but then …

… along came ~~Jones~~ yesterday’s Download and Copy or Move Server Tutorial …

… and … lo and behold … we saw a good use for the idea of …

download from “the net” to a Downloads folder on your computer or device … and more often than not …

you, the user, copies or renames this data to another location on your computer or device with command line or with operating system GUI

… and allowing for that second step above be programmatical with the most apt functionality that had ever passed our cotton pickin’ mind … our Code Download Table … wi’ all tho’ GETME’s!

But we don’t want to interfere too much with the Code Download Table “flow” here, so create up the top left 20 seconds worth of time (extendable by their actions) available to the user to create “download” attributes on all …

“a” links … with …

“href” attribute containing “GETME” …

but not “diff.php” … and …

“download” attribute (the attribute necessary to “download” rather than our default displaying of source code in a new webpage)

… plus no href attribute containing “?s=” either, for today’s purposes with a changed getmelist.js external Javascript code file (that you can try out for yourself at this live run link) … via its new …

Previous relevant Download and Copy or Move Server Tutorial is shown below.

Download and Copy or Move Server Tutorial

Yesterday’s Download and Copy or Move Primer Tutorial was all about the “client side” of …

the “server” side web applications/pages … and …

a “client” side listener (like we talked about with Korn Shell listeners with Pandoc Document Conversion Email Tutorial)

… and we’ve just “tweaked” (albeit, very importantly, in our books (… but the pamphlettes are still not playing ball)) to ensure no “file clobbering” takes place so that the Korn Shell now does …

suf="" isuf=-1 while [ -f "${dpath}/${brest}${suf}" ]; do ((isuf=isuf+1)) suf="_${isuf}" done if [ ! -z "$suf" ]; then echo "mv ${dpath}/${brest} ${dpath}/${brest}${suf} # `date`" >> download_to_place.out mv ${dpath}/${brest} ${dpath}/${brest}${suf} >> download_to_place.out 2>> download_to_place.err fi

… in download_copier.ksh download_copier.ksh Korn Shell scripting on our macOS operating system “client”.

But today is mainly about filling in the missing bits on the “server” side. This (need for a) “conduit” we referred to yesterday is because we accept no folder paths can be mentioned at the “server” end. Suppose, though, that the “non-pathed” filename we supply to an “a” link’s “download” attribute can be prefixed by a mildly mashed up version of that path we copy to from the Downloads folder of your “client” computer or device, as you perform a “download” via the clicking of an “a” link.

Well, at this blog we’d already started functionality to toggle the use or not of …

“a” links … with …
“href” attribute containing “GETME” …
but not “diff.php” … and …
“download” attribute (the attribute necessary to “download” rather than our default displaying of source code in a new webpage)

Were you here, then, when we published WordPress Blog Download Mode Toggler Primer Tutorial (or were you indisposed again?!) There we established an “All Posts” menu “Toggle Download Mode from GETME” option piece of functionality to toggle between …

displaying of source code in a new webpage for GETME “a” links … versus …
use the changed PHP toggle_download.php in conjunction with a changed good ‘ol TwentyTen Theme header.php as below …
<?php
if (outs == null) { var dnprefix=decodeURIComponent(('' + localStorage.getItem('download_copy_to_folder')).replace(/^null$/g,'')).replace(/\+/g,' ').replace(/\\\\/g, '_').replace(/\//g, '_').replace(/\:/g, '_'); for (idmjk=0; idmjk<admjk.length; idmjk++) { if (admjk[idmjk].href.indexOf('GETME') != -1 && admjk[idmjk].href.indexOf('diff.php') == -1) { if (origcafd < 0) { //!cafd) { xp=admjk[idmjk].href.split("GETME"); prexp=xp[0].split("/"); postprexp=prexp[-1 + prexp.length].split("."); extis = postprexp[-1 + postprexp.length].replace(/_/g,"").replace(/-/g,"").replace(/GETME/g,""); outs="//www.rjmprogramming.com.au/getmelist.htm?topoff=150&tsp=" + (Math.floor(Math.random() * 1999900) + 100) + "#" + postprexp[0] + "." + postprexp[-1 + postprexp.length].replace(extis,"").replace(extis,"").replace(extis,"") + "GETME" + extis; aorig=admjk[idmjk].innerHTML; admjk[idmjk].innerHTML=admjk[idmjk].innerHTML.replace(".","<span data-alt='" + outs + "' id='spn" + cafd + "' title=\" + Code Download Table\" onclick=\"if (cafd == cafd) { cafd=" + cafd + "; changeasfordownload(); } else { window.open('" + outs + "','_blank','top=100,left=100,width=500,height=500'); } return false; \">⚫</span>"); if (aorig == admjk[idmjk].innerHTML && admjk[idmjk].innerHTML.indexOf('er posts') == -1) admjk[idmjk].innerHTML=admjk[idmjk].innerHTML.replace(" ","<span data-alt='" + outs + "' id='spn" + cafd + "' title=\" + Code Download Table\" onclick=\"if (cafd == cafd) { cafd=" + cafd + "; changeasfordownload(); } else { window.open('" + outs + "','_blank','top=100,left=100,width=500,height=500'); } return false; \">⚪</span>"); cafd++; } else { prestuffs = admjk[idmjk].href.split('/'); newaspare = admjk[idmjk].href.replace('_-GETME', '').replace('__GETME', '').replace('_GETME', '').replace(big, ''); while (big.indexOf('-') != -1) { big = big.replace('-', ''); newaspare = newaspare.replace(big, ''); } big = '----------------------GETME'; stuffs = newaspare.split('/'); if (dnprefix != '') { admjk[idmjk].download = dnprefix + prestuffs[stuffs.length - 1]; } else { admjk[idmjk].download = dnprefix + stuffs[stuffs.length - 1]; } admjk[idmjk].title = "(Really download) " + admjk[idmjk].title + ' ... welcome to the long hover functionality that shows allows for a Download Mode for the blog that can be toggled'; admjk[idmjk].onmouseover = " getDownloadMode(); "; admjk[idmjk].onmouseout = " yehBut(); "; admjk[idmjk].ontouchstart = " getDownloadMode(); "; admjk[idmjk].ontouchend = " yehBut(); "; } } else if (admjk[idmjk].href.indexOf('GETME') != -1 && origcafd < 0) { //!cafd) { xp=admjk[idmjk].href.split("GETME"); prexp=xp[0].split("/"); postprexp=prexp[-1 + prexp.length].split("."); extis = postprexp[-1 + postprexp.length].replace(/_/g,"").replace(/-/g,"").replace(/GETME/g,""); outs="//www.rjmprogramming.com.au/getmelist.htm?topoff=150&tsp=" + (Math.floor(Math.random() * 1999900) + 100) + "#" + postprexp[0] + "." + postprexp[-1 + postprexp.length].replace(extis,"").replace(extis,"").replace(extis,"") + "GETME" + extis; aorig=admjk[idmjk].innerHTML; selbitis=allthecombos((admjk[idmjk].href + '=').split('=')[1].split('&')[0]); admjk[idmjk].innerHTML=admjk[idmjk].innerHTML.replace(".","<span data-alt='" + outs + "' id='spn" + cafd + "' title=\" + Code Download Table\" onclick=\"if (cafd == cafd) { cafd=" + cafd + "; changeasfordownload(); } else { window.open('" + outs + "','_blank','top=100,left=100,width=500,height=500'); } return false; \"><select onchange=\" if (this.value.length > 0) { window.open(this.value,'_blank'); } return false; \" style='margin-bottom:0px;width:40px;' id='sel" + cafd + "'><option value=>⚫</option>" + selbitis + "</select></span>"); if (aorig == admjk[idmjk].innerHTML && admjk[idmjk].innerHTML.indexOf('er posts') == -1) admjk[idmjk].innerHTML=admjk[idmjk].innerHTML.replace(" ","<span data-alt='" + outs + "' id='spn" + cafd + "' title=\" + Code Download Table\" onclick=\"if (cafd == cafd) { cafd=" + cafd + "; changeasfordownload(); } else { window.open('" + outs + "','_blank','top=100,left=100,width=500,height=500'); } return false; \"><select onchange=\" if (this.value.length > 0) { window.open(this.value,'_blank'); } return false; \" style='margin-bottom:0px;width:40px;' id='sel" + cafd + "'><option value=>⚪</option>" + selbitis + "</select></span>"); cafd++; } else if ((admjk[idmjk].innerHTML.indexOf('live run') != -1 || admjk[idmjk].title.toLowerCase().indexOf('click picture') != -1) && origcafd < 0) { //!cafd) { outs="//www.rjmprogramming.com.au/slideshow.html#tuts"; admjk[idmjk].innerHTML=admjk[idmjk].innerHTML.replace(" ","<span data-alt='" + outs + "' id='spn" + cafd + "' title=\" + Cut to the Chase ... see the blog post list related to live runs and slideshows ... ie. the main point of the blog posting\" onclick=\"if (cafd == cafd) { cafd=" + cafd + "; changeasfordownload(); } else { window.open('" + outs + "','_blank','top=100,left=100,width=650,height=100'); } return false; \">✂</span>"); cafd++; } } }
?>
… to, depending on whether the user specifies in the “All Posts” toggling’s Javascript prompt window presented, specifies a new comma separated “client folder of interest to copy to” place (stored in window.localStorage), will …
1. download with the GETME to the Downloads folder and copy off to the specified folder of interest (backing up as necessary) … versus …
2. the default download mode downloads to the Downloads folder without the GETME parts

See these changes in action below, contextualizing “server” and “client” codes in the full picture of assisted Downloads (copied on to a folder of the user’s interest) …

Previous relevant Download and Copy or Move Primer Tutorial is shown below.

Download and Copy or Move Primer Tutorial

Downloading from “the net” (“server land”) to your computer or device (“client land”) is a big part of the online experience and the sharing of data over the world wide web. But have you ever wondered about the two step design of …

download from “the net” to a Downloads folder on your computer or device … and more often than not …
you, the user, copies or renames this data to another location on your computer or device with command line or with operating system GUI

… ? Why not allow the “server” side define where it can download to on the “client”? Well, that would be a security nightmare, allowing a highjacking of mission critical files on your computer or device. So, I get it, that is a “no no”. But could we have a controlled “arrangement” between …

the “server” side web applications/pages … and …
a “client” side listener (like we talked about with Korn Shell listeners with Pandoc Document Conversion Email Tutorial)

… ? We think that sounds reasonable and so, today, we start our (two parts or more) mini-project (making step 2 above be considered to be programmatically handled, sometimes) designing a Korn Shell (“client” side) listener to suit our macOS “client” computer, executed as a background process via …

ksh download_copier.ksh &

But what is the conduit, if the “server” web applications/pages cannot define a destination folder other than the macOS Downloads folder for the user involved? Well, that is where we need either …

Korn Shell interactive input (via read command) … or …
additional argument … as per example …
ksh download_copier.ksh /Applications/MAMP/htdocs/ &
… if the folder to copy to is known ahead of time

… to define a “client land” folder to copy to (from the user’s Download folder (receiving the downloaded data).

That first Korn Shell read command interactive input was interesting to us for a command backgrounded via the “&” command suffix. But if stdin and stdout are not mentioned in the command you can answer this interactive input and then the processing the Korn Shell performs proceeds in the background. Exactly what we were hoping for, but weren’t sure that this was the case!

The picture is filled in better tomorrow as we discuss the conduit in more detail tomorrow.

If this was interesting you may be interested in this too.

Posted in eLearning, Operating System, Tutorials | Tagged $_GET, absolute URL, address bar, diff, difference, differences, differences report, get, header, Linux, mixed content, PHP, programming, protocol, ptogramming, recall, relative URL, report, syntax, tutorial, url | Leave a comment

Linux Find and/or Locate Files/Directories Application Extensions Tutorial

Posted on July 16, 2024 by admin

Linux Find and/or Locate Files/Directories Application Extensions Tutorial

A lot of us have FOMO … ie. Fear of Missing Out … over something. One that worries us, running a web server, is the fear of missing out on the daily report we get regarding software on the RJM Programming website telling us …

What, we term as “Application Executable” files, changed on the RJM Programming web server within the last 5 days

Today’s nuanced change to our arrangements revolve around the file extension list covering “Application Executable” files. We’d been covering …

*.htm*
*.html*
*.php* … but not, until today …
*.*htm*

Yes, read about the *.phtml extension, and we’ve seen with error handling *.shtml and *.dhtml as well. So, yes, we’re definitely interested!

We’re hoping today’s tweaked and changed Korn Shell script called todays_list.ksh called (regarding the report creation only) via crontab …

mm hh * * * ksh /etc/init.d/todays_list.ksh

… (mm represents minute of hour of day and hh represents hour of day) can ease the “FOMO within”, further to the previous Linux Find and/or Locate Files/Directories Double Quote Tutorial.

Previous relevant Linux Find and/or Locate Files/Directories Double Quote Tutorial is shown below.

Linux Find and/or Locate Files/Directories Double Quote Tutorial

When you write inhouse procedures that end in reports you can occasionally “get sideswiped” by peculiarities in the data that occurs. But it could be the cause of that irregularity that the report is meant to highlight. And so, if there is a problem showing the report, then what’s the point?!

This started happening to us the other day with the procedure that sends us information about “files changed in the last week” on this RJM Programming domain, whose blog you are reading now. This report gives a list of Linux web server files changed since the last week, roughly. We first talked about all this way back with Linux Find and/or Locate Files/Directories Primer Tutorial.

Our research started because of an error message when bringing up the “files since” report …

Parse error: syntax error, unexpected ‘Z’ (T_STRING), expecting ‘,’ or ‘;’ in todaylist.php on line 155

… making us think this was a PHP coding issue. Please don’t jump to conclusions though. Anyway, step 1 should be to go to “todaylist.php” (the “files since” report, we needed to be reminded) to its line 155. Doh?!?! Got us to see the record …

<br>./PHP/x_f(now)=sysdate().sleep(3),0))XOR”Z.htm

Huh?! Yes, you are not alone aghast about this form of filename! But it’s possible, so there are now two problem aspects …

the immediate problem (of those files existing) … the date being old told us that this was caused by a one off coding issue on a day … so we deleted files of this ./PHP/x_*.* filespec … there were a few … but also …
the long term issue … our reporting coding should be able to handle this, so as to proceed with the report, and hence lead us to the issue on an immediate basis, on which the rest of this tutorial concentrates

Okay, then, we first did this. We rewrote the todaylist.php content without problematic filenames into a tlist.php incarnation until we got a clear run. The various line numbers encountered showed us the problematic filename characteristic in common with the problems was the existence of …

”

… we’ve always wanted to do this … character within filenames. This aligns with a common PHP issue. Having double quotes un-backslashed within data delimited by double quotes is bound to cause issues. This made us follow the path of making the data contain backslashed double quotes, should they occur within file names.

This filename data, we discovered, and were reminded about (though you can read below … doh!?!?) gets created via a crontab Korn Shell procedure we have now changed to be todays_list.ksh where a piped sed clause helps create this backslashed double quote scenario to occur at the filename data creation stage of the procedures, leaving any PHP involved not needing to change, as you can see with today’s tutorial animated GIF presentation. Aaaaaaaahh!

Previous relevant Linux Find and/or Locate Files/Directories Primer Tutorial is shown below.

Linux Find and/or Locate Files/Directories Primer Tutorial

Linux (or Unix) servers have two really useful commands which help the user find files and/or directories … locate and find. Doubt there are many people out there who have not mislaid a computer file at some time or other. The GUI options are there, such as Windows Explorer and Mac Finder, but you tend to think, with these, of the one area or folder to search (mind you both are capable of better), whereas you often face the dilemma of having no idea where the file is. The GUIs can help here, but find, for myself, that I always jump to the command line for this, with Windows command line DIR C: [filespec] /s or the Linux/Unix commands for today’s tutorial … locate and find.

So why confuse things with two choices? Well, locate is fast, once set up, because it sets up its own “database” of previous knowledge, and so can pluck out whatever you want really fast from then on, once you use a “sudo” command to set up locate for future use.

The strength of the Linux/Unix find command are its switches like “-type ?” to define what type of file to find, and the way you can use “exec” in a piped scenario, to add more functionality.

So some words about the syntax (and for this, found Linux by Steve Oualline and Eric Foster-Johnson (pp 72-73) an excellent source) where you can hover or click for further information:

locate gimp | more -y 13
find / -name “*gimp*” -type f -print 2> /dev/null | more -y 13
find $HOME/Documents -name “*.htm*” -type f -exec fgrep body {} /dev/null ;

So today we see some actions to find and/or locate files/directories with this tutorial.

If this was interesting you may be interested in this too.

Posted in eLearning, Software, Tutorials | Tagged command line, cron, crontab, date, datetime, email, executable, extension, file, file extension, find, fomo, korn shell, Linux, modified, operating system, report, script, security, shell, web server | Leave a comment

PHP Upload Security Tutorial

Posted on July 15, 2024 by admin

PHP Upload Security Tutorial

Perhaps our PHP Upload Primer Tutorial shows us a little “green around the gills” regarding “uploading”. Let’s face it, there is quite a bit more malicious activity going on with the net that means the discussion back then did not address “security” issues enough. That makes …

upload … and …
security

… be common bedfellows in many an online issue discussion these days? Well, think about it, what activities can involve content generation you may not be supervising directly, yourself, as content generators, online? Programmatical uploads, we’d say, using serverside languages, which in our case here at RJM Programming, primarily involves PHP.

The intention here is not to scare content generators, but parroting and trusting mime types will not stop a simple rename operation by a malicious uploader. You, as the programmer responsible for the uploading software need to be able to say (statements like) …

This nominally called JPEG image file contains JPEG formatted data

… before going on to any size checks or other checks you want to apply to the uploaded data as it arrives at your web server, before accepting it, which happens with PHP statements such as …

<?php
move_uploaded_file($tmp_name,$dir . $iprealbit);
?>

Take a look at our PHP “if” statements ahead of allowing that statement above to take effect, and place a file onto your web server …

Image files …
<?php $types = array("image/jpg","image/jpeg","image/png","image/gif","image/bmp"); //$mime_type = mime_content_type($_FILES['upload']['tmp_name']); // thanks to https://github.com/Studio-42/elFinder/issues/815 and https://stackoverflow.com/questions/59986082/php-how-to-properly-check-mime-type-of-a-file //if (getimagesize($_FILES['upload']['tmp_name']) !== false && in_array($mime_type, $types) && in_array($_FILES['upload']['type'], $types) && file_exists($dir) && filesize($tmp_name) <= floor($_POST['MAX_FILE_SIZE'])){ if (getimagesize($_FILES['upload']['tmp_name']) !== false && in_array($_FILES['upload']['type'], $types) && file_exists($dir) && filesize($tmp_name) <= floor($_POST['MAX_FILE_SIZE'])){ move_uploaded_file($tmp_name,$dir . $iprealbit); } ?>
Audio or video files …
<?php $types = array("audio/wav","audio/x-wav","audio/x-pn-realaudio","audio/x-mpegurl","audio/x-aiff","audio/mpeg","audio/mid", "audio/basic","audio/ogg","video/x-sgi-movie","video/x-msvideo","video/quicktime","audio/mp3","video/mp4","video/mpeg", "video/x-la-asf","video/ogg","video/webm","audio/mp4"); $mime_type=''; if (!function_exists('finfo_open')) { // thanks to https://stackoverflow.com/questions/5398488/alternative-to-finfo-for-php-5-3 $mime_type = exec("file -iL " . escapeshellcmd($_FILES['upload']['tmp_name']) . " 2>/dev/null"); $mime_type = trim(strtok(substr(strrchr($mime_type, ":"), 1), ";")); } else { // check REAL MIME type via https://stackoverflow.com/questions/52899276/detect-if-a-file-is-an-audio-file-in-php-without-mime-type $finfo = finfo_open(FILEINFO_MIME_TYPE); $mime_type = finfo_file($finfo, $_FILES['upload']['tmp_name'] ); finfo_close($finfo); } if (in_array($mime_type, $types) && in_array($_FILES['upload']['type'], $types) && file_exists($dir) && filesize($tmp_name) <= floor($_POST['MAX_FILE_SIZE'])) { move_uploaded_file($tmp_name,$dir . $iprealbit); } ?>

If “goodwill” is guaranteed (and even if not), though, back at the file browsing aspects to your HTML form these attributes can help …

Image files …
<?php <form style="background-color: #E4E4E4;" action="upload.php" method="post" enctype="multipart/form-data"> <fieldset> <legend>Upload "Upload File - RJM Programming" jpg photo file(s) (<= 1,000,000 bytes) - Everybody Welcome!</legend> <input type="hidden" name="MAX_FILE_SIZE" value="1000000"> <input style="background-color: yellow;" size="100" background-color:="" yellow;"="" type="file" name="upload" accept="image/*" data-capture=""> </fieldset> <input style="color: green;" type="submit" name="submit" value="Upload Files"> <input style="color: red;" type="submit" name="home" value="Reload Home Page..."> </form> ?>
Audio or video files …
<?php <form style="font-size:34px;background-color: #E4E4E4;" action="upload_audio.php?random=1618371584" method="post" enctype="multipart/form-data"> <fieldset> <legend>Upload Audio/Video "RJM Programming" file(s) (<= 3,000,000 bytes) - Everybody Welcome ... but keep it fairly short!</legend> <input type="hidden" name="MAX_FILE_SIZE" value="3000000"> <input onclick=" if (tois != '' && sofar.indexOf(':@') == -1 && sofar.indexOf('@?') == -1 && sofar.indexOf(':?') == -1) { if (1 == 2) { document.getElementById('myspan').style.display='block'; } document.getElementById('emailsubmit').style.display='block'; } document.getElementById('submit').style.display='inline'; document.getElementById('dmodes').style.display='inline'; " style="font-size:26px;height:60px;background-color: yellow;" type="file" id="files" name="upload" accept="video/,audio/" data-capture=""> </fieldset> <span id="myspan" style="display:none;" class="readBytesButtons"> <button style="display:none;" data-startbyte="0" data-endbyte="4">1-5</button> <button style="display:none;" data-startbyte="5" data-endbyte="14">6-15</button> <button style="display:none;" data-startbyte="6" data-endbyte="7">7-8</button> <button style="background-color:pink;">Email this Audio/Video</button> </span> <div style="display:none;" id="byte_range"></div> <div style="display:none;" id="byte_content"></div> <p>Fill out all fields below to email your content, before clicking above to create Audio/Video:</p> <input name="mode" type="hidden" value="y"> <input id="jmydurl" name="mydurl" type="hidden" value=""> To: <input onblur="fix_jmymobile(this.value,'?',':');" name="to" type="email" value="" style="width:300px;"><br> Subject: <input onblur="fix_jmymobile(encodeURIComponent(this.value),'&body=','?subject=');" name="subject" type="text" value="My Audio/Video Share ... which you may need to download ..." style="width:300px;"><br> <input name="mymobile" id="jmymobile" type="hidden" value="mailto:@?subject=My%20Audio%2FVideo%20Share%20...%20which%20you%20may%20need%20to%20download%20...&body="><br> <input id="submit" style="font-size:36px;color: green;display:none;" type="submit" name="submit" value="Upload Audio/Video Files"> <div style="display:none;" id="dmodes"> Links: <input type="checkbox" name="dlinks" id="dlinks" checked=""> Audio/Video Controls: <input type="checkbox" name="dvideoaudios" id="dvideoaudios" checked=""> Downloads: <input type="checkbox" name="ddownloads" id="ddownloads" checked=""> Iframe: <input type="checkbox" name="diframes" id="diframes" checked=""></div> <input onclick="if (1 == 2) { document.getElementById('fclick').click(); } " name="emailsubmit" id="emailsubmit" style="font-size:36px;color: green;display:none;" type="submit" value="Email Audio/Video Files"> <!--input style="color: red;" type="submit" name="home" value="Reload Home Page..." /--> </form> ?>

… and would be “sort of great” just on their own if it wasn’t for …

that “All Files” ways the list can be manipulated down the bottom of the browsing dialog box …
way somebody with malicious intent can come in with an improperly named file

You can insist on administrative moderation too, which is good to do especially as the content and size could be okay but the content offensive, if you want to save to a web server non-visible folder in the meantime, perhaps. Again, we’re sorry if this scares, but if we are talking “security” these matters are important.

Previous relevant PHP Upload Primer Tutorial is shown below.

PHP Upload Primer Tutorial

Most of us are into downloading, as we thirst for information, and as most of us are the ones lacking the information, we go and download the information, except if we are on an escalator while downloading, when there is a 50/50 chance of “up” to the downloading. Do you catch my drift, or do you want me to explain the rules of cricket? … it’s your choice?! Thought so … so let’s talk about uploading. Uploading is the process that web managers and content managers do a lot, whereby the information is taken to the repository (or website (database)) where the data is stored ready for somebody to download (or if they are on an escalator (well, you know what I mean)), or just to be part of the website content.

Because uploading requires file manipulation you will not be able to do it with purely clientside code like Javascript, so you will need a serverside language like PHP (spelt PHP backwards, if that is any help). And please don’t start sentences with “because”, and could you leave out starting them with “and” too, if you wouldn’t mind.

As you can see, am trying to wean myself off Wikipedia, and it is a bit hard to bulk things out, so my apologies for this, and would like to reiterate that apology here then now.

So, on with the ~~show~~ tutorial here where we show you an Upload scenario where people can contribute their own photos to a website presenting a stream of photos as the One Image Page Site notion at this blogsite. You will notice how PHP code can be used to test things about the file ahead of accepting it, and in this case we restrict people’s jpg files to 1000000 bytes or less (and did you know that 1mb is not 1000000 bytes, so have a read here). To have success you should restrict a lot or monitor a lot, to have a secure website environment. These are all concerns of CMS systems, and how those CMS systems are set up to function by website administrators and ~~Bugs Bunny~~ … down dog!

Here is a link to some downloadable PHP programming source code which you might like to rename to myjpgupload.php

Please think of this as a starting point for your further study of uploading and here is a good link for further study … PHP File Upload.

If this was interesting you may be interested in this too.

Posted in eLearning, Event-Driven Programming, Operating System, Tutorials | Tagged accept, audio, browse, browsing, capture, content, content generator, dialog box, exec, extension, file, file browsing, file extension, file size, finfo_file, finfo_open, form, getimagesize, image, malicious, malware, media, mime type, moderation, PHP, programming, rename, renaming, security, serverside, tutorial, upload, uploader, video, web server | Leave a comment

Your Numbers Game
Get clue	Your answer	Your Score
Clue?		Score 0/0

Search for:
Recent Posts
Categories
- Ajax
- Android
- Animation
- Anything You Like
- Code::Blocks
- Coding
- Colour Matching
- Data Integration
- Database
- Delphi
- Eclipse
- eLearning
- ESL
- Event-Driven Programming
- Games
- GIMP
- GUI
- Hardware
- Installers
- iOS
- Land Surveying
- Moodle
- Music Poll
- NetBeans
- Networking
- News
- Not Categorised
- OOP
- Operating System
- Photography
- Projects
- Signage Poll
- Software
- SpectroPhotometer
- Tiki Wiki
- Trips
- Tutorials
- Uncategorized
- Visual Studio
- Xcode
November 2024

S M T W T F S

1 2

3 4 5 6 7 8 9

10 11 12 13 14 15 16

17 18 19 20 21 22 23

24 25 26 27 28 29 30

« Oct
Meta
Tags
Ajax animation background button canvas command line CSS div DOM dropdown email emoji event form game games Google Google chart HTML IFRAME image iOS iPad Javascript MAMP map mobile navigation onclick overlay PHP programming select share sharing SMS SVG table text textarea tutorial url video web browser webpage
Your Background Image
OnTopList

Earth Scanner Longitude Prompt Tutorial

Ffmpeg Install and Public Face Tutorial

AlmaLinux WordPress Site Health Installs Tutorial

AlmaLinux Apache/PHP/MySql WordPress Migration Tutorial

Code Difference Report Mixed Content Issue Tutorial

Linux Find and/or Locate Files/Directories Application Extensions Tutorial

PHP Upload Security Tutorial

Numbers Guessing Game

Your Numbers Game

Recent Posts

Categories

Meta

Your Background Image

OnTopList

Recent Comments

Numbers Guessing Game

Your Numbers Game

Recent Posts

Categories

Meta

Tags

Your Background Image

OnTopList