Tag Archives: Fortran

Region Picker Geo Chart Image Chart Workflow Tutorial

The day before yesterday’s Geo Chart Region Picker Inhouse Menus Tutorial‘s Geo Chart Region Picker Inhouse Menus Tutorial gave us a “kludgy feeling” when we had to … and so resorted to “Plan B Subsection C” where we brought over “function gmenu” type content and tweaked it … contrasting with, today’s, more satisfyingly integrated document.body “ondblclick” event “function tryit()” logic as a new inhouse menu option … I – Image Chart look up … addition to our Region Picker’s functionalities. The Region Picker, in its standalone mode we’ve been talking about so much lately, wants to have the Geo Chart inhouse web application in lockstep, both as a client and a server with the Region Picker. So where we have, in the “keyboard functionality” in the new … function menuize(rans) { var rdescis=lastplace; var latdeg=-999, longdeg=-999; if (gextras.indexOf(‘ (‘) != -1) { if (gextras.split(‘t to (‘)[1].split(‘)’)[0].indexOf(‘,’) != -1) { latdeg=eval(” + gextras.split(‘t to (‘)[1].split(‘)’)[0].split(‘,’)[0]); longdeg=eval(” + gextras.split(‘t to (‘)[1].split(‘)’)[0].split(‘,’)[1]); } } else if (storedsuffs.indexOf(‘~’ + lpw(lastplace) + ‘`’) != -1 && storedsuffs.indexOf(‘~’ + lpw(lastplace) + ‘`@’) == -1) { gextras=storedsuffs.split(‘~’ + lpw(lastplace) + ‘`’)[1].split(‘@’)[0]; if (gextras.split(‘ (‘)[1].split(‘)’)[0].indexOf(‘,’) != -1) { latdeg=eval(” + gextras.split(‘ (‘)[1].split(‘)’)[0].split(‘,’)[0]); longdeg=eval(” + gextras.split(‘ (‘)[1].split(‘)’)[0].split(‘,’)[1]); } } if ((rans + ‘ ‘).toUpperCase().substring(0,1) == ‘W’) { if (rdescis == ”) { window.open(‘//wikipedia.org’,’_blank’,’top=180,left=400,width=600,height=600′); } else { window.open(‘//wikipedia.org/wiki/’ + encodeURIComponent(rdescis.replace(/\ \(/g,’, ‘).replace(/\)$/g,”)).replace(/\%20/g,’_’),’_blank’,’top=’ + ys + ‘,left=’ + xs + ‘,width=600,height=’ + Math.max(100,eval(-100 + screenheight – ys))); } } else if ((rans + ‘ ‘).toUpperCase().substring(0,1) == ‘I’) { tryit(); } else if ((rans + ‘ ‘).toUpperCase().substring(0,1) == ‘Y’) { if (rdescis == ”) { window.open(‘//www.youtube.com’,’_blank’,’top=180,left=400,width=600,height=600′); } else { window.open(‘//www.rjmprogramming.com.au/HTMLCSS/karaoke_youtube_api.htm?emoji=on&nokaraoke=y&youtubeid=’ + encodeURIComponent(‘ ‘ + rdescis.replace(/\ \(/g,’, ‘).replace(/\)$/g,”)),’_blank’,’top=’ + ys + ‘,left=’ + xs + ‘,width=600,height=’ + Math.max(100,eval(-100 + screenheight – ys))); } } else if ((rans + ‘ ‘).toUpperCase().substring(0,1) == ‘G’) { if (rdescis == ”) { window.open(‘//www.google.com’,’_blank’,’top=180,left=400,width=600,height=600′); } else { window.open(‘//www.google.com/search?q=’ + encodeURIComponent(rdescis.replace(/\ \(/g,’, ‘).replace(/\)$/g,”)) + ‘&tbm=isch’,’_blank’,’top=’ + ys + ‘,left=’ + xs + ‘,width=600,height=’ + Math.max(100,eval(-100 + screenheight – ys))); } } else if ((rans + ‘ ‘).toUpperCase().substring(0,1) == ‘T’) { // && eval((” + document.getElementById(‘myp’).getAttribute(‘data-fc’)).length) == 2) { if (rdescis == ”) { window.open(‘//www.rjmprogramming.com.au/PHP/tz_places.php’,’_blank’,’top=180,left=400,width=600,height=600′); } else { window.open(‘//www.rjmprogramming.com.au/PHP/tz_places.php?iso=’ + (” + lastcode + ‘ ‘).toUpperCase().substring(0,2).trim(),’_blank’,’top=’ + ys + ‘,left=’ + xs + ‘,width=600,height=’ + Math.max(100,eval(-100 + screenheight – ys))); } } else if ((rans + ‘ ‘).toUpperCase().substring(0,1) == ‘A’ && latdeg >= -91 && gextras.indexOf(‘ (‘) != -1) { … Continue reading →

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

Region Picker Geo Chart GeoJson Tutorial

Onto yesterday’s Geo Chart Region Picker Inhouse Menus Tutorial‘s progress, we have a dual step forward, that being … add emojis for Airport 🛩 and Port ⛵ inhouse menu functionality … add a new inhouse menu option to link in with some GeoJson webpage functionality … J – GeoJson look up … to plot a shaded country on a GeoJson based World Map with new onclick logic hosted in an iframe with onload event logic like our Region Picker’s … function ifcheck(ziois) { var sparear=null; var zaconto = (ziois.contentWindow || ziois.contentDocument); //alert(11); var zzaconto=zaconto; if (zaconto != null) { //alert(‘111 ‘ + xiois.src); try { if (zaconto.document) { zaconto = zaconto.document; } //alert(‘1111 ‘ + zaconto.body.innerHTML); if (zaconto.body.innerHTML.indexOf(‘>’) != -1) { if ((document.getElementById(‘placegeo’).title + document.getElementById(‘placegeo’).value).trim() != ”) { var xlatdeg=eval(” + (document.getElementById(‘placegeo’).title + document.getElementById(‘placegeo’).value).split(‘,’)[0]); var xlongdeg=eval(” + (document.getElementById(‘placegeo’).title + document.getElementById(‘placegeo’).value).split(‘,’)[1]); var xif=eval(180 + xlongdeg); var yif=eval(90 + xlatdeg); //alert(” + xif + ‘,’ + yif); var itwo=(” + document.getElementById(‘myp’).getAttribute(‘data-fc’)).toUpperCase(); if (eval(” + itwo.length) == 2) { var ars=zaconto.getElementsByTagName(‘area’); for (var iars=0; iars<ars.length; iars++) { while ((” + ars[iars].getAttribute(‘data-iso2’)) == itwo) { //document.title=” + iars + ‘ … ‘ + (” + ars[iars].getAttribute(‘data-iso2’)); zaconto.getElementsByTagName(‘table’)[0].style.top=’385px’; zaconto.getElementsByTagName(‘table’)[0].style.left=’0px’; if (ars[iars].outerHTML.indexOf(‘ onclick=”‘) != -1) { //itwo=’ ‘; sparear=ars[iars]; document.title+=’ ‘ + ‘zzaconto.’ + ars[iars].outerHTML.split(‘ onclick=”‘)[1].split(‘”‘)[0].trim().substring(0,220); if (9 == 9) { sparear.click(); eval(‘zzaconto.’ + ars[iars].outerHTML.split(‘ onclick=”‘)[1].split(‘”‘)[0].trim().replace(/this\./g,’sparear.’).replace(/this\,/g,’sparear,’)); } else { eval(‘zzaconto.’ + ars[iars].outerHTML.split(‘ onclick=”‘)[1].split(‘”‘)[0].trim().replace(/this\./g,’sparear.’).replace(/this\,/g,’sparear,’)); } } iars++; //itwo=”; } if (sparear) { itwo=”; } } } if (itwo == ”) { zaconto.getElementsByTagName(‘canvas’)[0].dispatchEvent(new Event(“click”, { bubbles: true, // only bubbles and cancelable cancelable: true, // work in the Event constructor clientX: xif, clientY: yif })); if (1 == 2) { if (zaconto.elementsFromPoint) { var elements = zaconto.elementsFromPoint(xif, yif); elements.forEach((elt, i) => { if (i < elements.length – 1) { zaconto.body.dispatchEvent(new Event(“click”, { bubbles: true, // only bubbles and cancelable cancelable: true, // work in the Event constructor clientX: xif, clientY: yif })); } }); } else { zaconto.elementFromPoint(xif, yif).click(); } } } } } } catch(hgjgs) { } } return true; } … in … the changed geo_chart.php Geo Chart interfacer … and … the changed latest draft Region Picker Previous relevant Geo Chart Region Picker Inhouse Menus Tutorial is shown below. In order to do today’s work of incorporating the Region Picker inhouse menu options into the Geo Chart inhouse menu system, we want to lead off with an idea that didn’t seem to work, and we … Continue reading →

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

Geo Chart Region Picker Inhouse Menus Tutorial

In order to do today’s work of incorporating the Region Picker inhouse menu options into the Geo Chart inhouse menu system, we want to lead off with an idea that didn’t seem to work, and we are not sure we are surprised about, regarding … SVG elements do not seem to support the oncontextmenu event Being as we like to look around for independent means by which functionalities can be added with the least effect on any existing functionalities, of course, we were heartbroken, but as we say, not really surprised. And so, we looked at “Plan B”, add an “R” option to the existant Geo Chart inhouse menu system that would make a call of the ilk … window.opener.gmenu(”, ‘Algeria’); … but found no luck there either, and so resorted to “Plan B Subsection C” where we brought over “function gmenu” type content and tweaked it, with help from global data attributes usage, into a Geo Chart suiting “function latergmenu” usage via the “R” choice of the user at the Geo Chart inhouse menu, as per … <?php echo ” function refooc(lfi) { var ourlfi=lfi; var odc=”; lastfooc=”; if (window.top !== window.self) { if (window.top.window.opener) { if (window.top.window.opener.document.URL.indexOf(‘/regions_via_countries.htm’) != -1) { odc=’ data-parentcallis=\” if (1 == 11) { event.stopPropagation(); } window.top.window.opener.gmenu(String.fromCharCode(32).trim(),encodeURIComponent(this.outerHTML.split(otitle)[1].split(ctitle)[0])); \”‘; } } else if (top.document.URL.indexOf(‘/regions_via_countries.htm’) != -1) { odc=’ data-parentcallis=\” if (1 == 11) { event.stopPropagation(); } top.gmenu(String.fromCharCode(32).trim(),encodeURIComponent(this.outerHTML.split(otitle)[1].split(ctitle)[0])); \”‘; } } else if (window.opener) { if (window.opener.document.URL.indexOf(‘/regions_via_countries.htm’) != -1) { odc=’ data-parentcallis=\” if (1 == 11) { event.stopPropagation(); } window.opener.gmenu(String.fromCharCode(32).trim(),encodeURIComponent(this.outerHTML.split(otitle)[1].split(ctitle)[0])); \”‘; } } return odc + ourlfi; } function latergmenu(rdescis,latdeg,longdeg) { //alert(576); // https://www.rjmprogramming.com.au/PHP/GeoChart/geo_chart.php?width=556&height=347&country=Places&popularity=&aregeographicals=y&title=DZ;Algeria%20and%20Ports&shade=Algeria&onclick=y&justmenu=y&label=[%27Lat%27,&value=%27Lon%27|%27Name%27]&data=[28|2|~Algeria~,1],[35.7125|-0.6367|~Nearest%20Port%20on%20geojson.xyz%20ports%20893km%20to%20Oran~,1],[35.9344|0.0713|~Nearest%20Port-%20on%20geojson.xyz%20ports%20901km%20to%20Mostaganem~,1],[35.28|-2.9229|~Nearest%20Port–%20on%20geojson.xyz%20ports%20934km%20to%20Melilla~,1],[36.76|3.06|~Nearest%20Port—%20on%20geojson.xyz%20ports%20979km%20to%20Alger~,1],[-90.0|0.0|~%20~,999999999] var xs=0, ys=0, screenheight=screen.height, ampextra=(location.search.split(‘shade=’)[1] ? ‘&shade=’ + location.search.split(‘shade=’)[1].split(‘&’)[0] : ”); var gextras=’A – Airports Closest to (‘ + latdeg + ‘,’ + longdeg + ‘)’ + String.fromCharCode(10); gextras+=’S – Sun Angle at Noon at (‘ + latdeg + ‘,’ + longdeg + ‘)’ + String.fromCharCode(10); gextras+=’M – Moon Angle at (‘ + latdeg + ‘,’ + longdeg + ‘)’ + String.fromCharCode(10); gextras+=’C – Coriolis Effect at (‘ + latdeg + ‘,’ + longdeg + ‘)’ + String.fromCharCode(10); gextras+=’E – Google Earth at (‘ + latdeg + ‘,’ + longdeg + ‘)’ + String.fromCharCode(10); gextras+=’P – Ports Closest to (‘ + latdeg + ‘,’ + longdeg + ‘)’ + String.fromCharCode(10); gextras+=’O – Geo Chart at (‘ + latdeg + ‘,’ + longdeg + ‘)’ + String.fromCharCode(10); var rans=prompt(‘What do you want to do … Continue reading →

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

Region Picker Geo Chart Emoji Flags Tutorial

Regarding some of those inhouse Geographicals and Regional Menu options in yesterday’s Region Picker Geo Chart Shading Markers Tutorial, namely … TimeZone Airports Ports Geo Chart … we could see that there could be a useful role for emoji flags in the sense that such emoji arrangements add to … impact interest differentiation … especially for Airports and Ports above clarity… especially for Airports and Ports above … into the Geo Chart SVG content via a wrapper arrangement … <?php echo ” shadegs[jcc].setAttribute(‘fill’,dofill(colidea,shadegs[jcc],shadefind,shadeo,shadex,shadey,shadecode)); //’#ffc0cb’); “; ?> … new Javascript function, as below … <?php echo ” function dofill(thecol,theelem,thelookfor,circleel,circlex,circley,circleiso) { var shadeop=’font-size:12px;’; //alert(thecol); var psf=false; if (circleel) { //alert(circleel.outerHTML); if (circleel.outerHTML.indexOf(‘</title>’) != -1) { //alert(circleel.outerHTML + ‘ … ‘ + circleel.outerHTML.split(‘</title>’)[0].split(‘>’)[eval(-1 + circleel.outerHTML.split(‘</title>’)[0].split(‘>’).length)].replace(‘GMT’,’Europe/London’)); if (circleel.outerHTML.split(‘</title>’)[0].split(‘>’)[eval(-1 + circleel.outerHTML.split(‘</title>’)[0].split(‘>’).length)].replace(‘GMT’,’Europe/London’).indexOf(‘/’) != -1) { allowthrough=false; } } } if (eval(” + circleiso.trim().length) == 2 && documentURL.indexOf(‘%20’ + encodeURIComponent(yorflag(circleiso))) != -1) { allowthrough=false; } if (thelookfor.replace(‘GMT’,’Europe/London’).indexOf(‘/’) != -1) { allowthrough=false; } if (allowthrough) { //if (!shadeflag) { alert(” + document.referrer + ‘ ‘ + circleiso); } if (!shadeflag && eval(” + circleiso.trim().length) == 2) { psf=true; //alert(circleiso); //alert(yorflag(circleiso)); circleel.setAttribute(‘id’, ‘one’); // thanks to https://stackoverflow.com/questions/17786618/how-to-use-z-index-in-svg-elements var preccl=1, preuse=”; while (document.getElementById(‘circ’ + preccl)) { preuse+='<use xlink:href=\”#circ’ + preccl + ‘\”/>’; preccl++; } setTimeout(function(){ document.getElementById(‘one’).opacity=’0.0′; document.getElementsByTagName(‘g’)[eval(-1 + document.getElementsByTagName(‘g’).length)].innerHTML+='<text style=’ + shadeop + ‘ x=’ + eval(-6 + eval(” + circlex)) + ‘ y=’ + eval(6 + eval(” + circley)) + ‘>’ + yorflag(circleiso) + ‘</text>’ + preuse + ‘<use xlink:href=\”#one\”/>’; }, 5000); } } if (thecol.replace(‘#’,”).toLowerCase() == ‘5781ae’) { if (psf) { shadeflag=psf; circleel.setAttribute(‘fill’, ‘rgba(87,129,174,0.1)’); // rgba(0,255,0,0.2) } return ‘rgba(87,129,174,0.3)’; } else if (thecol.replace(‘#’,”).toLowerCase() == ’57ae81′) { if (psf) { shadeflag=psf; circleel.setAttribute(‘fill’, ‘rgba(87,174,129,0.1)’); // rgba(0,255,0,0.2) } return ‘rgba(87,174,129,0.3)’; } else if (thecol.replace(‘#’,”).toLowerCase() == ‘ffc0cb’) { if (psf) { shadeflag=psf; circleel.setAttribute(‘fill’, ‘rgba(255,192,203,0.1)’); // rgba(0,255,0,0.2) } return ‘rgba(255,192,203,0.3)’; } else if (thecol.replace(‘#’,”).toLowerCase() == ‘ffcbc0’) { if (psf) { shadeflag=psf; circleel.setAttribute(‘fill’, ‘rgba(255,203,192,0.1)’); // rgba(0,255,0,0.2) } return ‘rgba(255,203,192,0.3)’; } return thecol; } function yorflag(thiscc) { var xlri=’ABCDEFGHIJKLMNOPQRSTUVWXYZ’; var xdri=[‘127462′,’127463′,’127464′,’127465′,’127466′,’127467′,’127468′,’127469′,’127470′,’127471′,’127472′,’127473′,’127474′,’127475′,’127476′,’127477′,’127478′,’127479′,’127480′,’127481′,’127482′,’127483′,’127484′,’127485′,’127486′,’127487′]; var ccsuff=”, ccchar=’ ‘, cde=”; for (var iccsuff=0; iccsuff<thiscc.length; iccsuff++) { ccchar=thiscc.substring(iccsuff, eval(1 + eval(” + iccsuff))).toUpperCase(); ccsuff+=String.fromCodePoint(xdri[eval(” + xlri.indexOf(ccchar))]); //’&#’ + xdri[eval(” + xlri.indexOf(ccchar))] + ‘;’; cde=’.’; } return ccsuff; } “; ?> … where we realized, for the first time, how, with SVG elements, via those [element].setAttribute(‘id’,’newsvgid’) types of statements, we could dynamically bring SVG elements into the DOM document.getElementById([elementID]) world, in … the changed geo_chart.php Geo Chart interfacer … and … … Continue reading →

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

Region Picker Geo Chart Shading Markers Tutorial

With the Region Picker web application of Region Picker Right Click Tutorial we have three Geographicals Mode Menu items that we think are capable of an improved result, via Geo Chart country of interest Colour Coding, they being … Airports Ports Geo Chart … because they all are … Geo Chart “markers” mode (ie. involving geographical latitude and longitude data item) operations … based on a single … Country of interest … and being as the Geo Chart has a “default” mode which shades Countries, we wanted to hybridize a subset of these “markers” mode scenarios, and with these, scour though the SVG circle and path elements to discover the relevant path one which could be given a different “fill” colour attribute, and so introduce some added Colour Coding intelligence … <?php echo ” var shadetitle=”, shadecountdown=0, shadecol=”, shadegs=[], shadecs=[], shadefind=”, shadex=-987654, shadey=-987654, shadepx=[], shadepy=[], shadepstr=”, shadeone=”, shadeps=[]; function whbetter() { var szero=0, wasjcc=0; if (document.URL.indexOf(‘width=’) != -1 && document.URL.indexOf(‘height=’) != -1) { if (document.getElementById(‘abigger’)) { document.getElementById(‘abigger’).style.display=’inline-block’; } if (document.getElementById(‘asmaller’)) { document.getElementById(‘asmaller’).style.display=’inline-block’; } if (‘” . $_GET[‘shade’] . “‘ != ”) { shadefind='” . str_replace(‘+’,’ ‘,urldecode($_GET[‘shade’])) . “‘; shadegs=document.getElementsByTagName(‘path’); shadecs=document.getElementsByTagName(‘circle’); } else if (‘” . $_POST[‘shade’] . “‘ != ”) { shadefind='” . str_replace(‘+’,’ ‘,urldecode($_POST[‘shade’])) . “‘; shadegs=document.getElementsByTagName(‘path’); shadecs=document.getElementsByTagName(‘circle’); } if (shadefind != ”) { //alert(‘shadefind=’ + shadefind + ‘ and sizes are ‘ + shadegs.length + ‘,’ + shadecs.length); //alert(shadegs[eval(-1 + shadegs.length)].outerHTML); //alert(shadecs[0].outerHTML); for (var icc=0; icc<shadecs.length; icc++) { if (shadecs[icc].outerHTML.indexOf(‘<title>’ + shadefind + ‘</title>’) != -1) { shadex=shadecs[icc].outerHTML.split(‘ cx=\”‘)[1].split(‘\”‘)[0]; shadey=shadecs[icc].outerHTML.split(‘ cy=\”‘)[1].split(‘\”‘)[0]; } else if (shadecs[icc].outerHTML.indexOf(‘ (‘ + shadefind + ‘)’) != -1 && (” + shadex) == ‘-987654’) { shadex=shadecs[icc].outerHTML.split(‘ cx=\”‘)[1].split(‘\”‘)[0]; shadey=shadecs[icc].outerHTML.split(‘ cy=\”‘)[1].split(‘\”‘)[0]; if (shadecs[icc].outerHTML.indexOf(‘<title>’) != -1) { shadetitle=shadecs[icc].outerHTML.split(‘<title>’)[1].split(‘</title>’)[0]; } } } // https://www.rjmprogramming.com.au/PHP/GeoChart/geo_chart.php?title=AU;Tasmania%20(Australia)&aregexographicals=y&aregeographicals=&width=500&height=312&onclick=y&country=Places&popularity=&data=%20[-42|147|~Tasmania%20(Australia)~,2] if (shadefind == ‘Australia’ && ‘” . $_GET[‘iso’] . $_POST[‘iso’] . “‘ == ”) { szero=51; if (shadetitle.indexOf(‘Tasmania (‘) != -1) { szero=eval(0 – szero); } } for (var jcc=0; jcc<shadegs.length; jcc++) { if (shadecol.indexOf(‘#’) != -1 && shadefind == ‘Australia’) { shadecol=shadecol.replace(‘#’,”); } else { shadecol=”; } shadeps=shadegs[jcc].outerHTML.split(‘ d=\”‘)[1].split(‘\”‘)[0].replace(/^M/g,”).split(‘M’); for (var jjcc=0; jjcc<shadeps.length; jjcc++) { shadeone=’],[‘ + shadeps[jjcc].replace(/M/g,”).split(‘L’)[0] + ‘]]’; shadepstr='[[‘ + shadeps[jjcc].replace(/L/g,’],[‘).replace(/M/g,”).replace(‘Z’,shadeone); //alert(shadepstr); if (shadepstr.indexOf(‘]]’) != -1) { try { //alert(‘is ‘ + ‘[‘ + shadex + ‘,’ + shadey + ‘] within ‘ + shadepstr); if (pointInPolygon(eval(shadepstr), eval(‘[‘ + shadex + ‘,’ + shadey + ‘]’))) { //alert(‘yay’); shadecol=’#5781AE’; //’#ffc0cb’; wasjcc=jcc; shadegs[jcc].setAttribute(‘fill’,’#5781AE’); //’#ffc0cb’); // https://www.rjmprogramming.com.au/PHP/GeoChart/geo_chart.php?title=AU;Tasmania%20(Australia)&aregexographicals=y&aregeographicals=&width=500&height=312&onclick=y&country=Places&popularity=&data=%20[-42|147|~Tasmania%20(Australia)~,2] //alert(‘Jcc=’ + eval(0 + jcc) + … Continue reading →

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

Region Picker Right Click Tutorial

Meanwhile, back at the Region Picker, feeding into yesterday’s Geo Chart Continent View Tutorial‘s progress … Continent View in Geo Charts progress … we nuance, and along the way, encapsulate “what we have been doing” ad infititum for about two weeks now … add a one step encapsulation of “what we have been doing” recently (which feels to us, like a three step process, each time), via the introduction of a (not before used) Country HTML div element “oncontextmenu” (ie. right click) … function thewholeshebang(ctyo) { selall(); if (document.getElementById(‘myp’)) { document.getElementById(‘myp’).innerHTML=”; } sofar=”; sofardetail=”; remember(); setTimeout(function(){ domc(); }, 3000); return false; } // Right click “oncontextmenu” event logic function … // as if double clicking dropdown (ie. select) top Country option element to highlight all option members // // initialize Javascript variables and relevant “p” element contents // // // as if clicking “Remember” button // delayed click of “Image Chart Map Chart” button // reinforce event.stopPropagation(); view that we want this logic to replace any default “oncontextmenu” right click procedures // End of right click “oncontextmenu” event logic function … Javascript event logic function as to the left above Moving onto those nuanced changes to the Geo Chart “Continent View” (via “World View”), you might recall that … 90% plus of the logic is based on PHP derived TimeZone information) … giving us a Country “version of” Continent (plus “oceans” Arctic, Atlantic, Pacific) minus the North versus South designations for America … and so, as you might imagine, a bit like English is as a language … we nuance for exceptions and try to help users not need to scroll (as much) within the “Continent View” Geo Charts, though they can in a positive longitude and negative latitude sense (from whatever we set up as the default “Continent View” arrangement) … <?php echo ” function worldview(cisomode, ciso) { var thiscont=”, sorn=’0.0′, whbit=”, newwhbit=”, eorw=’0.0′, origcont=”; var cdurl=documentURL; switch (cisomode) { case 0: // get iso no title sc location.href=documentURL.replace(‘title=’, ‘title=’ + ciso + ‘;’); break; case 1: // title sc no iso if (ourtzlist.indexOf(‘,’ + ciso + ‘,’) != -1) { thiscont=ourtzlist.split(‘,’ + ciso + ‘,’)[1].split(‘>’)[1].split(‘<‘)[0].replace(‘GMT’,’Europe/London’).split(‘/’)[0]; origcont=thiscont; sorn=ourtzlist.split(‘,’ + ciso + ‘,’)[0].split(‘ data-geo=’)[eval(-1 + ourtzlist.split(‘,’ + ciso + ‘,’)[0].split(‘ data-geo=’).length)].substring(1).split(‘,’)[0]; eorw=ourtzlist.split(‘,’ + ciso + ‘,’)[0].split(‘ data-geo=’)[eval(-1 + ourtzlist.split(‘,’ + ciso + ‘,’)[0].split(‘ data-geo=’).length)].substring(1).split(‘,’)[1]; if (eval(” + eorw) >= 0 && thiscont == ‘Pacific’) { thiscont=’Australia’; } else if (eval(” … Continue reading →

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

Geo Chart Continent View Tutorial

Further to yesterday’s Region Picker Image Chart Map Chart Legend Tutorial and the previous introduction of an automated toggle option for a “markers” mode World View of the Geo Chart talked about in Geo Chart Zoom Offset Tutorial, today, we wanted to … build on a “markers” mode Geo Chart honed in on a particular Country (and its associated ISO-3166 2 letter Country Code) … and via a “CCW” link … navigate to … World View … and, as of today, as applicable, a … Continent View … to help, further, with “markers” mode context, for users. We changed (where Javascript variable ourtzlist contains PHP derived TimeZone information) … <?php echo ” function worldview(cisomode, ciso) { // Europe // https://www.rjmprogramming.com.au/PHP/GeoChart/geo_chart.php?title=My%20World%20Survey&aregeographicals=y&width=7860.045&height=6875.041&country=Places&popularity=Countdown&data=%20[52.5|0|~London~,99] // Asia or Australia // https://www.rjmprogramming.com.au/PHP/GeoChart/geo_chart.php?title=My%20World%20Survey&aregeographicals=y&width=3930.068&height=6875.041&country=Places&popularity=Countdown&data=%20[35.6764|139.6500|~Tokyo~,99] // North America // https://www.rjmprogramming.com.au/PHP/GeoChart/geo_chart.php?title=My%20World%20Survey&aregeographicals=y&width=2201.001&height=2001.029&country=Places&popularity=Countdown&data=%20[19.4326|-99.1332|~Mexico%20City~,99] // South America // https://www.rjmprogramming.com.au/PHP/GeoChart/geo_chart.php?title=My%20World%20Survey&aregeographicals=y&width=3001.011&height=2801.059&country=Places&popularity=Countdown&data=%20[-12.0464|-77.0428|~Lima~,99] // Africa or Atlantic or Indian // https://www.rjmprogramming.com.au/PHP/GeoChart/geo_chart.php?title=My%20World%20Survey&aregeographicals=y&width=3230.035&height=2737.052&country=Places&popularity=Countdown&data=%20[30.0444|31.2357|~Cairo~,99] // Antarctica or Arctic or Pacific … use World //alert(‘2:’ + cisomode); var thiscont=”, sorn=’0.0′, whbit=”, newwhbit=”; var cdurl=documentURL; switch (cisomode) { case 0: // get iso no title sc location.href=documentURL.replace(‘title=’, ‘title=’ + ciso + ‘;’); break; case 1: // title sc no iso if (ourtzlist.indexOf(‘,’ + ciso + ‘,’) != -1) { thiscont=ourtzlist.split(‘,’ + ciso + ‘,’)[1].split(‘>’)[1].split(‘<‘)[0].replace(‘GMT’,’Europe/London’).split(‘/’)[0]; sorn=ourtzlist.split(‘,’ + ciso + ‘,’)[0].split(‘ data-geo=’)[eval(-1 + ourtzlist.split(‘,’ + ciso + ‘,’)[0].split(‘ data-geo=’).length)].substring(1).split(‘,’)[0]; } //alert(‘1:thiscont=’ + thiscont + ‘ and ciso=’ + ciso + ‘ and sorn=’ + sorn); if (ourtzlist.indexOf(‘,’ + ciso + ‘,’) != -1 && thiscont.replace(‘Arctic’,”).replace(‘Antarctica’,”).replace(‘Pacific’,”) != ”) { whbit=’width=’ + cdurl.split(‘width=’)[1].replace(‘&height=’,’!height=’).split(‘&’)[0].replace(‘!height=’,’&height=’) + ‘&’; newwhbit=whbit; if (thiscont == ‘Europe’) { newwhbit=’width=7860.045&height=6875.041&’; } else if (thiscont == ‘Asia’) { newwhbit=’width=3930.068&height=6875.041&’; } else if (thiscont == ‘Australia’) { newwhbit=’width=3930.068&height=6875.041&’; } else if (thiscont == ‘America’ && (” + sorn).indexOf(‘-‘) == -1) { newwhbit=’width=2201.001&height=2001.029&’; } else if (thiscont == ‘America’ && (” + sorn).indexOf(‘-‘) != -1) { newwhbit=’width=3001.011&height=2801.059&’; } else if (thiscont == ‘Africa’) { newwhbit=’width=3230.035&height=2737.052&’; } else if (thiscont == ‘Atlantic’) { newwhbit=’width=3230.035&height=2737.052&’; } else if (thiscont == ‘Indian’) { newwhbit=’width=3230.035&height=2737.052&’; } if (window.opener && 1 == 7) { //alert(whbit + ‘ vs ‘ + newwhbit + ‘ ‘ + cdurl.replace(whbit, newwhbit).replace(‘title=’ + ciso + encodeURIComponent(‘;’), ‘title=’).replace(‘title=’ + ciso + ‘;’, ‘title=’).replace(‘&’, ‘&iso=’ + ciso + ‘&’)); window.opener.top.window.open(cdurl.replace(whbit, newwhbit).replace(‘title=’ + ciso + encodeURIComponent(‘;’), ‘title=’).replace(‘title=’ + ciso + ‘;’, ‘title=’).replace(‘&’, ‘&iso=’ + ciso + ‘&’),’_blank’); //,’top=10,left=10,width=800,height=800′); } else { window.open(cdurl.replace(whbit, newwhbit).replace(‘title=’ + ciso + encodeURIComponent(‘;’), ‘title=’).replace(‘title=’ + ciso + ‘;’, ‘title=’).replace(‘&’, ‘&iso=’ + ciso + ‘&’),’_blank’,’top=100,left=100,width=800,height=800′); } setTimeout(function(){ … Continue reading →

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

Region Picker Image Chart Map Chart Legend Tutorial

When it comes to … Countries … and their … Regions … we find the use of … Image Chart Map Chart legends … to be a double edged sword in our current Region Picker web application project. Why? Well, the Google Image Chart is based on a limited sized image output format, and legends, full of the wording they can involve, are sometimes an impossible fit. The “lure of the legend”, though, has us interested, and we’ve added … double click on document.body event … all else being well, showing … additional window.open popup window showing a country Image Chart Map Chart of regions, with a legend. Legend! Mostly successful, but occasionally not, was to keep the same regional colour coding … <?php $origchco=”; $origchco=”; $origchdls=”; if (isset($_GET[‘chco’])) { $origchco=$_GET[‘chco’]; if (strpos($origchco, ‘|’) !== false) { $origchdls=str_replace(‘|~’,”,str_replace(‘|’,’,6|’,($origchco . ‘|~’))); } else { $origchdls=urlencode(str_replace(‘|~’,”,str_replace(‘|’,’,6|’, str_replace(‘+’,’ ‘,urldecode($origchco) . ‘|~’)))); } } // used later … if (isset($_GET[‘chco’])) { if ($origchco != ” && $origchdls != ”) { $waschco=explode(‘&’, explode(‘chco=’, $url)[1])[0]; $waschdls=explode(‘&’, explode(‘chdls=’, $url)[1])[0]; $url=str_replace($waschco, $origchco, str_replace($waschdls, $origchdls, $url)); } } ?> … in the image_chart.php code above, as used with other Image Chart Map Chart data shown. Codewise, we needed to change, further to yesterday’s Geo Chart Mobile Zoom Offset Tutorial … to change image_chart.php Google Chart Image Chart Map Chart interfacer … and … to change latest draft Region Picker … to make this happen. Previous relevant Geo Chart Zoom Offset Tutorial is shown below. Even though we use the word “zoom” in today’s tutorial title, what we are really doing in today’s work with the Geo Chart is to offer … way to scale the Geo Chart by specifying a width and height with either of those “W?” or “H?” links … and at the same time now, at least for non-mobile platforms, the user can add in … offsets in width and height the user would normally want to make negative (to create margin-left and margin-top property settings for the HTML div element hosting the Geo Chart div SVG element) so as to “hone in” on detail in just the one area of the Geo Chart (and thereby scale it up) … the inspiration for wanting to offer this being the Dams in the USA web application, where dams can be plotted for individual USA states in the Geo Charts presented. We now also offer a choice of … Continue reading →

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