Walking Trip …

Walking Trip

Walking Trip

Offenbach's Suite ... Warts 'n All

Offenbach's Suite ... Warts 'n All

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

Posted in Photography, Trips | Tagged , , | 34 Comments

ImageMagick Batch Image Conversion Primer Tutorial

ImageMagick Batch Image Conversion Primer Tutorial

ImageMagick Batch Image Conversion Primer Tutorial

You can read Gimp Batch Image Manipulation Primer Tutorial back in the past to read about a “what used to be” command line image manipulation “batch processing” partner to the excellent GUI Gimp image editor product. Why is “batch” image editing interesting? Well, just take the case of …

  • iOS (iPhone or iPad) image set in Photos app …
  • tap Share icon …
  • tap Select icon …
  • tap the relevant images to share …
  • tap Mail icon …
  • fill in To emailee and Subject fields …
  • tap Send …
  • then you are presented with the choices …
    1. Small
    2. Medium
    3. Actual Size

And then you find out whether the Mail data size limits have been exceeded or not, and the other matter of interest is whether other apps using these images at the emailee’s end can handle the respective image sizes. We took an interest in the reinstalling of the great ImageMagick product’s command line applications …

  • convert
  • mogrify

… that latter application capable of command line “batch style” conversions between image formats (and qualities, in the case of output JPEG) … for example …


