Robert James Metcalfe Blog

Walking Trip …

Posted on February 23, 2013 by admin

Walking Trip

📅

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

Posted in Photography, Trips | Tagged one image website, photography, trips | 34 Comments

Google Chart Geo Chart Move Event Google Earth Integration Tutorial

Posted on December 22, 2025 by admin

Google Chart Geo Chart Move Event Google Earth Integration Tutorial

Onto the last change to the Google Charts Geo Chart interfacing around here, with Earth Scanner Latitude Country Temperature Map Tutorial, today we’re opening up some …

so far unused onmousemove (ie. mouse pressed down and moving across map pressed down) and ontouchmove (ie. finger pressed down and moving across map pressed down) event logics (applied to the HTML div hosting the Geo Chart world map render) …
for world map renders of the Google Charts Geo Chart …
integrating popup window integration of Google Earth windows …
and working off a “long hover” finish (of ten seconds) to the user hovering over a position on earth

This style of idea, that being “pick a so far unattended to event type to code logic for” all sounds fine, but part of the testing has to be asking the question …

But does this new event logic in any way interfere with other event logics?

This is a concern for any change, but especially those integrating, primarily, a new “event player” into the web application workings …

<?php
// Long hover whole world map $omm=" title='Did you know a mouse move long hover can, after 10 seconds, open a relevant Google Earth window?' "; if (isset($_POST['title']) || isset($_GET['title'])) { if (isset($_POST['title'])) { $omm=((isset($_POST['title']) ? substr(substr(urldecode($_POST['title']),2),0,1) : ' ') == ';' ? '' : $omm); } else if (isset($_GET['title'])) { $omm=((isset($_GET['title']) ? substr(substr(urldecode($_GET['title']),2),0,1) : ' ') == ';' ? '' : $omm); } else { $omm=""; } } $longhover=" var gewo=null, lastgeu='', lhrect=null, lhx=-1, lhy=-1, lhtlx=0, lhtly=0, lhbrx=0, lhbry=0, lhtllong=-180.0, lhtllat=90.0, lhbrlong=180.0, lhbrlat=-90.0, lhmmstart=-1, lhmmend=-1; function lhwait() { var whatlat=0, whatlong=0; lhmmend++; if (eval(eval('' + lhmmend) - eval('' + lhmmstart)) == 10) { if (document.body.innerHTML.indexOf('worl' + 'dview(') == -1 && ('" . (isset($_POST['title']) ? substr(substr(urldecode($_POST['title']),2),0,1) : (isset($_GET['title']) ? substr(substr(urldecode($_GET['title']),2),0,1) : ' ')) . "').indexOf(';') != 0) { whatlong=eval(lhtllong + Math.abs(eval((eval(lhx - lhtlx) / lhrect.width) * eval(lhbrlong - lhtllong)))); whatlat=eval(lhtllat - Math.abs(eval((eval(lhy - lhtly) / lhrect.height) * eval(lhtllat - lhbrlat)))); if (lastgeu != '//earth.google.com/web/@' + ('+' + whatlat).replace('+-','-') + (',+' + whatlong).replace('+-','-') + ',328.51120179a,63169669.71505167d,1y,0h,0t,0r') { lastgeu='//earth.google.com/web/@' + ('+' + whatlat).replace('+-','-') + (',+' + whatlong).replace('+-','-') + ',328.51120179a,63169669.71505167d,1y,0h,0t,0r'; if (gewo) { if (!gewo.closed) { gewo.close(); gewo=null; } } gewo=window.open('//earth.google.com/web/@' + ('+' + whatlat).replace('+-','-') + (',+' + whatlong).replace('+-','-') + ',328.51120179a,63169669.71505167d,1y,0h,0t,0r','_blank','top=180,left=' + eval(-600 + screen.width) + ',width=600,height=600'); } } } } function longhover(ev) { var ps3=0, ps4=0; if (ev.touches) { if (ev.touches[0].pageX) { ps3 = ev.touches[0].pageX; ps4 = ev.touches[0].pageY; } else { ps3 = ev.touches[0].clientX; ps4 = ev.touches[0].clientY; } } else if (ev.clientX || ev.clientY) { ps3 = ev.clientX; ps4 = ev.clientY; } else { ps3 = ev.pageX; ps4 = ev.pageY; } if (('" . (isset($_POST['title']) ? substr(substr(urldecode($_POST['title']),2),0,1) : (isset($_GET['title']) ? substr(substr(urldecode($_GET['title']),2),0,1) : ' ')) . "').indexOf(';') != 0) { if (lhx < 0 || lhy < 0) { lhbrlat=-56.0; lhx=eval('' + ps3); lhy=eval('' + ps4); lhmmstart=0; lhmmend=0; lhrect=ev.target.getBoundingClientRect(); ev.target.title='Did you know a mouse move long hover can, after 10 seconds, open a relevant Google Earth window?'; lhtlx=eval('' + lhrect.left); lhtly=eval('' + lhrect.top); lhbrx=eval(lhtlx + eval('' + lhrect.width)); lhbry=eval(lhtly + eval('' + lhrect.height)); setInterval(lhwait, 1000); } if (ps3 != lhx || ps4 != lhy) { lhmmstart=0; lhmmend=0; lhx=eval('' + ps3); lhy=eval('' + ps4); } } } ";
?>

Again, at least on non-mobile we are pleased to place any new Google Earth popup windows over to the right, and that way, quite possibly not overlaying the Geo Chart, as such.

You can try out “your moves” regarding the changed geo_chart.php inhouse Geo Chart interfacer below …

Previous relevant Earth Scanner Latitude Country Temperature Map Tutorial is shown below.

Earth Scanner Latitude Country Temperature Map Tutorial

The recent Earth Scanner Longitude Emoji Clock Map Tutorial‘s …

longitude right clicked extended functionality to the possibility of an Emoji Clocks Longitude of Interest Map … is matched today by …
1. latitude right clicked extended functionality to the possibility of an Emoji Clocks Latitude of Interest Map … overlayed by …
2. latitude right clicked extended functionality to the possibility of an Average Temperature Country of Interest Map

… as fairness would have us contemplate. We’ve overlayed with the Google Chart Geo Chart before, but we turned to a coded for “particularized guise” of the Geo Chart for the circumstances at hand because there was separate interesting click and hover functionality for each of these overlay layers, and so, for the first time we can recall, with the Geo Chart, we implemented a setInterval controlled toggling display of the overlay layer to allow a user to get to both sets of functionality over a period of time. That overlay layer is that bit different too, harkening back to our early days work interfacing to the Geo Chart, and shading countries via data that involved a country’s two letter ISO code, and to get to the temperature data we used the wonderful Trading Economics – Average Temperature by Country resource, thanks, for our changed earth_scanner.html inhouse Earth Scanner web application calling on the changed geo_chart.php inhouse Geo Chart interfacer.

Previous relevant Earth Scanner Longitude Emoji Clock Map Tutorial is shown below.

Earth Scanner Longitude Emoji Clock Map Tutorial

The recent Earth Scanner Longitude Prompt Tutorial gets “close” to where …

the “where” of the web application world … rubs up against …
the “when” of the web application world

… because the Longitude (ie. west to east) aspect to life is related to the “time” aspects to life, and the way humans have split the world east to west into timezones having their own time systems.

So, at this recent new Earth Scanner web application prompt …

… in our changed earth_scanner.html inhouse Earth Scanner web application, we wanted a chance for the user, via appending (or prepending) a space to otherwise unaltered suggested value, to be able to display a map, and we’ve chosen the Google Chart Geo Chart, thanks, as our interfacing conduit into this idea.

The other helpful resource here are the “half hour sensitive” set of clocks of “emoji land” used in the changed geo_chart.php inhouse Geo Chart interfacer …

