Tag Archives: FileReader

Recently we’ve been trying to add to the flexibility and power of the user using our recent Earth Scanner web application to tailor what it looks like and how it works via settings the user can control. Adding to this work up to yesterday’s Earth Scanner Intranet Feeling Externals Tutorial, today, we’d like to allow the user to control the look of two types of emojis used, they being … the pin emoji for place locations … and … the compass emoji in the middle of a trip leg Emojis, as we’ve said a few times now, are really useful, as that hybrid between text and graphics, for we graphically challenged, and as Internationalization aids, and clarifiers. But how are they defined. Our favourite way, of many, is via … HTML Decimal Entities … in HTML or Javascript code, but you can also use … HTML Hexadecimal Entity … in HTML or Javascript code, or … String.fromCodePoint([HTML Decimal Entity]) … in Javascript code or … CSS (selector) content property value expressed like content:’\000031\0020e3′; … ie. UTF-32 expression(s) The emoji contents, copied, within the CSS content or HTML or Javascript code, as applicable We like to look up the concept at Emojipedia. We … make initial example of Google Search (today, “Bow and Arrow emojipedia”) … leads to link to … get off Emojipedia, in its “Technical Information”, these days, the Codepoint eg. U+1F3F9 … then we just type that into an address bar … to get to a … relevant Google search … and in its list, for the more fundamental emoji arrangements we look for … relevant Fileformat.info web page … where this entity information is laid out for you … used by the Javascript of the Earth Scanner … var thepin=’&#128205;’, thecompass=’&#129517;’; … used, now in code lines like … // Pin … bmeridian+='<span class=place style=”z-index:1675;position:’ + posval + ‘;top:’ + eval(0 + eval(eval(lglat – eval(” + plotlat[iplot])) / eval(lglat – smlat) * eval(screenheight))) + ‘px;left:’ + eval(0 + eval(eval(” + plotlong[iplot]) – smlong) / eval(lglong – smlong) * eval(screenwidth)) + ‘px;” onclick=”event.stopPropagation(); woit(‘ + “‘” + plotplace[iplot].split(‘, ‘)[0] + “‘” + ‘);”>’ + thepin + ‘</span>’; // Compass … bmeridian+='<hr’ + clabit + ‘ onclick=”event.stopPropagation(); canlooknow=false; clearwo(); wo=window.open(‘ + “‘//www.google.com/maps/dir/” + encodeURIComponent(plotplace[eval(thisleg.split(‘.’)[0])]) + ‘/’ + encodeURIComponent(plotplace[eval(thisleg.split(‘.’)[1])]) + “#In a minute we will start moving the map again’,’_blank’,’top=50,left=50,width=1000,height=900′)” + ‘; canlooknow=true; alert(this.title); ” ondblclick=”event.stopPropagation(); canlooknow=false; clearwo(); wo=window.open(‘ + “‘//www.google.com/maps/dir/” + plotlat[eval(thisleg.split(‘.’)[0])] + ‘,’ + plotlong[eval(thisleg.split(‘.’)[0])] + ‘/’ + plotlat[eval(thisleg.split(‘.’)[1])] + ‘,’ + plotlong[eval(thisleg.split(‘.’)[1])] + “#In a minute we will start moving the map again’,’_blank’,’top=50,left=50,width=1000,height=900′)” + ‘; canlooknow=true; alert(this.title); ” title=”‘ + plusbit + ” + plotplace[eval(thisleg.split(‘.’)[0])] + ‘ to ‘ + plotplace[eval(thisleg.split(‘.’)[1])] + ‘ has the crow flying (‘ + gbrgtoset + ‘ degrees setting off at versus on Mercator Projection …) ‘ + eval(eval(brgtoset + 450) % 360) + ‘ degrees for ‘ + eval(gdisttoset / 1000.0) … Continue reading →