mogrify -quality 60 -format jpg backyardbirdcount/*.PNG

… as a way for us picking “Medium” above related to Citizen Science Primer Tutorial‘s source iPhone via iOS (iPhone) Home-and-Right-Top-buttons simultaneously (macOS is Command-Control-Shift-3) screenshotting images via (iOS) Photos app images we used to attempt to create an animated GIF via our inhouse Animated GIF Creator PHP web application, being too much to handle as those “Medium” PNGs, but okay, after ImageMagick “mogrify” batch conversions (via above command). And so we have three scenarios to see here (via macOS Terminal application) …

“Medium” PNG sizes …
-rw-rw-r–@ 1 user admin 949079 23 Oct 14:21 backyardbirdcount/IMG_1544.PNG
-rw-rw-r–@ 1 user admin 587441 23 Oct 14:21 backyardbirdcount/IMG_1545.PNG
-rw-rw-r–@ 1 user admin 593868 23 Oct 14:21 backyardbirdcount/IMG_1546.PNG
-rw-rw-r–@ 1 user admin 248811 23 Oct 14:21 backyardbirdcount/IMG_1547.PNG
-rw-rw-r–@ 1 user admin 264369 23 Oct 14:21 backyardbirdcount/IMG_1548.PNG
-rw-rw-r–@ 1 user admin 345073 23 Oct 14:21 backyardbirdcount/IMG_1549.PNG
-rw-rw-r–@ 1 user admin 638168 23 Oct 14:21 backyardbirdcount/IMG_1550.PNG
-rw-rw-r–@ 1 user admin 697660 23 Oct 14:21 backyardbirdcount/IMG_1551.PNG
-rw-rw-r–@ 1 user admin 1132884 23 Oct 14:21 backyardbirdcount/IMG_1552.PNG
-rw-rw-r–@ 1 user admin 101361 23 Oct 14:21 backyardbirdcount/IMG_1553.PNG
-rw-rw-r–@ 1 user admin 900161 23 Oct 14:21 backyardbirdcount/IMG_1554.PNG
-rw-rw-r–@ 1 user admin 534093 23 Oct 14:21 backyardbirdcount/IMG_1555.PNG
-rw-rw-r–@ 1 user admin 706118 23 Oct 14:21 backyardbirdcount/IMG_1556.PNG
-rw-rw-r–@ 1 user admin 262429 23 Oct 14:21 backyardbirdcount/IMG_1557.PNG
-rw-rw-r–@ 1 user admin 142314 23 Oct 14:21 backyardbirdcount/IMG_1558.PNG
-rw-rw-r–@ 1 user admin 142314 23 Oct 14:21 backyardbirdcount/IMG_1559.PNG
-rw-rw-r–@ 1 user admin 97603 23 Oct 14:21 backyardbirdcount/IMG_1560.PNG
-rw-rw-r–@ 1 user admin 116648 23 Oct 14:21 backyardbirdcount/IMG_1561.PNG
-rw-rw-r–@ 1 user admin 113955 23 Oct 14:21 backyardbirdcount/IMG_1562.PNG
-rw-rw-r–@ 1 user admin 409038 23 Oct 14:21 backyardbirdcount/IMG_1563.PNG
-rw-rw-r–@ 1 user admin 116669 23 Oct 14:21 backyardbirdcount/IMG_1564.PNG
-rw-rw-r–@ 1 user admin 125601 23 Oct 14:21 backyardbirdcount/IMG_1565.PNG
-rw-rw-r–@ 1 user admin 125152 23 Oct 14:21 backyardbirdcount/IMG_1566.PNG
-rw-rw-r–@ 1 user admin 139855 23 Oct 14:21 backyardbirdcount/IMG_1567.PNG
-rw-rw-r–@ 1 user admin 148579 23 Oct 14:21 backyardbirdcount/IMG_1568.PNG
-rw-rw-r–@ 1 user admin 137468 23 Oct 14:21 backyardbirdcount/IMG_1569.PNG
-rw-rw-r–@ 1 user admin 779736 23 Oct 14:21 backyardbirdcount/IMG_1570.PNG
-rw-rw-r–@ 1 user admin 769960 23 Oct 14:21 backyardbirdcount/IMG_1571.PNG
ImageMagick mogrify “Medium” PNG to JPEG 60% quality …
-rw-r–r– 1 user admin 25880 23 Oct 15:42 backyardbirdcount/IMG_1544.jpg
-rw-r–r– 1 user admin 28823 23 Oct 15:42 backyardbirdcount/IMG_1545.jpg
-rw-r–r– 1 user admin 16981 23 Oct 15:42 backyardbirdcount/IMG_1546.jpg
-rw-r–r– 1 user admin 58726 23 Oct 15:42 backyardbirdcount/IMG_1547.jpg
-rw-r–r– 1 user admin 48078 23 Oct 15:42 backyardbirdcount/IMG_1548.jpg
-rw-r–r– 1 user admin 54603 23 Oct 15:42 backyardbirdcount/IMG_1549.jpg
-rw-r–r– 1 user admin 25001 23 Oct 15:42 backyardbirdcount/IMG_1550.jpg
-rw-r–r– 1 user admin 16881 23 Oct 15:42 backyardbirdcount/IMG_1551.jpg
-rw-r–r– 1 user admin 50545 23 Oct 15:42 backyardbirdcount/IMG_1552.jpg
-rw-r–r– 1 user admin 17170 23 Oct 15:42 backyardbirdcount/IMG_1553.jpg
-rw-r–r– 1 user admin 24021 23 Oct 15:42 backyardbirdcount/IMG_1554.jpg
-rw-r–r– 1 user admin 30952 23 Oct 15:42 backyardbirdcount/IMG_1555.jpg
-rw-r–r– 1 user admin 18575 23 Oct 15:42 backyardbirdcount/IMG_1556.jpg
-rw-r–r– 1 user admin 63195 23 Oct 15:42 backyardbirdcount/IMG_1557.jpg
-rw-r–r– 1 user admin 44092 23 Oct 15:42 backyardbirdcount/IMG_1558.jpg
-rw-r–r– 1 user admin 44092 23 Oct 15:42 backyardbirdcount/IMG_1559.jpg
-rw-r–r– 1 user admin 25304 23 Oct 15:42 backyardbirdcount/IMG_1560.jpg
-rw-r–r– 1 user admin 31509 23 Oct 15:42 backyardbirdcount/IMG_1561.jpg
-rw-r–r– 1 user admin 31354 23 Oct 15:42 backyardbirdcount/IMG_1562.jpg
-rw-r–r– 1 user admin 27136 23 Oct 15:42 backyardbirdcount/IMG_1563.jpg
-rw-r–r– 1 user admin 31401 23 Oct 15:42 backyardbirdcount/IMG_1564.jpg
-rw-r–r– 1 user admin 36245 23 Oct 15:42 backyardbirdcount/IMG_1565.jpg
-rw-r–r– 1 user admin 36133 23 Oct 15:42 backyardbirdcount/IMG_1566.jpg
-rw-r–r– 1 user admin 40717 23 Oct 15:42 backyardbirdcount/IMG_1567.jpg
-rw-r–r– 1 user admin 40461 23 Oct 15:42 backyardbirdcount/IMG_1568.jpg
-rw-r–r– 1 user admin 39587 23 Oct 15:42 backyardbirdcount/IMG_1569.jpg
-rw-r–r– 1 user admin 21890 23 Oct 15:42 backyardbirdcount/IMG_1570.jpg
-rw-r–r– 1 user admin 16944 23 Oct 15:42 backyardbirdcount/IMG_1571.jpg
“Small” PNG sizes …
-rw-rw-r–@ 1 user admin 261455 23 Oct 14:46 IMG_1544.PNG
-rw-rw-r–@ 1 user admin 191175 23 Oct 14:46 IMG_1545.PNG
-rw-rw-r–@ 1 user admin 165294 23 Oct 14:46 IMG_1546.PNG
-rw-rw-r–@ 1 user admin 248811 23 Oct 14:46 IMG_1547.PNG
-rw-rw-r–@ 1 user admin 264369 23 Oct 14:46 IMG_1548.PNG
-rw-rw-r–@ 1 user admin 345073 23 Oct 14:46 IMG_1549.PNG
-rw-rw-r–@ 1 user admin 188451 23 Oct 14:46 IMG_1550.PNG
-rw-rw-r–@ 1 user admin 197718 23 Oct 14:46 IMG_1551.PNG
-rw-rw-r–@ 1 user admin 320042 23 Oct 14:46 IMG_1552.PNG
-rw-rw-r–@ 1 user admin 101361 23 Oct 14:46 IMG_1553.PNG
-rw-rw-r–@ 1 user admin 246993 23 Oct 14:46 IMG_1554.PNG
-rw-rw-r–@ 1 user admin 179694 23 Oct 14:46 IMG_1555.PNG
-rw-rw-r–@ 1 user admin 201494 23 Oct 14:46 IMG_1556.PNG
-rw-rw-r–@ 1 user admin 262429 23 Oct 14:46 IMG_1557.PNG
-rw-rw-r–@ 1 user admin 142314 23 Oct 14:46 IMG_1558.PNG
-rw-rw-r–@ 1 user admin 142314 23 Oct 14:46 IMG_1559.PNG
-rw-rw-r–@ 1 user admin 97603 23 Oct 14:46 IMG_1560.PNG
-rw-rw-r–@ 1 user admin 116648 23 Oct 14:46 IMG_1561.PNG
-rw-rw-r–@ 1 user admin 113955 23 Oct 14:46 IMG_1562.PNG
-rw-rw-r–@ 1 user admin 155992 23 Oct 14:46 IMG_1563.PNG
-rw-rw-r–@ 1 user admin 116669 23 Oct 14:46 IMG_1564.PNG
-rw-rw-r–@ 1 user admin 125601 23 Oct 14:46 IMG_1565.PNG
-rw-rw-r–@ 1 user admin 125152 23 Oct 14:46 IMG_1566.PNG
-rw-rw-r–@ 1 user admin 139855 23 Oct 14:46 IMG_1567.PNG
-rw-rw-r–@ 1 user admin 148579 23 Oct 14:46 IMG_1568.PNG
-rw-rw-r–@ 1 user admin 137468 23 Oct 14:46 IMG_1569.PNG
-rw-rw-r–@ 1 user admin 217599 23 Oct 14:46 IMG_1570.PNG
-rw-rw-r–@ 1 user admin 210131 23 Oct 14:46 IMG_1571.PNG

We show our

  1. reinstalling ImageMagick on macOS (for this MacBook Air) … via HomeBrew … and also show a reinstall of HomeBrew in the process … via …

    brew install imagemagick
    brew install ghostscript
  2. make the image set smaller in size via ImageMagick mogrify command …

    mogrify -quality 60 -format jpg backyardbirdcount/*.PNG
  3. show resultant image sets to show that the quality reduction was not bad (and also helped us create Citizen Science Primer Tutorial‘s animated GIF presentation)

Interesting, huh?!


Previous relevant Gimp Batch Image Manipulation Primer Tutorial is shown below.

Gimp Batch Image Manipulation Primer Tutorial

Gimp Batch Image Manipulation Primer Tutorial

Gimp is a great graphics editor with a huge number of methods to subtlely or not so subtlely adjust your images, no matter where they have come from (some of today’s came from Mac OS X screen captures via the Grab application and some came from a digital camera).

Gimp has a great and practical way to manipulate a batch of files to perform the task to this series of photographs. This could be especially useful for website imagery work.

In today’s tutorial you see one batch run changing the images to black and white and another to change the size of a series of photographs (to a smaller size than the huge size they come out of the digital camera (ie. more suited to website usage)) and add a text watermark in the top left hand corner.

Here is some downloadable PHP that helps out (after) the second batch approach to show up to six of the resized images at a time and change these images over time, and you could call it CuteButtons.php … this PHP arrangement (it is possible to do this same functionality just with Javascript, but is maybe easier to achieve in PHP, as well as there being methods like file_exists and file_get_contents and copy which are things (client-side) Javascript will never be able to do (well, maybe first of three in a clunky way)) is generic in the sense that there are hardcoded image names, but they can be overridden by using get parameters image1, image2, image3 etcetera etcetera etcetera …
eg. //www.rjmprogramming.com.au/GIMP/Bimp/CuteButtons.php?image1 =HTTP://www.rjmprogramming.com.au/GIMP/iPhoto/NLook.jpg&image2 =HTTP://www.rjmprogramming.com.au/GIMP/iPhoto/NLok.jpg

The Gimp of this tutorial is on a Mac laptop using Mac OS X 10.9.2 Mavericks. A curious thing happened with trying to get Batch Image Manipulation to work. It worked to a point but, initially, wouldn’t accept images when clicking the “Add image files” button. Read somewhere that this is less likely to happen when installing via MacPorts (presumably via port install gimp) but I installed via the Gimp website. Am not sure that it was all a coincidence, or was a dream, but seem to remember what made Gimp’s Batch Image Manipulation functionality to fully start working, was an “out there” idea I tried that was to download the gimp-plugin-bimp.zip in which there was a Windows bimp.exe (Gimp plugin), which I ran on Mac using the Terminal application’s Bash environment’s command wine via wine bimp.exe (we installed wine here via MacPorts port install wine and talked about wine with Wine for Windows on Mac Primer Tutorial). Just thought I’d mention this in case it helps somebody. My theory for the turn around is that this may have written something good to a configuration file (even before it failed to run (as you’d expect) with various Windows graphics libraries not loading).

Gimp’s Batch Image Manipulation (bimp) runs as a new application (as you can see in the tutorial), as you might expect would happen for (my favourite) XQuartz (formerly XWindows (see a future XWindows Primer Tutorial for more information here)) type of program (as Gimp is).

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


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

Posted in eLearning, iOS, Operating System, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

Citizen Science Primer Tutorial

Citizen Science Primer Tutorial

Citizen Science Primer Tutorial

Cannot remember having ever participated in any Citizen Science projects ever since the advent of mobile apps, though there was that time I filled in a New South Wales Museum contact us form to discover that we had a rubber snake next to the petunias, that time. So, today, here goes with the first!

We were made aware (via radio and television) of a Citizen Science project, aptly during “National Bird Week” called Aussie Backyard Bird Count, and got the “20 minutes at a time” counting the birdlife species in your backyard, as rules that might go okay with a half decent app. Well, the app is above “half decent” we think, though “fully decent”, how could you, yet?! It’s in the realms that one day we hold an app up to the skies and it works out the numbers for us, based on audio and visuals, perhaps, and, who knows, smellorama on bird droppings?!

As a programmer interested in “the coffee first thing in the morning before you knew you needed it” project, am I the best person to spruik human endeavour before automation? Well, there’s one thing thinking the lazy the brilliant ideas, and another following through … think “still lifes” around the place, and ropes awaiting action in painting places, and you might get the gist?!

No, the hard work of scientists, and their rigour is greatly admired hereabouts. But they can’t be everywhere in that empirical way Archimedes demonstrated to the science woooooorrrrrrlllllldddd. Yes, the intractability of so many of the wooooorrrrllllddd’s problems are coalescing on well conducted “Citizen Science” becoming more important. How else can the environment be monitored, with the often times dwindling resources given to science?

So, bird count it is, so far, for us. We record our registration and install and first 20 minute bird monitoring session to show you how a “Novice” (not our words, but the app’s) might tackle their first “Citizen Science” forall-acquaintance-be-forgotay. Would recommend the binoculars next time, and pick a central spot, and be still. Maybe you can combine the skills with your mindfulness app skills!

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

Posted in eLearning, iOS, Tutorials | Tagged , , , , , , , , , , , , , , | Leave a comment

IntelliJ Idea IDE Javascript HTML5 Boilerplate Project Primer Tutorial

IntelliJ Idea IDE Javascript HTML5 Boilerplate Project Primer Tutorial

IntelliJ Idea IDE Javascript HTML5 Boilerplate Project Primer Tutorial

We wanted to try out a macOS IDE that is new to us, today …


IntelliJ Idea

In today’s animated GIF presentation you can see us …

  1. installing IntelliJ Idea IDE on a macOS MacBook Air
  2. registering for a trial licence
  3. creation a new Javascript -> HTML5 Boilerplate project (though many other project types (eg. Java) are available too)
  4. making a couple of simple changes to its index.html
  5. Run -> index.html to display a webpage to a URL featuring a port number and project name

    HTTP://localhost:63342/untitled/index.html?_ijt=lh8s3bk5o8k51cguu1efmrllqm

    We liked the tips getting into the nitty gritty of using the IDE to code too. All in all, a great product, we think, judging by how fast it was to get up and running!

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

Posted in eLearning, Operating System, Tutorials | Tagged , , , , , , , , , , , , | Leave a comment

Australian Postcode Dropdown Place Iframe Posting Tutorial

Australian Postcode Dropdown Place Images Tutorial

Australian Postcode Dropdown Place Iframe Posting Tutorial

Today’s new blog posting title words …

  • Iframe
  • Posting

… say it all about today’s progress on top of yesterday’s Australian Postcode Dropdown Place Images Tutorial.

Well, almost all, the other “theme” being that progress can be unseen … doh, doh and doh … but sometimes “doh” is worth recalling … backwards …

hod

Why is “Posting” great? In a webpage navigation scenario a method=POST applied to an HTML form element opens the door to the exchange of so much more than the 800-900 characters a method=GET scenario allows for with the RJM Programming’s web server.

Why is an “Iframe” great? Let me count the ways … oh, oh … too many! But we’ve talked a lot about the HTML Iframe element at this blog. An Iframe element adorned by a “name” attribute opens the door to it being a real element means (as distinct from the “midair” Ajax/FormData alternative approach) to link to an HTML form (method=POST and target=[Iframe-name] and action=[destinationURL] and containing an input type=submit element with a defined ID so that “document.getElementById([thatID]”).click();” can send that data to that [destinationURL]). This scenario allows for large data sends, as that alternative to linking a shorter [destinationURLcontainingGETparameters] linked to that Iframe’s “src” attribute. It’s the tremendous flexibility we really admire and use … a lot.

We use these two concepts (three with HTML form element) to allow for many Google Chart Geo Chart Australian Postcode positions to be represented on that map that occurs as you use the changed australia_place_crowfly_distances.php‘s live run link, featuring the calling logic change


if (eval(('' + murl).length) < 800) {
document.getElementById('iap_get_ll').src=murl;
} else {
istoolong(murl);
}

… calling on the very generic called logic (placed in a predefined div element ID=divform style=display:none;), for your larger data set map scenarios …


function istoolong(ml) {
var zml=ml.replace('?','&').split('#')[0];
var zmls=zml.split('&');
var rnum=Math.floor(Math.random() * 19575325);
var fbitis='<form id=form' + rnum + ' method="POST" action="' + zmls[0] + '" target="iap_get_ll" style="display:none;"><input type=hidden name=wouldlikeyoutoseekpermission value=y></input>';
if (zml.indexOf('&inlat=') == -1) {
for (var iut=1; iut<zmls.length; iut++) {
fbitis+='<input type=hidden name="' + zmls[iut].split('=')[0] + '" value="' + decodeURIComponent(zmls[iut].split('=')[1]) + '"></input>';
}
fbitis+='<input type=submit style=display:none; id=subm' + rnum + '></input></form>';
document.getElementById('divform').innerHTML+=fbitis;
document.getElementById('subm' + rnum).click();
}
else {
if (zml.indexOf('&inlat=') != -1) {
document.getElementById('inlat').value=decodeURIComponent(zml.split('&inlat=')[1].split('&')[0]);
}
if (zml.indexOf('&inlong=') != -1) {
document.getElementById('inlong').value=decodeURIComponent(zml.split('&inlong=')[1].split('&')[0]);
}
if (zml.indexOf('&spantodo=') != -1) {
document.getElementById('spantodo').value=decodeURIComponent(zml.split('&spantodo=')[1].split('&')[0]);
}
document.getElementById('ipostcode').click();
}
}


Previous relevant Australian Postcode Dropdown Place Images Tutorial is shown below.

Australian Postcode Dropdown Place Images Tutorial

Australian Postcode Dropdown Place Images Tutorial

To progress with the recent Australian Postcode Place Images State Precedence Tutorial we pick up from its …

There is another issue we might have more to talk about into the future, as well as here now. If two incarnations of an [Australian] Place Name exist in two different [Australian] State Names you can specify a particular one via user entries such as …


Newtown,NSW

Well, to progress, we decided to write amended PHP writing Javascript that populates and adds event logic for the [Australian] Postcode yellow cells to be able to contain an HTML select (dropdown) element when the one [Australian] Place Name can point at multiple [Australian] Postcodes.

In that changed australia_place_crowfly_distances.php‘s live run link the dropdown’s onchange Javascript logic …


var postprefix='';

function stitleit(siois, dividis, pthree, poptdef) {
var bnv='';
if (siois.title != '') {
bnv=returnabbrev(siois.title);
} else {
bnv=returnabbrev(siois.value);
}
if (bnv != '') {
if ((siois.title + ' ').substring(0,1) >= '0' && (siois.title + ' ').substring(0,1) <= '9' && eval('' + siois.title.length) == 4) {
document.getElementById(pthree.replace('_02','_01').replace('_05','_04')).innerHTML=siois.value + bnv;
processone(document.getElementById(pthree.replace('_02','_01').replace('_05','_04')));
} else {
document.getElementById('retstate').title='';
document.getElementById(pthree).innerHTML+=bnv;
postprefix=siois.value;
processone(document.getElementById(pthree));
}
}
}

… makes use of those “honing in via those [Australian] Place Name,[Australian] State Name Abbreviation” ideas above to uniquify, as needed, from an [Australian] Postcodes dropdown scenario.


Previous relevant Australian Postcode Place Images State Precedence Tutorial is shown below.

Australian Postcode Place Images State Precedence Tutorial

Australian Postcode Place Images State Precedence Tutorial

One weakness arising from the recent Australian Postcode Place Images Tutorial work is that the Wikipedia search for a Place Name can be confused with other concepts such as Famous People Name (eg. Darwin) which Wikipedia categorizes more fundamentally than the Australian city Place Name. But Wikipedia helps out this situation by its …


[Australian] Place Name, [Australian] State Name

… alternative URL arrangements in such scenarios. And so, we can try looking at both …

  • [Australian] Place Name
  • [Australian] Place Name, [Australian] State Name

… Wikipedia URL arrangements to see which, if existant, contains the string “Coordinates”, which is an indication of Geolocation interest on a Wikipedia webpage. Thanks heaps, Wikipedia!

And so the changed australia_place_crowfly_distances.php‘s live run link works with this issue in mind.

There is another issue we might have more to talk about into the future, as well as here now. If two incarnations of an [Australian] Place Name exist in two different [Australian] State Names you can specify a particular one via user entries such as …


Newtown,NSW

… or …


[Australian] Place Name,[Australian] State Name Abbreviation


Previous relevant Australian Postcode Place Images Tutorial is shown below.

Australian Postcode Place Images Tutorial

Australian Postcode Place Images Tutorial

We think, on top of the work of yesterday’s Australian Postcode Northern Territory Place Tutorial, it would be good to enhance the existant …

Australian place linked to Australian postcode linked to Australian Google Charts Geo Chart user experience

… and, today, add some Wikipedia image possibilities into the mix. How best to approach this idea, given it is an enhancement and not part of the primary workflow thinking? We think, perhaps, turn the webpage’s body element into a “screenful palette” (at least initially) and fill it with background images via the …

  • left top
  • center top
  • right top
  • right center
  • right bottom
  • center bottom
  • left bottom
  • left center

… CSS background-position positioning options as an approach to an attempt to represent an unknown number and order and quality of Wikipedia image data, displayable each time a user enters a placename or postcode that has a Wikipedia entry (that we hope is about that place, though no guarantees here). The new Javascript “function ulit” introduced yesterday is changed for today’s work as per …


var goes=0;

function ulit(ino, inpl) {
var suff='';
if (inpl == inpl.toLowerCase() || inpl == inpl.toUpperCase()) {
var outpl='', outdl='';
var wds=inpl.toLowerCase().split(' ');
for (var inb=0; inb<wds.length; inb++) {
if (wds[inb].length > 2 || outpl.replace('mt','').replace('st','') == '') {
outpl+=outdl + wds[inb].substring(0,1).toUpperCase() + (wds[inb] + ' ').substring(1).trim();
} else if (wds[inb] == 'po') {
outpl+=outdl + wds[inb].toUpperCase();
} else {
outpl+=outdl + wds[inb];
}
outdl=' ';
}
if (ino) { ino.innerHTML=outpl; }
if (document.getElementById('imageson').checked) {
if (('' + document.getElementById('mytable').outerHTML).split('>')[0].indexOf('15') == -1) {
document.getElementById('mytable').style.marginTop='149px';
} else {
document.getElementById('myh1').style.marginLeft='265px';
document.getElementById('myh3').style.marginLeft='265px';
document.getElementById('myh4').style.marginLeft='265px';
}
document.getElementById('sdesc').innerHTML=outpl + ' ';
suff=' ';
document.getElementById('sdesc').style.backgroundColor='white';
document.getElementById('tzi').src=document.getElementById('tzi').src.split('?')[0] + '?tzexact=' + encodeURIComponent(outpl) + '&tznickname=' + encodeURIComponent(outpl.replace(/_/g,' ')) + '&avaJUNKtar=multiply'; // + avatar_at;
} else if (('' + document.getElementById('mytable').outerHTML).indexOf('15') != -1) {
document.getElementById('mytable').style.marginTop='0px';
if (1 == 2) { document.getElementById('sdesc').innerHTML=''; }
} else if (1 == 2) {
document.getElementById('sdesc').innerHTML='';
}
goes++;
if (goes == 2) {
document.getElementById('ourcanvas').style.height='100%';
}

return outpl + suff;
} else {
if (document.getElementById('imageson').checked) {
if (('' + document.getElementById('mytable').outerHTML).split('>')[0].indexOf('15') == -1) {
document.getElementById('mytable').style.marginTop='149px';
} else {
document.getElementById('myh1').style.marginLeft='265px';
document.getElementById('myh3').style.marginLeft='265px';
document.getElementById('myh4').style.marginLeft='265px';
}
document.getElementById('sdesc').innerHTML=inpl + ' ';
suff=' ';
document.getElementById('sdesc').style.backgroundColor='white';
document.getElementById('tzi').src=document.getElementById('tzi').src.split('?')[0] + '?tzexact=' + encodeURIComponent(inpl) + '&tznickname=' + encodeURIComponent(inpl.replace(/_/g,' ')) + '&avaJUNKtar=multiply'; // + avatar_at;
} else if (('' + document.getElementById('mytable').outerHTML).indexOf('15') != -1) {
document.getElementById('mytable').style.marginTop='0px';
if (1 == 2) { document.getElementById('sdesc').innerHTML=''; }
} else if (1 == 2) {
document.getElementById('sdesc').innerHTML='';
}
goes++;
if (goes == 2) {
document.getElementById('ourcanvas').style.height='100%';
}

return inpl + suff;
}
}

… in the changed australia_place_crowfly_distances.php‘s live run link.


Previous relevant Australian Postcode Northern Territory Place Tutorial is shown below.

Australian Postcode Northern Territory Place Tutorial

Australian Postcode Northern Territory Place Tutorial

We had cause to revisit the PHP web application of Australian Postcode Place Modal Backdrop Popup Move Tutorial recently, and we were lucky (in a masochistic sense) to do a test showing an error we hadn’t detected initially, designing it.

That weakness, we had to learn, revolved around Northern Territory places in Australia. Clear thinking may have got us there earlier, but the problem “actually” was that postcodes in the Northern Territory start with “0” (ie. zero) and somewhere down the track in all the code our “mapping” of that postcode lost its leading zero, and so “refeeding” that “non-leading-zero” postcode back into the latitude and longitude lookup, the web application could fail.

But thinking outside the box, if we don’t want to wade through to the “string becomes integer” issue in the code, another fact we can “hang our hat on” is that Australian Postcodes are four characters long, and so the Javascript tweak below also fixed our issues, as per …


document.getElementById(indivo.id.replace('_01','_02')).innerHTML=('0000' + findit[eval(-1 + kk)].split(';')[eval(-1 + findit[eval(-1 + kk)].split(';').length)] + ii).slice(-4);

… in the changed australia_place_crowfly_distances.php‘s live run link.


Previous relevant Australian Postcode Place Modal Backdrop Popup Move Tutorial is shown below.

Australian Postcode Place Modal Backdrop Popup Move Tutorial

Australian Postcode Place Modal Backdrop Popup Move Tutorial

Today’s extension to yesterday’s Australian Postcode Place Modal Backdrop Popup Tutorial predominantly CSS themes is the “prove to ourselves” working of …

  • window.open based Window with that 3rd argument popup positioning used …
  • Window object method moveTo … when that Window URL is …
  • cross-domain

… and me being the optimist that I am thought though our Google Directions URL involved was cross-domain we would be able to harness the cuteness of moveTo so that it could ring around the Modal Backdrop Popup over time.

Alas, no such luck, and guess there are good (web browser) security reasons here.

Instead what we did was …

  • window.open based Window with that 3rd argument popup positioning used …
  • that [last Window object].close() then another window.open based Window with that 3rd argument popup new positioning … for that Window URL that is …
  • cross-domain

Make the scenario not be cross-domain and no worries regarding Window object method moveTo method.

And so, again, feel free to try the changed australia_place_crowfly_distances.php‘s live run link.


Previous relevant Australian Postcode Place Modal Backdrop Popup Tutorial is shown below.

Australian Postcode Place Modal Backdrop Popup Tutorial

Australian Postcode Place Modal Backdrop Popup Tutorial

Yesterday’s Australian Postcode Place Nearby Tutorial had us attending to an “Australian Postcode Nearby” subset of functionality in terms of the event …

  • onmouseover … or “on hover” which programmers out there will know, in “mobile land” is about as useful as a screen door on a submarine … so, today, we attend to some event logic everybody relates to, that being …
  • onclick

… and today, for an aesthetic change, we’re going to show our Google Charts Map Chart interfacing functionality in a Modal Backdrop Popup “window” (ie. not a window as such, but more an HTML nested div that acts like a “modal” (has to be attended to) popup).

Consequently, that Javascript nearestto function changed as per


function nearestto(ogset, gset) {
var iou=0, outset=gset, this_lat=0.0, this_long=0.0, this_diff=-1.0, smallest_diff=-1.0, largest_diff=-1.0, smallest_num=0;
var sofar=';', pa='';
var things=[];
ourarguments='?title=' + encodeURIComponent('Australian Postcode Places Nearby ' + ogset.innerHTML) + '&onclick=y&label=%5b%27Lat%27,&value=%27Lon%27,%20%27Name%27%5d&data=';
if (postcodea.length > 1) {
this_long=eval(gset.split(' ')[0].split(',')[1]);
this_lat=eval(gset.split(' ')[0].split(',')[0]);
for (iou=0; iou<postcodea.length; iou++) {
this_diff=eval(Math.abs(eval(('' + this_long)) - eval(('' + longa[iou]))) + Math.abs(eval(('' + this_lat)) - eval(('' + lata[iou]))));
if (this_diff < 20 && this_diff > 0.00001) {
sofar+='' + iou + '+' + placea[iou] + '+' + longa[iou] + '+' + lata[iou] + '-' + this_diff + ';';
things.push('' + eval(1000000.0 + eval('' + this_diff)) + ' ~' + lata[iou] + '~' + longa[iou] + '~ near to ' + placea[iou] + ',' + postcodea[iou]);
if (smallest_diff < 0.0 || eval('' + this_diff) < eval('' + smallest_diff)) {
smallest_diff=this_diff;
smallest_num=iou;
}
if (largest_diff < 0.0 || eval('' + this_diff) > eval('' + largest_diff)) {
largest_diff=this_diff;
}
} else if (this_diff < 20 && this_diff <= 0.00001) {
ourarguments+=',%20[' + lata[iou] + ',' + longa[iou] + ',~' + encodeURIComponent(placea[iou] + ',' + postcodea[iou]) + '~]';

}
}
things.sort();
outset+=' near to ' + placea[smallest_num] + ',' + postcodea[smallest_num];
ourarguments+=',%20[' + lata[smallest_num] + ',' + longa[smallest_num] + ',~' + encodeURIComponent(placea[smallest_num] + ',' + postcodea[smallest_num]) + '~]';
pa="//www.rjmprogramming.com.au/PHP/Map/map.php" + ourarguments;

for (iou=0; iou<=15; iou++) {
if (things.length > iou && outset.indexOf(things[iou].split(' near to ')[1]) == -1) {
outset+=' and near to ' + things[iou].split(' near to ')[1];
pa+=',%20[' + things[iou].split('~')[1] + ',' + things[iou].split('~')[2] + ',~' + encodeURIComponent(things[iou].split(' near to ')[1]) + '~]';
if (pa.length < 751) { ourarguments='?' + pa.split('?')[1]; }

}
}
// Modal backdrop below ...
if (ogset.innerHTML != '') {
ogset.onclick=function() {
document.getElementById('mypopup').style.display='block';
document.getElementById('mypopup-inner').style.display='block';
if (1 == 1) {
document.getElementById('myiframe').src="//www.rjmprogramming.com.au/PHP/Map/map.php" + ourarguments;
} else {
document.getElementById('mypopup-inner').innerHTML='<a title="Close" id="alertclose" class="popup-close" data-popup-close="popup-alert" onclick=" event.stopPropagation(); document.getElementById(' + "'" + 'mypopup' + "'" + ').style.display=' + "'" + 'none' + "'" + ';" href="#">&#10060;</a><br><iframe onclick=" event.stopPropagation(); " src="//www.rjmprogramming.com.au/PHP/Map/map.php' + ourarguments + '" id=myiframe style="width:500px;height:500px;"></iframe>';
}
};
}

}
return outset;
}

This type of “popup” should not startle the “popup blocker” horses on your modern web browsers!

Once again feel free to try the changed australia_place_crowfly_distances.php‘s live run link.


Previous relevant Australian Postcode Place Nearby Tutorial is shown below.

Australian Postcode Place Nearby Tutorial

Australian Postcode Place Nearby Tutorial

Back in “the where of life” web application wooooooorrrrrllllldd it’s all fine and good to know “crowfly distances” as we did in Australian Postcode Place Distances Map Chart Tutorial but that level of mathematics is not everybody’s cup of tea. Often we just want to know a …

  • nearby
  • place

… and that is all fine and good using that incredible Australian Postcode resource we talked about below.

What broad brush steps were done to arrange this information be displayed hovering over an Australian Postcode Place, in addition to ideas of that previous blog post, and its predecessors?

  • a top priority in all software integration is to first protect whatever already works, and that involved the establishment of a blank ” ” delimitation rule to the “hovering over text” … it used to be latitude,longitude and this is separated by “nearby” information by a space ” ” character delimitation … and in any existing Javascript code it is a simple matter of appending …

    .split(" ")[0]

    … onto any Javascript DOM “.title” usages (as the title attribute is what is displayed when hovering)
  • add global arrays …

    var postcodea=[];
    var placea=[];
    var lata=[];
    var longa=[];

  • at document.body onload event arrange to have …

    function fillcomparray(dataarr) {
    var fldsa, ij, jk, cdelim='', thisplace='', lm=-1, xpc='';
    for (ij=1; ij<dataarr.length; ij++) {
    if ((dataarr[ij] + ' ').substring(0,1) >= '0' && (dataarr[ij] + ' ').substring(0,1) <= '9') {
    fldsa=dataarr[ij].split(',');
    //postcodea.push(fldsa[0]);
    xpc=fldsa[0];
    cdelim='';
    thisplace='';
    lm=-1;
    for (jk=1; jk<fldsa.length; jk++) {
    if ((fldsa[jk] + ' ').substring(0,1) == '-' || ((fldsa[jk] + ' ').substring(0,1) >= '0' && (fldsa[jk] + ' ').substring(0,1) <= '9')) { if (lm < 0) { lm=jk; } }
    if (lm == -1) {
    thisplace+=cdelim + fldsa[jk];
    cdelim=',';
    }
    }
    if (fldsa[lm].match(/^[0-9-.]*$/) && fldsa[eval(1 + eval('' + lm))].match(/^[0-9-.]*$/)) {
    postcodea.push(xpc);
    placea.push(thisplace);
    longa.push(fldsa[lm]);
    lm++;
    lata.push(fldsa[lm]);
    }
    }
    }
    }

    … populate those global arrays … ready for user places of interest to trigger …
  • onblur logic that when determining a “.title” attribute, now does

    document.getElementById('setofthree_' + eval(-1 + setofthree) + '_01').title=nearestto(findit[jj].split(',')[eval(4 - indivo.innerHTML.split(',').length)] + ',' + findit[jj].split(',')[eval(3 - indivo.innerHTML.split(',').length)]);

    … and within that new Javascript function …
  • Javascript array sort() method becomes a useful intervention as per

    function nearestto(gset) {
    var iou=0, outset=gset, this_lat=0.0, this_long=0.0, this_diff=-1.0, smallest_diff=-1.0, largest_diff=-1.0, smallest_num=0;
    var sofar=';';
    var things=[];
    if (postcodea.length > 1) {
    this_long=eval(gset.split(' ')[0].split(',')[1]);
    this_lat=eval(gset.split(' ')[0].split(',')[0]);
    for (iou=0; iou<postcodea.length; iou++) {
    this_diff=eval(Math.abs(eval(('' + this_long)) - eval(('' + longa[iou]))) + Math.abs(eval(('' + this_lat)) - eval(('' + lata[iou]))));
    if (this_diff < 20 && this_diff > 0.00001) {
    sofar+='' + iou + '+' + placea[iou] + '+' + longa[iou] + '+' + lata[iou] + '-' + this_diff + ';';
    things.push('' + eval(1000000.0 + eval('' + this_diff)) + ' near to ' + placea[iou] + ',' + postcodea[iou]);
    if (smallest_diff < 0.0 || eval('' + this_diff) < eval('' + smallest_diff)) {
    smallest_diff=this_diff;
    smallest_num=iou;
    }
    if (largest_diff < 0.0 || eval('' + this_diff) > eval('' + largest_diff)) {
    largest_diff=this_diff;
    }
    }
    }
    things.sort();
    outset+=' near to ' + placea[smallest_num] + ',' + postcodea[smallest_num];
    for (iou=0; iou<=15; iou++) {
    if (things.length > iou && outset.indexOf(things[iou].split(' near to ')[1]) == -1) {
    outset+=' and near to ' + things[iou].split(' near to ')[1];
    }
    }
    }
    return outset;
    }

    … which does the job of appending 15 or so nearby Australian Postcode Places to the user entered one and displayed as the user hovers over information

Feel free to try the changed australia_place_crowfly_distances.php‘s live run link.


Previous relevant Australian Postcode Place Distances Map Chart Tutorial is shown below.

Australian Postcode Place Distances Map Chart Tutorial

Australian Postcode Place Distances Map Chart Tutorial

Yesterday’s “where of life” themed Australian Postcode Place Distances Primer Tutorial lacked something … anyone, anyone? … yes, Anaximander … a map … and you’d like to swap my horse for one … well okay, there’s one called Ed out the back … but we digress.

Queue the great Google Charts Map Chart (which can transition very easily to Geo Chart, where “from” to “to” lines are drawn) and which can be called in an HTML iframe element to add that visual interest to our changed australia_place_crowfly_distances.php‘s live run link.

There isn’t anything much better than a map to trip plan, or study geography, in our books … but alas we ran out of pamphlettes today … sorrrrrrryyyyyy.


Previous relevant Australian Postcode Place Distances Primer Tutorial is shown below.

Australian Postcode Place Distances Primer Tutorial

Australian Postcode Place Distances Primer Tutorial

It’s time to return to a “where of life” web application tutorial. Why? No, “where”. Who’s on second. But, seriously, the reason is that we found a great Australian Postcode resource for geodata lookups of these Australian placenames or postcodes … thanks.

Combine this …

  • Australian postcode (or placename) latitude and longitude … with …
  • another Australian postcode (or placename) latitude and longitude … and we can …
  • show the user a great circle distance between the two places … as well as a link to …
  • Google Maps Directions map between the two places … and there you can imagine we have a bit of a …
  • trip planner

… on our hands.

We can add our own client geographical position into the mix via …


function getLocation() {
if (navigator.geolocation) {
try {
navigator.geolocation.getCurrentPosition(showPosition);
setTimeout(later, 2000);
} catch(err) {
setTimeout(later, 2000);
}
} else {
document.getElementById('you').innerHTML='(0,0)';
if (document.getElementById('inlat') && document.getElementById('inlong')) {
document.getElementById('inlat').value=userlatitude;
document.getElementById('inlong').value=userlongitude;
}
if (document.getElementById('ipostcode')) {
document.getElementById('ipostcode').click();
newthree();
}
}
}


function showPosition(position) {
if (userlatitude == 0.0 && userlongitude == 0.0) {
userlatitude=eval('' + position.coords.latitude);
userlongitude=eval('' + position.coords.longitude);
if (document.getElementById('inlat') && document.getElementById('inlong')) {
document.getElementById('inlat').value=userlatitude;
document.getElementById('inlong').value=userlongitude;
}
if (document.getElementById('ipostcode')) {
document.getElementById('ipostcode').click();
newthree();
}
}
}

… that you can see involved in the PHP australia_place_crowfly_distances.php‘s live run link, for your perusal.

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


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


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


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


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


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


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


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


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


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

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

Australian Postcode Dropdown Place Images Tutorial

Australian Postcode Dropdown Place Images Tutorial

Australian Postcode Dropdown Place Images Tutorial

To progress with the recent Australian Postcode Place Images State Precedence Tutorial we pick up from its …

There is another issue we might have more to talk about into the future, as well as here now. If two incarnations of an [Australian] Place Name exist in two different [Australian] State Names you can specify a particular one via user entries such as …


Newtown,NSW

Well, to progress, we decided to write amended PHP writing Javascript that populates and adds event logic for the [Australian] Postcode yellow cells to be able to contain an HTML select (dropdown) element when the one [Australian] Place Name can point at multiple [Australian] Postcodes.

In that changed australia_place_crowfly_distances.php‘s live run link the dropdown’s onchange Javascript logic …


var postprefix='';

function stitleit(siois, dividis, pthree, poptdef) {
var bnv='';
if (siois.title != '') {
bnv=returnabbrev(siois.title);
} else {
bnv=returnabbrev(siois.value);
}
if (bnv != '') {
if ((siois.title + ' ').substring(0,1) >= '0' && (siois.title + ' ').substring(0,1) <= '9' && eval('' + siois.title.length) == 4) {
document.getElementById(pthree.replace('_02','_01').replace('_05','_04')).innerHTML=siois.value + bnv;
processone(document.getElementById(pthree.replace('_02','_01').replace('_05','_04')));
} else {
document.getElementById('retstate').title='';
document.getElementById(pthree).innerHTML+=bnv;
postprefix=siois.value;
processone(document.getElementById(pthree));
}
}
}

… makes use of those “honing in via those [Australian] Place Name,[Australian] State Name Abbreviation” ideas above to uniquify, as needed, from an [Australian] Postcodes dropdown scenario.


Previous relevant Australian Postcode Place Images State Precedence Tutorial is shown below.

Australian Postcode Place Images State Precedence Tutorial

Australian Postcode Place Images State Precedence Tutorial

One weakness arising from the recent Australian Postcode Place Images Tutorial work is that the Wikipedia search for a Place Name can be confused with other concepts such as Famous People Name (eg. Darwin) which Wikipedia categorizes more fundamentally than the Australian city Place Name. But Wikipedia helps out this situation by its …


[Australian] Place Name, [Australian] State Name

… alternative URL arrangements in such scenarios. And so, we can try looking at both …

  • [Australian] Place Name
  • [Australian] Place Name, [Australian] State Name

… Wikipedia URL arrangements to see which, if existant, contains the string “Coordinates”, which is an indication of Geolocation interest on a Wikipedia webpage. Thanks heaps, Wikipedia!

And so the changed australia_place_crowfly_distances.php‘s live run link works with this issue in mind.

There is another issue we might have more to talk about into the future, as well as here now. If two incarnations of an [Australian] Place Name exist in two different [Australian] State Names you can specify a particular one via user entries such as …


Newtown,NSW

… or …


[Australian] Place Name,[Australian] State Name Abbreviation


Previous relevant Australian Postcode Place Images Tutorial is shown below.

Australian Postcode Place Images Tutorial

Australian Postcode Place Images Tutorial

We think, on top of the work of yesterday’s Australian Postcode Northern Territory Place Tutorial, it would be good to enhance the existant …

Australian place linked to Australian postcode linked to Australian Google Charts Geo Chart user experience

… and, today, add some Wikipedia image possibilities into the mix. How best to approach this idea, given it is an enhancement and not part of the primary workflow thinking? We think, perhaps, turn the webpage’s body element into a “screenful palette” (at least initially) and fill it with background images via the …

  • left top
  • center top
  • right top
  • right center
  • right bottom
  • center bottom
  • left bottom
  • left center

… CSS background-position positioning options as an approach to an attempt to represent an unknown number and order and quality of Wikipedia image data, displayable each time a user enters a placename or postcode that has a Wikipedia entry (that we hope is about that place, though no guarantees here). The new Javascript “function ulit” introduced yesterday is changed for today’s work as per …


var goes=0;

function ulit(ino, inpl) {
var suff='';
if (inpl == inpl.toLowerCase() || inpl == inpl.toUpperCase()) {
var outpl='', outdl='';
var wds=inpl.toLowerCase().split(' ');
for (var inb=0; inb<wds.length; inb++) {
if (wds[inb].length > 2 || outpl.replace('mt','').replace('st','') == '') {
outpl+=outdl + wds[inb].substring(0,1).toUpperCase() + (wds[inb] + ' ').substring(1).trim();
} else if (wds[inb] == 'po') {
outpl+=outdl + wds[inb].toUpperCase();
} else {
outpl+=outdl + wds[inb];
}
outdl=' ';
}
if (ino) { ino.innerHTML=outpl; }
if (document.getElementById('imageson').checked) {
if (('' + document.getElementById('mytable').outerHTML).split('>')[0].indexOf('15') == -1) {
document.getElementById('mytable').style.marginTop='149px';
} else {
document.getElementById('myh1').style.marginLeft='265px';
document.getElementById('myh3').style.marginLeft='265px';
document.getElementById('myh4').style.marginLeft='265px';
}
document.getElementById('sdesc').innerHTML=outpl + ' ';
suff=' ';
document.getElementById('sdesc').style.backgroundColor='white';
document.getElementById('tzi').src=document.getElementById('tzi').src.split('?')[0] + '?tzexact=' + encodeURIComponent(outpl) + '&tznickname=' + encodeURIComponent(outpl.replace(/_/g,' ')) + '&avaJUNKtar=multiply'; // + avatar_at;
} else if (('' + document.getElementById('mytable').outerHTML).indexOf('15') != -1) {
document.getElementById('mytable').style.marginTop='0px';
if (1 == 2) { document.getElementById('sdesc').innerHTML=''; }
} else if (1 == 2) {
document.getElementById('sdesc').innerHTML='';
}
goes++;
if (goes == 2) {
document.getElementById('ourcanvas').style.height='100%';
}

return outpl + suff;
} else {
if (document.getElementById('imageson').checked) {
if (('' + document.getElementById('mytable').outerHTML).split('>')[0].indexOf('15') == -1) {
document.getElementById('mytable').style.marginTop='149px';
} else {
document.getElementById('myh1').style.marginLeft='265px';
document.getElementById('myh3').style.marginLeft='265px';
document.getElementById('myh4').style.marginLeft='265px';
}
document.getElementById('sdesc').innerHTML=inpl + ' ';
suff=' ';
document.getElementById('sdesc').style.backgroundColor='white';
document.getElementById('tzi').src=document.getElementById('tzi').src.split('?')[0] + '?tzexact=' + encodeURIComponent(inpl) + '&tznickname=' + encodeURIComponent(inpl.replace(/_/g,' ')) + '&avaJUNKtar=multiply'; // + avatar_at;
} else if (('' + document.getElementById('mytable').outerHTML).indexOf('15') != -1) {
document.getElementById('mytable').style.marginTop='0px';
if (1 == 2) { document.getElementById('sdesc').innerHTML=''; }
} else if (1 == 2) {
document.getElementById('sdesc').innerHTML='';
}
goes++;
if (goes == 2) {
document.getElementById('ourcanvas').style.height='100%';
}

return inpl + suff;
}
}

… in the changed australia_place_crowfly_distances.php‘s live run link.


Previous relevant Australian Postcode Northern Territory Place Tutorial is shown below.

Australian Postcode Northern Territory Place Tutorial

Australian Postcode Northern Territory Place Tutorial

We had cause to revisit the PHP web application of Australian Postcode Place Modal Backdrop Popup Move Tutorial recently, and we were lucky (in a masochistic sense) to do a test showing an error we hadn’t detected initially, designing it.

That weakness, we had to learn, revolved around Northern Territory places in Australia. Clear thinking may have got us there earlier, but the problem “actually” was that postcodes in the Northern Territory start with “0” (ie. zero) and somewhere down the track in all the code our “mapping” of that postcode lost its leading zero, and so “refeeding” that “non-leading-zero” postcode back into the latitude and longitude lookup, the web application could fail.

But thinking outside the box, if we don’t want to wade through to the “string becomes integer” issue in the code, another fact we can “hang our hat on” is that Australian Postcodes are four characters long, and so the Javascript tweak below also fixed our issues, as per …


document.getElementById(indivo.id.replace('_01','_02')).innerHTML=('0000' + findit[eval(-1 + kk)].split(';')[eval(-1 + findit[eval(-1 + kk)].split(';').length)] + ii).slice(-4);

… in the changed australia_place_crowfly_distances.php‘s live run link.


Previous relevant Australian Postcode Place Modal Backdrop Popup Move Tutorial is shown below.

Australian Postcode Place Modal Backdrop Popup Move Tutorial

Australian Postcode Place Modal Backdrop Popup Move Tutorial

Today’s extension to yesterday’s Australian Postcode Place Modal Backdrop Popup Tutorial predominantly CSS themes is the “prove to ourselves” working of …

  • window.open based Window with that 3rd argument popup positioning used …
  • Window object method moveTo … when that Window URL is …
  • cross-domain

… and me being the optimist that I am thought though our Google Directions URL involved was cross-domain we would be able to harness the cuteness of moveTo so that it could ring around the Modal Backdrop Popup over time.

Alas, no such luck, and guess there are good (web browser) security reasons here.

Instead what we did was …

  • window.open based Window with that 3rd argument popup positioning used …
  • that [last Window object].close() then another window.open based Window with that 3rd argument popup new positioning … for that Window URL that is …
  • cross-domain

Make the scenario not be cross-domain and no worries regarding Window object method moveTo method.

And so, again, feel free to try the changed australia_place_crowfly_distances.php‘s live run link.


Previous relevant Australian Postcode Place Modal Backdrop Popup Tutorial is shown below.

Australian Postcode Place Modal Backdrop Popup Tutorial

Australian Postcode Place Modal Backdrop Popup Tutorial

Yesterday’s Australian Postcode Place Nearby Tutorial had us attending to an “Australian Postcode Nearby” subset of functionality in terms of the event …

  • onmouseover … or “on hover” which programmers out there will know, in “mobile land” is about as useful as a screen door on a submarine … so, today, we attend to some event logic everybody relates to, that being …
  • onclick

… and today, for an aesthetic change, we’re going to show our Google Charts Map Chart interfacing functionality in a Modal Backdrop Popup “window” (ie. not a window as such, but more an HTML nested div that acts like a “modal” (has to be attended to) popup).

Consequently, that Javascript nearestto function changed as per


function nearestto(ogset, gset) {
var iou=0, outset=gset, this_lat=0.0, this_long=0.0, this_diff=-1.0, smallest_diff=-1.0, largest_diff=-1.0, smallest_num=0;
var sofar=';', pa='';
var things=[];
ourarguments='?title=' + encodeURIComponent('Australian Postcode Places Nearby ' + ogset.innerHTML) + '&onclick=y&label=%5b%27Lat%27,&value=%27Lon%27,%20%27Name%27%5d&data=';
if (postcodea.length > 1) {
this_long=eval(gset.split(' ')[0].split(',')[1]);
this_lat=eval(gset.split(' ')[0].split(',')[0]);
for (iou=0; iou<postcodea.length; iou++) {
this_diff=eval(Math.abs(eval(('' + this_long)) - eval(('' + longa[iou]))) + Math.abs(eval(('' + this_lat)) - eval(('' + lata[iou]))));
if (this_diff < 20 && this_diff > 0.00001) {
sofar+='' + iou + '+' + placea[iou] + '+' + longa[iou] + '+' + lata[iou] + '-' + this_diff + ';';
things.push('' + eval(1000000.0 + eval('' + this_diff)) + ' ~' + lata[iou] + '~' + longa[iou] + '~ near to ' + placea[iou] + ',' + postcodea[iou]);
if (smallest_diff < 0.0 || eval('' + this_diff) < eval('' + smallest_diff)) {
smallest_diff=this_diff;
smallest_num=iou;
}
if (largest_diff < 0.0 || eval('' + this_diff) > eval('' + largest_diff)) {
largest_diff=this_diff;
}
} else if (this_diff < 20 && this_diff <= 0.00001) {
ourarguments+=',%20[' + lata[iou] + ',' + longa[iou] + ',~' + encodeURIComponent(placea[iou] + ',' + postcodea[iou]) + '~]';

}
}
things.sort();
outset+=' near to ' + placea[smallest_num] + ',' + postcodea[smallest_num];
ourarguments+=',%20[' + lata[smallest_num] + ',' + longa[smallest_num] + ',~' + encodeURIComponent(placea[smallest_num] + ',' + postcodea[smallest_num]) + '~]';
pa="//www.rjmprogramming.com.au/PHP/Map/map.php" + ourarguments;

for (iou=0; iou<=15; iou++) {
if (things.length > iou && outset.indexOf(things[iou].split(' near to ')[1]) == -1) {
outset+=' and near to ' + things[iou].split(' near to ')[1];
pa+=',%20[' + things[iou].split('~')[1] + ',' + things[iou].split('~')[2] + ',~' + encodeURIComponent(things[iou].split(' near to ')[1]) + '~]';
if (pa.length < 751) { ourarguments='?' + pa.split('?')[1]; }

}
}
// Modal backdrop below ...
if (ogset.innerHTML != '') {
ogset.onclick=function() {
document.getElementById('mypopup').style.display='block';
document.getElementById('mypopup-inner').style.display='block';
if (1 == 1) {
document.getElementById('myiframe').src="//www.rjmprogramming.com.au/PHP/Map/map.php" + ourarguments;
} else {
document.getElementById('mypopup-inner').innerHTML='<a title="Close" id="alertclose" class="popup-close" data-popup-close="popup-alert" onclick=" event.stopPropagation(); document.getElementById(' + "'" + 'mypopup' + "'" + ').style.display=' + "'" + 'none' + "'" + ';" href="#">&#10060;</a><br><iframe onclick=" event.stopPropagation(); " src="//www.rjmprogramming.com.au/PHP/Map/map.php' + ourarguments + '" id=myiframe style="width:500px;height:500px;"></iframe>';
}
};
}

}
return outset;
}

This type of “popup” should not startle the “popup blocker” horses on your modern web browsers!

Once again feel free to try the changed australia_place_crowfly_distances.php‘s live run link.


Previous relevant Australian Postcode Place Nearby Tutorial is shown below.

Australian Postcode Place Nearby Tutorial

Australian Postcode Place Nearby Tutorial

Back in “the where of life” web application wooooooorrrrrllllldd it’s all fine and good to know “crowfly distances” as we did in Australian Postcode Place Distances Map Chart Tutorial but that level of mathematics is not everybody’s cup of tea. Often we just want to know a …

  • nearby
  • place

… and that is all fine and good using that incredible Australian Postcode resource we talked about below.

What broad brush steps were done to arrange this information be displayed hovering over an Australian Postcode Place, in addition to ideas of that previous blog post, and its predecessors?

  • a top priority in all software integration is to first protect whatever already works, and that involved the establishment of a blank ” ” delimitation rule to the “hovering over text” … it used to be latitude,longitude and this is separated by “nearby” information by a space ” ” character delimitation … and in any existing Javascript code it is a simple matter of appending …

    .split(" ")[0]

    … onto any Javascript DOM “.title” usages (as the title attribute is what is displayed when hovering)
  • add global arrays …

    var postcodea=[];
    var placea=[];
    var lata=[];
    var longa=[];

  • at document.body onload event arrange to have …

    function fillcomparray(dataarr) {
    var fldsa, ij, jk, cdelim='', thisplace='', lm=-1, xpc='';
    for (ij=1; ij<dataarr.length; ij++) {
    if ((dataarr[ij] + ' ').substring(0,1) >= '0' && (dataarr[ij] + ' ').substring(0,1) <= '9') {
    fldsa=dataarr[ij].split(',');
    //postcodea.push(fldsa[0]);
    xpc=fldsa[0];
    cdelim='';
    thisplace='';
    lm=-1;
    for (jk=1; jk<fldsa.length; jk++) {
    if ((fldsa[jk] + ' ').substring(0,1) == '-' || ((fldsa[jk] + ' ').substring(0,1) >= '0' && (fldsa[jk] + ' ').substring(0,1) <= '9')) { if (lm < 0) { lm=jk; } }
    if (lm == -1) {
    thisplace+=cdelim + fldsa[jk];
    cdelim=',';
    }
    }
    if (fldsa[lm].match(/^[0-9-.]*$/) && fldsa[eval(1 + eval('' + lm))].match(/^[0-9-.]*$/)) {
    postcodea.push(xpc);
    placea.push(thisplace);
    longa.push(fldsa[lm]);
    lm++;
    lata.push(fldsa[lm]);
    }
    }
    }
    }

    … populate those global arrays … ready for user places of interest to trigger …
  • onblur logic that when determining a “.title” attribute, now does

    document.getElementById('setofthree_' + eval(-1 + setofthree) + '_01').title=nearestto(findit[jj].split(',')[eval(4 - indivo.innerHTML.split(',').length)] + ',' + findit[jj].split(',')[eval(3 - indivo.innerHTML.split(',').length)]);

    … and within that new Javascript function …
  • Javascript array sort() method becomes a useful intervention as per

    function nearestto(gset) {
    var iou=0, outset=gset, this_lat=0.0, this_long=0.0, this_diff=-1.0, smallest_diff=-1.0, largest_diff=-1.0, smallest_num=0;
    var sofar=';';
    var things=[];
    if (postcodea.length > 1) {
    this_long=eval(gset.split(' ')[0].split(',')[1]);
    this_lat=eval(gset.split(' ')[0].split(',')[0]);
    for (iou=0; iou<postcodea.length; iou++) {
    this_diff=eval(Math.abs(eval(('' + this_long)) - eval(('' + longa[iou]))) + Math.abs(eval(('' + this_lat)) - eval(('' + lata[iou]))));
    if (this_diff < 20 && this_diff > 0.00001) {
    sofar+='' + iou + '+' + placea[iou] + '+' + longa[iou] + '+' + lata[iou] + '-' + this_diff + ';';
    things.push('' + eval(1000000.0 + eval('' + this_diff)) + ' near to ' + placea[iou] + ',' + postcodea[iou]);
    if (smallest_diff < 0.0 || eval('' + this_diff) < eval('' + smallest_diff)) {
    smallest_diff=this_diff;
    smallest_num=iou;
    }
    if (largest_diff < 0.0 || eval('' + this_diff) > eval('' + largest_diff)) {
    largest_diff=this_diff;
    }
    }
    }
    things.sort();
    outset+=' near to ' + placea[smallest_num] + ',' + postcodea[smallest_num];
    for (iou=0; iou<=15; iou++) {
    if (things.length > iou && outset.indexOf(things[iou].split(' near to ')[1]) == -1) {
    outset+=' and near to ' + things[iou].split(' near to ')[1];
    }
    }
    }
    return outset;
    }

    … which does the job of appending 15 or so nearby Australian Postcode Places to the user entered one and displayed as the user hovers over information

Feel free to try the changed australia_place_crowfly_distances.php‘s live run link.


Previous relevant Australian Postcode Place Distances Map Chart Tutorial is shown below.

Australian Postcode Place Distances Map Chart Tutorial

Australian Postcode Place Distances Map Chart Tutorial

Yesterday’s “where of life” themed Australian Postcode Place Distances Primer Tutorial lacked something … anyone, anyone? … yes, Anaximander … a map … and you’d like to swap my horse for one … well okay, there’s one called Ed out the back … but we digress.

Queue the great Google Charts Map Chart (which can transition very easily to Geo Chart, where “from” to “to” lines are drawn) and which can be called in an HTML iframe element to add that visual interest to our changed australia_place_crowfly_distances.php‘s live run link.

There isn’t anything much better than a map to trip plan, or study geography, in our books … but alas we ran out of pamphlettes today … sorrrrrrryyyyyy.


Previous relevant Australian Postcode Place Distances Primer Tutorial is shown below.

Australian Postcode Place Distances Primer Tutorial

Australian Postcode Place Distances Primer Tutorial

It’s time to return to a “where of life” web application tutorial. Why? No, “where”. Who’s on second. But, seriously, the reason is that we found a great Australian Postcode resource for geodata lookups of these Australian placenames or postcodes … thanks.

Combine this …

  • Australian postcode (or placename) latitude and longitude … with …
  • another Australian postcode (or placename) latitude and longitude … and we can …
  • show the user a great circle distance between the two places … as well as a link to …
  • Google Maps Directions map between the two places … and there you can imagine we have a bit of a …
  • trip planner

… on our hands.

We can add our own client geographical position into the mix via …


function getLocation() {
if (navigator.geolocation) {
try {
navigator.geolocation.getCurrentPosition(showPosition);
setTimeout(later, 2000);
} catch(err) {
setTimeout(later, 2000);
}
} else {
document.getElementById('you').innerHTML='(0,0)';
if (document.getElementById('inlat') && document.getElementById('inlong')) {
document.getElementById('inlat').value=userlatitude;
document.getElementById('inlong').value=userlongitude;
}
if (document.getElementById('ipostcode')) {
document.getElementById('ipostcode').click();
newthree();
}
}
}


function showPosition(position) {
if (userlatitude == 0.0 && userlongitude == 0.0) {
userlatitude=eval('' + position.coords.latitude);
userlongitude=eval('' + position.coords.longitude);
if (document.getElementById('inlat') && document.getElementById('inlong')) {
document.getElementById('inlat').value=userlatitude;
document.getElementById('inlong').value=userlongitude;
}
if (document.getElementById('ipostcode')) {
document.getElementById('ipostcode').click();
newthree();
}
}
}

… that you can see involved in the PHP australia_place_crowfly_distances.php‘s live run link, for your perusal.

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


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


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


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


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


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


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


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


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

Posted in Ajax, eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

PHP File Write Debugging Primer Tutorial

PHP File Write Debugging Primer Tutorial

PHP File Write Debugging Primer Tutorial

Looking at PHPStorm and Xdebug Primer Tutorial below reminds us that PHP can be debugged in that “step through the code” way that is sometimes useful. The work of yesterday’s Australian Postcode Place Images State Precedence Tutorial caused us to think about PHP debugging regarding a scenario …

  • that occurred sporadically (ie. data based issue, or at least our interfacing to that data (“a bad carpenter blames his tools”)) … and presented in one of the most cryptic ways possible (“a programmer’s nightmare”)) …
  • symptom, on these sporadic occasions and running in Safari web browser, its (Develop -> Show Web Inspector) Web Inspector “Console” tab shows (a last) error …

    SyntaxError: Unexpected token ';'           fgc:1

    … before not displaying the Wikipedia images

Optimistic programmers will be thrown by … anyone, anyone? Yes, Gottfried, the “1” is supremely disappointing. A “real” codeline “1” is very unlikely, though can happen as a result of “eval” in Javascript code. (Spoiler alert: can happen in a continuous line of Javascript written out in that fashion by PHP). In our defence, even if we had immediately tweaked to “can happen in a continuous line of Javascript written out in that fashion by PHP” that would not have helped enormously.

But what did we know? We saw a pattern of this error regarding our “fgc” directory index.php PHP calling …

<?php

function relative_to_absolute($inth, $firstonly) {
// lots of code follows
}

?>

… but it resulted in …

  • no Wikipedia images shown but no malfunctioning of the resultant webpage, otherwise … and …
  • calling PHP debugging could not determine for us whether the problem occurred …
    1. within relative_to_absolute function … or …
    2. as a result of the return values as a result of executing relative_to_absolute function

And here’s the thing for today’s relevance. We decided not to involve any third party tools to debug the PHP. We decided to use a “PHP File Write Debugging Approach” a little bit like Javascript debugging can be achieved by “console.log” (or maybe “alert”) messages directed to the user.

Where did we intervene? In and around “fgc” PHP calls of “relative_to_absolute”.

And how did we intervene? Well, here, for the first time we can recall, we wrote a (temporarily used) PHP “debugging” function of the (wrapper to file_put_contents) fashion …

<?php

$dcount=0;

function debugfile_put_contents($infn, $inct) {
global $dcount;
// if you want to leave this function in later after debugging, along with its calling codelines, make this codeline be "return;"
if ($inct == "") {
$dcount=0;
while (file_exists('' . $dcount . '_junk.txt')) {
unlink('' . $dcount . '_junk.txt');
$dcount++;
}
$dcount=0;
file_put_contents('' . $dcount . '_junk.txt', "");
} else {
file_put_contents($infn, $inct);
file_put_contents('' . $dcount . '_junk.txt', $infn . ': ' . $inct);
$dcount++;
}
}

?>

… where up the top of “relative_to_absolute” we’d place

<?php

function relative_to_absolute($inth, $firstonly) {
global $udirname, $latis, $longis, $countryname, $countrycode, $bp, $pbbm, $wikiall, $oneis, $ithree;
debugfile_put_contents("junJUNKket7.txt", "");
// lots more code follows
}

?>

… to “clean the slate”, so to speak, for each call of “relative_to_absolute”, and then at “interest points” codelines like

<?php

$bp="";

function relative_to_absolute($inth, $firstonly) {
global $udirname, $latis, $longis, $countryname, $countrycode, $bp, $pbbm, $wikiall, $oneis, $ithree;
debugfile_put_contents("junJUNKket7.txt", "");
// lots more code follows ... then at that "finally arrived at "interest point" that happened to be at the end of the code of this function, it pans out ...
debugfile_put_contents("junket6p.txt", $outth);
if (!$firstonly) {
debugfile_put_contents("junket6pa.txt", $outth);
if ($bp != "") {
debugfile_put_contents("junket6pb.txt", $outth);
$bp.="\";";
debugfile_put_contents("junket6pc.txt", $bp);
} else {
debugfile_put_contents("junket6pd.txt", $outth);
$bp=" parent.document.getElementById(\"ourcanvas\").setAttribute(\"data-geo\",\"\"); parent.document.getElementById(\"ourcanvas\").style.background=\"\";";
debugfile_put_contents("junket6pe.txt", $outth);
}
debugfile_put_contents("junket6pf.txt", $outth);
$bp=str_replace('";,', ',', $bp);
return $outh;
}
debugfile_put_contents("junket6q.txt", $outth);
}
} catch (Exception $wuy) { }
debugfile_put_contents("junket6r.txt", $outth);
if ($wikiall) { return str_replace("https://", "//", str_replace("//", "//", str_replace("debugfile_put_contents("junket6s.txt", $outth);
return $outth;
}

?>

… the debugging results getting us to add in the “winning new codeline”, as shown above, to solve our dilemma, given our “findings reporting regime” shown (via macOS Terminal) below …


user@Users-MacBook-Air htdocs % ls -lct PHP/fgc/*.* | more
-rw-r--r-- 1 user admin 96697 18 Oct 18:25 PHP/fgc/99_junk.txt
-rw-r--r-- 1 user admin 96682 18 Oct 18:25 PHP/fgc/junket6pf.txt
-rw-r--r-- 1 user admin 321 18 Oct 18:25 PHP/fgc/98_junk.txt
-rw-r--r-- 1 user admin 306 18 Oct 18:25 PHP/fgc/junket6pc.txt
-rw-r--r-- 1 user admin 96697 18 Oct 18:25 PHP/fgc/97_junk.txt
-rw-r--r-- 1 user admin 96682 18 Oct 18:25 PHP/fgc/junket6pb.txt
-rw-r--r-- 1 user admin 96697 18 Oct 18:25 PHP/fgc/96_junk.txt
-rw-r--r-- 1 user admin 96682 18 Oct 18:25 PHP/fgc/junket6pa.txt
-rw-r--r-- 1 user admin 96696 18 Oct 18:25 PHP/fgc/95_junk.txt
-rw-r--r-- 1 user admin 96682 18 Oct 18:25 PHP/fgc/junket6p.txt
-rw-r--r-- 1 user admin 96696 18 Oct 18:25 PHP/fgc/94_junk.txt
-rw-r--r-- 1 user admin 96682 18 Oct 18:25 PHP/fgc/junket6f.txt
-rw-r--r-- 1 user admin 96697 18 Oct 18:25 PHP/fgc/93_junk.txt
-rw-r--r-- 1 user admin 96682 18 Oct 18:25 PHP/fgc/junket6ff.txt
-rw-r--r-- 1 user admin 96696 18 Oct 18:25 PHP/fgc/92_junk.txt
-rw-r--r-- 1 user admin 96682 18 Oct 18:25 PHP/fgc/junket6d.txt
-rw-r--r-- 1 user admin 96696 18 Oct 18:25 PHP/fgc/91_junk.txt
-rw-r--r-- 1 user admin 96682 18 Oct 18:25 PHP/fgc/junket6c.txt
-rw-r--r-- 1 user admin 96696 18 Oct 18:25 PHP/fgc/90_junk.txt
-rw-r--r-- 1 user admin 96682 18 Oct 18:25 PHP/fgc/junket6b.txt
-rw-r--r-- 1 user admin 96696 18 Oct 18:25 PHP/fgc/89_junk.txt
-rw-r--r-- 1 user admin 96682 18 Oct 18:25 PHP/fgc/junket6a.txt
-rw-r--r-- 1 user admin 96695 18 Oct 18:25 PHP/fgc/88_junk.txt
-rw-r--r-- 1 user admin 96682 18 Oct 18:25 PHP/fgc/junket6.txt
-rw-r--r-- 1 user admin 66 18 Oct 18:25 PHP/fgc/87_junk.txt
-rw-r--r-- 1 user admin 52 18 Oct 18:25 PHP/fgc/junket2b.txt
-rw-r--r-- 1 user admin 66 18 Oct 18:25 PHP/fgc/86_junk.txt
-rw-r--r-- 1 user admin 52 18 Oct 18:25 PHP/fgc/junket2a.txt
-rw-r--r-- 1 user admin 96696 18 Oct 18:25 PHP/fgc/85_junk.txt
-rw-r--r-- 1 user admin 96697 18 Oct 18:25 PHP/fgc/84_junk.txt
-rw-r--r-- 1 user admin 96696 18 Oct 18:25 PHP/fgc/83_junk.txt
-rw-r--r-- 1 user admin 96696 18 Oct 18:25 PHP/fgc/82_junk.txt
-rw-r--r-- 1 user admin 96696 18 Oct 18:25 PHP/fgc/81_junk.txt
-rw-r--r-- 1 user admin 96696 18 Oct 18:25 PHP/fgc/80_junk.txt
-rw-r--r-- 1 user admin 96695 18 Oct 18:25 PHP/fgc/79_junk.txt
-rw-r--r-- 1 user admin 66 18 Oct 18:25 PHP/fgc/78_junk.txt
-rw-r--r-- 1 user admin 66 18 Oct 18:25 PHP/fgc/77_junk.txt
-rw-r--r-- 1 user admin 66 18 Oct 18:25 PHP/fgc/76_junk.txt
-rw-r--r-- 1 user admin 96696 18 Oct 18:25 PHP/fgc/75_junk.txt
user@Users-MacBook-Air htdocs % cat PHP/fgc/98_junk.txt
junket6pc.txt: parent.document.getElementById("ourcanvas").setAttribute("data-geo",""); parent.document.getElementById("ourcanvas").style.backgroundPosition="left top,center top,right top,right center";,left top,center top,right top,right center,right bottom,center bottom,left bottom,left center,left top,center top";% user@Users-MacBook-Air htdocs % head -5 PHP/fgc/99_junk.txt
junket6pf.txt: <!DOCTYPE html>
<html class="client-nojs" lang="en" dir="ltr">
<head>
<meta charset="UTF-8"/>
<title>Lawson, New South Wales - Wikipedia</title>

… the gadzooks finding, above, tweaking with us that the PHP, with certain incoming data, could fail with its writing out of the Javascript DOM backgroundPosition code. Aaaaahhh, that all figures!

Cute, huh?!


Previous relevant PHPStorm and Xdebug Primer Tutorial is shown below.

PHPStorm and Xdebug Primer Tutorial

PHPStorm and Xdebug Primer Tutorial

Though with a large variety of scenarios with code, you can debug a piece of code from the command line … and don’t get me wrong because sometimes the command line will be the only way … the experience of debugging is much better if it is combined with work within an IDE.

In this scenario, what about debugging PHP? We’ve been trying out PHPStorm, we talked about at PHPStorm IDE Primer Tutorial, as shown below, overseeing PHP projects and using the Xdebug debugger.

Roughly speaking, what is required here is, via the Xdebug Configuration advice from JetBrains, the inventors of PHPStorm …

  • If Xdebug is not installed, an Xdebug install would be required … and then …
  • PHPStorm Preferences -> Languages and Frameworks -> PHP -> “…” Button gives you both …
    1. Location of relevant php.ini (which you’ll probably change) … and …
    2. Xdebug (or other debugger) existance status (to tell you if you are getting anywhere)
  • Changes to that php.ini (of above) with, in our case, lots of stops and starts of our local MAMP Apache web server (to see those changes right)

Cutting to the chase what we found could work with our php.ini (after dismantling any pre-existing [zend] section blockages (though we didn’t have this)) was …


[xdebug]
zend_extension="/Applications/MAMP/bin/php/php5.4.10/lib/php/extensions/no-debug-non-zts-20100525/xdebug.so"
;zend_extension="/usr/lib/php/extensions/no-debug-non-zts-20121212/xdebug.so"
xdebug.remote_enable=1
xdebug.remote_autostart=1
xdebug.remote_port=9123
xdebug.remote_host="127.0.0.1"
xdebug.remote_handler="dbgp"
xdebug.remote_mode="req"
xdebug.remote_connect_back=0
xdebug.profiler_enable=1
xdebug.profiler_output_dir="/Library/pgAgent/Downloads/ansible-deployment/tmp"

… and we have to thank this link, in particular, among many from the Open Source community, which helped … thanks. Perhaps the most contentious configuration above is xdebug.remote_autostart=1 which can cause extreme slowness on occasions … if that is the way for you you may want to make it xdebug.remote_autostart=0 to not have the connection between Xdebug and PHP be checked so often. And the paths shown were specifically suited only here, we hasten to add … dough doh!

Other traps for young players could be …

  • Start Listening for PHP Debug Connections (Run option) is useful (rather than “Stop” … doh!)
  • Set some breakpoints
  • Break at the First Line of Code (Run option) quite useful
  • The initial connection between PHPStorm and Xdebug may take quite some time, and remember to accept the connection, should a connection window appear

Today’s slideshow offering is warts and all as life is when you cannot be sure what happens next?!


Previous relevant PHPStorm IDE Primer Tutorial is shown below.

PHPStorm IDE Primer Tutorial

PHPStorm IDE Primer Tutorial

Unlike compiled software code, PHP code is often coded simply with the use of a good text editor. That doesn’t mean programmers are not looking for a good PHP IDE if it comes along. Today we are going to talk, for the first time at this blog, about a great IDE to use with PHP based projects. It is called PHPStorm for good reason, as it is jam packed full of functionality and features, such as …

  1. PHP Code Editor
    • PHP 5.3, 5.4, 5.5, 5.6 & 7 support
    • smart code completion
    • syntax highlighting
    • extended code formatting configuration
    • on-the-fly error checking
    • code folding
    • language mixture support
  2. Debugging, Testing and Profiling
    • context-relevant local variables and user-defined watches
    • edit values on the fly
    • remote debugging for your server
    • debug in multiple sessions simultaneously
    • keep debugging session alive while moving between pages
  3. HTML/CSS/JavaScript Editor
    • DOM-based, browser-specific completion
    • live editing preview
    • utilize all the power of Emmet (formerly Zen Coding)
    • JavaScript refactorings available are Rename, Extract Variable/Function, Inline Variable/Function, Move/Copy, Safe Delete, Extract embedded script into file
    • automatic compilation/transpilation of modern web development languages to JavaScript (from CoffeeScript, TypeScript, Dart, etc) or CSS (from Sass, SCSS, Less, Stylus, Compass, etc.)
    • JavaScript debugger
    • auto-fixes for such problems as: missing required attributes, invalid attributes or illegal values, wrong references to files in links, duplicate attributes, invalid CSS selector format, invalid CSS properties, unused CSS class definitions, invalid local anchors
    • Angular 2, TSLint, JSLint/JSHint, Node.js, Flow support
  4. Development Environment
    • version control for Git, Subversion, Mercurial, Perforce, CVS, TFS supported
    • tools and code assistance features for work with database and SQL in your projects
    • analyze schema with UML diagrams
    • track any changes made to your source files, protecting you from any accidental losses or modifications
    • helps developers to understand and change their code by providing editable UML class diagrams for PHP code
    • plugin repository contains 250+ IDE plugins of all kinds
    • Vagrant is a handy tool, allowing you to share a development virtual machine, is natively integrated
    • REST Client is integrated in the IDE
    • SSH Console let you connect to any remote machine and perform various actions via SSH
    • Google App Engine applications for PHP development along with ability to delegate routine deployment tasks to the IDE
    • Composer (dependency manager for PHP) is supported
    • pre-configured command completion for various external command-line tools, including Composer, Symfony console, Zend Framework 2 tool (ZFTool), Zend Framework 1 tool, Drush for Drupal, Tools based on Symfony console (Laravel, Doctrine)
    • ability to use a remote interpreter instead of a local one with PHP based application on real server or a virtualized one created with Vagrant
    • completes and checks standard tags, properties, target names, path attribute values in build files, via Phing
    • same integrated development environment on Windows, Mac OS X and Linux with your single key
    • Docker plugin allows user to add Docker support to existing projects, view logs, manage Docker containers
    • if ToDo list is in an issue/bug tracking system, you can configure PhpStorm to work with the issues without switching from the IDE

… and more features can be read about from the PHPStorm website, by JetBrains. The information above comes from the website.

With today’s slideshow, we take up our introductory look at PHPStorm after the install (onto a MacBook Pro laptop using a local Apache MAMP web server) and download, opening some existant PHP code, as a PHPStorm project, which we then Run (or Execute).

We hope this is food for thought for you, in months not starting with M (because we want to remind you to “beware the ides of March” … boom, boom), using the great PHP language in a more integrated and dynamic environment, to hand coded, text edited PHP.

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


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


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

Posted in eLearning, Operating System, Tutorials | Tagged , , , , , , , , , , , , , , , , , | Leave a comment

Australian Postcode Place Images State Precedence Tutorial

Australian Postcode Place Images State Precedence Tutorial

Australian Postcode Place Images State Precedence Tutorial

One weakness arising from the recent Australian Postcode Place Images Tutorial work is that the Wikipedia search for a Place Name can be confused with other concepts such as Famous People Name (eg. Darwin) which Wikipedia categorizes more fundamentally than the Australian city Place Name. But Wikipedia helps out this situation by its …


[Australian] Place Name, [Australian] State Name

… alternative URL arrangements in such scenarios. And so, we can try looking at both …

  • [Australian] Place Name
  • [Australian] Place Name, [Australian] State Name

… Wikipedia URL arrangements to see which, if existant, contains the string “Coordinates”, which is an indication of Geolocation interest on a Wikipedia webpage. Thanks heaps, Wikipedia!

And so the changed australia_place_crowfly_distances.php‘s live run link works with this issue in mind.

There is another issue we might have more to talk about into the future, as well as here now. If two incarnations of an [Australian] Place Name exist in two different [Australian] State Names you can specify a particular one via user entries such as …


Newtown,NSW

… or …


[Australian] Place Name,[Australian] State Name Abbreviation


Previous relevant Australian Postcode Place Images Tutorial is shown below.

Australian Postcode Place Images Tutorial

Australian Postcode Place Images Tutorial

We think, on top of the work of yesterday’s Australian Postcode Northern Territory Place Tutorial, it would be good to enhance the existant …

Australian place linked to Australian postcode linked to Australian Google Charts Geo Chart user experience

… and, today, add some Wikipedia image possibilities into the mix. How best to approach this idea, given it is an enhancement and not part of the primary workflow thinking? We think, perhaps, turn the webpage’s body element into a “screenful palette” (at least initially) and fill it with background images via the …

  • left top
  • center top
  • right top
  • right center
  • right bottom
  • center bottom
  • left bottom
  • left center

… CSS background-position positioning options as an approach to an attempt to represent an unknown number and order and quality of Wikipedia image data, displayable each time a user enters a placename or postcode that has a Wikipedia entry (that we hope is about that place, though no guarantees here). The new Javascript “function ulit” introduced yesterday is changed for today’s work as per …


var goes=0;

function ulit(ino, inpl) {
var suff='';
if (inpl == inpl.toLowerCase() || inpl == inpl.toUpperCase()) {
var outpl='', outdl='';
var wds=inpl.toLowerCase().split(' ');
for (var inb=0; inb<wds.length; inb++) {
if (wds[inb].length > 2 || outpl.replace('mt','').replace('st','') == '') {
outpl+=outdl + wds[inb].substring(0,1).toUpperCase() + (wds[inb] + ' ').substring(1).trim();
} else if (wds[inb] == 'po') {
outpl+=outdl + wds[inb].toUpperCase();
} else {
outpl+=outdl + wds[inb];
}
outdl=' ';
}
if (ino) { ino.innerHTML=outpl; }
if (document.getElementById('imageson').checked) {
if (('' + document.getElementById('mytable').outerHTML).split('>')[0].indexOf('15') == -1) {
document.getElementById('mytable').style.marginTop='149px';
} else {
document.getElementById('myh1').style.marginLeft='265px';
document.getElementById('myh3').style.marginLeft='265px';
document.getElementById('myh4').style.marginLeft='265px';
}
document.getElementById('sdesc').innerHTML=outpl + ' ';
suff=' ';
document.getElementById('sdesc').style.backgroundColor='white';
document.getElementById('tzi').src=document.getElementById('tzi').src.split('?')[0] + '?tzexact=' + encodeURIComponent(outpl) + '&tznickname=' + encodeURIComponent(outpl.replace(/_/g,' ')) + '&avaJUNKtar=multiply'; // + avatar_at;
} else if (('' + document.getElementById('mytable').outerHTML).indexOf('15') != -1) {
document.getElementById('mytable').style.marginTop='0px';
if (1 == 2) { document.getElementById('sdesc').innerHTML=''; }
} else if (1 == 2) {
document.getElementById('sdesc').innerHTML='';
}
goes++;
if (goes == 2) {
document.getElementById('ourcanvas').style.height='100%';
}

return outpl + suff;
} else {
if (document.getElementById('imageson').checked) {
if (('' + document.getElementById('mytable').outerHTML).split('>')[0].indexOf('15') == -1) {
document.getElementById('mytable').style.marginTop='149px';
} else {
document.getElementById('myh1').style.marginLeft='265px';
document.getElementById('myh3').style.marginLeft='265px';
document.getElementById('myh4').style.marginLeft='265px';
}
document.getElementById('sdesc').innerHTML=inpl + ' ';
suff=' ';
document.getElementById('sdesc').style.backgroundColor='white';
document.getElementById('tzi').src=document.getElementById('tzi').src.split('?')[0] + '?tzexact=' + encodeURIComponent(inpl) + '&tznickname=' + encodeURIComponent(inpl.replace(/_/g,' ')) + '&avaJUNKtar=multiply'; // + avatar_at;
} else if (('' + document.getElementById('mytable').outerHTML).indexOf('15') != -1) {
document.getElementById('mytable').style.marginTop='0px';
if (1 == 2) { document.getElementById('sdesc').innerHTML=''; }
} else if (1 == 2) {
document.getElementById('sdesc').innerHTML='';
}
goes++;
if (goes == 2) {
document.getElementById('ourcanvas').style.height='100%';
}

return inpl + suff;
}
}

… in the changed australia_place_crowfly_distances.php‘s live run link.


Previous relevant Australian Postcode Northern Territory Place Tutorial is shown below.

Australian Postcode Northern Territory Place Tutorial

Australian Postcode Northern Territory Place Tutorial

We had cause to revisit the PHP web application of Australian Postcode Place Modal Backdrop Popup Move Tutorial recently, and we were lucky (in a masochistic sense) to do a test showing an error we hadn’t detected initially, designing it.

That weakness, we had to learn, revolved around Northern Territory places in Australia. Clear thinking may have got us there earlier, but the problem “actually” was that postcodes in the Northern Territory start with “0” (ie. zero) and somewhere down the track in all the code our “mapping” of that postcode lost its leading zero, and so “refeeding” that “non-leading-zero” postcode back into the latitude and longitude lookup, the web application could fail.

But thinking outside the box, if we don’t want to wade through to the “string becomes integer” issue in the code, another fact we can “hang our hat on” is that Australian Postcodes are four characters long, and so the Javascript tweak below also fixed our issues, as per …


document.getElementById(indivo.id.replace('_01','_02')).innerHTML=('0000' + findit[eval(-1 + kk)].split(';')[eval(-1 + findit[eval(-1 + kk)].split(';').length)] + ii).slice(-4);

… in the changed australia_place_crowfly_distances.php‘s live run link.


Previous relevant Australian Postcode Place Modal Backdrop Popup Move Tutorial is shown below.

Australian Postcode Place Modal Backdrop Popup Move Tutorial

Australian Postcode Place Modal Backdrop Popup Move Tutorial

Today’s extension to yesterday’s Australian Postcode Place Modal Backdrop Popup Tutorial predominantly CSS themes is the “prove to ourselves” working of …

  • window.open based Window with that 3rd argument popup positioning used …
  • Window object method moveTo … when that Window URL is …
  • cross-domain

… and me being the optimist that I am thought though our Google Directions URL involved was cross-domain we would be able to harness the cuteness of moveTo so that it could ring around the Modal Backdrop Popup over time.

Alas, no such luck, and guess there are good (web browser) security reasons here.

Instead what we did was …

  • window.open based Window with that 3rd argument popup positioning used …
  • that [last Window object].close() then another window.open based Window with that 3rd argument popup new positioning … for that Window URL that is …
  • cross-domain

Make the scenario not be cross-domain and no worries regarding Window object method moveTo method.

And so, again, feel free to try the changed australia_place_crowfly_distances.php‘s live run link.


Previous relevant Australian Postcode Place Modal Backdrop Popup Tutorial is shown below.

Australian Postcode Place Modal Backdrop Popup Tutorial

Australian Postcode Place Modal Backdrop Popup Tutorial

Yesterday’s Australian Postcode Place Nearby Tutorial had us attending to an “Australian Postcode Nearby” subset of functionality in terms of the event …

  • onmouseover … or “on hover” which programmers out there will know, in “mobile land” is about as useful as a screen door on a submarine … so, today, we attend to some event logic everybody relates to, that being …
  • onclick

… and today, for an aesthetic change, we’re going to show our Google Charts Map Chart interfacing functionality in a Modal Backdrop Popup “window” (ie. not a window as such, but more an HTML nested div that acts like a “modal” (has to be attended to) popup).

Consequently, that Javascript nearestto function changed as per


function nearestto(ogset, gset) {
var iou=0, outset=gset, this_lat=0.0, this_long=0.0, this_diff=-1.0, smallest_diff=-1.0, largest_diff=-1.0, smallest_num=0;
var sofar=';', pa='';
var things=[];
ourarguments='?title=' + encodeURIComponent('Australian Postcode Places Nearby ' + ogset.innerHTML) + '&onclick=y&label=%5b%27Lat%27,&value=%27Lon%27,%20%27Name%27%5d&data=';
if (postcodea.length > 1) {
this_long=eval(gset.split(' ')[0].split(',')[1]);
this_lat=eval(gset.split(' ')[0].split(',')[0]);
for (iou=0; iou<postcodea.length; iou++) {
this_diff=eval(Math.abs(eval(('' + this_long)) - eval(('' + longa[iou]))) + Math.abs(eval(('' + this_lat)) - eval(('' + lata[iou]))));
if (this_diff < 20 && this_diff > 0.00001) {
sofar+='' + iou + '+' + placea[iou] + '+' + longa[iou] + '+' + lata[iou] + '-' + this_diff + ';';
things.push('' + eval(1000000.0 + eval('' + this_diff)) + ' ~' + lata[iou] + '~' + longa[iou] + '~ near to ' + placea[iou] + ',' + postcodea[iou]);
if (smallest_diff < 0.0 || eval('' + this_diff) < eval('' + smallest_diff)) {
smallest_diff=this_diff;
smallest_num=iou;
}
if (largest_diff < 0.0 || eval('' + this_diff) > eval('' + largest_diff)) {
largest_diff=this_diff;
}
} else if (this_diff < 20 && this_diff <= 0.00001) {
ourarguments+=',%20[' + lata[iou] + ',' + longa[iou] + ',~' + encodeURIComponent(placea[iou] + ',' + postcodea[iou]) + '~]';

}
}
things.sort();
outset+=' near to ' + placea[smallest_num] + ',' + postcodea[smallest_num];
ourarguments+=',%20[' + lata[smallest_num] + ',' + longa[smallest_num] + ',~' + encodeURIComponent(placea[smallest_num] + ',' + postcodea[smallest_num]) + '~]';
pa="//www.rjmprogramming.com.au/PHP/Map/map.php" + ourarguments;

for (iou=0; iou<=15; iou++) {
if (things.length > iou && outset.indexOf(things[iou].split(' near to ')[1]) == -1) {
outset+=' and near to ' + things[iou].split(' near to ')[1];
pa+=',%20[' + things[iou].split('~')[1] + ',' + things[iou].split('~')[2] + ',~' + encodeURIComponent(things[iou].split(' near to ')[1]) + '~]';
if (pa.length < 751) { ourarguments='?' + pa.split('?')[1]; }

}
}
// Modal backdrop below ...
if (ogset.innerHTML != '') {
ogset.onclick=function() {
document.getElementById('mypopup').style.display='block';
document.getElementById('mypopup-inner').style.display='block';
if (1 == 1) {
document.getElementById('myiframe').src="//www.rjmprogramming.com.au/PHP/Map/map.php" + ourarguments;
} else {
document.getElementById('mypopup-inner').innerHTML='<a title="Close" id="alertclose" class="popup-close" data-popup-close="popup-alert" onclick=" event.stopPropagation(); document.getElementById(' + "'" + 'mypopup' + "'" + ').style.display=' + "'" + 'none' + "'" + ';" href="#">&#10060;</a><br><iframe onclick=" event.stopPropagation(); " src="//www.rjmprogramming.com.au/PHP/Map/map.php' + ourarguments + '" id=myiframe style="width:500px;height:500px;"></iframe>';
}
};
}

}
return outset;
}

This type of “popup” should not startle the “popup blocker” horses on your modern web browsers!

Once again feel free to try the changed australia_place_crowfly_distances.php‘s live run link.


Previous relevant Australian Postcode Place Nearby Tutorial is shown below.

Australian Postcode Place Nearby Tutorial

Australian Postcode Place Nearby Tutorial

Back in “the where of life” web application wooooooorrrrrllllldd it’s all fine and good to know “crowfly distances” as we did in Australian Postcode Place Distances Map Chart Tutorial but that level of mathematics is not everybody’s cup of tea. Often we just want to know a …

  • nearby
  • place

… and that is all fine and good using that incredible Australian Postcode resource we talked about below.

What broad brush steps were done to arrange this information be displayed hovering over an Australian Postcode Place, in addition to ideas of that previous blog post, and its predecessors?

  • a top priority in all software integration is to first protect whatever already works, and that involved the establishment of a blank ” ” delimitation rule to the “hovering over text” … it used to be latitude,longitude and this is separated by “nearby” information by a space ” ” character delimitation … and in any existing Javascript code it is a simple matter of appending …

    .split(" ")[0]

    … onto any Javascript DOM “.title” usages (as the title attribute is what is displayed when hovering)
  • add global arrays …

    var postcodea=[];
    var placea=[];
    var lata=[];
    var longa=[];

  • at document.body onload event arrange to have …

    function fillcomparray(dataarr) {
    var fldsa, ij, jk, cdelim='', thisplace='', lm=-1, xpc='';
    for (ij=1; ij<dataarr.length; ij++) {
    if ((dataarr[ij] + ' ').substring(0,1) >= '0' && (dataarr[ij] + ' ').substring(0,1) <= '9') {
    fldsa=dataarr[ij].split(',');
    //postcodea.push(fldsa[0]);
    xpc=fldsa[0];
    cdelim='';
    thisplace='';
    lm=-1;
    for (jk=1; jk<fldsa.length; jk++) {
    if ((fldsa[jk] + ' ').substring(0,1) == '-' || ((fldsa[jk] + ' ').substring(0,1) >= '0' && (fldsa[jk] + ' ').substring(0,1) <= '9')) { if (lm < 0) { lm=jk; } }
    if (lm == -1) {
    thisplace+=cdelim + fldsa[jk];
    cdelim=',';
    }
    }
    if (fldsa[lm].match(/^[0-9-.]*$/) && fldsa[eval(1 + eval('' + lm))].match(/^[0-9-.]*$/)) {
    postcodea.push(xpc);
    placea.push(thisplace);
    longa.push(fldsa[lm]);
    lm++;
    lata.push(fldsa[lm]);
    }
    }
    }
    }

    … populate those global arrays … ready for user places of interest to trigger …
  • onblur logic that when determining a “.title” attribute, now does

    document.getElementById('setofthree_' + eval(-1 + setofthree) + '_01').title=nearestto(findit[jj].split(',')[eval(4 - indivo.innerHTML.split(',').length)] + ',' + findit[jj].split(',')[eval(3 - indivo.innerHTML.split(',').length)]);

    … and within that new Javascript function …
  • Javascript array sort() method becomes a useful intervention as per

    function nearestto(gset) {
    var iou=0, outset=gset, this_lat=0.0, this_long=0.0, this_diff=-1.0, smallest_diff=-1.0, largest_diff=-1.0, smallest_num=0;
    var sofar=';';
    var things=[];
    if (postcodea.length > 1) {
    this_long=eval(gset.split(' ')[0].split(',')[1]);
    this_lat=eval(gset.split(' ')[0].split(',')[0]);
    for (iou=0; iou<postcodea.length; iou++) {
    this_diff=eval(Math.abs(eval(('' + this_long)) - eval(('' + longa[iou]))) + Math.abs(eval(('' + this_lat)) - eval(('' + lata[iou]))));
    if (this_diff < 20 && this_diff > 0.00001) {
    sofar+='' + iou + '+' + placea[iou] + '+' + longa[iou] + '+' + lata[iou] + '-' + this_diff + ';';
    things.push('' + eval(1000000.0 + eval('' + this_diff)) + ' near to ' + placea[iou] + ',' + postcodea[iou]);
    if (smallest_diff < 0.0 || eval('' + this_diff) < eval('' + smallest_diff)) {
    smallest_diff=this_diff;
    smallest_num=iou;
    }
    if (largest_diff < 0.0 || eval('' + this_diff) > eval('' + largest_diff)) {
    largest_diff=this_diff;
    }
    }
    }
    things.sort();
    outset+=' near to ' + placea[smallest_num] + ',' + postcodea[smallest_num];
    for (iou=0; iou<=15; iou++) {
    if (things.length > iou && outset.indexOf(things[iou].split(' near to ')[1]) == -1) {
    outset+=' and near to ' + things[iou].split(' near to ')[1];
    }
    }
    }
    return outset;
    }

    … which does the job of appending 15 or so nearby Australian Postcode Places to the user entered one and displayed as the user hovers over information

Feel free to try the changed australia_place_crowfly_distances.php‘s live run link.


Previous relevant Australian Postcode Place Distances Map Chart Tutorial is shown below.

Australian Postcode Place Distances Map Chart Tutorial

Australian Postcode Place Distances Map Chart Tutorial

Yesterday’s “where of life” themed Australian Postcode Place Distances Primer Tutorial lacked something … anyone, anyone? … yes, Anaximander … a map … and you’d like to swap my horse for one … well okay, there’s one called Ed out the back … but we digress.

Queue the great Google Charts Map Chart (which can transition very easily to Geo Chart, where “from” to “to” lines are drawn) and which can be called in an HTML iframe element to add that visual interest to our changed australia_place_crowfly_distances.php‘s live run link.

There isn’t anything much better than a map to trip plan, or study geography, in our books … but alas we ran out of pamphlettes today … sorrrrrrryyyyyy.


Previous relevant Australian Postcode Place Distances Primer Tutorial is shown below.

Australian Postcode Place Distances Primer Tutorial

Australian Postcode Place Distances Primer Tutorial

It’s time to return to a “where of life” web application tutorial. Why? No, “where”. Who’s on second. But, seriously, the reason is that we found a great Australian Postcode resource for geodata lookups of these Australian placenames or postcodes … thanks.

Combine this …

  • Australian postcode (or placename) latitude and longitude … with …
  • another Australian postcode (or placename) latitude and longitude … and we can …
  • show the user a great circle distance between the two places … as well as a link to …
  • Google Maps Directions map between the two places … and there you can imagine we have a bit of a …
  • trip planner

… on our hands.

We can add our own client geographical position into the mix via …


function getLocation() {
if (navigator.geolocation) {
try {
navigator.geolocation.getCurrentPosition(showPosition);
setTimeout(later, 2000);
} catch(err) {
setTimeout(later, 2000);
}
} else {
document.getElementById('you').innerHTML='(0,0)';
if (document.getElementById('inlat') && document.getElementById('inlong')) {
document.getElementById('inlat').value=userlatitude;
document.getElementById('inlong').value=userlongitude;
}
if (document.getElementById('ipostcode')) {
document.getElementById('ipostcode').click();
newthree();
}
}
}


function showPosition(position) {
if (userlatitude == 0.0 && userlongitude == 0.0) {
userlatitude=eval('' + position.coords.latitude);
userlongitude=eval('' + position.coords.longitude);
if (document.getElementById('inlat') && document.getElementById('inlong')) {
document.getElementById('inlat').value=userlatitude;
document.getElementById('inlong').value=userlongitude;
}
if (document.getElementById('ipostcode')) {
document.getElementById('ipostcode').click();
newthree();
}
}
}

… that you can see involved in the PHP australia_place_crowfly_distances.php‘s live run link, for your perusal.

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


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


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


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


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


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


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


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

Posted in Ajax, eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

Google Translate Landing Page Translate Updated List Tutorial

Google Translate Landing Page Translate Updated List Tutorial

Google Translate Landing Page Translate Updated List Tutorial

Yesterday’s Google Translate Landing Page Translate Update Tutorial left off with …

It’s the start that does not ingrain the webpage HTML to any great permanence, and that is for another “PHP involvement” day.

… and that new day is upon us. Whenever you combine …

  • PHP writing public HTML webpage data … with …
  • a user interface (and we’d really only like that “user set” to be an administrator of this blog)

… it’s a potential data security issue you are opening up, and yet, we do want to involve some automation of webpage code here for something that can be ascertained. So let’s try to protect ourselves (to some degree) regarding the PHP below …

<?php

if (isset($_POST['langih']) && strpos(strtolower('' . $_SERVER['HTTP_REFERER']), "rjmprogramming.com.au/about_us.html") !== false) {
$prefis="./";
$ftf=["index.htm","index.html","indexmobile.html","About_Us.html","Contact_Us.html","Guestbook.html","Link.html","Links.html","Services.html","Welcome.html","News.html","Welcome.htm","Welcomeslideshow.htm","Welcomeslideshow.html","slideshow.html"];
$lih=str_replace("+", " ", urldecode($_POST['langih']));
if (strpos("~" . strtolower($lih), "~<option") !== false) {
if (strpos(strtolower($lih) . "~", "</option>~") !== false) {
if (strpos($lih, ">Blog Language") !== false) {



for ($i=0; $i<sizeof($ftf); $i++) {
if (file_exists($prefis . $ftf[$i])) {
$cont=file_get_contents($prefis . $ftf[$i]);
if (strpos($cont, ">Blog Language") !== false) {
if (strpos(str_replace("<option","",str_replace("</option>","",strtolower($lih))), "<") === false) {
if (strlen(explode("</select>", explode(">Blog Language", $lih)[1])[0]) > strlen($wasis)) {
if (sizeof(explode(">",explode("</select>", explode(">Blog Language", $lih)[1])[0])) >= sizeof(explode(">",$wasis))) {

file_put_contents($prefis . $ftf[$i] . "_spare", $cont);
$wasis=explode("</select>", explode(">Blog Language", $cont)[1])[0];
$contnew=str_replace($wasis, explode("</select>", explode(">Blog Language", $lih)[1])[0], $cont);
file_put_contents($prefis . $ftf[$i], $contnew);
}
}
}
}
}
}


}
}
}

}
exit;

?>

… restricting calling URLs and some of the look and size and content of the posted data, and working with the “About Us” webpage “place” to automate, the idea of choosing “English” from the “Blog Language” dropdown, as per the changed Javascript and Ajax “way in”


function ChangeLcodeNow(){
var val = document.getElementById('language');
if (val.value.length != 0 && val.value.indexOf('en') == (0 - 1)) {
var pprefix = val[val.selectedIndex].id;
var dd=new Date();
window.open('//www-rjmprogramming-com-au.translate.goog/ITblog/' + dd.getFullYear() + '/' + ('0' + eval(1 + eval('' + dd.getMonth()))).slice(-2) + '/' + ('0' + eval(0 + eval('' + dd.getDate()))).slice(-2) + '/?_x_tr_sl=en&_x_tr_hl=en-GB&_x_tr_pto=nui&_x_tr_tl=' + val.value, '_blank');
} else if (val.value.length != 0 && val.value.indexOf('en') != (0 - 1)) {
if (ajaxitp) { ajaxitp(); }
}

}

function ajaxitp() {
var xurl = './getme.php';
var formis = new FormData();
myxhr = new XMLHttpRequest();
if (myxhr) {
formis.append('langih', document.getElementById('language').innerHTML);
myxhr.open('POST', xurl); //, true);
myxhr.send(formis);
}
}


Previous relevant Google Translate Landing Page Translate Update Tutorial is shown below.

Google Translate Landing Page Translate Update Tutorial

Google Translate Landing Page Translate Update Tutorial

The recent Google Translate Landing Page Translate Tutorial

… and so, we are here today, with our start to remedies for this (Javascript DOM, via Ajax, change below) …


var myxhr=null;

function backin() {


if (myxhr.readyState == 4) {
if (myxhr.status == 200) {
if (myxhr.responseText) {
if (document.getElementById('language')) {
//alert(myxhr.responseText);
var mhs=myxhr.responseText.replace(/\<\/code\>\<\/td\>/g,'<>').split('><code translate="no" dir="ltr">');
if (mhs.length > 1) {
var thiscodeis='', thisdescis='';
var wasih=document.getElementById('language').innerHTML;
var outih=wasih.split('</option>')[0] + '</option>';
var origih=wasih.replace(outih, '');
for (var iuh=1; iuh<mhs.length; iuh++) {
thisdescis=mhs[eval(-1 + iuh)].split('<td>')[eval(-1 + mhs[eval(-1 + iuh)].split('<td>').length)];
//console.log('first thisdescis=' + thisdescis + ' and mhs[eval(-1 + iuh)]=' + mhs[eval(-1 + iuh)].slice(-200));
thisdescis=thisdescis.split('<')[0];
thiscodeis=mhs[iuh].split('<')[0].split('(')[0].trim();
//console.log('thiscodeis=' + thiscodeis + ' and thisdescis=' + thisdescis + ' and mhs[eval(-1 + iuh)]=' + mhs[eval(-1 + iuh)].slice(-200));
if (wasih.toLowerCase().indexOf(' value="' + thiscodeis.toLowerCase() + '"') == -1 && wasih.toLowerCase().indexOf(thisdescis.toLowerCase()) == -1) {
outih+='<option value="' + thiscodeis + '">' + thisdescis + ' &#10024;</OPTION>';
} else {
outih+='<option value="' + thiscodeis + '">' + thisdescis + '</OPTION>';
}
}
if (outih.indexOf('/OPTION') != -1 && origih.toLowerCase() != outih.toLowerCase()) {
document.getElementById('language').innerHTML=outih.replace('</option>', ' &#10024;</OPTION>');
document.getElementById('language').style.maxWidth='150px';
}
}
}
}
}
}
}

function ajaxit() {
var xurl = '//cloud.google.com/translate/docs/languages';
//alert(1);
myxhr = new XMLHttpRequest();
if (myxhr) {
//alert(2);
myxhr.onreadystatechange = backin;
myxhr.open('GET', 'getme.php?getme=' + encodeURIComponent(xurl), true);
myxhr.send(null);
}
}

function refreshl() {
if (document.getElementById('language')) {
ajaxit();
}
}

setTimeout(refreshl, 5000);

It’s the start that does not ingrain the webpage HTML to any great permanence, and that is for another “PHP involvement” day.


Previous relevant Google Translate Landing Page Translate Tutorial is shown below.

Google Translate Landing Page Translate Tutorial

Google Translate Landing Page Translate Tutorial

Yesterday’s …

  • Google Translate Webpage Translate Tutorial was the major part of RJM Programming’s Google Translate strategy change (ie. getting it working again … doh!) … but it’s not the whole story … and another part is …
  • today we extend that strategy to change the RJM Programming Landing Page Google Translate interfacing to change from a “Landing Page content” strategy to a “Navigate to WordPress Blog” strategy (feeding into yesterday’s thinking), our justification being that the better content of the RJM Programming domain sits within the WordPress Blog we support and maintain

… so there, ngarrrrgh!

But (growing up quickly) we see a better arrangement here, just adding the prefix “Blog” onto the old (just) “Language” labelled dropdown to modify the “new “Blog Language” (to end up with HTML snippet <option value=””>Blog Language</option>) dropdown’s Javascript “onchange” event logic …


// To ...
function ChangeLcodeNow(){
//<![CDATA[
var val = document.getElementById('language');
if (val.value.length != 0 && val.value.indexOf('en') == (0 - 1)) {
var pprefix = val[val.selectedIndex].id;
var dd=new Date();
window.open('//www-rjmprogramming-com-au.translate.goog/ITblog/' + dd.getFullYear() + '/' + ('0' + eval(1 + eval('' + dd.getMonth()))).slice(-2) + '/' + ('0' + eval(0 + eval('' + dd.getDate()))).slice(-2) + '/?_x_tr_sl=en&_x_tr_hl=en-GB&_x_tr_pto=nui&_x_tr_tl=' + val.value, '_blank');
}
//]]>
}


// ... From ...
function olderChangeLcodeNow(){
//<![CDATA[
var val = document.getElementById('language');
if (val.value.length != 0 && val.value.indexOf('en') == (0 - 1)) {
var pprefix = val[val.selectedIndex].id;
windowopen('//translate.google.com/translate?sl=en&js=n&prev=_t&hl=en&ie=UTF-8&layout=2&eotf=1&u=HTTP%3A%2F%2Fwww.rjmprogramming.com.au%2Findex.html&tl=' + val.value, '_blank');
}
//]]>
}

Again, not too onerous!


Previous relevant Google Translate Webpage Translate Tutorial is shown below.

Google Translate Webpage Translate Tutorial

Google Translate Webpage Translate Tutorial

We really like the way Google Translate can language translate whole webpages for URLs of choice, sometimes. We use it here at this blog, but sometime into the past … we cannot recall (sorrrrrryyyyyyyyy!) … the arrangements of use of this great functionality changed, and today we want to go over what we did for this blog to fix some of this interfacing.

It was in good ol’ WordPress TwentyTen theme’s header.php we made the change to facilitate this “reconnection” to this great functionality …

<?php

function ChangeLcodeNow(){
var val = document.getElementById('language');
//alert(val.value);
if (val.value.length != 0 && val.value.indexOf('en') == (0 - 1)) {
//alert(val.value);
var pprefix = val[val.selectedIndex].id;
<?php
$p316 = "316";
$pprefix = "";
if (strpos($_SERVER['QUERY_STRING'], "p=0") !== false) {
$pprefix = "";
} else {
if (isset($_GET['p'])) {
if (strpos($_GET['p'], "304") !== false) {
$p316 = "316";
} else {
$p316 = $_GET['p'];
}
}

$isiPad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad');
if ($isiPad === false) {
$isiPad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPhone');
}
if ($isiPad === false) {
$isiPad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'Android');
}

if (1 == 1) { // _x_tr_sl=en&_x_tr_tl=de&_x_tr_hl=en-GB&_x_tr_pto=nui
echo " window.open('//www-rjmprogramming-com-au.translate.goog/ITblog?p=' + pprefix + '&_x_tr_sl=en&_x_tr_hl=en-GB&_x_tr_pto=nui&_x_tr_tl=' + val.value, '_top'); " . "\n";
} else {

if ($isiPad) {
//echo " window.open('//translate.google.com/translate?sl=en&js=n&prev=_t&hl=en&ie=UTF-8&layout=2&eotf=1&u=HTTP%3A%2F%2Fwww.rjmprogramming.com.au%2Fwordpress%2F%3Fp%3D' + pprefix + '".$p316."&tl=' + val.value, '_top'); " . "\n";
echo " window.open('//translate.google.com/translate?sl=en&js=n&prev=_t&hl=en&ie=UTF-8&layout=2&eotf=1&u=HTTP%3A%2F%2Fwww.rjmprogramming.com.au%2Fwordpress%2F%3Fp%3D' + pprefix + '".$p316."&tl=' + val.value, '_top'); " . "\n";
} else {
//echo "window.location.href = '//translate.google.com/translate?sl=en&js=n&prev=_t&hl=en&ie=UTF-8&layout=2&eotf=1&u=HTTP%3A%2F%2Fwww.rjmprogramming.com.au%2Fwordpress%2F%3Fp%3D' + pprefix + '".$p316."&tl=' + val.value; " . "\n";
echo "window.location.href = '//translate.google.com/translate?sl=en&js=n&prev=_t&hl=en&ie=UTF-8&layout=2&eotf=1&u=HTTP%3A%2F%2Fwww.rjmprogramming.com.au%2Fwordpress%2F%3Fp%3D' + pprefix + '".$p316."&tl=' + val.value; " . "\n";
}
}
}
?>
//window.open('//translate.google.com/translate?sl=en&js=n&prev=_t&hl=en&ie=UTF-8&layout=2&eotf=1&u=HTTP%3A%2F%2Fwww.rjmprogramming.com.au%2Fwordpress&tl=' + val.value, '_blank');
//alert("yes" + val.value);
}
}

?>

Not too bruising!

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


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


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


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

Posted in Ajax, eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , | Leave a comment