<?php echo ”
const findTimeZoneOffset = (tz,date) => { // thanks to https://stackoverflow.com/questions/57837631/timezone-offset-by-timezone-name-for-a-specific-date-in-javascript let utcDate = new Date(date.toLocaleString('en-US', { timeZone: \"UTC\" })); let tzDate = new Date(date.toLocaleString('en-US', { timeZone: tz })); let diff = ( tzDate.getTime() - utcDate.getTime() ) / 1000 / 60 / 60; return diff; }; function emojiclockize(outoh, intime) { var anem=''; anem=('' + clockit('' + findTimeZoneOffset(intime.split(' ')[0], (new Date())))).trim(); if (intime.indexOf(' am') != -1) { if (anem != '') { return outoh.replace('#008000','#ffffbf') + '<text><tspan x=\"' + eval(0 + eval('' + outoh.split(' cx=\"')[1].split('\"')[0])) + '\" y=\"' + eval(0 + eval('' + outoh.split(' cy=\"')[1].split('\"')[0])) + '\">' + anem.split(' am')[0].split(' pm')[0] + '</tspan>' + '</text>'; } return outoh.replace('#008000','#ffffbf'); } if (anem != '') { return outoh + '<text><tspan x=\"' + eval(0 + eval('' + outoh.split(' cx=\"')[1].split('\"')[0])) + '\" y=\"' + eval(0 + eval('' + outoh.split(' cy=\"')[1].split('\"')[0])) + '\">' + anem.split(' am')[0].split(' pm')[0] + '</tspan>' + '</text>'; } return outoh; } function clockit(hoursoffgmt) { // 1 o'clock is 🕐 // 2 o'clock is 🕑 // 12 o'clock is 🕛 // 2:30 is 🕝 // 11:30 is 🕦 // 12:30 is 🕧 var along='Saturday,Sunday,Monday,Tuesday,Wednesday,Thursday,Friday,Saturday,Sunday'; var gmtdatetimeis='' + new Date().toUTCString(); var daybit=''; var ampm=' am'; if (gmtdatetimeis.indexOf('day') != -1) { ampm+=', ' + gmtdatetimeis.split('day')[0].split(' ')[eval(-1 + gmtdatetimeis.split('day')[0].split(' ').length)] + 'day'; } else if (gmtdatetimeis.indexOf(',') != -1) { ampm+=', ' + (gmtdatetimeis.split(',')[0].split(' ')[eval(-1 + gmtdatetimeis.split(',')[0].split(' ').length)] + '').replace(/^Sat$/g,'Saturday').replace(/^Sun$/g,'Sunday').replace(/^Mon$/g,'Monday').replace(/^Tue$/g,'Tuesday').replace(/^Wed$/g,'Wednesday').replace(/^Thu$/g,'Thursday').replace(/^Fri$/g,'Friday'); } if (ampm.length > 3) { daybit=ampm.substring(5); } var minis=eval('' + gmtdatetimeis.split(':')[1]); var hris=eval(('' + gmtdatetimeis.split(':')[0]).split(' ')[eval(-1 + ('' + gmtdatetimeis.split(':')[0]).split(' ').length)]); if (('' + hoursoffgmt).indexOf('-') != -1 && eval(eval('' + hoursoffgmt.replace('+','')) + hris) < 0.0) { ampm=ampm.replace('am', 'pm'); if (daybit != '') { ampm=ampm.replace(daybit, along.split(',' + daybit)[0].split(',')[eval(-1 + along.split(',' + daybit)[0].split(',').length)]); } } else if (('' + hoursoffgmt).indexOf('-') == -1 && eval(eval('' + hoursoffgmt.replace('+','')) + hris) >= 24) { if (daybit != '') { ampm=ampm.replace(daybit, along.split(daybit + ',')[1].split(',')[0]); } } else if (('' + hoursoffgmt).indexOf('-') == -1 && eval(eval('' + hoursoffgmt.replace('+','')) + hris) >= 12) { ampm=ampm.replace('am', 'pm'); } hris+=eval(eval(24 + eval('' + hoursoffgmt.replace('+','').split('.')[0])) % 24); if (('' + hoursoffgmt.replace('+','')).indexOf('.5') != -1) { if (('' + hoursoffgmt.replace('+','')).indexOf('-') != -1 && minis >= 30) { minis-=30; } else if (('' + hoursoffgmt.replace('+','')).indexOf('-') != -1) { hris--; if (hris < 24) { hris=23; ampm=ampm.replace('am', 'pm'); if (daybit != '') { ampm=ampm.replace(daybit, along.split(',' + daybit)[0].split(',')[eval(-1 + along.split(',' + daybit)[0].split(',').length)]); } } minis+=30; } else if (('' + hoursoffgmt.replace('+','')).indexOf('-') == -1 && minis < 30) { minis+=30; } else if (('' + hoursoffgmt.replace('+','')).indexOf('-') != -1) { hris++; if (hris > 24) { hris=24; ampm=ampm.replace('pm', 'am'); if (daybit != '') { ampm=ampm.replace(daybit, along.split(daybit + ',')[1].split(',')[0]); } } minis-=30; } } else if (('' + hoursoffgmt.replace('+','')).indexOf('.25') != -1) { if (('' + hoursoffgmt.replace('+','')).indexOf('-') != -1 && minis >= 15) { minis-=15; } else if (('' + hoursoffgmt.replace('+','')).indexOf('-') != -1) { hris--; if (hris < 24) { hris=23; ampm=ampm.replace('am', 'pm'); if (daybit != '') { ampm=ampm.replace(daybit, along.split(',' + daybit)[0].split(',')[eval(-1 + along.split(',' + daybit)[0].split(',').length)]); } } minis+=15; } else if (('' + hoursoffgmt.replace('+','')).indexOf('-') == -1 && minis < 45) { minis+=15; } else if (('' + hoursoffgmt.replace('+','')).indexOf('-') != -1) { hris++; if (hris > 24) { hris=24; ampm=ampm.replace('pm', 'am'); if (daybit != '') { ampm=ampm.replace(daybit, along.split(daybit + ',')[1].split(',')[0]); } } minis-=15; } } else if (('' + hoursoffgmt.replace('+','')).indexOf('.75') != -1) { if (('' + hoursoffgmt.replace('+','')).indexOf('-') != -1 && minis >= 45) { minis-=45; } else if (('' + hoursoffgmt.replace('+','')).indexOf('-') != -1) { hris--; if (hris < 24) { hris=23; ampm=ampm.replace('am', 'pm'); if (daybit != '') { ampm=ampm.replace(daybit, along.split(',' + daybit)[0].split(',')[eval(-1 + along.split(',' + daybit)[0].split(',').length)]); } } minis+=45; } else if (('' + hoursoffgmt.replace('+','')).indexOf('-') == -1 && minis < 15) { minis+=45; } else if (('' + hoursoffgmt.replace('+','')).indexOf('-') != -1) { hris++; if (hris > 24) { hris=24; ampm=ampm.replace('pm', 'am'); if (daybit != '') { ampm=ampm.replace(daybit, along.split(daybit + ',')[1].split(',')[0]); } } minis-=45; } } //alert('' + hoursoffgmt + ' ' + hris + ' ' + minis + ' ' + gmtdatetimeis); if (minis > 45 && eval(hris % 12) == 0) { return ' ' + String.fromCodePoint(128336) + ampm; } else if (eval(hris % 12) == 0 && minis <= 15) { return ' ' + String.fromCodePoint(128347) + ampm; } else if (eval(hris % 12) == 0) { return ' ' + String.fromCodePoint(128359) + ampm; } else if (minis >= 45) { return ' ' + String.fromCodePoint(eval(eval(hris % 12) + 128336)) + ampm; } else if (minis <= 15) { return ' ' + String.fromCodePoint(eval(eval(hris % 12) + 128335)) + ampm; } else { return ' ' + String.fromCodePoint(eval(eval(hris % 12) + 128347)) + ampm; } return ''; } function tel(ohpro) { var outohis=ohpro; if (ohpro.indexOf(' title=\"') != -1 && ohpro.indexOf('<title>') == -1 && ohpro.indexOf('</') != -1) { outohis=ohpro.replace('</', '<title>' + ohpro.split(' title=\"')[1].split('\"')[0] + '</title></'); } if (outohis.indexOf(' stroke=') != -1 && outohis.indexOf(' fill=') == -1 && outohis.indexOf('<circle') != -1) { outohis=outohis.replace(' stroke=', ' fill=\"#008000\" stroke='); } if (outohis.indexOf(' r=\"') != -1 && document.URL.indexOf('invisible=') != -1) { outohis=outohis.replace(' r=\"' + outohis.split(' r=\"')[1].split('\"')[0], ' r=\"0'); } // New emoji clocks on a Longitude (Google Chart Geo Chart) Map via Earth Scanner below ... if (outohis.replace(' am </', ' am</').indexOf(' am</title>') != -1) { outohis=emojiclockize(outohis.replace('#008000','#ffffbf'), outohis.split('<title>')[1].split('</title>')[0].split('0')[0].split('1')[0].split('2')[0].split('3')[0].split('4')[0].split('5')[0].split('6')[0].split('7')[0].split('8')[0].split('9')[0].trim().replace(/\ /g,'_')); } else if (outohis.replace(' pm </', ' pm</').replace(' pm</',' pm</').indexOf(' pm</title>') != -1) { outohis=emojiclockize(outohis, outohis.split('<title>')[1].split('</title>')[0].split('0')[0].split('1')[0].split('2')[0].split('3')[0].split('4')[0].split('5')[0].split('6')[0].split('7')[0].split('8')[0].split('9')[0].trim().replace(/\ /g,'_')); } return outohis; }
“; ?>

Previous relevant Earth Scanner Longitude Prompt Tutorial is shown below.

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.

Stop Press … 24/2/2025 …

A tweaked missing_two.html‘s “Missing Two” web application fixes up some gyroscope miscalculations, and sorry for the delay!

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 event, event.type, geo chart, geographicals, Google Charts, google earch, hover, integration, latitude, long hover, longitude, Mercator, mercator projection, move, onmousemove, ontouchmove, PHP, popup, popup window, programming, software integration, tutorial, window | Leave a comment

Local Operating System Menu Ffmpeg Windows Front Camera and Audio Recordings Tutorial

Posted on December 21, 2025 by admin

Local Operating System Menu Ffmpeg Windows Front Camera and Audio Recordings Tutorial

Yesterday’s Local Operating System Menu Ffmpeg Windows Recordings Tutorial‘s …

Windows …
ffmpeg … based …
Screenshot … video (only) capture … via …
-f gdigrab
… was far less useful than macOS ideas (of the day before that) … and so we looked into the possibilities for …
instead, trying …
1. Front Camera (ie. user selfies)
2. Audio
… possibilities via …
-f dshow
… usage

… and we got great lead ins via this link, thanks.

The vast majority of a day’s work on this revolved around the audio stream silent on an outputted *.mp4 video/audio^try.

Success panned out involving use of the ffmpeg switch, ours being …

-rtbufsize 2125M

… in amongst (as an example of 22 seconds of video/audio) …

ffmpeg -f dshow -rtbufsize 2125M -framerate 30 -i video="@device_pnp_\\?\usb#vid_5986&pid_112b&mi_00#6&74cf6fe&1&0000#{65e8773d-8f56-11d0-a3b9-00a0c9223196}\global":audio="@device_cm_{33D9A762-90C8-11D0-BD43-00A0C911CE86}\wave_{66E62C12-43BC-47BE-8457-CD6BDD6C200D}" -t 22 -c:a aac C:\MAMP\htdocs\mic_recording.mp4 < C:\MAMP\htdocs\mic_recording.y 2> C:\MAMP\htdocs\mic_recording.err

… (as infilled via the rearrangements below) to get more success with Luna’s ventriloquizing …

… and involved a more savvy and downloadable lookfor_extravaganza.bat arrangement regarding the names of the video and audio devices to stream from …

rem lookfor_extravaganza.bat rem RJM Programming rem November, 2025 rem Help out open_extravaganza.php on local Windows MAMP incarnation regarding no file_put_contents nor exec nor shell_exec allowed rem Installed via ... rem Win + R rem shell:startup rem ... copied into place via advice of ... rem https://www.google.com/search?q=continuousnning+in+background+at+login&rlz=1C5OZZY_en&oq=continuousnning+in+background++at+login&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIJCAEQIRgKGKABMgkIAhAhGAoYoAEyCQgDECEYChigAdIBCjc1MjA1ajBqMTWoAgCwAgA&sourceid=chrome&ie=UTF-8 @echo off cd C:\MAMP\htdocs echo y > c:\MAMP\htdocs\open_extravaganza.y if exist c:\MAMP\htdocs\dshow_va.txt erase c:\MAMP\htdocs\dshow_va.txt < c:\MAMP\htdocs\open_extravaganza.y c:\PROGRA~1\IMAGEM~1.0~Q\ffmpeg.exe -f dshow -list_devices true -i dummy 2> c:\MAMP\htdocs\dshow_va.txt :top if exist c:\MAMP\htdocs\stop_extravaganza.bzt rename c:\MAMP\htdocs\stop_extravaganza.bzt stop_extravaganza.bat if exist c:\MAMP\htdocs\stop_extravaganza.bat start "" c:\MAMP\htdocs\stop_extravaganza.bat :stop if exist c:\MAMP\htdocs\open_extravaganza.bxt rename c:\MAMP\htdocs\open_extravaganza.bxt open_extravaganza.bat if exist c:\MAMP\htdocs\open_extravaganza.bat call c:\MAMP\htdocs\open_extravaganza.bat if exist c:\MAMP\htdocs\open_extravaganza.bat erase c:\MAMP\htdocs\open_extravaganza.bat < c:\MAMP\htdocs\open_extravaganza.y ping /w 5000 127.0.0.1 > NUL if exist c:\MAMP\htdocs\stop_extravaganza.bat goto stop goto top

… in MAMP Apache web server on Windows, with our downloadable latest draft recording_ideas.php placed into it’s Document Root, and so be accessible via URL http://localhost/recording_ideas.php (Windows) to make all this be possible as a new dropdown menu item for download as open_extravaganza.php filename in this public web application off this public supervising web application‘s …

Record yourself

… dropdown option.

Previous relevant Local Operating System Menu Ffmpeg Windows Recordings Tutorial is shown below.

Local Operating System Menu Ffmpeg Windows Recordings Tutorial

We’re back to yesterday’s Local Operating System Menu Ffmpeg macOS Recordings Tutorial‘s day before’s Local Operating System Menu Clip Windows Clipboard Tutorial‘s …

Windows local system “Intranet feeling” integrations …
depending on a local (Windows or macOS) Apache web server (eg. MAMP) install …
along with downloading of RJM Programming PHP code files (with another new one to do today as explained below), as directed, into that Apache web server’s Document Root folder … and for today’s work …
the great, the stupendous ffmpeg installed in that local operating system environment … and for today, we’re finding, because of (what we are seeing regarding Windows) MAMP, and it’s PHP version security restrictions …
we reused the ideas as explained in Local Operating System Menu Intranet Feel Windows Tutorial …

… and so, what we ended up with was an “as you login it starts” lookfor_extravaganza.bat we wrote that has less qualms with all these security matters happening in PHP, looking like lookfor_extravaganza.bat (where you could consider the timeout command rather than our ping means to introduce a sleep/wait) …

rem lookfor_extravaganza.bat rem RJM Programming rem November, 2025 rem Help out open_extravaganza.php on local Windows MAMP incarnation regarding no file_put_contents nor exec nor shell_exec allowed rem Installed via ... rem Win + R rem shell:startup rem ... copied into place via advice of ... rem https://www.google.com/search?q=continuousnning+in+background+at+login&rlz=1C5OZZY_en&oq=continuousnning+in+background++at+login&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIJCAEQIRgKGKABMgkIAhAhGAoYoAEyCQgDECEYChigAdIBCjc1MjA1ajBqMTWoAgCwAgA&sourceid=chrome&ie=UTF-8 @echo off cd C:\MAMP\htdocs echo y > c:\MAMP\htdocs\open_extravaganza.y :top if exist c:\MAMP\htdocs\open_extravaganza.bxt rename c:\MAMP\htdocs\open_extravaganza.bxt open_extravaganza.bat if exist c:\MAMP\htdocs\open_extravaganza.bat call c:\MAMP\htdocs\open_extravaganza.bat if exist c:\MAMP\htdocs\open_extravaganza.bat erase c:\MAMP\htdocs\open_extravaganza.bat < c:\MAMP\htdocs\open_extravaganza.y ping /w 5000 127.0.0.1 > NUL goto top

… leaving the PHP to just arrange that c:\MAMP\htdocs\open_extravaganza.bxt gets written via fopen means. Did you read above about where to “plonk” a DOS *.bat so that it starts up on logging in, as per …

Win + R shell:startup ... copied into place via advice of ...

this great advice, thanks … being, perhaps, simpler than Task Schedular thoughts?!
facilitating another idea, around here, of media (ie. screenshot) recording

… Windows local underlying operating system PHP functionality happening.

As we explained yesterday, ever since the demise of Flash as a practical option for these media capture ideas, we’ve been keen to get something going, and after stumbling onto this great advice, it got us enthused enough to write onto an installed MAMP Apache web server on Windows, with our downloadable latest draft recording_ideas.php placed into it’s Document Root, and so be accessible via URL http://localhost/recording_ideas.php (Windows) to make all this be possible as a new dropdown menu item for download as open_extravaganza.php filename (changed this way) in this public web application called by this public supervising web application‘s …

Record yourself

… new dropdown option.

Previous relevant Local Operating System Menu Ffmpeg macOS Recordings Tutorial is shown below.

Local Operating System Menu Ffmpeg macOS Recordings Tutorial

We’re back to yesterday’s Local Operating System Menu Clip Windows Clipboard Tutorial‘s day before’s Local Operating System Menu Pbcopy macOS Clipboard Tutorial‘s …

macOS local system “Intranet feeling” integrations …
depending on a local (macOS or Windows) Apache web server (eg. MAMP) install …
along with downloading of RJM Programming PHP code files (with another new one to do today as explained below), as directed, into that Apache web server’s Document Root folder … and for today’s work …
the great, the stupendous ffmpeg installed in that local operating system environment …
facilitating another idea, around here, of media (ie. audio or screenshot/audio) recording

… PHP functionality happening. Ever since the demise of Flash as a practical option for these media capture ideas, we’ve been keen to get something going, and after stumbling onto this great advice, it got us enthused enough to write onto an installed MAMP Apache web server, with our downloadable latest draft recording_ideas.php placed into it’s Document Root, and so be accessible via URL http://localhost:8888/recording_ideas.php (macOS) to make all this be possible as a new dropdown menu item for download as open_extravaganza.php filename (changed this way) in this public web application called by this public supervising web application‘s …

Record yourself

… new dropdown option.

Previous relevant Local Operating System Menu Clip Windows Clipboard Tutorial is shown below.

Local Operating System Menu Clip Windows Clipboard Tutorial

Onto yesterday’s Local Operating System Menu Pbcopy macOS Clipboard Tutorial …

macOS	pbcopy # to clipboard	; is command separator	… in Windows there are equivalents as below …
Windows	clip # to clipboard	& is command separator

… thank goodness, and so Windows ideas can be incorporated into yesterday’s just macOS work.

And yes, we still ask that you have a macOS or Windows MAMP Apache web server installed, with our downloadable second draft pbcopy_ideas.php placed into it’s Document Root, and so be accessible via URL http://localhost:8888/pbcopy_ideas.php (macOS) or http://localhost/pbcopy_ideas.php (Windows) to make all this be possible as a new dropdown menu item for download as open_extravaganza.php filename (changed this way) in this public web application called by this public supervising web application.

Previous relevant Local Operating System Menu Pbcopy macOS Clipboard Tutorial is shown below.

Local Operating System Menu Pbcopy macOS Clipboard Tutorial

Specific to macOS, and further to the recent Text to Speech Hashtagging Tutorial, today we’re adding a new local operating system (accessed in an “Intranet feeling” way) involving the great …

pbcopy and pbpaste

… dynamic (very Fred and Ginger … if you don’t mind … and how’s your father) duo to respectively “copy to your local operating macOS system clipboard” and “paste from your local operating macOS system clipboard”, effectively bringing one of the favourite desktop system “things to do” into the realms of the web browser wooooorrrrrrllllldddd.

For this functionality, we ask of the user …

What is your macOS command to pipe pbcopy from?

Reg flag! Red flag! Defcon twenty zillion ^{whatevvvveeeerrrr} whatevvvveeeerrrr! Yes, of course, making the operating system command a variable in all this could be dangerous, and we flag that “on hover”, but really, catastrophizing here is a bit rich, when it is you (in your “Intranet feeling” woooooorrrrddd) that will be hurt via malicious goings on, and we’re hoping the number of masochists out there consider “Match Is SOS” ^{so sage}_{so sage} instead?! Anyway, we default to a very mild mannered …

ls -clt ~/Documents ~/Desktop ~/Downloads

… scenario here. Yes, we still ask that you have a macOS MAMP Apache web server installed, with our downloadable first draft “proof of concept” pbcopy_ideas.php placed into it’s Document Root, and so be accessible via URL http://localhost:8888/pbcopy_ideas.php to make all this be possible as a new dropdown menu item for download as open_extravaganza.php filename (changed this way) in this public web application called by this public supervising web application‘s …

Clipboard paste and copy D folder listings

… new macOS dropdown option.

Previous relevant Text to Speech Hashtagging Tutorial is shown below.

Text to Speech Hashtagging Tutorial

Around here … it’s official …

we’re having a morph!

Please … please … no congratulations yet?! And thanks for the tomatoes … very ripe?!

Anyway, yesterday’s Local Operating System Menu Intranet Feel Commentary Tutorial has struck a chord in that for …

macOS

… users we think there is a different aspect to ideas revolving around …

speech … and …
text

… we want to pursue. We’ve already forewarned above, of exclusions, but for full functionality with these ideas there probably will be more to follow.

Around here there is no adage “let perfection be the enemy of the good” and so “on we go”, but, a precursor is to introduce …

our inhouse macOS “say” interfacing PHP … to …
more independent hashtagging smarts

… hashtagging (as we’ve been harping on about more and more recently) being …

able to support a lot of data up at any URL (eg. of a web browser address bar, and so can help interface a public domain “Internet” URL talking to a local (eg. MAMP Apache web server based) web server “Intranet”^feeling URL) …
can support dynamic scenarios with web application webpages (especially PHP ones) where the webpage can achieve things dynamically without navigating to another webpage

But aren’t we going to confront CORS restrictions here?

Well … shhhhhh … but a name^d HTML iframe child and a window.open …

<?php
$issayable=''; $vcb="Alex"; $vvcb=""; if (PHP_OS == "Darwin") { $issayable='y'; if (isset($_GET['saythis']) && $vvcb == "") { $vvcb=str_replace(' ',' +',str_replace('+',' ',urldecode($_GET['saythis']))); } if (isset($_GET['voice'])) { $vcb=explode(' ',str_replace('+',' ',urldecode($_GET['voice'])))[0]; } if (isset($_GET['justsayingforafriend']) && $vvcb != "") { exec('say -v ' . $vcb . ' ' . $vvcb); exit; } }
<?php echo ”
var saymode='" . $dsm . "'; var issayable='" . $issayable . "'; var lastlhis='', lastlhthingo='',lhlook=false; function lastlhex() { if (lastlhis != document.getElementById('theproofif').src) { lastlhis=document.getElementById('theproofif').src; } else if (lastlhthingo != ('' + location.hash)) { lastlhthingo=('' + location.hash); if ((issayable == 'y' || ('' + navigator.platform).toLowerCase().indexOf('mac') == 0) && ('' + document.URL + '#' + decodeURIComponent(('' + location.hash))).indexOf('saythis=') != -1 && ('' + document.URL + '#' + decodeURIComponent(('' + location.hash))).indexOf('media=') == -1) { if ((issayable == 'y' || ('' + navigator.platform).toLowerCase().indexOf('mac') == 0) && ('' + document.URL + '#' + decodeURIComponent(('' + location.hash))).indexOf('voice=') != -1 && ('' + document.URL + '#' + decodeURIComponent(('' + location.hash))).indexOf('media=') == -1) { if (document.getElementById('svoicecode').innerHTML.indexOf(decodeURIComponent(document.URL.split('voice=')[1].split('&')[0].split('#')[0]).replace(/\+/g,' ').replace(/\ \ /g,' +') + '\"') != -1) { document.getElementById('svoicecode').value=document.getElementById('svoicecode').innerHTML.split(decodeURIComponent(document.URL.split('voice=')[1].split('&')[0].split('#')[0]).replace(/\\+/g,' ').replace(/\\ \\ /g,' +') + '\"')[0].split('\"')[eval(-1 + document.getElementById('svoicecode').innerHTML.split(decodeURIComponent(document.URL.split('voice=')[1].split('&')[0].split('#')[0]).replace(/\\+/g,' ').replace(/\\ \\ /g,' +') + '\"')[0].split('\"').length)] + decodeURIComponent(document.URL.split('voice=')[1].split('&')[0].split('#')[0]).replace(/\\+/g,' ').replace(/\\ \\ /g,' +'); } } document.getElementById('thewords').value=decodeURIComponent(document.URL.split('saythis=')[1].split('&')[0].split('#')[0]).replace(/\+/g,' ').replace(/\ \ /g,' +'); if (56 == 56) { if (issayable == 'y') { document.getElementById('theproofif').src='HTTP://localhost:8888/macos_say_record.php?justsayingforafriend=y&voice=' + document.getElementById('svoicecode').value.split(' ')[eval(-1 + document.getElementById('svoicecode').value.split(' ').length)] + '&saythis=' + encodeURIComponent(document.getElementById('thewords').value); } else { window.open('HTTP://localhost:8888/macos_say_record.php?justsayingforafriend=y&voice=' + document.getElementById('svoicecode').value.split(' ')[eval(-1 + document.getElementById('svoicecode').value.split(' ').length)] + '&saythis=' + encodeURIComponent(document.getElementById('thewords').value), 'theproofif'); } } else { zhr = new XMLHttpRequest(); zform=new FormData(); zform.append('justsayingforafriend', 'y'); zform.append('saythis', document.getElementById('thewords').value); zform.append('voice', document.getElementById('svoicecode').value.split(' ')[eval(-1 + document.getElementById('svoicecode').value.split(' ').length)]); zhr.open('get', 'HTTP://localhost:8888/macos_say_record.php', true); zhr.send(zform); } } } }
“; ?>
<?php echo ”
<iframe data-onerror=alert(564); onload=resproof(this); name=theproofif id=theproofif style=display:none; src='/About_Us.html'></iframe>
“; ?>

… can be that “Fred and Ginger” pairing to make this “Internet and Intranet” interplay seamless … shhhhhhh!

That being said, if you are a macOS user with a local web server like MAMP installed we’d ask you to download to a macOS MAMP port 8888 Document Root folder the changed PHP macos_say_record.php (where macOS users who have downloaded to an 8888 port MAMP local Apacahe web server can click/try the user editable HtTp://localhost:8888/macos_say_record.php?justsayingforafriend=y&saythis=Welcome+one+and+all&voice=Karen) and try at the public RJM Programming website via this link or below …

Previous relevant Local Operating System Menu Intranet Feel Commentary Tutorial is shown below.

Local Operating System Menu Intranet Feel Commentary Tutorial

Further to yesterday’s Local Operating System Menu Intranet Feel Operator Tutorial there are a couple of macOS specific additional pieces of functionality we’d like to offer users, they being …

the macOS open command has the ability to try to open any windows it creates in the background via it’s …
-g
… switch
as we are on macOS why not offer a Text to Speech means of adding commentary as macOS open commands are issued via its …
say
… command

? And closing arguments against this will be accepted up until the end of Black Friday sales, whenever that is?!

We decided to pass these over as your usual get arguments on the address bar URL, being as we are always using PHP $_GET[] data, now, so far, in this project.

And so, yet again, perhaps, you may want to (re-)try download as open_extravaganza.php filename (changed this way) to MAMP’s Document Root folder/directory), and we think it is now less boring for macOS or Windows users to begin with interfacing to our public RJM Programming website (though if you have no Apache/PHP/MySql local web server, and want to install one, a right click on the dropdown below, for your non-mobile platform is a possibility for port 8888 on macOS and port 80 (ie. the default) on Windows) or try it below …

Previous relevant Local Operating System Menu Intranet Feel Operator Tutorial is shown below.

Local Operating System Menu Intranet Feel Operator Tutorial

Further to yesterday’s Local Operating System Menu Intranet Feel Options Tutorial we broach the issue …

What happens when a delimiter character is the same as an operator character in amongst data sent via HTML form from one webpage to the next webpage?

We’re talking about the + character which can be …

a space encryption character used a lot when PHP is the receiving webpage’s language
an operator in mathematics, for addition

If the latter is the meaning of a + plus character within that form data sent out, how can we know it is not just a space character encrypted?

Excellent question, that we grapple with in different ways around here, all the time!

Today, as far as this goes, take a look at the value attribute of a new macOS dropdown option we introduced today …

<?php
$selstuff="<br><br><form onsubmit=\"formclickmode=0; document.body.style.cursor='pointer'; if (lastselo) { lastselo.style.cursor='pointer'; lastselo=null; } if (document.getElementById('opsel')) { if (document.getElementById('opsel').value.length > 0) { this.action=document.getElementById('opsel').value; } } return perhaps(true,this);\" id=myform method=GET action='./open_extravaganza.php'><select title='Right click can modify dropdown choices' style=background-color:yellow; size=18 id=mysel multiple name=afteropen onchange=\"if (this.value.length != 0) { if (1 == 1) { formclickmode=prg(1,event.target); } else { document.getElementById('sbutmac').click(); } } \"><option oncontextmenu=ocmopt(this); value=''>Select macOS open command type(s) below ...</option><option oncontextmenu=ocmopt(this); value=' -a Finder'>Finder</option><option oncontextmenu=ocmopt(this); value=' -a Preview'>Preview</option><option oncontextmenu=ocmopt(this); value=' -a TextEdit'>TextEdit</option><option oncontextmenu=ocmopt(this); value=' -b com.apple.VoiceMemos'>Voice Memo</option><option oncontextmenu=ocmopt(this); value=' -b com.apple.QuickTimePlayerX https://www.rjmprogramming.com.au/Windows/windows_step_recorder.mov'>QuickTime Player</option><option oncontextmenu=ocmopt(this); value=' -b com.apple.VoiceOverUtility'>VoiceOver Utility</option><option oncontextmenu=ocmopt(this); value=' ~/Desktop/Screen\\ Shot\\ *.png'>Preview all screenshot files</option><option oncontextmenu=ocmopt(this); value=' -a Firefox https://www.rjmprogramming.com.au'>Firefox</option><option oncontextmenu=ocmopt(this); value=' -a Safari http://localhost:8888/macos_say_record.php?saythis=Welcome\\&voice=Karen\\&audioname=;open -a Safari http://localhost:8888/macos_say_record.php'>Safari interface attempt to say</option><option oncontextmenu=ocmopt(this); value=' -b com.apple.ScriptEditor2 ~/Desktop/test_gvp.scpt'>AppleScript example ready to Script->Run</option><option oncontextmenu=ocmopt(this); value=\"IGVjaG8gJzU2NCs5ODc2NScgfCBiYw==\">Add 564 to 98765</option><option oncontextmenu=ocmopt(this); value=' ~/Documents ~/Desktop ~/Downloads'>Open the D folders</option><option oncontextmenu=ocmopt(this); value=' https://google.com'>Google</option><option oncontextmenu=ocmopt(this); value=' https://wikipedia.org'>Wikipedia</option><option oncontextmenu=ocmopt(this); value=' https://www.rjmprogramming.com.au'>RJM Programming</option><option oncontextmenu=ocmopt(this); value='ls -l . | open -f'>Pipe folder listing into TextEdit</option><option oncontextmenu=ocmopt(this); value='x-man-page://open'>Show man page in Terminal</option></select><br><br><input id=sbutmac type=submit value='Execute'></input></form>";
?>

Do you recognize any new encryption pattern with this option’s value? Yes, it is the …

base64 encoded

… version of …

echo '564+98765' | bc

… as a macOS Terminal application command line way to add 564 + 98765 via the macOS bc command, we got wind of via …

<html> <body> <script type=text/javascript> var x=prompt('' + window.btoa(" echo '564+98765' | bc"), '' + window.btoa(" echo '564+98765' | bc")); </script> </body> </html>

… and please be assured if one of your own dropdown option entry values contains a + character you do not have to do the work above (unless you are a masochist, that is), rather the web application can help you out.

Which begs the question …

If window.btoa is the “Fred” of the Javascript side of the work, what is the PHP receiving side’s “Ginger”?

Well, yes, would that be base64_decode pray tell?!

<?php
$plusin='+'; $plusout=' '; $fromsc='~/Desktop/test_gvp.scpt'; $tosc='~/Desktop/test_gvp.scpt'; function oururldecode($ofwhat) { global $plusin, $plusout, $fromsc, $tosc; $interim=str_replace($fromsc,$tosc,urldecode($ofwhat)); if (strpos($interim, ' ') === false || substr(($interim . 'x'),0,1) == '+') { $plusin=' '; $plusout=' '; return str_replace($fromsc,$tosc,base64_decode($ofwhat)); } else { $plusin='+'; $plusout=' '; } return $interim; } if (isset($_GET['afteropen'])) { if (sizeof(explode('afteropen=', '?' . $_SERVER['QUERY_STRING'])) > 2) { for ($thisone=1; $thisone<sizeof(explode('afteropen=', '?' . $_SERVER['QUERY_STRING'])); $thisone++) { array_push($afteropens, str_replace(' ',' ' . $plusin,str_replace($plusin,$plusout,oururldecode(explode('#',explode('&',explode('afteropen=', $_SERVER['QUERY_STRING'])[$thisone])[0])[0])))); } } else { $afteropen=(trim(str_replace(' ',' ' . $plusin,str_replace($plusin,$plusout,oururldecode($_GET['afteropen'])))) == '' ? '' : ' ' . trim(str_replace(' ',' ' . $plusin,str_replace($plusin,$plusout,oururldecode($_GET['afteropen']))))); $afteropens=[$afteropen]; } }
?>

This offers a dynamic way to swap between the concepts, whose logic depends a bit on that first value character always being a space in this project. But that is so, and so this thinking helps a lot, and allows for that differentiation of + character meaning between (the rare) + operator (in mathematics) meaning and the + character PHP space character encryption meaning.

Today we’re also introducing an AppleScript interfacing option, and with the “say” option we now allow for command conjoining with the dropdown option value as long as the open directly follows on from the semicolon conjoining ^{think it’s an} operator!

And so, again, perhaps, you may want to (re-)try download as open_extravaganza.php filename (changed this way) to MAMP’s Document Root folder/directory), and we think it is now less boring for macOS or Windows users to begin with interfacing to our public RJM Programming website (though if you have no Apache/PHP/MySql local web server, and want to install one, a right click on the dropdown below, for your non-mobile platform is a possibility for port 8888 on macOS and port 80 (ie. the default) on Windows) or try it below …

