Walking Trip …

Walking Trip

Walking Trip

Offenbach's Suite ... Warts 'n All

Offenbach's Suite ... Warts 'n All

 📅  

If this was interesting you may be interested in this too.

Posted in Photography, Trips | Tagged , , | 34 Comments

WordPress Blog Getme Searches Tutorial

WordPress Blog Getme Searches Tutorial

WordPress Blog Getme Searches Tutorial

We noted, looking at our Apache Status report, that fairly often readers of this blog, thanks, search for mention of a particular GETME file, it being our “source control” basis whereby …

  • first draft of a “source control” file, named cowsay.php as an example, would be called …

    cowsay.php_GETME
  • and then subsequent drafts use s rather than _ meaning a “second draft” would be called …

    cowsay.php-GETME

    … and a fourth …

    cowsay.php---GETME

You go through with a particularized search like that and you’d be looking for specific referencing, we reckon. And yet, once the project rolls along a search for cowsay.php_GETME as your example will land you on four or five or six mentioning tutorials, the way we do it around here. We want to tell a story, and build it up (but please do your own research regarding Google SEO before thinking this is such a good idea, as repeating content is quite often a no-no). But, like we’re intimating, such a particularized search result set like this may annoy many people looking for some quick, definitive answer.

Well, we think for some such searches, again using cowsay.php_GETME as an example, the adding and then clicking of …


Oldest

… and lobbing you in the direction of …


Python Cowsay API Primer Tutorial

… as the oldest mention of cowsay.php_GETME, could be a useful new feature … ie. getting to it’s genesis. Many people will be most interested going back to this genesis, but please note, in the case we’ve mentioned, using our “present as a book” emoji button (📖 📖) functionality (reading like a book, functionality talked about with WordPress Blog Posting Thread Book Primer Tutorial) on the topmost (usually, but regarding hot off the press business “topmost that does not have the title WordPress Blog Getme Searches Tutorial“) link you are presented with would do a good job here too.

Okay, so how does a user start getting to this additional Oldest link creation logic? Well, in our changed bits on our WordPress blog TwentyTen themed header.php (a modus operandi also used for WordPress Blog Byline Zoom Fix Tutorial)

<?php echo ”

function sipreradiocc() {
//if (document.getElementById('s').value.trim().indexOf('GETME') != -1) { alert(document.getElementById('s').value); }
if ((document.getElementById('s').value + '~').replace('_GETME','-GETME').indexOf('-GETME ~') != -1) {
//alert('yes');
location.href=document.URL.split('?')[0].split('#')[0].split('/ITblog')[0].split('/wordpress')[0] + '/ITblog/?s=' + encodeURIComponent(document.getElementById('s').value.trim()) + '&wopenall=' + encodeURIComponent(document.getElementById('s').value.trim()) + '&ifnooldestdoone=y';
} //else if (document.getElementById('s').value.trim().indexOf('GETME') != -1) {
//alert('why ' + (document.getElementById('s').value + '~').replace('_GETME','-GETME'));
//}
}


function preradiocc() {
//document.title='' + (document.getElementById('s').value + '~').replace('_GETME','-GETME').indexOf('-GETME ~') + ' ... ' + (document.getElementById('s').value + '~').replace('_GETME','-GETME');
if ((document.getElementById('s').value + '~').replace('_GETME','-GETME').indexOf('-GETME ~') != -1) {
location.href=document.URL.split('?')[0].split('#')[0].split('/ITblog')[0].split('/wordpress')[0] + '/ITblog/?s=' + encodeURIComponent(document.getElementById('s').value.trim()) + '&wopenall=' + encodeURIComponent(document.getElementById('s').value.trim()) + '&ifnooldestdoone=y';
} else
if (document.getElementById('s').value != "" && radis != "") {
radiocc(radis);
}
}

“; ?>

… reading between the lines and taking into consideration a changed codeline in function precc …

<?php echo ”

document.getElementById('s').placeholder='Space appended compares to whole posting content. Spaces after GETME search facilitates Oldest link.';
setInterval(sipreradiocc, 5000);

“; ?>

… in conjunction with a new document.body onload Javascript function …

<?php echo ”

function chkinodo() {
var mkh=0, lastahelsid='', lastahelstitle='';
if (document.URL.indexOf('s=') != -1 && document.URL.indexOf('wopenall=') != -1 && document.URL.indexOf('ifnooldestdoone=') != -1 && document.URL.replace('/page','page=').indexOf('page=') == -1) {
var hels=document.getElementsByTagName('h1');
if (eval('' + hels.length) > 0 && document.body.innerHTML.indexOf('lder post') == -1) {
if (hels[0].innerHTML.indexOf('ldest') == -1) {
if (hels[0].innerHTML.toLowerCase().indexOf('search result') != -1) {
var ahels=document.getElementsByTagName('a');
for (var jkh=0; jkh<ahels.length; jkh++) {
if (('' + ahels[jkh].title).indexOf('Permalink to ') != -1) {
if (('' + ahels[jkh].outerHTML).indexOf(' id=') == -1) {
ahels[jkh].id='mya' + mkh;
lastahelsid='' + ahels[jkh].id;
lastahelstitle='' + ('' + ahels[jkh].title).split('Permalink to ')[1];
mkh++;
} else {
lastahelsid='' + ahels[jkh].id;
lastahelstitle='' + ('' + ahels[jkh].title).split('Permalink to ')[1];
}
}
}
}
}
if (lastahelsid != '' && lastahelstitle != '') {
hels[0].innerHTML+=' ... <a href="#' + lastahelsid + '" title="' + lastahelstitle + '">Oldest</a> ';
}
}
}
}

“; ?>

… the user just adds a trailing space to their entered GETME search textbox entry, to pre-empt the underlying HTML form navigation and, instead, do a navigation such as …


https://www.rjmprogramming.com.au/ITblog/?s=cowsay.php_GETME&wopenall=cowsay.php_GETME&ifnooldestdoone=y

… to, sometimes, see these new Oldest type hashtag link helpers.


Previous relevant WordPress Blog Byline Zoom Fix Tutorial is shown below.

WordPress Blog Byline Zoom Fix Tutorial

WordPress Blog Byline Zoom Fix Tutorial

That’s it! We’re doing something today regarding …

How on non-mobile, with this blog, the byline …
A “Dot Dot Dot” Information Technology Blog
… can mal-align as a user zooms in or out.

And we were doing things for the first time we can remember, regarding the fix, which we weren’t expecting. So …

For the first time we can remember …

  • for a position: absolute “overlay” scenerio … we did not use a left: 123px style of positioning … but, rather …
  • used a right: 45.6% style of positioning …
  • lining the byline’s right with the blog title’s right … more or less …
  • making the byline more central …
  • giving it more “wander room” as a user zooms in or out

Ever since the advent of “mobile” platforms, the idea of “zoom” has become more and more of a “mute point”, but not for “non-mobile”, as with this “kind of unusual” adding, via “overlay” idea, regarding HTML elements.

On this topic, we’d like to thank this excellent link which reminded us that “responsive design”‘s biggest friend is the percent (ie. “%”) unit of webpage measure!

By the way, even on “non-mobile”, the window.onresize event is triggered we found, but once there we struggled to do much about the mal-alignment zooming in or out was sometimes doing to the byline off to the left.

The new code (intervention, that made the difference), in good ol’ header.php?

<?php echo ”

function bylinedo() {
var ahuhrect=document.getElementById('access').getBoundingClientRect();
var huhrect=document.getElementById('ahomeis').getBoundingClientRect();
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPod|Opera Mini|IEMobile/i)) {
document.getElementById('ahomeis').innerHTML=document.getElementById('ahomeis').innerHTML.replace(' Blog', ' <span id=sbyline><font size=2><i><strong>... I.T.</strong></i></font></span> Blog');
} else {
//document.getElementById('hdgspan').innerHTML+='<span id=sbyline style="position:absolute;left:' + ahuhrect.left + 'px;top:' + eval(53 + eval('' + huhrect.top)) + 'px;"><font size=2><i><strong>A "Dot Dot Dot" Information Technology Blog</strong></i></font></span>';
//alert('sw=' + screen.width + ' al=' + ahuhrect.left + ' ... ' + eval(100 * eval('' + screen.width) / eval('' + ahuhrect.left)));
// Thanks to https://stackoverflow.com/questions/995914/catch-browsers-zoom-event-in-javascript
document.getElementById('hdgspan').innerHTML+='<span id=sbyline style="position:absolute;right:' + eval(100 * eval('' + huhrect.right) / eval('' + screen.width)) + '%;top:' + eval(53 + eval('' + huhrect.top)) + 'px;"><font size=2><i><strong>A "Dot Dot Dot" Information Technology Blog</strong></i></font></span>';
//window.onresize=function(){ alert(65); var bhuhrect=document.getElementById('access').getBoundingClientRect(); document.getElementById('hdgspan').style.left='' + bhuhrect.left + 'px'; };
}
}

“; ?>

If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.

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

WordPress Visual Synopsis Media Tutorial

WordPress Visual Synopsis Media Tutorial

WordPress Visual Synopsis Media Tutorial

