{"id":59324,"date":"2023-05-08T03:01:23","date_gmt":"2023-05-07T17:01:23","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=59324"},"modified":"2023-05-07T20:43:48","modified_gmt":"2023-05-07T10:43:48","slug":"animated-gif-text-svg-image-slide-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-text-svg-image-slide-tutorial\/","title":{"rendered":"Animated GIF Text SVG Image Slide Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Animated GIF Text SVG Image Slide Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/ag_links_text_svg.gif\" title=\"Animated GIF Text SVG Image Slide Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Animated GIF Text SVG Image Slide Tutorial<\/p><\/div>\n<p>In the recent <a title='Animated GIF Slide QR Code and Webpage Screenshot URL Tutorial' href='#agifsqrcwsurlt'>Animated GIF Slide QR Code and Webpage Screenshot URL Tutorial<\/a> we surmised that &#8230;<\/p>\n<blockquote>\n<ol>\n<li>interactive entry of absolute URL starting with HtTp means you want a QR Code &#8230; and &#8230;<\/li>\n<li>interactive entry of absolute URL starting with hTtP means you want <font size=1>(to involve, along the line, creating an animated QR Code scenario)<\/font> a Webpage Screenshot<\/li>\n<\/ol>\n<\/blockquote>\n<p> &#8230; represented two interesting ways whereby an association between a webpage URL and image (animated GIF slide) data could happen.  But we forgot another one, that fact that <a target=_blank title='SVG text element information from W3schools' href='https:\/\/www.w3schools.com\/graphics\/svg_text.asp'>&#8220;any text&#8221; can become SVG<\/a> and so can move on to be associated with an image (animated GIF slide) data.<\/p>\n<p>We&#8217;ve been hedging towards more useful ways for our animated GIFs to be &#8220;standalone teaching presentation&#8221; resources, and starting to be able to create these &#8230;<\/p>\n<ul>\n<li>black text<\/li>\n<li>white background<\/li>\n<li>linefeeds via <i>~~<\/i><\/li>\n<\/ul>\n<p> &#8230; new text based slide ideas, perhaps as explanatory &#8220;blurbs&#8221; between true image (and\/or webpage screenshot) based slides, so as to be &#8230; more &#8230; self &#8230; explanatory.<\/p>\n<p>User wise there are three ways to make this happen, the first of which has existed before today&#8217;s work &#8230;<\/p>\n<ul>\n<li>enter into an animated GIF slide textbox SVG that contains valid &#8220;text&#8221; SVG element data &#8230; or &#8230;<\/li>\n<li>enter the text you want into an animated GIF slide textbox <font size=1>(as you can see happening with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/ag_links_text_svg.gif\">today&#8217;s animated GIF tutorial picture<\/a>)<\/font> &#8230;<\/li>\n<li>for hTTp textbox entries, or via address bar &#8220;irefresh&#8221; argument URLs, append <i>++++++++<\/i><\/li>\n<\/ul>\n<p>This adds onto yesterday&#8217;s <a title='Animated GIF Link Image Slide Tutorial' href='#agiflist'>Animated GIF Link Image Slide Tutorial<\/a> with <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php--------------------------------------------------------------------GETME'>our changed<\/a> PHP <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php--------------------------------------------------------------------GETME'>tutorial_to_animated_gif.php<\/a> <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php'>inhouse animated GIF creator web application<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-text-svg-image-slide-tutorial\/'>Animated GIF Text SVG Image Slide Tutorial<\/a>.<\/p-->\n<hr>\n<p id='agiflist'>Previous relevant <a target=_blank title='Animated GIF Link Image Slide Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-link-image-slide-tutorial\/'>Animated GIF Link Image Slide Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Animated GIF Link Image Slide Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/ag_links_qr_ss.gif\" title=\"Animated GIF Link Image Slide Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Animated GIF Link Image Slide Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Animated GIF SVG Slide Tutorial' href='#agifsvgst'>Animated GIF SVG Slide Tutorial<\/a> had us &#8230;<\/p>\n<ul>\n<li>taking our animated GIF creator &#8230; starting with &#8230;<\/li>\n<li>SVG user entry functionality &#8230; then allow for &#8230;<\/li>\n<li>other image extraction from HTML user input via <i>+<\/i> &#8230; and today &#8230;<\/li>\n<li>&#8220;a&#8221; link to either &#8230;\n<ol>\n<li>QR Code &#8230; via <i>++<\/i> &#8230; or &#8230;<\/li>\n<li>Webpage Screenshot &#8230; via <i>++++<\/i><\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p>Do you see the pattern here?  If you have a favoured character (ie. &#8220;+&#8221; here) involved in a user functionality behaviour decision you can give each a &#8230;<\/p>\n<p><code><br \/>\npower of 2 number of characters<br \/>\n<\/code><\/p>\n<p> &#8230; (functionality meaning) and at the Javascript or PHP interpretive end of this arrangement you can know exactly what the user wants <font size=1>(in a way akin to how a bitmap can often be used)<\/font> &#8230; so far this Javascript working (and tailorable into the future with some tweaking) as per &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\nfunction srchrefit(inbg) {<br \/>\n  var outbg=inbg, outbis=[], ibis=0;<br \/>\n  var ourblankend=blankend;<br \/>\n  if (blankend != '') {<br \/>\n    if (eval(eval('' + ourblankend.length) % 2) == 1) {  \/\/ process img<br \/>\n       ourblankend=ourblankend.substring(1);<br \/>\n       outbg=outbg.replace(\/data\\:image\\\/svg\\+xml\/g, '!@#$%^&');<br \/>\n       outbg=outbg.replace(\/data\\:image\/g, ' SRC=\\\"  data:image');<br \/>\n       outbg=outbg.replace(\/\\!\\@\\#\\$\\%\\^\\&\/g, 'data:image\/svg+xml');<br \/>\n       outbis=outbg.split('&lt;img');<br \/>\n       console.log('outbis.length=' + outbis.length + ' and outbg=' + outbg);<br \/>\n       for (ibis=1; ibis&lt;eval('' + outbis.length); ibis++) {<br \/>\n         if (outbis[ibis].split('&gt;')[0].indexOf(' src=\\\"') != -1) {<br \/>\n          outbg=outbg.replace('&lt;img' + outbis[ibis].split('&gt;')[0], '&lt;img' + outbis[ibis].split('&gt;')[0].replace(' src=\\\"', ' SRC=\\\"  '));<br \/>\n        }<br \/>\n       }<br \/>\n   }<br \/>\n    if (eval('' + ourblankend.length) == 4) {  \/\/ process \"a\" links to Webpage Screenshot<br \/>\n       outbis=outbg.split('&lt;a');<br \/>\n       console.log('outbis.length=' + outbis.length);<br \/>\n       for (ibis=1; ibis&lt;eval('' + outbis.length); ibis++) {<br \/>\n         if (outbis[ibis].split('&gt;')[0].indexOf(' href=\\\"') != -1) {<br \/>\n           outbg=outbg.replace('&lt;a' + outbis[ibis].split('&gt;')[0], '&lt;a' + outbis[ibis].split('&gt;')[0].replace(' href=\\\"', ' SRC=\\\"    '));<br \/>\n         }<br \/>\n       }     \/\/ ... or ...<br \/>\n    } else if (eval('' + ourblankend.length) == 2) { \/\/ process \"a\" links to QR Code<br \/>\n       outbis=outbg.split('&lt;a');<br \/>\n       console.log('outbis.length=' + outbis.length);<br \/>\n       for (ibis=1; ibis&lt;eval('' + outbis.length); ibis++) {<br \/>\n         if (outbis[ibis].split('&gt;')[0].indexOf(' href=\\\"') != -1) {<br \/>\n           outbg=outbg.replace('&lt;a' + outbis[ibis].split('&gt;')[0], '&lt;a' + outbis[ibis].split('&gt;')[0].replace(' href=\\\"', ' SRC=\\\"   '));<br \/>\n         }<br \/>\n       }<br \/>\n    }<br \/>\n    return outbg;<br \/>\n  }<br \/>\n  return inbg;<br \/>\n}<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p> &#8230; in <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php-------------------------------------------------------------------GETME'>our changed<\/a> PHP <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php-------------------------------------------------------------------GETME'>tutorial_to_animated_gif.php<\/a> <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php'>inhouse animated GIF creator web application<\/a> &#8230;<\/p>\n<p><a target=_blank title='Click for https:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php?irefresh=hTTp:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circle_terminology.html+++' href='https:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php?irefresh=hTTp:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circle_terminology.html+++'><font size=1>https:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php<\/font><font color=blue>?irefresh=hTTp:\/\/[HtmlWebpageWithSVG].htm<sub>l+++<\/sub><\/font><\/a><\/p>\n<p> &#8230; which fills in the slide data (the link above hooking up to the web application featuring in <a target=_blank title='Circle Terminology in Mathematics Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/circle-terminology-in-mathematics-tutorial\/'>Circle Terminology in Mathematics Tutorial<\/a> extracting SVG and hidden non-SVG images and one &#8220;a&#8221; link presented as a QR Code) &#8230;<\/p>\n<p><a target=_blank title='Click for https:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php?irefresh=hTTps:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circle_terminology.html+++++' href='https:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php?irefresh=hTTps:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circle_terminology.html+++++'><font size=1>https:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php<\/font><font color=blue>?irefresh=hTTps:\/\/[HtmlWebpageWithSVG].htm<sub>l+++++<\/sub><\/font><\/a><\/p>\n<p> &#8230; which fills in the slide data (the link above hooking up to the web application featuring in <a target=_blank title='Circle Terminology in Mathematics Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/circle-terminology-in-mathematics-tutorial\/'>Circle Terminology in Mathematics Tutorial<\/a> extracting SVG and hidden non-SVG images and one &#8220;a&#8221; link presented as a Webpage Screenshot).<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-link-image-slide-tutorial\/'>Animated GIF Link Image Slide Tutorial<\/a>.<\/p-->\n<hr>\n<p id='agifsvgst'>Previous relevant <a target=_blank title='Animated GIF SVG Slide Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-svg-slide-tutorial\/'>Animated GIF SVG Slide Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Animated GIF SVG Slide Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/ag_svg.gif\" title=\"Animated GIF SVG Slide Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Animated GIF SVG Slide Tutorial<\/p><\/div>\n<p>The PHP <a target=_blank title='GD and Image Functions' href='http:\/\/php.net\/manual\/en\/ref.image.php'>GD<\/a> library we use to help create animated GIFs (along with a whole lot of other help, it goes without saying) is not into <i>vector graphics<\/i> which is what &#8230;<\/p>\n<ul>\n<li><a target=_blank title=Inkscape href='https:\/\/inkscape.org\/'>Inkscape<\/a> &#8230; as a vector graphics editor &#8230; and &#8230;<\/li>\n<li><a target=_blank title='HTML svg information from w3schools' href='https:\/\/www.w3schools.com\/html\/html5_svg.asp'>SVG<\/a> &#8230; ie. Scalable Vector Graphics<\/li>\n<\/ul>\n<p> &#8230; are <i>really<\/i> into <font size=1> &#8230; ooooohhh, aaaaahhhh &#8230;<\/font> but luckily for us, the great <a target=_blank title='ImageMagick software suite' href='https:\/\/www.imagemagick.org\/'>ImageMagick<\/a> offers functionality to convert a SVG image file into a PNG image file, via &#8230;<\/p>\n<table>\n<tr>\n<th>Non Windows<\/th>\n<th>Windows<\/th>\n<\/tr>\n<tr>\n<td>convert infile.svg outfile.png<\/td>\n<td>magick.exe infile.svg outfile.png<\/td>\n<\/tr>\n<\/table>\n<p> &#8230; and we&#8217;re using that talent ImageMagick has to offer the user the chance, at any animated GIF slide textbox, the chance to enter <a target=_blank title='Javascript encodeURIComponent information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/jsref_encodeuricomponent.asp'>encodeURIComponent<\/a> and <a target=_blank title='Javascript window.btoa information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/met_win_btoa.asp'>window.btoa<\/a> sensitive entries whose (content) format could match (one of) &#8230;<\/p>\n<ul>\n<li>&lt;svg &#8230; innerblah&gt;&#8230; blah blah blah &#8230;&lt;\/svg&gt;<\/li>\n<li>&lt;SVG &#8230; innerblah&gt;&#8230; blah blah blah &#8230;&lt;\/SVG&gt;<\/li>\n<li>data:image\/svg+xml;utf8,&lt;svg &#8230; innerblah&gt;&#8230; blah blah blah &#8230;&lt;\/svg&gt;<\/li>\n<li>data:image\/svg+xml;utf8,&lt;SVG &#8230; innerblah&gt;&#8230; blah blah blah &#8230;&lt;\/SVG&gt;<\/li>\n<li>data:image\/svg+xml;base64,<font size=1>base 64 encoded( <\/font>&lt;svg &#8230; innerblah&gt;&#8230; blah blah blah &#8230;&lt;\/svg&gt; <font size=1>)<\/font><\/li>\n<li>data:image\/svg+xml;base64,<font size=1>base 64 encoded( <\/font>&lt;SVG &#8230; innerblah&gt;&#8230; blah blah blah &#8230;&lt;\/SVG&gt; <font size=1>)<\/font><\/li>\n<li><font size=1>base 64 encoded( <\/font>&lt;svg &#8230; innerblah&gt;&#8230; blah blah blah &#8230;&lt;\/svg&gt; <font size=1>)<\/font><\/li>\n<li><font size=1>base 64 encoded( <\/font>&lt;SVG &#8230; innerblah&gt;&#8230; blah blah blah &#8230;&lt;\/SVG&gt; <font size=1>)<\/font><\/li>\n<li><font size=1>encode URI encoded( <\/font>&lt;svg &#8230; innerblah&gt;&#8230; blah blah blah &#8230;&lt;\/svg&gt; <font size=1>)<\/font><\/li>\n<li><font size=1>encode URI encoded( <\/font>&lt;SVG &#8230; innerblah&gt;&#8230; blah blah blah &#8230;&lt;\/SVG&gt; <font size=1>)<\/font><\/li>\n<li>SVG media file relative or absolute URL (ie. ends in <i>.svg<\/i>)<\/li>\n<li>hTTp<sub>s<\/sub>:\/\/[HtmlWebpageWithSVG].htm<sub>l<\/sub><\/li>\n<li>at address bar involve a <font color=blue>get argument<\/font> whereby &#8230;<br \/>\n<blockquote><p>\n<a target=_blank title='Click for https:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php?irefresh=hTTp:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circle_terminology.html' href='https:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php?irefresh=hTTp:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circle_terminology.html'><font size=1>https:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php<\/font><font color=blue>?irefresh=hTTp:\/\/[HtmlWebpageWithSVG].htm<sub>l<\/sub><\/font><\/a>\n<\/p><\/blockquote>\n<p> &#8230; which fills in the slide data (the link above hooking up to the web application featuring in <a target=_blank title='Circle Terminology in Mathematics Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/circle-terminology-in-mathematics-tutorial\/'>Circle Terminology in Mathematics Tutorial<\/a>) &#8230;<\/p>\n<blockquote><p>\n<a target=_blank title='Click for https:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php?irefresh=hTTps:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circle_terminology.html' href='https:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php?irefresh=hTTps:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circle_terminology.html'><font size=1>https:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php<\/font><font color=blue>?irefresh=hTTps:\/\/[HtmlWebpageWithSVG].htm<sub>l<\/sub><\/font><\/a>\n<\/p><\/blockquote>\n<p> &#8230; which fills in the slide data and then goes and tries to create the resultant animated GIF (the link above hooking up to the web application featuring in <a target=_blank title='Circle Terminology in Mathematics Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/circle-terminology-in-mathematics-tutorial\/'>Circle Terminology in Mathematics Tutorial<\/a>)\n<\/li>\n<\/ul>\n<p> &#8230; means by which a user can involve SVG input slides into their animated GIF creations in <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php------------------------------------------------------------------GETME'>our changed<\/a> PHP <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php------------------------------------------------------------------GETME'>tutorial_to_animated_gif.php<\/a> <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php'>inhouse animated GIF creator web application<\/a> further to yesterday&#8217;s <a title='Animated GIF Slide QR Code and Webpage Screenshot URL Tutorial' href='#agifsqrcwsurlt'>Animated GIF Slide QR Code and Webpage Screenshot URL Tutorial<\/a>.<\/p>\n<p>Below is a new (PHP writes) Javascript iframe (<i>iois<\/i> object below) onload event function for recognizing <i>hTTp<sub>s<\/sub>:\/\/[HtmlWebpageWithSVG].htm<sub>l<\/sub><\/i> as above, and setting the iframe&#8217;s &#8220;src&#8221; attribute to its value &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\n  var mm1='', mm2='', mm3='';<br \/>\n  var gdgebimm='', gtval='', onealready='';<br \/>\n  var tvals=[], thistval=0, thistdelim='', thistid='';<br \/>\n<br \/> <br \/>\nfunction latermm() {<br \/>\n   maybemore(mm3.value, mm2, mm3);<br \/>\n   mm1='';<br \/>\n   mm2='';<br \/>\n   mm3='';<br \/>\n}<br \/>\n<br \/>\nfunction svgmmcallol(iois, tid) {<br \/>\n    \/\/alert('TID=' + tid);<br \/>\n  var tval='', it=0, dgebimm='';<br \/>\n  var tis=document.getElementById(tid);<br \/>\n  thistid=tid;<br \/>\n  tvals=[];<br \/>\n  thistval=0;<br \/>\n  thistdelim='';<br \/>\n  if (iois != null) {<br \/>\n    var aconto = (iois.contentWindow || iois.contentDocument);<br \/>\n    if (aconto != null) {<br \/>\n     if (aconto.document) { aconto = aconto.document; }<br \/>\n     if (aconto.body != null) {<br \/>\n       tval=aconto.body.innerHTML;<br \/>\n    \/\/alert('Tval=' + tval);<br \/>\n  if (tval.indexOf(encodeURIComponent('data:image\/svg+xml')) != -1) {<br \/>\n    thistval=1;<br \/>\n    tvals=tval.split(encodeURIComponent('data:image\/svg+xml'));<br \/>\n    thistdelim=encodeURIComponent('data:image\/svg+xml');<br \/>\n    \/\/alert('thistdeliM=' + thistdelim);<br \/>\n<br \/> <br \/>\n    tval='data:image\/svg+xml' + decodeURIComponent(tvals[thistval].split(String.fromCharCode(34))[0].split(String.fromCharCode(39))[0].split(')')[0].split('&')[0].split('&gt;')[0]);<br \/>\n    \/\/alert('tvAl=' + tval);<br \/>\n    \/\/alert('tId=' + tid);<br \/>\n<br \/>\n    mm1=tval;<br \/>\n    mm2=tid;<br \/>\n    mm3=document.getElementById(tid.replace(\/^slideshow1$\/g,'slideshow'));<br \/>\n    dgebimm='&lt;iframe style=display:none; onload=mmcallol(this); src=\\\"' + '\/PHP\/fgc\/index.php?askfor=' + encodeURIComponent(tval) + '\\\"&gt;&lt;\/iframe&gt;';<br \/>\n    if (eval('' + dgebimm.length) &gt; 800) {<br \/>\n    document.getElementById('myaskfor').value=tval;<br \/>\n    document.getElementById('saskfor').click();<br \/>\n    } else {<br \/>\n    document.getElementById('mmcall').innerHTML=dgebimm;<br \/>\n    }<br \/>\n    \/\/setTimeout(latermm, 9000);<br \/>\n    return '';<br \/>\n  } else if (tval.indexOf('data:image\/svg+xml') != -1) {<br \/>\n    thistval=1;<br \/>\n    tvals=tval.split('data:image\/svg+xml');<br \/>\n    thistdelim='data:image\/svg+xml';<br \/>\n    tval='data:image\/svg+xml' + tvals[thistval].split(String.fromCharCode(34))[0].split(String.fromCharCode(39))[0].split(')')[0].split('&')[0].split('&gt;')[0];<br \/>\n<br \/>\n    mm1=tval;<br \/>\n    mm2=tid;<br \/>\n    mm3=document.getElementById(tid.replace(\/^slideshow1$\/g,'slideshow'));<br \/>\n    dgebimm='&lt;iframe style=display:none; onload=mmcallol(this); src=\\\"' + '\/PHP\/fgc\/index.php?askfor=' + encodeURIComponent(tval) + '\\\"&gt;&lt;\/iframe&gt;';<br \/>\n    if (eval('' + dgebimm.length) &gt; 800) {<br \/>\n    document.getElementById('myaskfor').value=tval;<br \/>\n    document.getElementById('saskfor').click();<br \/>\n    } else {<br \/>\n    document.getElementById('mmcall').innerHTML=dgebimm;<br \/>\n    }<br \/>\n    \/\/setTimeout(latermm, 9000);<br \/>\n    return '';<br \/>\n  } else if (tval.indexOf(encodeURIComponent('&lt;svg')) != -1 || tval.indexOf(encodeURIComponent('&lt;SVG')) != -1) {<br \/>\n    thistval=1;<br \/>\n    if (tval.indexOf(encodeURIComponent('&lt;svg')) != -1) {<br \/>\n    tvals=tval.split(encodeURIComponent('&lt;svg'));<br \/>\n    thistdelim=encodeURIComponent('&lt;svg');<br \/>\n    tval='data:image\/svg+xml;utf8,&lt;svg' + decodeURIComponent(tvals[thistval].split(encodeURIComponent('&lt;\/svg&gt;'))[0]) + '&lt;\/svg&gt;';<br \/>\n    } else {<br \/>\n    tvals=tval.split(encodeURIComponent('&lt;SVG'));<br \/>\n    thistdelim=encodeURIComponent('&lt;SVG');<br \/>\n    tval='data:image\/svg+xml;utf8,&lt;SVG' + decodeURIComponent(tvals[thistval].split(encodeURIComponent('&lt;\/SVG&gt;'))[0]) + '&lt;\/SVG&gt;';<br \/>\n    }<br \/>\n    mm1=tval;<br \/>\n    mm2=tid;<br \/>\n    mm3=document.getElementById(tid.replace(\/^slideshow1$\/g,'slideshow'));<br \/>\n    dgebimm='&lt;iframe style=display:none; onload=mmcallol(this); src=\\\"' + '\/PHP\/fgc\/index.php?askfor=' + encodeURIComponent(tval) + '\\\"&gt;&lt;\/iframe&gt;';<br \/>\n    if (eval('' + dgebimm.length) &gt; 800) {<br \/>\n    document.getElementById('myaskfor').value=tval;<br \/>\n    document.getElementById('saskfor').click();<br \/>\n    } else {<br \/>\n    document.getElementById('mmcall').innerHTML=dgebimm;<br \/>\n    }<br \/>\n    \/\/setTimeout(latermm, 9000);<br \/>\n    return '';<br \/>\n  } else if (tval.indexOf(window.btoa('&lt;svg')) != -1 || tval.indexOf(window.btoa('&lt;SVG')) != -1) {<br \/>\n    thistval=1;<br \/>\n    if (tval.indexOf(window.btoa('&lt;svg')) != -1) {<br \/>\n    tvals=tval.split(window.btoa('&lt;svg'));<br \/>\n    thistdelim=window.btoa('&lt;svg');<br \/>\n    tval='data:image\/svg+xml;base64,' + window.btoa('&lt;svg') + tvals[thistval].split(window.btoa('&lt;\/svg&gt;'))[0] + window.btoa('&lt;\/svg&gt;');<br \/>\n    } else {<br \/>\n    tvals=tval.split(window.btoa('&lt;SVG'));<br \/>\n    thistdelim=window.btoa('&lt;SVG');<br \/>\n    tval='data:image\/svg+xml;base64,' + window.btoa('&lt;SVG') + tvals[thistval].split(window.btoa('&lt;\/SVG&gt;'))[0] + window.btoa('&lt;\/SVG&gt;');<br \/>\n    }<br \/>\n    mm1=tval;<br \/>\n    mm2=tid;<br \/>\n    mm3=document.getElementById(tid.replace(\/^slideshow1$\/g,'slideshow'));<br \/>\n    dgebimm='&lt;iframe style=display:none; onload=mmcallol(this); src=\\\"' + '\/PHP\/fgc\/index.php?askfor=' + encodeURIComponent(tval) + '\\\"&gt;&lt;\/iframe&gt;';<br \/>\n    if (eval('' + dgebimm.length) &gt; 800) {<br \/>\n    document.getElementById('myaskfor').value=tval;<br \/>\n    document.getElementById('saskfor').click();<br \/>\n    } else {<br \/>\n    document.getElementById('mmcall').innerHTML=dgebimm;<br \/>\n    }<br \/>\n    \/\/setTimeout(latermm, 9000);<br \/>\n    return '';<br \/>\n  } else if (tval.toLowerCase().indexOf('&lt;svg') != -1) {<br \/>\n    if (tval.indexOf('&lt;svg') != -1) {<br \/>\n    thistdelim='&lt;svg';<br \/>\n    tval='data:image\/svg+xml;utf8,&lt;svg' + tvals[thistval].split('&lt;\/svg&gt;')[0] + '&lt;\/svg&gt;';<br \/>\n    } else {<br \/>\n    thistdelim='&lt;SVG';<br \/>\n    tval='data:image\/svg+xml;utf8,&lt;SVG' + tvals[thistval].split('&lt;\/SVG&gt;')[0] + '&lt;\/SVG&gt;';<br \/>\n    }<br \/>\n    \/\/alert('Thistdelim=' + thistdelim);<br \/>\n    tvals=tval.split('&lt;svg');<br \/>\n    thistval=1;<br \/>\n    \/\/alert('1:tval=' + tval);<br \/>\n    mm1=tval;<br \/>\n    mm2=tid;<br \/>\n    mm3=document.getElementById(tid.replace(\/^slideshow1$\/g,'slideshow'));<br \/>\n    dgebimm='&lt;iframe style=display:none; onload=mmcallol(this); src=\\\"' + '\/PHP\/fgc\/index.php?askfor=' + encodeURIComponent(tval) + '\\\"&gt;&lt;\/iframe&gt;';<br \/>\n    \/\/alert('2:tval=' + tval);<br \/>\n    if (eval('' + dgebimm.length) &gt; 800) {<br \/>\n \/\/alert('0: ' + dgebimm);<br \/>\n    document.getElementById('myaskfor').value=tval;<br \/>\n    document.getElementById('saskfor').click();<br \/>\n    } else {<br \/>\n \/\/alert('1: ' + dgebimm);<br \/>\n    document.getElementById('mmcall').innerHTML=dgebimm;<br \/>\n    }<br \/>\n    \/\/alert('3:tval=' + tval);<br \/>\n    \/\/setTimeout(latermm, 9000);<br \/>\n    return '';<br \/>\n  }<br \/>\n     }<br \/>\n    }<br \/>\n  }<br \/>\n}<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-svg-slide-tutorial\/'>Animated GIF SVG Slide Tutorial<\/a>.<\/p-->\n<hr>\n<p id='agifsqrcwsurlt'>Previous relevant <a target=_blank title='Animated GIF Slide QR Code and Webpage Screenshot URL Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-slide-qr-code-and-webpage-screenshot-url-tutorial\/'>Animated GIF Slide QR Code and Webpage Screenshot URL Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Animated GIF Slide QR Code and Webpage Screenshot URL Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/animegif_webpage_screenshot.jpg\" title=\"Animated GIF Slide QR Code and Webpage Screenshot URL Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Animated GIF Slide QR Code and Webpage Screenshot URL Tutorial<\/p><\/div>\n<p>We wanted, today, to channel the <font size=1>(cruel might say &#8220;warped&#8221;)<\/font> thinking behind the recent URL &#8230;<\/p>\n<ol>\n<li>interactive entry of absolute URL starting with HtTp means you want a QR Code &#8230; and &#8230;<\/li>\n<li>interactive entry of absolute URL starting with hTtP means you want <font size=1>(to involve, along the line, creating an animated QR Code scenario)<\/font> a Webpage Screenshot<\/li>\n<\/ol>\n<p> &#8230; we last talked about at <a target=_blank title='Circular Text Around Media Animated QR Code Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/circular-text-around-media-animated-qr-code-tutorial'>Circular Text Around Media Animated QR Code Tutorial<\/a>, because we feel this is actually a good inhouse idea to hang on to as a principle.  Why?!  <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=OhdvhVX0Dfo&#038;themeRefresh=1'>Glad you asked.<\/a>  It is another way to &#8230;<\/p>\n<ul>\n<li>end up with an image &#8230;<\/li>\n<li>from a<font size=1>ny old absolute <i style='color:darkgray;'>(but we have not yet researched ? and &#038; get argument(s) regarding)<\/i><\/font> URL<\/li>\n<\/ul>\n<p> &#8230; really suiting the purpose of today&#8217;s work, that being the integration of this idea into <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php-----------------------------------------------------------------GETME'>our changed<\/a> PHP <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php-----------------------------------------------------------------GETME'>tutorial_to_animated_gif.php<\/a> <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php'>inhouse animated GIF creator web application<\/a> we last talked about at <a target=_blank title='PdfImages PDF Output Media Zipping via PHP Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/pdfImages-pdf-output-media-zipping-via-php-tutorial\/'>PdfImages PDF Output Media Zipping via PHP Tutorial<\/a>.  After all, an animated GIF slide is also an image, and it could be used in this way, to &#8230;<\/p>\n<ol>\n<li>create animated GIF of QR Code means by which a smart device user using their Camera might navigate to a series of interesting webpage(s) &#8230; or &#8230;<\/li>\n<li>create animated GIF of &#8220;current <font size=1>snapshot<\/font> looks&#8221; of a series of URLs of interest <font size=1>(with even more currency than Google Earth shows your place!)<\/font><\/li>\n<\/ol>\n<p>It might be you design an animated GIF chapter of slides and always want to follow it up with a &#8220;further reading&#8221; webpage you could present as a QR Code or Webpage Screenshot.<\/p>\n<p>Anyway, at the <font color=purple>&#8220;onblur&#8221; event Javascript function<\/font> logic <font color=blue>we intervened<\/font> to end up with an image\/png data URI substitute for the HtTp or hTtP URL the user enters to re-enter the normal animated GIF image definition workflow of the animated GIF creator &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\n  var mm1='', mm2='', mm3='';<br \/>\n<br \/> <br \/>\nfunction latermm() {<br \/>\n   maybemore(mm3.value, mm2, mm3);<br \/>\n   mm1='';<br \/>\n   mm2='';<br \/>\n   mm3='';<br \/>\n}<br \/>\n<br \/>\n<font color=purple>function maybemore(tval, tid, tis) {<\/font><br \/>\n  var newi=null, fo=null;<br \/>\n  var inmb=0;<br \/>\n  <font color=blue>if (tval.indexOf('HtTp') == 0) {<br \/>\n    mm1=tval;<br \/>\n    mm2=tid;<br \/>\n    mm3=tis;<br \/>\n    document.getElementById('mmcall').innerHTML='&lt;iframe style=display:none; onload=mmcallol(this); src=\\\"' + '\/PHP\/fgc\/index.php?justcontent=&askfor=' + encodeURIComponent(document.URL.split('\/\/')[0] + '\/\/chart.googleapis.com\/chart?chs=300x300&cht=qr&chl=' + encodeURIComponent('http' + encodeURIComponent(tval.substring(4).replace('S:','s:'))) + '&choe=UTF-8') + '\\\"&gt;&lt;\/iframe&gt;';<br \/>\n    \/\/setTimeout(latermm, 9000);<br \/>\n    return '';<br \/>\n  } else if (tval.indexOf('hTtP') == 0) {<br \/>\n    mm1=tval;<br \/>\n    mm2=tid;<br \/>\n    mm3=tis;<br \/>\n    document.getElementById('mmcall').innerHTML='&lt;iframe style=display:none; onload=mmcallol(this); src=\\\"' + '\/PHP\/fgc\/index.php?askfor=&askyou=' + encodeURIComponent('http' + tval.substring(4).replace('S:','s:')) + '\\\"&gt;&lt;\/iframe&gt;';<br \/>\n    \/\/setTimeout(latermm, 9000);<br \/>\n    return '';<br \/>\n  }<\/font><br \/>\n\/\/ rest of maybemore follows ...<br \/>\n<font color=purple>}<\/font><br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p> &#8230; to help introduce this new animated GIF slide functionality arrangement.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d59257' onclick='var dv=document.getElementById(\"d59257\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/slide\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d59257' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d59274' onclick='var dv=document.getElementById(\"d59274\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/btoa\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d59274' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d59312' onclick='var dv=document.getElementById(\"d59312\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/character\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d59312' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d59324' onclick='var dv=document.getElementById(\"d59324\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/svg\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d59324' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>In the recent Animated GIF Slide QR Code and Webpage Screenshot URL Tutorial we surmised that &#8230; interactive entry of absolute URL starting with HtTp means you want a QR Code &#8230; and &#8230; interactive entry of absolute URL starting &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-text-svg-image-slide-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,12,14,37],"tags":[83,4330,2829,1824,1654,297,354,1605,2618,4329,576,590,4327,1658,2686,652,1807,2732,860,932,2042,980,997,3457,1776,1149,1161,1226,4331,1675,1319,1345,1366,4328,1418,4326],"class_list":["post-59324","post","type-post","status-publish","format-standard","hentry","category-ajax","category-elearning","category-event-driven-programming","category-tutorials","tag-animated-gif","tag-bitmap","tag-btoa","tag-character","tag-data-uri","tag-data-url","tag-dom","tag-encodeuricomponent","tag-extract","tag-extraction","tag-html","tag-image","tag-imagepng","tag-imagemagick","tag-inkscape","tag-javascript","tag-link","tag-mimetype","tag-onblur","tag-php","tag-png","tag-presentation","tag-programming","tag-qr-code","tag-screenshot","tag-slide","tag-snapshot","tag-svg","tag-svg-text","tag-textbox","tag-tutorial","tag-url","tag-vector","tag-vector-graphics","tag-webpage","tag-webpage-snapshot"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/59324"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=59324"}],"version-history":[{"count":10,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/59324\/revisions"}],"predecessor-version":[{"id":59334,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/59324\/revisions\/59334"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=59324"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=59324"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=59324"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}