Did you know?

Have you noticed in amongst the macOS open command values lots of ones starting with the switch …

-b

? Well, The macOS open command, thanks, told us …

You can specify just the name of an application or the full path, i.e. /Applications/Preview.app. If you need to be specific, you can also specify an application’s bundle identifier with -b com.apple.Preview.

… found out, we’ve been finding, successfully, via …

in Finder right click the application of interest
click Show Package Contents
open the info.plist file in your favourite Text Editor
look for …

CFBundleIdentifier

… within, for example, AppleScript’s info.plist …
<key>CFBundleIdentifier</key> <string>com.apple.ScriptEditor2</string>
… to come up with, for example …
open -b com.apple.ScriptEditor2
… as a way to open macOS application AppleScript (or Script Editor)

Previous relevant Local Operating System Menu Intranet Feel Options Tutorial is shown below.

Local Operating System Menu Intranet Feel Options Tutorial

A static list of options in the functional dropdown, as with yesterday’s Local Operating System Menu Intranet Feel Windows Tutorial does not sound as much fun as …

dropdown (ie. select element) options that if you right click bring up a means by which …
1. existant option can be modified
2. a new option can be added
3. the option pointed at effectively nullified
4. an option to remember for next time on that web browser when the web application is re-opened
5. an option to forget the previous option’s work … it works! … we’ve already forgotten! … chortle, chortle
… and we decided also, now that the user has some control over functionality, then …
offer email and/or SMS sharing including or excluding any option tinkering as described above
offer more Windows explorer.exe options thanks to https://www.geoffchappell.com/studies/windows/shell/explorer/cmdline.htm
offer the chance off an RJM Programming incarnation’s top MAMP/macOS/Windows dropdown (ie. select element, now showing with size attribute 3) right click chances to adjust Apache (eg. MAMP) port setting assumptions

And so, perhaps, you may want to (re-)try download as open_extravaganza.php filename (changed this way) to MAMP’s Document Root folder/directory), and we think it is now less boring for macOS or Windows users to begin with interfacing to our public RJM Programming website (though if you have no Apache/PHP/MySql local web server, and want to install one, a right click on the dropdown below, for your non-mobile platform is a possibility for port 8888 on macOS and port 80 (ie. the default) on Windows) or try it below …

Previous relevant Local Operating System Menu Intranet Feel Windows Tutorial is shown below.

Local Operating System Menu Intranet Feel Windows Tutorial

Yesterday’s Local Operating System Menu Intranet Feel Multiple Tutorial‘s smarts regarding dropdown multiple selections gets passed through to today’s …

Windows MAMP PHP 7.4.16

… _{oh, oh}^{“They’re mentioning version numbers … that can’t be good”} … interfacing work.

And yes, it was a struggle, with this PHP version on MAMP disallowing …

file_put_contents … and, we would guess, file_get_contents …
exec or shell_exec or passthru or system
fopen writing to any *.bat

… and so, what we ended up with was an “as you login it starts” lookfor_extravaganza.bat we wrote that has less qualms with all these security matters happening in PHP, looking like lookfor_extravaganza.bat (where you could consider the timeout command rather than our ping means to introduce a sleep/wait) …

… leaving the PHP to just arrange that c:\MAMP\htdocs\open_extravaganza.bxt gets written via fopen means. Did you read above about where to “plonk” a DOS *.bat so that it starts up on logging in, as per …

