Tag Archives: image

SVG Shapes Collaboration Tidy Up Tutorial

It’s the day further to the recent SVG Shapes Iframe Srcdoc Double Quote Tutorial‘s … Will we be leaving our SVG Show Some Shapes project with a blog posting titled, weirdly, “SVG Shapes Iframe Srcdoc Double Quote Tutorial”? Who’s to know? We’ll see what tomorrow brings?! … worry, when we can finally say … No worries! But, just as with leaf blowing, we’ve just moved the issue onto another “poor sap” of a blog posting with another weird title … “SVG Shapes Collaboration Tidy Up Tutorial” … it having come to pass that this also sounds funny as a final blog posting in a series. So we’re sacking the author! Oh! It’s moi. Let’s explain the issue with a speech bubble (and who doesn’t want to be lectured to by a speech bubble?) … What have we got at our disposal, on our Apache/PHP/MySql Linux web server, as an independent back up for deleting these temporary files? How about … Korn Shell scripting … crontab scheduling … as a great Fred and Ginger style combination, if ever we heard one?! Korn Shell scripting … /etc/init.d/cron_is_working.ksh # had appended to it …# ksh -c ‘for i in `find /tmp -name “existtemporarily*.*” -mmin +122`; do rm -f “$i”; done’# is called every minute by … crontab scheduling … via entry* * * * * /etc/init.d/cron_is_working.ksh … as a sweeperer uperer of the web application moving on too fast to get to its own tidying up … Previous relevant SVG Shapes Iframe Srcdoc Double Quote Tutorial is shown below. It’s tempting to think, for a given scenario, you’ve written code that can satisfy you forever. How about, for a day?! Well, with the recent SVG Shapes Aesthetics Tutorial it may well have ended up “a day” before we noticed an issue. Yes, a step forwards was a step sideways, because something we’d thought was a streamlining had interfered with the audio/video media data inputs via HTML iframe srcdoc means of display. This was caused by us being overcautious. This is what we overcompensated for. We started using Javascript code that went like (the pseudo code) … document.getElementById(‘myiframe’).srcdoc=”[a Javascript string which contains double quotes]”; … and what we “overcompensated” doing, and caused problems for every audio/video media data item was to code like (the pseudo code) … document.getElementById(‘myiframe’).srcdoc=”[a Javascript string which contains double quotes].replace(/\”/g, “\\” + ‘”‘)”; Wrong move! Even though, often, backslash escaping … Continue reading →

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

Javascript Lazy Evaluation Sun Angle Game Tutorial