Some time ago now we added a Visual Synopsis piece of functionality (via 🎦 &#127910; button up the top) to our WordPress blog workings you can read more about at WordPress Visual Synopsis Automated Scrolling Tutorial.

We’re revisiting this, because now that we have the great ffmpeg as a publicly installed Open Source media creating software suite up at the RJM Programming AlmaLinux web server, this has changed the dynamics regarding media creation. In other words, it’s a lot easier!

So a sequence of images, that the Visual Synopsis is, represents a “moving pictures” chance to offer to the user the chance to turn this into media, either ffmpeg created …

  • video
  • animated GIF

… via these changes to TwentyTen theme’s header.php as per …

<?php echo ”

function uptop() {
var ifnum=1;
if (onlok) {
var calign='center', endnextp, preendnextp, nexttitle="", prevtitle="", prevbprefix="", bprefix="", preexambit, exambit, ivsbitsare, preendp, endp, endpsuffix="", doittoday=false, uptopdiv="<div id='slide" + "showdiv' style='border: 20px solid yellow;height: 680px; overflow: scroll;' onclick='if (!presscr) { sscr=false; } presscr=false;'> <b><font color=green><h3 id='vssh'>Visual Synopsis (Slideshows) ... <a href='#backtoblog' title='Back to Blog'>Back to Blog</a> ... <a href='#vssh' id='asscr' onclick='if (!sscr) { presscr=true; sscr=true; startscrolling(); } else { sscr=false; }; ' title='Scroll to Right'>Scroll to Right</a></h3></font></b><br><iframe name=mycowifr id=mycowifr style=display:none; src=/About_Us.html></iframe><form target=mycowifr action=/cowsay.php method=POST id=mycowpf><div id=divcowpf></div><input type=submit id=vlist style=display:none; name=vlist value=Video></input> <input type=submit style=display:none; id=aglist name=aglist value='Animated GIF'></input></form><table cellpadding=20><tbody><tr></tr></tbody></table></div><p id='backtoblog'></p>";
var vsbitsare=docgetclass("wp-caption", "div");
var wasih=document.body.innerHTML;
if (wasih.indexOf("slid" + "eshowdiv") == -1) {
for (ivsbitsare=0; ivsbitsare<vsbitsare.length; ivsbitsare++) {
if (vsbitsare[ivsbitsare].innerHTML.indexOf("youtube.com/watch") == -1 && vsbitsare[ivsbitsare].innerHTML.indexOf("mywta") == -1) {
if (uptopdiv.indexOf(encodeURIComponent(vsbitsare[ivsbitsare].innerHTML)) == -1) {
bprefix="";
nexttitle="";
exambit=document.body.innerHTML.split(vsbitsare[ivsbitsare].innerHTML);
if (exambit.length > 1) {
preexambit=exambit[0].split("<");
//alert("" + preexambit[eval(-1 + preexambit.length)].indexOf("div ") + "" + preexambit[eval(-2 + preexambit.length)].indexOf("/p") + "" + preexambit[eval(-3 + preexambit.length)] + "..." + preexambit[eval(-4 + preexambit.length)]);
if (uptopdiv.indexOf(encodeURIComponent(vsbitsare[eval(0 + ivsbitsare)].innerHTML)) == -1 && preexambit[eval(-1 + preexambit.length)].indexOf("div ") == 0 && preexambit[eval(-2 + preexambit.length)].indexOf("/p") == 0 && preexambit[eval(-3 + preexambit.length)].indexOf("/a") == 0 && preexambit[eval(-4 + preexambit.length)].indexOf("a ") == 0 && preexambit[eval(-5 + preexambit.length)].indexOf("p ") == 0 && preexambit[eval(-6 + preexambit.length)].indexOf("hr") == 0) {
bprefix=" ";
if (eval(1 + ivsbitsare) < eval(vsbitsare.length)) {
endnextp=vsbitsare[eval(1 + ivsbitsare)].innerHTML.split("</p>");
if (endnextp.length > 1) {
if (endnextp[eval(-1 + endnextp.length)] == "") {
preendnextp=endnextp[eval(-2 + endnextp.length)].split(">");
} else {
preendnextp=endnextp[eval(-1 + endnextp.length)].split(">");
}
nexttitle=preendnextp[eval(-1 + preendnextp.length)];
exambit=document.body.innerHTML.split(vsbitsare[eval(1 + ivsbitsare)].innerHTML);
if (exambit.length > 1) {
preexambit=exambit[0].split("<");
if (uptopdiv.indexOf(encodeURIComponent(vsbitsare[eval(1 + ivsbitsare)].innerHTML)) == -1 && preexambit[eval(-1 + preexambit.length)].indexOf("div ") == 0 && preexambit[eval(-2 + preexambit.length)].indexOf("/p") == 0 && preexambit[eval(-3 + preexambit.length)].indexOf("/a") == 0 && preexambit[eval(-4 + preexambit.length)].indexOf("a ") == 0 && preexambit[eval(-5 + preexambit.length)].indexOf("p ") == 0 && preexambit[eval(-6 + preexambit.length)].indexOf("hr") == 0) {
nexttitle=nexttitle; //preendnextp[eval(-1 + preendnextp.length)];
} else {
nexttitle="";
}
}
}
}
} else if (eval(1 + ivsbitsare) < eval(vsbitsare.length)) {
endnextp=vsbitsare[eval(eval(1 + ivsbitsare))].innerHTML.split("</p>");
if (endnextp.length > 1) {
if (endnextp[eval(-1 + endnextp.length)] == "") {
preendnextp=endnextp[eval(-2 + endnextp.length)].split(">");
} else {
preendnextp=endnextp[eval(-1 + endnextp.length)].split(">");
}
if (1 == 2) nexttitle=preendnextp[eval(-1 + preendnextp.length)];
}
exambit=document.body.innerHTML.split(vsbitsare[eval(1 + ivsbitsare)].innerHTML);
if (exambit.length > 1) {
preexambit=exambit[0].split("<");
if (uptopdiv.indexOf(encodeURIComponent(vsbitsare[eval(1 + ivsbitsare)].innerHTML)) == -1 && preexambit[eval(-1 + preexambit.length)].indexOf("div ") == 0 && preexambit[eval(-2 + preexambit.length)].indexOf("/p") == 0 && preexambit[eval(-3 + preexambit.length)].indexOf("/a") == 0 && preexambit[eval(-4 + preexambit.length)].indexOf("a ") == 0 && preexambit[eval(-5 + preexambit.length)].indexOf("p ") == 0 && preexambit[eval(-6 + preexambit.length)].indexOf("hr") == 0) {
bprefix=" ";
prevtitle="";
nexttitle=preendnextp[eval(-1 + preendnextp.length)];
} else {
nexttitle="";
}
}
}
}
if (bprefix == "") prevtitle="";
endpsuffix="";
endp=vsbitsare[ivsbitsare].innerHTML.split("</p>");
calign='center';
if (bprefix == " ") calign='left';
if (bprefix == " " && nexttitle == "") calign='right';
if (endp.length > 1) {
if (endp[eval(-1 + endp.length)] == "") {
preendp=endp[eval(-2 + endp.length)].split(">");
endpsuffix="<br><div align='" + calign + "'><font color=gray>" + breadcrumbit("<a id='top_" + urlit(preendp[eval(-1 + preendp.length)]) + "' target=_blank title='" + preendp[eval(-1 + preendp.length)] + "' href='//www.rjmprogramming.com.au/ITblog/" + urlit(preendp[eval(-1 + preendp.length)]) + "'>" + preendp[eval(-1 + preendp.length)] + "</a>", bprefix, prevtitle, nexttitle) + "</font></div>";
} else {
preendp=endp[eval(-1 + endp.length)].split(">");
endpsuffix="<br><div align='" + calign + "'><font color=gray>" + breadcrumbit("<a id='top_" + urlit(preendp[eval(-1 + preendp.length)]) + "' target=_blank title='" + preendp[eval(-1 + preendp.length)] + "' href='//www.rjmprogramming.com.au/ITblog/" + urlit(preendp[eval(-1 + preendp.length)]) + "'>" + preendp[eval(-1 + preendp.length)] + "</a>", bprefix, prevtitle, nexttitle) + "</font></div>";
}
}
prevbprefix=bprefix;
prevtitle=preendp[eval(-1 + preendp.length)];
if (uptopdiv.indexOf(encodeURIComponent(vsbitsare[eval(0 + ivsbitsare)].innerHTML)) == -1) { uptopdiv=uptopdiv.replace('</tr>', '<td id="td_' + urlit(preendp[eval(-1 + preendp.length)]) + '" style="border: 5px orange solid;">' + endpsuffix.replace('<br>','') + '<br><iframe id="vif' + ifnum + '" onload="vifchk(this);" style="width: 640px;height: 600px;" src="' + "//www.rjmprogramming.com.au/wordpress/clicktheslideshow.php?somebodyhtml=" + encodeURIComponent(vsbitsare[ivsbitsare].innerHTML) + '"></iframe>' + endpsuffix.replace(/top_/g, "bottom_").replace(/#bottom_/g, "#top_") + '</td></tr>'); ifnum++; }
doittoday=true;
}
}
}
if (doittoday) {
document.body.innerHTML = uptopdiv + wasih;
if (document.getElementById('sbyline')) {
document.getElementById('sbyline').innerHTML='';
}
window.scrollTo(0,0);
}
}
}
}

function vifchk(iois) {
var myimgref=0;
if (('' + iois.id).indexOf('vif') == 0) {
myimgref='' + ('' + iois.id).substring(3);
if (iois != null) {
var gaaconto = (iois.contentWindow || iois.contentDocument);
if (gaaconto != null) {
if (gaaconto.document) { gaaconto = gaaconto.document; }
if (gaaconto.body != null) {
var imgsare=gaaconto.getElementsByTagName('img');
if (eval('' + imgsare.length) > 0) {
document.getElementById('divcowpf').innerHTML+='<input type=hidden name=vandagimg' + myimgref + ' value="' + ('' + imgsare[0].src) + '"></input>';
document.getElementById('aglist').style.display='inline-block';
document.getElementById('vlist').style.display='inline-block';
}
}
}
}
}
}


“; ?>

… to team up with our changed latest draft cowsay.php code …

<?php

if (isset($_POST['vlist']) && isset($_POST['vandagimg1'])) {
$lenv='1';
$iext='jpg';
$theeyes='';
foreach (glob('/tmp/imagerequestwp_' . server_remote_addr() . '-*.*') as $medfil) {
unlink($medfil);
}
if (strpos(('~' . $_POST['vandagimg' . (0 + $lenv)]), '~data') !== false) {
$cont=str_replace(' ','+',urldecode($_POST['vandagimg' . (0 + $lenv)]));
$slidename='/tmp/imagerequestwp_' . server_remote_addr() . '-' . substr(('000' . $lenv),-3,3) . '.' . explode(';', explode('image/', $cont)[1])[0];
file_put_contents($slidename, base64_decode(explode(';base64,',$cont)[1]));
$theeyes.=testgif(' -framerate 2 -i ' . $slidename . ' ');
} else if (strpos(urldecode($_POST['vandagimg' . (0 + $lenv)]), 'rjmprogramming.com.au/') !== false) {
$theeyes.=testgif(' -framerate 2 -i ' . $_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . explode('rjmprogramming.com.au/', str_replace('+',' ',urldecode($_POST['vandagimg' . (0 + $lenv)])))[1] . ' ');
} else if (strpos(urldecode($_POST['vandagimg' . (0 + $lenv)]), '//') !== false) {
$cont=file_get_contents('http://' . explode('//', str_replace('+',' ',urldecode($_POST['vandagimg' . (0 + $lenv)])))[1]);
$slidename='/tmp/imagerequestwp_' . server_remote_addr() . '-' . substr(('000' . $lenv),-3,3) . '.' . explode('.', str_replace('+',' ',urldecode($_POST['vandagimg' . (0 + $lenv)])))[-1 + sizeof(explode('.', str_replace('+',' ',urldecode($_POST['vandagimg' . (0 + $lenv)]))))];
file_put_contents($slidename, base64_decode(explode(';base64,',$cont)[1]));
$theeyes.=testgif(' -framerate 2 -i ' . $slidename . ' ');
} else {
$theeyes.=testgif(' -framerate 2 -i ' . $_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . str_replace('+',' ',urldecode($_POST['vandagimg' . (0 + $lenv)])) . ' ');
}
while (isset($_POST['vandagimg' . (1 + $lenv)])) {
$lenv='' . (1 + $lenv);
if (strpos(('~' . $_POST['vandagimg' . (0 + $lenv)]), '~data') !== false) {
$cont=str_replace(' ','+',urldecode($_POST['vandagimg' . (0 + $lenv)]));
$slidename='/tmp/imagerequestwp_' . server_remote_addr() . '-' . substr(('000' . $lenv),-3,3) . '.' . explode(';', explode('image/', $cont)[1])[0];
file_put_contents($slidename, base64_decode(explode(';base64,',$cont)[1]));
$theeyes.=testgif(' -framerate 2 -i ' . $slidename . ' ');
} else if (strpos(urldecode($_POST['vandagimg' . (0 + $lenv)]), 'rjmprogramming.com.au/') !== false) {
$theeyes.=testgif(' -framerate 2 -i ' . $_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . explode('rjmprogramming.com.au/', str_replace('+',' ',urldecode($_POST['vandagimg' . (0 + $lenv)])))[1] . ' ');
} else if (strpos(urldecode($_POST['vandagimg' . (0 + $lenv)]), '//') !== false) {
$cont=file_get_contents('http://' . explode('//', str_replace('+',' ',urldecode($_POST['vandagimg' . (0 + $lenv)])))[1]);
$slidename='/tmp/imagerequestwp_' . server_remote_addr() . '-' . substr(('000' . $lenv),-3,3) . '.' . explode('.', str_replace('+',' ',urldecode($_POST['vandagimg' . (0 + $lenv)])))[-1 + sizeof(explode('.', str_replace('+',' ',urldecode($_POST['vandagimg' . (0 + $lenv)]))))];
file_put_contents($slidename, base64_decode(explode(';base64,',$cont)[1]));
$theeyes.=testgif(' -framerate 2 -i ' . $slidename . ' ');
} else {
$theeyes.=testgif(' -framerate 2 -i ' . $_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . str_replace('+',' ',urldecode($_POST['vandagimg' . (0 + $lenv)])) . ' ');
}
}
if (file_exists('/tmp/videowp' . server_remote_addr() . '.mp4')) {
unlink('/tmp/videowp' . server_remote_addr() . '.mp4');
}
exec('ffmpeg ' . $theeyes . ' -vcodec libx264 -crf 22 /tmp/videowp' . server_remote_addr() . '.mp4');
echo "<html><body onload=\" if (parent.document.getElementById('slideshowdiv')) { parent.document.getElementById('slideshowdiv').style.height='1680px'; } if (parent.document.getElementById('divcowpf')) { if (parent.document.getElementById('mysource')) { parent.document.getElementById('mysource').src='data:video/mp4;base64," . base64_encode(file_get_contents('/tmp/videowp' . server_remote_addr() . '.mp4')) . "'; } else { parent.document.getElementById('divcowpf').innerHTML+='<details open><summary>Video version below ...</summary><video id=myvideo controls><source id=mysource type=video/mp4 src=' + String.fromCharCode(39) + 'data:video/mp4;base64," . base64_encode(file_get_contents('/tmp/videowp' . server_remote_addr() . '.mp4')) . "' + String.fromCharCode(39) + '></source></video></details>'; } } \"></body></html>";
exit;
} else if (isset($_POST['aglist']) && isset($_POST['vandagimg1'])) {
//file_put_contents('/tmp/ag0.0', 'y');
$lenv='1';
$iext='jpg';
$theeyes='';
foreach (glob('/tmp/imagerequestwp_' . server_remote_addr() . '-*.*') as $medfil) {
unlink($medfil);
}
//file_put_contents('/tmp/ag0.1', 'y');
if (strpos(('~' . $_POST['vandagimg' . (0 + $lenv)]), '~data') !== false) {
$cont=str_replace(' ','+',urldecode($_POST['vandagimg' . (0 + $lenv)]));
$slidename='/tmp/imagerequestwp_' . server_remote_addr() . '-' . substr(('000' . $lenv),-3,3) . '.' . explode(';', explode('image/', $cont)[1])[0];
file_put_contents($slidename, base64_decode(explode(';base64,',$cont)[1]));
$theeyes.=testgif(' -framerate 2 -i ' . $slidename . ' ');
} else if (strpos(urldecode($_POST['vandagimg' . (0 + $lenv)]), 'rjmprogramming.com.au/') !== false) {
$theeyes.=testgif(' -framerate 2 -i ' . $_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . explode('rjmprogramming.com.au/', str_replace('+',' ',urldecode($_POST['vandagimg' . (0 + $lenv)])))[1] . ' ');
} else if (strpos(urldecode($_POST['vandagimg' . (0 + $lenv)]), '//') !== false) {
$cont=file_get_contents('http://' . explode('//', str_replace('+',' ',urldecode($_POST['vandagimg' . (0 + $lenv)])))[1]);
$slidename='/tmp/imagerequestwp_' . server_remote_addr() . '-' . substr(('000' . $lenv),-3,3) . '.' . explode('.', str_replace('+',' ',urldecode($_POST['vandagimg' . (0 + $lenv)])))[-1 + sizeof(explode('.', str_replace('+',' ',urldecode($_POST['vandagimg' . (0 + $lenv)]))))];
file_put_contents($slidename, base64_decode(explode(';base64,',$cont)[1]));
$theeyes.=testgif(' -framerate 2 -i ' . $slidename . ' ');
} else {
$theeyes.=testgif(' -framerate 2 -i ' . $_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . str_replace('+',' ',urldecode($_POST['vandagimg' . (0 + $lenv)])) . ' ');
}
//file_put_contents('/tmp/ag0.2', 'y');
while (isset($_POST['vandagimg' . (1 + $lenv)])) {
$lenv='' . (1 + $lenv);
//file_put_contents('/tmp/ag' . $lenv . '.3', 'y');
if (strpos(('~' . $_POST['vandagimg' . (0 + $lenv)]), '~data') !== false) {
$cont=str_replace(' ','+',urldecode($_POST['vandagimg' . (0 + $lenv)]));
$slidename='/tmp/imagerequestwp_' . server_remote_addr() . '-' . substr(('000' . $lenv),-3,3) . '.' . explode(';', explode('image/', $cont)[1])[0];
file_put_contents($slidename, base64_decode(explode(';base64,',$cont)[1]));
$theeyes.=testgif(' -framerate 2 -i ' . $slidename . ' ');
} else if (strpos(urldecode($_POST['vandagimg' . (0 + $lenv)]), 'rjmprogramming.com.au/') !== false) {
$theeyes.=testgif(' -framerate 2 -i ' . $_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . explode('rjmprogramming.com.au/', str_replace('+',' ',urldecode($_POST['vandagimg' . (0 + $lenv)])))[1] . ' ');
} else if (strpos(urldecode($_POST['vandagimg' . (0 + $lenv)]), '//') !== false) {
$cont=file_get_contents('http://' . explode('//', str_replace('+',' ',urldecode($_POST['vandagimg' . (0 + $lenv)])))[1]);
$slidename='/tmp/imagerequestwp_' . server_remote_addr() . '-' . substr(('000' . $lenv),-3,3) . '.' . explode('.', str_replace('+',' ',urldecode($_POST['vandagimg' . (0 + $lenv)])))[-1 + sizeof(explode('.', str_replace('+',' ',urldecode($_POST['vandagimg' . (0 + $lenv)]))))];
file_put_contents($slidename, base64_decode(explode(';base64,',$cont)[1]));
$theeyes.=testgif(' -framerate 2 -i ' . $slidename . ' ');
} else {
$theeyes.=testgif(' -framerate 2 -i ' . $_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . str_replace('+',' ',urldecode($_POST['vandagimg' . (0 + $lenv)])) . ' ');
}
}
//file_put_contents('/tmp/ag0.4', 'y');
if (file_exists('/tmp/agifwp' . server_remote_addr() . '.gif')) {
unlink('/tmp/agifwp' . server_remote_addr() . '.gif');
}
//file_put_contents('/tmp/ag0.5', 'y');
file_put_contents('/tmp/agok.ok', 'ffmpeg ' . $theeyes . ' /tmp/agifwp' . server_remote_addr() . '.gif 2> /tmp/agbad.bad');
exec('ffmpeg ' . $theeyes . ' /tmp/agifwp' . server_remote_addr() . '.gif 2> /tmp/agbad.bad');
echo "<html><body onload=\" if (parent.document.getElementById('slideshowdiv')) { parent.document.getElementById('slideshowdiv').style.height='1680px'; } if (parent.document.getElementById('divcowpf')) { if (parent.document.getElementById('mygif')) { parent.document.getElementById('mygif').src='data:image/gif;base64," . base64_encode(file_get_contents('/tmp/agifwp' . server_remote_addr() . '.gif')) . "'; } else { parent.document.getElementById('divcowpf').innerHTML+='<details open><summary>Animated GIF version below ...</summary><img id=mygif src=' + String.fromCharCode(39) + 'data:image/gif;base64," . base64_encode(file_get_contents('/tmp/agifwp' . server_remote_addr() . '.gif')) . "' + String.fromCharCode(39) + '></img></details>'; } } \"></body></html>";
exit;
}

?>

Did you know?

Hang on! Just a minute there, #@$@#@$@#! What’s with … testgif() above, $%#?

Well, we’re learning, but from what seems to be the go, an animated GIF input to an ffmpeg command needs no framerate mention, and it will fail if you do mention it and your *.gif is an animated GIF … happily always the case with the way this WordPress Blog rolls …

<?php

function testgif($infbit) {
if (strpos(strtolower($infbit . '~'), '.gif ~') !== false) {
return ' -i ' . explode(' -i ', $infbit)[1];
}
return $infbit;
}

?>

We’re learning too …





Previous relevant WordPress Visual Synopsis Automated Scrolling Tutorial is shown below.

WordPress Visual Synopsis Automated Scrolling Tutorial

WordPress Visual Synopsis Automated Scrolling Tutorial

Yesterday, with WordPress Visual Synopsis Slideshow Posting Links Tutorial as shown below, we continued on with our Visual Synopsis view functionality for this blog, adding some Blog Posting Links, and today, we allow for an automated left to right scrolling functionality.

With this automated scrolling we involved a “location.href=’#td_[blog_posting_permalink_code]’;” arrangement rather that a “window.scrollBy(x,y);” or “window.scrollTo(x,y);” method, as this is what worked best on Firefox.

So what coding changes were needed for this blog automated scrolling? It was only the TwentyTen theme’s header.php PHP code (of Javascript) that changed for today’s requirements in bold itallic specifically for today bold itallic specifically for yesterday and just bold for earlier work …

  • header.php bold onload event changes, as per our usual pattern, as shown below with …



    var sscr=false;
    var xsscr=0;
    var presscr=false;
    function startscrolling() {
    if (sscr) {
    document.getElementById('slide' + 'showdiv').style.borderStyle='dotted';
    xsscr++;
    var tdplaces=document.body.innerHTML.split('<td id="td_');
    if (xsscr >= tdplaces.length) xsscr=1;
    var pretdplaces=tdplaces[xsscr].split('"');
    if (1 == 1) {
    location.href='#td_' + pretdplaces[0];
    } else {
    document.title=xsscr;
    window.scrollTo(xsscr, 0);
    document.title='+' + xsscr;
    }
    setTimeout(startscrolling, 1000);
    } else {
    document.getElementById('slide' + 'showdiv').style.borderStyle='solid';
    }
    }

    function uptop() {
    var calign='center', endnextp, preendnextp, nexttitle="", prevtitle="", prevbprefix="", bprefix="", preexambit, exambit, ivsbitsare, preendp, endp, endpsuffix="", doittoday=false, uptopdiv="<div id='slide" + "showdiv' style='border: 20px solid yellow;height: 680px; overflow: scroll;' onclick='if (!presscr) { sscr=false; } presscr=false;'> <b><font color=green><h3 id='vssh'>Visual Synopsis (Slideshows) ... <a href='#backtoblog' title='Back to Blog'>Back to Blog</a> ... <a href='#vssh' id='asscr' onclick='if (!sscr) { presscr=true; sscr=true; startscrolling(); } else { sscr=false; }; ' title='Scroll to Right'>Scroll to Right</a></h3></font></b><br><table cellpadding=20><tbody><tr></tr></tbody></table></div><p id='backtoblog'></p>";

    ...

    We, again+, hope you try it (you’re here, again+ … yoo hoo!, again+), and, again+, like it. Again+?


    Previous relevant WordPress Visual Synopsis Slideshow Posting Links Tutorial is shown below.

    WordPress Visual Synopsis Slideshow Posting Links Tutorial

    WordPress Visual Synopsis Slideshow Posting Links Tutorial

    Yesterday, with WordPress Visual Synopsis Slideshow Primer Tutorial as shown below, we started on some Visual Synopsis view functionality for this blog. We got to the point that the blog postings could be summarised up the top in a table enforcing a horizontal line of images and/or slideshow presentations representing the blog posts on the web page the user is currently on. We discuss this also at WordPress 4.1.1 with WordPress Visual Synopsis Slideshow Posting Links Tutorial.

    An improvement to this functionality we’ve been developing today is to add some meaning to the relationship between these blog postings because at this blog, blog postings can …

    1. stand alone as a piece of work … or …
    2. be the most recent of a series of blog postings linked, usually reverse chronologically, but not always … or …
    3. be in the middle of a series of blog postings linked … or …
    4. be the oldest of a series of blog postings linked … quite often our “… Primer Tutorial” type of blog posting

    We’d like to have the Visual Synopsis reflect these relationships in some ways, so we, respectively …

    1. center justify the blog posting titles for these … and …
    2. left justify the blog posting titles for these and add a single right arrow link to navigate to the next (older) Visual Synopsis cell and add a double right arrow link to navigate to the next (older) Visual Synopsis cell’s blog posting into a new webpage … and …
    3. center justify the blog posting titles for these and add a single left/right arrow link to navigate to the previous/next (more recent/older) Visual Synopsis cell and and add a double left/right arrow link to navigate to the previous/next (more recent/older) Visual Synopsis cell’s blog posting into a new webpage … and …
    4. right justify the blog posting titles for these and add a single left arrow link to navigate to the previous (more recent) Visual Synopsis cell and and add a double left arrow link to navigate to the previous (more recent) Visual Synopsis cell’s blog posting into a new webpage

    This is a bit like the very well established web design idea of “breadcrumbs” that you see so often on the web, including WordPress blogs.

    So what coding changes were needed for this blog posting linking? It was only the TwentyTen theme’s header.php PHP code (of Javascript) that changed for today’s requirements in bold itallic specifically for today and just bold for yesterday’s work …

    • header.php bold onload event changes, as per our usual pattern, as shown below with …

      <script type='text/javascript'>
      // ... etc etc etc

      var morex=0;
      var prevred="";
      var thisred="";
      var pleaseclickit=false;
      function sctop() {
      if (prevred != "") {
      document.getElementById(prevred).style.borderColor='orange';
      }
      if (thisred != "") {
      document.getElementById(thisred).style.borderColor='red';
      prevred=thisred;
      }
      if (pleaseclickit) {
      document.getElementById(thisred.replace('td_','top_')).click();
      pleaseclickit=false;
      }
      window.scrollBy(morex,-50);
      morex=0;
      }
      function urlit(upc) {
      var retlc=upc.toLowerCase();
      while (retlc.indexOf("/") != -1) {
      retlc=retlc.replace("/","");
      }
      while (retlc.indexOf("+") != -1) {
      retlc=retlc.replace("+","");
      }
      while (retlc.indexOf("'") != -1) {
      retlc=retlc.replace("'","");
      }
      while (retlc.indexOf(" ") != -1) {
      retlc=retlc.replace(" ","-");
      }
      return retlc;
      }
      function breadcrumbit(thisa, statuschars, prevt, nextt) {
      var reta=thisa;
      var topp="top";
      if (thisa.indexOf("bottom_") != -1) topp="bottom";
      if (statuschars == " " && prevt != "" && nextt != "") {
      reta='<a id="ps_' + urlit(prevt) + '" onclick="thisred=' + "'td_" + urlit(prevt) + "'" + '; pleaseclickit=true; morex=-350; setTimeout(sctop,1000); " href=#' + topp + '_' + urlit(prevt) + " title='" + prevt + "'> ⇇ </a>" + '<a id="s_' + urlit(prevt) + '" onclick="thisred=' + "'td_" + urlit(prevt) + "'" + '; morex=-350; setTimeout(sctop,1000); " href=#' + topp + '_' + urlit(prevt) + " title='" + prevt + "'> ← </a>" + thisa + '<a id="e_' + urlit(nextt) + '" onclick="thisred=' + "'td_" + urlit(nextt) + "'" + '; morex=350; setTimeout(sctop,1000); " href=#' + topp + '_' + urlit(nextt) + " title='" + nextt + "'> → </a>" + '<a id="e_' + urlit(nextt) + '" onclick="thisred=' + "'td_" + urlit(nextt) + "'" + '; pleaseclickit=true; morex=350; setTimeout(sctop,1000); " href=#' + topp + '_' + urlit(nextt) + " title='" + nextt + "'> ⇉ </a>";
      } else if (statuschars == " " && prevt != "" && nextt == "") {
      reta='<a id="ps_' + urlit(prevt) + '" onclick="thisred=' + "'td_" + urlit(prevt) + "'" + '; pleaseclickit=true; morex=-350; setTimeout(sctop,1000); " href=#' + topp + '_' + urlit(prevt) + " title='" + prevt + "'> ⇇ </a>" + '<a id="s_' + urlit(prevt) + '" onclick="thisred=' + "'td_" + urlit(prevt) + "'" + '; morex=-350; setTimeout(sctop,1000); " href=#' + topp + '_' + urlit(prevt) + " title='" + prevt + "'> ← </a>" + thisa;
      } else if (nextt != "" && prevt == "") {
      reta=thisa + '<a id="e_' + urlit(nextt) + '" onclick="thisred=' + "'td_" + urlit(nextt) + "'" + '; morex=350; setTimeout(sctop,1000); " href=#' + topp + '_' + urlit(nextt) + " title='" + nextt + "'> → </a>" + '<a id="ne_' + urlit(nextt) + '" onclick="thisred=' + "'td_" + urlit(nextt) + "'" + '; pleaseclickit=true; morex=350; setTimeout(sctop,1000); " href=#' + topp + '_' + urlit(nextt) + " title='" + nextt + "'> ⇉ </a>";
      }
      return reta;
      }

      function uptop() {
      var calign='center', endnextp, preendnextp, nexttitle="", prevtitle="", prevbprefix="", bprefix="", preexambit, exambit, ivsbitsare, preendp, endp, endpsuffix="", doittoday=false, uptopdiv="<div id='slide" + "showdiv' style='border: 20px solid yellow;height: 680px; overflow: scroll;'> <b><font color=green><h3>Visual Synopsis (Slideshows) ... <a href='#backtoblog' title='Back to Blog'>Back to Blog</a></h3></font></b><br><table cellpadding=20><tbody><tr></tr></tbody></table></div><p id='backtoblog'></p>";
      var vsbitsare=docgetclass("wp-caption", "div");
      var wasih=document.body.innerHTML;
      if (wasih.indexOf("slid" + "eshowdiv") == -1) {
      for (ivsbitsare=0; ivsbitsare<vsbitsare.length; ivsbitsare++) {
      if (vsbitsare[ivsbitsare].innerHTML.indexOf("youtube.com/watch") == -1 && vsbitsare[ivsbitsare].innerHTML.indexOf("mywta") == -1) {
      if (uptopdiv.indexOf(encodeURIComponent(vsbitsare[ivsbitsare].innerHTML)) == -1) {
      bprefix="";
      nexttitle="";
      exambit=document.body.innerHTML.split(vsbitsare[ivsbitsare].innerHTML);
      if (exambit.length > 1) {
      preexambit=exambit[0].split("<");
      if (uptopdiv.indexOf(encodeURIComponent(vsbitsare[eval(0 + ivsbitsare)].innerHTML)) == -1 && preexambit[eval(-1 + preexambit.length)].indexOf("div ") == 0 && preexambit[eval(-2 + preexambit.length)].indexOf("/p") == 0 && preexambit[eval(-3 + preexambit.length)].indexOf("/a") == 0 && preexambit[eval(-4 + preexambit.length)].indexOf("a ") == 0 && preexambit[eval(-5 + preexambit.length)].indexOf("p ") == 0 && preexambit[eval(-6 + preexambit.length)].indexOf("hr") == 0) {
      bprefix=" ";
      if (eval(1 + ivsbitsare) < eval(vsbitsare.length)) {
      endnextp=vsbitsare[eval(1 + ivsbitsare)].innerHTML.split("</p>");
      if (endnextp.length > 1) {
      if (endnextp[eval(-1 + endnextp.length)] == "") {
      preendnextp=endnextp[eval(-2 + endnextp.length)].split(">");
      } else {
      preendnextp=endnextp[eval(-1 + endnextp.length)].split(">");
      }
      nexttitle=preendnextp[eval(-1 + preendnextp.length)];
      exambit=document.body.innerHTML.split(vsbitsare[eval(1 + ivsbitsare)].innerHTML);
      if (exambit.length > 1) {
      preexambit=exambit[0].split("<");
      if (uptopdiv.indexOf(encodeURIComponent(vsbitsare[eval(1 + ivsbitsare)].innerHTML)) == -1 && preexambit[eval(-1 + preexambit.length)].indexOf("div ") == 0 && preexambit[eval(-2 + preexambit.length)].indexOf("/p") == 0 && preexambit[eval(-3 + preexambit.length)].indexOf("/a") == 0 && preexambit[eval(-4 + preexambit.length)].indexOf("a ") == 0 && preexambit[eval(-5 + preexambit.length)].indexOf("p ") == 0 && preexambit[eval(-6 + preexambit.length)].indexOf("hr") == 0) {
      nexttitle=nexttitle; //preendnextp[eval(-1 + preendnextp.length)];
      } else {
      nexttitle="";
      }
      }
      }
      }
      } else if (eval(1 + ivsbitsare) < eval(vsbitsare.length)) {
      endnextp=vsbitsare[eval(eval(1 + ivsbitsare))].innerHTML.split("</p>");
      if (endnextp.length > 1) {
      if (endnextp[eval(-1 + endnextp.length)] == "") {
      preendnextp=endnextp[eval(-2 + endnextp.length)].split(">");
      } else {
      preendnextp=endnextp[eval(-1 + endnextp.length)].split(">");
      }
      if (1 == 2) nexttitle=preendnextp[eval(-1 + preendnextp.length)];
      }
      exambit=document.body.innerHTML.split(vsbitsare[eval(1 + ivsbitsare)].innerHTML);
      if (exambit.length > 1) {
      preexambit=exambit[0].split("<");
      if (uptopdiv.indexOf(encodeURIComponent(vsbitsare[eval(1 + ivsbitsare)].innerHTML)) == -1 && preexambit[eval(-1 + preexambit.length)].indexOf("div ") == 0 && preexambit[eval(-2 + preexambit.length)].indexOf("/p") == 0 && preexambit[eval(-3 + preexambit.length)].indexOf("/a") == 0 && preexambit[eval(-4 + preexambit.length)].indexOf("a ") == 0 && preexambit[eval(-5 + preexambit.length)].indexOf("p ") == 0 && preexambit[eval(-6 + preexambit.length)].indexOf("hr") == 0) {
      bprefix=" ";
      prevtitle="";
      nexttitle=preendnextp[eval(-1 + preendnextp.length)];
      } else {
      nexttitle="";
      }
      }
      }
      }
      if (bprefix == "") prevtitle="";
      endpsuffix="";
      endp=vsbitsare[ivsbitsare].innerHTML.split("</p>");
      calign='center';
      if (bprefix == " ") calign='left';
      if (bprefix == " " && nexttitle == "") calign='right';
      if (endp.length > 1) {
      if (endp[eval(-1 + endp.length)] == "") {
      preendp=endp[eval(-2 + endp.length)].split(">");
      endpsuffix="<br><div align='" + calign + "'><font color=gray>" + breadcrumbit("<a id='top_" + urlit(preendp[eval(-1 + preendp.length)]) + "' target=_blank title='" + preendp[eval(-1 + preendp.length)] + "' href='https://www.rjmprogramming.com.au/ITblog/" + urlit(preendp[eval(-1 + preendp.length)]) + "'>" + preendp[eval(-1 + preendp.length)] + "</a>", bprefix, prevtitle, nexttitle) + "</font></div>";
      } else {
      preendp=endp[eval(-1 + endp.length)].split(">");
      endpsuffix="<br><div align='" + calign + "'><font color=gray>" + breadcrumbit("<a id='top_" + urlit(preendp[eval(-1 + preendp.length)]) + "' target=_blank title='" + preendp[eval(-1 + preendp.length)] + "' href='https://www.rjmprogramming.com.au/ITblog/" + urlit(preendp[eval(-1 + preendp.length)]) + "'>" + preendp[eval(-1 + preendp.length)] + "</a>", bprefix, prevtitle, nexttitle) + "</font></div>";
      }
      }
      prevbprefix=bprefix;
      prevtitle=preendp[eval(-1 + preendp.length)];
      if (uptopdiv.indexOf(encodeURIComponent(vsbitsare[eval(0 + ivsbitsare)].innerHTML)) == -1) uptopdiv=uptopdiv.replace('</tr>', '<td id="td_' + urlit(preendp[eval(-1 + preendp.length)]) + '" style="border: 5px orange solid;">' + endpsuffix.replace('<br>','') + '<br><iframe style="width: 640px;height: 600px;" src="' + "http://www.rjmprogramming.com.au/wordpress/clicktheslideshow.php?somebodyhtml=" + encodeURIComponent(vsbitsare[ivsbitsare].innerHTML) + '"></iframe>' + endpsuffix.replace(/top_/g, "bottom_").replace(/#bottom_/g, "#top_") + '</td></tr>');
      doittoday=true;
      }
      }
      }
      if (doittoday) {
      document.body.innerHTML = uptopdiv + wasih;
      window.scrollTo(0,0);
      }
      }
      }

      function courseCookies() {
      img_alt(); // Make sure all img have alt (=title)
      ajaxcontexthelp_mode(); // Check on Context Help mode
      download_mode(); // Check on Download mode
      metasep(); // meta-sep class dropdown
      checkpt(); // category and tag "oldest"
      rptwo(); // Recent Post images
      ul_li_noclass(); // Alternative to bullet ul/li lists
      winit(); // Ajax functionality 26/11/2014 ... slow hover ... not for mobile
      checkMarginLeftImages();
      //setTimeout(checkAcourseBackground, 3000);
      if ((ourpp != "" || ourpn != "") && ourpp != ourp && ourpn != ourp) {
      quizmaybe('atopn','atopp');
      }

      var stih=document.getElementById('site-title').innerHTML;
      if (stih.indexOf("up" + "top") == -1) { //visualsynopsis=") != -1) {
      document.getElementById('site-title').innerHTML+='<a id="avs" style="text-decoration:none;" href=# onmouseover="getVisualSynopsis(event);" onmouseout="yehbut();" ontouchstart="getVisualSynopsis(event);" ontouchend="yehbut();" onclick=" uptop(); " title="... you can wait for the long hover functionality about Visual Synopsis (Slideshows)">&#127910;</a>';
      if (document.URL.indexOf("visualsynopsis=") != -1) document.getElementById('avs').click();
      }

      // ... etc etc etc
      }
      </script>
      </head>
      <body onload=" setTimeout(initpostedoncc, 3000); widgetcon(); precc(); courseCookies();" <?php body_class(); ?>>

      We, again, hope you try it (you’re here, again … yoo hoo!, again), and, again, like it. Again?


      Previous relevant WordPress Visual Synopsis Slideshow Primer Tutorial is shown below.

      WordPress Visual Synopsis Slideshow Primer Tutorial

      WordPress Visual Synopsis Slideshow Primer Tutorial

      Think I am not alone in hankering for chances to “cut to the chase” when surfing the web, because, although there is great information out there, there can also be too much of it, and users appreciate ways to reduce the amount to take in, on occasions.

      At this blog we try to have a visual side up the top of a blog posting, consisting of a combination of …

      1. one image explaining something about the blog posting … or …
      2. a link to a potential slideshow consisting of several image stills … or …
      3. one image hoverable overable (our so-called “twirl” arrangement, suitable for laptops, at least)

      … before the blog posting wording starts.

      We figure a good “cut to the chase” could be to leave it as that top bit, as a Visual Synopsis (Slideshows) if the blog postings relevant to the WordPress blog webpage the user is currently on. Sounds a bit silly, when you are already on it? Well, we don’t think it is so silly for one of those blog postings that has been developing over time, especially one that has been using many scenario 1 blog postings in a series, because now, if you pick the latest one of these, and choose to invoke this new functionality …

      (which, by the way, is invoked by clicking on the Cinema symbol (&#127910; 🎦) after the word “Blog” up the top of the page)

      … all the relevant images of blog postings will line up from left to right in chronological order.

      Down below we allow you to open a new web page taking you to a WordPress 4.1.1 blog posting, whereas if you click the image of the Visual Synopsis (Slideshows) you may be taken to an image or a slideshow or a live run, perhaps … it depends, but is more often than not more involved with the “cutting to the chase” about the matter than reading the wording of the Blog Posting, perhaps.

      It’s one of those things that some users may like, and others may not.

      So what coding changes were needed for this? It was twofold (basically, though there are Ajax contextual help changes as well), with the usual first suspect being our favourite header.php code changes and then a whole new piece of PHP as per …

      • header.php bold onload event changes, as per our usual pattern, as shown below with …

        <script type='text/javascript'>
        // ... etc etc etc

        function uptop() {
        var preendp, endp, endpsuffix="", doittoday=false, uptopdiv="<div id='slide" + "showdiv' style='border: 20px solid yellow;height: 680px; overflow: scroll;'> <b><font color=green><h3>Visual Synopsis (Slideshows) ... <a href='#backtoblog' title='Back to Blog'>Back to Blog</a></h3></font></b><br><table cellpadding=20><tbody><tr></tr></tbody></table></div><p id='backtoblog'></p>";
        var vsbitsare=docgetclass("wp-caption", "div");
        var wasih=document.body.innerHTML;
        if (wasih.indexOf("slid" + "eshowdiv") == -1) {
        for (var ivsbitsare=0; ivsbitsare<vsbitsare.length; ivsbitsare++) {
        if (vsbitsare[ivsbitsare].innerHTML.indexOf("youtube.com/watch") == -1 && vsbitsare[ivsbitsare].innerHTML.indexOf("mywta") == -1) {
        if (uptopdiv.indexOf(encodeURIComponent(vsbitsare[ivsbitsare].innerHTML)) == -1) {
        endpsuffix="";
        endp=vsbitsare[ivsbitsare].innerHTML.split("</p>");
        if (endp.length > 1) {
        if (endp[eval(-1 + endp.length)] == "") {
        preendp=endp[eval(-2 + endp.length)].split(">");
        endpsuffix="<br><font color=gray><a target=_blank title='" + preendp[eval(-1 + preendp.length)] + "' href='https://www.rjmprogramming.com.au/ITblog/" + preendp[eval(-1 + preendp.length)].toLowerCase().replace("/","").replace(" ","-").replace("/","").replace(" ","-").replace("/","").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-") + "'>" + preendp[eval(-1 + preendp.length)] + "</a></font>";
        } else {
        preendp=endp[eval(-1 + endp.length)].split(">");
        endpsuffix="<br><font color=gray><a target=_blank title='" + preendp[eval(-1 + preendp.length)] + "' href='https://www.rjmprogramming.com.au/ITblog/" + preendp[eval(-1 + preendp.length)].toLowerCase().replace("/","").replace(" ","-").replace("/","").replace(" ","-").replace("/","").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-") + "'>" + preendp[eval(-1 + preendp.length)] + "</a></font>";
        }
        }
        uptopdiv=uptopdiv.replace('</tr>', '<td style="border: 5px orange solid;">' + endpsuffix.replace('<br>','') + '<br><iframe style="width: 640px;height: 600px;" src="' + "http://www.rjmprogramming.com.au/wordpress/clicktheslideshow.php?somebodyhtml=" + encodeURIComponent(vsbitsare[ivsbitsare].innerHTML) + '"></iframe>' + endpsuffix + '</td></tr>');
        doittoday=true;
        }
        }
        }
        if (doittoday) {
        document.body.innerHTML = uptopdiv + wasih;
        window.scrollTo(0,0);
        }
        }
        }

        function courseCookies() {
        img_alt(); // Make sure all img have alt (=title)
        ajaxcontexthelp_mode(); // Check on Context Help mode
        download_mode(); // Check on Download mode
        metasep(); // meta-sep class dropdown
        checkpt(); // category and tag "oldest"
        rptwo(); // Recent Post images
        ul_li_noclass(); // Alternative to bullet ul/li lists
        winit(); // Ajax functionality 26/11/2014 ... slow hover ... not for mobile
        checkMarginLeftImages();
        //setTimeout(checkAcourseBackground, 3000);
        if ((ourpp != "" || ourpn != "") && ourpp != ourp && ourpn != ourp) {
        quizmaybe('atopn','atopp');
        }

        var stih=document.getElementById('site-title').innerHTML;
        if (stih.indexOf("up" + "top") == -1) { //visualsynopsis=") != -1) {
        document.getElementById('site-title').innerHTML+='<a style="text-decoration:none;" href=# onmouseover="getVisualSynopsis(event);" onmouseout="yehbut();" ontouchstart="getVisualSynopsis(event);" ontouchend="yehbut();" onclick=" uptop(); " title="... you can wait for the long hover functionality about Visual Synopsis (Slideshows)">&#127910;</a>';
        }

        // ... etc etc etc
        }
        </script>
        </head>
        <body onload=" setTimeout(initpostedoncc, 3000); widgetcon(); precc(); courseCookies();" <?php body_class(); ?>>
      • clicktheslideshow.php … as you can well imagine there is a lot of PHP file_get_contents
      • Ajax contextual help changes affected wajax.js (the generic Ajax Javascript code, and its vacant looking mate nothing.js) (changed as per wajax.js and nothing.js)

      We hope you try it (you’re here … yoo hoo!), and like it.

      If this was interesting you may be interested in this too.


      If this was interesting you may be interested in this too.


      If this was interesting you may be interested in this too.


      If this was interesting you may be interested in this too.

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

Inhouse Slideshow AlmaLinux Tutorial

Inhouse Slideshow AlmaLinux Tutorial

Inhouse Slideshow AlmaLinux Tutorial

Today we wanted to add so much more to our blog posting title. But, then, we also didn’t want to give the game away?! What a dilemma.

That blog posting title mentions …

  • AlmaLinux … as RJM Programming’s Apache/PHP/MySql web server “brand”, using …
  • PHP 8 … as distinct from the PHP 5’s of the CentOS web server days … and so we suppose we should expect issues like the dreaded …
  • Deprecation … of …
  • Zip … functionality … so sad seeing the early symptoms of this with …
  • Inhouse Slideshow presentations … (as last talked about with Inhouse Slideshow Backup Tidy Up Crontab Curl PHP Tutorial) deprecation warnings

Surprising to us, trying to logically walk though a solution, currently up at our AlmaLinux web server here the PHP …


function_exists

… approach we have used successfully recently did not work here. Anyway, deprecated or non-existant it doesn’t matter, we decided to resort to good ol’ PHP exec methodologies in a new “inhouse slideshow” (featuring in a changed example PHP inhouse slideshow creator web application) call …

<?php

include($_SERVER['DOCUMENT_ROOT'] . "/ziphelper.php");

?>

… containing …


<?php
// ziphelper.php
// RJM Programming
// February, 2025

$gzip_read_output=null;
$gzip_open_handle=null;
$gzip_entry_filename='';
$gzip_filename='';
$gzip_entry_len=0;
$gzip_number=0;
$gzip_log_text='';
if (strpos($_SERVER['REQUEST_URI'], 'index.') !== false) {
$hereis='' . dirname(__FILE__) . explode("index.", $_SERVER['REQUEST_URI'])[0];
} else if (basename($_SERVER['SCRIPT_FILENAME']) != '') {
$hereis=explode(basename($_SERVER['SCRIPT_FILENAME']), realpath($_SERVER['SCRIPT_FILENAME']))[0];
} else {
$hereis='' . dirname(__FILE__) . str_replace('//','/',explode("?", $_SERVER['REQUEST_URI'])[0] . '/');
}
$zipisis='' . $hereis . 'slideshow_0.zip';
$alreadythere=false;

if (file_exists($zipisis)) {
$items = glob($hereis . "*[-_][0-9]*of.[jJgGpP][pPiInN]*");
foreach ($items as $key => $val) {
$alreadythere=true;
}
}

if (!function_exists("zip_entry_read")) {
function zip_entry_read($zip_read_output, $zip_entry_len) {
global $gzip_filename, $gzip_number, $gzip_log_text, $gzip_read_output, $gzip_entry_len;
return 'pork';
}
}

if (!function_exists("zip_entry_filesize")) {
function zip_entry_filesize($zip_read_filename) {
global $gzip_filename, $gzip_number, $gzip_log_text, $gzip_entry_filename;
return 'pork';
}
}

if (!function_exists("zip_read")) {
function zip_read($zip_oben_handle) {
global $gzip_filename, $gzip_number, $gzip_log_text, $gzip_open_handle;
return 'pork';
}
}

if (!function_exists("zip_open")) {
function zip_open($zip_filename) {
global $gzip_filename, $gzip_number, $gzip_log_text, $gzip_filename;
$gzip_filename=$zip_filename;
$gzip_number=0;
$gzip_open_handle='pork';
return 'pork';
}
}

if (!function_exists("zip_entry_name")) {
function zip_entry_name($zip_read_output) {
global $gzip_filename, $gzip_number, $gzip_log_text, $gzip_read_output;
return 'pork';
}
}

if (!function_exists("zip_entry_open")) {
function zip_entry_open($zip_open_handle, $zip_read_output, $inmode) {
global $gzip_filename, $gzip_number, $gzip_log_text, $gzip_open_handle, $gzip_read_output;
return 'pork';
}
}

if (!function_exists("zip_close")) {
function zip_close($zip_open_handle) {
global $gzip_filename, $gzip_number, $gzip_log_text, $gzip_open_handle;
return 'pork';
}
}

if (file_exists($zipisis)) {
if (!$alreadythere) {
file_put_contents($hereis . 'please.wait', "cd " . $hereis . ' ; unzip ' . $zipisis);
sleep(2);
exec("cd " . $hereis . ' ; unzip ' . $zipisis);
sleep(2);
unlink($hereis . 'please.wait');
//exec("cd " . $hereis . ' ; rm -f please.wait');
//if (1 == 1) {
//header('Location: ' . explode('?',$_SERVER['REQUEST_URI'])[0] . '?rand=' . rand(0,674532));
//exit;
//} else {
//sleep(60);
//exec("cd " . $hereis . ' ; rm -f ' . $hereis . '*[-_][0-9]*of.[jJgGpP][pPiInN]*');
//}
//if (basename($_SERVER['SCRIPT_FILENAME']) == 'index.php') {
//sleep(60);
//exec("cd " . $hereis . ' ; rm -f ' . $hereis . '*[-_][0-9]*of.[jJgGpP][pPiInN]*');
//}
//sleep(9);
//echo '<html><body onload="location.href=' . "'" . explode("?", $_SERVER['REQUEST_URI'])[0] . '?rand=' . rand(0,5645342) . "';\"></body></html>";
//exit;
} //else if (basename($_SERVER['SCRIPT_FILENAME']) == 'index.php') {
//sleep(60);
//exec("cd " . $hereis . ' ; rm -f ' . $hereis . '*[-_][0-9]*of.[jJgGpP][pPiInN]*');
//}
}
?>

… as a first draft. We have much more to do trying to resurrect, if possible, some other inhouse PHP web applications we’ve based on the use of Zip in PHP. Pardon us, until tomorrow, while we have a little cry.


Previous relevant Inhouse Slideshow Backup Tidy Up Crontab Curl PHP Tutorial is shown below.

Inhouse Slideshow Backup Tidy Up Crontab Curl PHP Tutorial

Inhouse Slideshow Backup Tidy Up Crontab Curl PHP Tutorial

Crontab is that great scheduling tool that we make use of, a lot, on our RJM Programming Linux CentOS web server. But it’s not only …

  • the timing … of a procedure that is so good about crontab … it is, also, for us, it’s teaming with …
  • curl

… that means we can back up a “peer based” solution such as talked about with Inhouse Slideshow Backup Tidy Up Report Viewing Tutorial (ie. done as a user is surfing the net with some PHP of ours) methodology should it fail. We think we have an occasionally failing one as far as the tidy up of zipped up inhouse slideshows goes. It could be to do with a search engine crawling operation, we have not found out for sure, but we’ve decided to write our own …

  • PHP … via …
  • crontab
  • curl

… based independent tidying up procedure we’ll run once an hour via crontab record …


*/53 * * * curl http://www.rjmprogramming.com.au/slideshow_zero.php

… arrangement. We realize the contents of this PHP procedure may bore some, but interest a few, and so here is what it amounted to …

<?php

// slideshow_zero.php
// Zip and Unzip Tidy Up
// RJM Programming
// Decemeber, 2022
set_time_limit(3600);

if (file_exists("slideshow_zero.txt")) {
unlink("slideshow_zero.txt");
}

if (file_exists("slideshow_zero.kkk")) {
unlink("slideshow_zero.kkk");
}

exec("find " . dirname(__FILE__) . DIRECTORY_SEPARATOR . " -name 'slideshow_0.zip' 2> /dev/null > " . dirname(__FILE__) . DIRECTORY_SEPARATOR . "slideshow_zero.txt");

$lines=file(dirname(__FILE__) . DIRECTORY_SEPARATOR . "slideshow_zero.txt");

$htmlis="<html><body><textarea>
</textarea></body></html>";

for ($i=0; $i<sizeof($lines); $i++) {
$lines[$i]=explode("\n", $lines[$i])[0];
if (file_exists(str_replace("slideshow_0.zip", "index.php", $lines[$i]))) {
if (('' . filesize(str_replace("slideshow_0.zip", "index.php", $lines[$i]))) == '38794') {
if (file_exists("slideshow_zero.txx")) {
unlink("slideshow_zero.txx");
}
exec("unzip -l " . $lines[$i] . " | grep '.jpg' | sed '/^ /s///g' | sed '/^ /s///g' | sed '/^ /s///g' | sed '/^ /s///g' | sed '/^ /s///g' | sed '/ /s// /g' | sed '/ /s// /g' | sed '/ /s// /g' | sed '/ /s// /g' | cut -f4 -d' ' | grep '-' > " . dirname(__FILE__) . DIRECTORY_SEPARATOR . "slideshow_zero.txx");
if (file_exists("slideshow_zero.txx")) {
$sublines=file(dirname(__FILE__) . DIRECTORY_SEPARATOR . "slideshow_zero.txx");
for ($j=0; $j<sizeof($sublines); $j++) {
$sublines[$j]=explode(" ", explode("\n", $sublines[$j])[0])[0];
$fis=explode("slideshow_0.zip", $lines[$i])[0] . $sublines[$j];
if (file_exists($fis)) {
$md=filemtime($fis);
if ($md) {
if ((time() - $md) > 1200) {
if (file_exists("slideshow_zero.kkk")) {
exec("rm -f " . $fis); //file_put_contents("slideshow_zero.kkk", file_get_contents("slideshow_zero.kkk") . "rm -f " . $fis . "\n");
} else {
exec("rm -f " . $fis); //file_put_contents("slideshow_zero.kkk", "rm -f " . $fis . "\n");
}
}
}
}
}
}
} else if (1 == 3) {
if (file_exists("slideshow_zero.kkk")) {
file_put_contents("slideshow_zero.kkk", file_get_contents("slideshow_zero.kkk") . "# " . ('' . filesize(str_replace("slideshow_0.zip", "index.php", $lines[$i]))) . " is not 38794 " . str_replace("slideshow_0.zip", "index.php", $lines[$i]) . "\n");
} else {
file_put_contents("slideshow_zero.kkk", "# " . ('' . filesize(str_replace("slideshow_0.zip", "index.php", $lines[$i]))) . " is not 38794 " . str_replace("slideshow_0.zip", "index.php", $lines[$i]) . "\n");
}
}
}
}

if (file_exists("slideshow_zero.txx")) {
unlink("slideshow_zero.txx");
}

if (file_exists("slideshow_zero.txt")) {
unlink("slideshow_zero.txt");
}

if (file_exists("slideshow_zero.kkk")) {
unlink("slideshow_zero.kkk");
}

//echo $htmlis;
exit;

?>

… as that “ahhhhhhhh, what a relief” reliever of tension running the RJM Programming website. The subtext is, our inode limits are a concern!

We think another lesson here is that PHP can be a good alternative to scripting languages such as Korn Shell to create “operational” procedures, especially when you consider that curl means it can be like writing your “surfing the net” type of PHP (slideshow_zero.php) work.


Previous relevant Inhouse Slideshow Backup Tidy Up Report Viewing Tutorial is shown below.

Inhouse Slideshow Backup Tidy Up Report Viewing Tutorial

Inhouse Slideshow Backup Tidy Up Report Viewing Tutorial

The thing about yesterday’s Inhouse Slideshow Backup Tidy Up Report Tutorial is that …

  • it creates useful report content … but …
  • it is information we do not want everyone to be able to see (easily, shall we say) … and in the sense that …
  • the report is stored away from RJM Programming’s “public_html” folder (ie. its Apache/PHP/MySql “Document Root”) is good … but even with today’s work …
  • hidden from everybody who does not have access to the RJM Programming’s web server … but …
  • the administrator of the RJM Programming’s web server (yoo hoo!) wants a mechanism to view the report that does not involve some “arcane procedure” each time to view it

… and so we decided that because …


the administrator of the RJM Programming's web server = the administrator of this blog

… we’d like to organize a system that latches onto that “security footing” and only show a “broom emoji button” (🧹 &#129529;) way to access the report when the administrator of this blog is logged in. We can do this by amending our Twenty Ten theme’s good ol’ header.php as per (where the “function mlater” you may recall from the days of WordPress Blog Email Post Collaboration Ajax Image Tutorial) …

<?php

$fns="36";

function doisr() {
global $fns;
$inmb="";
if (('' . get_current_user_id()) != '0' && ('' . get_current_user_id()) == '1') {
if (file_exists('/tmp/slideshow_cleanup.txt')) {
$fns="24";
$inmb="<a style=font-size:24px; title='Inhouse Slideshow Tidy Up Report' onclick=\"var iswo=window.open('','_blank','top=100,left=100,height=600,width=730'); iswo.document.write('<html><head><title>Inhouse Slideshow Tidy Up Report</title></head><body><pre>" . str_replace("\n","<br>",file_get_contents('/tmp/slideshow_cleanup.txt')) . "</pre></body></html>'); \">&#129529;</a> ";
}
}
return str_replace("'","' + String.fromCharCode(39) + '",$inmb);
}


?>

… PHP affects some (PHP writes) Javascript below …

<?php

function mlater() {
if (1 == 1 || navigator.userAgent.match(/Android|BlackBerry|iPhone|iPod|Opera Mini|IEMobile/i)) {
if (dbihis == '') { dbihis=document.body.innerHTML; }
var xstih=document.getElementById('site-title').innerHTML;
if (xstih.indexOf("up" + "top") == -1) {
document.getElementById('site-title').innerHTML+='<?php echo doisr(); ?>' + '<a id="avs" style="text-decoration:none;font-size:<?php global $fns; echo $fns; ?>px;" href=# onmouseover="getVisualSynopsis(event);" onmouseout="yehbut();" ontouchstart="getVisualSynopsis(event);" ontouchend="yehbut();" onclick=" uptop(); " title="... you can wait for the long hover functionality about Visual Synopsis (Slideshows)">&#127910;</a> <a style="cursor:pointer;text-decoration:none;font-size:<?php global $fns; echo $fns; ?>px;" onclick="diffphpfix(this);" title="Code Difference Functional Links">&#128214;</a> <a style="cursor:pointer;text-decoration:none;font-size:36px;" onclick="popselid();" title="Filter Content via Div ID">&#10135;</a> <a style="cursor:pointer;text-decoration:none;visibility:hidden;font-size:<?php global $fns; echo $fns; ?>px;" title="Blog post contents reduced to summary" id="eds" onclick="pre_details_summary();">&#10134;</a>' + printscreen(0);
if (document.URL.indexOf("visualsynopsis=") != -1) document.getElementById('avs').click();
}
}
}

?>


Previous relevant Inhouse Slideshow Backup Tidy Up Report Tutorial is shown below.

Inhouse Slideshow Backup Tidy Up Report Tutorial

Inhouse Slideshow Backup Tidy Up Report Tutorial

Yesterday’s Inhouse Slideshow Backup Tidy Up Tutorial presented a …

  • non-automated
  • user instigated
  • snapshot

… Inhouse Slideshow “tidying up” PHP web application. This web application is like a …

  • procedure … that a …
  • system operator

… might be interested in using. But not many “system operators” would continue putting up with such a modus operandi. We can improve by …

  • allowing any of …
    1. surfing the net
    2. curl
    3. command line

    … modes of use … allowing …

  • crontab scheduling via …

    */49 * * * * ksh -c "curl HTTP://www.rjmprogramming.com.au/slideshow_cleanup.php?all=all"

    … to allow for a …
  • scheduled report available … and make sure we …
  • disallow overlapping execution runs

… with our changed slideshow_cleanup.php “Inhouse Slideshow” unzipped image “tidyer upperer“.


Previous relevant Inhouse Slideshow Backup Tidy Up Tutorial is shown below.

Inhouse Slideshow Backup Tidy Up Tutorial

Inhouse Slideshow Backup Tidy Up Tutorial

There are two aspects to diskspace maintainence up at the web server for RJM Programming.

  • df -k /
  • df -i /
# diskspace
# inode count

… and it is often that inode count we are concerned about, and looking out for ways to reduce the number of files we create on the web server.

The Inhouse Slideshow ways of Inhouse Slideshow Mobile Google Crawl Tutorial

  • use zip files to “scrunch up” a series of image files into the one zip file … for the vast majority of time … but when asked to, by a user …
  • unzip the image files when required by a user wanting to see them … and then …
  • tidy up, after some delay in time

… but we want to design a PHP way to independently tidy up as a backup mechanism. And we say, with PHP code, that if such files have been on the web server longer than ten minutes, this PHP callable slideshow_cleanup.php code …

<?php

// slideshow_cleanup.php
// RJM Programming
// May, 2022

$cdis=dirname(__FILE__) . DIRECTORY_SEPARATOR;
exec("cd " . $cdis . "; find . -name 'slideshow_0.zip' 2> /dev/null > /tmp/slideshow_cleanup.txt");


$lines = file('/tmp/slideshow_cleanup.txt');
date_default_timezone_set('Australia/Perth');

foreach ($lines as $line_num => $line) {
$ji=0;
if (substr($line,0,1) == '.') { $ji=2; }
$thisdir=explode('slideshow_0.zip', $line)[0];
$uzc=shell_exec("unzip -l " . $cdis . substr($line, $ji));
foreach (glob($thisdir . '*-[0-9]*of.[jJpPgG][pPnNiI]*') as $zipmember) {
$ij=0;
if (substr($zipmember,0,1) == '.') { $ij=2; }
$thisfile=$cdis . substr($zipmember, $ij);
if (strpos($uzc, (' ' . explode(DIRECTORY_SEPARATOR, substr($zipmember, $ij))[-1 + sizeof(explode(DIRECTORY_SEPARATOR, substr($zipmember, $ij)))]) ) !== false) {
if ((time() - filectime($thisfile)) > 600) { // more than 10 minutes old
unlink($thisfile); //echo "analyze " . $thisfile . " " . (time() - filectime($thisfile)) . ' seconds ago ' . "\n";
}
}
}
foreach (glob($thisdir . '*-[0-9]{[0-9]*}.[jJpPgG][pPnNiI]*') as $zipmember) {
$ij=0;
if (substr($zipmember,0,1) == '.') { $ij=2; }
$thisfile=$cdis . substr($zipmember, $ij);
if (strpos($uzc, (' ' . explode(DIRECTORY_SEPARATOR, substr($zipmember, $ij))[-1 + sizeof(explode(DIRECTORY_SEPARATOR, substr($zipmember, $ij)))]) ) !== false) {
if ((time() - filectime($thisfile)) > 600) {
unlink($thisfile); //echo "Analyze " . $thisfile . " " . (time() - filectime($thisfile)) . ' seconds ago ' . "\n";
}
}
}
}


?>

… should do its thaing!


Previous relevant Inhouse Slideshow Mobile Google Crawl Tutorial is shown below.

Inhouse Slideshow Mobile Google Crawl Tutorial

Inhouse Slideshow Mobile Google Crawl Tutorial

The recent Inhouse Slideshow Mobile Tutorial did not satisfy all the “mobile usability” tests performed by the “Google Crawl” algorithm, failing on “Content wider than screen”, and you can read some background to this with Google Crawl Viewport Geographicals Tutorial. And so we try some refinements here today, with an idea to control on mobile platforms the max-width CSS property of the document.body of a Inhouse Slideshow webpage, which made up the URLs failing this test at the Google Search Console.

We were reading this great and useful link, thanks, and decided to see whether this stopping of scrolling in X on mobile platform versions of the Inhouse Slideshow webpages gels better with Google Search Console “Google Crawl” Mobility Usability algorithms.

Yet again, deployment of these changes is similar to that last time, and the times before that, as per …

Unit testing completed, the deployment, again, matches those ideas of the recent PDF Slideshow and Form Creation Helper Slideshow Tutorial … in that …

Here are changes we’ll be testing up at Google …


<head>
<script type='text/javascript'>
// Other Javascript code here ...
//
//
// Of relevance today bold below ...

function blater() {
var tdsare=document.getElementsByTagName('td');
var rectg=tdsare[2].getBoundingClientRect(); //document.getElementById('i0').getBoundingClientRect();
tdsare[2].style.borderRight='2px solid white';
document.body.style.backgroundImage="URL('" + document.getElementById('i0').src + "')";
var rl=eval('' + rectg.left);
rl+=eval('' + rectg.width);
rl+=10;
document.body.style.backgroundPosition=" " + rl + "px " + Math.floor(rectg.top) + "px";
document.body.style.backgroundRepeat="no-repeat";
document.body.style.backgroundClip="content-box";
}



function zoom_maybe() {
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
//document.getElementById('rfs').innerHTML='<style> html { zoom: .5; } </style>';
document.getElementById('rfs').innerHTML='<style> html { zoom: 0.4; body { max-width: 100%; max-height: 80vh; } table { max-width: <?php if (strpos($_SERVER['QUERY_STRING'],'exif=') !== false) { echo "100"; } else { echo "95"; } ?>%; max-height: 80vh; margin: auto; overflow-x: hidden; } </style>';
}
}


function nwpdf(iithis) {
if (('' + iithis.src).length > 0) {
if (navigator.userAgent.match(/iPhone|iPad|iPod/i)) {
window.open(iithis.src,'_blank');
}
}
}


function mytw() {
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
document.body.style.width='' + (window.orientation == 0 ? Math.floor(eval(2.5 * window.screen.width)) : window.screen.height) + 'px';
document.getElementById('myt').style.width='100%'; //'' + (window.orientation == 0 ? window.screen.width : window.screen.height) + 'px';
}
}



window.setInterval(function(){havealook(1)},2000);
</script>
<style>
td { vertical-align:top; }
@media only screen and (max-width: 800px) {
body { max-width: 100%; max-height: 80vh; } table { max-width: <?php if (strpos($_SERVER['QUERY_STRING'],'exif=') !== false) { echo "100"; } else { echo "95"; } ?>%; max-height: 80vh; margin: auto; overflow-x: hidden; }
}

</style>
</head>
<body onload=" mytw(); zoom_maybe(); if (document.URL.indexOf('pdf=') != -1) { document.getElementById('selmode').value='PDF Slideshow'; if (document.getElementById('tdfirst')) { document.getElementById('s0').style.width=document.getElementById('tdfirst').style.width; document.getElementById('s0').style.height=document.getElementById('tdfirst').style.height; } } if (document.URL.indexOf('exif=') != -1) { document.getElementById('selmode').value='Exif Slideshow'; if (document.getElementById('tdfirst')) { document.getElementById('s0').style.width=document.getElementById('tdfirst').style.width; document.getElementById('s0').style.height=document.getElementById('tdfirst').style.height; } } document.title=document.title + ' ' + lastone; ol(); ">


Previous relevant Inhouse Slideshow Mobile Tutorial is shown below.

Inhouse Slideshow Mobile Tutorial

Inhouse Slideshow Mobile Tutorial

The recent PDF Slideshow and Form Creation Helper Slideshow Tutorial changes were made on a MacBook Pro laptop. Did it show that we have put off until today, to look at that functionality with mobile platforms?!

In a “going off to the right table row of cells” arrangement like this, what are some considerations that improve the user experience (of our inhouse slideshows) for mobile platform users?

  • turn the “@” link into an “emoji button” as per ➡ ( &#10145; )
  • for both mobile and non-mobile, we’ve decided …
    1. UTF-8 meta …
      <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>

    2. <style>
      td { vertical-align:top; }
      </style>
    3. change the h4 element to be h2 to help with legibility
  • for mobile, we’ve decided …
    1. viewport …
      <meta name=”viewport” content=”width=device-width, initial-scale=0.4, minimum-scale=0.1, maximum-scale=8, user-scalable=yes”>

    2. <style>
      html { zoom: .5; }
      </style>
    3. iOS (ie. iPad and iPhone) PDF iframe elements have known scrolling issues, which we decided to bypass by opening these PDF creations in a new webpage window

Deployment of these changes is similar to that last time, and the times before that, as per …

Unit testing completed, the deployment, again, matches those ideas of the recent PDF Slideshow and Form Creation Helper Slideshow Tutorial … in that …


Previous relevant PDF Slideshow and Form Creation Helper Slideshow Tutorial is shown below.

PDF Slideshow and Form Creation Helper Slideshow Tutorial

PDF Slideshow and Form Creation Helper Slideshow Tutorial

The first “integration cab” off the rank for yesterday’s PDF Slideshow and Form Creation Helper Primer Tutorial underlying usefulness is with our Inhouse Slideshow arrangements last talked about at Inhouse Slideshow Design Exif Order Tutorial. That generic PHP code now has three display dropdown options of …

  • Slideshow
  • Exif Slideshow … and the new, as of today’s work …
  • PDF Slideshow

… that little bit different in that a PDF Slideshow occupies just the one table cell (rather than the many horizontal cells of the other display modes) and the resultant embedded PDF data vertically scrolls when multiple image slides are involved.

This new option also adds onto this “Inhouse Slideshow” functionality the chance to download and keep a PDF representation of that slideshow to your local system. Perhaps this makes this be of interest to you?!

The changed form_creator.php‘s live run is what gets integrated into the “Inhouse Slideshow” “sisterhood”. We say “sisterhood” because this “Inhouse Slideshow” is designed as a single PHP codefile “hived off” to a lot of other web server folders as their default “index.php” web browser default webpage in a “peer to peer” feeling arrangement. Such an arrangement asks a bit of the deployment arrangements, and we’ve talked about this before (with underlying links pointing to today’s work, should you be interested) …

Unit testing completed, the deployment, again, matches those ideas of the recent Inhouse Slideshow Design Exif Zip Tutorial … in that …

But when we say “Unit testing completed” above, we need to fill you in on a Fpdf issue we came across during unit testing of our changes. We were getting a …


FPDF Error: Not a JPEG file

… Fpdf error message choosing the new “PDF Slideshow” option on some, but not all, “Inhouse Slideshow” address bar URLs. And so the online research began as per …

… almost getting us there to a solution (and as far as the last link goes “that was before we posted the suggestion below”). Then we took one of the error messages at its word …


FPDF error: Not a JPEG file: ../Mac/Linux_drutil-238of.jpg

… and independently looked into the issue via Linux (or macOS command line) file command …


# cd $HOME/public_html/Mac
# ls -l Linux_dr*
-rw-r--r-- 1 owner group 724353 Oct 29 08:00 Linux_drutil-238of.jpg
-rw-r--r-- 1 owner group 132707 Oct 29 08:00 Linux_drutil-239of.jpg
-rw-r--r-- 1 owner group 109595 Oct 29 08:00 Linux_drutil-240of.jpg
# file Linux_drutil-238of.jpg
Linux_drutil-238of.jpg: PNG image data, 1280 x 800, 8-bit/color RGBA, non-interlaced
# file Linux_drutil-239of.jpg
Linux_drutil-239of.jpg: JPEG image data, JFIF standard 1.01
#

… when the penny dropped (about our (macOS) Paintbrush slideshow slide creation habits)! We quote our entry into “php – FPDF error: Not a JPEG file: http://10.11.201.93:81/webdocc/uploaded/tes3.jpg – Stack Overflow” …

Have found that constructing slideshows with Paintbrush on a MacBook Pro for years have sometimes been saving what “file jpeg_filename.jpg” determines is a PNG, as a JPEG, which is not the end of the world as far as the browsers go rendering this. Within FPDF’s fpdf.php I fixed my own shortcomings that were resulting in “FPDF Error: Not a JPEG file” via the kludgy “if($a[2]==3) { return $this->_parsepng($file); }” additional codeline below …

function _parsejpg($file)
{
// Extract info from a JPEG file
$a = getimagesize($file);
if(!$a)
$this->Error(‘Missing or incorrect image file: ‘.$file);
if($a[2]==3) { return $this->_parsepng($file); }
if($a[2]!=2)
$this->Error(‘Not a JPEG file: ‘.’ ‘.$a[2].’ ‘.$file);
if(!isset($a[‘channels’]) || $a[‘channels’]==3)
$colspace = ‘DeviceRGB’;
elseif($a[‘channels’]==4)
$colspace = ‘DeviceCMYK’;
else
$colspace = ‘DeviceGray’;
$bpc = isset($a[‘bits’]) ? $a[‘bits’] : 8;
$data = file_get_contents($file);
return array(‘w’=>$a[0], ‘h’=>$a[1], ‘cs’=>$colspace, ‘bpc’=>$bpc, ‘f’=>’DCTDecode’, ‘data’=>$data);
}

… and this change to Fpdf’s fpdf.php fixed the issue in our case for a lot of our previously erroneous “PDF Slideshow” displays of “Inhouse Slideshows”.


Previous relevant PDF Slideshow and Form Creation Helper Primer Tutorial is shown below.

PDF Slideshow and Form Creation Helper Primer Tutorial

PDF Slideshow and Form Creation Helper Primer Tutorial

Our recent work involving the great Fpdf creator of PDF files when we presented Ajax FormData Object No Body PHP PDF Tutorial has got us starting on a new PDF (PHP) web application we are starting out thinking will help with …

  • online forms (probably via thinking in terms of Fpdf open source programmers like Rick van Buuren and Clément Lavoillotte‘s excellent HTML table rendering ideas) via HTML table intermediate user interactions … and …
  • slideshows

… but we will not be surprised if the project branches out into other ideas. We’ll see over time.

We hope you come along for the trip starting with a bit of a proof of concept form_creator.php‘s live run for you to try, where we allow you to enter (and be able to change) some HTML table code (if that’s what you end up with?!) in a pink HTML textarea element, and that will become PDF should you click the underlying HTML form’s yellow submit button.

Hope to see you for tomorrow’s PDF writing developments here.

If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.

Posted in Animation, eLearning, Operating System, Tutorials | Tagged , , , , , , , , , , , , | Leave a comment

Python Cowsay API Cartoon Speech Media Tutorial

Python Cowsay API Cartoon Speech Media Tutorial

Python Cowsay API Cartoon Speech Media Tutorial

As soon as a web application talks about image slides, as we have been dealing with allowing for the creation of cartoons with our recent cowsay Python API / Command-line tool interfacing PHP web application, maybe as Louis Lumière did many years ago, it brings out media thoughts regarding “moving pictures”. We use, here, at our RJM Programming AlmaLinux web server, the great Open Source ffmpeg to help create such media, in today’s case …

  • video
  • animated GIF

… productions using those image slides created via the (again, Open Source) cowsay Python API / Command-line tool …

<?php

if (isset($_GET['getvideo'])) {
$lenv='1';
if (isset($_GET['len'])) {
$lenv=$_GET['len'];
}
if ($_GET['getvideo'] == '1' && $lenv == '0') {
echo "<html><body onload=\" if (parent.document.getElementById('divvideo')) { parent.document.getElementById('divvideo').innerHTML='<video id=myvideo controls><source id=mysource type=video/mp4 src=' + String.fromCharCode(39) + 'data:video/mp4;base64," . base64_encode(file_get_contents('/tmp/video' . server_remote_addr() . '.mp4')) . "' + String.fromCharCode(39) + '></source></video>'; } else if (parent.document.getElementById('mysource')) { parent.document.getElementById('mysource').src='data:video/mp4;base64," . base64_encode(file_get_contents('/tmp/video' . server_remote_addr() . '.mp4')) . "'; } else { parent.document.getElementById('divmedia').innerHTML+='<br><br><p id=pvd>Video version below ... <a style=display:inline-block; href=#myh1>Back to top ...</a></p><br><div id=divvideo><video id=myvideo controls><source id=mysource type=video/mp4 src=' + String.fromCharCode(39) + 'data:video/mp4;base64," . base64_encode(file_get_contents('/tmp/video' . server_remote_addr() . '.mp4')) . "' + String.fromCharCode(39) + '></source></video></div>'; } setTimeout(function(){ parent.document.getElementById('pvd').scrollIntoView(); }, 2000); \"></body></html>";
} else {
if (file_exists('/tmp/video' . server_remote_addr() . '.mp4')) {
unlink('/tmp/video' . server_remote_addr() . '.mp4');
}
exec('ffmpeg -framerate 2 -i /tmp/slide_' . server_remote_addr() . '-%03d.png -vcodec libx264 -crf 22 /tmp/video' . server_remote_addr() . '.mp4');
echo "<html><body onload=\" if (parent.document.getElementById('divvideo')) { parent.document.getElementById('divvideo').innerHTML='<video id=myvideo controls><source id=mysource type=video/mp4 src=' + String.fromCharCode(39) + 'data:video/mp4;base64," . base64_encode(file_get_contents('/tmp/video' . server_remote_addr() . '.mp4')) . "' + String.fromCharCode(39) + '></source></video>'; } else if (parent.document.getElementById('mysource')) { parent.document.getElementById('mysource').src='data:video/mp4;base64," . base64_encode(file_get_contents('/tmp/video' . server_remote_addr() . '.mp4')) . "'; } else { parent.document.getElementById('divmedia').innerHTML+='<br><br><p id=pvd>Video version below ... <a style=display:inline-block; href=#myh1>Back to top ...</a></p><br><div id=divvideo><video id=myvideo controls><source id=mysource type=video/mp4 src=' + String.fromCharCode(39) + 'data:video/mp4;base64," . base64_encode(file_get_contents('/tmp/video' . server_remote_addr() . '.mp4')) . "' + String.fromCharCode(39) + '></source></video></div>'; } setTimeout(function(){ parent.document.getElementById('pvd').scrollIntoView(); }, 2000); \"></body></html>";
}
exit;
} else if (isset($_GET['getagif'])) {
$lenv='1';
if (isset($_GET['len'])) {
$lenv=$_GET['len'];
}
if ($_GET['getvideo'] == '1' && $lenv == '0') {
echo "<html><body onload=\" if (parent.document.getElementById('mygif')) { parent.document.getElementById('mygif').src='data:image/gif;base64," . base64_encode(file_get_contents('/tmp/agif' . server_remote_addr() . '.gif')) . "'; } else { parent.document.getElementById('divmedia').innerHTML+='<br><br><p id=pag>Animated GIF version below ... <a style=display:inline-block; href=#myh1>Back to top ...</a></p><br><img id=mygif src=data:image/gif;base64," . base64_encode(file_get_contents('/tmp/agif' . server_remote_addr() . '.gif')) . "></img>'; } setTimeout(function(){ parent.document.getElementById('pag').scrollIntoView(); }, 2000); \"></body></html>";
} else {
if (file_exists('/tmp/agif' . server_remote_addr() . '.gif')) {
unlink('/tmp/agif' . server_remote_addr() . '.gif');
}
exec('ffmpeg -framerate 2 -i /tmp/slide_' . server_remote_addr() . '-%03d.png /tmp/agif' . server_remote_addr() . '.gif');
echo "<html><body onload=\" if (parent.document.getElementById('mygif')) { parent.document.getElementById('mygif').src='data:image/gif;base64," . base64_encode(file_get_contents('/tmp/agif' . server_remote_addr() . '.gif')) . "'; } else { parent.document.getElementById('divmedia').innerHTML+='<br><br><p id=pag>Animated GIF version below ... <a style=display:inline-block; href=#myh1>Back to top ...</a></p><br><img id=mygif src=data:image/gif;base64," . base64_encode(file_get_contents('/tmp/agif' . server_remote_addr() . '.gif')) . "></img>'; } setTimeout(function(){ parent.document.getElementById('pag').scrollIntoView(); }, 2000); \"></body></html>";
}
exit;
}

?>

… as a new optional piece of additional functionality offered in our changed “fifth draft” (picking up from Python Cowsay API Cartoon Speech Content Tutorial‘s fourth draft, and further to yesterday’s Text to Image via ImageMagick Primer Tutorial) Cartoon creation and email sharing capable PHP web application you can also try below.


Previous relevant Text to Image via ImageMagick Primer Tutorial is shown below.

Text to Image via ImageMagick Primer Tutorial

Text to Image via ImageMagick Primer Tutorial

Why would a “Primer” tutorial point at a “well along the way” one? Well, a few reasons really …

Yes, the great ImageMagick (and we’re using it’s command line “convert” command here to make this happen) can convert text to images (ie. HTML img elements). Now, we’re not saying you always get perfect matches here, but it is akin to mere mortal dreamers think of as “intelligent scanning”. So, we wanted to have this sidetrack, and we will be resuming “normal transmission” shortly?!

We’ll leave you with some cowsay.php new relevant PHP code to ponder …

<?php

if (isset($_GET['fontlist'])) {
$selpop='';
if (!file_exists('/tmp/imfl.txt')) {
exec('convert -list font > /tmp/imfl.txt');
}
$fcont=file_get_contents('/tmp/imfl.txt');
if (strpos($fcont, 'family: ') !== false) {
$fcs=explode('family: ', $fcont);
for ($iuy=1; $iuy<sizeof($fcs); $iuy++) {
if (strpos($selpop, '>' . explode("\n", $fcs[$iuy])[0] . '<') === false) {
$selpop.="\n selo.innerHTML+='<option value=' + String.fromCharCode(39) + '" . explode("\n", $fcs[$iuy])[0] . "' + String.fromCharCode(39) + '>" . explode("\n", $fcs[$iuy])[0] . "</option>'; \n";
}
}
if ($selpop != '') {
echo "<html><body onload=\" var selos=parent.document.getElementsByTagName('select'); if (eval('' + selos.length) > 0) { var selo=selos[eval(-1 + selos.length)]; " . $selpop . " selo.style.display='inline-block'; selo.style.backgroundColor='#f0f0f0'; } \"></body></html>";
}
}
exit;
} else if (isset($_POST['text'])) {
$perlemoji='';
$emojilabbit="@- "; // vs perl
$iex='png';
$fnt='Courier';
$wdt='800';
$hgt='800';
$psiz='36';
$fcol='black';
$bcol='white';
if (isset($_POST['ext'])) { $iex=str_replace('+',' ',urldecode($_POST['ext'])); }
if (isset($_POST['ffam'])) { $fnt=str_replace('+',' ',urldecode($_POST['ffam'])); }
if (isset($_POST['width'])) { $pwdt=str_replace('+',' ',urldecode($_POST['width'])); }
if (isset($_POST['height'])) { $hgt=str_replace('+',' ',urldecode($_POST['height'])); }
if (isset($_POST['ptsize'])) { $psiz=str_replace('+',' ',urldecode($_POST['ptsize'])); }
if (isset($_POST['fcol'])) { $fcol=str_replace('+',' ',urldecode($_POST['fcol'])); }
if (isset($_POST['bcol'])) { $bcol=str_replace('+',' ',urldecode($_POST['bcol'])); }
$slidename='/tmp/imagerequest_' . server_remote_addr() . '-0.' . $iex;
file_put_contents('/tmp/imagerequest_' . server_remote_addr() . '-0.txt', str_replace('+',' ',urldecode($_POST['text'])));
file_put_contents('/tmp/maybeemojisP.txt', htmlspecialchars(str_replace('+',' ',urldecode($_POST['text'])), ENT_COMPAT,'UTF-8', true));
// yes no &#129684;
if (strpos(str_replace('+',' ',urldecode($_POST['text'])), '&#') !== false || strpos(str_replace('+',' ',urldecode($_POST['text'])), '&#') !== false) { // thanks to https://usage.imagemagick.org/text/#unicode
$outsofar=''; // '\x{201C}Unicode \x{2018}\x{263A}\x{2019} Please\x{201D}'
if (strpos(str_replace('+',' ',urldecode($_POST['text'])), '&#') !== false) {
$outs=explode('&#', str_replace('+',' ',urldecode($_POST['text'])));
$outsofar=$outs[0];
for ($ivx=1; $ivx<sizeof($outs); $ivx++) {
$decis=explode(';', $outs[$ivx])[0];
if (str_replace('0','',str_replace('1','',str_replace('2','',str_replace('3','',str_replace('4','',str_replace('5','',str_replace('6','',str_replace('7','',str_replace('8','',str_replace('9','',$decis)))))))))) != '') {
if (substr(strtolower($decis),0,1) == 'x') {
$outsofar.="\\x{" . substr($decis,1) . "}";
} else {
$outsofar.="\\x{" . $decis . "}";
}
} else {
$outsofar.="\\x{" . dechex($decis) . "}";
}
$outsofar.=substr($outs[$ivx],strlen($decis . ';'));
}
} else if (strpos(str_replace('+',' ',urldecode($_POST['text'])), '&#') !== false) {
$outs=explode('&#', str_replace('+',' ',urldecode($_POST['text'])));
$outsofar=$outs[0];
for ($ivx=1; $ivx<sizeof($outs); $ivx++) {
$decis=explode(';', $outs[$ivx])[0];
if (str_replace('0','',str_replace('1','',str_replace('2','',str_replace('3','',str_replace('4','',str_replace('5','',str_replace('6','',str_replace('7','',str_replace('8','',str_replace('9','',$decis)))))))))) != '') {
if (substr(strtolower($decis),0,1) == 'x') {
$outsofar.="\\x{" . substr($decis,1) . "}";
} else {
$outsofar.="\\x{" . $decis . "}";
}
} else {
$outsofar.="\\x{" . dechex($decis) . "}";
}
$outsofar.=substr($outs[$ivx],strlen($decis . ';'));
}
}
$labbit=$emojilabbit;
$perlemoji="perl -e 'binmode(STDOUT, \":utf8\"); print \"" . str_replace("\n", "\x{000A}", $outsofar) . '";' . "' | ";
}
if (strpos(str_replace('+',' ',urldecode($_POST['text'])), "\\") !== false) {
if ($perlemoji == '') { $labbit='"$(cat /tmp/imagerequest_' . server_remote_addr() . '-0.txt | ' . " sed '/\\\\/s//\\\\\\\\/g')" . '" '; }
file_put_contents('/tmp/imag.cmd', $perlemoji . 'convert -background "' . $bcol . '" -fill "' . $fcol . '" -size ' . $wdt . 'x' . $hgt . ' -font ' . $fnt . ' -pointsize ' . $psiz . ' label:' . $labbit . ' ' . $slidename);
exec($perlemoji . 'convert -background "' . $bcol . '" -fill "' . $fcol . '" -size ' . $wdt . 'x' . $hgt . ' -font ' . $fnt . ' -pointsize ' . $psiz . ' label:' . $labbit . ' ' . $slidename);
exec('chmod 777 ' . $slidename);
} else {
if ($perlemoji == '') { $labbit='"$(cat /tmp/imagerequest_' . server_remote_addr() . '-0.txt)' . '" '; }
file_put_contents('/tmp/imaG.cmd', $perlemoji . 'convert -background "' . $bcol . '" -fill "' . $fcol . '" -size ' . $wdt . 'x' . $hgt . ' -font ' . $fnt . ' -pointsize ' . $psiz . ' label:' . $labbit . ' ' . $slidename . ' ; chmod 777 ' . $slidename);
exec($perlemoji . 'convert -background "' . $bcol . '" -fill "' . $fcol . '" -size ' . $wdt . 'x' . $hgt . ' -font ' . $fnt . ' -pointsize ' . $psiz . ' label:' . $labbit . ' ' . $slidename);
exec('chmod 777 ' . $slidename);
}
if (isset($_POST['raw'])) {
header('Content-Type: image/' . $iex);
echo file_get_contents($slidename);
unlink($slidename);
unlink('/tmp/imagerequest_' . server_remote_addr() . '-0.txt');
exit;
} else {
echo "<html>
<body onload=\"
if (window.parent != window.self) {
var cnvs=parent.document.getElementsByTagName('canvas');
if (eval('' + cnvs.length) > 0) {
var imgsis=new Image();
imgsis.onload=function(event){
var canvasis=cnvs[0];
var cntxis=canvasis.getContext('2d');
cntxis.drawImage(event.target, 0, 0);
};
imgsis.src='data:image/" . $iex . ";base64," . base64_encode(file_get_contents($slidename)) . "';
} else {
var imgs=parent.document.getElementsByTagName('img');
if (eval('' + imgs.length) > 0) {
imgs[0].src='data:image/" . $iex . ";base64," . base64_encode(file_get_contents($slidename)) . "';
} else if (document.body.innerHTML == '') {
document.body.innerHTML='<img src=data:image/" . $iex . ";base64," . base64_encode(file_get_contents($slidename)) . "></img><style> * { margin:0 0 0 0; padding:0 0 0 0; } img { border-top: 8px solid " . $bcol . "; }</style>';
} else {
document.body.innerHTML+='<br><img src=data:image/" . $iex . ";base64," . base64_encode(file_get_contents($slidename)) . "></img>';
}
}
} else if (document.body.innerHTML == '') {
document.body.innerHTML='<img src=data:image/" . $iex . ";base64," . base64_encode(file_get_contents($slidename)) . "></img><style> * { margin:0 0 0 0; padding:0 0 0 0; } img { border-top: 8px solid " . $bcol . "; }</style>';
} else {
document.body.innerHTML+='<br><img src=data:image/" . $iex . ";base64," . base64_encode(file_get_contents($slidename)) . "></img>';
}
\"></body></html>";
unlink('/tmp/imagerequest_' . server_remote_addr() . '-0.txt');
try {
unlink($slidename);
} catch(Exception $esdw) { }
}
exit;
} else if (isset($_GET['text'])) {
$perlemoji='';
$emojilabbit="@- "; // vs perl
$iex='png';
$fnt='Courier';
$wdt='800';
$hgt='800';
$psiz='36';
$fcol='black';
$bcol='white';
if (isset($_GET['ext'])) { $iex=str_replace('+',' ',urldecode($_GET['ext'])); }
if (isset($_GET['ffam'])) { $fnt=str_replace('+',' ',urldecode($_GET['ffam'])); }
if (isset($_GET['width'])) { $pwdt=str_replace('+',' ',urldecode($_GET['width'])); }
if (isset($_GET['height'])) { $hgt=str_replace('+',' ',urldecode($_GET['height'])); }
if (isset($_GET['ptsize'])) { $psiz=str_replace('+',' ',urldecode($_GET['ptsize'])); }
if (isset($_GET['fcol'])) { $fcol=str_replace('+',' ',urldecode($_GET['fcol'])); }
if (isset($_GET['bcol'])) { $bcol=str_replace('+',' ',urldecode($_GET['bcol'])); }
$slidename='/tmp/imagerequest_' . server_remote_addr() . '-0.' . $iex;
file_put_contents('/tmp/imagerequest_' . server_remote_addr() . '-0.txt', str_replace('+',' ',urldecode($_GET['text'])));
file_put_contents('/tmp/maybeemojisG.txt', htmlspecialchars(str_replace('+',' ',urldecode($_GET['text'])), ENT_COMPAT,'UTF-8', true));
// yes no &#129684;
if (strpos(str_replace('+',' ',urldecode($_GET['text'])), '&#') !== false || strpos(str_replace('+',' ',urldecode($_GET['text'])), '&#') !== false) { // thanks to https://usage.imagemagick.org/text/#unicode
$outsofar=''; // '\x{201C}Unicode \x{2018}\x{263A}\x{2019} Please\x{201D}'
if (strpos(str_replace('+',' ',urldecode($_GET['text'])), '&#') !== false) {
$outs=explode('&#', str_replace('+',' ',urldecode($_GET['text'])));
$outsofar=$outs[0];
for ($ivx=1; $ivx<sizeof($outs); $ivx++) {
$decis=explode(';', $outs[$ivx])[0];
if (str_replace('0','',str_replace('1','',str_replace('2','',str_replace('3','',str_replace('4','',str_replace('5','',str_replace('6','',str_replace('7','',str_replace('8','',str_replace('9','',$decis)))))))))) != '') {
if (substr(strtolower($decis),0,1) == 'x') {
$outsofar.="\\x{" . substr($decis,1) . "}";
} else {
$outsofar.="\\x{" . $decis . "}";
}
} else {
$outsofar.="\\x{" . dechex($decis) . "}";
}
$outsofar.=substr($outs[$ivx],strlen($decis . ';'));
}
} else if (strpos(str_replace('+',' ',urldecode($_GET['text'])), '&#') !== false) {
$outs=explode('&#', str_replace('+',' ',urldecode($_GET['text'])));
$outsofar=$outs[0];
for ($ivx=1; $ivx<sizeof($outs); $ivx++) {
$decis=explode(';', $outs[$ivx])[0];
if (str_replace('0','',str_replace('1','',str_replace('2','',str_replace('3','',str_replace('4','',str_replace('5','',str_replace('6','',str_replace('7','',str_replace('8','',str_replace('9','',$decis)))))))))) != '') {
if (substr(strtolower($decis),0,1) == 'x') {
$outsofar.="\\x{" . substr($decis,1) . "}";
} else {
$outsofar.="\\x{" . $decis . "}";
}
} else {
$outsofar.="\\x{" . dechex($decis) . "}";
}
$outsofar.=substr($outs[$ivx],strlen($decis . ';'));
}
}
$labbit=$emojilabbit;
$perlemoji="perl -e 'binmode(STDOUT, \":utf8\"); print \"" . str_replace("\n", "\x{000A}", $outsofar) . '";' . "' | ";
}
if (strpos(str_replace('+',' ',urldecode($_GET['text'])), "\\") !== false) {
if ($perlemoji == '') { $labbit='"$(cat /tmp/imagerequest_' . server_remote_addr() . '-0.txt | ' . " sed '/\\\\/s//\\\\\\\\/g')" . '" '; }
//file_put_contents('/tmp/imag.cmd', 'convert -background "' . $bcol . '" -fill "' . $fcol . '" -size ' . $wdt . 'x' . $hgt . ' -font ' . $fnt . ' -pointsize ' . $psiz . ' label:"$(cat /tmp/imagerequest_' . server_remote_addr() . '-0.txt | ' . " sed '/\\\\/s//\\\\\\\\/g')" . '" ' . $slidename . ' ; chmod 777 ' . $slidename);
exec($perlemoji . 'convert -background "' . $bcol . '" -fill "' . $fcol . '" -size ' . $wdt . 'x' . $hgt . ' -font ' . $fnt . ' -pointsize ' . $psiz . ' label:' . $labbit . ' ' . $slidename);
exec('chmod 777 ' . $slidename);
} else {
if ($perlemoji == '') { $labbit='"$(cat /tmp/imagerequest_' . server_remote_addr() . '-0.txt)' . '" '; }
exec($perlemoji . 'convert -background "' . $bcol . '" -fill "' . $fcol . '" -size ' . $wdt . 'x' . $hgt . ' -font ' . $fnt . ' -pointsize ' . $psiz . ' label:' . $labbit . ' ' . $slidename);
exec('chmod 777 ' . $slidename);
}
if (isset($_GET['raw'])) {
header('Content-Type: image/' . $iex);
echo file_get_contents($slidename);
unlink($slidename);
unlink('/tmp/imagerequest_' . server_remote_addr() . '-0.txt');
exit;
} else {
echo "<html>
<body onload=\"
if (window.parent != window.self) {
var cnvs=parent.document.getElementsByTagName('canvas');
if (eval('' + cnvs.length) > 0) {
var imgsis=new Image();
imgsis.onload=function(event){
var canvasis=cnvs[0];
var cntxis=canvasis.getContext('2d');
cntxis.drawImage(event.target, 0, 0);
};
imgsis.src='data:image/" . $iex . ";base64," . base64_encode(file_get_contents($slidename)) . "';
} else {
var imgs=parent.document.getElementsByTagName('img');
if (eval('' + imgs.length) > 0) {
imgs[0].src='data:image/" . $iex . ";base64," . base64_encode(file_get_contents($slidename)) . "';
} else if (document.body.innerHTML == '') {
document.body.innerHTML='<img src=data:image/" . $iex . ";base64," . base64_encode(file_get_contents($slidename)) . "></img><style> * { margin:0 0 0 0; padding:0 0 0 0; } img { border-top: 8px solid " . $bcol . "; }</style>';
} else {
document.body.innerHTML+='<br><img src=data:image/" . $iex . ";base64," . base64_encode(file_get_contents($slidename)) . "></img>';
}
}
} else if (document.body.innerHTML == '') {
document.body.innerHTML='<img src=data:image/" . $iex . ";base64," . base64_encode(file_get_contents($slidename)) . "></img><style> * { margin:0 0 0 0; padding:0 0 0 0; } img { border-top: 8px solid " . $bcol . "; }</style>';
} else {
document.body.innerHTML+='<br><img src=data:image/" . $iex . ";base64," . base64_encode(file_get_contents($slidename)) . "></img>';
}
\"></body></html>";
unlink('/tmp/imagerequest_' . server_remote_addr() . '-0.txt');
try {
unlink($slidename);
} catch(Exception $esdw) { }
}
exit;
}

?>


Previous relevant Python Cowsay API Cartoon Speech Content Tutorial is shown below.

Python Cowsay API Cartoon Speech Content Tutorial

Python Cowsay API Cartoon Speech Content Tutorial

If you were to ask most people what is more onerous filling in online web forms on the way to making something happen …

  • we’re guessing, rather than saying button presses …
  • we’re guessing, they’re more likely to say typing out text …

… with it’s associated tabbing out to negotiate as well. But, supposing we could offer you a “speech to text” approach to performing “typing out text” in our latest cowsay Python API / Command-line tool interfacing PHP web application?

For some years now, we’ve interfaced to a …

  • non-mobile
  • Google Chrome
  • secure URL via https: protocol
  • allowing access to microphone

… means by which we normally access via a “top” hierarchy level call to our inhouse Google Speech to Text API interfacing web application helper.

Isn’t a popup window awkward here? Well, you might think so, but today, we discovered with the Google Chrome browser we used on macOS …

  • we initially call our inhouse Google Speech to Text API interfacing web application helper as a popup sitting in front of the cowsay interfacing parent window …
    <?php echo ”

    function anop() {
    if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
    topwo=window_open('https://www.google.com/intl/en/chrome/demos/speech.html','_blank','top=120,left=' + eval(eval('' + screen.width) - 690) + ',width=690,height=550');
    setTimeout(function(){ topwo.scrollTo(0,0); topwo.document.getElementById('tdm').style.opacity='0.0'; }, 6000);
    setInterval(function(){ if (!topwo.closed) { topwo.focus(); } topwo.location.href='https://www.rjmprogramming.com.au/PHP/speech_supervisor.php?rand=' + Math.floor(Math.random() * 1987967) + '&mode=4'; setTimeout(function(){ topwo.scrollTo(0,0); topwo.document.getElementById('tdm').style.opacity='0.0'; }, 6000); }, 30000);
    } else {
    topwo=window.open('https://www.rjmprogramming.com.au/PHP/speech_supervisor.php?rand=' + Math.floor(Math.random() * 1987967) + '&mode=4','_blank','top=120,left=' + eval(eval('' + screen.width) - 690) + ',width=690,height=550');
    setTimeout(function(){ topwo.scrollTo(0,0); topwo.document.getElementById('tdm').style.opacity='0.0'; }, 6000);
    setInterval(function(){ if (!topwo.closed) { topwo.focus(); } topwo.location.href='https://www.rjmprogramming.com.au/PHP/speech_supervisor.php?rand=' + Math.floor(Math.random() * 1987967) + '&mode=4'; setTimeout(function(){ topwo.scrollTo(0,0); topwo.document.getElementById('tdm').style.opacity='0.0'; }, 6000); }, 30000);
    }
    }

    “; ?>
  • and found that it was visible until any click or focus back to the cowsay interfacing parent window … normally an annoyance …
  • but not if …
    1. we semi regularly reload the our inhouse Google Speech to Text API interfacing web application helper … to refresh it’s red “recording” button instigation … and then …
    2. even if it remains hidden, it is still apparent to the focussed cowsay interfacing parent window on account of an orange “microphone on recording” icon appearing for the Google Chrome web browser user up at it’s Menu Bar … and …
    3. audio being “sight independent” the user does not have to refocus our inhouse Google Speech to Text API interfacing web application helper, just talk into the microphone just after that new icon appears … so that …
    4. the Google Speech to Text smarts help transfer that resultant text over to the textarea of the cowsay interfacing parent window, even avoiding any need to tab out of that textarea element … ahead of …
    5. the rest of the dropdown selections and button presses needed to achieve the user aim of establishing a new slide, perhaps for a Cartoon being created

… you can see happening with today’s animated GIF presentation on top of the work of yesterday’s Python Cowsay API Cartoon Tutorial in our changed “fourth draft” Cartoon creation and email sharing capable PHP web application you can also try below.


Previous relevant Python Cowsay API Cartoon Tutorial is shown below.

Python Cowsay API Cartoon Tutorial

Python Cowsay API Cartoon Tutorial

We’ve long been interested in online web application ideas that end up with a half decent cartoon the user can create, and share, themselves. “Half decent” becomes “fully decent” with a user who has a great imagination. And so, onto yesterday’s Python Cowsay API Primer Tutorial‘s start with interfacing to the great cowsay Python API / Command-line tool we access via the PHP exec method conduit to our AlmaLinux Apache/PHP/MySql Linux web server, today we’ve extended that …

  • “proof of concept” thinking … onto …
  • cartoon creation “smarts” … starting with (also egged on here by mobile platform problems with monospaced fonts, it seems like)
  • allowing a tabular display of our cowsay components … into …
  • table cells horizontally aligned (and so, less vulnerable to monospacing inaccuracies) … also allowing …
  • within any table cell there is a topmost th table cell wording part above a cowsay character td cell lower part …
  • “half decent” looking via static CSS
    <?php echo ”

    <style>
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    tr { vertical-align: top; }
    td { vertical-align: top; }
    th { vertical-align: top; }

    * { font-family:'Courier New',Courier,monospace; }
    .img-hor { // thanks to https://stackoverflow.com/questions/32875695/flip-mirror-an-image-horizontally-vertically-with-css
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: 'FlipH';
    }
    .img-ver { // thanks to https://stackoverflow.com/questions/32875695/flip-mirror-an-image-horizontally-vertically-with-css
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: FlipV;
    -ms-filter: 'FlipV';
    }

    .glow {
    -webkit-animation: glow 1s linear infinite alternate;
    -moz-animation: glow 1s linear infinite alternate;
    animation: glow 1s linear infinite alternate;
    }

    /* Thanks to https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_glowing_text */

    @-webkit-keyframes glow {
    from {
    box-shadow: 0 0 3px #fff, 0 0 5px #fff, 0 0 37px #e60073, 0 0 9px #e60073, 0 0 11px #e60073, 0 0 13px #e60073, 0 0 15px #e60073;
    }

    to {
    box-shadow: 0 0 24px #fff, 0 0 6px #ff4da6, 0 0 8px #ff4da6, 0 0 10px #ff4da6, 0 0 12px #ff4da6, 0 0 14px #ff4da6, 0 0 16px #ff4da6;
    }
    }

    th[id$='0'] {
    background: rgba(224,240,240,0.6); //#e0f0f0;
    }

    th[id$='1'] {
    background: rgba(225,241,241,0.6); //#e1f1f1;
    }

    th[id$='2'] {
    background: rgba(226,242,242,0.6); //#e2f2f2;
    }

    th[id$='3'] {
    background: rgba(227,243,243,0.6); //#e3f3f3;
    }

    th[id$='4'] {
    background: rgba(228,244,244,0.6); //#e4f4f4;
    }

    th[id$='5'] {
    background: rgba(229,245,245,0.6); //#e5f5f5;
    }

    th[id$='6'] {
    background: rgba(230,246,246,0.6); //#e6f6f6;
    }

    th[id$='7'] {
    background: rgba(231,247,247,0.6); //#e7f7f7;
    }

    th[id$='8'] {
    background: rgba(232,248,248,0.6); //#e2f2f2;
    }

    th[id$='9'] {
    background: rgba(233,249,249,0.6); //#e9f9f9;
    }

    td[id$='0'] {
    background: rgba(240,240,240,0.3); //#f0f0f0;
    text-shadow:-1px 1px 1px #ff2d90;
    }

    td[id$='1'] {
    background: rgba(241,241,241,0.3); //#f1f1f1;
    text-shadow:-1px 1px 1px #ff2d91;
    float: bottom;
    }

    td[id$='2'] {
    background: rgba(242,242,242,0.3); //#f2f2f2;
    text-shadow:-1px 1px 1px #ff2d92;
    }

    td[id$='3'] {
    background: rgba(243,243,243,0.3); //#f3f3f3;
    text-shadow:-1px 1px 1px #ff2d93;
    }

    td[id$='4'] {
    background: rgba(244,244,244,0.3); //#f4f4f4;
    text-shadow:-1px 1px 1px #ff2d94;
    }

    td[id$='5'] {
    background: rgba(245,245,245,0.3); //#f5f5f5;
    text-shadow:-1px 1px 1px #ff2d95;
    }

    td[id$='6'] {
    background: rgba(246,246,246,0.3); //#f6f6f6;
    text-shadow:-1px 1px 1px #ff2d96;
    }

    td[id$='7'] {
    background: rgba(247,247,247,0.3); //#f7f7f7;
    text-shadow:-1px 1px 1px #ff2d97;
    }

    td[id$='8'] {
    background: rgba(248,248,248,0.3); //#f8f8f8;
    text-shadow:-1px 1px 1px #ff2d98;
    }

    td[id$='9'] {
    background: rgba(249,249,249,0.3); //#f9f9f9;
    text-shadow:-1px 1px 1px #ff2d99;
    }

    table tbody tr:first-child {
    background: transparent; //#f6f6e6;
    }
    </style>

    “; ?>
    … and then …
  • whenever new cell content happens padding-top adding CSS Javascript DOM nuanced display logic via …
    <?php echo ”

    function paddingtopit() {
    var maxtwo=0, thistwo=0;
    var thhs=[], tdhs=[], it=0;
    var thdids=[];
    //trthtd1
    //trtdtd1
    var tds=document.getElementsByTagName('td');
    for (it=0; it<tds.length; it++) {
    if (('' + tds[it].id).indexOf('trtdtd') != -1) {
    if (('' + tds[it].style.paddingTop).replace(/^null/g,'').replace(/^undefined/g,'').trim() != '') {
    tds[it].style.paddingTop='0px';
    }
    }
    }
    for (it=0; it<tds.length; it++) {
    if (('' + tds[it].id).indexOf('trtdtd') != -1) {
    tdhs.push(eval('' + tds[it].getBoundingClientRect().height));
    thdids.push('' + tds[it].id);
    }
    }
    var ths=document.getElementsByTagName('th');
    for (it=0; it<ths.length; it++) {
    if (('' + ths[it].id).indexOf('trthtd') != -1) {
    thhs.push(eval('' + ths[it].getBoundingClientRect().height));
    thistwo=eval(thhs[it] + tdhs[it]);
    if (thistwo > maxtwo) { maxtwo=thistwo; }
    }
    }
    for (it=0; it<tdhs.length; it++) {
    thistwo=eval(thhs[it] + tdhs[it]);
    if (thistwo < maxtwo) {
    document.getElementById(thdids[it]).style.paddingTop='' + eval(maxtwo - thistwo) + 'px';
    }
    }
    }

    “; ?>
    … so that …
  • cartoons present with “speech bubble” wording aligned to the top in our “cells” (ie. th contenteditable=true editable wording on top of td horizontal flip (double click) and/or vertical flop (right click) editable lower part) with those characters aligned to the bottom

… in our changed “third draft” Cartoon creation and email sharing capable PHP web application you can also try below.


Previous relevant Python Cowsay API Primer Tutorial is shown below.

Python Cowsay API Primer Tutorial

Python Cowsay API Primer Tutorial

We discovered an interesting Open Source Python API / Command-line tool called cowsay which we installed up at our AlmaLinux web server via …


pip install cowsay

… with an integration purpose in mind, so thanks. Before many readers’ time indeed, but some may remember those cute banner printouts that told you who owned the next printout on a spooling “crude graphics” printout in the late 70’s … well cowsay encapsulates those heady days (and who can forget punch cards)?! Before integration, though, we want to test it via a new PHP supervisor on exec method Linux command line interfacings to cowsay.

So we started, with this “first draft” getting places and then this “second draft” with a little more sophistication to leave the day with this interfacer

If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.

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

Text to Image via ImageMagick Primer Tutorial

Text to Image via ImageMagick Primer Tutorial

Text to Image via ImageMagick Primer Tutorial

Why would a “Primer” tutorial point at a “well along the way” one? Well, a few reasons really …

Yes, the great ImageMagick (and we’re using it’s command line “convert” command here to make this happen) can convert text to images (ie. HTML img elements). Now, we’re not saying you always get perfect matches here, but it is akin to mere mortal dreamers think of as “intelligent scanning”. So, we wanted to have this sidetrack, and we will be resuming “normal transmission” shortly?!

We’ll leave you with some cowsay.php new relevant PHP code to ponder …

<?php

if (isset($_GET['fontlist'])) {
$selpop='';
if (!file_exists('/tmp/imfl.txt')) {
exec('convert -list font > /tmp/imfl.txt');
}
$fcont=file_get_contents('/tmp/imfl.txt');
if (strpos($fcont, 'family: ') !== false) {
$fcs=explode('family: ', $fcont);
for ($iuy=1; $iuy<sizeof($fcs); $iuy++) {
if (strpos($selpop, '>' . explode("\n", $fcs[$iuy])[0] . '<') === false) {
$selpop.="\n selo.innerHTML+='<option value=' + String.fromCharCode(39) + '" . explode("\n", $fcs[$iuy])[0] . "' + String.fromCharCode(39) + '>" . explode("\n", $fcs[$iuy])[0] . "</option>'; \n";
}
}
if ($selpop != '') {
echo "<html><body onload=\" var selos=parent.document.getElementsByTagName('select'); if (eval('' + selos.length) > 0) { var selo=selos[eval(-1 + selos.length)]; " . $selpop . " selo.style.display='inline-block'; selo.style.backgroundColor='#f0f0f0'; } \"></body></html>";
}
}
exit;
} else if (isset($_POST['text'])) {
$perlemoji='';
$emojilabbit="@- "; // vs perl
$iex='png';
$fnt='Courier';
$wdt='800';
$hgt='800';
$psiz='36';
$fcol='black';
$bcol='white';
if (isset($_POST['ext'])) { $iex=str_replace('+',' ',urldecode($_POST['ext'])); }
if (isset($_POST['ffam'])) { $fnt=str_replace('+',' ',urldecode($_POST['ffam'])); }
if (isset($_POST['width'])) { $pwdt=str_replace('+',' ',urldecode($_POST['width'])); }
if (isset($_POST['height'])) { $hgt=str_replace('+',' ',urldecode($_POST['height'])); }
if (isset($_POST['ptsize'])) { $psiz=str_replace('+',' ',urldecode($_POST['ptsize'])); }
if (isset($_POST['fcol'])) { $fcol=str_replace('+',' ',urldecode($_POST['fcol'])); }
if (isset($_POST['bcol'])) { $bcol=str_replace('+',' ',urldecode($_POST['bcol'])); }
$slidename='/tmp/imagerequest_' . server_remote_addr() . '-0.' . $iex;
file_put_contents('/tmp/imagerequest_' . server_remote_addr() . '-0.txt', str_replace('+',' ',urldecode($_POST['text'])));
file_put_contents('/tmp/maybeemojisP.txt', htmlspecialchars(str_replace('+',' ',urldecode($_POST['text'])), ENT_COMPAT,'UTF-8', true));
// yes no &#129684;
if (strpos(str_replace('+',' ',urldecode($_POST['text'])), '&#') !== false || strpos(str_replace('+',' ',urldecode($_POST['text'])), '&#') !== false) { // thanks to https://usage.imagemagick.org/text/#unicode
$outsofar=''; // '\x{201C}Unicode \x{2018}\x{263A}\x{2019} Please\x{201D}'
if (strpos(str_replace('+',' ',urldecode($_POST['text'])), '&#') !== false) {
$outs=explode('&#', str_replace('+',' ',urldecode($_POST['text'])));
$outsofar=$outs[0];
for ($ivx=1; $ivx<sizeof($outs); $ivx++) {
$decis=explode(';', $outs[$ivx])[0];
if (str_replace('0','',str_replace('1','',str_replace('2','',str_replace('3','',str_replace('4','',str_replace('5','',str_replace('6','',str_replace('7','',str_replace('8','',str_replace('9','',$decis)))))))))) != '') {
if (substr(strtolower($decis),0,1) == 'x') {
$outsofar.="\\x{" . substr($decis,1) . "}";
} else {
$outsofar.="\\x{" . $decis . "}";
}
} else {
$outsofar.="\\x{" . dechex($decis) . "}";
}
$outsofar.=substr($outs[$ivx],strlen($decis . ';'));
}
} else if (strpos(str_replace('+',' ',urldecode($_POST['text'])), '&#') !== false) {
$outs=explode('&#', str_replace('+',' ',urldecode($_POST['text'])));
$outsofar=$outs[0];
for ($ivx=1; $ivx<sizeof($outs); $ivx++) {
$decis=explode(';', $outs[$ivx])[0];
if (str_replace('0','',str_replace('1','',str_replace('2','',str_replace('3','',str_replace('4','',str_replace('5','',str_replace('6','',str_replace('7','',str_replace('8','',str_replace('9','',$decis)))))))))) != '') {
if (substr(strtolower($decis),0,1) == 'x') {
$outsofar.="\\x{" . substr($decis,1) . "}";
} else {
$outsofar.="\\x{" . $decis . "}";
}
} else {
$outsofar.="\\x{" . dechex($decis) . "}";
}
$outsofar.=substr($outs[$ivx],strlen($decis . ';'));
}
}
$labbit=$emojilabbit;
$perlemoji="perl -e 'binmode(STDOUT, \":utf8\"); print \"" . str_replace("\n", "\x{000A}", $outsofar) . '";' . "' | ";
}
if (strpos(str_replace('+',' ',urldecode($_POST['text'])), "\\") !== false) {
if ($perlemoji == '') { $labbit='"$(cat /tmp/imagerequest_' . server_remote_addr() . '-0.txt | ' . " sed '/\\\\/s//\\\\\\\\/g')" . '" '; }
file_put_contents('/tmp/imag.cmd', $perlemoji . 'convert -background "' . $bcol . '" -fill "' . $fcol . '" -size ' . $wdt . 'x' . $hgt . ' -font ' . $fnt . ' -pointsize ' . $psiz . ' label:' . $labbit . ' ' . $slidename);
exec($perlemoji . 'convert -background "' . $bcol . '" -fill "' . $fcol . '" -size ' . $wdt . 'x' . $hgt . ' -font ' . $fnt . ' -pointsize ' . $psiz . ' label:' . $labbit . ' ' . $slidename);
exec('chmod 777 ' . $slidename);
} else {
if ($perlemoji == '') { $labbit='"$(cat /tmp/imagerequest_' . server_remote_addr() . '-0.txt)' . '" '; }
file_put_contents('/tmp/imaG.cmd', $perlemoji . 'convert -background "' . $bcol . '" -fill "' . $fcol . '" -size ' . $wdt . 'x' . $hgt . ' -font ' . $fnt . ' -pointsize ' . $psiz . ' label:' . $labbit . ' ' . $slidename . ' ; chmod 777 ' . $slidename);
exec($perlemoji . 'convert -background "' . $bcol . '" -fill "' . $fcol . '" -size ' . $wdt . 'x' . $hgt . ' -font ' . $fnt . ' -pointsize ' . $psiz . ' label:' . $labbit . ' ' . $slidename);
exec('chmod 777 ' . $slidename);
}
if (isset($_POST['raw'])) {
header('Content-Type: image/' . $iex);
echo file_get_contents($slidename);
unlink($slidename);
unlink('/tmp/imagerequest_' . server_remote_addr() . '-0.txt');
exit;
} else {
echo "<html>
<body onload=\"
if (window.parent != window.self) {
var cnvs=parent.document.getElementsByTagName('canvas');
if (eval('' + cnvs.length) > 0) {
var imgsis=new Image();
imgsis.onload=function(event){
var canvasis=cnvs[0];
var cntxis=canvasis.getContext('2d');
cntxis.drawImage(event.target, 0, 0);
};
imgsis.src='data:image/" . $iex . ";base64," . base64_encode(file_get_contents($slidename)) . "';
} else {
var imgs=parent.document.getElementsByTagName('img');
if (eval('' + imgs.length) > 0) {
imgs[0].src='data:image/" . $iex . ";base64," . base64_encode(file_get_contents($slidename)) . "';
} else if (document.body.innerHTML == '') {
document.body.innerHTML='<img src=data:image/" . $iex . ";base64," . base64_encode(file_get_contents($slidename)) . "></img><style> * { margin:0 0 0 0; padding:0 0 0 0; } img { border-top: 8px solid " . $bcol . "; }</style>';
} else {
document.body.innerHTML+='<br><img src=data:image/" . $iex . ";base64," . base64_encode(file_get_contents($slidename)) . "></img>';
}
}
} else if (document.body.innerHTML == '') {
document.body.innerHTML='<img src=data:image/" . $iex . ";base64," . base64_encode(file_get_contents($slidename)) . "></img><style> * { margin:0 0 0 0; padding:0 0 0 0; } img { border-top: 8px solid " . $bcol . "; }</style>';
} else {
document.body.innerHTML+='<br><img src=data:image/" . $iex . ";base64," . base64_encode(file_get_contents($slidename)) . "></img>';
}
\"></body></html>";
unlink('/tmp/imagerequest_' . server_remote_addr() . '-0.txt');
try {
unlink($slidename);
} catch(Exception $esdw) { }
}
exit;
} else if (isset($_GET['text'])) {
$perlemoji='';
$emojilabbit="@- "; // vs perl
$iex='png';
$fnt='Courier';
$wdt='800';
$hgt='800';
$psiz='36';
$fcol='black';
$bcol='white';
if (isset($_GET['ext'])) { $iex=str_replace('+',' ',urldecode($_GET['ext'])); }
if (isset($_GET['ffam'])) { $fnt=str_replace('+',' ',urldecode($_GET['ffam'])); }
if (isset($_GET['width'])) { $pwdt=str_replace('+',' ',urldecode($_GET['width'])); }
if (isset($_GET['height'])) { $hgt=str_replace('+',' ',urldecode($_GET['height'])); }
if (isset($_GET['ptsize'])) { $psiz=str_replace('+',' ',urldecode($_GET['ptsize'])); }
if (isset($_GET['fcol'])) { $fcol=str_replace('+',' ',urldecode($_GET['fcol'])); }
if (isset($_GET['bcol'])) { $bcol=str_replace('+',' ',urldecode($_GET['bcol'])); }
$slidename='/tmp/imagerequest_' . server_remote_addr() . '-0.' . $iex;
file_put_contents('/tmp/imagerequest_' . server_remote_addr() . '-0.txt', str_replace('+',' ',urldecode($_GET['text'])));
file_put_contents('/tmp/maybeemojisG.txt', htmlspecialchars(str_replace('+',' ',urldecode($_GET['text'])), ENT_COMPAT,'UTF-8', true));
// yes no &#129684;
if (strpos(str_replace('+',' ',urldecode($_GET['text'])), '&#') !== false || strpos(str_replace('+',' ',urldecode($_GET['text'])), '&#') !== false) { // thanks to https://usage.imagemagick.org/text/#unicode
$outsofar=''; // '\x{201C}Unicode \x{2018}\x{263A}\x{2019} Please\x{201D}'
if (strpos(str_replace('+',' ',urldecode($_GET['text'])), '&#') !== false) {
$outs=explode('&#', str_replace('+',' ',urldecode($_GET['text'])));
$outsofar=$outs[0];
for ($ivx=1; $ivx<sizeof($outs); $ivx++) {
$decis=explode(';', $outs[$ivx])[0];
if (str_replace('0','',str_replace('1','',str_replace('2','',str_replace('3','',str_replace('4','',str_replace('5','',str_replace('6','',str_replace('7','',str_replace('8','',str_replace('9','',$decis)))))))))) != '') {
if (substr(strtolower($decis),0,1) == 'x') {
$outsofar.="\\x{" . substr($decis,1) . "}";
} else {
$outsofar.="\\x{" . $decis . "}";
}
} else {
$outsofar.="\\x{" . dechex($decis) . "}";
}
$outsofar.=substr($outs[$ivx],strlen($decis . ';'));
}
} else if (strpos(str_replace('+',' ',urldecode($_GET['text'])), '&#') !== false) {
$outs=explode('&#', str_replace('+',' ',urldecode($_GET['text'])));
$outsofar=$outs[0];
for ($ivx=1; $ivx<sizeof($outs); $ivx++) {
$decis=explode(';', $outs[$ivx])[0];
if (str_replace('0','',str_replace('1','',str_replace('2','',str_replace('3','',str_replace('4','',str_replace('5','',str_replace('6','',str_replace('7','',str_replace('8','',str_replace('9','',$decis)))))))))) != '') {
if (substr(strtolower($decis),0,1) == 'x') {
$outsofar.="\\x{" . substr($decis,1) . "}";
} else {
$outsofar.="\\x{" . $decis . "}";
}
} else {
$outsofar.="\\x{" . dechex($decis) . "}";
}
$outsofar.=substr($outs[$ivx],strlen($decis . ';'));
}
}
$labbit=$emojilabbit;
$perlemoji="perl -e 'binmode(STDOUT, \":utf8\"); print \"" . str_replace("\n", "\x{000A}", $outsofar) . '";' . "' | ";
}
if (strpos(str_replace('+',' ',urldecode($_GET['text'])), "\\") !== false) {
if ($perlemoji == '') { $labbit='"$(cat /tmp/imagerequest_' . server_remote_addr() . '-0.txt | ' . " sed '/\\\\/s//\\\\\\\\/g')" . '" '; }
//file_put_contents('/tmp/imag.cmd', 'convert -background "' . $bcol . '" -fill "' . $fcol . '" -size ' . $wdt . 'x' . $hgt . ' -font ' . $fnt . ' -pointsize ' . $psiz . ' label:"$(cat /tmp/imagerequest_' . server_remote_addr() . '-0.txt | ' . " sed '/\\\\/s//\\\\\\\\/g')" . '" ' . $slidename . ' ; chmod 777 ' . $slidename);
exec($perlemoji . 'convert -background "' . $bcol . '" -fill "' . $fcol . '" -size ' . $wdt . 'x' . $hgt . ' -font ' . $fnt . ' -pointsize ' . $psiz . ' label:' . $labbit . ' ' . $slidename);
exec('chmod 777 ' . $slidename);
} else {
if ($perlemoji == '') { $labbit='"$(cat /tmp/imagerequest_' . server_remote_addr() . '-0.txt)' . '" '; }
exec($perlemoji . 'convert -background "' . $bcol . '" -fill "' . $fcol . '" -size ' . $wdt . 'x' . $hgt . ' -font ' . $fnt . ' -pointsize ' . $psiz . ' label:' . $labbit . ' ' . $slidename);
exec('chmod 777 ' . $slidename);
}
if (isset($_GET['raw'])) {
header('Content-Type: image/' . $iex);
echo file_get_contents($slidename);
unlink($slidename);
unlink('/tmp/imagerequest_' . server_remote_addr() . '-0.txt');
exit;
} else {
echo "<html>
<body onload=\"
if (window.parent != window.self) {
var cnvs=parent.document.getElementsByTagName('canvas');
if (eval('' + cnvs.length) > 0) {
var imgsis=new Image();
imgsis.onload=function(event){
var canvasis=cnvs[0];
var cntxis=canvasis.getContext('2d');
cntxis.drawImage(event.target, 0, 0);
};
imgsis.src='data:image/" . $iex . ";base64," . base64_encode(file_get_contents($slidename)) . "';
} else {
var imgs=parent.document.getElementsByTagName('img');
if (eval('' + imgs.length) > 0) {
imgs[0].src='data:image/" . $iex . ";base64," . base64_encode(file_get_contents($slidename)) . "';
} else if (document.body.innerHTML == '') {
document.body.innerHTML='<img src=data:image/" . $iex . ";base64," . base64_encode(file_get_contents($slidename)) . "></img><style> * { margin:0 0 0 0; padding:0 0 0 0; } img { border-top: 8px solid " . $bcol . "; }</style>';
} else {
document.body.innerHTML+='<br><img src=data:image/" . $iex . ";base64," . base64_encode(file_get_contents($slidename)) . "></img>';
}
}
} else if (document.body.innerHTML == '') {
document.body.innerHTML='<img src=data:image/" . $iex . ";base64," . base64_encode(file_get_contents($slidename)) . "></img><style> * { margin:0 0 0 0; padding:0 0 0 0; } img { border-top: 8px solid " . $bcol . "; }</style>';
} else {
document.body.innerHTML+='<br><img src=data:image/" . $iex . ";base64," . base64_encode(file_get_contents($slidename)) . "></img>';
}
\"></body></html>";
unlink('/tmp/imagerequest_' . server_remote_addr() . '-0.txt');
try {
unlink($slidename);
} catch(Exception $esdw) { }
}
exit;
}

?>


Previous relevant Python Cowsay API Cartoon Speech Content Tutorial is shown below.

Python Cowsay API Cartoon Speech Content Tutorial

Python Cowsay API Cartoon Speech Content Tutorial

If you were to ask most people what is more onerous filling in online web forms on the way to making something happen …

  • we’re guessing, rather than saying button presses …
  • we’re guessing, they’re more likely to say typing out text …

… with it’s associated tabbing out to negotiate as well. But, supposing we could offer you a “speech to text” approach to performing “typing out text” in our latest cowsay Python API / Command-line tool interfacing PHP web application?

For some years now, we’ve interfaced to a …

  • non-mobile
  • Google Chrome
  • secure URL via https: protocol
  • allowing access to microphone

… means by which we normally access via a “top” hierarchy level call to our inhouse Google Speech to Text API interfacing web application helper.

Isn’t a popup window awkward here? Well, you might think so, but today, we discovered with the Google Chrome browser we used on macOS …

  • we initially call our inhouse Google Speech to Text API interfacing web application helper as a popup sitting in front of the cowsay interfacing parent window …
    <?php echo ”

    function anop() {
    if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
    topwo=window_open('https://www.google.com/intl/en/chrome/demos/speech.html','_blank','top=120,left=' + eval(eval('' + screen.width) - 690) + ',width=690,height=550');
    setTimeout(function(){ topwo.scrollTo(0,0); topwo.document.getElementById('tdm').style.opacity='0.0'; }, 6000);
    setInterval(function(){ if (!topwo.closed) { topwo.focus(); } topwo.location.href='https://www.rjmprogramming.com.au/PHP/speech_supervisor.php?rand=' + Math.floor(Math.random() * 1987967) + '&mode=4'; setTimeout(function(){ topwo.scrollTo(0,0); topwo.document.getElementById('tdm').style.opacity='0.0'; }, 6000); }, 30000);
    } else {
    topwo=window.open('https://www.rjmprogramming.com.au/PHP/speech_supervisor.php?rand=' + Math.floor(Math.random() * 1987967) + '&mode=4','_blank','top=120,left=' + eval(eval('' + screen.width) - 690) + ',width=690,height=550');
    setTimeout(function(){ topwo.scrollTo(0,0); topwo.document.getElementById('tdm').style.opacity='0.0'; }, 6000);
    setInterval(function(){ if (!topwo.closed) { topwo.focus(); } topwo.location.href='https://www.rjmprogramming.com.au/PHP/speech_supervisor.php?rand=' + Math.floor(Math.random() * 1987967) + '&mode=4'; setTimeout(function(){ topwo.scrollTo(0,0); topwo.document.getElementById('tdm').style.opacity='0.0'; }, 6000); }, 30000);
    }
    }

    “; ?>
  • and found that it was visible until any click or focus back to the cowsay interfacing parent window … normally an annoyance …
  • but not if …
    1. we semi regularly reload the our inhouse Google Speech to Text API interfacing web application helper … to refresh it’s red “recording” button instigation … and then …
    2. even if it remains hidden, it is still apparent to the focussed cowsay interfacing parent window on account of an orange “microphone on recording” icon appearing for the Google Chrome web browser user up at it’s Menu Bar … and …
    3. audio being “sight independent” the user does not have to refocus our inhouse Google Speech to Text API interfacing web application helper, just talk into the microphone just after that new icon appears … so that …
    4. the Google Speech to Text smarts help transfer that resultant text over to the textarea of the cowsay interfacing parent window, even avoiding any need to tab out of that textarea element … ahead of …
    5. the rest of the dropdown selections and button presses needed to achieve the user aim of establishing a new slide, perhaps for a Cartoon being created

… you can see happening with today’s animated GIF presentation on top of the work of yesterday’s Python Cowsay API Cartoon Tutorial in our changed “fourth draft” Cartoon creation and email sharing capable PHP web application you can also try below.


Previous relevant Python Cowsay API Cartoon Tutorial is shown below.

Python Cowsay API Cartoon Tutorial

Python Cowsay API Cartoon Tutorial

We’ve long been interested in online web application ideas that end up with a half decent cartoon the user can create, and share, themselves. “Half decent” becomes “fully decent” with a user who has a great imagination. And so, onto yesterday’s Python Cowsay API Primer Tutorial‘s start with interfacing to the great cowsay Python API / Command-line tool we access via the PHP exec method conduit to our AlmaLinux Apache/PHP/MySql Linux web server, today we’ve extended that …

  • “proof of concept” thinking … onto …
  • cartoon creation “smarts” … starting with (also egged on here by mobile platform problems with monospaced fonts, it seems like)
  • allowing a tabular display of our cowsay components … into …
  • table cells horizontally aligned (and so, less vulnerable to monospacing inaccuracies) … also allowing …
  • within any table cell there is a topmost th table cell wording part above a cowsay character td cell lower part …
  • “half decent” looking via static CSS
    <?php echo ”

    <style>
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    tr { vertical-align: top; }
    td { vertical-align: top; }
    th { vertical-align: top; }

    * { font-family:'Courier New',Courier,monospace; }
    .img-hor { // thanks to https://stackoverflow.com/questions/32875695/flip-mirror-an-image-horizontally-vertically-with-css
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: 'FlipH';
    }
    .img-ver { // thanks to https://stackoverflow.com/questions/32875695/flip-mirror-an-image-horizontally-vertically-with-css
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: FlipV;
    -ms-filter: 'FlipV';
    }

    .glow {
    -webkit-animation: glow 1s linear infinite alternate;
    -moz-animation: glow 1s linear infinite alternate;
    animation: glow 1s linear infinite alternate;
    }

    /* Thanks to https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_glowing_text */

    @-webkit-keyframes glow {
    from {
    box-shadow: 0 0 3px #fff, 0 0 5px #fff, 0 0 37px #e60073, 0 0 9px #e60073, 0 0 11px #e60073, 0 0 13px #e60073, 0 0 15px #e60073;
    }

    to {
    box-shadow: 0 0 24px #fff, 0 0 6px #ff4da6, 0 0 8px #ff4da6, 0 0 10px #ff4da6, 0 0 12px #ff4da6, 0 0 14px #ff4da6, 0 0 16px #ff4da6;
    }
    }

    th[id$='0'] {
    background: rgba(224,240,240,0.6); //#e0f0f0;
    }

    th[id$='1'] {
    background: rgba(225,241,241,0.6); //#e1f1f1;
    }

    th[id$='2'] {
    background: rgba(226,242,242,0.6); //#e2f2f2;
    }

    th[id$='3'] {
    background: rgba(227,243,243,0.6); //#e3f3f3;
    }

    th[id$='4'] {
    background: rgba(228,244,244,0.6); //#e4f4f4;
    }

    th[id$='5'] {
    background: rgba(229,245,245,0.6); //#e5f5f5;
    }

    th[id$='6'] {
    background: rgba(230,246,246,0.6); //#e6f6f6;
    }

    th[id$='7'] {
    background: rgba(231,247,247,0.6); //#e7f7f7;
    }

    th[id$='8'] {
    background: rgba(232,248,248,0.6); //#e2f2f2;
    }

    th[id$='9'] {
    background: rgba(233,249,249,0.6); //#e9f9f9;
    }

    td[id$='0'] {
    background: rgba(240,240,240,0.3); //#f0f0f0;
    text-shadow:-1px 1px 1px #ff2d90;
    }

    td[id$='1'] {
    background: rgba(241,241,241,0.3); //#f1f1f1;
    text-shadow:-1px 1px 1px #ff2d91;
    float: bottom;
    }

    td[id$='2'] {
    background: rgba(242,242,242,0.3); //#f2f2f2;
    text-shadow:-1px 1px 1px #ff2d92;
    }

    td[id$='3'] {
    background: rgba(243,243,243,0.3); //#f3f3f3;
    text-shadow:-1px 1px 1px #ff2d93;
    }

    td[id$='4'] {
    background: rgba(244,244,244,0.3); //#f4f4f4;
    text-shadow:-1px 1px 1px #ff2d94;
    }

    td[id$='5'] {
    background: rgba(245,245,245,0.3); //#f5f5f5;
    text-shadow:-1px 1px 1px #ff2d95;
    }

    td[id$='6'] {
    background: rgba(246,246,246,0.3); //#f6f6f6;
    text-shadow:-1px 1px 1px #ff2d96;
    }

    td[id$='7'] {
    background: rgba(247,247,247,0.3); //#f7f7f7;
    text-shadow:-1px 1px 1px #ff2d97;
    }

    td[id$='8'] {
    background: rgba(248,248,248,0.3); //#f8f8f8;
    text-shadow:-1px 1px 1px #ff2d98;
    }

    td[id$='9'] {
    background: rgba(249,249,249,0.3); //#f9f9f9;
    text-shadow:-1px 1px 1px #ff2d99;
    }

    table tbody tr:first-child {
    background: transparent; //#f6f6e6;
    }
    </style>

    “; ?>
    … and then …
  • whenever new cell content happens padding-top adding CSS Javascript DOM nuanced display logic via …
    <?php echo ”

    function paddingtopit() {
    var maxtwo=0, thistwo=0;
    var thhs=[], tdhs=[], it=0;
    var thdids=[];
    //trthtd1
    //trtdtd1
    var tds=document.getElementsByTagName('td');
    for (it=0; it<tds.length; it++) {
    if (('' + tds[it].id).indexOf('trtdtd') != -1) {
    if (('' + tds[it].style.paddingTop).replace(/^null/g,'').replace(/^undefined/g,'').trim() != '') {
    tds[it].style.paddingTop='0px';
    }
    }
    }
    for (it=0; it<tds.length; it++) {
    if (('' + tds[it].id).indexOf('trtdtd') != -1) {
    tdhs.push(eval('' + tds[it].getBoundingClientRect().height));
    thdids.push('' + tds[it].id);
    }
    }
    var ths=document.getElementsByTagName('th');
    for (it=0; it<ths.length; it++) {
    if (('' + ths[it].id).indexOf('trthtd') != -1) {
    thhs.push(eval('' + ths[it].getBoundingClientRect().height));
    thistwo=eval(thhs[it] + tdhs[it]);
    if (thistwo > maxtwo) { maxtwo=thistwo; }
    }
    }
    for (it=0; it<tdhs.length; it++) {
    thistwo=eval(thhs[it] + tdhs[it]);
    if (thistwo < maxtwo) {
    document.getElementById(thdids[it]).style.paddingTop='' + eval(maxtwo - thistwo) + 'px';
    }
    }
    }

    “; ?>
    … so that …
  • cartoons present with “speech bubble” wording aligned to the top in our “cells” (ie. th contenteditable=true editable wording on top of td horizontal flip (double click) and/or vertical flop (right click) editable lower part) with those characters aligned to the bottom

… in our changed “third draft” Cartoon creation and email sharing capable PHP web application you can also try below.


Previous relevant Python Cowsay API Primer Tutorial is shown below.

Python Cowsay API Primer Tutorial

Python Cowsay API Primer Tutorial

We discovered an interesting Open Source Python API / Command-line tool called cowsay which we installed up at our AlmaLinux web server via …


pip install cowsay

… with an integration purpose in mind, so thanks. Before many readers’ time indeed, but some may remember those cute banner printouts that told you who owned the next printout on a spooling “crude graphics” printout in the late 70’s … well cowsay encapsulates those heady days (and who can forget punch cards)?! Before integration, though, we want to test it via a new PHP supervisor on exec method Linux command line interfacings to cowsay.

So we started, with this “first draft” getting places and then this “second draft” with a little more sophistication to leave the day with this interfacer

If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.

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

Python Cowsay API Cartoon Speech Content Tutorial

Python Cowsay API Cartoon Speech Content Tutorial

Python Cowsay API Cartoon Speech Content Tutorial

If you were to ask most people what is more onerous filling in online web forms on the way to making something happen …

  • we’re guessing, rather than saying button presses …
  • we’re guessing, they’re more likely to say typing out text …

… with it’s associated tabbing out to negotiate as well. But, supposing we could offer you a “speech to text” approach to performing “typing out text” in our latest cowsay Python API / Command-line tool interfacing PHP web application?

For some years now, we’ve interfaced to a …

  • non-mobile
  • Google Chrome
  • secure URL via https: protocol
  • allowing access to microphone

… means by which we normally access via a “top” hierarchy level call to our inhouse Google Speech to Text API interfacing web application helper.

Isn’t a popup window awkward here? Well, you might think so, but today, we discovered with the Google Chrome browser we used on macOS …

  • we initially call our inhouse Google Speech to Text API interfacing web application helper as a popup sitting in front of the cowsay interfacing parent window …
    <?php echo ”

    function anop() {
    if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
    topwo=window_open('https://www.google.com/intl/en/chrome/demos/speech.html','_blank','top=120,left=' + eval(eval('' + screen.width) - 690) + ',width=690,height=550');
    setTimeout(function(){ topwo.scrollTo(0,0); topwo.document.getElementById('tdm').style.opacity='0.0'; }, 6000);
    setInterval(function(){ if (!topwo.closed) { topwo.focus(); } topwo.location.href='https://www.rjmprogramming.com.au/PHP/speech_supervisor.php?rand=' + Math.floor(Math.random() * 1987967) + '&mode=4'; setTimeout(function(){ topwo.scrollTo(0,0); topwo.document.getElementById('tdm').style.opacity='0.0'; }, 6000); }, 30000);
    } else {
    topwo=window.open('https://www.rjmprogramming.com.au/PHP/speech_supervisor.php?rand=' + Math.floor(Math.random() * 1987967) + '&mode=4','_blank','top=120,left=' + eval(eval('' + screen.width) - 690) + ',width=690,height=550');
    setTimeout(function(){ topwo.scrollTo(0,0); topwo.document.getElementById('tdm').style.opacity='0.0'; }, 6000);
    setInterval(function(){ if (!topwo.closed) { topwo.focus(); } topwo.location.href='https://www.rjmprogramming.com.au/PHP/speech_supervisor.php?rand=' + Math.floor(Math.random() * 1987967) + '&mode=4'; setTimeout(function(){ topwo.scrollTo(0,0); topwo.document.getElementById('tdm').style.opacity='0.0'; }, 6000); }, 30000);
    }
    }

    “; ?>
  • and found that it was visible until any click or focus back to the cowsay interfacing parent window … normally an annoyance …
  • but not if …
    1. we semi regularly reload the our inhouse Google Speech to Text API interfacing web application helper … to refresh it’s red “recording” button instigation … and then …
    2. even if it remains hidden, it is still apparent to the focussed cowsay interfacing parent window on account of an orange “microphone on recording” icon appearing for the Google Chrome web browser user up at it’s Menu Bar … and …
    3. audio being “sight independent” the user does not have to refocus our inhouse Google Speech to Text API interfacing web application helper, just talk into the microphone just after that new icon appears … so that …
    4. the Google Speech to Text smarts help transfer that resultant text over to the textarea of the cowsay interfacing parent window, even avoiding any need to tab out of that textarea element … ahead of …
    5. the rest of the dropdown selections and button presses needed to achieve the user aim of establishing a new slide, perhaps for a Cartoon being created

… you can see happening with today’s animated GIF presentation on top of the work of yesterday’s Python Cowsay API Cartoon Tutorial in our changed “fourth draft” Cartoon creation and email sharing capable PHP web application you can also try below.


Previous relevant Python Cowsay API Cartoon Tutorial is shown below.

Python Cowsay API Cartoon Tutorial

Python Cowsay API Cartoon Tutorial

We’ve long been interested in online web application ideas that end up with a half decent cartoon the user can create, and share, themselves. “Half decent” becomes “fully decent” with a user who has a great imagination. And so, onto yesterday’s Python Cowsay API Primer Tutorial‘s start with interfacing to the great cowsay Python API / Command-line tool we access via the PHP exec method conduit to our AlmaLinux Apache/PHP/MySql Linux web server, today we’ve extended that …

  • “proof of concept” thinking … onto …
  • cartoon creation “smarts” … starting with (also egged on here by mobile platform problems with monospaced fonts, it seems like)
  • allowing a tabular display of our cowsay components … into …
  • table cells horizontally aligned (and so, less vulnerable to monospacing inaccuracies) … also allowing …
  • within any table cell there is a topmost th table cell wording part above a cowsay character td cell lower part …
  • “half decent” looking via static CSS
    <?php echo ”

    <style>
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    tr { vertical-align: top; }
    td { vertical-align: top; }
    th { vertical-align: top; }

    * { font-family:'Courier New',Courier,monospace; }
    .img-hor { // thanks to https://stackoverflow.com/questions/32875695/flip-mirror-an-image-horizontally-vertically-with-css
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: 'FlipH';
    }
    .img-ver { // thanks to https://stackoverflow.com/questions/32875695/flip-mirror-an-image-horizontally-vertically-with-css
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: FlipV;
    -ms-filter: 'FlipV';
    }

    .glow {
    -webkit-animation: glow 1s linear infinite alternate;
    -moz-animation: glow 1s linear infinite alternate;
    animation: glow 1s linear infinite alternate;
    }

    /* Thanks to https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_glowing_text */

    @-webkit-keyframes glow {
    from {
    box-shadow: 0 0 3px #fff, 0 0 5px #fff, 0 0 37px #e60073, 0 0 9px #e60073, 0 0 11px #e60073, 0 0 13px #e60073, 0 0 15px #e60073;
    }

    to {
    box-shadow: 0 0 24px #fff, 0 0 6px #ff4da6, 0 0 8px #ff4da6, 0 0 10px #ff4da6, 0 0 12px #ff4da6, 0 0 14px #ff4da6, 0 0 16px #ff4da6;
    }
    }

    th[id$='0'] {
    background: rgba(224,240,240,0.6); //#e0f0f0;
    }

    th[id$='1'] {
    background: rgba(225,241,241,0.6); //#e1f1f1;
    }

    th[id$='2'] {
    background: rgba(226,242,242,0.6); //#e2f2f2;
    }

    th[id$='3'] {
    background: rgba(227,243,243,0.6); //#e3f3f3;
    }

    th[id$='4'] {
    background: rgba(228,244,244,0.6); //#e4f4f4;
    }

    th[id$='5'] {
    background: rgba(229,245,245,0.6); //#e5f5f5;
    }

    th[id$='6'] {
    background: rgba(230,246,246,0.6); //#e6f6f6;
    }

    th[id$='7'] {
    background: rgba(231,247,247,0.6); //#e7f7f7;
    }

    th[id$='8'] {
    background: rgba(232,248,248,0.6); //#e2f2f2;
    }

    th[id$='9'] {
    background: rgba(233,249,249,0.6); //#e9f9f9;
    }

    td[id$='0'] {
    background: rgba(240,240,240,0.3); //#f0f0f0;
    text-shadow:-1px 1px 1px #ff2d90;
    }

    td[id$='1'] {
    background: rgba(241,241,241,0.3); //#f1f1f1;
    text-shadow:-1px 1px 1px #ff2d91;
    float: bottom;
    }

    td[id$='2'] {
    background: rgba(242,242,242,0.3); //#f2f2f2;
    text-shadow:-1px 1px 1px #ff2d92;
    }

    td[id$='3'] {
    background: rgba(243,243,243,0.3); //#f3f3f3;
    text-shadow:-1px 1px 1px #ff2d93;
    }

    td[id$='4'] {
    background: rgba(244,244,244,0.3); //#f4f4f4;
    text-shadow:-1px 1px 1px #ff2d94;
    }

    td[id$='5'] {
    background: rgba(245,245,245,0.3); //#f5f5f5;
    text-shadow:-1px 1px 1px #ff2d95;
    }

    td[id$='6'] {
    background: rgba(246,246,246,0.3); //#f6f6f6;
    text-shadow:-1px 1px 1px #ff2d96;
    }

    td[id$='7'] {
    background: rgba(247,247,247,0.3); //#f7f7f7;
    text-shadow:-1px 1px 1px #ff2d97;
    }

    td[id$='8'] {
    background: rgba(248,248,248,0.3); //#f8f8f8;
    text-shadow:-1px 1px 1px #ff2d98;
    }

    td[id$='9'] {
    background: rgba(249,249,249,0.3); //#f9f9f9;
    text-shadow:-1px 1px 1px #ff2d99;
    }

    table tbody tr:first-child {
    background: transparent; //#f6f6e6;
    }
    </style>

    “; ?>
    … and then …
  • whenever new cell content happens padding-top adding CSS Javascript DOM nuanced display logic via …
    <?php echo ”

    function paddingtopit() {
    var maxtwo=0, thistwo=0;
    var thhs=[], tdhs=[], it=0;
    var thdids=[];
    //trthtd1
    //trtdtd1
    var tds=document.getElementsByTagName('td');
    for (it=0; it<tds.length; it++) {
    if (('' + tds[it].id).indexOf('trtdtd') != -1) {
    if (('' + tds[it].style.paddingTop).replace(/^null/g,'').replace(/^undefined/g,'').trim() != '') {
    tds[it].style.paddingTop='0px';
    }
    }
    }
    for (it=0; it<tds.length; it++) {
    if (('' + tds[it].id).indexOf('trtdtd') != -1) {
    tdhs.push(eval('' + tds[it].getBoundingClientRect().height));
    thdids.push('' + tds[it].id);
    }
    }
    var ths=document.getElementsByTagName('th');
    for (it=0; it<ths.length; it++) {
    if (('' + ths[it].id).indexOf('trthtd') != -1) {
    thhs.push(eval('' + ths[it].getBoundingClientRect().height));
    thistwo=eval(thhs[it] + tdhs[it]);
    if (thistwo > maxtwo) { maxtwo=thistwo; }
    }
    }
    for (it=0; it<tdhs.length; it++) {
    thistwo=eval(thhs[it] + tdhs[it]);
    if (thistwo < maxtwo) {
    document.getElementById(thdids[it]).style.paddingTop='' + eval(maxtwo - thistwo) + 'px';
    }
    }
    }

    “; ?>
    … so that …
  • cartoons present with “speech bubble” wording aligned to the top in our “cells” (ie. th contenteditable=true editable wording on top of td horizontal flip (double click) and/or vertical flop (right click) editable lower part) with those characters aligned to the bottom

… in our changed “third draft” Cartoon creation and email sharing capable PHP web application you can also try below.


Previous relevant Python Cowsay API Primer Tutorial is shown below.

Python Cowsay API Primer Tutorial

Python Cowsay API Primer Tutorial

We discovered an interesting Open Source Python API / Command-line tool called cowsay which we installed up at our AlmaLinux web server via …


pip install cowsay

… with an integration purpose in mind, so thanks. Before many readers’ time indeed, but some may remember those cute banner printouts that told you who owned the next printout on a spooling “crude graphics” printout in the late 70’s … well cowsay encapsulates those heady days (and who can forget punch cards)?! Before integration, though, we want to test it via a new PHP supervisor on exec method Linux command line interfacings to cowsay.

So we started, with this “first draft” getting places and then this “second draft” with a little more sophistication to leave the day with this interfacer

If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.

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

Python Cowsay API Cartoon Tutorial

Python Cowsay API Cartoon Tutorial

Python Cowsay API Cartoon Tutorial

We’ve long been interested in online web application ideas that end up with a half decent cartoon the user can create, and share, themselves. “Half decent” becomes “fully decent” with a user who has a great imagination. And so, onto yesterday’s Python Cowsay API Primer Tutorial‘s start with interfacing to the great cowsay Python API / Command-line tool we access via the PHP exec method conduit to our AlmaLinux Apache/PHP/MySql Linux web server, today we’ve extended that …

  • “proof of concept” thinking … onto …
  • cartoon creation “smarts” … starting with (also egged on here by mobile platform problems with monospaced fonts, it seems like)
  • allowing a tabular display of our cowsay components … into …
  • table cells horizontally aligned (and so, less vulnerable to monospacing inaccuracies) … also allowing …
  • within any table cell there is a topmost th table cell wording part above a cowsay character td cell lower part …
  • “half decent” looking via static CSS
    <?php echo ”

    <style>
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    tr { vertical-align: top; }
    td { vertical-align: top; }
    th { vertical-align: top; }

    * { font-family:'Courier New',Courier,monospace; }
    .img-hor { // thanks to https://stackoverflow.com/questions/32875695/flip-mirror-an-image-horizontally-vertically-with-css
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: 'FlipH';
    }
    .img-ver { // thanks to https://stackoverflow.com/questions/32875695/flip-mirror-an-image-horizontally-vertically-with-css
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: FlipV;
    -ms-filter: 'FlipV';
    }

    .glow {
    -webkit-animation: glow 1s linear infinite alternate;
    -moz-animation: glow 1s linear infinite alternate;
    animation: glow 1s linear infinite alternate;
    }

    /* Thanks to https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_glowing_text */

    @-webkit-keyframes glow {
    from {
    box-shadow: 0 0 3px #fff, 0 0 5px #fff, 0 0 37px #e60073, 0 0 9px #e60073, 0 0 11px #e60073, 0 0 13px #e60073, 0 0 15px #e60073;
    }

    to {
    box-shadow: 0 0 24px #fff, 0 0 6px #ff4da6, 0 0 8px #ff4da6, 0 0 10px #ff4da6, 0 0 12px #ff4da6, 0 0 14px #ff4da6, 0 0 16px #ff4da6;
    }
    }

    th[id$='0'] {
    background: rgba(224,240,240,0.6); //#e0f0f0;
    }

    th[id$='1'] {
    background: rgba(225,241,241,0.6); //#e1f1f1;
    }

    th[id$='2'] {
    background: rgba(226,242,242,0.6); //#e2f2f2;
    }

    th[id$='3'] {
    background: rgba(227,243,243,0.6); //#e3f3f3;
    }

    th[id$='4'] {
    background: rgba(228,244,244,0.6); //#e4f4f4;
    }

    th[id$='5'] {
    background: rgba(229,245,245,0.6); //#e5f5f5;
    }

    th[id$='6'] {
    background: rgba(230,246,246,0.6); //#e6f6f6;
    }

    th[id$='7'] {
    background: rgba(231,247,247,0.6); //#e7f7f7;
    }

    th[id$='8'] {
    background: rgba(232,248,248,0.6); //#e2f2f2;
    }

    th[id$='9'] {
    background: rgba(233,249,249,0.6); //#e9f9f9;
    }

    td[id$='0'] {
    background: rgba(240,240,240,0.3); //#f0f0f0;
    text-shadow:-1px 1px 1px #ff2d90;
    }

    td[id$='1'] {
    background: rgba(241,241,241,0.3); //#f1f1f1;
    text-shadow:-1px 1px 1px #ff2d91;
    float: bottom;
    }

    td[id$='2'] {
    background: rgba(242,242,242,0.3); //#f2f2f2;
    text-shadow:-1px 1px 1px #ff2d92;
    }

    td[id$='3'] {
    background: rgba(243,243,243,0.3); //#f3f3f3;
    text-shadow:-1px 1px 1px #ff2d93;
    }

    td[id$='4'] {
    background: rgba(244,244,244,0.3); //#f4f4f4;
    text-shadow:-1px 1px 1px #ff2d94;
    }

    td[id$='5'] {
    background: rgba(245,245,245,0.3); //#f5f5f5;
    text-shadow:-1px 1px 1px #ff2d95;
    }

    td[id$='6'] {
    background: rgba(246,246,246,0.3); //#f6f6f6;
    text-shadow:-1px 1px 1px #ff2d96;
    }

    td[id$='7'] {
    background: rgba(247,247,247,0.3); //#f7f7f7;
    text-shadow:-1px 1px 1px #ff2d97;
    }

    td[id$='8'] {
    background: rgba(248,248,248,0.3); //#f8f8f8;
    text-shadow:-1px 1px 1px #ff2d98;
    }

    td[id$='9'] {
    background: rgba(249,249,249,0.3); //#f9f9f9;
    text-shadow:-1px 1px 1px #ff2d99;
    }

    table tbody tr:first-child {
    background: transparent; //#f6f6e6;
    }
    </style>

    “; ?>
    … and then …
  • whenever new cell content happens padding-top adding CSS Javascript DOM nuanced display logic via …
    <?php echo ”

    function paddingtopit() {
    var maxtwo=0, thistwo=0;
    var thhs=[], tdhs=[], it=0;
    var thdids=[];
    //trthtd1
    //trtdtd1
    var tds=document.getElementsByTagName('td');
    for (it=0; it<tds.length; it++) {
    if (('' + tds[it].id).indexOf('trtdtd') != -1) {
    if (('' + tds[it].style.paddingTop).replace(/^null/g,'').replace(/^undefined/g,'').trim() != '') {
    tds[it].style.paddingTop='0px';
    }
    }
    }
    for (it=0; it<tds.length; it++) {
    if (('' + tds[it].id).indexOf('trtdtd') != -1) {
    tdhs.push(eval('' + tds[it].getBoundingClientRect().height));
    thdids.push('' + tds[it].id);
    }
    }
    var ths=document.getElementsByTagName('th');
    for (it=0; it<ths.length; it++) {
    if (('' + ths[it].id).indexOf('trthtd') != -1) {
    thhs.push(eval('' + ths[it].getBoundingClientRect().height));
    thistwo=eval(thhs[it] + tdhs[it]);
    if (thistwo > maxtwo) { maxtwo=thistwo; }
    }
    }
    for (it=0; it<tdhs.length; it++) {
    thistwo=eval(thhs[it] + tdhs[it]);
    if (thistwo < maxtwo) {
    document.getElementById(thdids[it]).style.paddingTop='' + eval(maxtwo - thistwo) + 'px';
    }
    }
    }

    “; ?>
    … so that …
  • cartoons present with “speech bubble” wording aligned to the top in our “cells” (ie. th contenteditable=true editable wording on top of td horizontal flip (double click) and/or vertical flop (right click) editable lower part) with those characters aligned to the bottom

… in our changed “third draft” Cartoon creation and email sharing capable PHP web application you can also try below.


Previous relevant Python Cowsay API Primer Tutorial is shown below.

Python Cowsay API Primer Tutorial

Python Cowsay API Primer Tutorial

We discovered an interesting Open Source Python API / Command-line tool called cowsay which we installed up at our AlmaLinux web server via …


pip install cowsay

… with an integration purpose in mind, so thanks. Before many readers’ time indeed, but some may remember those cute banner printouts that told you who owned the next printout on a spooling “crude graphics” printout in the late 70’s … well cowsay encapsulates those heady days (and who can forget punch cards)?! Before integration, though, we want to test it via a new PHP supervisor on exec method Linux command line interfacings to cowsay.

So we started, with this “first draft” getting places and then this “second draft” with a little more sophistication to leave the day with this interfacer

If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.

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

Python Cowsay API Primer Tutorial

Python Cowsay API Primer Tutorial

Python Cowsay API Primer Tutorial

We discovered an interesting Open Source Python API / Command-line tool called cowsay which we installed up at our AlmaLinux web server via …


pip install cowsay

… with an integration purpose in mind, so thanks. Before many readers’ time indeed, but some may remember those cute banner printouts that told you who owned the next printout on a spooling “crude graphics” printout in the late 70’s … well cowsay encapsulates those heady days (and who can forget punch cards)?! Before integration, though, we want to test it via a new PHP supervisor on exec method Linux command line interfacings to cowsay.

So we started, with this “first draft” getting places and then this “second draft” with a little more sophistication to leave the day with this interfacer

If this was interesting you may be interested in this too.

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