Win + R
shell:startup
… copied into place via advice of …

this great advice, thanks … being, perhaps, simpler than Task Schedular thoughts?!

No time to see what else explorer.exe File Explorer is capable of … that is for another day we’re thinking?!

Anyway, you may want to (re-)try download as open_extravaganza.php filename (changed this way) to MAMP’s Document Root folder/directory), and we think it is now less boring for macOS or Windows users to begin with interfacing to our public RJM Programming website (though if you have no Apache/PHP/MySql local web server, and want to install one, a right click on the dropdown below, for your non-mobile platform is a possibility for port 8888 on macOS and port 80 (ie. the default) on Windows) or try it below …

Previous relevant Local Operating System Menu Intranet Feel Multiple Tutorial is shown below.

Local Operating System Menu Intranet Feel Multiple Tutorial

Our normal tack regarding the method attribute to use on an HTML form element when the recipient webpage is written in PHP is …

preferably use method=POST … because so much more data can be handled that way … but today we’re …
preferring to use method=GET … for several reasons …
1. we cannot see that the data will get too long for method=GET
2. we’re allowing dropdown (ie. select element) multiple selection mode and we found it easier to handle data wise for the recipient to use method=GET with a PHP recipient $_SERVER[‘QUERY_STRING’] able to help better parse a method=GET MAMP style URL like …
  http://localhost:8888/open_extravaganza.php?afteropen=+https%3A%2F%2Fgoogle.com&afteropen=+https%3A%2F%2Fwikipedia.org&afteropen=+https%3A%2F%2Fwww.rjmprogramming.com.au
  … as per …
  <?php
  $afteropens=[]; $thisone=1; if (isset($_GET['afteropen'])) { if (sizeof(explode('afteropen=', '?' . $_SERVER['QUERY_STRING'])) > 2) { for ($thisone=1; $thisone<sizeof(explode('afteropen=', '?' . $_SERVER['QUERY_STRING'])); $thisone++) { array_push($afteropens, str_replace('+',' ',urldecode(explode('#',explode('&',explode('afteropen=', $_SERVER['QUERY_STRING'])[$thisone])[0])[0]))); } } else { $afteropen=(trim(str_replace('+',' ',urldecode($_GET['afteropen']))) == '' ? '' : ' ' . trim(str_replace('+',' ',urldecode($_GET['afteropen'])))); $afteropens=[$afteropen]; } }
  ?>
  … whereas method=POST loses those $_SERVER[‘QUERY_STRING’] possibilities
3. there will be method=GET URLs anyway coming from the newly arranged RJM Programming origin form elements presented now if navigator.platform indicates your underlying operating system is either macOS or Windows (ie. it takes a punt on the form action localhost attribute defined pointing at a local web server (eg. MAMP) … where there is no harm done just trying)

And so, improving on yesterday’s Local Operating System Menu Intranet Feel Tutorial …

the Execute button now means something … ie. you click it ahead of a 10 second allowance before the web application clicks it … allowing for …
multiple operating system actions off that dropdown list can be attempted in any one foray
the RJM Programming incarnation of it may show more functionality possibilities than it used to … all within the limitation of non-mobile platforms only

The advice, then, becomes download as open_extravaganza.php filename (changed this way) to MAMP’s Document Root folder/directory), and we think it is now less boring for macOS or Windows users to begin with interfacing to our public RJM Programming website (though if you have no Apache/PHP/MySql local web server, and want to install one, a right click on the dropdown below, for your non-mobile platform is a possibility for port 8888 on macOS and port 80 (ie. the default) on Windows) or try it below …

Previous relevant Local Operating System Menu Intranet Feel Tutorial is shown below.

Local Operating System Menu Intranet Feel Tutorial

Because we are fortunate enough to have the great MAMP local Apache/PHP/MySql web server in our macOS MacBook Air programming life …

we have a great testing platform to go to before uploading any software to the public RJM Programming domain (quite often as a web application) there
it can be an “Intranet feeling” partner to our public RJM Programming domain

So, what do we mean by “Intranet feeling”? Well, have you ever been involved at a workplace that combined …

a public facing website on the Internet … but which had a …
members area for “office use only” that if you logged into would take you into a woooorrrrllllddd of procedures and advice and documentation and health and safety rules etcetera etcetera etcetera related to that company, the data of which is “not public” … well, that “not public” bit can sometimes be referred to as an Intranet

? Well … … … … (four holes in the ground) … (make that 5 or 6) … we did/have. And we are awwwwwffffuuuulllllyyy fond of the concept. The thing is though, we are using that “non public” …

Intranet “feeling”

… interfacing to, by and large, offer new web application (quite often PHP) ideas because back at the MAMP local Apache/PHP/MySql local web server we have the freedom to install software not allowed when you host a public website (as well as macOS having some brilliantly unique command line commands such as “open” and “say” (for which we’d ask you to download to a macOS MAMP port 8888 Document Root folder the PHP macos_say_record.php) to offer) perhaps that little bit different to the usual Intranet usage (hence Nala‘s use of the word ~~fillings~~feelings), unless you run the hosting company, that is … and that is^n’t us … though if Nala wants to entertain a gentleman caller one of these days … well … what are we going to say?! Hmmmmm?!

Now, when we presented YouTube API Caller Radio Play Playlist Windows Local System Tutorial we threw down the gauntlet, Luna would say, venturing …

… as your starting gambit, here, where the equivalent of macOS’s “open” is “explorer.exe” on Windows (ie. the File Explorer) … almost as cute!

The audacity^{, Nala}?!

Well, we don’t want to involve ourselves in a “software war” here, but the “bedside better scrutiny” of the great https://scriptingosx.com/2017/02/the-macos-open-command/ advice has only enhanced respect for the macOS open command’s talents, which go far beyond just being able to open a URL from the macOS “Terminal application” command line in your default web browser.

How do we count the ways … Luna?!!!! See the compartmentalization and modularization at play (not the command) here, ~~Dumbo_{web master}~~bugalugs?!

Anyway, we’re off and running on a new project with these themes. The first draft concentrates on ..

macOS .. open … MAMP … but …
Windows … explorer.exe … MAMP

… is there for the popcorn and beer nuts (best in that order) and as you can see below this new web application (best downloaded as open_extravaganza.php filename to MAMP’s Document Root folder/directory) is kind of boring to begin with interfacing to our public RJM Programming website (though if you have no Apache/PHP/MySql local web server, and want to install one, a right click on the dropdown below, for your non-mobile platform is a possibility for port 8888 on macOS and port 80 (ie. the default) on Windows) …

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

Posted in eLearning, Event-Driven Programming, Operating System, Tutorials | Tagged action, Apache, attribute, audio, background, base64, base64_decode, bat, batch, btoa, button, camera, capture, clip, clipboard, commentary, copy, copy and paste, cursor, delimiter, desktop, Did you know, dmain, Document Root, download, dropdowm, email, encryption, event, explorer, explorer.exe, ffmpeg, file explorer, Finder, form, functionality, hashtag, hashtagging, internet, intranet, local web server, macOS, MAMP, media, method, multiple, navigator.platform, oncontextmenu, open, operating system, operator, option, parse, paste, pbcopy, pbpaste, PHP, ping, platform, port, programming, prompt, public domain, public website, recording, right click, say, screenshot, security, select, selection, share, sharing, shell_exec, sleep, SMS, submit, submit button, Text to Speech, timeout, tutorial, upload, url, user interaction, video, wait, web server, window, window.btoa, Windows | Leave a comment

Local Operating System Menu Ffmpeg Windows Recordings Tutorial

Posted on December 20, 2025 by admin

Local Operating System Menu Ffmpeg Windows Recordings Tutorial

We’re back to yesterday’s Local Operating System Menu Ffmpeg macOS Recordings Tutorial‘s day before’s Local Operating System Menu Clip Windows Clipboard Tutorial‘s …

Windows local system “Intranet feeling” integrations …
depending on a local (Windows or macOS) Apache web server (eg. MAMP) install …
along with downloading of RJM Programming PHP code files (with another new one to do today as explained below), as directed, into that Apache web server’s Document Root folder … and for today’s work …
the great, the stupendous ffmpeg installed in that local operating system environment … and for today, we’re finding, because of (what we are seeing regarding Windows) MAMP, and it’s PHP version security restrictions …
we reused the ideas as explained in Local Operating System Menu Intranet Feel Windows Tutorial …

… and so, what we ended up with was an “as you login it starts” lookfor_extravaganza.bat we wrote that has less qualms with all these security matters happening in PHP, looking like lookfor_extravaganza.bat (where you could consider the timeout command rather than our ping means to introduce a sleep/wait) …

rem lookfor_extravaganza.bat rem RJM Programming rem November, 2025 rem Help out open_extravaganza.php on local Windows MAMP incarnation regarding no file_put_contents nor exec nor shell_exec allowed rem Installed via ... rem Win + R rem shell:startup rem ... copied into place via advice of ... rem https://www.google.com/search?q=continuousnning+in+background+at+login&rlz=1C5OZZY_en&oq=continuousnning+in+background++at+login&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIJCAEQIRgKGKABMgkIAhAhGAoYoAEyCQgDECEYChigAdIBCjc1MjA1ajBqMTWoAgCwAgA&sourceid=chrome&ie=UTF-8 @echo off cd C:\MAMP\htdocs echo y > c:\MAMP\htdocs\open_extravaganza.y :top if exist c:\MAMP\htdocs\open_extravaganza.bxt rename c:\MAMP\htdocs\open_extravaganza.bxt open_extravaganza.bat if exist c:\MAMP\htdocs\open_extravaganza.bat call c:\MAMP\htdocs\open_extravaganza.bat if exist c:\MAMP\htdocs\open_extravaganza.bat erase c:\MAMP\htdocs\open_extravaganza.bat < c:\MAMP\htdocs\open_extravaganza.y ping /w 5000 127.0.0.1 > NUL goto top

… leaving the PHP to just arrange that c:\MAMP\htdocs\open_extravaganza.bxt gets written via fopen means. Did you read above about where to “plonk” a DOS *.bat so that it starts up on logging in, as per …

Win + R shell:startup ... copied into place via advice of ...

this great advice, thanks … being, perhaps, simpler than Task Schedular thoughts?!
facilitating another idea, around here, of media (ie. screenshot) recording

… Windows local underlying operating system PHP functionality happening.

Record yourself

… new dropdown option.

Previous relevant Local Operating System Menu Ffmpeg macOS Recordings Tutorial is shown below.

Local Operating System Menu Ffmpeg macOS Recordings Tutorial

We’re back to yesterday’s Local Operating System Menu Clip Windows Clipboard Tutorial‘s day before’s Local Operating System Menu Pbcopy macOS Clipboard Tutorial‘s …

macOS local system “Intranet feeling” integrations …
depending on a local (macOS or Windows) Apache web server (eg. MAMP) install …
along with downloading of RJM Programming PHP code files (with another new one to do today as explained below), as directed, into that Apache web server’s Document Root folder … and for today’s work …
the great, the stupendous ffmpeg installed in that local operating system environment …
facilitating another idea, around here, of media (ie. audio or screenshot/audio) recording

Record yourself

… new dropdown option.

Previous relevant Local Operating System Menu Clip Windows Clipboard Tutorial is shown below.

Local Operating System Menu Clip Windows Clipboard Tutorial

Onto yesterday’s Local Operating System Menu Pbcopy macOS Clipboard Tutorial …

macOS	pbcopy # to clipboard	; is command separator	… in Windows there are equivalents as below …
Windows	clip # to clipboard	& is command separator

… thank goodness, and so Windows ideas can be incorporated into yesterday’s just macOS work.

Previous relevant Local Operating System Menu Pbcopy macOS Clipboard Tutorial is shown below.

Local Operating System Menu Pbcopy macOS Clipboard Tutorial

Specific to macOS, and further to the recent Text to Speech Hashtagging Tutorial, today we’re adding a new local operating system (accessed in an “Intranet feeling” way) involving the great …

pbcopy and pbpaste

For this functionality, we ask of the user …

What is your macOS command to pipe pbcopy from?

ls -clt ~/Documents ~/Desktop ~/Downloads

Clipboard paste and copy D folder listings

… new macOS dropdown option.

Previous relevant Text to Speech Hashtagging Tutorial is shown below.

Text to Speech Hashtagging Tutorial

Around here … it’s official …

we’re having a morph!

Please … please … no congratulations yet?! And thanks for the tomatoes … very ripe?!

Anyway, yesterday’s Local Operating System Menu Intranet Feel Commentary Tutorial has struck a chord in that for …

macOS

… users we think there is a different aspect to ideas revolving around …

speech … and …
text

… we want to pursue. We’ve already forewarned above, of exclusions, but for full functionality with these ideas there probably will be more to follow.

Around here there is no adage “let perfection be the enemy of the good” and so “on we go”, but, a precursor is to introduce …

our inhouse macOS “say” interfacing PHP … to …
more independent hashtagging smarts

… hashtagging (as we’ve been harping on about more and more recently) being …

able to support a lot of data up at any URL (eg. of a web browser address bar, and so can help interface a public domain “Internet” URL talking to a local (eg. MAMP Apache web server based) web server “Intranet”^feeling URL) …
can support dynamic scenarios with web application webpages (especially PHP ones) where the webpage can achieve things dynamically without navigating to another webpage

But aren’t we going to confront CORS restrictions here?

Well … shhhhhh … but a name^d HTML iframe child and a window.open …

… can be that “Fred and Ginger” pairing to make this “Internet and Intranet” interplay seamless … shhhhhhh!

Previous relevant Local Operating System Menu Intranet Feel Commentary Tutorial is shown below.

Local Operating System Menu Intranet Feel Commentary Tutorial

Further to yesterday’s Local Operating System Menu Intranet Feel Operator Tutorial there are a couple of macOS specific additional pieces of functionality we’d like to offer users, they being …

the macOS open command has the ability to try to open any windows it creates in the background via it’s …
-g
… switch
as we are on macOS why not offer a Text to Speech means of adding commentary as macOS open commands are issued via its …
say
… command

? And closing arguments against this will be accepted up until the end of Black Friday sales, whenever that is?!

We decided to pass these over as your usual get arguments on the address bar URL, being as we are always using PHP $_GET[] data, now, so far, in this project.

Previous relevant Local Operating System Menu Intranet Feel Operator Tutorial is shown below.

Local Operating System Menu Intranet Feel Operator Tutorial

Further to yesterday’s Local Operating System Menu Intranet Feel Options Tutorial we broach the issue …

What happens when a delimiter character is the same as an operator character in amongst data sent via HTML form from one webpage to the next webpage?

We’re talking about the + character which can be …

a space encryption character used a lot when PHP is the receiving webpage’s language
an operator in mathematics, for addition

If the latter is the meaning of a + plus character within that form data sent out, how can we know it is not just a space character encrypted?

Excellent question, that we grapple with in different ways around here, all the time!

Today, as far as this goes, take a look at the value attribute of a new macOS dropdown option we introduced today …

Do you recognize any new encryption pattern with this option’s value? Yes, it is the …

base64 encoded

… version of …

echo '564+98765' | bc

… as a macOS Terminal application command line way to add 564 + 98765 via the macOS bc command, we got wind of via …

<html> <body> <script type=text/javascript> var x=prompt('' + window.btoa(" echo '564+98765' | bc"), '' + window.btoa(" echo '564+98765' | bc")); </script> </body> </html>