In this world we all look up at the same … Sun Moon … as our “usual companions” of space. One is tempted to say G’Day but we’re too scared of misspelling it, so we’ll just say … Good Morning Sunshine … to welcome today’s new Geography Quiz game mode … Country Capitals Game In the Hour Game Languages Game In the Timestamp Game Geographicals Game Crow Fly Game Bearing Game … and today we present … Noon Sun Angle Game Yes, astronomers (and many cultures throughout history, before, it should be said) know a lot about the relative positions of the Earth with respect to the Sun (and Moon) especially, and we retrace much of the way we created the PHP Sun Information Software Integration Tutorial. So much so, that we left the Sun’s styling to be expressed just below our draggable “p” element, in a new HTML iframe element, with the following “onload” event logic … function sunangle(iois) { if (iois != null) { var aconto=(iois.contentWindow || iois.contentDocument); if (aconto != null) { if (aconto.document) { aconto = aconto.document; } if (aconto.body != null) { if (iois.src.indexOf(‘longd=’) != -1 && iois.src.indexOf(‘latd=’) != -1) { if (aconto.body.innerHTML.indexOf(‘): (‘) != -1) { sunangleblurb=aconto.body.innerHTML.replace(aconto.body.innerHTML.split(‘): (‘)[1].split(‘)’)[0], ‘?,?’).replace(/\<br\>/g,’ ‘).replace(‘” id=”myh2″‘, ‘margin-top:-40px;” id=”myh2″‘); document.getElementById(‘ddstyle’).innerHTML+='<style> ‘ + aconto.head.innerHTML.split(‘<style>’)[1].split(‘</style>’)[0] + ‘ </style>’; if (1 == 1) { aconto.body.innerHTML=sunangleblurb; document.getElementById(‘isun’).style.display=’inline-block’; } else { document.getElementById(‘source’).innerHTML=sunangleblurb; } } } } } } } … that is tweaked so as not to give the game away, but displays information much as that PHP Sun Angle web application intended. The aim of this Noon Sun Angle Game mode of use, within our Geography Quiz theme, is to drop the draggable label above this Noon Sun Angle (and other) information into the correct of the nine Google Geo Chart country maps below, to score. Further to the recent Javascript Lazy Evaluation Game Sharing Tutorial to make this happen, see our changed gradual_reveal_country_game.html‘s Noon Sun Angle and/or Bearing and/or Crow Fly and/or Geographicals and/or In the Timestamp and/or Languages and/or Country Capital and/or In the Hour Game web application, below too. Did you know? We can navigate using the Sun and stars. Land surveyors lacking two known co-ordinated survey marks can set up on one known survey mark and take measurements of the Sun (careful here not to directly look at the Sun) to determine an initial bearing (or azimuth), and off that swing … Continue reading →

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

Javascript Lazy Evaluation Game Sharing Tutorial

In thinking about a sharing, via email or SMS, component on top of the progress of the recent Javascript Lazy Evaluation Bearing Game Tutorial, with our current … Javascript Lazy Evaluations themed … Drag and Drop themed … Geography Quiz themed … … game modes we thought the best approach would be if a user could share with another the same Geography Quiz based question they have been asked, to compare notes. Which begs the question? What can give a game (or quiz) a random feel? Well, with Javascript, we’re always using … var arandom=Math.floor(Math.random() * anarrayofchoices.length); // anarrayofchoices is an array of choices and arandom ends up as an index into that array’s contents … types of statements … or variations on this style of statement. So we zeroed in on these and set about unrandomising these places in the code, to, if asked, simulate that same random way the question was framed for the emailer … var complex=location.search.split(‘simple=’)[1] ? decodeURIComponent(location.search.split(‘simple=’)[1].split(‘&’)[0]) : ”; var drilldown=complex.split(‘_’)[0]; var simple=location.search.split(‘simple=’)[1] ? (drilldown == ” ? false : true) : false; var mflist=drilldown + ‘_’, mfcount=0; var answer=Math.min(9, eval(Math.floor(Math.random() * 9) + 1)); // first example of use if (complex.indexOf(‘_’ + mfcount + ‘.’) != -1) { answer=eval(complex.split(‘_’ + mfcount + ‘.’)[1].split(‘_’)[0]); } mflist+=” + mfcount + ‘.’ + answer + ‘_’; mfcount++; … used by new helping Javascript code … <div id=das style=display:none;></div> <script type=’text/javascript’> setTimeout(function() { document.getElementById(‘das’).innerHTML+=(“<a style=display:none; id=asms href=’sms:&body=” + encodeURIComponent(document.URL.split(‘#’)[0].split(‘?’)[0] + ‘?simple=’ + encodeURIComponent(mflist)) + “‘>SMS</a>”); document.getElementById(‘bsharesms’).style.visibility=’visible’; }, 18000); setTimeout(function() { document.getElementById(‘das’).innerHTML+=(“<a style=display:none; id=aemail href=’mailto:?subject=Geography%20Quiz&body=” + encodeURIComponent(document.URL.split(‘#’)[0].split(‘?’)[0] + ‘?simple=’ + encodeURIComponent(mflist)) + “‘>Email</a>”); document.getElementById(‘bshareemail’).style.visibility=’visible’; }, 18500); </script> … and will happen for the emailee … function savesms(defsms) { var wasv=(” + window.localStorage.getItem(‘smsgrcg’)).replace(/^null$/g,”).replace(/^undefined$/g,”); if (defsms.indexOf(defsms.trim() + ‘ ‘) == 0) { if (wasv != ”) { window.localStorage.removeItem(‘smsgrcg’); } } else if (defsms.indexOf(defsms.trim() + ‘ ‘) == 0) { if (wasv != ”) { window.localStorage.removeItem(‘smsgrcg’); } window.localStorage.setItem(‘smsgrcg’, defsms.trim()); } else if (defsms == ” && wasv.trim() != ”) { return wasv; } return defsms; } function saveemail(defemail) { var wasv=(” + window.localStorage.getItem(’emailgrcg’)).replace(/^null$/g,”).replace(/^undefined$/g,”); if (defemail.indexOf(defemail.trim() + ‘ ‘) == 0) { if (wasv != ”) { window.localStorage.removeItem(’emailgrcg’); } } else if (defemail.indexOf(defemail.trim() + ‘ ‘) == 0) { if (wasv != ”) { window.localStorage.removeItem(’emailgrcg’); } window.localStorage.setItem(’emailgrcg’, defemail.trim()); } else if (defemail == ” && wasv.trim() != ”) { return wasv; } return defemail; } function smsit() { var smsno=savesms(smsee); if (smsno.trim() != … Continue reading →

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

Javascript Lazy Evaluation Bearing Game Tutorial

Let’s just suppose you’ve got a “hardy crow” (like those in Javascript Lazy Evaluation Crow Fly Game Tutorial) and it doesn’t mind “a bit of chill” on occasions. To minimize the distance it flies to get to a given destination in that shortest distance (or “great circle distance” discussed yesterday) it needs to set out at a particular bearing (or direction) where zero degrees is North and ninety degrees is East and 3 degrees? Glad you asked! With this bearing being able to be calculated … function great_circle_bearing(talis, gnolis, latis, longis) { // Let ‘R’ be the radius of Earth, // ‘L’ be the longitude, // ‘θ’ be latitude, // ‘β‘ be Bearing. // Bearing from point A to B, can be calculated as, // β = atan2(X,Y), // where, X and Y are two quantities and can be calculated as: // X = cos θb * sin ∆L // Y = cos θa * sin θb – sin θa * cos θb * cos ∆L var ourbrg=eval(eval(360.0 + eval(eval(eval(180.0 / Math.PI) * Math.atan2( eval(eval(” + Math.cos(eval(Math.PI / 180.0) * eval(” + latis))) * eval(” + Math.sin(eval(Math.PI / 180.0) * eval(eval(” + longis) – eval(” + gnolis))))), eval(eval(” + Math.cos(eval(Math.PI / 180.0) * eval(” + talis))) * eval(” + Math.sin(eval(Math.PI / 180.0) * eval(” + latis)))) – eval(eval(” + Math.sin(eval(Math.PI / 180.0) * eval(” + talis))) * eval(” + Math.cos(eval(Math.PI / 180.0) * eval(” + latis))) * eval(” + Math.cos(eval(Math.PI / 180.0) * eval(eval(” + longis) – eval(” + gnolis))))) )))) % 360.0); return ” + ourbrg; } … it gave us an idea for a … Javascript Lazy Evaluations themed … Drag and Drop themed … Geography Quiz themed … … game to add to … Country Capitals Game In the Hour Game Languages Game In the Timestamp Game Geographicals Game Crow Fly Game … and today we present … Bearing Game … our games mode list, further to yesterday’s Javascript Lazy Evaluation Crow Fly Game Tutorial. Like yesterday, we think you’ll find this game a challenge! Again, feel free to try out our changed gradual_reveal_country_game.html‘s Bearing and/or Crow Fly and/or Geographicals and/or In the Timestamp and/or Languages and/or Country Capital and/or In the Hour Game web application, below too. Previous relevant Javascript Lazy Evaluation Crow Fly Game Tutorial is shown below. To be a crow on the Mercator Projection is to be the “moron” in oxymoron. Yes, have … Continue reading →

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

Javascript Lazy Evaluation Crow Fly Game Tutorial

To be a crow on the Mercator Projection is to be the “moron” in oxymoron. Yes, have a read of Why is the ‘straight line’ path across continent so curved? Or do they have a “shot of Mercator” and move this way? Well, we’re not asking the class, this time! But those distances of that direct way crows allegedly fly is able to be calculated … function great_circle_distance(talis, gnolis, latis, longis) { var ourdist=0.0; var rgnol=eval((gnolis) * Math.PI / 180.0); var rtal=eval((talis) * Math.PI / 180.0); var rlong=eval((longis) * Math.PI / 180.0); var rlat=eval((latis) * Math.PI / 180.0); var deltalong = Math.abs(eval(((gnolis)-(longis)) * Math.PI / 180.0)); var acof = eval(Math.sin(rtal) * Math.sin(rlat)) + (Math.cos(rtal) * Math.cos(rlat) * Math.cos(deltalong)); // via //en.wikipedia.org/wiki/Great-circle_distance … thanks ourdist = eval(Math.round((Math.acos(acof) * 6371000.0) + 0.00001) * 100) / 100; return ” + ourdist; } … and forms the basis of our latest game … Country Capitals Game In the Hour Game Languages Game In the Timestamp Game Geographicals Game … and today we present … Crow Fly Game … in the … Javascript Lazy Evaluations themed … Drag and Drop themed … Geography Quiz themed … … series, whereby a user is presented with a draggable piece of text such as … 14446.128 kilometers from Mogadishu of Somalia … and the user, to score, is asked to drop this text into the appropriate one of the nine table cells displayed below. We think this is pretty hard, but am sure there are experts out there who can score well in this game mode?! And so, further to yesterday’s Javascript Lazy Evaluation Geographicals Game Tutorial, feel free to try out our changed gradual_reveal_country_game.html‘s Crow Fly and/or Geographicals and/or In the Timestamp and/or Languages and/or Country Capital and/or In the Hour Game web application, below too. Previous relevant Javascript Lazy Evaluation Geographicals Game Tutorial is shown below. Today, we’ve arrived back at our … Javascript Lazy Evaluations themed … Drag and Drop themed … Geography Quiz themed … … blog posting thread we last visited with the recent Javascript Lazy Evaluation Timestamp Game Tutorial. Why? Well, there are more geography quiz ways to allow for an interesting learning experience should world geography be your thaing! Today’s premise for a new option to our last talked about game type list of … Country Capitals Game In the Hour Game … and today we introduce the … Languages Game … Continue reading →

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

Javascript Lazy Evaluation Geographicals Game Tutorial

Today, we’ve arrived back at our … Javascript Lazy Evaluations themed … Drag and Drop themed … Geography Quiz themed … … blog posting thread we last visited with the recent Javascript Lazy Evaluation Timestamp Game Tutorial. Why? Well, there are more geography quiz ways to allow for an interesting learning experience should world geography be your thaing! Today’s premise for a new option to our last talked about game type list of … Country Capitals Game In the Hour Game … and today we introduce the … Languages Game … snapshot of main dropdown functionality choices, today, we add … In the Timestamp Game … is a “Geographicals Game”. In other words, just present a Longitude,Latitude … pairing that falls within one of the Country Google Geo Chart maps presented in one of the nine table cells displayed below. Simple as falling off a log, really. But if you want to make it more challenging for yourself, use a rhythm method to solve a logarithm (ever so small chortle, chortle). These days, online, you are probably used to seeing Geographicals presented as decimal degree Longitude,Latitude or vice versa, but we add a touch of interest by turning those decimal degree Geographicals into entries like … 58°35’00” E , 23°36’00.00″ N … as a notation navigators and aviators and astronomers and surveyors and Wikipedia readers and others would be quite at home with … function aslongfollowslat(inllstr) { var latdir=’ N’, longdir=’ E’; var latd=0, longd=0; var latm=0, longm=0; var lats=0.0, longs=0.0; var latrest=0.0, longrest=0.0; var insg=”; var lls=inllstr.split(‘,’); if (eval(” + lls.length) >= 2) { if (lls[0].indexOf(‘+’) != -1) { lls[0]=lls[0].replace(‘+’,”); } else if (lls[0].indexOf(‘-‘) != -1) { latdir=’ S’; lls[0]=lls[0].replace(‘-‘,”); } latd=lls[0].split(‘.’)[0]; latrest=eval(‘0.’ + (lls[0] + ‘.0’).split(‘.’)[1]); latm=Math.floor(latrest * 60); lats=eval((latrest * 3600) – Math.floor(latm * 60)).toPrecision(3); if (lats >= 60.0) { latm++; lats-=60.0; if (latm >= 60) { latd++; latm-=60; } } if (lls[1].indexOf(‘+’) != -1) { lls[1]=lls[1].replace(‘+’,”); } else if (lls[1].indexOf(‘-‘) != -1) { longdir=’ W’; lls[1]=lls[1].replace(‘-‘,”); } longd=lls[1].split(‘.’)[0]; longrest=eval(‘0.’ + (lls[1] + ‘.0’).split(‘.’)[1]); longm=Math.floor(longrest * 60); longs=eval((longrest * 3600) – Math.floor(longm * 60)).toPrecision(3); if (longs >= 60.0) { longm++; longs-=60.0; if (longm >= 60) { longd++; longm-=60; } } return (” + longd + ‘&#176;’ + (‘0’ + longm).slice(-2) + “‘” + (‘0’ + longs).split(‘.’)[0].slice(-2) + (((” + longs).indexOf(‘.’) != -1) ? (‘.’ + (” + longs).split(‘.’)[1].split(‘00000’)[0]) : ”) + ‘” ‘ + longdir + ‘ … Continue reading →

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

SVG Shapes Iframe Srcdoc Double Quote Tutorial

It’s tempting to think, for a given scenario, you’ve written code that can satisfy you forever. How about, for a day?! Well, with the recent SVG Shapes Aesthetics Tutorial it may well have ended up “a day” before we noticed an issue. Yes, a step forwards was a step sideways, because something we’d thought was a streamlining had interfered with the audio/video media data inputs via HTML iframe srcdoc means of display. This was caused by us being overcautious. This is what we overcompensated for. We started using Javascript code that went like (the pseudo code) … document.getElementById(‘myiframe’).srcdoc=”[a Javascript string which contains double quotes]”; … and what we “overcompensated” doing, and caused problems for every audio/video media data item was to code like (the pseudo code) … document.getElementById(‘myiframe’).srcdoc=”[a Javascript string which contains double quotes].replace(/\”/g, “\\” + ‘”‘)”; Wrong move! Even though, often, backslash escaping is the answer to data delimitation issues, it is not the case for this scenario! We’d not tested this change with enough of the “out there” functionalities we were trying to cater for. Of course, the danger of this increases as a project moves through its phases. And that is why it is good to have a separated testing team on a sizeable project, being your project’s “honest broker”, unafraid to tell you in more polite terms than … You stuffed it! … that … you stuffed it. And as projects go on, if your “honest broker” is only there to report weekly, it might be hard to backtrack and wade through a week of changes to pinpoint the source of the problem. Even a day’s worth of wading made it reasonably difficult for us, but luckily we had an interim (and extra to the usual) backup of the code to help pinpoint this issue. Supposing you leave the double quotes unattended, what happens examining the HTML iframe content? Well, you see the use of HTML entity &quot; used a lot, but no inherent problems despite this, whereas our Javascript replace did much more damage, with audios and videos effectively destroyed by what we’d attempted, above. Which beggars the question … Where do you see HTML entity &quot; used a lot? Well, in a web inspector, opening up the HTML iframe of relevance to view its document.body content, you’ll see these &quot; HTML entities used a lot. See how great are your modern web browser Web … Continue reading →

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

SVG Shapes Aesthetics Tutorial

In a sizeable online web application project, it can be that you “put off” annoyances to follow through on “the main game”, so to speak. But, don’t forget to come back to at least try to fix the annoyances! And so it was with our SVG Shapes project ever since we allowed “shadowing” into the mix, because “shadowing” involved faux SVG element content to the right and bottom not agreeing with the SVG element dimensions defined. Annoying? Yes … very, but still just, “annoying”. We wanted to get the “main game” bedded down first. Also, into the mix, is our trepidation meddling with a “dimensions issue” that involves units that are not “%” nor “vh” nor “vx”. You’ll probably have read a zillion responsive design webpage advice segments telling you to stick with “%” … if only “%” was a dance?! It’s true, though, that if you want happiness across the board, and even to get noticed at all on the search engines, you stand more of a chance designing web content that never mentions a “hard and fast” dimension. Of course, no programmer that’s done anything “involved” can stick to that rule, but those people can use Javascript DOM and its [element].getBoundingClientRect() methodology (or some other approach) to help here, sometimes. However, with SVG work, we find, at least, that you have many “hard and fast” dimensioning situations cropping up. And so, regarding SVG, with this aesthetics only issue, up to today, swimming away in the background of our thinking regarding this annoyance, was that we had not resorted to much “viewBox” attribute … The viewBox attribute defines the position and dimension, in user space, of an SVG viewport. The value of the viewBox attribute is a list of four numbers: min-x, min-y, width and height. The numbers min-x and min-y represent the top left coordinates of the viewport. The numbers width and height represent its dimensions. These numbers, which are separated by whitespace and/or a comma, specify a rectangle in user space which is mapped to the bounds of the viewport established for the associated SVG element (not the browser viewport). … thinking. All this being the case, today, we tried out the idea that the SVG element itself should not be touched in any way shape (tee hee) or form (chortle, chortle) regarding its co-ordinates or dimensions, but that every SVG element defined in our WordPress TwentyTen … Continue reading →

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