Tag Archives: line feed

Animated GIF SVG Quiz Automation Interaction Tutorial

Posted on by

Today, we wanted to combine yesterday’s … Animated GIF SVG Quiz Bottom Watermark Argument Tutorial‘s progress … with a backtrack to … Animated GIF Duration Calculation Filter Browsing Tutorial work, which taught us that a Javascript client based solution could determine for us the duration of a passed Animated GIF URL parameter … the reason this being interesting, is that if we send to the “second phase” PHP web application pass which creates the animated GIF … the number of slides … <?php $tvalsn=”-1″; $ttitled=””; if (isset($_GET[‘tvalsn’])) { $tvalsn=(str_replace(“+”,” “,urldecode($_GET[‘tvalsn’]))); $ttitled=”; } if (isset($_POST[‘tvalsn’])) { $tvalsn=(str_replace(“+”,” “,urldecode($_POST[‘tvalsn’]))); $ttitled=”; } ?> an indication of whether there are 2 slides or 3 slides per original SVG+xml based image … a comma separated list of answers … $tvalsa=””; $atitled=””; $detsum=””; $sumdet=””; if (isset($_GET[‘tvalsa’])) { $detsum=”<details><summary>Show …</summary>”; $sumdet=”</details>”; $tvalsa=(str_replace(“+”,” “,urldecode($_GET[‘tvalsa’]))); $atitled='<input type=hidden id=tvalsa name=tvalsa value=”‘ . $tvalsa . ‘”></input>’; } if (isset($_POST[‘tvalsa’])) { $detsum=”<details><summary>Show …</summary>”; $sumdet=”</details>”; $tvalsa=(str_replace(“+”,” “,urldecode($_POST[‘tvalsa’]))); $atitled='<input type=hidden id=tvalsa name=tvalsa value=”‘ . $tvalsa . ‘”></input>’; } ?> … we can use that “animated GIF duration” calculation to know, at any one point, which slide is showing, effectively giving “faux intelligence” enough to our operation, to the extent that we could, then, optionally, interactively ask for user entered answers to the SVG Quiz Questions asked (and keep track of a score for those “quiz interactives” out there). <?php echo ” var totaldur=0.0, sofardur=0.0, setsof=0, eachdur=0.0, totalsno=0, qscore=0, qgoes=0, qsqg=”, tvalsa='” . $tvalsa . “‘, ctvalsn='” . $tvalsn . “‘, tvalsn=” . $tvalsn . “; var amtypingnow=false; function sofard() { sofardur+=0.2; if (eval(” + sofardur) >= eval(” + totaldur) && eval(” + totaldur) > 0.0) { sofardur-=totaldur; } if (document.getElementById(‘mybigag’)) { if (document.getElementById(‘midway’)) { if (document.getElementById(‘midway’).innerHTML.indexOf(‘ … ‘) != -1 && document.getElementById(‘mybigag’).title.indexOf(‘ … ‘) != -1) { var xits=eval(1 + Math.floor(eval(eval(sofardur / totaldur) * totalsno))); if (document.getElementById(‘midway’).innerHTML.indexOf(‘ slide ‘ + xits + ‘/’) == -1) { maybeact(document.getElementById(‘mybigag’)); } } } } } function maybeact(oimg) { if (totaldur > 0.12 && sofardur >= 0 && setsof > 0 && !amtypingnow) { if (eval(” + sofardur) >= eval(” + totaldur) && eval(” + totaldur) > 0.0) { sofardur-=totaldur; } var its=eval(1 + Math.floor(eval(eval(sofardur / totaldur) * totalsno))); var qts=eval(1 + Math.floor(eval(-1 + its) / setsof)); if (eval(its % setsof) == 0) { if (oimg.title.indexOf(‘ … ‘) == -1) { oimg.title+=’ … Answer ‘ + qts + ‘/’ + eval(totalsno / setsof) + ‘ is slide ‘ … Continue reading →

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

Animated GIF SVG Quiz Bottom Watermark Argument Tutorial

Posted on by

Yesterday’s … Animated GIF Bottom Watermark Argument Tutorial … combines with the day before’s … Animated GIF SVG Quiz Argument Tutorial … in our minds, today, to have us considering a new “get” quizdelim URL argument to work it so that an SVG Quiz is formulated via … quizdelim URL argument the SVG based image using a bottom placed Watermark “What is it?” The relevant answer (extracted as above). … versus … delimquiz URL argument What is this? the SVG based image The relevant answer (extracted as above). … for a more streamlined quiz arrangement, involving a bit of PHP argument reorganization … <?php $fivebit=” \$five = 5; \$twentyone = 21; “; $fiveishbit=””; $agtext=””; $titled=””; $delimquiz=’delimquiz’; $wcd=’double click puts watermark near bottom of image rather than top of image’; if (isset($_GET[‘title’])) $agtext=(str_replace(“+”,” “,urldecode($_GET[‘title’]))); if (isset($_POST[‘title’])) $agtext=(str_replace(“+”,” “,urldecode($_POST[‘title’]))); if (isset($_GET[‘stitle’])) $agtext=(str_replace(“+”,” “,urldecode($_GET[‘stitle’]))); if (isset($_POST[‘stitle’])) $agtext=(str_replace(“+”,” “,urldecode($_POST[‘stitle’]))); if (isset($_GET[‘quizdelim’])) { if ($agtext == ”) { $agtext=’What is it?’; } if (!isset($_GET[‘watermarkmode’])) { $_GET[‘watermarkmode’]=’++’; } if (!isset($_GET[‘delimquiz’])) { $delimquiz=’quizdelim’; $_GET[‘delimquiz’]=$_GET[‘quizdelim’]; } $titled=”<input id=titledown name=titledown value=” type=hidden&qt;</input&qt;”; $fivebit=” \$five = (\$old_height – 25); \$twentyone = (\$old_height – 21 + 16); “; $fiveishbit=” \$five = (\$oldish_height – 25); \$twentyone = (\$oldish_height – 21 + 16); “; $wcd=’double click puts watermark near top of image rather than bottom of image’; } if (isset($_POST[‘quizdelim’])) { if ($agtext == ”) { $agtext=’What is it?’; } if (!isset($_POST[‘watermarkmode’])) { $_POST[‘watermarkmode’]=’++’; } if (!isset($_POST[‘delimquiz’])) { $delimquiz=’quizdelim’; $_POST[‘delimquiz’]=$_POST[‘quizdelim’]; } $titled=”<input id=titledown name=titledown value=” type=hidden&qt;</input&qt;”; $fivebit=” \$five = (\$old_height – 25); \$twentyone = (\$old_height – 21 + 16); “; $fiveishbit=” \$five = (\$oldish_height – 25); \$twentyone = (\$oldish_height – 21 + 16); “; $wcd=’double click puts watermark near top of image rather than bottom of image’; } if (isset($_GET[‘dtitle’])) { if (trim($agtext) == ”) { $agtext=(str_replace(“+”,” “,urldecode($_GET[‘dtitle’]))); } $titled=”<input id=titledown name=titledown value=” type=hidden&qt;</input&qt;”; $fivebit=” \$five = (\$old_height – 25); \$twentyone = (\$old_height – 21 + 16); “; $fiveishbit=” \$five = (\$oldish_height – 25); \$twentyone = (\$oldish_height – 21 + 16); “; $wcd=’double click puts watermark near top of image rather than bottom of image’; } if (isset($_POST[‘dtitle’])) { if (trim($agtext) == ”) { $agtext=(str_replace(“+”,” “,urldecode($_POST[‘dtitle’]))); } $titled=”<input id=titledown name=titledown value=” type=hidden&qt;</input&qt;”; $fivebit=” \$five = (\$old_height – 25); \$twentyone = (\$old_height – 21 + 16); “; $fiveishbit=” \$five = (\$oldish_height – 25); \$twentyone = (\$oldish_height – 21 + 16); “; $wcd=’double click puts watermark near top of image rather than bottom of image’; … Continue reading →

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

Animated GIF Bottom Watermark Argument Tutorial

Posted on by

To usefully offer automation ideas for our Animated GIF Creator we need more flexibility regarding how the watermarks are presented. Get good with this, and this automation of Animated GIF creations could be quite productive. And so, in a similar line of thinking to yesterday’s Animated GIF SVG Quiz Argument Tutorial, today, we offer the user one new “get” titledown URL argument to work with a toggling Watermark Positioning arrangement, between the default top way and the new bottom way, with our input type=color Colour Picker we have going for the user to select a Watermark Colour. For the first time ever, we use … input type=color ondblclick event … logic. This event is both harmless regarding any other implications, and useful for toggling logic … <?php echo ” function bottomize(cpalo) { if (document.getElementById(‘dtitled’).innerHTML == ” && cpalo.title.indexOf(‘double click puts watermark near bottom of image rather than top of image’) != -1) { document.getElementById(‘dtitled’).innerHTML='<input id=titledown name=titledown value=\”\” type=hidden></input>’; cpalo.title=cpalo.title.replace(‘double click puts watermark near bottom of image rather than top of image’, ‘double click puts watermark near top of image rather than bottom of image’); } else if (document.getElementById(‘dtitled’).innerHTML != ” && cpalo.title.indexOf(‘double click puts watermark near top of image rather than bottom of image’) != -1) { document.getElementById(‘dtitled’).innerHTML=”; cpalo.title=cpalo.title.replace(‘double click puts watermark near top of image rather than bottom of image’, ‘double click puts watermark near bottom of image rather than top of image’); } } “; ?> … used as we created today’s animated GIF “bottom Watermark” presentation. See how good are HTML div elements for “within an HTML form” Javascript logic, in a changed PHP tutorial_to_animated_gif.php inhouse animated GIF creator web application. Previous relevant Animated GIF SVG Quiz Argument Tutorial is shown below. In line with the URL arguments theme of yesterday’s Animated GIF Creation Automation Arguments Tutorial, today we wanted to try automating the Animated GIF Creator web application to serve as an agent to create a Quiz based on SVG input, as per … https://www.rjmprogramming.com.au/PHP/animegif/tutorial_to_animated_gif.php?delimquiz=answer&irefresh=hTTps://www.rjmprogramming.com.au/HTMLCSS/circle_terminology.html#irefresh=hTTps://[HtmlWebpageWithSVG].html+++++ … involving one new “get” delimquiz URL argument that we default to the value answer. The PHP code goes and looks above the place where it extracts the image information from that HTML circle_terminology.html source for where it mentions where the quiz answer aligned with that image can be found, in our case within a “get” part of a URL preceeded by “&answer=” … <?php echo ” var quizmode=false; var atobis=”; … Continue reading →

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

Animated GIF SVG Quiz Argument Tutorial

Posted on by

In line with the URL arguments theme of yesterday’s Animated GIF Creation Automation Arguments Tutorial, today we wanted to try automating the Animated GIF Creator web application to serve as an agent to create a Quiz based on SVG input, as per … https://www.rjmprogramming.com.au/PHP/animegif/tutorial_to_animated_gif.php?delimquiz=answer&irefresh=hTTps://www.rjmprogramming.com.au/HTMLCSS/circle_terminology.html#irefresh=hTTps://[HtmlWebpageWithSVG].html+++++ … involving one new “get” delimquiz URL argument that we default to the value answer. The PHP code goes and looks above the place where it extracts the image information from that HTML circle_terminology.html source for where it mentions where the quiz answer aligned with that image can be found, in our case within a “get” part of a URL preceeded by “&answer=” … <?php echo ” var quizmode=false; var atobis=”; //alert(‘Tval=’ + tval); if (tval.indexOf(encodeURIComponent(‘data:image/svg+xml’)) != -1) { tvals=tval.split(encodeURIComponent(‘data:image/svg+xml’)); if (blankend != ”) { gtid=’slideshow’ + (” + tid).replace(‘slideshow’,”); addtotothers(); tid=gtid; } thistval=1; if (document.URL.indexOf(‘delimquiz=’) != -1) { // typically &delimquiz=answer if (document.getElementById(‘delay’).value == ’40’) { document.getElementById(‘delay’).value=’800′; } var svgshell=”; if (tvals[1].indexOf(encodeURIComponent(‘;utf8,’)) == 0) { svgshell=tvals[1].split(encodeURIComponent(‘>’))[0] + encodeURIComponent(‘ style=\”font-family:Verdana;font-size:24px;\”></svg>’); } else if (tvals[1].indexOf(encodeURIComponent(‘;base64,’)) == 0) { atobis=window.atob(tvals[1].substring(eval(” + encodeURIComponent(‘;base64,’).length)).split(String.fromCharCode(34))[0].split(String.fromCharCode(39))[0].split(‘)’)[0].split(‘&’)[0].split(‘>’)[0]); svgshell=encodeURIComponent(‘;utf8,’) + encodeURIComponent(atobis.split(encodeURIComponent(‘>’))[0].split(‘>’)[0] + (‘ style=\”font-family:Verdana;font-size:24px;\”></svg>’)); } else { svgshell=encodeURIComponent(‘;utf8,’) + tvals[1].split(encodeURIComponent(‘>’))[0] + encodeURIComponent(‘ style=\”font-family:Verdana;font-size:24px;\”></svg>’); } var dsvgshell=decodeURIComponent(svgshell); var dlq=(decodeURIComponent(document.URL.split(‘delimquiz=’)[1].split(‘&’)[0].split(‘#’)[0].split(‘>’)[0]).replace(/\+/g,’ ‘) + ‘=’).replace(/\=\=$/g, ‘=’); if (dlq.replace(‘=’,”).trim() == ”) { dlq=’answer=’; } if (tvals[0].indexOf(dlq) != -1) { // eg. answer= precursor idea to make into quiz quizmode=true; var sparetvals=tval.split(encodeURIComponent(‘data:image/svg+xml’)); tvals=[”]; for (var iipo=1; iipo<sparetvals.length; iipo++) { tvals.push( svgshell.replace(encodeURIComponent(‘></svg>’), encodeURIComponent(‘><text y=\”12%\”>What is this?</text></svg>’)) + ‘><img SRC=\” data:image/svg+xml’ + dsvgshell.replace(‘></svg>’,’><text y=\”22%\”>What is this?</text></svg>’).replace(/\\\”/g, String.fromCharCode(39)) + ‘\”></img>’ ); // question tvals.push(sparetvals[eval(0 + iipo)]); // image tvals.push( svgshell.replace(encodeURIComponent(‘></svg>’), encodeURIComponent(‘><text y=\”12%\”>’ + decodeURIComponent(sparetvals[eval(-1 + iipo)].split(dlq)[1].split(‘&’)[0].split(‘#’)[0].split(‘>’)[0]).replace(/\+/g,’ ‘) + ‘</text></svg>’)) + ‘><img SRC=\” data:image/svg+xml’ + dsvgshell.replace(‘></svg>’,’><text y=\”22%\”>’ + decodeURIComponent(sparetvals[eval(-1 + iipo)].split(dlq)[1].split(‘&’)[0].split(‘#’)[0].split(‘>’)[0]).replace(/\+/g,’ ‘) + ‘</text></svg>’).replace(/\\\”/g, String.fromCharCode(39)) + ‘\”></img>’ ); // answer } } } // more code follows } “; ?> … and we use that to end up with three animated GIF slides per image covering … What is this? the SVG based image The relevant answer (extracted as above). … used by a changed PHP tutorial_to_animated_gif.php inhouse animated GIF creator web application. Previous relevant Animated GIF Creation Automation Arguments Tutorial is shown below. The automation measures in yesterday’s Animated GIF Creation Transparency Tutorial get an “arguments consideration” (maybe a five minute one, or perhaps ten minutes for “the outraged”) to help out ideas for our aspirational readers and users out there, who we are always keen to motivate, this Animated GIF Creator project … Continue reading →

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

Animated GIF Creation Automation Arguments Tutorial

Posted on by

The automation measures in yesterday’s Animated GIF Creation Transparency Tutorial get an “arguments consideration” (maybe a five minute one, or perhaps ten minutes for “the outraged”) to help out ideas for our aspirational readers and users out there, who we are always keen to motivate, this Animated GIF Creator project potentially linked to user productivity, at its best. If we want to improve automation ideas for these Animated GIF creations we need to use (initially ? and & “get”) arguments up at the web browser address bar for our exploratory user to not only allow for definition of … their hTTp style animated GIF slide content basis (in a “get” irefresh labelled optional argument) … but as of today, how about … new “get” dimensions labelled optional argument defines the output Animated GIF dimensions in terms of width,height … eg. 300,600 new “get” title labelled optional argument defines the wording of the watermark style Animated GIF title (basis) … eg. My+Animated+GIF new “get” titlecolour labelled optional argument defines the colour of the watermark style Animated GIF title … eg. olive new “get” titlemode labelled optional argument defines the watermark style Animated GIF title mode … eg. All … and please do not forget an optional argument we’re always havingthat’s always been there … the “get” delay labelled optional argument defining the delay between animated GIF slides … eg. 800 ? That would complete some pictures out there, we’re hoping?! Does this feel like a step sideways to you, “the regular reader”? We’d agree, and are a little surprised a revisit (to this project) shows this need, but there you are. Sometimes, revisits help clarify! This means a changed (in large part to reorganize “argument related” PHP code to the top, now) PHP tutorial_to_animated_gif.php inhouse animated GIF creator web application can now handle … https://www.rjmprogramming.com.au/PHP/animegif/tutorial_to_animated_gif.php?title=Circular+Terminology&titlecolour=olive&titlemode=All&dimensions=300,600&delay=800&irefresh=hTTps://www.rjmprogramming.com.au/HTMLCSS/circle_terminology.html+++++#irefresh=hTTps://[HtmlWebpageWithSVG].html+++++ Previous relevant Animated GIF Creation Transparency Tutorial is shown below. You might have heard … Transparency begins at home. … or not, because as far as we know, we just sprouted it?! Nevertheless, this matter of … image transparency … in terms of the image being an Animated GIF slide … via … SVG … or … canvas … deserves our consideration, we’ve decided, today … because … Transparency begins at home. We’ll just try our best here, but we have discovered a nuance that hadn’t tweaked with us before, considering “transparency” and using “canvas” elements. … Continue reading →

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

Animated GIF Creation Transparency Tutorial

Posted on by

You might have heard … Transparency begins at home. … or not, because as far as we know, we just sprouted it?! Nevertheless, this matter of … image transparency … in terms of the image being an Animated GIF slide … via … SVG … or … canvas … deserves our consideration, we’ve decided, today … because … Transparency begins at home. We’ll just try our best here, but we have discovered a nuance that hadn’t tweaked with us before, considering “transparency” and using “canvas” elements. The … [canvasElementContext].clearRect(0, 0, [canvasWidth], [canvasHeight]); // idea causes the canvas to become transparent … different to the other concept like … [canvasElementContext].fillStyle=’white’;[canvasElementContext].fillRect(0, 0, [canvasWidth], [canvasHeight]); // this example idea causes the canvas to become white It’s affected two “avenues of effect” (or is this a book?!) with our Animated GIF Creator logic … if a SVG+xml element data URI utf8 format representation mentions the word “transparent” we are now going to make the relevant helper canvas element background be transparent … <?php echo ” function drawInlineSVG(rawSVG, slidename) { // thanks to https://stackoverflow.com/questions/27230293/how-to-draw-an-inline-svg-in-dom-to-a-canvas var rsvg = new Blob([rawSVG], {type:’image/svg+xml;charset=utf-8′}), rdomURL = self.URL || self.webkitURL || self, rurl = rdomURL.createObjectURL(rsvg), rslidename=slidename, imgc = new Image; if (rawSVG.indexOf(‘transparent’) != -1 || rawSVG.indexOf(window.btoa(‘transparent’)) != -1) { istransparent=true; //document.getElementById(‘mycanvas’).getContext(‘2d’).clearRect(0,0,document.getElementById(‘mycanvas’).width,document.getElementById(‘mycanvas’).height); } else { istransparent=false; //document.getElementById(‘mycanvas’).getContext(‘2d’).fillStyle=’white’; //document.getElementById(‘mycanvas’).getContext(‘2d’).fillRect(0,0,document.getElementById(‘mycanvas’).width,document.getElementById(‘mycanvas’).height); } imgc.onload = function () { if (istransparent) { document.getElementById(‘mycanvas’).width=imgc.width; document.getElementById(‘mycanvas’).height=imgc.height; document.getElementById(‘mycanvas’).getContext(‘2d’).clearRect(0,0,document.getElementById(‘mycanvas’).width,document.getElementById(‘mycanvas’).height); } else if (1 == 1) { document.getElementById(‘mycanvas’).getContext(‘2d’).fillStyle=’white’; document.getElementById(‘mycanvas’).getContext(‘2d’).fillRect(0,0,document.getElementById(‘mycanvas’).width,document.getElementById(‘mycanvas’).height); } document.getElementById(‘mycanvas’).getContext(‘2d’).drawImage(this, 0, 0); rdomURL.revokeObjectURL(rurl); slideupdate(this, rslidename); }; imgc.src = rurl; } “; ?> … and … the “+” means by which we involve our Scribble and Annotation helper (of animated GIF slide content) now has a new button (with its onclick event function) to ask about its main canvas element background colour … function colourize() { var huhcol=prompt(‘Enter canvas background colour or Cancel to ignore.’, ‘transparent’); if (huhcol != null) { if (huhcol.trim() != ”) { if (huhcol == ‘transparent’) { //alert(987); //alert(‘topielem.width=’ + topielem.width); parent.document.getElementById(‘topcanvas’).getContext(‘2d’).fillStyle = huhcol; parent.document.getElementById(‘topcanvas’).getContext(‘2d’).clearRect(0,0,parent.document.getElementById(‘topcanvas’).width,parent.document.getElementById(‘topcanvas’).height); } else { parent.document.getElementById(‘topcanvas’).getContext(‘2d’).fillStyle = huhcol; parent.document.getElementById(‘topcanvas’).getContext(‘2d’).fillRect(0,0,parent.document.getElementById(‘topcanvas’).width,parent.document.getElementById(‘topcanvas’).height); } } } } And so, we reckon it’s “transparent” (chortle, chortle) that yesterday’s Animated GIF Creation Automation Tutorial, created at home, and where (the vast majority of some readers know) … Transparency begins at home. Can someone please hand me the lemon juice. … in … our changed PHP tutorial_to_animated_gif.php inhouse animated GIF creator web application signature_signature.js external Javascript with its changes for you … Continue reading →

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

Animated GIF Creation Automation Tutorial

Posted on by

There are two competing issues going on with software development, of complexity, to challenge the skillset of the programmer … keeping at an issue as it is fresh, and not letting go, as much as anything to keep up with where you are at, as with it being fresh in the mind … versus … useful revisits after a bit of time to review the issue with fresher eyes, can often iron out issues not seen in “the heat of battle” Today sees us relieved, undertaking a “second of the options above” scenario, regarding us creeping up on more Animated GIF Creation automation ideas we last talked about, with any depth, at Animated GIF Link Image Slide Tutorial. What prompted the interest, just now, with this? Well, yesterday’s Animated GIF Creation Localhost Text Emoji Slide Tutorial‘s better and non-third-party and independent use of … SVG … to … canvas … via … [canvasElement].toDataURL(‘image/jpeg’, 10) … way to derive a data URI for … textbox … representing an Animated GIF slide content mechanism … rather than rely on ImageMagick converting from SVG to PNG was a bit of a game changer for us. We thought the extending of its use to other parts of the web application would be a good move. Along this way we also worked out that our Animated GIF dimensioning also needed some tweaking at a new HTML form onsubmit event function intervention point … <?php echo ” function dothem() { for (var iijj=0; iijj<slidecmds.length; iijj++) { eval(slidecmds[iijj]); } if (document.getElementById(‘selwhs’)) { if (document.getElementById(‘selwhs’).value.indexOf(‘,’) != -1) { owoh(document.getElementById(‘selwhs’)); } } } “; ?> … in our changed PHP tutorial_to_animated_gif.php inhouse animated GIF creator web application used in link below … https://www.rjmprogramming.com.au/PHP/animegif/tutorial_to_animated_gif.php?irefresh=hTTps://[HtmlWebpageWithSVG].html+++++ … the revisiting of which showed us that the Circle Terminology circle_terminology.html SVG based HTML and Javascript also needed tweaking. Previous relevant Animated GIF Link Image Slide Tutorial is shown below. Yesterday’s Animated GIF SVG Slide Tutorial had us … taking our animated GIF creator … starting with … SVG user entry functionality … then allow for … other image extraction from HTML user input via + … and today … “a” link to either … QR Code … via ++ … or … Webpage Screenshot … via ++++ Do you see the pattern here? If you have a favoured character (ie. “+” here) involved in a user functionality behaviour decision you can give each a … Continue reading →

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

Animated GIF Creation Localhost Text Emoji Slide Tutorial

Posted on by

A day or so before yesterday’s Animated GIF Creation Slide Annotating Tutorial we intimated with … … where we have started coding for emojis as well … … that animated GIF slides could successfully contain unicode emojis. At that stage, unusually for this whole (very long running) Animated Gif Creator project, the functionality … worked in our RJM Programming public domain environment … but … did not work back at our local MAMP Apache/PHP/MySql web server environment Huh?! Yes, for the public domain usage we were making use of the brilliant Google Pagespeed Insights functionality, thanks, (but) which does not work for localhost URLs, pretty understandably! We had time to mull over this, and extending yesterday’s Animated GIF Creation Slide Annotating Tutorial‘s use of the Scribble and Annotating Inhouse Helper, which uses an HTML canvas element as its graphics modus operandi, we thought we might be onto a grinner (if you’ll pardon the poor attempt at Clayton‘s Cockney slang). We could get the ball rolling similarly to yesterday, with … <?php echo ” var dtval=tval; if (tval.trim() == ‘+’ || (document.URL.indexOf(‘http://localhost’) == 0 && dtval.replace(‘>’,'<‘).indexOf(‘<‘) == -1 && (containsNonLatinCodepoints(dtval) || hasEntities(dtval)))) { var useyourwords=”; if (canvw == ”) { canvw=document.getElementById(‘mycanvas’).toDataURL(‘data/jpeg’, 10); } if (tval.trim() != ‘+’) { var coldelim=tval.split(‘`’); if (eval(” + coldelim.length) > 1 && eval(” + coldelim[0].trim().length) > 0 && dtval.split(coldelim[0])[1].indexOf(‘ ‘) == -1) { cfcol=coldelim[1]; if (eval(” + coldelim.length) > 2) { cbcol=coldelim[2]; } if (eval(” + coldelim.length) > 3) { cffam=coldelim[3]; } if (eval(” + coldelim.length) > 4) { cfsz=coldelim[4]; } } dtval=tval.split(‘`’)[0]; useyourwords=’&thewords=’ + encodeURIComponent(dtval) + ‘&cbcol=’ + encodeURIComponent(cbcol) + ‘&cfcol=’ + encodeURIComponent(cfcol) + ‘&cffam=’ + encodeURIComponent(cffam) + ‘&cfsz=’ + encodeURIComponent(cfsz); resetyes(); tval=’+’; dtval=’+’; } tval=canvw; document.getElementById(tid.replace(/^slideshow1$/g,’slideshow’)).value=canvw; var hw=eval(500 – eval(tid.replace(‘slideshow’,”))) canvwo.push(window.open(‘/HTMLCSS/user_of_signature_signature.htm?slide=’ + tid.replace(/^slideshow1$/g,’slideshow’) + useyourwords, ‘_blank’, ‘top=’ + eval(screen.height – hw) + ‘,left=’ + eval(screen.width – hw) + ‘,width=’ + hw + ‘,height=’ + hw)); } “; ?> … in our changed animated GIF creator PHP tutorial_to_animated_gif.php inhouse animated GIF creator web application, pulling along with it yesterday’s … font-color:black; background-color:white; font-family:Verdana; font-size:36px; … “using ` being able to change as per user requirement” ideas. Then, at the other end one intervention wrapper can have us creating canvas text which is mapped back to an Animated GIF slide data URI content textbox back at the Animated GIF Creator web application … var wocheck=false, woop=null, lastwoopj=”; var slideis=location.search.split(‘slide=’)[1] ? (location.search.split(‘slide=’)[1].split(‘&’)[0]) : “”; var thewords=location.search.split(‘thewords=’)[1] ? … Continue reading →

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