Which begs the question …

If window.btoa is the “Fred” of the Javascript side of the work, what is the PHP receiving side’s “Ginger”?

Well, yes, would that be base64_decode pray tell?!

Did you know?

Have you noticed in amongst the macOS open command values lots of ones starting with the switch …

-b

? Well, The macOS open command, thanks, told us …

You can specify just the name of an application or the full path, i.e. /Applications/Preview.app. If you need to be specific, you can also specify an application’s bundle identifier with -b com.apple.Preview.

… found out, we’ve been finding, successfully, via …

in Finder right click the application of interest
click Show Package Contents
open the info.plist file in your favourite Text Editor
look for …

CFBundleIdentifier

… within, for example, AppleScript’s info.plist …
<key>CFBundleIdentifier</key> <string>com.apple.ScriptEditor2</string>
… to come up with, for example …
open -b com.apple.ScriptEditor2
… as a way to open macOS application AppleScript (or Script Editor)

Previous relevant Local Operating System Menu Intranet Feel Options Tutorial is shown below.

Local Operating System Menu Intranet Feel Options Tutorial

A static list of options in the functional dropdown, as with yesterday’s Local Operating System Menu Intranet Feel Windows Tutorial does not sound as much fun as …

dropdown (ie. select element) options that if you right click bring up a means by which …
1. existant option can be modified
2. a new option can be added
3. the option pointed at effectively nullified
4. an option to remember for next time on that web browser when the web application is re-opened
5. an option to forget the previous option’s work … it works! … we’ve already forgotten! … chortle, chortle
… and we decided also, now that the user has some control over functionality, then …
offer email and/or SMS sharing including or excluding any option tinkering as described above
offer more Windows explorer.exe options thanks to https://www.geoffchappell.com/studies/windows/shell/explorer/cmdline.htm
offer the chance off an RJM Programming incarnation’s top MAMP/macOS/Windows dropdown (ie. select element, now showing with size attribute 3) right click chances to adjust Apache (eg. MAMP) port setting assumptions

Previous relevant Local Operating System Menu Intranet Feel Windows Tutorial is shown below.

Local Operating System Menu Intranet Feel Windows Tutorial

Yesterday’s Local Operating System Menu Intranet Feel Multiple Tutorial‘s smarts regarding dropdown multiple selections gets passed through to today’s …

Windows MAMP PHP 7.4.16

… _{oh, oh}^{“They’re mentioning version numbers … that can’t be good”} … interfacing work.

And yes, it was a struggle, with this PHP version on MAMP disallowing …

file_put_contents … and, we would guess, file_get_contents …
exec or shell_exec or passthru or system
fopen writing to any *.bat

Win + R
shell:startup
… copied into place via advice of …

this great advice, thanks … being, perhaps, simpler than Task Schedular thoughts?!

No time to see what else explorer.exe File Explorer is capable of … that is for another day we’re thinking?!

Previous relevant Local Operating System Menu Intranet Feel Multiple Tutorial is shown below.

Local Operating System Menu Intranet Feel Multiple Tutorial

Our normal tack regarding the method attribute to use on an HTML form element when the recipient webpage is written in PHP is …

preferably use method=POST … because so much more data can be handled that way … but today we’re …
preferring to use method=GET … for several reasons …
1. we cannot see that the data will get too long for method=GET
2. we’re allowing dropdown (ie. select element) multiple selection mode and we found it easier to handle data wise for the recipient to use method=GET with a PHP recipient $_SERVER[‘QUERY_STRING’] able to help better parse a method=GET MAMP style URL like …
  http://localhost:8888/open_extravaganza.php?afteropen=+https%3A%2F%2Fgoogle.com&afteropen=+https%3A%2F%2Fwikipedia.org&afteropen=+https%3A%2F%2Fwww.rjmprogramming.com.au
  … as per …
  <?php
  $afteropens=[]; $thisone=1; if (isset($_GET['afteropen'])) { if (sizeof(explode('afteropen=', '?' . $_SERVER['QUERY_STRING'])) > 2) { for ($thisone=1; $thisone<sizeof(explode('afteropen=', '?' . $_SERVER['QUERY_STRING'])); $thisone++) { array_push($afteropens, str_replace('+',' ',urldecode(explode('#',explode('&',explode('afteropen=', $_SERVER['QUERY_STRING'])[$thisone])[0])[0]))); } } else { $afteropen=(trim(str_replace('+',' ',urldecode($_GET['afteropen']))) == '' ? '' : ' ' . trim(str_replace('+',' ',urldecode($_GET['afteropen'])))); $afteropens=[$afteropen]; } }
  ?>
  … whereas method=POST loses those $_SERVER[‘QUERY_STRING’] possibilities
3. there will be method=GET URLs anyway coming from the newly arranged RJM Programming origin form elements presented now if navigator.platform indicates your underlying operating system is either macOS or Windows (ie. it takes a punt on the form action localhost attribute defined pointing at a local web server (eg. MAMP) … where there is no harm done just trying)

And so, improving on yesterday’s Local Operating System Menu Intranet Feel Tutorial …

the Execute button now means something … ie. you click it ahead of a 10 second allowance before the web application clicks it … allowing for …
multiple operating system actions off that dropdown list can be attempted in any one foray
the RJM Programming incarnation of it may show more functionality possibilities than it used to … all within the limitation of non-mobile platforms only

Previous relevant Local Operating System Menu Intranet Feel Tutorial is shown below.

Local Operating System Menu Intranet Feel Tutorial

Because we are fortunate enough to have the great MAMP local Apache/PHP/MySql web server in our macOS MacBook Air programming life …

we have a great testing platform to go to before uploading any software to the public RJM Programming domain (quite often as a web application) there
it can be an “Intranet feeling” partner to our public RJM Programming domain

So, what do we mean by “Intranet feeling”? Well, have you ever been involved at a workplace that combined …

a public facing website on the Internet … but which had a …
members area for “office use only” that if you logged into would take you into a woooorrrrllllddd of procedures and advice and documentation and health and safety rules etcetera etcetera etcetera related to that company, the data of which is “not public” … well, that “not public” bit can sometimes be referred to as an Intranet

Intranet “feeling”

Now, when we presented YouTube API Caller Radio Play Playlist Windows Local System Tutorial we threw down the gauntlet, Luna would say, venturing …

… as your starting gambit, here, where the equivalent of macOS’s “open” is “explorer.exe” on Windows (ie. the File Explorer) … almost as cute!

The audacity^{, Nala}?!

How do we count the ways … Luna?!!!! See the compartmentalization and modularization at play (not the command) here, ~~Dumbo_{web master}~~bugalugs?!

Anyway, we’re off and running on a new project with these themes. The first draft concentrates on ..

macOS .. open … MAMP … but …
Windows … explorer.exe … MAMP

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

Posted in eLearning, Event-Driven Programming, Operating System, Tutorials | Tagged action, Apache, attribute, audio, background, base64, base64_decode, bat, batch, btoa, button, capture, clip, clipboard, commentary, copy, copy and paste, cursor, delimiter, desktop, Did you know, dmain, Document Root, download, dropdowm, email, encryption, event, explorer, explorer.exe, ffmpeg, file explorer, Finder, form, functionality, hashtag, hashtagging, internet, intranet, local web server, macOS, MAMP, media, method, multiple, navigator.platform, oncontextmenu, open, operating system, operator, option, parse, paste, pbcopy, pbpaste, PHP, ping, platform, port, programming, prompt, public domain, public website, recording, right click, say, screenshot, security, select, selection, share, sharing, shell_exec, sleep, SMS, submit, submit button, Text to Speech, timeout, tutorial, upload, url, user interaction, video, wait, web server, window, window.btoa, Windows | Leave a comment

Local Operating System Menu Ffmpeg macOS Recordings Tutorial

Posted on December 19, 2025 by admin

Local Operating System Menu Ffmpeg macOS Recordings Tutorial

We’re back to yesterday’s Local Operating System Menu Clip Windows Clipboard Tutorial‘s day before’s Local Operating System Menu Pbcopy macOS Clipboard Tutorial‘s …

macOS local system “Intranet feeling” integrations …
depending on a local (macOS or Windows) Apache web server (eg. MAMP) install …
along with downloading of RJM Programming PHP code files (with another new one to do today as explained below), as directed, into that Apache web server’s Document Root folder … and for today’s work …
the great, the stupendous ffmpeg installed in that local operating system environment …
facilitating another idea, around here, of media (ie. audio or screenshot/audio) recording

Record yourself

… new dropdown option.

Previous relevant Local Operating System Menu Clip Windows Clipboard Tutorial is shown below.

Local Operating System Menu Clip Windows Clipboard Tutorial

Onto yesterday’s Local Operating System Menu Pbcopy macOS Clipboard Tutorial …

macOS	pbcopy # to clipboard	; is command separator	… in Windows there are equivalents as below …
Windows	clip # to clipboard	& is command separator

… thank goodness, and so Windows ideas can be incorporated into yesterday’s just macOS work.

Previous relevant Local Operating System Menu Pbcopy macOS Clipboard Tutorial is shown below.

Local Operating System Menu Pbcopy macOS Clipboard Tutorial

Specific to macOS, and further to the recent Text to Speech Hashtagging Tutorial, today we’re adding a new local operating system (accessed in an “Intranet feeling” way) involving the great …

pbcopy and pbpaste

For this functionality, we ask of the user …

What is your macOS command to pipe pbcopy from?

ls -clt ~/Documents ~/Desktop ~/Downloads

Clipboard paste and copy D folder listings

… new macOS dropdown option.

Previous relevant Text to Speech Hashtagging Tutorial is shown below.

Text to Speech Hashtagging Tutorial

Around here … it’s official …

we’re having a morph!

Please … please … no congratulations yet?! And thanks for the tomatoes … very ripe?!

Anyway, yesterday’s Local Operating System Menu Intranet Feel Commentary Tutorial has struck a chord in that for …

macOS

… users we think there is a different aspect to ideas revolving around …

speech … and …
text

… we want to pursue. We’ve already forewarned above, of exclusions, but for full functionality with these ideas there probably will be more to follow.

Around here there is no adage “let perfection be the enemy of the good” and so “on we go”, but, a precursor is to introduce …

our inhouse macOS “say” interfacing PHP … to …
more independent hashtagging smarts

… hashtagging (as we’ve been harping on about more and more recently) being …

able to support a lot of data up at any URL (eg. of a web browser address bar, and so can help interface a public domain “Internet” URL talking to a local (eg. MAMP Apache web server based) web server “Intranet”^feeling URL) …
can support dynamic scenarios with web application webpages (especially PHP ones) where the webpage can achieve things dynamically without navigating to another webpage

But aren’t we going to confront CORS restrictions here?

Well … shhhhhh … but a name^d HTML iframe child and a window.open …

… can be that “Fred and Ginger” pairing to make this “Internet and Intranet” interplay seamless … shhhhhhh!

Previous relevant Local Operating System Menu Intranet Feel Commentary Tutorial is shown below.

Local Operating System Menu Intranet Feel Commentary Tutorial

Further to yesterday’s Local Operating System Menu Intranet Feel Operator Tutorial there are a couple of macOS specific additional pieces of functionality we’d like to offer users, they being …

the macOS open command has the ability to try to open any windows it creates in the background via it’s …
-g
… switch
as we are on macOS why not offer a Text to Speech means of adding commentary as macOS open commands are issued via its …
say
… command

? And closing arguments against this will be accepted up until the end of Black Friday sales, whenever that is?!

We decided to pass these over as your usual get arguments on the address bar URL, being as we are always using PHP $_GET[] data, now, so far, in this project.

Previous relevant Local Operating System Menu Intranet Feel Operator Tutorial is shown below.

Local Operating System Menu Intranet Feel Operator Tutorial

Further to yesterday’s Local Operating System Menu Intranet Feel Options Tutorial we broach the issue …

What happens when a delimiter character is the same as an operator character in amongst data sent via HTML form from one webpage to the next webpage?

We’re talking about the + character which can be …

a space encryption character used a lot when PHP is the receiving webpage’s language
an operator in mathematics, for addition

If the latter is the meaning of a + plus character within that form data sent out, how can we know it is not just a space character encrypted?

Excellent question, that we grapple with in different ways around here, all the time!

Today, as far as this goes, take a look at the value attribute of a new macOS dropdown option we introduced today …

Do you recognize any new encryption pattern with this option’s value? Yes, it is the …

base64 encoded

… version of …

echo '564+98765' | bc

… as a macOS Terminal application command line way to add 564 + 98765 via the macOS bc command, we got wind of via …

<html> <body> <script type=text/javascript> var x=prompt('' + window.btoa(" echo '564+98765' | bc"), '' + window.btoa(" echo '564+98765' | bc")); </script> </body> </html>

Which begs the question …

If window.btoa is the “Fred” of the Javascript side of the work, what is the PHP receiving side’s “Ginger”?

Well, yes, would that be base64_decode pray tell?!

Did you know?

Have you noticed in amongst the macOS open command values lots of ones starting with the switch …

-b

? Well, The macOS open command, thanks, told us …

You can specify just the name of an application or the full path, i.e. /Applications/Preview.app. If you need to be specific, you can also specify an application’s bundle identifier with -b com.apple.Preview.

… found out, we’ve been finding, successfully, via …

in Finder right click the application of interest
click Show Package Contents
open the info.plist file in your favourite Text Editor
look for …

CFBundleIdentifier

… within, for example, AppleScript’s info.plist …
<key>CFBundleIdentifier</key> <string>com.apple.ScriptEditor2</string>
… to come up with, for example …
open -b com.apple.ScriptEditor2
… as a way to open macOS application AppleScript (or Script Editor)

Previous relevant Local Operating System Menu Intranet Feel Options Tutorial is shown below.

Local Operating System Menu Intranet Feel Options Tutorial

A static list of options in the functional dropdown, as with yesterday’s Local Operating System Menu Intranet Feel Windows Tutorial does not sound as much fun as …

dropdown (ie. select element) options that if you right click bring up a means by which …
1. existant option can be modified
2. a new option can be added
3. the option pointed at effectively nullified
4. an option to remember for next time on that web browser when the web application is re-opened
5. an option to forget the previous option’s work … it works! … we’ve already forgotten! … chortle, chortle
… and we decided also, now that the user has some control over functionality, then …
offer email and/or SMS sharing including or excluding any option tinkering as described above
offer more Windows explorer.exe options thanks to https://www.geoffchappell.com/studies/windows/shell/explorer/cmdline.htm
offer the chance off an RJM Programming incarnation’s top MAMP/macOS/Windows dropdown (ie. select element, now showing with size attribute 3) right click chances to adjust Apache (eg. MAMP) port setting assumptions

Previous relevant Local Operating System Menu Intranet Feel Windows Tutorial is shown below.

Local Operating System Menu Intranet Feel Windows Tutorial

Yesterday’s Local Operating System Menu Intranet Feel Multiple Tutorial‘s smarts regarding dropdown multiple selections gets passed through to today’s …

Windows MAMP PHP 7.4.16

… _{oh, oh}^{“They’re mentioning version numbers … that can’t be good”} … interfacing work.

And yes, it was a struggle, with this PHP version on MAMP disallowing …

file_put_contents … and, we would guess, file_get_contents …
exec or shell_exec or passthru or system
fopen writing to any *.bat

Win + R
shell:startup
… copied into place via advice of …

this great advice, thanks … being, perhaps, simpler than Task Schedular thoughts?!

