Tag Archives: sizing

Canvas via Image Web Share API Personalization Tutorial

Posted on by

Yesterday’s Canvas via Imge Web Share API Tutorial‘s Web Share API (so far, on Safari and Google Chrome web browser(s)) image (via canvas) sharing functionality did not have enough privacy for the user, as far as we were concerned. We’re not going in for some two factor authentication level of privacy here, and so we’ve opted for the use of the word “Personalization” in today’s blog posting title. What we’ve done here is incorporate into the image name (a form of) the IP address of the sender of the image, which the receiver is using (for that extra privacy) as they click the email link, that now involves (a form of) this IP address in its formation. No surprises here, that we’d have to involve our changed PHP helper signature_signature.php “specialist signature PHP helper” more, getting this solution together. And no surprises here, that we’d try to involve the web server’s disk areas outside the scope of its (Apache) Document Root hierarchy. That step, alone, is important to force a curious user, to work their way through an inhouse PHP webpage URL of some sort, in order to extract that … image data in the form of a web server file … to a … public domain webpage image in an HTML img tag where its src attribute is populated via that web server file’s equivalent base64 data URI … <?php echo “<html><body><img title='” . $thename . ” . “‘ src=’data:image/webp;base64,” . base64_encode(file_get_contents(DIRECTORY_SEPARATOR . ‘tmp’ . DIRECTORY_SEPARATOR . $thename . ”)) . “‘></img>” . $therest . “</body></html>”; ?> Am sure you are not surprised that today’s external Javascript web_share_api_test.js Web Share API specialist needed to change … function tctowebp() { var ourcanvc=”; var canvs=[]; if (window.top) { canvs=top.document.getElementsByTagName(‘canvas’); } if (eval(” + canvs.length) == 0 && window.parent) { canvs=parent.document.getElementsByTagName(‘canvas’); } if (eval(” + canvs.length) == 0) { canvs=document.getElementsByTagName(‘canvas’); } if (eval(” + canvs.length) == 0 && window.parent) { canvs=parent.document.getElementsByTagName(‘canvas’); if (eval(” + canvs.length) == 0 && window.top) { canvs=top.document.getElementsByTagName(‘canvas’); } } if (eval(” + canvs.length) > 0) { ourcanvc=canvs[0].toDataURL(‘image/webp’); if (lastcanvc != ‘ ‘) { if (lastcanvc != ourcanvc) { lastcanvc=ourcanvc; canvc=ourcanvc; czhr = new XMLHttpRequest(); czform = new FormData(); czform.append(‘webpit’, canvc); if (newidea.indexOf(‘canvas.webp’) == -1) { // eg. MAMP … http://localhost:8888/signature_signature.php?mycanvasimage=0000__1 czform.append(‘websecurepit’, ” + myipadwsi); } czhr.onreadystatechange=cstateChanged; czhr.open(‘post’, ‘./signature_signature.php’, true); czhr.send(czform); } else { if (document.getElementById(‘shareurl’)) { document.getElementById(‘shareurl’).style.backgroundColor=’#f9f9f9′; } } } lastcanvc=ourcanvc; } return ourcanvc; } … as well, … Continue reading →

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

Canvas via Image Web Share API Tutorial

Posted on by