Yesterday’s Earth Scanner Externals Tutorial left off with … HTTP://localhost:8888/newstuff.js … and if it had been called http://localhost:8888/newstuff.JS it could have persevered. … as an “Intranet feeling” idea for the styling and scripting that users can get involved with, working with our latest Earth Scanner web application. As you can imagine, to share this, in our case, local MAMP external Javascript, you can’t expect the recipient to necessarily have MAMP installed, let alone have MAMP and have your scripting and/or styling in place with its proper name. And so, to share with collaborators in this scenario, we have to convert the script URL types, as above into inline HTML script elements that will make their way into the location.hash (ie hashtagging) arrangements we’ve got going with our sharing functionalities. So here’s the thing. We perennially battle the “Intranet feeling” restrictions out there, trying HTML iframes and Ajax and PHP curl (via window.open within the Intranet realms) before settling on the non-automated but “user participation possible” idea of using the FileReader API to read the contents of the relevant external script file the user has browsed for (off their local computer system) and selected. It’s contents are held in base64 and we’re using window.atob (via our inhouse tweaked client_browsing.htm Client Browsing FileReader API interfacer) to bring it back from the decoding into the clientside wooooorrrrlllllddd. We warn here, we’ve seen flaky window.atob arrangements, and so we’ll ease into all this, starting with small amounts of scripting for now. This is wise, too, in that we don’t know yet, about the limits, even to hashtagged URLs in “a” link mailto: and sms: URLs. Our coding conduit into it all was a Javascript wrapper function also concerned with “user induced” mixed content issues … function nomc(hashttpmaybe) { var nohttp=hashttpmaybe; var ihp=0, hparts=nohttp.split(‘https://’); for (ihp=1; ihp<hparts.length; ihp++) { if (hparts[ihp].indexOf(‘localhost’) == -1) { nohttp=nohttp.replace(‘https://’ + hparts[ihp], ‘//’ + hparts[ihp]); } else if (hparts[ihp].indexOf(‘.js’) != -1) { if (scrto == ‘youllneverfindthis’) { scrto=’filescript:https://’ + hparts[ihp].split(‘.js’)[0] + ‘.js’; nohttp=nohttp.replace(‘filescript:https://’ + hparts[ihp].split(‘.js’)[0] + ‘.js’, ajaxit(scrto)); } else { scrfrom=’filescript:https://’ + hparts[ihp].split(‘.js’)[0] + ‘.js’; } } else if (hparts[ihp].indexOf(‘.JS’) != -1) { if (scrto == ‘youllneverfindthis’) { scrto=’filescript:https://’ + hparts[ihp].split(‘.JS’)[0] + ‘.JS’; nohttp=nohttp.replace(‘filescript:https://’ + hparts[ihp].split(‘.JS’)[0] + ‘.JS’, ajaxit(scrto)); } else { scrfrom=’filescript:https://’ + hparts[ihp].split(‘.JS’)[0] + ‘.JS’; } } else if (hparts[ihp].indexOf(‘.css’) != -1) { if (styto == ‘youllneverfindthis’) { styto=’filecss:https://’ + hparts[ihp].split(‘.css’)[0] + ‘.css’; nohttp=nohttp.replace(‘filecss:https://’ + hparts[ihp].split(‘.css’)[0] + ‘.css’, ajaxit(styto)); } else { styfrom=’filecss:https://’ + hparts[ihp].split(‘.css’)[0] + ‘.css’; } } else if (hparts[ihp].indexOf(‘.CSS’) != -1) { if (styto == ‘youllneverfindthis’) { styto=’filecss:https://’ + hparts[ihp].split(‘.CSS’)[0] + ‘.CSS’; nohttp=nohttp.replace(‘filecss:https://’ + hparts[ihp].split(‘.CSS’)[0] + ‘.CSS’, ajaxit(styto)); } else { styfrom=’filecss:https://’ + hparts[ihp].split(‘.CSS’)[0] + ‘.CSS’; } } } hparts=nohttp.split(‘HTTPS://’); for (ihp=1; ihp<hparts.length; ihp++) { if (hparts[ihp].indexOf(‘localhost’) == -1) { nohttp=nohttp.replace(‘HTTPS://’ + hparts[ihp], ‘//’ + hparts[ihp]); } else if (hparts[ihp].indexOf(‘.js’) != -1) { if (scrto == ‘youllneverfindthis’) { scrto=’filescript:HTTPS://’ + hparts[ihp].split(‘.js’)[0] + ‘.js’; nohttp=nohttp.replace(‘filescript:HTTPS://’ … Continue reading →