No time to see what else explorer.exe File Explorer is capable of … that is for another day we’re thinking?!

Previous relevant Local Operating System Menu Intranet Feel Multiple Tutorial is shown below.

Local Operating System Menu Intranet Feel Multiple Tutorial

Our normal tack regarding the method attribute to use on an HTML form element when the recipient webpage is written in PHP is …

preferably use method=POST … because so much more data can be handled that way … but today we’re …
preferring to use method=GET … for several reasons …
1. we cannot see that the data will get too long for method=GET
2. we’re allowing dropdown (ie. select element) multiple selection mode and we found it easier to handle data wise for the recipient to use method=GET with a PHP recipient $_SERVER[‘QUERY_STRING’] able to help better parse a method=GET MAMP style URL like …
  http://localhost:8888/open_extravaganza.php?afteropen=+https%3A%2F%2Fgoogle.com&afteropen=+https%3A%2F%2Fwikipedia.org&afteropen=+https%3A%2F%2Fwww.rjmprogramming.com.au
  … as per …
  <?php
  $afteropens=[]; $thisone=1; if (isset($_GET['afteropen'])) { if (sizeof(explode('afteropen=', '?' . $_SERVER['QUERY_STRING'])) > 2) { for ($thisone=1; $thisone<sizeof(explode('afteropen=', '?' . $_SERVER['QUERY_STRING'])); $thisone++) { array_push($afteropens, str_replace('+',' ',urldecode(explode('#',explode('&',explode('afteropen=', $_SERVER['QUERY_STRING'])[$thisone])[0])[0]))); } } else { $afteropen=(trim(str_replace('+',' ',urldecode($_GET['afteropen']))) == '' ? '' : ' ' . trim(str_replace('+',' ',urldecode($_GET['afteropen'])))); $afteropens=[$afteropen]; } }
  ?>
  … whereas method=POST loses those $_SERVER[‘QUERY_STRING’] possibilities
3. there will be method=GET URLs anyway coming from the newly arranged RJM Programming origin form elements presented now if navigator.platform indicates your underlying operating system is either macOS or Windows (ie. it takes a punt on the form action localhost attribute defined pointing at a local web server (eg. MAMP) … where there is no harm done just trying)

And so, improving on yesterday’s Local Operating System Menu Intranet Feel Tutorial …

the Execute button now means something … ie. you click it ahead of a 10 second allowance before the web application clicks it … allowing for …
multiple operating system actions off that dropdown list can be attempted in any one foray
the RJM Programming incarnation of it may show more functionality possibilities than it used to … all within the limitation of non-mobile platforms only

Previous relevant Local Operating System Menu Intranet Feel Tutorial is shown below.

Local Operating System Menu Intranet Feel Tutorial

Because we are fortunate enough to have the great MAMP local Apache/PHP/MySql web server in our macOS MacBook Air programming life …

we have a great testing platform to go to before uploading any software to the public RJM Programming domain (quite often as a web application) there
it can be an “Intranet feeling” partner to our public RJM Programming domain

So, what do we mean by “Intranet feeling”? Well, have you ever been involved at a workplace that combined …

a public facing website on the Internet … but which had a …
members area for “office use only” that if you logged into would take you into a woooorrrrllllddd of procedures and advice and documentation and health and safety rules etcetera etcetera etcetera related to that company, the data of which is “not public” … well, that “not public” bit can sometimes be referred to as an Intranet

Intranet “feeling”

Now, when we presented YouTube API Caller Radio Play Playlist Windows Local System Tutorial we threw down the gauntlet, Luna would say, venturing …

… as your starting gambit, here, where the equivalent of macOS’s “open” is “explorer.exe” on Windows (ie. the File Explorer) … almost as cute!

The audacity^{, Nala}?!

How do we count the ways … Luna?!!!! See the compartmentalization and modularization at play (not the command) here, ~~Dumbo_{web master}~~bugalugs?!

Anyway, we’re off and running on a new project with these themes. The first draft concentrates on ..

macOS .. open … MAMP … but …
Windows … explorer.exe … MAMP

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

Posted in eLearning, Event-Driven Programming, Operating System, Tutorials | Tagged action, Apache, attribute, audio, background, base64, base64_decode, btoa, button, capture, clip, clipboard, commentary, copy, copy and paste, cursor, delimiter, desktop, Did you know, dmain, Document Root, download, dropdowm, email, encryption, event, explorer, explorer.exe, ffmpeg, file explorer, Finder, form, functionality, hashtag, hashtagging, internet, intranet, local web server, macOS, MAMP, media, method, multiple, navigator.platform, oncontextmenu, open, operating system, operator, option, parse, paste, pbcopy, pbpaste, PHP, ping, platform, port, programming, prompt, public domain, public website, recording, right click, say, screenshot, security, select, selection, share, sharing, shell_exec, sleep, SMS, submit, submit button, Text to Speech, timeout, tutorial, upload, url, user interaction, video, wait, web server, window, window.btoa, Windows | Leave a comment

Local Operating System Menu Clip Windows Clipboard Tutorial

Posted on December 18, 2025 by admin

Local Operating System Menu Clip Windows Clipboard Tutorial

Onto yesterday’s Local Operating System Menu Pbcopy macOS Clipboard Tutorial …

macOS	pbcopy # to clipboard	; is command separator	… in Windows there are equivalents as below …
Windows	clip # to clipboard	& is command separator

… thank goodness, and so Windows ideas can be incorporated into yesterday’s just macOS work.

Previous relevant Local Operating System Menu Pbcopy macOS Clipboard Tutorial is shown below.

Local Operating System Menu Pbcopy macOS Clipboard Tutorial

Specific to macOS, and further to the recent Text to Speech Hashtagging Tutorial, today we’re adding a new local operating system (accessed in an “Intranet feeling” way) involving the great …

pbcopy and pbpaste

For this functionality, we ask of the user …

What is your macOS command to pipe pbcopy from?

ls -clt ~/Documents ~/Desktop ~/Downloads

Clipboard paste and copy D folder listings

… new macOS dropdown option.

Previous relevant Text to Speech Hashtagging Tutorial is shown below.

Text to Speech Hashtagging Tutorial

Around here … it’s official …

we’re having a morph!

Please … please … no congratulations yet?! And thanks for the tomatoes … very ripe?!

Anyway, yesterday’s Local Operating System Menu Intranet Feel Commentary Tutorial has struck a chord in that for …

macOS

… users we think there is a different aspect to ideas revolving around …

speech … and …
text

… we want to pursue. We’ve already forewarned above, of exclusions, but for full functionality with these ideas there probably will be more to follow.

Around here there is no adage “let perfection be the enemy of the good” and so “on we go”, but, a precursor is to introduce …

our inhouse macOS “say” interfacing PHP … to …
more independent hashtagging smarts

… hashtagging (as we’ve been harping on about more and more recently) being …

able to support a lot of data up at any URL (eg. of a web browser address bar, and so can help interface a public domain “Internet” URL talking to a local (eg. MAMP Apache web server based) web server “Intranet”^feeling URL) …
can support dynamic scenarios with web application webpages (especially PHP ones) where the webpage can achieve things dynamically without navigating to another webpage

But aren’t we going to confront CORS restrictions here?

Well … shhhhhh … but a name^d HTML iframe child and a window.open …

… can be that “Fred and Ginger” pairing to make this “Internet and Intranet” interplay seamless … shhhhhhh!

Previous relevant Local Operating System Menu Intranet Feel Commentary Tutorial is shown below.

Local Operating System Menu Intranet Feel Commentary Tutorial

Further to yesterday’s Local Operating System Menu Intranet Feel Operator Tutorial there are a couple of macOS specific additional pieces of functionality we’d like to offer users, they being …

the macOS open command has the ability to try to open any windows it creates in the background via it’s …
-g
… switch
as we are on macOS why not offer a Text to Speech means of adding commentary as macOS open commands are issued via its …
say
… command

? And closing arguments against this will be accepted up until the end of Black Friday sales, whenever that is?!

We decided to pass these over as your usual get arguments on the address bar URL, being as we are always using PHP $_GET[] data, now, so far, in this project.

Previous relevant Local Operating System Menu Intranet Feel Operator Tutorial is shown below.

Local Operating System Menu Intranet Feel Operator Tutorial

Further to yesterday’s Local Operating System Menu Intranet Feel Options Tutorial we broach the issue …

What happens when a delimiter character is the same as an operator character in amongst data sent via HTML form from one webpage to the next webpage?

We’re talking about the + character which can be …

a space encryption character used a lot when PHP is the receiving webpage’s language
an operator in mathematics, for addition

If the latter is the meaning of a + plus character within that form data sent out, how can we know it is not just a space character encrypted?

Excellent question, that we grapple with in different ways around here, all the time!

Today, as far as this goes, take a look at the value attribute of a new macOS dropdown option we introduced today …

Do you recognize any new encryption pattern with this option’s value? Yes, it is the …

base64 encoded

… version of …

echo '564+98765' | bc

… as a macOS Terminal application command line way to add 564 + 98765 via the macOS bc command, we got wind of via …

<html> <body> <script type=text/javascript> var x=prompt('' + window.btoa(" echo '564+98765' | bc"), '' + window.btoa(" echo '564+98765' | bc")); </script> </body> </html>

Which begs the question …

If window.btoa is the “Fred” of the Javascript side of the work, what is the PHP receiving side’s “Ginger”?

Well, yes, would that be base64_decode pray tell?!

Did you know?

Have you noticed in amongst the macOS open command values lots of ones starting with the switch …

-b

? Well, The macOS open command, thanks, told us …

You can specify just the name of an application or the full path, i.e. /Applications/Preview.app. If you need to be specific, you can also specify an application’s bundle identifier with -b com.apple.Preview.

… found out, we’ve been finding, successfully, via …

in Finder right click the application of interest
click Show Package Contents
open the info.plist file in your favourite Text Editor
look for …

CFBundleIdentifier

… within, for example, AppleScript’s info.plist …
<key>CFBundleIdentifier</key> <string>com.apple.ScriptEditor2</string>
… to come up with, for example …
open -b com.apple.ScriptEditor2
… as a way to open macOS application AppleScript (or Script Editor)

Previous relevant Local Operating System Menu Intranet Feel Options Tutorial is shown below.

Local Operating System Menu Intranet Feel Options Tutorial

A static list of options in the functional dropdown, as with yesterday’s Local Operating System Menu Intranet Feel Windows Tutorial does not sound as much fun as …

dropdown (ie. select element) options that if you right click bring up a means by which …
1. existant option can be modified
2. a new option can be added
3. the option pointed at effectively nullified
4. an option to remember for next time on that web browser when the web application is re-opened
5. an option to forget the previous option’s work … it works! … we’ve already forgotten! … chortle, chortle
… and we decided also, now that the user has some control over functionality, then …
offer email and/or SMS sharing including or excluding any option tinkering as described above
offer more Windows explorer.exe options thanks to https://www.geoffchappell.com/studies/windows/shell/explorer/cmdline.htm
offer the chance off an RJM Programming incarnation’s top MAMP/macOS/Windows dropdown (ie. select element, now showing with size attribute 3) right click chances to adjust Apache (eg. MAMP) port setting assumptions

Previous relevant Local Operating System Menu Intranet Feel Windows Tutorial is shown below.

Local Operating System Menu Intranet Feel Windows Tutorial

Yesterday’s Local Operating System Menu Intranet Feel Multiple Tutorial‘s smarts regarding dropdown multiple selections gets passed through to today’s …

Windows MAMP PHP 7.4.16

… _{oh, oh}^{“They’re mentioning version numbers … that can’t be good”} … interfacing work.

And yes, it was a struggle, with this PHP version on MAMP disallowing …

file_put_contents … and, we would guess, file_get_contents …
exec or shell_exec or passthru or system
fopen writing to any *.bat

Win + R
shell:startup
… copied into place via advice of …

this great advice, thanks … being, perhaps, simpler than Task Schedular thoughts?!

No time to see what else explorer.exe File Explorer is capable of … that is for another day we’re thinking?!

Previous relevant Local Operating System Menu Intranet Feel Multiple Tutorial is shown below.

Local Operating System Menu Intranet Feel Multiple Tutorial

Our normal tack regarding the method attribute to use on an HTML form element when the recipient webpage is written in PHP is …

preferably use method=POST … because so much more data can be handled that way … but today we’re …
preferring to use method=GET … for several reasons …
1. we cannot see that the data will get too long for method=GET
2. we’re allowing dropdown (ie. select element) multiple selection mode and we found it easier to handle data wise for the recipient to use method=GET with a PHP recipient $_SERVER[‘QUERY_STRING’] able to help better parse a method=GET MAMP style URL like …
  http://localhost:8888/open_extravaganza.php?afteropen=+https%3A%2F%2Fgoogle.com&afteropen=+https%3A%2F%2Fwikipedia.org&afteropen=+https%3A%2F%2Fwww.rjmprogramming.com.au
  … as per …
  <?php
  $afteropens=[]; $thisone=1; if (isset($_GET['afteropen'])) { if (sizeof(explode('afteropen=', '?' . $_SERVER['QUERY_STRING'])) > 2) { for ($thisone=1; $thisone<sizeof(explode('afteropen=', '?' . $_SERVER['QUERY_STRING'])); $thisone++) { array_push($afteropens, str_replace('+',' ',urldecode(explode('#',explode('&',explode('afteropen=', $_SERVER['QUERY_STRING'])[$thisone])[0])[0]))); } } else { $afteropen=(trim(str_replace('+',' ',urldecode($_GET['afteropen']))) == '' ? '' : ' ' . trim(str_replace('+',' ',urldecode($_GET['afteropen'])))); $afteropens=[$afteropen]; } }
  ?>
  … whereas method=POST loses those $_SERVER[‘QUERY_STRING’] possibilities
3. there will be method=GET URLs anyway coming from the newly arranged RJM Programming origin form elements presented now if navigator.platform indicates your underlying operating system is either macOS or Windows (ie. it takes a punt on the form action localhost attribute defined pointing at a local web server (eg. MAMP) … where there is no harm done just trying)

And so, improving on yesterday’s Local Operating System Menu Intranet Feel Tutorial …

the Execute button now means something … ie. you click it ahead of a 10 second allowance before the web application clicks it … allowing for …
multiple operating system actions off that dropdown list can be attempted in any one foray
the RJM Programming incarnation of it may show more functionality possibilities than it used to … all within the limitation of non-mobile platforms only

Previous relevant Local Operating System Menu Intranet Feel Tutorial is shown below.

Local Operating System Menu Intranet Feel Tutorial

Because we are fortunate enough to have the great MAMP local Apache/PHP/MySql web server in our macOS MacBook Air programming life …

we have a great testing platform to go to before uploading any software to the public RJM Programming domain (quite often as a web application) there
it can be an “Intranet feeling” partner to our public RJM Programming domain

So, what do we mean by “Intranet feeling”? Well, have you ever been involved at a workplace that combined …

a public facing website on the Internet … but which had a …
members area for “office use only” that if you logged into would take you into a woooorrrrllllddd of procedures and advice and documentation and health and safety rules etcetera etcetera etcetera related to that company, the data of which is “not public” … well, that “not public” bit can sometimes be referred to as an Intranet

Intranet “feeling”

Now, when we presented YouTube API Caller Radio Play Playlist Windows Local System Tutorial we threw down the gauntlet, Luna would say, venturing …

… as your starting gambit, here, where the equivalent of macOS’s “open” is “explorer.exe” on Windows (ie. the File Explorer) … almost as cute!