We’re on the lookout for ways to improve the sharing and collaboration functionality of yesterday’s Images to Canvas No Clicking Form Signature Tutorial‘s “User of Signature” canvas using web application. We’re calling on .. Safari and Google Chrome web browser(s) … for the moment, supporting the … Web Share API … in order to … Fill out email (or other communication idea) attachment links or documents … that … Prepare the message before you, the user, flesh out the message as you send it off to the recipient … a more guaranteed way, these days, because there are more and more ways restrictions may stop you doing similar functionality with a mail server arrangement on your public domain website, where we use the Exim mail server, at the RJM Programming domain. As far as data goes for this, we also call on our changed PHP helper signature_signature.php to create a webp image file for sharing … <?php if (isset($_POST[‘webpit’])) { file_put_contents($_SERVER[‘DOCUMENT_ROOT’] . DIRECTORY_SEPARATOR . ‘canvas.webp’, base64_decode(explode(“;base64,”, str_replace(‘ ‘,’+’,urldecode($_POST[‘webpit’])))[1])); exit; } ?> … as applicable. The modus operandi for this back at today’s changed web_share_api_test.js external Javascript Web Share API specialist, uses Ajax methodologies … var canvc=’ ‘, lastcanvc=’ ‘, czhr=null, czform=null; function cstateChanged() { if (czhr.readyState == 4) { if (czhr.status == 200) { if (1 == 2) { alert(‘Did it’); } if (document.getElementById(‘shareurl’)) { document.getElementById(‘shareurl’).style.backgroundColor=’yellow’; } } } } function tctowebp() { var ourcanvc=”; var canvs=[]; if (window.top) { canvs=top.document.getElementsByTagName(‘canvas’); } if (eval(” + canvs.length) == 0 && window.parent) { canvs=parent.document.getElementsByTagName(‘canvas’); } if (eval(” + canvs.length) == 0) { canvs=document.getElementsByTagName(‘canvas’); } if (eval(” + canvs.length) == 0 && window.parent) { canvs=parent.document.getElementsByTagName(‘canvas’); if (eval(” + canvs.length) == 0 && window.top) { canvs=top.document.getElementsByTagName(‘canvas’); } } if (eval(” + canvs.length) > 0) { ourcanvc=canvs[0].toDataURL(‘image/webp’); if (lastcanvc != ‘ ‘) { if (lastcanvc != ourcanvc) { lastcanvc=ourcanvc; canvc=ourcanvc; czhr = new XMLHttpRequest(); czform = new FormData(); czform.append(‘webpit’, canvc); czhr.onreadystatechange=cstateChanged; czhr.open(‘post’, ‘./signature_signature.php’, true); czhr.send(czform); } else { if (document.getElementById(‘shareurl’)) { document.getElementById(‘shareurl’).style.backgroundColor=’#f9f9f9′; } } } lastcanvc=ourcanvc; } return ourcanvc; } … and set in motion via a couple of different parental calls such as … <script type=’text/javascript’ src=’/web_share_api_test.js?canvasshare=as_necessary9876′ defer></script> … in … our HTML changed user_of_signature_signature.html‘s User of Signature Signature (standalone) live run our HTML changed user_of_signature_signature.html‘s Signature Signature (standalone) live run … for cuter Safari and Google Chrome web browser sharing and collaboration work. Previous relevant Images to Canvas No Clicking Form Signature Tutorial … Continue reading →

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

Images to Canvas No Clicking Form Signature Tutorial

Posted on by

Surprisingly, it’s been more than a year since we changed anything to do with our … canvas based … images and annotation … accepting … scribble (ie. can handle signatures) … perhaps … form filling helping web application … (when we presented Canvas Graphics Editing in Zoomed Webpage Tutorial) and we found that in order to add six more such Annotation option helpers into the mix … Image Input Mode Image Sizing Modus Operandi URL Actual (canvas resized to image) Contain (canvas) Cover (canvas) Browsing Actual (canvas resized to image) Contain (canvas) Cover (canvas) … we only needed to change the external Javascript signature_signature.js code used by our signature use in canvas supervisory web application so that when you can not ask so much of the user regarding image scaling, and avoid any canvas clicking that way, offering these six new annotation functionality options. Previous relevant Canvas Graphics Editing in Zoomed Webpage Tutorial is shown below. Software integration can be useful for a number of reasons … code reuse modularisation of functionality … and in our case … if you like coding via “intervention points” you will enjoy coding for software integration improvements As you might imagine it is easier in terms of the fact you can change “both ends” of the software integration, if it is “inhouse”, and luckily, today, our software integration is “inhouse”. When we presented the recent Keyboard Based Cursor Canvas Content Copy Tutorial it focussed our attention on an improvement we could make to that user_of_signature_signature.htm canvas image editing web application. We wanted to offer the software integration with this web application to be able to successfully handle a webpage that has been zoomed to zoom factor different to 1.0 (or 100%). We noticed before today’s very simple changes to external Javascript signature_signature.js code, graphic positioning on the canvas was wrong when the webpage had a zoom factor that is not 1. Applying the canvas co-ordinate references through “the lens of” Javascript function zmb below … var zzfac=location.search.split(‘zoom=’)[1] ? decodeURIComponent(location.search.split(‘zoom=’)[1].split(‘&’)[0]) : “”; if ((” + location.hash).indexOf(‘zoom=’) != -1) { zzfac=decodeURIComponent((” + location.hash).split(‘zoom=’)[1].split(‘;’)[0]); } function zmb(inco) { if (zzfac != ”) { if (zzfac.indexOf(‘%’) != -1) { return eval(eval(eval(” + inco) / eval(” + zzfac.replace(‘%’, ”))) * 100.0); } else { return eval(eval(” + inco) / eval(” + zzfac)); } } return inco; } … used in the following example code below … topelem.addEventListener(‘mousedown’, function(event) { … Continue reading →

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

Dots and Boxes Game Parameterization Tutorial

Posted on by

We quite like … substitutional approaches to coding interpretive approaches to coding take a hardcoded string and either … parameterize it repurpose it … and with the “Dots and Boxes Game” web application of yesterday’s Dots and Boxes Game Primer Tutorial it’s a case of parameterizing the table … number of “span” cells across (used to be 100) number of “span” cells down (used to be 20) … as per the device width dependant … var xacross=Math.min(100,Math.round(eval(” + screen.width) / 14.40)); //100; var ydown=Math.round(eval(xacross / 5)); //20; … teamed with changes to 100 and 20 and “near to” Javascript code hardcodings changed into forms of “xacross” and “ydown” variables above. And then there is the hardcoding “Score” we wanted to repurpose so as to allow the user control of whether … notifications “say” audio “toast” message box … are persisted with, via “toggling code” as per … var snotifications_on=true; var osay_on=(((” + navigator.platform.toUpperCase()).indexOf(‘MAC’) >= 0) ? true : false); var etoast_on=(navigator.userAgent.match(/Android|BlackBerry|iPhone|iPod|Opera Mini|IEMobile/i) ? true : false); function pse(insc, istoast) { // insc is “Score ” var outsc=insc; if (outsc.indexOf(‘Score’) == 0) { outsc=outsc.replace(‘e’, ‘<a title=”Toggle toast show status ‘ + (” + etoast_on) + ‘” onclick=”etoast_on=!etoast_on; this.title+=String.fromCharCode(32) + etoast_on;” style=”cursor:pointer;text-decoration:none;color:’ + (istoast ? ‘magenta’ : ‘magenta’) + ‘;”>e</a>’); outsc=outsc.replace(‘o’, ‘<a title=”Toggle say try status ‘ + (” + osay_on) + ‘” onclick=”osay_on=!osay_on; this.title+=String.fromCharCode(32) + osay_on;” style=”cursor:pointer;text-decoration:none;color:’ + (istoast ? ‘white’ : ‘purple’) + ‘;”>o</a>’); outsc=outsc.replace(‘S’, ‘<a title=”Toggle notifications try status ‘ + (” + osay_on) + ‘” onclick=”snotifications_on=!snotifications_on; this.title+=String.fromCharCode(32) + snotifications_on;” style=”cursor:pointer;text-decoration:none;color:’ + (istoast ? ‘white’ : ‘blue’) + ‘;”>S</a>’); } return outsc; } … in all of the recent … code changed dots_and_boxes_game.html Dots and Boxes Game you can also try below code changed sos_game.html SOS Game you can also try below code changed word_find_game.html Word Find Game you can also try below Previous relevant Dots and Boxes Game Primer Tutorial is shown below. Today, do you fancy … Morphing a clone … or should that be … Cloning a morph … onto yesterday’s SOS Game Primer Tutorial with our new “Dots and Boxes” game? Yes, that’s it for us today, simply because the “morphed into” is a lot like “the end result”, our new Dots and Boxes Game. After all, both are … online games on a board with span cells containing onclick logic ideally for 2 or more players And as for the onclick logic Javascript logic? … Continue reading →

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