The audacity^{, Nala}?!

How do we count the ways … Luna?!!!! See the compartmentalization and modularization at play (not the command) here, ~~Dumbo_{web master}~~bugalugs?!

Anyway, we’re off and running on a new project with these themes. The first draft concentrates on ..

macOS .. open … MAMP … but …
Windows … explorer.exe … MAMP

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

Posted in eLearning, Event-Driven Programming, Operating System, Tutorials | Tagged action, Apache, attribute, background, base64, base64_decode, btoa, button, clip, clipboard, commentary, copy, copy and paste, cursor, delimiter, desktop, Did you know, dmain, Document Root, download, dropdowm, email, encryption, event, explorer, explorer.exe, file explorer, Finder, form, functionality, hashtag, hashtagging, internet, intranet, local web server, macOS, MAMP, method, multiple, navigator.platform, oncontextmenu, open, operating system, operator, option, parse, paste, pbcopy, pbpaste, PHP, ping, platform, port, programming, prompt, public domain, public website, right click, say, security, select, selection, share, sharing, shell_exec, sleep, SMS, submit, submit button, Text to Speech, timeout, tutorial, upload, url, user interaction, wait, web server, window, window.btoa, Windows | Leave a comment

Local Operating System Menu Pbcopy macOS Clipboard Tutorial

Posted on December 17, 2025 by admin

Local Operating System Menu Pbcopy macOS Clipboard Tutorial

Specific to macOS, and further to the recent Text to Speech Hashtagging Tutorial, today we’re adding a new local operating system (accessed in an “Intranet feeling” way) involving the great …

pbcopy and pbpaste

For this functionality, we ask of the user …

What is your macOS command to pipe pbcopy from?

ls -clt ~/Documents ~/Desktop ~/Downloads

Clipboard paste and copy D folder listings

… new macOS dropdown option.

Previous relevant Text to Speech Hashtagging Tutorial is shown below.

Text to Speech Hashtagging Tutorial

Around here … it’s official …

we’re having a morph!

Please … please … no congratulations yet?! And thanks for the tomatoes … very ripe?!

Anyway, yesterday’s Local Operating System Menu Intranet Feel Commentary Tutorial has struck a chord in that for …

macOS

… users we think there is a different aspect to ideas revolving around …

speech … and …
text

… we want to pursue. We’ve already forewarned above, of exclusions, but for full functionality with these ideas there probably will be more to follow.

Around here there is no adage “let perfection be the enemy of the good” and so “on we go”, but, a precursor is to introduce …

our inhouse macOS “say” interfacing PHP … to …
more independent hashtagging smarts

… hashtagging (as we’ve been harping on about more and more recently) being …

able to support a lot of data up at any URL (eg. of a web browser address bar, and so can help interface a public domain “Internet” URL talking to a local (eg. MAMP Apache web server based) web server “Intranet”^feeling URL) …
can support dynamic scenarios with web application webpages (especially PHP ones) where the webpage can achieve things dynamically without navigating to another webpage

But aren’t we going to confront CORS restrictions here?

Well … shhhhhh … but a name^d HTML iframe child and a window.open …

… can be that “Fred and Ginger” pairing to make this “Internet and Intranet” interplay seamless … shhhhhhh!

Previous relevant Local Operating System Menu Intranet Feel Commentary Tutorial is shown below.

Local Operating System Menu Intranet Feel Commentary Tutorial

Further to yesterday’s Local Operating System Menu Intranet Feel Operator Tutorial there are a couple of macOS specific additional pieces of functionality we’d like to offer users, they being …

the macOS open command has the ability to try to open any windows it creates in the background via it’s …
-g
… switch
as we are on macOS why not offer a Text to Speech means of adding commentary as macOS open commands are issued via its …
say
… command

? And closing arguments against this will be accepted up until the end of Black Friday sales, whenever that is?!

We decided to pass these over as your usual get arguments on the address bar URL, being as we are always using PHP $_GET[] data, now, so far, in this project.

Previous relevant Local Operating System Menu Intranet Feel Operator Tutorial is shown below.

Local Operating System Menu Intranet Feel Operator Tutorial

Further to yesterday’s Local Operating System Menu Intranet Feel Options Tutorial we broach the issue …

What happens when a delimiter character is the same as an operator character in amongst data sent via HTML form from one webpage to the next webpage?

We’re talking about the + character which can be …

a space encryption character used a lot when PHP is the receiving webpage’s language
an operator in mathematics, for addition

If the latter is the meaning of a + plus character within that form data sent out, how can we know it is not just a space character encrypted?

Excellent question, that we grapple with in different ways around here, all the time!

Today, as far as this goes, take a look at the value attribute of a new macOS dropdown option we introduced today …

Do you recognize any new encryption pattern with this option’s value? Yes, it is the …

base64 encoded

… version of …

echo '564+98765' | bc

… as a macOS Terminal application command line way to add 564 + 98765 via the macOS bc command, we got wind of via …

<html> <body> <script type=text/javascript> var x=prompt('' + window.btoa(" echo '564+98765' | bc"), '' + window.btoa(" echo '564+98765' | bc")); </script> </body> </html>

Which begs the question …

If window.btoa is the “Fred” of the Javascript side of the work, what is the PHP receiving side’s “Ginger”?

Well, yes, would that be base64_decode pray tell?!

Did you know?

Have you noticed in amongst the macOS open command values lots of ones starting with the switch …

-b

? Well, The macOS open command, thanks, told us …

You can specify just the name of an application or the full path, i.e. /Applications/Preview.app. If you need to be specific, you can also specify an application’s bundle identifier with -b com.apple.Preview.

… found out, we’ve been finding, successfully, via …

in Finder right click the application of interest
click Show Package Contents
open the info.plist file in your favourite Text Editor
look for …

CFBundleIdentifier

… within, for example, AppleScript’s info.plist …
<key>CFBundleIdentifier</key> <string>com.apple.ScriptEditor2</string>
… to come up with, for example …
open -b com.apple.ScriptEditor2
… as a way to open macOS application AppleScript (or Script Editor)

Previous relevant Local Operating System Menu Intranet Feel Options Tutorial is shown below.

Local Operating System Menu Intranet Feel Options Tutorial

A static list of options in the functional dropdown, as with yesterday’s Local Operating System Menu Intranet Feel Windows Tutorial does not sound as much fun as …

dropdown (ie. select element) options that if you right click bring up a means by which …
1. existant option can be modified
2. a new option can be added
3. the option pointed at effectively nullified
4. an option to remember for next time on that web browser when the web application is re-opened
5. an option to forget the previous option’s work … it works! … we’ve already forgotten! … chortle, chortle
… and we decided also, now that the user has some control over functionality, then …
offer email and/or SMS sharing including or excluding any option tinkering as described above
offer more Windows explorer.exe options thanks to https://www.geoffchappell.com/studies/windows/shell/explorer/cmdline.htm
offer the chance off an RJM Programming incarnation’s top MAMP/macOS/Windows dropdown (ie. select element, now showing with size attribute 3) right click chances to adjust Apache (eg. MAMP) port setting assumptions

Previous relevant Local Operating System Menu Intranet Feel Windows Tutorial is shown below.

Local Operating System Menu Intranet Feel Windows Tutorial

Yesterday’s Local Operating System Menu Intranet Feel Multiple Tutorial‘s smarts regarding dropdown multiple selections gets passed through to today’s …

Windows MAMP PHP 7.4.16

… _{oh, oh}^{“They’re mentioning version numbers … that can’t be good”} … interfacing work.

And yes, it was a struggle, with this PHP version on MAMP disallowing …

file_put_contents … and, we would guess, file_get_contents …
exec or shell_exec or passthru or system
fopen writing to any *.bat

Win + R
shell:startup
… copied into place via advice of …

this great advice, thanks … being, perhaps, simpler than Task Schedular thoughts?!

No time to see what else explorer.exe File Explorer is capable of … that is for another day we’re thinking?!

Previous relevant Local Operating System Menu Intranet Feel Multiple Tutorial is shown below.

Local Operating System Menu Intranet Feel Multiple Tutorial

Our normal tack regarding the method attribute to use on an HTML form element when the recipient webpage is written in PHP is …

preferably use method=POST … because so much more data can be handled that way … but today we’re …
preferring to use method=GET … for several reasons …
1. we cannot see that the data will get too long for method=GET
2. we’re allowing dropdown (ie. select element) multiple selection mode and we found it easier to handle data wise for the recipient to use method=GET with a PHP recipient $_SERVER[‘QUERY_STRING’] able to help better parse a method=GET MAMP style URL like …
  http://localhost:8888/open_extravaganza.php?afteropen=+https%3A%2F%2Fgoogle.com&afteropen=+https%3A%2F%2Fwikipedia.org&afteropen=+https%3A%2F%2Fwww.rjmprogramming.com.au
  … as per …
  <?php
  $afteropens=[]; $thisone=1; if (isset($_GET['afteropen'])) { if (sizeof(explode('afteropen=', '?' . $_SERVER['QUERY_STRING'])) > 2) { for ($thisone=1; $thisone<sizeof(explode('afteropen=', '?' . $_SERVER['QUERY_STRING'])); $thisone++) { array_push($afteropens, str_replace('+',' ',urldecode(explode('#',explode('&',explode('afteropen=', $_SERVER['QUERY_STRING'])[$thisone])[0])[0]))); } } else { $afteropen=(trim(str_replace('+',' ',urldecode($_GET['afteropen']))) == '' ? '' : ' ' . trim(str_replace('+',' ',urldecode($_GET['afteropen'])))); $afteropens=[$afteropen]; } }
  ?>
  … whereas method=POST loses those $_SERVER[‘QUERY_STRING’] possibilities
3. there will be method=GET URLs anyway coming from the newly arranged RJM Programming origin form elements presented now if navigator.platform indicates your underlying operating system is either macOS or Windows (ie. it takes a punt on the form action localhost attribute defined pointing at a local web server (eg. MAMP) … where there is no harm done just trying)

And so, improving on yesterday’s Local Operating System Menu Intranet Feel Tutorial …

the Execute button now means something … ie. you click it ahead of a 10 second allowance before the web application clicks it … allowing for …
multiple operating system actions off that dropdown list can be attempted in any one foray
the RJM Programming incarnation of it may show more functionality possibilities than it used to … all within the limitation of non-mobile platforms only

Previous relevant Local Operating System Menu Intranet Feel Tutorial is shown below.

Local Operating System Menu Intranet Feel Tutorial

Because we are fortunate enough to have the great MAMP local Apache/PHP/MySql web server in our macOS MacBook Air programming life …

we have a great testing platform to go to before uploading any software to the public RJM Programming domain (quite often as a web application) there
it can be an “Intranet feeling” partner to our public RJM Programming domain

So, what do we mean by “Intranet feeling”? Well, have you ever been involved at a workplace that combined …

a public facing website on the Internet … but which had a …
members area for “office use only” that if you logged into would take you into a woooorrrrllllddd of procedures and advice and documentation and health and safety rules etcetera etcetera etcetera related to that company, the data of which is “not public” … well, that “not public” bit can sometimes be referred to as an Intranet

Intranet “feeling”

Now, when we presented YouTube API Caller Radio Play Playlist Windows Local System Tutorial we threw down the gauntlet, Luna would say, venturing …

… as your starting gambit, here, where the equivalent of macOS’s “open” is “explorer.exe” on Windows (ie. the File Explorer) … almost as cute!

The audacity^{, Nala}?!

How do we count the ways … Luna?!!!! See the compartmentalization and modularization at play (not the command) here, ~~Dumbo_{web master}~~bugalugs?!

Anyway, we’re off and running on a new project with these themes. The first draft concentrates on ..

macOS .. open … MAMP … but …
Windows … explorer.exe … MAMP

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

Posted in eLearning, Event-Driven Programming, Operating System, Tutorials | Tagged action, Apache, attribute, background, base64, base64_decode, btoa, button, clipboard, commentary, copy, copy and paste, cursor, delimiter, desktop, Did you know, dmain, Document Root, download, dropdowm, email, encryption, event, explorer, explorer.exe, file explorer, Finder, form, functionality, hashtag, hashtagging, internet, intranet, local web server, macOS, MAMP, method, multiple, navigator.platform, oncontextmenu, open, operating system, operator, option, parse, paste, pbcopy, pbpaste, PHP, ping, platform, port, programming, prompt, public domain, public website, right click, say, security, select, selection, share, sharing, shell_exec, sleep, SMS, submit, submit button, Text to Speech, timeout, tutorial, upload, url, user interaction, wait, web server, window, window.btoa, Windows | Leave a comment

Location Hash Versus Server Primer Tutorial

Posted on December 16, 2025 by admin

Location Hash Versus Server Primer Tutorial

In Window LocalStorage Client Versus Server Primer Tutorial we discuss ways to deal with large chunks of data passed on to a recipient webpage and not necessary needing …

the serverside …
1. language … eg. PHP or ASP.Net
2. form method=POST … able to handle much more data then method=GET … but only the serverside languages can be the recipient of method=POST
… in favour of …
clientside window.localStorage or window.sessionStorage … or HTTP Cookies … and today we want to talk of another clientside alternative …
clientside location.hash hashtag data … can be appended to an HTML form action attribute that is method=GET

… to be offering an alternative that dovetails well with email or SMS “a” link “mailto:” or “sms:” sharing and collaboration possibilities as well as any “internal use only” you may use with …

same domain URL scenarios … and ..
Internet to Intranet “feeling” scenarios …

… such as is used with our recent open_extravaganza.php personalized macOS “open” command logics we talked about with Text to Speech Hashtagging Tutorial recently.

There are still data length limits even with hashtagging but much more can be achieved (rather than leaving HTML form navigation matters to the argument ? and & means of method=GET thinking) not involving any serverside interventions, which some programmers will not have access to … though we’re highly recommending it!

Previous relevant Window LocalStorage Client Versus Server Primer Tutorial is shown below.

Window LocalStorage Client Versus Server Primer Tutorial

Even though we rave on a lot about serverside PHP and its $_POST method=POST (versus HTML/Javascript recipient via ? and & argument $_GET method=GET scenario) data length advantages as the recipient of an HTML form method=POST set of data that could be sizeable, we’ve just realized that there is a client Javascript and window.localStorage methodology that may help alleviate the need to involve PHP (and any other serverside intervention) on occasions.

Hint: Yes, we’ve raved on about this too?! Does the blog posting title give it away? Okay, yes, it should read “localStorage”, but thought we’d gone past such juvenile finickiness since the Whac-A-Mole controversy of 1st December 2019 (or even The Great Tea Trolley Disaster of ’67, we daresay).

It can even use a “self-destruct” approach to the use of this “localStorage” on having used it because …

the web application knows who is using it (localStorage) … and on having accessed and read it …
the web application knows it (localStorage) is of no use to any other user (in this web application’s case, at least)

… which is very pleasing for a Land Surveyor who likes to leave cow paddocks as they’ve seen them so to speak. Except it’s like having a ten tonne truck worth of data access in amongst the cow pats when having access to “localStorage” (or PHP), rather than a little piddle of calf wee (wee Metcalfes know a thing or two about these things!) data access of ? and & HTML/Javascript URL arguments (or even if we were to use HTTP Cookies).

It’s not as if we all have access to serverside language usage, though we do, because we really like PHP and MAMP and Apache/PHP/MySql web servers (and have arranged our development environment accordingly), but what if you are starting out in web development, and still want to allow for sizeable chunks of data with your web applications? Huh? Huh?! See the possibilities? Try our proof of concept wls_vs_php.html Capital City Find Matching Country Report live run, and highlight a whole swathe of (multiple mode) dropdown option Capital Cities holding down the shift key before pressing the yellow “Report” button. If the URL ends up as …

https://rjmprogramming.com.au/HTMLCSS/wls_vs_php.html?capitals=localStorage&countries=localStorage

… that’s because the web application’s …

… HTML form onsubmit event logic …

discovered no PHP web application existant (via Client Pre-emptive Iframe techniques) … and …

discovered (in a sanity check feeling way) that to go down the proposed HTML form method=GET approach was risking a …



HTTP 414 "Request URI too long"

… web browser error … and that …

localStorage was a known web browser piece of functionality

… and so as per our localStorage logic we …

back out of the default HTML form method=GET navigation setup of the web application in favour of …

storing that data into localStorage

substituting into the URL ? and & arguments the hardcoding “localStorage” (and in so doing, getting back under the HTTP 414 “Request URI too long” limitation, piecing together (what amounts to) …
location.href=document.URL.split(‘#’)[0].split(‘?’)[0] + ‘?capitals=localStorage&countries=localStorage’;)
… that on a recall to this same web application a …

document.body onload event piece of Javascript logic checks the localStorage for its incoming Capital City Country Report data, as per …
var phpexists=false; var getcapitals=location.search.split('capitals=')[1] ? decodeURIComponent(location.search.split('capitals=')[1].split('&')[0]).replace(/\+/g,' ') : ''; var getcountries=location.search.split('countries=')[1] ? decodeURIComponent(location.search.split('countries=')[1].split('&')[0]).replace(/\+/g,' ') : ''; function checkforreport() { var divcont=''; var dcaps, dctys, idis; if (getcapitals == 'localStorage') { if (window.localStorage) { getcapitals=decodeURIComponent(localStorage.getItem('wls_vs_php_capitals')).replace(/\+/g,' '); localStorage.removeItem('wls_vs_php_capitals'); } else { getcapitals=''; } } if (getcountries == 'localStorage') { if (window.localStorage) { getcountries=decodeURIComponent(localStorage.getItem('wls_vs_php_countries')).replace(/\+/g,' '); if (getcapitals.replace('localStorage','') != '' && getcountries.replace('localStorage','') != '') { document.getElementById('myh1').innerHTML+=' <font size=1>... yes, it was needed</font>'; } localStorage.removeItem('wls_vs_php_countries'); } else { getcountries=''; } } if (getcapitals != '' && getcountries != '') { divcont='<table border=5 style="width:95%;vertical-align:top;background-color:white;"><tr style=background-color:#f0f0f0;"><th>Capital</th><th>Country</th></tr></table>'; dcaps=getcapitals.split('|'); dctys=getcountries.split('|'); for (idis=0; idis<dcaps.length; idis++) { divcont=divcont.replace('</table>', '<tr><td>' + dcaps[idis] + '</td><td>' + dctys[idis] + '</td></tr></table>'); } document.getElementById('dreport').innerHTML=divcont; } }
… the localStorage.removeItem() representing that “self-destruct” nuance we were talking about before

We may well use this methodology in future projects, and hope it has been of some little interest to you as well?!

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

Posted in eLearning, Tutorials | Tagged action, arguments, clientside, collaboration, data, data length, destination, document.URL, DOM, email, form, get, hashtag, hashtagging, HTML, internet, intranet, Javascript, location.hash, mailto, method, navigation, post, programming, receiving, recipient, share, sharing, SMS, tutorial, url, webpage | Leave a comment

Dictionary Plonking Primer Tutorial

Posted on December 15, 2025 by admin

Dictionary Plonking Primer Tutorial

One of the things we miss from the 1970’s to 1980’s (and maybe 1990’s), primarily in Windows, for us, was the opportunity to install, via what we refer to fondly, as …

plonking

… which, to us, refers to the act of making a software install happen, barring file permission issues that you may have to attend to, just by …

copying files

No more … no less … no installer programs required. It was especially the case compiling Windows source code (eg. Fortran or C or C++) into *.exe executables via a command line compiler statement, and the software would either be ready to roll there and then, or perhaps need …

at most, one file permission temporary tweak
one file copying operation
at most, one file permission temporary re-tweak (back to original setting)

But we stumbled upon one the other day regarding our Start Word for Wordle web application talked about at Apple Script Execution of Start Word Suggestions for Wordle Tutorial, where we noticed it not displaying anything, and looking into the matter discovered that our newest AlmaLinux web server incarnation had no …

/usr/share/dict

… dictionary installed. So we brought over our English one (ie. copied it’s files) from our local macOS (same /usr/share/dict) place to the RJM Programming place (albeit via a FileZilla upload … we’re counting as “plonking”).

Previous relevant Apple Script Execution of Start Word Suggestions for Wordle Tutorial is shown below.

Apple Script Execution of Start Word Suggestions for Wordle Tutorial

It’s 2022 as we write this blog post and these days your macOS operating systems no longer present you with the chance to create desktop shortcuts that run a program with user defined arguments. But there is still Apple Script as a possible methodology we can use, via the Apple Script …

tell application "Terminal" activate do script "cd ~/Downloads" in window 1 do script "open 'HTTP://www.rjmprogramming.com.au/PHP/start_word_for_wordle_helper.php?others=sort%20%20unique%20common%20&sugnum=7'" in window 1 end tell

… we got great help, thanks, in writing, that …

starts Applications -> Utilities Terminal application … and then it does not matter, especially, but we …
change directory to the user’s Downloads folder … and then …
issue the command line command …
open 'HTTP://www.rjmprogramming.com.au/PHP/start_word_for_wordle_helper.php?others=sort%20%20unique%20common%20&sugnum=7'
… to open the same web application as for yesterday’s Start Word Suggestions for Wordle Intersessional Tutorial to tailor a set of “Start Word for Wordle” words

We saved the Apple Script above to our ~/Desktop desktop ready to execute and be in the Apple Script environment, as you run the Apple Script that opens the web application. We hope this interests some macOS users, now or into the future.

Previous relevant Start Word Suggestions for Wordle Intersessional Tutorial is shown below.

Start Word Suggestions for Wordle Sort Tutorial

Start Word Suggestions for Wordle Intersessional Tutorial

Yesterday’s English Word Guessing Game Intranet Tutorial‘s use of window.localStorage methodologies got us rethinking the “Start Word for Wordle” ideas in the recent Start Word Suggestions for Wordle Sort Tutorial‘s web application.

Those, again, Javascript prompt window driven user interactions, are a tad annoying to handle, but if they could be “standing order”ised then that might help. Here we need to store the setting in the web browser, hence the use of HTTP Cookies or window.localStorage (or window.sessionStorage).

Along the way, we wanted to offer another option, “common”, to be a user definable setting saying that words suggested would have to be “ridgy didge” in The Free Dictionary, thanks, lexicon.

Getting this going, we realized this might take longer, and when the word “longer” comes into play, we (tend to) think (as you would) …

document.body.style.cursor='progress';

… to signal to the user that processing may take some time. And for the first time we can remember, we were interested in floating to the right of that “spinning ball” progress cursor some reason for the wait, that being a (most likely rearranged) version of the Javascript prompt window entry the user made.

At the Javascript function onl() document.body “onload” event logic, changes made augment the new “just before </body>” <div id=cwords></div> initially static HTML element …

<?php echo ”
var pointerX = -1; var pointerY = -1; function pointerCheck() { if (pointerX != -1) { document.getElementById('cwords').style.position='absolute'; document.getElementById('cwords').style.top='' + eval(0 + eval('' + pointerY)) + 'px'; document.getElementById('cwords').style.left='' + eval(30 + eval('' + pointerX)) + 'px'; document.getElementById('cwords').style.zIndex='99'; document.getElementById('cwords').style.backgroundColor='orange'; document.getElementById('cwords').innerHTML=document.getElementById('lsbits').title; } } function onl() { if (('' + localStorage.getItem('start_word_for_wordle_helper')).replace(/^null$/g,'') != '') { document.getElementById('lsbits').title=decodeURIComponent(localStorage.getItem('start_word_for_wordle_helper')).replace('&sugnum=',' ').replace(encodeURIComponent('&sugnum='),' '); if (document.URL.indexOf('others=') == -1) { document.body.style.cursor='progress'; document.onmousemove = function(event) { // thanks to https://www.codegrepper.com/code-examples/javascript/get+cursor+position+javascript if (event.clientX || event.clientY) { pointerX = event.clientX; pointerY = event.clientY; } else { pointerX = event.pageX; pointerY = event.pageY; } }; setInterval(pointerCheck, 1000); location.href=(document.URL + '&others=' + (localStorage.getItem('start_word_for_wordle_helper'))).replace('.php&','.php?').replace(encodeURIComponent('&sugnum='),'&sugnum='); } } if (window.self !== window.top) { document.body.innerHTML = ('' + document.body.innerHTML).replace(/h1/g, 'h2'); } makesortable(); }
“; ?>

… help make this happen.

All this can give the changed start_word_for_wordle_helper.php live run an intersessional personalization feel to it.

Previous relevant Start Word Suggestions for Wordle Iframe Tutorial is shown below.

Start Word Suggestions for Wordle Iframe Tutorial

Yesterday’s Start Word Suggestions for Wordle Styling and Scripting Tutorial‘s presentation used a hashtag navigation link, “or below“, to take the user to an HTML iframe hosted execution of our current web application of interest. Sometimes in such a scenario, you might be dealing with a vastly reduced width and/or height to work with, and find your presentation to this iframe appears a bit too wide or too high. And so, today, we outline an idea or two about how to handle that.

decide on a strategy for “iframe” modus operandi CSS styling improvement or HTML design improvement or Javascript DOM dynamic styling improvement … we’ve decided, today …
for “iframe” modus operandi we want to reduce width by turning the “h1” element into an “h2” element … which amounts to an HTML design improvement implemented via a Javascript DOM action conduit, as per …
decide on an intervention point for that Javascript DOM action conduit … you guessed it … document.body onload event as the webpage loads …
<?php
echo "<html>" . $hsc . "<body onload=onl();><h1><span>Start five letter word for <a target=_blank href='//www.powerlanguage.co.uk/wordle/'>Wordle</a> ... </span><input onclick=mixitup(); title='Allow for Unique Letters, Weirdness Sorting' type=button style=display:inline-block; value='via '></input></span><form id=myform style=display:inline-block; action=./start_word_for_wordle_helper.php method=POST><input id=mysub type=submit value=Submit style=display:none;></input><select style=display:inline-block; id=sugnum name=sugnum onchange=document.getElementById('mysub').click();><option id=defopt value=-" . $sugnum . ">" . $sugnum . "</option><option value=1>1</option><option value=2>2</option><option value=3>3</option><option value=4>4</option><option value=5>5</option><option value=6>6</option><option value=7>7</option><option value=8>8</option><option value=9>9</option><option value=10>10</option><option value=20>20</option><option value=25>25</option><option value=50>50</option><option value=100>100</option></select><span> suggestions ...</span></h1><h3>RJM Programming ... February, 2022</h3><h4>Suggestions below (bigger associated number, the weirder is the suggestion) ...</h4><br>" . $tablebit . "</body></html>";
?>
… then …
write the new Javascript document.body onload event logic …
<?php echo ”
function onl() { if (window.self !== window.top) { document.body.innerHTML = ('' + document.body.innerHTML).replace(/h1/g, 'h2'); } }
“; ?>
… a total “document.body.innerHTML” (content) solution working here (but is not always a good solution) to change the “type” of an element

… representing a “hosting mode of use” style variation with our changed start_word_for_wordle_helper.php live run link, or below, web application!

Previous relevant Start Word Suggestions for Wordle Styling and Scripting Tutorial is shown below.

Start Word Suggestions for Wordle Styling and Scripting Tutorial

Yesterday’s Start Word Suggestions for Wordle Primer Tutorial proof of concept “Start Five Letter Word for Wordle Suggester” web application managed to create a workable webpage that did not need a “head” element. What are you missing with no “head” element? Primarily …

scripting (usually via Javascript)
styling (via CSS)

… and, perhaps a webpage title element, and, perhaps “meta” elements like “meta viewport” elements that help with mobile device display (improved visibility, for us).

Within the PHP code we introduced some of all these improvements via …

<?php
$hsc="<head> <title>Start five letter word for Wordle - RJM Programming - February, 2022</title> <meta id='myviewport' name='viewport' content='width=device-width, initial-scale=1, minimum-scale=0.1, maximum-scale=8, user-scalable=yes' > <style> td { text-align: center; } td:nth-child(2n+1) { background-color: #f3f7fa; } th:nth-child(2n+1) { background-color: #f3f7fa; } body { background-color: #f7f7f7; } </style> <script type='text/javascript'> var wois=null; function mixitup() { var others=prompt('Space separate the word(s) \"sort\" to sort for Weirdness and/or \"unique\" for five letter words with no repeated letters. Optionally precede by that number of five letter word suggestions to create for use with Wordle, followed by a space character.', ''); var clickthis=''; if (others == null) { others=''; } others=others.replace(String.fromCharCode(34),'').replace(String.fromCharCode(34),'').replace(String.fromCharCode(34),'').replace(String.fromCharCode(34),'').replace(String.fromCharCode(34),'').replace(String.fromCharCode(34),'').replace(String.fromCharCode(34),'').replace(String.fromCharCode(34),''); others=others.toLowerCase().replace('sort',' sort').replace('uniqu',' uniqu'); if (others.trim() != '') { var aothers=others.trim().split(' '); if (aothers[0].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,'') == '') { document.getElementById('defopt').value='-' + aothers[0]; document.getElementById('defopt').innerHTML=aothers[0]; document.getElementById('sugnum').value='-' + aothers[0]; others=others.replace(aothers[0],'').trim(); clickthis='mysub'; } } if (others.trim() != '') { var sv=document.getElementById('sugnum').value; document.getElementById('myform').innerHTML+='<input type=hidden name=others value=\"' + others + '\"></input>'; document.getElementById('sugnum').value=sv; } if (clickthis != '') { document.getElementById(clickthis).click(); } } </script> </head>";
?>

It allows us to offer “sort” (via word weirdness) and “uniquify” (to enforce unique letter sets per five letter word) additional functionality. We hope you try the changed start_word_for_wordle_helper.php live run link, or below, to try out these improvements.

Previous relevant Start Word Suggestions for Wordle Primer Tutorial is shown below.

Start Word Suggestions for Wordle Primer Tutorial

A new word game is an interesting phenomenon. Are you a regular “Wordle” player? We tried it the other day, and see why it’s addictive. But it seems to us, a lot relies on that first five letter word guess you make.

And so we decided to try to help out, at least in English, by accessing the macOS and Linux dictionary resources, and add in a “weirdness score”, the scoring for which we adopt a “Scrabble stance”. Interested? Try start_word_for_wordle_helper.php‘s live run, or below …

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

Posted in eLearning, Games, Installers, Operating System, Tutorials | Tagged configuration, copy, copying, dictionary, English, file permission, game, install, installation, permission, plonk, plonking, software, tutorial, upload, wordle, words | 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
December 2025

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 31

« Nov
Meta
Tags
Ajax animation background button canvas command line CSS Did you know DOM dropdown email emoji event form game games Google Google chart hashtag HTML IFRAME image iOS 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

Walking Trip …

Dictionary Plonking Primer 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