Walking Trip …

Posted on by
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

Textarea Onpaste With Room to Move Tutorial

Posted on by
Textarea Onpaste With Room to Move Tutorial

Textarea Onpaste With Room to Move Tutorial

Up to now, referencing the useful onpaste event (think the end bit to copy and paste intervening) regarding user media data defining around here with our web applications, as with the recent Shower Song Form Double Takes Tutorial …

we had been expecting a lot of the user’s imagination, to think that they could paste something potentially huge, into a small onscreen area

… and with our thinking, perhaps, sure, this “ngaaa, ha ha” programmatical thinking can “fit more into the webpage” beside other more conventional user data conduits on the screen, but can feel a bit too surprising for some users, at the same time.

Today, though, with our new project, it’s, at the crux of it, just …


one single textarea element conduit taking up most of the screen

… and so …

  • has oodles of room for the user
  • can explain modus operandi better to the user
  • so far, though regular readers may be worried, that’s it … just enter URL or data URI into the textarea and tab out

… are the simple steps to then have the user data represented to them in a form of “overlay” on top of the “background transparent” textarea element acting as their “interpreter”, if you will.

So feel free to try the first draft textarea_onpaste.html Textarea Onpaste web application in new tab or below …

Previous relevant Shower Song Form Double Takes Tutorial is shown below.

Shower Song Form Double Takes Tutorial

Shower Song Form Double Takes Tutorial

Our little “Soup Kitchens” aside yesterday caused us to remember a truism (if ever there was one) …

Don’t “throw out there” questions you don’t know the answer to.

Now, before anybody complains about sentences ending in prepositions, let me explain that the “Soup Kitchens” idea was like a “Stop Press” and we hadn’t tested it … sorrrryyyyyy!

It brought more scrutiny to that whole HTML form part of our project. It’s logic moderately “leaked like a sieve” … speaking oxymoronically, that is.

We hadn’t factored in …

  • allowing YouTube search textbox entries without commas but valid
  • double takes populating the form (ie. do a bit with one method, and then have another go populating a bit more)
  • asking of 11 character entries whether our (albeit not entirely “watertight”) checks confirm that the 11 character word is meant to really represent a YouTube video code or some YouTube search related word

Anyway?!

Improving on yesterday’s Shower Song Sharing Tutorial efforts one Javascript function got a bit of a makeover …


function radioplay(oiis) {
var joff=0, iii=0, jji=0, isvalid=true, justyt=false, fnd=false;
shuffle=[];
for (iii=1; iii<=7; iii++) {
if (document.getElementById('inp00' + iii).value.trim() != '') { if (!fnd) { shuffle.push(document.getElementById('inp00' + iii).value); document.getElementById('inp00' + iii).value=''; joff++; } else { fnd=true; } }
}
joff=0;
var oklast=['A','E','I','M','Q','U','Y','c','g','k','o','s','w','0','4','8'];
if (oiis.value.trim() != '') {
if (oiis.value.indexOf(',') == -1 && oiis.value.indexOf(' ') == -1 && eval('' + oiis.value.length) == 11) {
if (oklast.indexOf(oiis.value.slice(-1)) == -1 || encodeURIComponent(oiis.value) != oiis.value) { oiis.value+=' '; isvalid=false; } else { justyt=true; }
}
var csvl=oiis.value.split(',');
for (iii=0; iii<Math.min(7,eval('' + oiis.value.split(',').length)); iii++) {
if (oiis.value.split(',')[iii].indexOf('*') > 0) {
for (jji=1; jji<=eval('' + oiis.value.split(',')[iii].split('*')[1]); jji++) {
if (jji > 1) { if (eval('' + shuffle.length) == 0) { joff++; } }
if (eval(1 + iii + joff) <= 7 && document.getElementById('inp00' + eval(1 + iii + joff)).value.trim() == '') {
document.getElementById('inp00' + eval(1 + iii + joff)).value=oiis.value.split(',')[iii].split('*')[0];
}
}
} else {
if (eval(1 + iii + joff) <= 7 && document.getElementById('inp00' + eval(1 + iii + joff)).value.trim() == '') {
document.getElementById('inp00' + eval(1 + iii + joff)).value=oiis.value.split(',')[iii].split('*')[0];
}
}
}
dci=-1;
rci=-1;
if (eval('' + shuffle.length) > 0) {
var ish=0;
for (iii=1; iii<=7; iii++) {
if (document.getElementById('inp00' + iii).value.trim() == '') { if (ish < eval('' + shuffle.length)) { document.getElementById('inp00' + iii).value=shuffle[ish]; ish++; } }
}
}
document.body.style.cursor='progress';
//if (oiis.value.indexOf(',') == -1 && oiis.value.indexOf(' ') == -1 && eval('' + oiis.value.length) == 11) {
// if (oklast.indexOf(oiis.value.slice(-1)) == -1) { isvalid=false; } else { oiis.value=''; document.body.style.cursor='pointer'; return ''; }
//}
if (eval('' + shuffle.length) > 0 || (oiis.value.indexOf(',') == -1 && !isvalid && (oiis.value.indexOf(' ') != -1 || eval('' + oiis.value.length) != 11))) {
setTimeout(fixvianothing, 25000);
}
if (!justyt) {
woo=window.open('/HTMLCSS/swipe_media.html?andgo=y&thelist=' + encodeURIComponent((oiis.value.indexOf(',') == -1 && (oiis.value.indexOf(' ') != -1 || eval('' + oiis.value.length) != 11) ? (oiis.value + ',youllneverfindthis') : oiis.value)), '_blank', 'top=' + eval(-800 + screen.height) + ',left=' + eval(-800 + screen.width) + ',height=800,width=800');
}
oiis.value='';
}
}

… as a result.

So feel free to (re-)try the changed ninth draft Shower Songs below.

Previous relevant Shower Song Sharing Tutorial is shown below.

Shower Song Sharing Tutorial

Shower Song Sharing Tutorial

Though we like programming in (serverside) PHP we’d prefer to leave it to (clientside) HTML and Javascript and CSS to contain solutions to web application challenges, as much as anything because PHP relies on an arrangement such as the great MAMP, as a local Apache web server environment, to test your PHP.

With the Shower Songs project up until yesterday’s Shower Song Media Insertions Tutorial …

  • clientside only worked … but …
  • introducing sharing functionality along with the potential sharing of local media files needs serverside (ie. in our case, PHP)

… and we decided that “PHP is it” both as the …

  • software .. and the data …
  • storage

Huh?! Yes, PHP can do it all! But we are not saying this idea is for everyone.

The reason we plumped for it, is the simple nature to the requirement we are after (when it boils down to it) that being …

  1. a three argument Ajax (clientside) …

    var dcombos=['data','datA','daTa','daTA','dAta','dAtA','dATa','dATA','Data','DatA','DaTa','DaTA','DAta','DAtA','DATa','DATA'];
    var zhr=null, zform=null, itrs=[], ibetter=-1, iind=0;

    function stateChanged() {
    if (zhr.readyState == 4) {
    if (zhr.status == 200) {
    if (iind < eval(-1 + eval('' + itrs.length))) { ajaxit(); } else { iind=0; itrs=[]; ibetter=-1; } } } }
    function ajaxit() { // Ajax POST dataform onetoseven durl
    if (ibetter >= 1 && eval('' + itrs.length) > 0) {
    zhr = new XMLHttpRequest();
    zform = new FormData();
    zform.append('dataform', '' + dcombos[ibetter]);
    zform.append('onetoseven', '' + itrs[iind]);
    if (document.getElementById('inp00' + itrs[iind]).value.indexOf('data:') == 0) {
    zform.append('durl', '' + document.getElementById('inp00' + itrs[iind]).value);
    } else if (document.getElementById('inp00' + itrs[iind]).placeholder.indexOf('data:') == 0) {
    zform.append('durl', '' + document.getElementById('inp00' + itrs[iind]).placeholder);
    }
    zhr.onreadystatechange=stateChanged;
    zhr.open('post', './shower_songs.php', true);
    zhr.send(zform);
    iind++;
    }
    }

    function doemail() {
    var azx = document.createElement("a");
    var onoff=[];
    ibetter=-1;
    itrs=[];
    document.body.appendChild(azx);
    azx.style = "display: none"; // %3B%7Cdata%3A%7C%7C%7C%7C%7C 1 and 2 %3Bdata%3A%7Cdata%3A%7C%7C%7C%7C%7C
    var durl=documentURL;
    var newdurl='';
    if (durl.indexOf('data%3A%') != -1) {
    if (durl.indexOf('%3Bdata%3A%') != -1) { // 1
    durl=durl.replace('%3Bdata%3A%7C', '%3B%7C');
    itrs.push(1);
    while (ibetter < 1) {
    ibetter=Math.floor(Math.random() * eval('' + dcombos.length));
    }
    onoff.push(true);
    } else {
    onoff.push(false);
    durl=durl.replace('%3B%7C','%3B');
    }
    if (durl.indexOf('%3Bdata%3A%') != -1) { // 2
    durl=durl.replace('%3Bdata%3A%7C', '%3B%7C');
    itrs.push(2);
    while (ibetter < 1) {
    ibetter=Math.floor(Math.random() * eval('' + dcombos.length));
    }
    onoff.push(true);
    } else {
    durl=durl.replace('%3B%7C','%3B');
    onoff.push(false);
    }
    if (durl.indexOf('%3Bdata%3A%') != -1) { // 3
    durl=durl.replace('%3Bdata%3A%7C', '%3B%7C');
    itrs.push(3);
    while (ibetter < 1) {
    ibetter=Math.floor(Math.random() * eval('' + dcombos.length));
    }
    onoff.push(true);
    } else {
    durl=durl.replace('%3B%7C','%3B');
    onoff.push(false);
    }
    if (durl.indexOf('%3Bdata%3A%') != -1) { // 4
    durl=durl.replace('%3Bdata%3A%7C', '%3B%7C');
    itrs.push(4);
    while (ibetter < 1) {
    ibetter=Math.floor(Math.random() * eval('' + dcombos.length));
    }
    onoff.push(true);
    } else {
    durl=durl.replace('%3B%7C','%3B');
    onoff.push(false);
    }
    if (durl.indexOf('%3Bdata%3A%') != -1) { // 5
    durl=durl.replace('%3Bdata%3A%7C', '%3B%7C');
    itrs.push(5);
    while (ibetter < 1) {
    ibetter=Math.floor(Math.random() * eval('' + dcombos.length));
    }
    onoff.push(true);
    } else {
    durl=durl.replace('%3B%7C','%3B');
    onoff.push(false);
    }
    if (durl.indexOf('%3Bdata%3A%') != -1) { // 6
    durl=durl.replace('%3Bdata%3A%7C', '%3B%7C');
    itrs.push(6);
    while (ibetter < 1) {
    ibetter=Math.floor(Math.random() * eval('' + dcombos.length));
    }
    onoff.push(true);
    } else {
    durl=durl.replace('%3B%7C','%3B');
    onoff.push(false);
    }
    if (durl.indexOf('%3Bdata%3A%') != -1) { // 7
    durl=durl.replace('%3Bdata%3A%7C', '%3B%7C');
    itrs.push(7);
    while (ibetter < 1) {
    ibetter=Math.floor(Math.random() * eval('' + dcombos.length));
    }
    onoff.push(true);
    } else {
    durl=durl.replace('%3B%7C','%3B');
    onoff.push(false);
    }
    console.warn(onoff); // Ajax POST dataform onetoseven durl
    if (ibetter >= 1) {
    if (documentURL.indexOf('?') != -1) {
    newdurl=documentURL.replace(/data\%/g, dcombos[ibetter] + '%').replace('.html','.php').replace('.htm','.php').replace('#','&dataform=' + dcombos[ibetter] + '&');
    } else {
    newdurl=documentURL.replace(/data\%/g, dcombos[ibetter] + '%').replace('.html','.php').replace('.htm','.php').replace('#','?dataform=' + dcombos[ibetter] + '&');
    }
    setTimeout(ajaxit, 500);
    }
    azx.href = 'mailto:?subject=' + encodeURIComponent( (document.getElementById('subject').value.trim() != '' ? document.getElementById('subject').value : (document.getElementById('subject').placeholder.trim() != '' ? document.getElementById('subject').placeholder : 'Shower Songs')) ) + '&body=' + encodeURIComponent((newdurl != '' ? newdurl : documentURL));
    } else {
    azx.href = 'mailto:?subject=' + encodeURIComponent( (document.getElementById('subject').value.trim() != '' ? document.getElementById('subject').value : (document.getElementById('subject').placeholder.trim() != '' ? document.getElementById('subject').placeholder : 'Shower Songs')) ) + '&body=' + encodeURIComponent((newdurl != '' ? newdurl : documentURL));
    }
    azx.click();
    }

    function dosms() {
    var onoff=[];
    ibetter=-1;
    itrs=[];
    var azx = document.createElement("a");
    document.body.appendChild(azx);
    azx.style = "display: none";
    var durl=documentURL;
    var newdurl='';
    if (durl.indexOf('data%3A%') != -1) {
    if (durl.indexOf('%3Bdata%3A%') != -1) { // 1
    durl=durl.replace('%3Bdata%3A%7C', '%3B%7C');
    itrs.push(1);
    while (ibetter < 1) {
    ibetter=Math.floor(Math.random() * eval('' + dcombos.length));
    }
    onoff.push(true);
    } else {
    onoff.push(false);
    durl=durl.replace('%3B%7C','%3B');
    }
    if (durl.indexOf('%3Bdata%3A%') != -1) { // 2
    durl=durl.replace('%3Bdata%3A%7C', '%3B%7C');
    itrs.push(2);
    while (ibetter < 1) {
    ibetter=Math.floor(Math.random() * eval('' + dcombos.length));
    }
    onoff.push(true);
    } else {
    durl=durl.replace('%3B%7C','%3B');
    onoff.push(false);
    }
    if (durl.indexOf('%3Bdata%3A%') != -1) { // 3
    durl=durl.replace('%3Bdata%3A%7C', '%3B%7C');
    itrs.push(3);
    while (ibetter < 1) {
    ibetter=Math.floor(Math.random() * eval('' + dcombos.length));
    }
    onoff.push(true);
    } else {
    durl=durl.replace('%3B%7C','%3B');
    onoff.push(false);
    }
    if (durl.indexOf('%3Bdata%3A%') != -1) { // 4
    durl=durl.replace('%3Bdata%3A%7C', '%3B%7C');
    itrs.push(4);
    while (ibetter < 1) {
    ibetter=Math.floor(Math.random() * eval('' + dcombos.length));
    }
    onoff.push(true);
    } else {
    durl=durl.replace('%3B%7C','%3B');
    onoff.push(false);
    }
    if (durl.indexOf('%3Bdata%3A%') != -1) { // 5
    durl=durl.replace('%3Bdata%3A%7C', '%3B%7C');
    itrs.push(5);
    while (ibetter < 1) {
    ibetter=Math.floor(Math.random() * eval('' + dcombos.length));
    }
    onoff.push(true);
    } else {
    durl=durl.replace('%3B%7C','%3B');
    onoff.push(false);
    }
    if (durl.indexOf('%3Bdata%3A%') != -1) { // 6
    durl=durl.replace('%3Bdata%3A%7C', '%3B%7C');
    itrs.push(6);
    while (ibetter < 1) {
    ibetter=Math.floor(Math.random() * eval('' + dcombos.length));
    }
    onoff.push(true);
    } else {
    durl=durl.replace('%3B%7C','%3B');
    onoff.push(false);
    }
    if (durl.indexOf('%3Bdata%3A%') != -1) { // 7
    durl=durl.replace('%3Bdata%3A%7C', '%3B%7C');
    itrs.push(7);
    while (ibetter < 1) {
    ibetter=Math.floor(Math.random() * eval('' + dcombos.length));
    }
    onoff.push(true);
    } else {
    durl=durl.replace('%3B%7C','%3B');
    onoff.push(false);
    }
    console.warn(onoff); // Ajax POST dataform onetoseven durl
    if (ibetter >= 1) {
    if (documentURL.indexOf('?') != -1) {
    newdurl=documentURL.replace(/data\%/g, dcombos[ibetter] + '%').replace('.html','.php').replace('.htm','.php').replace('#','&dataform=' + dcombos[ibetter] + '&');
    } else {
    newdurl=documentURL.replace(/data\%/g, dcombos[ibetter] + '%').replace('.html','.php').replace('.htm','.php').replace('#','?dataform=' + dcombos[ibetter] + '&');
    }
    setTimeout(ajaxit, 500);
    }
    azx.href = 'sms:&body=' + encodeURIComponent((newdurl != '' ? newdurl : documentURL));
    } else {
    azx.href = 'sms:body=' + encodeURIComponent((newdurl != '' ? newdurl : documentURL));
    }
    azx.click();
    }

    … writing, into the PHP itself … as comments from clientside to serverside method=POST scenario …
  2. a one argument reading back serverside PHP shower_songs.php …

    <?php
    // shower_songs.php
    // April, 2026
    // RJM Programming
    // Help out shower_songs.html regarding local media files accessed via email or SMS

    $dst=str_replace('~','',str_replace('3~','2',(substr(date("Ymd"),0,7) . '~'))) . '0';
    $phpis=file_get_contents(dirname(__FILE__) . DIRECTORY_SEPARATOR . 'shower_songs.php');
    $newphpis='';

    if (strpos($phpis, ' of ' . $dst . ' goes ') !== false) {
    $dst=$dst;
    } else if (strpos($phpis, 'Dat' . 'a of ') !== false) {
    $olddst=explode(' ',explode('Dat' . 'a of ', $phpis)[1])[0];
    $allrecs=explode('/' . '/' . '/' . '/', $phpis);
    $newphpis=$phpis;
    for ($ij=1; $ij<sizeof($allrecs); $ij++) {
    if (substr(substr($allrecs[$ij],4,7)) == substr($olddst,0,7)) {
    $newphpis=str_replace('/' . '/' . '/' . '/' . explode('/' . '/' . '/' . '/',explode("\n",$allrecs[$ij])[0])[0], "", str_replace('/' . '/' . '/' . '/' . explode('/' . '/' . '/' . '/',explode("\n",$allrecs[$ij])[0])[0] . "\n", "", $newphpis));
    }
    }
    $newphpis=str_replace('Dat' . 'a of ' . $olddst . ' ', 'Dat' . 'a of ' . $dst . ' ', $newphpis);
    }

    if (isset($_POST['dataform'])) {

    if (isset($_POST['onetoseven']) && isset($_POST['durl'])) {
    if ($newphpis == '') {
    $newphpis=$phpis;
    }
    $newphpis.="\n/" . "/" . "/" . "/" . $_POST['dataform'] . substr($dst,0,7) . $_POST['onetoseven'] . str_replace(' ','+',urldecode($_POST['durl'])) . "\n";
    }

    if ($newphpis != '' && $newphpis != $phpis) {
    file_put_contents(dirname(__FILE__) . DIRECTORY_SEPARATOR . 'shower_songs.php', $newphpis);
    }

    exit;
    } else if (isset($_GET['dataform'])) {
    $htmlis=file_get_contents(dirname(__FILE__) . DIRECTORY_SEPARATOR . 'shower_songs.html');
    $relrecs=explode('/' . '/' . '/' . '/' . $_GET['dataform'] . substr($dst,0,7), $phpis);
    for ($ij=1; $ij<sizeof($relrecs); $ij++) {
    if (substr($relrecs[$ij],0,1) >= '1' && substr($relrecs[$ij],0,1) <= '7') {
    //file_put_contents('xz.xz', '' . substr($relrecs[$ij],0,1));
    $relplaces=explode(substr($relrecs[$ij],0,1) . '" value="', $htmlis);
    //file_put_contents('xz2.xz2', '' . sizeof($relplaces) . ' ' . sizeof(explode('1" value="',$htmlis)));
    if (sizeof($relplaces) > 1) {
    $htmlis=str_replace(substr($relrecs[$ij],0,1) . '" value="' . explode('"',$relplaces[1])[0] . '"', substr($relrecs[$ij],0,1) . '" value="' . explode('/' . '/' . '/' . '/',explode("\n",substr($relrecs[$ij],1))[0])[0] . '"', $htmlis);
    }
    }
    }
    file_put_contents(dirname(__FILE__) . DIRECTORY_SEPARATOR . 'shower_songs.htm', $htmlis);

    if ($newphpis != '' && $newphpis != $phpis) {
    file_put_contents(dirname(__FILE__) . DIRECTORY_SEPARATOR . 'shower_songs.php', $newphpis);
    }

    header('Location: ./shower_songs.htm' . str_replace('&#order=','#order=',str_replace('order=','#order=',str_replace('??','?',('?' . $_SERVER['QUERY_STRING'])))));

    exit;
    }

    if (str_replace('?','',$_SERVER['QUERY_STRING']) == '') {
    header('Location: ./shower_songs.html');
    } else {
    header('Location: ./shower_songs.html' . str_replace('&#order=','#order=',str_replace('order=','#order=',str_replace('??','?',('?' . $_SERVER['QUERY_STRING'])))));
    }

    ?>
    // Data of 20260420 goes below ...

    … populating clientside HTML form scenario

So feel free to try the changed eighth draft that, now, also allows the “Shower Songs” title be contenteditable to, say, “Soup Kitchens” (whereby the button becomes “Kitchens” (and you start using those YouTube searches to create your own meaningful up to 7 long playlist)) for Shower Songs below and helped out a lot via that changed swipe_media.html Radio Play project web application and today’s changed client_browsing.htm client side local file browsing HTML and Javascript inhouse helper.

Previous relevant Shower Song Media Insertions Tutorial is shown below.

Shower Song Media Insertions Tutorial

Shower Song Media Insertions Tutorial

The recent Shower Song Radio Play Better Integration Tutorial may represent …


... a Shower Song project "by name" ...

… but recent work and what we have here today, can potentially allow this project’s scope to be a lot more ambitious than that.

So what is today’s work? Well, up until today …

  • data has been YouTube video related data exclusively … but as of today …
  • we integrate our inhouse Client Browsing and Pasting and File Dropping Tutorial‘s web application now capable of …
    • type it in …
    • browse it in …
    • paste it in as text (at an animated GIF slide textbox) … or, as of today …
    • paste it in as graphical content via the inhouse Client Browsing (and now “Pasting”) web application’s iframe element hosted span contenteditable=true onpaste and onblur event savvy new inclusion into the mix
    • drop it in …

    … means to other local media file data conduits …

… and so, on offer to Shower Songs users of the form off the “Songs” button, to add any non-YouTube local media source file data of interest, into the “presentation mix”, via …

HTML

<div id=divcbi style=visibility:hidden;>
<iframe onload="checkit(this);" scrolling=no frameborder=0 id=cbi data-accept="image/*"
style="width:163px; height:228px; margin-top:-204px; display:inline-block; background-color:transparent;"
src="/HTMLCSS/client_browsing.htm?d=31226&wording=Allimages%20images%2E%20">
</iframe>
</div>
Javascript

var twaconto=null, twacontoiurl=null, twacontojurl=null;
var imgo=null;
var imagedurl='', reldone=false;
var bigdu='', lastname='', dcbi='';
var initval='<textarea style=width:98%;height:560px;background-color:#f9f9f9; onblur="popshow(this.value);" id=mysubrip></textarea>', contis='', woo=null;
var curtaidis='', curavid='', curpos=0, curdelta=0, somethingplaying=false, cmds=[], sofara='', gtaidis='', lastgreen=null;
var wastab='', todo='', aone='1', tacstarted=false, onep='p', gdurlf=false, bonep='p', thattaid='', ithattaid=-1, jgoing=false;

function butnotavmediawis(inid) { // to pause
bonep='p';
var xsuff='';
try {
xsuff=inid.split('_')[0].slice(-3)
} catch(yfj) { xsuff=''; }
if ((xsuff + 'x').substring(0,1) == '0') {
if (document.getElementById(inid)) {
if (document.getElementById(inid).placeholder.indexOf('P=play/') != -1 && gdurlf) {
bonep='';
return 'spareu';
}
}
}
if (!document.getElementById(inid)) {
var tasare=document.getElementsByTagName('textarea');
for (var ibn=0; ibn<tasare.length; ibn++) {
if (tasare[ibn].outerHTML.indexOf('2px dotted ') != -1) { return '' + tasare[ibn].id; }
}
}
return inid;
}

function dotodo() {
if (todo != '') {
if (document.getElementById(todo).placeholder.indexOf('P=play/') != -1) {
document.getElementById(todo).value='P';
}
}
todo='';
}

function tanearest(avoid) {
var myt=document.getElementById('mytable').innerHTML;
if (lastgreen) {
lastgreen.style.border='1px solid black';
}
lastgreen=document.getElementById(myt.split(avoid)[1].split(' id="')[1].split('"')[0])
return lastgreen;
}

function butnotavmediap() {
var inid=gtaidis;
if (gdurlf && document.getElementById('avmedia' + inid.split('_')[0].slice(-3))) {
document.getElementById(inid).placeholder=document.getElementById(inid).placeholder.replace(document.getElementById(inid).placeholder.split('/')[0],'1');
document.getElementById('avmedia' + inid.split('_')[0].slice(-3)).currentTime=0;
gtaidis='';
return 'spareu';
}
if (!document.getElementById(inid)) {
var tasare=document.getElementsByTagName('textarea');
for (var ibn=0; ibn<tasare.length; ibn++) {
if (tasare[ibn].outerHTML.indexOf('2px dotted ') != -1) { return '' + tasare[ibn].id; }
}
}
return inid;
}

function justtheone() {
jgoing=true;
var iicnt=0, ibn=0, allv=true;
var tasare=document.getElementsByTagName('textarea');
for (ibn=eval(-1 + eval('' + tasare.length)); ibn>=0; ibn--) {
if (tasare[ibn].value != '') { allv=false; }
}
if (allv) {
if (!gdurlf) {
for (ibn=0; ibn<tasare.length; ibn++) {
if (tasare[ibn].placeholder.indexOf('P=pause/') != -1 && tasare[ibn].placeholder.indexOf('0/') != 0 && tasare[ibn].placeholder.indexOf('Audio ') != 0) {
iicnt++;
if (iicnt > 1) {
if (isplayingnum >= 0) {
if (tasare[ibn].id != taids[isplayingnum]) {
if (8 == 7) { tasare[ibn].value='p'; }
}
}
}
}
}
} else {
for (ibn=eval(-1 + eval('' + tasare.length)); ibn>=0; ibn--) {
if (tasare[ibn].placeholder.indexOf('P=pause/') != -1 && tasare[ibn].placeholder.indexOf('0/') != 0 && tasare[ibn].placeholder.indexOf('Audio ') != 0) {
iicnt++;
if (iicnt > 1) {
tasare[ibn].value='p';
}
}
}
}
}
}

function butnotavmediazero(inid) {
if (gdurlf && document.getElementById('avmedia' + inid.split('_')[0].slice(-3))) {
document.getElementById(inid).placeholder=document.getElementById(inid).placeholder.replace(document.getElementById(inid).placeholder.split('/')[0],'1');
document.getElementById('avmedia' + inid.split('_')[0].slice(-3)).currentTime=0;
return 'spareu';
}
if (!document.getElementById(inid)) {
var tasare=document.getElementsByTagName('textarea');
for (var ibn=0; ibn<tasare.length; ibn++) {
if (tasare[ibn].outerHTML.indexOf('2px dotted ') != -1) { return '' + tasare[ibn].id; }
}
}
return inid;
}

function butnotavmediaone(inid) {
aone='1';
if (gdurlf && document.getElementById('avmedia' + inid.split('_')[0].slice(-3))) {
document.getElementById(inid).placeholder=document.getElementById(inid).placeholder.replace(document.getElementById(inid).placeholder.split('/')[0],'1');
document.getElementById('avmedia' + inid.split('_')[0].slice(-3)).currentTime=0;
return 'spareu';
} else if (gdurlf && document.getElementById(inid).placeholder.indexOf('P=play/') != -1) {
if (5 == 5) {
thistaid='';
if (isplaying == '' && !tacstarted) { cball(true); if (!navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { isplayingnum=eval(-1 + eval('' + inid.split('_')[0].slice(-1))); } setInterval(tacontrol, 2000); }
isplayingnum=eval(-1 + eval('' + inid.split('_')[0].slice(-1)));
isplaying=document.getElementById(inid).placeholder;
//alert(onep);
aone=onep; // 'p';
onep='1';
//thistaid=inid;
//lastgreen=document.getElementById(inid);
//document.getElementById(inid).style.border='2px dotted green';
} else {
todo=inid;
setTimeout(dotodo, 7000); //document.getElementById(inid).value='p'; //alert('huh ' + inid + ' ' + document.getElementById(inid).placeholder);
}
}
if (!document.getElementById(inid)) {
var tasare=document.getElementsByTagName('textarea');
for (var ibn=0; ibn<tasare.length; ibn++) {
if (tasare[ibn].outerHTML.indexOf('2px dotted ') != -1) { return '' + tasare[ibn].id; }
}
}
return inid;
}

function butnotavmedia(inid) {
var xsuff='';
try {
xsuff=inid.split('_')[0].slice(-3)
} catch(yfj) { xsuff=''; }
if ((xsuff + 'x').substring(0,1) == '0') {
if (gdurlf && document.getElementById('avmedia' + inid.split('_')[0].slice(-3))) {
return 'spareu';
}
}
if (!document.getElementById(inid)) {
var tasare=document.getElementsByTagName('textarea');
for (var ibn=0; ibn<tasare.length; ibn++) {
if (tasare[ibn].outerHTML.indexOf('2px dotted ') != -1) { return '' + tasare[ibn].id; }
}
}
return inid;
}


function cmdsanal() {
var thisthird='';
for (var ii=0; ii<cmds.length; ii++) {
thisthird=cmds[ii].split("','")[2].split("'")[0];
if (sofara.indexOf(',' + thisthird + ',') == -1) {
eval('' + cmds[ii]);
}
}
}


function tadur(thisdur, taidis, thisavoid) {
var thisavo=document.getElementById(thisavoid);
var wasta='' + taidis;
if (!document.getElementById(taidis) || ('' + document.getElementById(taidis)) == 'undefined' || ('' + document.getElementById(taidis)) == 'null') {
if (1 == 1) {
if (sofara.indexOf(',' + thisavoid + ',') == -1) {
if (cmds.indexOf("tadur('" + thisdur + "','undefined','" + thisavoid + "')") == -1) {
cmds.push("tadur('" + thisdur + "','undefined','" + thisavoid + "')");
}
setTimeout(cmdsanal, 800);
}
return '';
} else {
tasx=document.getElementsByTagName('textarea');
for (var ik=0; ik<tasx.length; ik++) {
if (eval(1 + ik) == eval('' + thisavo.id.replace('avmedia00',''))) {
taidis='' + tasx.id;
}
}
if (!document.getElementById(taidis) || ('' + document.getElementById(taidis)) == 'undefined' || ('' + document.getElementById(taidis)) == 'null') {
if (sofara.indexOf(',' + thisavoid + ',') == -1) {
if (cmds.indexOf("tadur('" + thisdur + "','undefined','" + thisavoid + "')") == -1) {
cmds.push("tadur('" + thisdur + "','undefined','" + thisavoid + "')");
}
setTimeout(cmdsanal, 800);
}
return '';
}
}
}
//alert(taidis + ' ' + wasta);
if (('' + document.getElementById(taidis).placeholder) == '1/1') {
//document.title='1:' + taidis + ' ' + thisdur;
sofara+=',' + thisavoid + ',';
curpos=0;
curtaidis=taidis;
curavid='' + thisavo.id;
document.getElementById(taidis).placeholder='1/' + Math.ceil(eval('' + thisdur));
//document.title='1:' + taidis + ' ' + thisdur + ' ' + document.getElementById(taidis).placeholder;
}
thisavo.currentTime=0;
thisavo.setAttribute('data-dur', '' + thisdur);
}


function onesecfn() {
curpos+=curdelta;
if (curdelta != 0 && curpos >= 1) {
document.getElementById(curavid).setAttribute('data-at', '' + eval('' + curpos));
document.getElementById(curtaidis).placeholder='' + curpos + '/' + Math.ceil(eval('' + document.getElementById(curavid).getAttribute('data-dur')));
}
}


function avcount(taidis,playvspause,thisavo) {
if (playvspause) {
curdelta=1;
curtaidis=taidis;
curavid='' + thisavo.id;
if (('' + document.getElementById(curavid).getAttribute('data-at') + '0').substring(0,1) == '0') {
curpos=0;
document.getElementById(taidis).placeholder='1/' + Math.ceil(eval('' + document.getElementById(curavid).getAttribute('data-dur')));
}
if (!somethingplaying) {
somethingplaying=true;
setInterval(onesecfn, 1000);
}
} else {
curdelta=0;
curtaidis=taidis;
curavid='' + thisavo.id;
}
}


function avend(taidis,playvspause,thisavo) {
curdelta=0;
curtaidis=taidis;
curavid='' + thisavo.id;
document.getElementById(taidis).placeholder='' + Math.ceil(eval('' + thisavo.getAttribute('data-dur'))) + '/' + Math.ceil(eval('' + thisavo.getAttribute('data-dur')));
document.getElementById(curavid).setAttribute('data-at', '00');
gtaidis=taidis;
setTimeout(butnotavmediap, 5000);
}

function puttwoto(indu) {
if (indu.indexOf('#') != -1) {
document.getElementById('audioname').value=indu.split('#')[1];
document.getElementById('result').innerHTML=indu.split('#')[0];
} else {
document.getElementById('result').innerHTML=indu; //alert(indu);
}
document.getElementById('divcbi').innerHTML=dcbi;
}

function yesthreethree(inv) {
bigdu=inv;
//alert('x;' + bigdu);
}


function yes_threethree(inv) {
bigdu=inv;
//alert(inv);
}

function yes_file_name(inv, invtwo) {
bigdu=encodeURIComponent(invtwo);
lastname=inv;
//alert('xzz;' + bigdu);
document.getElementById('txttxtout').value=inv;
if (document.getElementById('mydownloada')) {
document.getElementById('mydownloada').download='' + inv;
} else if (document.getElementById('divdownloada')) {
document.getElementById('divdownloada').style.display='inline-block';
document.getElementById('divdownloada').innerHTML='<a data-download="' + inv + '" id=mydownloada style=display:inline-block;><button style=background-color:yellow;>Download ...</button></a>';
document.getElementById('iftxt').src='#';
document.getElementById('iftxt').style.visibility='hidden';
}
}

function utf8ToBase64(str) { // thanks to https://www.google.com/search?q=btoa+InvalidCharacterError%3A+The+string+contains+invalid+characters.&rlz=1C5OZZY_en&oq=btoa+InvalidCharacterError%3A+The+string+contains+invalid+characters.&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIHCAEQIRiPAjIHCAIQIRiPAtIBCTQxODNqMGoxNagCCLACAfEFhcuQDq9PfBk&sourceid=chrome&ie=UTF-8
// Encode the Unicode string to a Uint8Array using UTF-8
const utf8Bytes = new TextEncoder().encode(str);

// Convert the Uint8Array to a binary string
const binaryString = String.fromCharCode.apply(null, utf8Bytes);

// Use btoa on the binary string
return btoa(binaryString);
}

function yes_three_three(inv) {
contis=inv;
if (contis.indexOf('<?php') != -1) {
contis=inv.replace(/<\?php/g,'').replace(/\?>/g,'');
} else if (contis.indexOf('<?') == 0) {
contis=inv.replace(/</g,'<').replace(/>/g,'>').replace(/\&\#/g,'&#');
}
var ourcontis=contis.replace(/<textarea/g,'<textarea').replace(/<\/textarea>/g,'</textarea>');
//alert(initval);
document.getElementById('overt').innerHTML=initval.replace('></textarea>', '>' + ourcontis + '</textarea>');
document.getElementById('divdownloada').innerHTML='<a download="' + lastname + '" id=mydownloada style=display:inline-block; href="data:x-application/text,' + escape(document.getElementById('mysubrip').value) + '"><button style=background-color:yellow;>Download ...</button></a>';
//alert(document.getElementById('divdownloada').innerHTML);
if (contis != '') {
document.getElementById('bdisplay').disabled=false; //setAttribute('disabled', false);
if (document.getElementById('mydownloada')) {
//alert(12);
document.getElementById('divdownloada').style.display='inline-block';
//alert(212);
document.getElementById('mydownloada').style.display='inline-block';
//alert(bigdu);
if (bigdu != '' && 1 == 7) {
document.getElementById('mydownloada').href='data:text/plain;base64,' + bigdu;
} else if (bigdu == '' || 7 == 7) {
try {
document.getElementById('mydownloada').href='data:x-application/text,' + escape(inv);
} catch(trr) {
document.getElementById('mydownloada').href='data:text/plain;base64,' + window.btoa(inv);
}
}
//alert(412);
if (document.getElementById('iftxt').src != '#') {
document.getElementById('iftxt').src='/file_open_picker.html?clicktext=yesazs' + Math.floor(Math.random() * 145675);
}
//} else {
// alert(564);
}
}
bigdu='';
}

function oncntapp(tval,newtb,tthis) {
var intb='';
if (('' + tval.length) == '11' || newtb.indexOf('data:') == 0) {
for (var ij=1; ij<=7; ij++) {
if (document.getElementById('inp00' + ij)) {
if (document.getElementById('inp00' + ij).value.trim() == '') {
if (newtb.indexOf('data:') == 0) {
document.getElementById('inp00' + ij).value=newtb;
if (document.getElementById('audioname').value != '') {
document.getElementById('inp00' + ij).title=document.getElementById('audioname').value;
document.getElementById('audioname').value='';
} else if (document.getElementById('thewords').value != '') {
document.getElementById('inp00' + ij).title=document.getElementById('thewords').value;
document.getElementById('thewords').value='';
}
} else {
while ((' ' + newtb).indexOf(" \\" + 'u') != -1) {
intb=newtb.split("\\" + 'u')[0] + "\\" + 'u' + (' ' + newtb).split(" \\" + 'u')[1].split(' ')[0];
newtb=newtb.replace(intb,newtb.split("\\" + 'u')[0] + eval('String.fromCodePoint(0x' + intb.substring(eval(2 + newtb.split("\\" + 'u')[0].length)).replace(/\\\\u/g,',0x') + ')'));
}
document.getElementById('inp00' + ij).value=tval + '#' + newtb;
}
return '';
}
}
}
}
}

function checkit(iois) {
twaconto = (iois.contentWindow || iois.contentDocument);
if (twaconto != null) {
if (twaconto.document) { twaconto = twaconto.document; }
if (twaconto.getElementById('divcopyspan')) {
twacontojurl=twaconto.getElementById('divcopyspan');
}
if (twacontoiurl || twacontojurl) { setInterval(lookfor, 3000); }
}
}

function resultlook() {
if (document.getElementById('result').innerHTML != '' || document.getElementById('resultpdfout').innerHTML != '') {
if (document.getElementById('result').innerHTML != '') {
imagedurl=document.getElementById('result').innerHTML;
} else {
imagedurl=document.getElementById('resultpdfout').innerHTML;
}
//alert(imagedurl);
document.getElementById('result').innerHTML='';
document.getElementById('resultpdfout').innerHTML='';
theimgurl=imagedurl;
theclass=theimgurl.slice(-96).replace(/\:/g,'!').replace(/\./g,'|');
if (document.getElementById('myimg')) {
document.getElementById('myimg').src=imagedurl;
imgo=document.getElementById('myimg');
document.getElementById('myimg').className=theclass;
document.getElementById('imgurl').placeholder=imagedurl;
document.getElementById('imgurl').title=imagedurl;
document.getElementById('imgurl').value='';
} else {
if (5 == 5) {
oncntapp('', imagedurl, null);
}
}
imagedurl='';
document.getElementById('divcbi').innerHTML=dcbi;
}
}

function lookfor() {
var uis=document.getElementById('cbi').src.replace('=','=' + Math.floor(Math.random() * 9));
if (twacontojurl) {
if ((twacontojurl.innerHTML + twacontojurl.title).indexOf('data:') == 0) {
twocontocont='data:' + (twacontojurl.innerHTML + twacontojurl.title).split('data:')[1];
// alert(twocontocont);
if (5 == 5) {
oncntapp('', twocontocont, null);
document.getElementById('divcbi').innerHTML=dcbi;
} else {
document.getElementById('imgurl').value=twocontocont;
}
twacontojurl.innerHTML='';
twacontojurl.title='';
document.getElementById('cbi').style.visibility='hidden';
document.getElementById('cbi').src=uis; //'/HTMLCSS/client_browsing.htm?d=' + Math.floor(Math.random() * 19897865) + '&wording=Allimages%20images%2E%20';
document.getElementById('cbi').style.visibility='visible';
}
}
}

setInterval(resultlook, 5000);

Feel free to try the changed seventh draft Shower Songs below and helped out a lot via that changed swipe_media.html Radio Play project web application and today’s changed client_browsing.htm client side local file browsing HTML and Javascript inhouse helper.

Previous relevant Shower Song Radio Play Better Integration Tutorial is shown below.

Shower Song Radio Play Better Integration Tutorial

Shower Song Radio Play Better Integration Tutorial

When you integrate, as with the day before yesterday’s Shower Song Radio Play Integration Tutorial, there’s the temptation to automate, but go too far.

We were reminded of this, testing a YouTube search string “Pina Colada Song” and the top pick giving us some travel video.

And so with this in mind, we wanted to nuance the integrations to add …

  • the whole Radio Play dropdown element is virtually cloned (with new option subelement onclick function) …

    function oncntapp(tval,newtb,tthis) {
    var intb='';
    if (('' + tval.length) == '11') {
    for (var ij=1; ij<=7; ij++) {
    if (document.getElementById('inp00' + ij)) {
    if (document.getElementById('inp00' + ij).value.trim() == '') {
    while ((' ' + newtb).indexOf(" \\" + 'u') != -1) {
    intb=newtb.split("\\" + 'u')[0] + "\\" + 'u' + (' ' + newtb).split(" \\" + 'u')[1].split(' ')[0];
    newtb=newtb.replace(intb,newtb.split("\\" + 'u')[0] + eval('String.fromCodePoint(0x' + intb.substring(eval(2 + newtb.split("\\" + 'u')[0].length)).replace(/\\\\u/g,',0x') + ')'));
    }
    document.getElementById('inp00' + ij).value=tval + '#' + newtb
    return '';
    }
    }
    }
    }
    }

    … over into the Shower Songs to allow for non “top picks” be easily selectable, perhaps substituting into blanked out poorer entries, in the Shower Songs x 7 textbox form … and …
  • the YouTube title now appears in that textbox value in the form …

    [YouTube-11-code]#[YouTube title] (via "[Search String Used]")

    … via …

    var shower_songs_tbos=[], divs=[];


    function titlesnnsstbo() {
    var rerun=false, wti='', newtb='', intb='';
    var lastrerun=rerun;
    if (eval('' + shower_songs_tbos.length) > 0) {
    for (var irt=0; irt<eval('' + shower_songs_tbos.length); irt++) {
    if (shower_songs_tbos[irt].value.indexOf(' (via "') == -1) {
    //rerun=lastrerun;
    if (top.window.opener) {
    //alert(1);
    if (top.window.opener.document.getElementById('ajaxs')) {
    //alert(8);
    if (top.window.opener.document.getElementById('ajaxs').innerHTML.indexOf(shower_songs_tbos[irt].value.split('#')[0]) != -1) {
    wti=(shower_songs_tbos[irt].value=shower_songs_tbos[irt].value + '#').split('#')[1];
    //alert(wti);
    newtb=top.window.opener.document.getElementById('ajaxs').innerHTML.split(shower_songs_tbos[irt].value.split('#')[0])[1].split('>')[1].split('<')[0].replace(/\'/g,'`').replace(/\"/g,'`').replace(/\#/g,' '); while ((' ' + newtb).indexOf(" \\" + 'u') != -1) { intb=newtb.split("\\" + 'u')[0] + "\\" + 'u' + (' ' + newtb).split(" \\" + 'u')[1].split(' ')[0]; newtb=newtb.replace(intb,newtb.split("\\" + 'u')[0] + eval('String.fromCodePoint(0x' + intb.substring(eval(2 + newtb.split("\\" + 'u')[0].length)).replace(/\\\\u/g,',0x') + ')')); } shower_songs_tbos[irt].value=(shower_songs_tbos[irt].value.replace('#' + wti,'#' + newtb + ' (via "' + wti + '")')).replace(/\#$/g,''); lastrerun=false; if (irt == 0) { setTimeout(function(){ if (top.window.opener.parent.window.opener.document.getElementById('dajaxs')) { if (top.window.opener.parent.window.opener.document.getElementById('dajaxs').innerHTML == '') { //alert(irt); top.window.opener.parent.window.opener.document.getElementById('dajaxs').innerHTML=top.window.opener.document.getElementById('ajaxs').outerHTML.replace(' style=',' data-style=').replace(' multiple',' multiple').replace(' onchange=',' data-onchange='); } } else if (top.window.opener.parent.window.opener.document.getElementById('myform')) { if (top.window.opener.parent.window.opener.document.getElementById('myform').title == '') { divs=top.window.opener.parent.window.opener.document.getElementsByTagName('div'); //alert('00' + divs.length); if (('' + divs.length) != '0') { divs[eval(-1 + divs.length)].style.display='inline-block'; divs[eval(-1 + divs.length)].innerHTML=top.window.opener.document.getElementById('ajaxs').outerHTML.replace(' style=',' data-style=').replace(' multiple',' multiple').replace(' onchange=',' data-onchange='); } else { top.window.opener.parent.window.opener.document.getElementById('myform').title=top.window.opener.document.getElementById('ajaxs').innerText; } } } else { divs=top.window.opener.parent.window.opener.document.getElementsByTagName('div'); //alert('000' + divs.length + ' ' + divs[eval(-1 + divs.length)].outerHTML); if (('' + divs.length) != '0') { divs[eval(-1 + divs.length)].style.display='inline-block'; divs[eval(-1 + divs.length)].innerHTML=top.window.opener.document.getElementById('ajaxs').outerHTML.replace(' style=',' data-style=').replace(' multiple',' multiple').replace(' onchange=',' data-onchange='); //alert('0000' + divs.length + ' ' + divs[eval(-1 + divs.length)].outerHTML); } else { top.window.opener.parent.window.opener.document.body.title=top.window.opener.document.getElementById('ajaxs').innerText; } } }, 5000); } } else { //alert(11); lastrerun=true; } } else { //alert(111); lastrerun=true; } } } else { //alert(1111); lastrerun=false; } } } rerun=lastrerun; if (rerun) { setTimeout(titlesnnsstbo, 2000); } }
    function ifnnsstbo(inwo) {
    if (!inwo) { return null; }
    shower_songs_tbos.push(inwo);
    return inwo;
    }

    function afternnsstbo(incv) {
    if (eval('' + shower_songs_tbos.length) > 0) {
    setTimeout(titlesnnsstbo, 2000);
    }
    return incv;
    }

    … being called into play via the streamlined (from yesterday) …

    // Talk to shower_songs.html
    if (top.document.URL.indexOf('regarding=') != -1 && top.document.URL.indexOf('isradio=') != -1 && top.document.URL.indexOf('youtube=') != -1) {
    if (top.window.opener) {
    var waszv='';
    for (var inm=0; inm<Math.min(7,eval('' + vidids.length)); inm++) {
    if (ifnnsstbo(top.window.opener.parent.window.opener.document.getElementById('inp00' + eval(1 + inm)))) {
    if (top.window.opener.parent.window.opener.document.getElementById('inp00' + eval(1 + inm)).value.indexOf('#') == -1) {
    waszv= top.window.opener.parent.window.opener.document.getElementById('inp00' + eval(1 + inm)).value;
    top.window.opener.parent.window.opener.document.getElementById('inp00' + eval(1 + inm)).value=vidids[inm] + '#' + waszv;
    }
    }
    }
    top.window.opener.parent.window.opener.document.body.style.cursor=afternnsstbo('pointer');
    }
    }

And so, yet again, try the changed sixth draft Shower Songs below and helped out a lot via the changed swipe_media.html Radio Play project web application.

Previous relevant Shower Song Radio Play Integration Tutorial is shown below.

Shower Song Radio Play Integration Tutorial

Shower Song Radio Play Integration Tutorial

If you’ll pardon the pun …

We’ve been like a “broken record” regarding that familiar theme of “Sequential Play of YouTube Music Videos” over a few years now

… and today we’re integrating the …

  • Radio Play project smarts of recent times … into no, not the shower, Luna! … but into …
  • Shower Songs

… yay!?! Because, let’s face it, not many of us walk around with 11 character YouTube video codes in our head and no, not there either, Luna!!

That Radio Play project integrated with the great YouTube’s search functionality, to be able to …

  • consider a search string (users can enter via a new textbox within that new form as per yesterday’s advances) … and …
  • return a related 11 character YouTube video code

… as the means by which the user contents parts of our Shower Songs project can be improved a lot, further to yesterday’s Shower Song Remember and Recall Tutorial! Luna?!

Yet again, try the changed fifth draft Shower Songs below and helped out a lot via the changed swipe_media.html Radio Play project web application, as per …


<script type=text/javascript>
var dwfrom='youllneverfindthis';
var dwto='youllneverfindthis';
if (document.URL.indexOf('isradio=') != -1) {
dwfrom=' style="min-width:';
dwto=' style="opacity:0.6;cursor:progress;border-left:8px dotted yellow;border-right:8px dotted yellow;min-width:';
}
var bigline="      <button id=bdisco onclick=\"dodisco('bdisco=radnoiswas&');\" style='background-color:yellow;'>" + dword + "<sup>A+V</sup> <span id=bdiscoavb title='Radio A+V ... double click for compilation' ondblclick=\"event.stopPropagation(); triplewhammy(this); \" onclick=\"event.stopPropagation(); setTimeout(function(){ dodisco('isradio=bdiscoavb&'); }, 2000);\" style='background-color:yellow;visibility:hidden;'>📻</span></button> <button id=bdiscoa onclick=\"dodisco('bdiscoa=radnoiswas&audio');\" style='background-color:yellow;'>" + dword + "<sub>A-V</sub> <span id=bdiscob title='Radio A-V ... double click for compilation' ondblclick=\"event.stopPropagation(); triplewhammy(this); \" onclick=\"event.stopPropagation(); setTimeout(function(){ dodisco('isradio=bdiscob&audio'); }, 2000);\" style='background-color:yellow;visibility:hidden;'>📻</span></button>  <button id=bwc onclick=\"dowc('bwc=radnoiswas&');\" style='background-color:yellow;'>" + twcword + "<sup>A+V</sup> <span id=bwcavb title='Radio A+V ... double click for compilation' ondblclick=\"event.stopPropagation(); triplewhammy(this); \" onclick=\"event.stopPropagation(); setTimeout(function(){ dowc('isradio=bwcavb&'); }, 2000);\" style='background-color:yellow;visibility:hidden;'>📻</span></button> <button id=bwca onclick=\"dowc('bwca=radnoiswas&audio');\" style='background-color:yellow;'>" + twcword + "<sub>A-V</sub> <span id=bwcb title='Radio A-V ... double click for compilation' ondblclick=\"event.stopPropagation(); triplewhammy(this); \" onclick=\"event.stopPropagation(); setTimeout(function(){ dowc('isradio=bwcb&audio'); }, 2000);\" style='background-color:yellow;visibility:hidden;'>📻</span></button>  <button id=byr onclick=\"doyr('byr=radnoiswas&');\" style='background-color:yellow;'>" + yrword.replace('YaJUNKcht ', 'Yacht++ ') + "<sup>A+V</sup> <span id=byravb title='Radio A+V ... double click for compilation' ondblclick=\"event.stopPropagation(); triplewhammy(this); \" onclick=\"event.stopPropagation(); setTimeout(function(){ doyr('isradio=byravb&'); }, 2000);\" style='background-color:yellow;visibility:hidden;'>📻</span></button>     <button id=byra onclick=\"doyr('byra=radnoiswas&audio');\" style='background-color:yellow;'>" + yrword.replace('YaJUNKcht ', 'Yacht++ ') + "<sub>A-V</sub> <span id=byrb title='Radio A-V ... double click for compilation' ondblclick=\"event.stopPropagation(); triplewhammy(this); \" onclick=\"event.stopPropagation(); setTimeout(function(){ doyr('isradio=byrb&audio'); }, 2000);\" style='background-color:yellow;visibility:hidden;'>📻</span></button>    <button id=recallable title=Saved onclick=\"recallit(this);\" style='background-color:orange;visibility:hidden;'></button>";
if (window.opener) {

if (document.URL.indexOf('isradio=') != -1 && document.URL.indexOf('youtube=') != -1) {


// Talk to shower_songs.html
if (top.document.URL.indexOf('regarding=') != -1 && top.document.URL.indexOf('isradio=') != -1 && top.document.URL.indexOf('youtube=') != -1) {
if (top.window.opener) {
var waszv='';
for (var inm=0; inm<Math.min(7,eval('' + vidids.length)); inm++) {
if (top.window.opener.parent.window.opener.document.getElementById('inp00' + eval(1 + inm))) {
if (top.window.opener.parent.window.opener.document.getElementById('inp00' + eval(1 + inm)).value.indexOf('#') == -1) {
waszv= top.window.opener.parent.window.opener.document.getElementById('inp00' + eval(1 + inm)).value;
top.window.opener.parent.window.opener.document.getElementById('inp00' + eval(1 + inm)).value=vidids[inm] + '#' + waszv;
}
}
}
top.window.opener.parent.window.opener.document.body.style.cursor='pointer';
}
}

if (!asa) { assoonas(); }
radioblurb=' ... click on start song (when emojis appear) then we suggest minimising window small but on top (next to other work windows) for radio sequenced play';
var doctt='' + document.title;
document.title=String.fromCodePoint(128251) + ' ' + (location.search.split('regarding=')[1] ? decodeURIComponent(location.search.split('regarding=')[1].split('&')[0]).replace('Yacht Rock','Yacht++ Rock') : '') + ' Radio Play ... ' + doctt;
} else {
if (!asa) { as_soon_as(); } //document.getElementById('td0001').style.border='15px dotted yellow';
radioblurb=' ... please wait for more than one checkbox checked before radio sequenced play is started above';
}
} else if (document.URL.indexOf('isradio=') != -1) {
if (!asa) { as_soon_as(); } //document.getElementById('td0001').style.border='15px dotted yellow';
radioblurb=' ... please wait for more than one checkbox checked before radio sequenced play is started above';
if (document.URL.indexOf('youtube=') != -1) {
var xdoctt='' + document.title;
document.title=String.fromCodePoint(128251) + ' ' + (location.search.split('regarding=')[1] ? decodeURIComponent(location.search.split('regarding=')[1].split('&')[0]).replace('Yacht Rock','Yacht++ Rock') : '') + ' Radio Play ... ' + xdoctt;
}
}
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
radioblurb+=' and we recommend screen lock on';
}
for (var kk=1; kk<=eval(100 * numc); kk++) {
if (eval(kk % eval('' + bcol.length)) == 0) {
dw+=('<td class=loremipsum data-alt="" data-arb="" data-vid="" data-curs="' + cursanimtwo[cntcurs] + '" alt="Cell ' + kk + radioblurb + cursanimtwo[cntcurs] + '" title="If not showing an image ( this one thanks to Lorem Picsum at https://picsum.photos/ ) or to reveal it behind audio or video foreground content please double click here at cell ' + kk + '." ondblclick=refresh(this.id); id="td' + ('0000' + kk).slice(-4) + '" style="min-width:' + amin + 'px;min-height:' + amin + 'px;width:' + amin + 'px;height:' + amin + "px;background-color:" + bcol[eval(kk % eval('' + bcol.length))] + ";" + 'background-size:contain;background-repeat:no-repeat;">' + grabcontent(eval(-1 + kk)) + '</td>').replace(dwfrom,dwto);
setTimeout(cursanimate, 600);
} else {
dw+=('<td onmousedown="checkmeout(event,false);" ontouchdown="checkmeout(event,false);" oncontextmenu="checkmeout(event,true);" class=inhouse data-alt="" data-arb="" data-vid="" alt="Cell ' + kk + radioblurb + cursanimtwo[cntcurs] + '" title="If not showing an image ( yellow cell ones thanks to Lorem Picsum at https://picsum.photos/ ) please double click here at cell ' + kk + ' or just click to get popup window of associated WordPress Blog Posting else right click for associated Cut to the Chase." ondblclick=refresh(this.id); id="td' + ('0000' + kk).slice(-4) + '" style="min-width:' + amin + 'px;min-height:' + amin + 'px;width:' + amin + 'px;height:' + amin + "px;background-color:" + bcol[eval(kk % eval('' + bcol.length))] + ";" + 'background-size:contain;background-repeat:no-repeat;">' + grabcontent(eval(-1 + kk)) + '</td>').replace(dwfrom,dwto);
}
dwfrom='youllneverfindthis';
dwto='youllneverfindthis';
}
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i) && (isPortrait || isLandscape)) {
bigline=bigline.replace(/\>The Wrecking Crew/g,'>The Wrecking <br>Crew').replace(/\>Yacht\+\+ Rock/g,'>Yacht++ <br>Rock').replace(/\>Yacht Rock/g,'>Yacht <br>Rock').replace(/\>Disco/g,'>Disco <br>');
}
document.write(dw + "</tr></table><br>" + bigline);
</script>

Previous relevant Shower Song Remember and Recall Tutorial is shown below.

Shower Song Remember and Recall Tutorial

Shower Song Remember and Recall Tutorial

Following on from yesterday’s Shower Song Mobile User Functionality Tutorial today …

  • we would like to help out the user …
  • via a “remembering” form … assisted by …
  • a “recalling” usefulness via window.localStorage means … and flagged to the user via …
  • delivering dropdown options

… reflecting those settings the user has chosen to remember out of …

  • YouTube 11 character video code(s) (up to 7)
  • an order of play (up to 7)

So, again, try the changed fourth draft Shower Songs below.

Previous relevant Shower Song Mobile User Functionality Tutorial is shown below.

Shower Song Mobile User Functionality Tutorial

Shower Song Mobile User Functionality Tutorial

The better fit “hardware wise” for a “shower scene” is one of the mobile devices. And so, onto yesterday’s Shower Song User Functionality Tutorial we’ve started down Mobile Road to Chickasaw today, easing us into …

  • in the mobile woooorrrrllllddd a red button overlays a YouTube video so that the audio stream of a video tap of a user will be a real user gesture … and if the red buttons are slow to appear, before that the links can navigate you to a YouTube video play scenario, as distinct from …
  • in the non-mobile woooorrrrllllddd (we’ve heard starts near Chickasaw) clicks can be of the programmatical kind … and we recommend “kind clicking” at all times

We’re not saying that there is not more work to do (in “double negative heaven”), but we realized …

  • on mobile a tap interrupts “normal audio play” transmission … different to …
  • on non-mobile a click may not interrupt a previously arranged “normal audio play” transmission

Big deal?! Yes, you’d not think so, but there you are, as we ‘ve been on that little conundrum for two hours now, with lots of blaspheming?!

Much more testing, but we took our iPhone into the shower, placed it far away from the shower near an open window, and picked a good shower song (am a sucker for “I’m With You”), and clicked the looping emoji to just repeat that song four times, as one of our tests … sorry about the long shower … peepholespeople of the wooooooorrrrrlllllddd?!

Try the changed third draft Shower Songs below.

Previous relevant Shower Song User Functionality Tutorial is shown below.

Shower Song User Functionality Tutorial

Shower Song User Functionality Tutorial

Onto yesterday’s Shower Song Primer Tutorial we’ve been shoring up user functionality, today, adding in quite a few emoji button helpers pointing to functionality.

Lots of the thinking revolved around trying to space out the user checkbox clicking on non-mobile control of the HTML input type=checkboxs …


disabled

… attribute …


var ftime=true;

function whendo() {
var ccnt=0;
var talisti=eval(-1 + eval('' + document.body.innerHTML.split(' style="z-index:599').length)); //('span');
var talist=document.getElementsByTagName('sup');
var inlist=document.getElementsByTagName('input');
for (var ik=0; ik<inlist.length; ik++) {
if (inlist[ik].outerHTML.indexOf('checkbox') != -1) {
ccnt++;
}
}
if (eval('' + talist.length) < ccnt) {
setTimeout(whendo, 1000);
} else {
talist=document.getElementsByTagName('a');
for (var iki=0; iki<talist.length; iki++) {
if (talist[iki].outerHTML.indexOf(' class="processytplay"') != -1) {
talist[iki].onmousedown=function(event){ myac(event.target); };
}
}
setTimeout(function(){ cball(false); }, 500);
}


}

function cball(to) {
var inlist=document.getElementsByTagName('input');
for (var ik=0; ik<inlist.length; ik++) {
if (inlist[ik].outerHTML.indexOf('checkbox') != -1) {
if (to) {
inlist[ik].setAttribute('disabled',to);
} else {
inlist[ik].removeAttribute('disabled');
}
}
}

if (ftime) {
ftime=false;
if (!navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
setTimeout(whendo, 1000);
}
}
}

… in the changed second draft Shower Songs as below.

Previous relevant Shower Song Primer Tutorial is shown below.

Shower Song Primer Tutorial

Shower Song Primer Tutorial

We’re onto a new music related project today, with that familiar theme of “Sequential Play of YouTube Music Videos” where today’s project, so far, just hones in on the “audio stream only of those YouTube videos”.

We have some provisos with our Shower Songs collection …

  • it will work on mobile but not to the automated state non-mobile is in, on this first draft …
  • more display niceties to come …
  • user content functionality to come …

… but feel free to set yourself up (but careful of “bathroom mist” not being good for electronic devices) with today’s first draft Shower Songs as below …

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 eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , | Leave a comment

GraphViz via PHP on AlmaLinux Suite Temporaries Tutorial

Posted on by
GraphViz via PHP on AlmaLinux Suite Temporaries Tutorial

GraphViz via PHP on AlmaLinux Suite Temporaries Tutorial

Onto the recent GraphViz via PHP on AlmaLinux Family Tree Tutorial we’ve applied similar …

  • get rid of /tmp/ temporary folder to read and write to references … in favour of either/both …
    1. tmp folder off the Apache web server’s Document Root (we created for this, and other, purposes, one day)
    2. folder above Apache web server’s Document Root

… as a basis to have these GraphViz PHP hosting Python and/or dot based web applications a solid “interim file place” basis to “do their thiang” creating interesting graphical items amongst …

… options. Why the bother? Well, on recent AlmaLinux Apache web server versions, the reading and writing from/to …


/tmp/

… folder by the web content user (as distinct from the cPanel user) has been restricted. Perhaps this could be lifted as a restriction, but we tend to think if the WHM and cPanel Apache web server hosters tend to think this way, it is probably to do with a security concern that they would be far more wise to than we could be.

Previous relevant GraphViz via PHP on AlmaLinux Family Tree Tutorial is shown below.

GraphViz via PHP on AlmaLinux pFamily Tree Tutorial

GraphViz via PHP on AlmaLinux Family Tree Tutorial

Today we continue down our road of replacing PHP (hosts Python and uses Graphviz) code series that used to use /tmp/ to read and write interim files from, in favour of a tmp folder off the Apache web server Document Root, like with the recent GraphViz via PHP on AlmaLinux New Temporary Folder Tutorial.

Today’s “cab off the rank” creates “dot inspired” Family Trees, where a changed file_tree.php Family Tree web application is definitely worth it to try, especially if you understand hierarchical data structures …

Previous relevant Ffmpeg Interfacing Intranet Feeling New Temporary Folder Tutorial is shown below.

Ffmpeg Interfacing Intranet Feeling New Temporary Folder Tutorial

Ffmpeg Interfacing Intranet Feeling New Temporary Folder Tutorial

Onto yesterday’s Ffmpeg Interfacing Intranet Feeling Tutorial today’s work moving forward is to change references to temporary folder …


/tmp/

.. to …


the folder above the Apache Document Root folder

… because …

  1. it can be read and written to by the RJM Programming web server username … and yet …
  2. cannot be referenced by users surfing the net … being lower down the directory tree than the /home/rjmprogr/public_html which corresponds to our Apache Document Root folder
  3. it can be read and written to by the cPanel username … meaning …
  4. our web server’s main functioning crontab scheduling can reference it, like with yesterday’s New Temporary Folder Arrangements Tidying Tutorial

… in the downloadable a tweaked macos_ffmpeg_convert.php works Ffmpeg Converter Tool PHP web application.

Previous relevant Ffmpeg Interfacing Intranet Feeling Tutorial is shown below.

Ffmpeg Interfacing Intranet Feeling Tutorial

Ffmpeg Interfacing Intranet Feeling Tutorial

Today, onto the recent Ffmpeg User Defined Video Editing Crontab Assisted Sharing Tutorial, as far as interfacing to the great ffmpeg video editing software goes …

  • we start, in the work today, calling any existant macOS installed …
    1. ffmpeg
    2. downloaded macos_ffmpeg_convert.php placed into a macOS MAMP local Apache web server port 8888 Document Root folder
  • fix /tmp/ usage as flagged in the blog posting New Temporary Folder Arrangements PHP Primer Tutorial
  • whatever else that becomes an issue or can be an improvement

… in a new makeover operation.

What did we discover today? We think, perhaps, the “named iframe element called by second parameter of window.open” may not be an approach we can take on this makeover, perhaps because HTML content gets into the mix, whereas with the Talking Select Multiple Webpage Palette Speech Bubble Tutorial threads, “the content” has no HTML, just PHP calling the operating system via the macOS “say” command … unless tomorrow reveals today’s folly … that is?!

We can still use window.open second parameter “_blank” and third parameter “positioning” scenarios, though, as how we leave today’s machinations within a tweaked macos_ffmpeg_convert.php works Ffmpeg Converter Tool PHP web application.

Previous relevant Ffmpeg User Defined Video Editing Crontab Assisted Sharing Tutorial is shown below.

Ffmpeg User Defined Video Editing Crontab Assisted Sharing Tutorial

Ffmpeg User Defined Video Editing Crontab Assisted Sharing Tutorial

In yesterday’s Ffmpeg User Defined Video Editing Sharing Tutorial about sharing video data (that might have been edited by ffmpeg command line means) we warned …

even though it is only likely to work for shorter videos

… regarding the data URI hashtagged parts to SMS or email links that we were exclusively using … then. But, with this in mind, what do …

  1. data URI based URLs (hashtagged in an email or SMS link) … and …
  2. absolute URL that points to a web server soft link file, itself pointing to /tmp/ video data files ((we’re still hashtagging, but now, don’t really have to, apply) in an email or SMS link)

… share? We’d say, as far as sharing goes …

A sense of permanency.

But …

  • the second one does not “push the barrow” as much as the first regarding the amount of data … whereas …
  • the first is totally ephemeral and not asking anything more of the web server (ie. the RJM Programming associated one) regarding ongoing storage but is asking a lot of web browsers and client mail applications in the case of video data of any bulk

In terms of sharing videos of any bulk, we’re now, with our web application …

  • renaming the top button (that used to be “Display”) as “Display for a Day” and applying absolute URL (that point at web server soft links that, in turn, point at what can be sizeable video data files that might hang around in RJM Programming domain associated web server /tmp/ location) logics which call on “crontab” … (

    */53 * * * * /etc/init.d/every_hour.sh

    … now mentions …

    ksh -c 'for i in `find /tmp -name "my_video_*.*" -mmin -1440`; do rm -f $i; done'

    ) … assistance to do with the tidy up we feel we need to do on the web server so that large files do not hang around forever (and as you might surmise, at most a day, regarding the bulk of data requirements that are temporarily stored in /tmp/ locations with user associated IP addresses part of the file naming paradigm) … whereas …
  • the bottom button remains as “Display” and still uses data URI based logic

… so that these bulky videos can be successfully shared (via clicks of that “Display for a Day” button) as long as the email or SMS link is attended to by the collaboration recipient within those 24 hours, further to yesterday’s Ffmpeg User Defined Video Editing Sharing Tutorial.

As well, today, as a genericization measure, we stop seeing govetts_leap in any video file naming, replaced by my_video now that the input video control has become less rigid, and now can be controlled, to some extent, by the user in our changed fourth draft of Your Own Ffmpeg Video Changes, which can be that much more useful in a new way in the AlmaLinux web server environment.

Previous relevant Ffmpeg User Defined Video Editing Sharing Tutorial is shown below.

Ffmpeg User Defined Video Editing Sharing Tutorial

Ffmpeg User Defined Video Editing Sharing Tutorial

Sharing options for video based data are often more restrictive regarding email and SMS conduits, but we’ll still go ahead with a …

  • “a” link “mailto:” (for emails) or “sms:” (for SMS) methodology …
  • email subject containing ffmpeg command used for an output video mode of sharing … or …
  • input video mode of sharing before any ffmpeg involvement … based on …
  • email or SMS links where the video data URI (as necessary) is hashtagged

… set of ideas to try out, even though it is only likely to work for shorter videos. The other more obvious sharing mechanism is to download video data via right click options the web browser product you are using offers anyway. And another sharing idea, independent, and working for input videos is to browse for a video using the helper web application from yesterday, and use its Share API based button below the browsing button to share that input video using one of …

  • Mail
  • Messages
  • AirDrop
  • Notes
  • Simulator
  • Freeform

… on our macOS Safari web browser here on a MacBook Air.

Further to yesterday’s Ffmpeg User Defined Browsed Video Editing Tutorial, then, we have some new (PHP writes) Javascript functions …

<?php echo ”

function smsit() {
var smsno=prompt('Please enter SMS number.', '');
if (smsno != null) {
if (document.getElementById('cto').title.indexOf('data:') == 0) {
document.getElementById('asms').href='sms:' + smsno + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#vcont=' + document.getElementById('cto').title);
} else {
document.getElementById('asms').href='sms:' + smsno + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#vcont=' + document.getElementById('resultav').value);
}
document.getElementById('asms').click();
}
}


function emailit() {
var emailaddr=prompt('Please enter Email address.', '');
if (emailaddr != null) {
if (document.getElementById('cto').title.indexOf('data:') == 0) {
document.getElementById('aemail').href='mailto:' + emailaddr + '?subject=Ffmpeg%20Video' + encodeURIComponent(' ... ' + document.getElementById('mysubtwo').value.replace(/^Display$/g,'')) + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#vcont=' + document.getElementById('cto').title);
} else {
document.getElementById('aemail').href='mailto:' + emailaddr + '?subject=Ffmpeg%20Video' + encodeURIComponent(' ... ' + document.getElementById('mysubtwo').value.replace(/^Display$/g,'')) + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#vcont=' + document.getElementById('resultav').value);
}
document.getElementById('aemail').click();
}
}

function documentgetElementByIdmysubpclick() { // new arrangement for the programmatic click of form submit button
if (eval('' + document.getElementById('resultav').value.length) < 300) {
document.getElementById('myiftwo').src=document.URL.split('?')[0].split('#')[0] + '?becomes=' + encodeURIComponent(document.getElementById('becomes').value) + '&browsed=' + encodeURIComponent(document.getElementById('resultav').value);
} else {
document.getElementById('mysubp').click();
}
}

“; ?>

… in our changed third draft of Your Own Ffmpeg Video Changes, which can be that much more useful in a new way in the AlmaLinux web server environment.

Previous relevant Ffmpeg User Defined Browsed Video Editing Tutorial is shown below.

Ffmpeg User Defined Browsed Video Editing Tutorial

Ffmpeg User Defined Browsed Video Editing Tutorial

Today’s work, onto yesterday’s Ffmpeg User Defined Video Editing Tutorial, is to loosen the restrictions regarding “input video file source” we had happening in that “first draft” incarnation of our Ffmpeg User Defined Video Editing web application.

In order to achieve this, we called on a previous Ffmpeg Install and Public Face Tutorial inspired change to our inhouse macos_ffmpeg_convert.php PHP web application, which can serve as our conduit to either/or …

  • browse for a video file off the user local operating system environment … or …
  • path to a web server placed video file … or …
  • URL to a video file

… extra means by which the user can define the “input video file source” that we’re loosening the shackles regarding usage.

To do this, we look for user actions (via PHP writing out Javascript) …

<?php echo ”

var lastpathc='';
var lastopathc='';
var lastvidc='';
var lastvalue='.m4v';
var exactvalue='';
var vext='.mp4';

function lookfor() {
vext='.mp4';
var thisext='';
if (document.getElementById('opath').value != '') {
if (lastopathc != document.getElementById('opath').value && document.getElementById('opath').title != document.getElementById('opath').value) {
lastopathc=document.getElementById('opath').value;
}
}
if (document.getElementById('path').value != '') {
if (lastpathc != document.getElementById('path').value) {
lastpathc=document.getElementById('path').value;
if (lastopathc == ' ') { lastopathc=document.getElementById('opath').value; }
}
}
if (lastopathc.trim() != '') {
thisext=(lastopathc + '.').split('.')[1].split('.')[0].trim();
if (thisext != '') {
document.getElementById('opath').title=lastopathc;
document.getElementById('path').title='video/' + thisext + ';' + lastpathc + lastopathc;
document.getElementById('resultav').value=lastpathc + lastopathc;
lastopathc=' ';
}
}
if (document.getElementById('resultav').value != '') {
if (lastvidc != document.getElementById('resultav').value) {
if ((document.getElementById('path').title + document.getElementById('resultav').value).indexOf('video/') != -1) {
if (document.getElementById('ifbrowse').src.indexOf('=') != -1) {
document.getElementById('myaltin').value=decodeURIComponent(document.getElementById('ifbrowse').src.split('=')[1].split('&')[0].split('#')[0]);
}
if ((document.getElementById('path').title + document.getElementById('resultav').value).indexOf('video/') != -1) {
if (vext.indexOf((document.getElementById('path').title + document.getElementById('resultav').value).split('video/')[1].split(';')[0].split(',')[0]) == -1) {
vext='.' + document.getElementById('resultav').value.split('video/')[1].split(';')[0].split(',')[0];
document.getElementById('myaltin').value=document.getElementById('myaltin').value.split('.')[0] + vext;
document.getElementById('becomes').value=document.getElementById('becomes').value.split('.')[0] + vext;
}
}
lastvidc=document.getElementById('resultav').value;
document.getElementById('resultav').title='rework';
document.getElementById('mysubp').click();
setTimeout(function(){
if (1 == 1) {
document.getElementById('divvid').innerHTML=\"<video id=myinvideo style=width:95%; controls><source id=myinsource type='video/\" + vext.substring(1) + \"' src='\" + document.getElementById('resultav').value + \"'></source></video>\";
} else {
document.getElementById('myinsource').src=document.getElementById('resultav').value;
}
}, 2000);
//setTimeout(function(){
//document.getElementById('resultav').value='';
//}, 20000);
//alert(lastvidc);
setTimeout(lookfor, 23000);
return '';
}
setTimeout(lookfor, 3000);
return '';
}
}
setTimeout(lookfor, 3000);
return '';
}

setTimeout(lookfor, 3000);

“; ?>

… and then arrange the /tmp/ placed temporary video data via …

<?php

if (isset($_POST['browsed']) && isset($_POST['becomes'])) {
$fgccont='';
//file_put_contents('xzm.xzm', '1');
$outtmpfile=str_replace('+',' ',urldecode($_POST['becomes']));
//file_put_contents('xzm2.xzm2', $outtmpfile);
$outext=explode('.', $outtmpfile)[-1 + sizeof(explode('.', $outtmpfile))];
//file_put_contents('xzm3.xzm3', str_replace(' ','+',urldecode($_POST['browsed'])));
if (strpos(('xwq' . $_POST['browsed']), 'xwqdata') !== false) {
file_put_contents(str_replace('+',' ',urldecode($_POST['becomes'])), base64_decode(explode(";base64,", str_replace(' ','+',urldecode($_POST['browsed'])))[1]));
} else if (strpos(('xwq' . strtolower($_POST['browsed'])), 'xwqhttps') !== false) {
$fgccont=file_get_contents('http' . substr(str_replace('+',' ',urldecode($_POST['browsed'])),5));
if (trim($fgccont) != '') {
file_put_contents(str_replace('+',' ',urldecode($_POST['becomes'])), $fgccont);
}
} else if (strpos(('xwq' . strtolower($_POST['browsed'])), 'xwqhttp') !== false) {
$fgccont=file_get_contents('http' . substr(str_replace('+',' ',urldecode($_POST['browsed'])),4));
if (trim($fgccont) != '') {
file_put_contents(str_replace('+',' ',urldecode($_POST['becomes'])), $fgccont);
}
} else if (strpos(('xwq' . strtolower(str_replace('+',' ',urldecode($_POST['browsed'])))), 'xwq//') !== false) {
$fgccont=file_get_contents('http:' . substr(str_replace('+',' ',urldecode($_POST['browsed'])),0));
if (trim($fgccont) != '') {
file_put_contents(str_replace('+',' ',urldecode($_POST['becomes'])), $fgccont);
}
} else if (strpos(('xwq' . strtolower(str_replace('+',' ',urldecode($_POST['browsed'])))), 'xwqwww.') !== false) {
$fgccont=file_get_contents('http://' . substr(str_replace('+',' ',urldecode($_POST['browsed'])),0));
if (trim($fgccont) != '') {
file_put_contents(str_replace('+',' ',urldecode($_POST['becomes'])), $fgccont);
}
} else if (file_exists(str_replace('+',' ',urldecode($_POST['browsed'])))) {
file_put_contents(str_replace('+',' ',urldecode($_POST['becomes'])), file_get_contents(str_replace('+',' ',urldecode($_POST['browsed']))));
}
//file_put_contents('xzm4.xzm4', explode(";base64,", str_replace(' ','+',urldecode($_POST['browsed'])))[1]);
exit;
}

?>

… all the while being helped out by a tweaked macos_ffmpeg_convert.php works Ffmpeg Converter Tool PHP web application helper to our changed second draft of Your Own Ffmpeg Video Changes, which can be that much more useful in a new way in the AlmaLinux web server environment.

Previous relevant Ffmpeg User Defined Video Editing Tutorial is shown below.

Ffmpeg User Defined Video Editing Tutorial

Ffmpeg User Defined Video Editing Tutorial

Today we’re combining video contents from …

  • yesterday’s Ffmpeg Helps iPhone Video to YouTube Tutorial … with …
  • our newly created public interface to ffmpeg with the “soon to be DNS version of rjmprogramming.com.au … but not yet” AlmaLinux Apache/PHP/MySql web server install we talked about at Ffmpeg Install and Public Face Tutorial … and …
  • IP address redirecting, as needed, ifconfig (via PHP shell_exec and $_SERVER[‘SERVER_ADDR’]) based logic …
    <?php

    $whereplace=shell_exec("ifconfig | grep -Eo 'inet (addr:)?([0-9]*\.){3}[0-9]*' | grep -Eo '([0-9]*\.){3}[0-9]*' | grep -v '127.0.0.1'");
    if (strpos(($whereplace . ' ' . $_SERVER['SERVER_ADDR']), '65.254.92.213') !== false) {
    $sv='/usr/bin/ffmpeg';
    header('Location: https://65.254.95.247/PHP/tmp_ffmpeg.php'); //$smallpath='https://65.254.95.247/PHP/'; //header('Location: https://65.254.95.247/PHP/tmp_ffmpeg.php');
    exit; //exit;
    }

    ?>
    … we talked about at AlmaLinux Landing Page WordPress Content Update Solution Tutorial … as well as …
  • user definable form navigation … using …
  • optional dropdown ideas incorporating ideas from Sepia Video via ffmpeg Primer Tutorial … and using …
  • temporary storage places to place output video … and making use of …
  • soft links regarding URLs we talked about at Linux Web Server Soft Link URL Tutorial (saving us having to use ‘data:video/mp4;base64,’ . base64_encode(file_get_contents(trim($endout))) style PHP interventions (which were testing friendships))

… to start down this road towards public facing ffmpeg video editing around here (which we have been hankering for for several years now).

In this first draft of Your Own Ffmpeg Video Changes (via command line ffmpeg) we’re really buttoning down (via not allowing the forward slash character in amongst the user defined ffmpeg command innards) what happens regarding …

  • output video file source location … and …
  • input video file source …

… but who knows what the future holds?!

Previous relevant Ffmpeg Helps iPhone Video to YouTube Tutorial is shown below.

Ffmpeg Helps iPhone Video to YouTube Tutorial

Ffmpeg Helps iPhone Video to YouTube Tutorial

Today we recorded a video looking out from Govetts Leap, Blackheath, here in the Blue Mountains. We captured it via the Camera app on an iPhone via its Video option.

Nineteen seconds long, to share to this MacBook Air we needed AirDrop, the size of it precluding us from using the Photo app’s Mail sharing option.

And that’s where we wanted to use the great ffmpeg in an optimal way to create a video that we could upload to YouTube. In this, we arrived at this excellent link getting us to try …


ffmpeg -i govetts_leap.MOV -c:v libx264 -preset slow -crf 18 -vf scale=out_color_matrix=bt709 -color_primaries bt709 -color_trc bt709 -colorspace bt709 -c:a aac -ar 48000 -ac 2 -b:a 320k -profile:v high -level 4.0 -bf 2 -coder 1 -pix_fmt yuv420p -b:v 10M -threads 4 -cpu-used 0 -r 30 -g 15 -movflags +faststart govetts_leap.mp4

… with success. Checking with this other excellent link, thanks, we were comforted that they would have recommended an output mp4 file format as well, it seems …

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 eLearning, Event-Driven Programming, Operating System, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

WordPress Blog Opcache Caching Tutorial

Posted on by
WordPress Blog Opcache Caching Tutorial

WordPress Blog Opcache Caching Tutorial

Do you ever rate particular “minutes” of life?

It took a Sydney Metro train station ride from Sydenham to Chatswood (20 odd minutes … very odd!) to wake up! We hadn’t looked “under the hood” so to speak, since, perhaps the very old “ob_start(‘ob_gzhandler’)” concepts mentioned in WordPress Blog PHP mod_deflate Speed Improvement Tutorial (way back in 2015 … ouch … not always, but this time … ouch), to look into more Speed Improvements for this PHP written WordPress Blog.

Please, at the very least, consider, in terms of WordPress.org Blog caching smarts …

  1. opcache … and/or …
  2. APC (Alternative PHP Cache)

… as “speeding up thoughts” if you get to be told …


like, finally facing my Waterloo

… by a WordPress.org admin login Tools->Site Health “System Health” WordPress Blog report …

… that a page speed over 1 second for relatively static data is not good enough … and as my under 8’s coach used to say …

Give it a bit of oompha!

… springs to mind as pertinent, and just that little itsy bitsy bit concerning?$%@!

But back to the initial premise, we know the timestamps of today’s animated GIF prove otherwise, but setting that aside, the “actual Collingwood running through the corridor” minute …


php -m | grep -i opcache # is opcache already installed ... no
php -i | grep -i opcache # is opcache potentially active ... yes
dnf search php-opcache # finds you most apt version to install, ours being a PHP version 8.1 one ( Don't know? ... try php -v )
dnf install ea-php81-php-opcache.x86_64 # install opcache ... and that's it because we found, above, that opcache could be potentially active
php -m | grep -i opcache # is opcache installed ... yes ... yay!!!!!!!!! oops ... iswas that Chatswood on the left hand side in "WordPress Blog land"?

… it took on AlmaLinux to arrange opcache to be involved with the environment of the PHP running behind this WordPress Blog
(and we think it might have been on platform 9¾ of Gadigal 🤺 )
was a “highlight minute” spent. This blog is a lot faster now, would you not agree?

Previous relevant WordPress Blog PHP mod_deflate Speed Improvement Tutorial is shown below.

WordPress Blog PHP mod_deflate Speed Improvement Tutorial

WordPress Blog PHP mod_deflate Speed Improvement Tutorial

Our “quest” for speed continues, man person. This WordPress Blog (from WordPress.org (not WordPress.com)) is now using the PHP mod_deflate module to zip up the traffic going out on the web, in exchange for a higher CPU load for our web server here at the www.rjmprogramming.com.au domain.

And how do we know? We put it through the sanity check gzip checker website here.

And what methods can implement this functionality? …

  • fix http.conf as the configuration file of an Apache/PHP/MySql web server … for advice here read here
  • fix the document root .htaccess file … for advice here read here
  • as applicable fix the .htaccess file at the root directory of the website of interest
  • add (the bold bit)
    <?php
    ob_start('ob_gzhandler');
    // rest of code ...
    // ...
    // ... end of rest of code
    ?>     // at top of the root directory index.php of the PHP website of interest … read more about this from WordPress here

We’ve decided to use that last method, and you can see how simple this is here. This tutorial also shows the improvement reflected with a speed test at Google Page Speed. Our “quest” continues. To see where we have come from, take a look at EasyApache in cPanel Primer Tutorial as shown below. Hope to see you again soon.

Previous relevant EasyApache in cPanel Primer Tutorial is shown below.

EasyApache in cPanel Primer Tutorial

EasyApache in cPanel Primer Tutorial

This is not a Monty Python skit (though?) and there is a thought process to say that the previous relevant Google Page Speed Image Optimization Follow Up Tutorial as shown below is relevant to “EasyApache on cPanel Primer Tutorial” … but I’m hoping that if you run an Apache/PHP/MySql domain you may be more advanced than we were here, seeking a “gzip” solution to speeding our website up.

These days (actually for some time) a “gzip” solution is now referred to as a “deflate” solution, and requires, on an Apache/PHP/MySql CentOS web hosting arrangement, the installation into your Apache of the module “mod_deflate” … it is FAR from deflating chortle, chortle.

Your first question regarding this, for yourself, might be … “How can I tell if gzip and/or mod_deflate is already making things faster on a URL of interest?” … use this testing website (thanks man peepholes people). If the answer is no, as it was for this WordPress blog, please read on.

So what is cPanel?

So what is CentOS? So what is WHM? So what is vps? We had a tutorial called Web Server Primer Tutorial where you can look up more.

So what is EasyApache (in cPanel)?

Finished reading … okay, so EasyApache is a means by which, on our Linux web server we can rebuild Apache and PHP (we go to PHP 5.4 from PHP 5.3 … and there are some repercussions to talk about another time) and MySql, and with the rebuild we make sure “mod_deflate” is selected this time.

If you are undertaking this, may I say it is good to, before you start …

  • backup the webserver … (though my first run did have an issue (see “cPanel gurus” below) and it reverted to a working Apache correctly, and, by the by, doesn’t stop your website working as it builds (for about 30 minutes))
  • “cPanel gurus” … know that if the whole thing sounds trepidatious, there is a great support website for cPanel with great experts at the ready, and if there is an issue, at least with my CentOS WHM vps arrangement any issue hooks into cPanel support (with an email) should you want some advice, and perhaps give feedback

Enjoy today’s tutorial.

Tomorrow we show making the “gzip” solution happen via “mod_deflate” for WordPress PHP website in a generic approach applicable to many other PHP website scenarios.

Previous relevant Google Page Speed Image Optimization Follow Up Tutorial is shown below.

Google Page Speed Image Optimization Follow Up Tutorial

Google Page Speed Image Optimization Follow Up Tutorial

Do you remember a few days back talking about the Google Page Speed functionality with FFmpeg Image Optimization Primer Tutorial, as shown below, and also with Google PageSpeed and Firebug Mobile Friendly Primer Tutorial earlier on? We talked about image optimization … well, today, we are going to do some more … it is one of those jobs you could probably keep visiting … and practice helps, methinks. Why is image optimization important? It helps you win SEO “brownie points” with the search engines.

On the WordPress blog you are reading at the moment there is no doubt that some image optimization could be done, so we do this today, concentrating on content above the fold, using a desktop Mac application Paintbrush (and saving as a jpeg with about 25% quality as per this example), though we could have used Pixillion or Gimp (see Gimp Batch Image Manipulation Primer Tutorial) to do this job. The Paintbrush method is used because it is not every file I want to change whereas the other methods suit a “do-all-folder” approach.

You’ll see with the tutorial lots of (s)ftp transferring using the Firefox web browser with its brilliant FireFTP add-on, and you’ll see reduced file sizes and that the Google PageSpeed results improve as a result.

You may be surprised what tomorrow brings, consolidating the thoughts of today, to continue on our “quest” to speed up this WordPress blog. Hope you can join us then.

Previous relevant FFmpeg Image Optimization Primer Tutorial is shown below.

FFmpeg Image Optimization Primer Tutorial

FFmpeg Image Optimization Primer Tutorial

The Linux FFmpeg command is so useful, and so modest. In its “man ffmpeg” it just describes itself as a video converter, but it does (eg. scaling) images as well …. guess the modesty could be that it thinks of one image as a very short video … subliminal advertising perhaps?! We found it invaluable in the “end game” part of the creation of our “Make Your Own Charts” iOS (iPad) mobile application, and you can read more about this here.

Do you remember a few days back talking about Google PageSpeed and Firebug Mobile Friendly Primer Tutorial when we said? …

The Google PageSpeed Insight tools not only measure a webpage’s speed but can also give a report on the Mobile (or Desktop, for that matter) friendliness of that webpage, giving a score out of 100.

… well, today, we turn our attention to the Google PageSpeed talent for showing you how to speed up your webpages, and so, get in the better books with the search engines, and your users, probably. The use of Google PageSpeed on the Landing Page clone pointed out the speed savings that could be achieved by some image optimization (preferably lossless compression) and there is a pretty obvious one here … let’s make these images 105px wide (at least for when they just load “above the fold”).

So, in relation to WordPress Recent Post Landing Page Tutorial as shown below, that’s where we get a new … recent-posts-2.php … and the changes to code … here.

In that code you’ll see the major PHP “exec” code line of change as …


exec("ffmpeg -i " . dirname(__FILE__) . "/" . $narray[$thisij] . ".jpg -vf scale=105:-1 " . dirname(__FILE__) . "/" . $narray[$thisij] . ".jpeg");

That leaves a good zero.html arrangement.

You’ll see that this is only a minor improvement from 33 to 34 score with Google PageSpeed, but has moved the Optimizing Images out of the critical section. Obviously there is such a lot to do in this area, as an ongoing project.

Did you know?

There are quite a few things to like about the Jpeg image file format, and one of the most pleasing one to implement is its peculiarity that a file extension of .jpg is totally equivalent to a file extension of .jpeg as far as the understanding of web browsers, and their rendering rules, goes. This gives a lot of scope to programmers to be able to have unusual arrangements with Jpeg files with their dual extension possibilities (the same data can have two operating system “guises”) … here we use the ability to have two different image sizes and Javascript DOM can handle the onmouseover event nonetheless by reverting to the bigger (size) version when a zooming operation is required, but none of this impacts the “above the fold” initial loading with the smaller (size) version.

Jpeg allows percentage file filtering when saving in various image editors … does one have to go on and on and on and on … or do you give up now?!

Previous relevant WordPress Recent Post Landing Page Tutorial is shown below.

Wordpress Recent Post Landing Page Tutorial

Wordpress Recent Post Landing Page Tutorial

A few days back we decided to revisit (WordPress Recent Post Image Follow Up Tutorial) in order to (software) integrate it with the www.rjmprogramming.com.au domain’s Landing Page. We did this for two reasons. It was probably a good visual cue for users, who may be more inclined to click an icon, than a link, these days (… am not sure yet …) and because support for Flash is becoming too difficult with the Flash we had going on the Landing Page.

As such we decided to replace the contents within the iWeb position:absolute div (that iWeb loves to use) that had Flash with new home-grown HTML iframe webpage that shows those latest 8 recent posts as referred to below.

The change did pan out to involve the “few times a day code”. Do you remember, below …

Why would this job have “a few times a day” functionality? … Well, the images change when a blog posting goes live, and at this blog this happens once a day, so there is no need to slow functionality down getting these images together more often than during that time the new blog posting is scheduled. So this “a few times a day” functionality uses (the web server Linux) crontab/curl … what a team … and we wrote recent-posts-2.php to be the PHP run with a curl … chortle, chortle.

… well, all that still applies, but what if we were to intervene in that code to write out HTML that suits that proposed iframe we talked about, above.

So that’s where we get … recent-posts-2.php … and the changes to code … here.

That leaves a good zero.html arrangement that is dynamic with those “few times a day” arrangements we already had in place, and which you can read more about below, as you wish. Alas, one speaks too soon, as there is something else needed for zero.html to be user-friendly enough for mobile usage … the scrolling is not as “truncaty” (is this a word?) on mobile devices as on non-mobile devices and we have decided here to just show the two most recent icons where the platform is mobile … and how was this done? After reading this brilliant advice … thanks … we did some Javascript onload functionality (in zero.html) as below …


<script type='text/javascript'> var one_o_five=600; function ol() { if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { one_o_five=105; for (var j=3; j<=8; j++) { document.getElementById(j).style.display='none'; } } } </script>

All that is left is to wipe out the iWeb div Landing Page functionality that was Flash and put in, instead …


<iframe style="width:264px;" title="Recent Blog Posts" src="PHP/zero.html"></iframe>

… all okay? You can see it at the www.rjmprogramming.com.au Landing Page a little bit down at the left hand edge of (usual) functionality.

Previous relevant WordPress Recent Post Image Follow Up Tutorial is shown below.

Wordpress Recent Post Image Follow Up Tutorial

Wordpress Recent Post Image Follow Up Tutorial

A couple of days back (WordPress Recent Post Image Primer Tutorial) we did some functionality work on this WordPress Blog’s Recent Posts menu, and left it more functional for sure and very much “okay” … but is “okay” okay? … well, OK, it might be “okay” for a while, but think we seek more functionality:

  • think quite often users expect that an image on a website will have some underlying functionality, so think that would be an improvement
  • would like to include online contextual Ajax help for these newly included images

To move forward from where we were regarding these improvements we could proceed on 3 logic fronts methinks:

  • use the ul->li hierarchy to do one thing with the new images and other blog posting specific things for all the links … this may be possible, but it didn’t work (after some time) so …
  • change the logic so that those new CSS created background-url images are turned into real images … but we prefer to try …
  • add a real image superimposed over the new background-url images with a higher z-index but totally transparent (via techniques of Gimp Transparency Primer Tutorial) and add event logic to these, separate to the link event logics … this worked, and simplified code ideas as well

Our old favourite WordPress blog PHP header.php changed as in bold below:


function rptwo() {
var tworp=document.getElementById('recent-posts-2');
if (tworp != null) {
if (tworp.innerHTML.indexOf('<u' + 'l>') != -1) {
tworp.innerHTML = tworp.innerHTML.replace('<u' + 'l>', '<u' + 'l class="iconlist">');

var eight=new Array("one", "two", "three", "four", "five", "six", "seven", "eight");
var ieight;
tworp.innerHTML = tworp.innerHTML.replace(/</a>/g, "</a><img class='iiconlist' src='http://www.rjmprogramming.com.au/wordpress/transparent.png' style='z-index:3;margin-left:0px;margin-top:0px;opacity:0.2;width:140px;height:100px;box-shadow:rgba(0,0,255,0.2) 2px 2px 2px 2px inset;' onmouseover='getRpnow();' onmouseout='yehbut();' ontouchstart='getRpnow();' ontouchend='yehbut();' title=' ... welcome to the long hover functionality that shows Blog Post regarding Recent Post images'>");

for (ieight=0; ieight<eight.length; ieight++) {
tworp.innerHTML = tworp.innerHTML.replace("<li>", "<li class='" + eight[ieight] + "'>");

tworp.innerHTML = tworp.innerHTML.replace("<img class=", "<img onclick="clickaid('a" + eight[ieight] + "');" class=").replace("<img title=" ", "<img onclick="clickaid('a" + eight[ieight] + "');" title="");

}
}
}
}

Our contextual help Javascript source code can be downloaded by wajax.js which changed as per wajax.js for these changes today.

Hope you enjoy today’s tutorial.

Previous relevant WordPress Recent Post Image Primer Tutorial is shown below.

Wordpress Recent Post Image Primer Tutorial

Wordpress Recent Post Image Primer Tutorial

Sometimes CSS meets Javascript meets “a few times a day” functionality, to get a job done, in this case a CSS styling job on this WordPress blog (continuing on with tutorials like WordPress Blog Code Tag CSS Primer Tutorial as shown below). The job is to put small images below the links in the Recent Posts menu on this WordPress blog. Figure this would help … and it is good to have a reason … it would add images or pictures to content below the field of vision … this makes the blog more user-friendly we think … but, again, as with many styling issues, this is subjective.

Why would this job have “a few times a day” functionality? … Well, the images change when a blog posting goes live, and at this blog this happens once a day, so there is no need to slow functionality down getting these images together more often than during that time the new blog posting is scheduled. So this “a few times a day” functionality uses (the web server Linux) crontab/curl … what a team … and we wrote recent-posts-2.php to be the PHP run with a curl … chortle, chortle.

Then our old favourite WordPress PHP header.php gets modified as with the bold code below for CSS (part 1 change of 2) …


<style>
.mypclass { color:rgb(185,127,206); }
#mypid { color:rgb(185,127,206); }
.mypclass2 { background-color:rgb(185,127,206); color:'black'; }
.mypclass22 { background-color:rgb(185,127,206); color:'black'; }
#mypid2 { background-color:rgb(185,127,206); color:'black'; }

#ahomeis {
color: #ffffff;
font: 24pt Arial;
text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);
}

code {
width:90%;
background-color:#F9F9F9;
margin-top: 10px;
margin-bottom: 10px;
padding:20px 20px;
border:1px dashed blue;
display: inline-block;
text-overflow: ellipsis;
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}​


.iconlist
{
list-style: none;
margin: 0;
padding: 0;
}

li.one {
background-image: url('http://www.rjmprogramming.com.au/PHP/one.jpg');
background-position: left;
background-repeat: no-repeat;
background-size: 128px 80px;
height: 150px;
text-indent: 0px;
}

li.two {
background-image: url('http://www.rjmprogramming.com.au/PHP/two.jpg');
background-position: left;
background-repeat: no-repeat;
background-size: 128px 80px;
height: 150px;
text-indent: 0px;
}

li.three {
background-image: url('http://www.rjmprogramming.com.au/PHP/three.jpg');
background-position: left;
background-repeat: no-repeat;
background-size: 128px 80px;
height: 150px;
text-indent: 0px;
}

li.four {
background-image: url('http://www.rjmprogramming.com.au/PHP/four.jpg');
background-position: left;
background-repeat: no-repeat;
background-size: 128px 80px;
height: 150px;
text-indent: 0px;
}

li.five {
background-image: url('http://www.rjmprogramming.com.au/PHP/five.jpg');
background-position: left;
background-repeat: no-repeat;
background-size: 128px 80px;
height: 150px;
text-indent: 0px;
}

li.six {
background-image: url('http://www.rjmprogramming.com.au/PHP/six.jpg');
background-position: left;
background-repeat: no-repeat;
background-size: 128px 80px;
height: 150px;
text-indent: 0px;
}

li.seven {
background-image: url('http://www.rjmprogramming.com.au/PHP/seven.jpg');
background-position: left;
background-repeat: no-repeat;
background-size: 128px 80px;
height: 150px;
text-indent: 0px;
}

li.eight {
background-image: url('http://www.rjmprogramming.com.au/PHP/eight.jpg');
background-position: left;
background-repeat: no-repeat;
background-size: 128px 80px;
height: 150px;
text-indent: 0px;
}


</style>

… and then our old favourite WordPress PHP header.php gets modified as with the bold code below for Javascript (part 2 change of 2) …



function rptwo() {
var tworp=document.getElementById('recent-posts-2');
if (tworp != null) {
if (tworp.innerHTML.indexOf('<u' + 'l>') != -1) {
tworp.innerHTML = tworp.innerHTML.replace('<u' + 'l>', '<u' + 'l class="iconlist">');
var eight=new Array("one", "two", "three", "four", "five", "six", "seven", "eight");
var ieight;
for (ieight=0; ieight<eight.length; ieight++) {
tworp.innerHTML = tworp.innerHTML.replace("<li>", "<li class='" + eight[ieight] + "'>");
}
}
}
}

function courseCookies() {

rptwo(); // Recent Post images

winit(); // Ajax functionality 26/11/2014 ... slow hover ... not for mobile

… and if no Course Design functionality call at the <body onload='rptwo();'>

A live run is where you are now but you can see it again with this.

Hope this helps you out in some way shape or form.

Previous relevant WordPress Blog Code Tag CSS Primer Tutorial is shown below.

Wordpress Blog Code Tag CSS Primer Tutorial

Wordpress Blog Code Tag CSS Primer Tutorial

Explanations of software code are so many and varied these days because there are so many platforms and programming languages to get your head around, that it would be advantageous, (lazy me finally admits), that as you scan down a blog posting in that fast scan we do as we surf the net, something stands out recognizably as “a piece of code”, apart from the default WordPress theme TwentyTen styling of the <code> tag used in our blog here (use <blockquote> for non-code quotes … by the by, all this is subjective).

Today we settle on a CSS <code> tag styling definition that mixes a few ideas:

  • it is important “code” line breaks where the writer of the “code” said it should
  • … conflictingly (is this a word?) sometimes, you want to see everything, so allow line breaking if the line overshoots at the right hand side
  • use a background colour to make the “code” text stand out differently
  • use an unusual dashed border to catch the user’s scanning eye
  • don’t scare the living daylights (out of the living day lights … chortle, chortle) … make the border a non-jittery colour … like … blue

So let’s see what made this happen (for itself) with our old favourite header.php (what would we do without it!) in bold:


<style>
.mypclass { color:rgb(185,127,206); }
#mypid { color:rgb(185,127,206); }
.mypclass2 { background-color:rgb(185,127,206); color:'black'; }
.mypclass22 { background-color:rgb(185,127,206); color:'black'; }
#mypid2 { background-color:rgb(185,127,206); color:'black'; }

#ahomeis {
color: #ffffff;
font: 24pt Arial;
text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);
}


code {
width:90%;
background-color:#F9F9F9;
margin-top: 10px;
margin-bottom: 10px;
padding:20px 20px;
border:1px dashed blue;
display: inline-block;
text-overflow: ellipsis;
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}​

</style>

All the following links helped, so, thanks Code Tags CSS like Wikipedia, CSS3 PR Text, Word Wrap Break Not Breaking – The Code Tag, David Walsh Code CSS, Make Pre Text Wrap.

Finally, as far as Ajax contextual help goes, the recent wajax.js changed as per the bold code below, last talked about with WordPress Ajax Mobile Friendly Primer Tutorial:



function getCode(evt) {
bpost = 10939;
if ((wisiPad || wisTouch)) {
if (mtimer) clearInterval(mtimer);
tickcnt = 0;
mtimer = setInterval(mchecker, 1000);
} else {
setTimeout(xget, 4000);
}
}

function winit() {
var allPs;
zhr = null;
zok = 1;
if ((wisiPad || wisTouch) || 1 == 1) {
var mybased = document.getElementById('site-description');
if (mybased.innerHTML.indexOf("Long ") == -1) {
if ((wisiPad || wisTouch)) {
mybased.innerHTML = mybased.innerHTML.replace(")", ") <br><a onclick=' alert(wadvice); ' href='#' title='Long touch contextual help'>Long touch help available.</a>");
} else {
mybased.innerHTML = mybased.innerHTML.replace(")", ") <br><a onclick=' alert(wadvice.replace("touch on","hover over")); ' href='#' title='Long hover contextual help'>Long hover help available.</a>");
}
}
}

if (navigator.userAgent.toLowerCase().indexOf("ie") != (0 - 1)) {
allPs = document.getElementsByTagName('code');
} else {
allPs= document.getElementsByTagName('code');
}
for (var j=0; j < allPs.length; j++) {
if ((wisiPad || wisTouch)) {
allPs[j].ontouchstart = getCode;
allPs[j].ontouchend = yehBut;
} else {
allPs[j].onmouseover = getCode; // 10939
if (allPs[j].title.indexOf(" ...") == -1) {
allPs[j].title = allPs[j].title + " ... welcome to the long hover functionality that shows Blog Post regarding Code Tag CSS";
}
allPs[j].onmouseout = yehBut;
}
}

… to become wajax.js

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 eLearning, Installers, Operating System, Software, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , | Leave a comment

GraphViz via PHP on AlmaLinux Family Tree Tutorial

Posted on by
GraphViz via PHP on AlmaLinux pFamily Tree Tutorial

GraphViz via PHP on AlmaLinux Family Tree Tutorial

Today we continue down our road of replacing PHP (hosts Python and uses Graphviz) code series that used to use /tmp/ to read and write interim files from, in favour of a tmp folder off the Apache web server Document Root, like with the recent GraphViz via PHP on AlmaLinux New Temporary Folder Tutorial.

Today’s “cab off the rank” creates “dot inspired” Family Trees, where a changed file_tree.php Family Tree web application is definitely worth it to try, especially if you understand hierarchical data structures …

Previous relevant Ffmpeg Interfacing Intranet Feeling New Temporary Folder Tutorial is shown below.

Ffmpeg Interfacing Intranet Feeling New Temporary Folder Tutorial

Ffmpeg Interfacing Intranet Feeling New Temporary Folder Tutorial

Onto yesterday’s Ffmpeg Interfacing Intranet Feeling Tutorial today’s work moving forward is to change references to temporary folder …


/tmp/

.. to …


the folder above the Apache Document Root folder

… because …

  1. it can be read and written to by the RJM Programming web server username … and yet …
  2. cannot be referenced by users surfing the net … being lower down the directory tree than the /home/rjmprogr/public_html which corresponds to our Apache Document Root folder
  3. it can be read and written to by the cPanel username … meaning …
  4. our web server’s main functioning crontab scheduling can reference it, like with yesterday’s New Temporary Folder Arrangements Tidying Tutorial

… in the downloadable a tweaked macos_ffmpeg_convert.php works Ffmpeg Converter Tool PHP web application.

Previous relevant Ffmpeg Interfacing Intranet Feeling Tutorial is shown below.

Ffmpeg Interfacing Intranet Feeling Tutorial

Ffmpeg Interfacing Intranet Feeling Tutorial

Today, onto the recent Ffmpeg User Defined Video Editing Crontab Assisted Sharing Tutorial, as far as interfacing to the great ffmpeg video editing software goes …

  • we start, in the work today, calling any existant macOS installed …
    1. ffmpeg
    2. downloaded macos_ffmpeg_convert.php placed into a macOS MAMP local Apache web server port 8888 Document Root folder
  • fix /tmp/ usage as flagged in the blog posting New Temporary Folder Arrangements PHP Primer Tutorial
  • whatever else that becomes an issue or can be an improvement

… in a new makeover operation.

What did we discover today? We think, perhaps, the “named iframe element called by second parameter of window.open” may not be an approach we can take on this makeover, perhaps because HTML content gets into the mix, whereas with the Talking Select Multiple Webpage Palette Speech Bubble Tutorial threads, “the content” has no HTML, just PHP calling the operating system via the macOS “say” command … unless tomorrow reveals today’s folly … that is?!

We can still use window.open second parameter “_blank” and third parameter “positioning” scenarios, though, as how we leave today’s machinations within a tweaked macos_ffmpeg_convert.php works Ffmpeg Converter Tool PHP web application.

Previous relevant Ffmpeg User Defined Video Editing Crontab Assisted Sharing Tutorial is shown below.

Ffmpeg User Defined Video Editing Crontab Assisted Sharing Tutorial

Ffmpeg User Defined Video Editing Crontab Assisted Sharing Tutorial

In yesterday’s Ffmpeg User Defined Video Editing Sharing Tutorial about sharing video data (that might have been edited by ffmpeg command line means) we warned …

even though it is only likely to work for shorter videos

… regarding the data URI hashtagged parts to SMS or email links that we were exclusively using … then. But, with this in mind, what do …

  1. data URI based URLs (hashtagged in an email or SMS link) … and …
  2. absolute URL that points to a web server soft link file, itself pointing to /tmp/ video data files ((we’re still hashtagging, but now, don’t really have to, apply) in an email or SMS link)

… share? We’d say, as far as sharing goes …

A sense of permanency.

But …

  • the second one does not “push the barrow” as much as the first regarding the amount of data … whereas …
  • the first is totally ephemeral and not asking anything more of the web server (ie. the RJM Programming associated one) regarding ongoing storage but is asking a lot of web browsers and client mail applications in the case of video data of any bulk

In terms of sharing videos of any bulk, we’re now, with our web application …

  • renaming the top button (that used to be “Display”) as “Display for a Day” and applying absolute URL (that point at web server soft links that, in turn, point at what can be sizeable video data files that might hang around in RJM Programming domain associated web server /tmp/ location) logics which call on “crontab” … (

    */53 * * * * /etc/init.d/every_hour.sh

    … now mentions …

    ksh -c 'for i in `find /tmp -name "my_video_*.*" -mmin -1440`; do rm -f $i; done'

    ) … assistance to do with the tidy up we feel we need to do on the web server so that large files do not hang around forever (and as you might surmise, at most a day, regarding the bulk of data requirements that are temporarily stored in /tmp/ locations with user associated IP addresses part of the file naming paradigm) … whereas …
  • the bottom button remains as “Display” and still uses data URI based logic

… so that these bulky videos can be successfully shared (via clicks of that “Display for a Day” button) as long as the email or SMS link is attended to by the collaboration recipient within those 24 hours, further to yesterday’s Ffmpeg User Defined Video Editing Sharing Tutorial.

As well, today, as a genericization measure, we stop seeing govetts_leap in any video file naming, replaced by my_video now that the input video control has become less rigid, and now can be controlled, to some extent, by the user in our changed fourth draft of Your Own Ffmpeg Video Changes, which can be that much more useful in a new way in the AlmaLinux web server environment.

Previous relevant Ffmpeg User Defined Video Editing Sharing Tutorial is shown below.

Ffmpeg User Defined Video Editing Sharing Tutorial

Ffmpeg User Defined Video Editing Sharing Tutorial

Sharing options for video based data are often more restrictive regarding email and SMS conduits, but we’ll still go ahead with a …

  • “a” link “mailto:” (for emails) or “sms:” (for SMS) methodology …
  • email subject containing ffmpeg command used for an output video mode of sharing … or …
  • input video mode of sharing before any ffmpeg involvement … based on …
  • email or SMS links where the video data URI (as necessary) is hashtagged

… set of ideas to try out, even though it is only likely to work for shorter videos. The other more obvious sharing mechanism is to download video data via right click options the web browser product you are using offers anyway. And another sharing idea, independent, and working for input videos is to browse for a video using the helper web application from yesterday, and use its Share API based button below the browsing button to share that input video using one of …

  • Mail
  • Messages
  • AirDrop
  • Notes
  • Simulator
  • Freeform

… on our macOS Safari web browser here on a MacBook Air.

Further to yesterday’s Ffmpeg User Defined Browsed Video Editing Tutorial, then, we have some new (PHP writes) Javascript functions …

<?php echo ”

function smsit() {
var smsno=prompt('Please enter SMS number.', '');
if (smsno != null) {
if (document.getElementById('cto').title.indexOf('data:') == 0) {
document.getElementById('asms').href='sms:' + smsno + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#vcont=' + document.getElementById('cto').title);
} else {
document.getElementById('asms').href='sms:' + smsno + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#vcont=' + document.getElementById('resultav').value);
}
document.getElementById('asms').click();
}
}


function emailit() {
var emailaddr=prompt('Please enter Email address.', '');
if (emailaddr != null) {
if (document.getElementById('cto').title.indexOf('data:') == 0) {
document.getElementById('aemail').href='mailto:' + emailaddr + '?subject=Ffmpeg%20Video' + encodeURIComponent(' ... ' + document.getElementById('mysubtwo').value.replace(/^Display$/g,'')) + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#vcont=' + document.getElementById('cto').title);
} else {
document.getElementById('aemail').href='mailto:' + emailaddr + '?subject=Ffmpeg%20Video' + encodeURIComponent(' ... ' + document.getElementById('mysubtwo').value.replace(/^Display$/g,'')) + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#vcont=' + document.getElementById('resultav').value);
}
document.getElementById('aemail').click();
}
}

function documentgetElementByIdmysubpclick() { // new arrangement for the programmatic click of form submit button
if (eval('' + document.getElementById('resultav').value.length) < 300) {
document.getElementById('myiftwo').src=document.URL.split('?')[0].split('#')[0] + '?becomes=' + encodeURIComponent(document.getElementById('becomes').value) + '&browsed=' + encodeURIComponent(document.getElementById('resultav').value);
} else {
document.getElementById('mysubp').click();
}
}

“; ?>

… in our changed third draft of Your Own Ffmpeg Video Changes, which can be that much more useful in a new way in the AlmaLinux web server environment.

Previous relevant Ffmpeg User Defined Browsed Video Editing Tutorial is shown below.

Ffmpeg User Defined Browsed Video Editing Tutorial

Ffmpeg User Defined Browsed Video Editing Tutorial

Today’s work, onto yesterday’s Ffmpeg User Defined Video Editing Tutorial, is to loosen the restrictions regarding “input video file source” we had happening in that “first draft” incarnation of our Ffmpeg User Defined Video Editing web application.

In order to achieve this, we called on a previous Ffmpeg Install and Public Face Tutorial inspired change to our inhouse macos_ffmpeg_convert.php PHP web application, which can serve as our conduit to either/or …

  • browse for a video file off the user local operating system environment … or …
  • path to a web server placed video file … or …
  • URL to a video file

… extra means by which the user can define the “input video file source” that we’re loosening the shackles regarding usage.

To do this, we look for user actions (via PHP writing out Javascript) …

<?php echo ”

var lastpathc='';
var lastopathc='';
var lastvidc='';
var lastvalue='.m4v';
var exactvalue='';
var vext='.mp4';

function lookfor() {
vext='.mp4';
var thisext='';
if (document.getElementById('opath').value != '') {
if (lastopathc != document.getElementById('opath').value && document.getElementById('opath').title != document.getElementById('opath').value) {
lastopathc=document.getElementById('opath').value;
}
}
if (document.getElementById('path').value != '') {
if (lastpathc != document.getElementById('path').value) {
lastpathc=document.getElementById('path').value;
if (lastopathc == ' ') { lastopathc=document.getElementById('opath').value; }
}
}
if (lastopathc.trim() != '') {
thisext=(lastopathc + '.').split('.')[1].split('.')[0].trim();
if (thisext != '') {
document.getElementById('opath').title=lastopathc;
document.getElementById('path').title='video/' + thisext + ';' + lastpathc + lastopathc;
document.getElementById('resultav').value=lastpathc + lastopathc;
lastopathc=' ';
}
}
if (document.getElementById('resultav').value != '') {
if (lastvidc != document.getElementById('resultav').value) {
if ((document.getElementById('path').title + document.getElementById('resultav').value).indexOf('video/') != -1) {
if (document.getElementById('ifbrowse').src.indexOf('=') != -1) {
document.getElementById('myaltin').value=decodeURIComponent(document.getElementById('ifbrowse').src.split('=')[1].split('&')[0].split('#')[0]);
}
if ((document.getElementById('path').title + document.getElementById('resultav').value).indexOf('video/') != -1) {
if (vext.indexOf((document.getElementById('path').title + document.getElementById('resultav').value).split('video/')[1].split(';')[0].split(',')[0]) == -1) {
vext='.' + document.getElementById('resultav').value.split('video/')[1].split(';')[0].split(',')[0];
document.getElementById('myaltin').value=document.getElementById('myaltin').value.split('.')[0] + vext;
document.getElementById('becomes').value=document.getElementById('becomes').value.split('.')[0] + vext;
}
}
lastvidc=document.getElementById('resultav').value;
document.getElementById('resultav').title='rework';
document.getElementById('mysubp').click();
setTimeout(function(){
if (1 == 1) {
document.getElementById('divvid').innerHTML=\"<video id=myinvideo style=width:95%; controls><source id=myinsource type='video/\" + vext.substring(1) + \"' src='\" + document.getElementById('resultav').value + \"'></source></video>\";
} else {
document.getElementById('myinsource').src=document.getElementById('resultav').value;
}
}, 2000);
//setTimeout(function(){
//document.getElementById('resultav').value='';
//}, 20000);
//alert(lastvidc);
setTimeout(lookfor, 23000);
return '';
}
setTimeout(lookfor, 3000);
return '';
}
}
setTimeout(lookfor, 3000);
return '';
}

setTimeout(lookfor, 3000);

“; ?>

… and then arrange the /tmp/ placed temporary video data via …

<?php

if (isset($_POST['browsed']) && isset($_POST['becomes'])) {
$fgccont='';
//file_put_contents('xzm.xzm', '1');
$outtmpfile=str_replace('+',' ',urldecode($_POST['becomes']));
//file_put_contents('xzm2.xzm2', $outtmpfile);
$outext=explode('.', $outtmpfile)[-1 + sizeof(explode('.', $outtmpfile))];
//file_put_contents('xzm3.xzm3', str_replace(' ','+',urldecode($_POST['browsed'])));
if (strpos(('xwq' . $_POST['browsed']), 'xwqdata') !== false) {
file_put_contents(str_replace('+',' ',urldecode($_POST['becomes'])), base64_decode(explode(";base64,", str_replace(' ','+',urldecode($_POST['browsed'])))[1]));
} else if (strpos(('xwq' . strtolower($_POST['browsed'])), 'xwqhttps') !== false) {
$fgccont=file_get_contents('http' . substr(str_replace('+',' ',urldecode($_POST['browsed'])),5));
if (trim($fgccont) != '') {
file_put_contents(str_replace('+',' ',urldecode($_POST['becomes'])), $fgccont);
}
} else if (strpos(('xwq' . strtolower($_POST['browsed'])), 'xwqhttp') !== false) {
$fgccont=file_get_contents('http' . substr(str_replace('+',' ',urldecode($_POST['browsed'])),4));
if (trim($fgccont) != '') {
file_put_contents(str_replace('+',' ',urldecode($_POST['becomes'])), $fgccont);
}
} else if (strpos(('xwq' . strtolower(str_replace('+',' ',urldecode($_POST['browsed'])))), 'xwq//') !== false) {
$fgccont=file_get_contents('http:' . substr(str_replace('+',' ',urldecode($_POST['browsed'])),0));
if (trim($fgccont) != '') {
file_put_contents(str_replace('+',' ',urldecode($_POST['becomes'])), $fgccont);
}
} else if (strpos(('xwq' . strtolower(str_replace('+',' ',urldecode($_POST['browsed'])))), 'xwqwww.') !== false) {
$fgccont=file_get_contents('http://' . substr(str_replace('+',' ',urldecode($_POST['browsed'])),0));
if (trim($fgccont) != '') {
file_put_contents(str_replace('+',' ',urldecode($_POST['becomes'])), $fgccont);
}
} else if (file_exists(str_replace('+',' ',urldecode($_POST['browsed'])))) {
file_put_contents(str_replace('+',' ',urldecode($_POST['becomes'])), file_get_contents(str_replace('+',' ',urldecode($_POST['browsed']))));
}
//file_put_contents('xzm4.xzm4', explode(";base64,", str_replace(' ','+',urldecode($_POST['browsed'])))[1]);
exit;
}

?>

… all the while being helped out by a tweaked macos_ffmpeg_convert.php works Ffmpeg Converter Tool PHP web application helper to our changed second draft of Your Own Ffmpeg Video Changes, which can be that much more useful in a new way in the AlmaLinux web server environment.

Previous relevant Ffmpeg User Defined Video Editing Tutorial is shown below.

Ffmpeg User Defined Video Editing Tutorial

Ffmpeg User Defined Video Editing Tutorial

Today we’re combining video contents from …

  • yesterday’s Ffmpeg Helps iPhone Video to YouTube Tutorial … with …
  • our newly created public interface to ffmpeg with the “soon to be DNS version of rjmprogramming.com.au … but not yet” AlmaLinux Apache/PHP/MySql web server install we talked about at Ffmpeg Install and Public Face Tutorial … and …
  • IP address redirecting, as needed, ifconfig (via PHP shell_exec and $_SERVER[‘SERVER_ADDR’]) based logic …
    <?php

    $whereplace=shell_exec("ifconfig | grep -Eo 'inet (addr:)?([0-9]*\.){3}[0-9]*' | grep -Eo '([0-9]*\.){3}[0-9]*' | grep -v '127.0.0.1'");
    if (strpos(($whereplace . ' ' . $_SERVER['SERVER_ADDR']), '65.254.92.213') !== false) {
    $sv='/usr/bin/ffmpeg';
    header('Location: https://65.254.95.247/PHP/tmp_ffmpeg.php'); //$smallpath='https://65.254.95.247/PHP/'; //header('Location: https://65.254.95.247/PHP/tmp_ffmpeg.php');
    exit; //exit;
    }

    ?>
    … we talked about at AlmaLinux Landing Page WordPress Content Update Solution Tutorial … as well as …
  • user definable form navigation … using …
  • optional dropdown ideas incorporating ideas from Sepia Video via ffmpeg Primer Tutorial … and using …
  • temporary storage places to place output video … and making use of …
  • soft links regarding URLs we talked about at Linux Web Server Soft Link URL Tutorial (saving us having to use ‘data:video/mp4;base64,’ . base64_encode(file_get_contents(trim($endout))) style PHP interventions (which were testing friendships))

… to start down this road towards public facing ffmpeg video editing around here (which we have been hankering for for several years now).

In this first draft of Your Own Ffmpeg Video Changes (via command line ffmpeg) we’re really buttoning down (via not allowing the forward slash character in amongst the user defined ffmpeg command innards) what happens regarding …

  • output video file source location … and …
  • input video file source …

… but who knows what the future holds?!

Previous relevant Ffmpeg Helps iPhone Video to YouTube Tutorial is shown below.

Ffmpeg Helps iPhone Video to YouTube Tutorial

Ffmpeg Helps iPhone Video to YouTube Tutorial

Today we recorded a video looking out from Govetts Leap, Blackheath, here in the Blue Mountains. We captured it via the Camera app on an iPhone via its Video option.

Nineteen seconds long, to share to this MacBook Air we needed AirDrop, the size of it precluding us from using the Photo app’s Mail sharing option.

And that’s where we wanted to use the great ffmpeg in an optimal way to create a video that we could upload to YouTube. In this, we arrived at this excellent link getting us to try …


ffmpeg -i govetts_leap.MOV -c:v libx264 -preset slow -crf 18 -vf scale=out_color_matrix=bt709 -color_primaries bt709 -color_trc bt709 -colorspace bt709 -c:a aac -ar 48000 -ac 2 -b:a 320k -profile:v high -level 4.0 -bf 2 -coder 1 -pix_fmt yuv420p -b:v 10M -threads 4 -cpu-used 0 -r 30 -g 15 -movflags +faststart govetts_leap.mp4

… with success. Checking with this other excellent link, thanks, we were comforted that they would have recommended an output mp4 file format as well, it seems …

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 eLearning, Not Categorised, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , | Leave a comment

Code Difference Reporting Consistency Tutorial

Posted on by
Code Difference Reporting Consistency Tutorial

Code Difference Reporting Consistency Tutorial

Today’s work with Code Difference Reporting both …

  • changes and standardizes dates presented under the Code Difference Reporting Context Tutorial iframe (edge) hovering reports to … in PHP talk …
    <?php

    $oneize='';
    $twoize='';
    if (isset($_GET['zero'])) { // && !isset($_GET['two'])) {
    if (strpos(str_replace('+',' ',urldecode($_GET['zero'])), 'rjmprogramming.com.au') !== false) {
    $oneize='https://www.rjmprogramming.com.au' . explode('rjmprogramming.com.au',str_replace('+',' ',urldecode($_GET['zero'])))[1] . ' last modified on ' . gmdate("F d, Y H:i:s \G\M\T", filemtime($_SERVER['DOCUMENT_ROOT'] . explode('rjmprogramming.com.au',str_replace('+',' ',urldecode($_GET['zero'])))[1]));
    }
    }
    if (isset($_GET['one'])) { // && !isset($_GET['two'])) {
    if (strpos(str_replace('+',' ',urldecode($_GET['one'])), 'rjmprogramming.com.au') !== false) {
    $oneize='https://www.rjmprogramming.com.au' . explode('rjmprogramming.com.au',str_replace('+',' ',urldecode($_GET['one'])))[1] . ' last modified on ' . gmdate("F d, Y H:i:s \G\M\T", filemtime($_SERVER['DOCUMENT_ROOT'] . explode('rjmprogramming.com.au',str_replace('+',' ',urldecode($_GET['one'])))[1])));
    }
    }
    if (isset($_GET['two'])) {
    if (strpos(str_replace('+',' ',urldecode($_GET['two'])), 'rjmprogramming.com.au') !== false) {
    $twoize='https://www.rjmprogramming.com.au' . explode('rjmprogramming.com.au',str_replace('+',' ',urldecode($_GET['two'])))[1] . ' last modified on ' . gmdate("F d, Y H:i:s \G\M\T", filemtime($_SERVER['DOCUMENT_ROOT'] . explode('rjmprogramming.com.au',str_replace('+',' ',urldecode($_GET['two'])))[1])));
    }
    } else if (strpos($oneize,'-GETME') !== false) {
    $twoize='https://www.rjmprogramming.com.au' . str_replace('-_GETME','-GETME',str_replace('-GETME','_GETME',explode('rjmprogramming.com.au',str_replace('+',' ',urldecode($_GET['one'])))[1])) . ' last modified on ' . gmdate("F d, Y H:i:s \G\M\T", filemtime($_SERVER['DOCUMENT_ROOT'] . str_replace('-_GETME','-GETME',str_replace('-GETME','_GETME',explode('rjmprogramming.com.au',str_replace('+',' ',urldecode($_GET['one'])))[1]))));
    }

    ?>
    … to look like a lot like the dates presented on this WordPress Blog, but datumized to being a GMT file modified datetime … and, as with today’s …
  • additional top and bottom iframe (content) hover new reporting … like …

    https://www.rjmprogramming.com.au/Games/Clairvoyance/clairvoyance_game.html-----------GETME last modified on June 01, 2026 10:39:09 GMT

    … created, involving …
    <?php

    $midhsscr.=" var aconto=null; if (iois != null) { aconto = (iois.contentWindow || iois.contentDocument); if (aconto != null) { if (aconto.document) { aconto = aconto.document; } if (aconto.body != null) { parent.titleize(event.target.src,aconto.body,'" . $oneize . "','" . $twoize . "'); } } } var difs=document.getElementsByTagName('iframe'); for (var ij=0; ij<=2; ij+=2) { if (difs[ij].title.replace('.js_','.js-').indexOf('.js-') != -1 && difs[ij].title.replace('.js_','.js-').indexOf('GETME') != -1) { difs[ij].src=difs[ij].title; difs[ij].title=''; } } ";
    $style="<scr" . "ipt type=text/javascript> var prehs=';;'; function doprehs(cval,cwhich) { var pbits=prehs.split(';'); if (cwhich == 0) { document.getElementById('myhl').style.color=cval; prehs=cval.replace(/\;/g,'') + ';' + pbits[1] + ';'; } else if (cwhich == 1) { document.getElementById('myhl').style.backgroundColor=cval; prehs=pbits[0] + ';' + cval.replace(/\;/g,'') + ';'; } } function mayberework(iois) { " . $midhsscr . " } ";
    $style.="\n function titleize(tpone,tptwo,tone,ttwo) { if (tpone.indexOf('zero.') != -1) { if (('' + tone) != '') { tptwo.title='' + tone; tptwo.ondblclick=function(event) { alert('' + event.target.title); } } } else if (tpone.indexOf('one.') != -1) { if (('' + tone) != '') { tptwo.title='' + tone; tptwo.ondblclick=function(event) { alert('' + event.target.title); } } } else if (tpone.indexOf('two.') != -1) { if (('' + ttwo) != '') { tptwo.title='' + ttwo; tptwo.ondblclick=function(event) { alert('' + event.target.title); } } } } \n";
    $style.=" </scr" . "ipt><style> font { text-shadow: -1px 1px 1px #ff2d95; } </style>";

    ?>

… to further, and better formalize the contextualization of the context within the diff.php PHP code base.

Previous relevant Code Difference Reporting Context Tutorial is shown below.

Code Difference Reporting Context Tutorial

Code Difference Reporting Context Tutorial

We’re back (after Code Difference AlmaLinux New Webserver Issue Tutorial) at improving Code Difference Reporting at the RJM Programming domain today.

We had a day recently where we thought it useful to somehow point out to users if their Code Difference Report is not related to the most up to date one they could get, or for that matter if not at the beginning of the code development process.

And then a few days later we realized it would be related, and good, to supply some code file dates for reference, which now happens via a double click or with non-mobile user, just hovering over the Code Difference Report web page.

Primarily, what changed is encapsulated by this new PHP function …

<?php

function posthit($inhit) {
global $dtbizzo;
$outhit=$inhit;
$preout="";
$pregetme="";
$postgetme="";
$htis='';
if (strpos($inhit, 'http://www.rjmprogramming.com.au') !== false) {
$htis='http://';
} else if (strpos($inhit, 'HTTPS://www.rjmprogramming.com.au') !== false) {
$htis='HTTPS://';
}
if (strpos($inhit, '' . $htis . 'www.rjmprogramming.com.au') !== false) {
if (strpos($inhit, '_GETME') !== false) {
$pregetme=str_replace("" . $htis . "www.rjmprogramming.com.au",$_SERVER['DOCUMENT_ROOT'],explode("_GETME", $inhit)[0]);
} else {
$pregetme=rtrim(str_replace("" . $htis . "www.rjmprogramming.com.au",$_SERVER['DOCUMENT_ROOT'],explode("-GETME", $inhit)[0]),'-');
}
$maxlenfile="";
$minlenfile="";
$seclast="";
$thelast="";
foreach (glob($pregetme . "*GETME") as $flfilename) {
if ($thelast == "") {
$thelast=basename($flfilename);
} else {
$seclast=$thelast;
$thelast=basename($flfilename);
}
}
$thisoneinteresting=true;
$nextoneinteresting=false;
$midoneinterest=false;
foreach (glob($pregetme . "*GETME") as $flfilename) {
if ($dtbizzo == "") {
$dtbizzo=" document.body.title='Relevant filenames and dates (also via double click) are '; ";
}
if ($seclast == basename($flfilename)) {
$thisoneinteresting=true;
$nextoneinteresting=false;
$midoneinterest=false;
}
if (basename($flfilename) == basename($inhit)) {
$thisoneinteresting=true;
$nextoneinteresting=false;
$midoneinteresting=true;
}
if ($maxlenfile == "") {
$maxlenfile=$flfilename;
$minlenfile=$flfilename;
} else if (strlen($flfilename) > strlen($maxlenfile)) {
$maxlenfile=$flfilename;
} else if (strlen($flfilename) <= strlen($minlenfile)) {
if (strlen($flfilename) < strlen($minlenfile)) {
$minlenfile=$flfilename;
} else { //if (strpos($flfilename, '-GETME') !== false) {
if (file_exists(str_replace('_GETME','-GETME',$flfilename))) {
$minlenfile=str_replace('_GETME','-GETME',$flfilename);
} else {
$minlenfile=$flfilename;
}
}
}
if (strpos($dtbizzo, " ") === false && ($thisoneinteresting || $nextoneinteresting || $midoneinteresting)) {
$dtbizzo=str_replace(" ';", "' + String.fromCharCode(10) + '" . basename($flfilename) . " " . date ("F d Y H:i:s.", filemtime($flfilename)) . " ';",$dtbizzo);
if ($thisoneinteresting && !$nextoneinteresting && !$midoneinteresting) {
$thisoneinteresting=false;
$nextoneinteresting=true;
} else if ($thisoneinteresting && !$nextoneinteresting && $midoneinteresting) {
$thisoneinteresting=false;
$nextoneinteresting=false;
} else if (!$thisoneinteresting && !$nextoneinteresting && $midoneinteresting) {
$midoneinteresting=false;
} else if (!$thisoneinteresting && $nextoneinteresting && !$midoneinteresting) {
$nextoneinteresting=false;
}
}
}
if ($dtbizzo != "" && strpos($dtbizzo, " ") === false) { $dtbizzo.=' document.body.ondblclick=function(){ var huhpr=prompt(document.body.title,document.body.title); }; '; }
}

if ($minlenfile != "" && $maxlenfile != "") {
if (str_replace($_SERVER['DOCUMENT_ROOT'],"" . $htis . "www.rjmprogramming.com.au",$minlenfile) == $inhit && str_replace($_SERVER['DOCUMENT_ROOT'],"" . $htis . "www.rjmprogramming.com.au",$maxlenfile) == $inhit) {
$preout.=" corresponds to first (and last) difference report ... ";
} else if (str_replace($_SERVER['DOCUMENT_ROOT'],"" . $htis . "www.rjmprogramming.com.au",$minlenfile) == $inhit) {
$preout.=" is first relevant difference report and <a target=_blank title='Latest difference report' href='/PHP/Geographicals/diff.php?one=" . str_replace($_SERVER['DOCUMENT_ROOT'],"" . $htis . "www.rjmprogramming.com.au",$maxlenfile) . "'>currently the report would be</a> <font size=1>(but work on it may be not finalised)</font> ... ";
} else if (str_replace($_SERVER['DOCUMENT_ROOT'],"" . $htis . "www.rjmprogramming.com.au",$maxlenfile) == $inhit) {
$preout.=" <a target=_blank title='First difference report' href='/PHP/Geographicals/diff.php?one=" . str_replace($_SERVER['DOCUMENT_ROOT'],"" . $htis . "www.rjmprogramming.com.au",$minlenfile) . "'>is first relevant difference report</a> and this report corresponds to latest difference report ... ";
} else if ($minlenfile != "" && $maxlenfile != "") {
$preout.=" <a target=_blank title='First difference report' href='/PHP/Geographicals/diff.php?one=" . str_replace($_SERVER['DOCUMENT_ROOT'],"" . $htis . "www.rjmprogramming.com.au",$minlenfile) . "'>is first relevant difference report</a> and <a target=_blank title='Latest difference report' href='/PHP/Geographicals/diff.php?one=" . str_replace($_SERVER['DOCUMENT_ROOT'],"" . $htis . "www.rjmprogramming.com.au",$maxlenfile) . "'>currently the report would be</a> <font size=1>(but work on it may be not finalised)</font> ... ";
}
}

return $preout . $outhit;
}

?>

… within the diff.php PHP code base.

Previous relevant Code Difference AlmaLinux New Webserver Issue Tutorial is shown below.

Code Difference AlmaLinux New Webserver Issue Tutorial

Code Difference AlmaLinux New Webserver Issue Tutorial

Software people involved in PHP programming will be aware that a lot of “what goes on under the hood” configuration wise happens regarding that PHP version’s php.ini configuration file. Sometimes you have direct access to changing the php.ini file. Need I say “be careful” if you make changes, and restart the Apache httpd service to implement? There’ll be situations you have no access to that php.ini file or rely on a shared hosting environment or prefer better experts to handle the changes cough, cough where you’ll forgo these changes to your web hoster’s expertise. Anyway, up until today, php.ini issues on our newer AlmaLinux webserver stopped it performing on that webserver, and had us pointing back to the old webserver IP address to get something working these last weeks.

That php.ini may have a directive …

disable_functions

… where PHP functions such as exec and shell_exec become more and more contentious over time regarding security concerns. Other PHP functions in that category might be file_get_contents (and we started using PHP fread a lot more for example …

<?php

$fis = $_SERVER['DOCUMENT_ROOT'] . explode('rjmprogramming.com.au', $inuis)[1];
$his = fopen($fis, "r");
$cis = fread($his, filesize($fis));
fclose($his);

?>

… with today’s project’s coding) and file_put_contents amongst others.

Our coding difference report (talked about below with Code Difference AlmaLinux HTML Issue Followup Tutorial) revolves around the Linux command …

diff

… and though we could rearrange into a crontab/curl arrangement that would get around the need for exec and shell_exec calls within this project’s PHP … but as Lleyton and John would say … come on … and … you cannot be serious!

The new diff.php got changed as per this link to suit this new webserver, on it’s own terms.

Previous relevant Code Difference AlmaLinux HTML Issue Followup Tutorial is shown below.

Code Difference AlmaLinux HTML Issue Followup Tutorial

Code Difference AlmaLinux HTML Issue Followup Tutorial

Web application solutions, looking at them the next day, can often throw up …

There’s more to it than that.

… ideas, especially if you’ve been beavering away at the one code source (section), and the overall solution might involve more than that. And it may be …

  • your own followup testing … or …
  • your own followup usage (somewhere else, that annoys) … or …
  • someone else’s observations

… which gets you to realize you’ve only addressed one part of several parts to an overall solution. This occurred regarding Code Difference AlmaLinux HTML Issue Tutorial from a couple of days ago, and us happening upon a link like the https://www.rjmprogramming.com.au/HTMLCSS/body_cavities.html-GETME (and we’re only worrying about .html and GETME style URLs here) of …


https://www.rjmprogramming.com.au/HTMLCSS/body_cavities.html-GETME
https://www.rjmprogramming.com.au/HTMLCSS/body_cavities.html-GETME

… is like one we’d use at this blog but want it to display code, and in this scenario we often display …

  1. a code differences link … the problems of which we addressed in part one of the solution a few days ago …
  2. a link like above that is meant to display HTML code …
  3. as applicable, a link to the web application involved

So, as of a couple of days ago, that middle one would do something, for HTML code links, but not what we were expecting. But because we have that access to the WordPress blog TwentyTen theme header.php PHP codex code, we can amend as per (working off the structure of a previous modification you can read about at WordPress Table Cell Nests Code Element Overflow Issue Tutorial) …

<?php

function calendar_pass() {
var thisc='', thiscc='', thist='', jiicp=0, thisdate='', thistime='', nexttime='', thishour=0, nexthour=0, thisminute='', thissecond='00', thisurl='';
var h1cps=docgetclass('entry-title','*'); //document.getElementsByTagName('h2');
var tdzs=document.getElementsByTagName('td'), itdzs=0;
var cps=document.getElementsByTagName('a');
var cdes=document.getElementsByTagName('code');
var mfnd=false, washref='';
for (var ijcal=0; ijcal<cps.length; ijcal++) { // new calendar links background image
// Check for GETME links for .htm and no diff.php mention
if (('' + cps[ijcal].href).toLowerCase().indexOf('.htm') != -1 && ('' + cps[ijcal].href).indexOf('GETME') != -1 && ('' + cps[ijcal].href).indexOf('diff.php') == -1) {
washref=('' + cps[ijcal].href);
cps[ijcal].href='//www.rjmprogramming.com.au/PHP/Geographicals/diff.php?zero=' + encodeURIComponent(washref) + '#seehtmllook=n';
}
if (eval('' + ('' + cps[ijcal].href).split('/').length) == 8) {
if (eval('' + ('' + cps[ijcal].href).split('/')[4].length) == 4) {
mfnd=false;
for (itdzs=0; itdzs<tdzs.length; itdzs++) {

if (tdzs[itdzs].innerHTML.replace(String.fromCharCode(10),'').indexOf('<code') == 0 && navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
if (tdzs[itdzs].outerHTML.indexOf('-webkit-overflow-scrolling') == -1) {
if (1 == 1) {
tdzs[itdzs].innerHTML=tdzs[itdzs].innerHTML.replace('<code>','<code style="-webkit-overflow-scrolling:touch;overflow:scroll;">').replace('<code style="','<code style="-webkit-overflow-scrolling:touch;overflow:scroll;');
} else {
tdzs[itdzs].WebkitOverflowScrolling='touch';
tdzs[itdzs].Overflow='scroll';
}
}
}

if (tdzs[itdzs].innerHTML == cps[ijcal].outerHTML) {
tdzs[itdzs].className=cps[ijcal].title.replace(/\ /g,'_');
tdzs[itdzs].onclick=function(evt){ window.open('//www.rjmprogramming.com.au/ITblog/' + evt.target.innerHTML.split(' title="')[1].split('"')[0].toLowerCase().replace(String.fromCharCode(35), "").replace(".", "").replace(".", "").replace(".", "").replace("+", "").replace("+", "").replace("'", "").replace('%27','').replace(/\//g, "-").replace(/,/g, "").replace("---","-").replace("---","-").replace(/--/g,"-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-"), '_blank', 'top=50,left=50,width=1200,height=900'); };
mfnd=true;
}
}
if (!mfnd) {
cps[ijcal].onmouseover=function(evt){ var pbs=('' + evt.target.href).split('/'); if (document.head.innerHTML.indexOf('[title=' + "'" + evt.target.title + "'" + ']') == -1) { document.head.innerHTML+=' <style> [title=' + "'" + evt.target.title + "'" + '] { ' + ' background:url(//www.rjmprogramming.com.au/ITblog/500/500/?random=178654345&mustbedated=' + pbs[4] + pbs[5] + pbs[6] + ') center center no-repeat; background-size:cover; } </style> '; } };
} else {
cps[ijcal].onmouseover=function(evt){ var pbs=('' + evt.target.href).split('/'); if (document.head.innerHTML.indexOf(' .' + evt.target.title.replace(/\ /g,'_') + ' {') == -1) { document.head.innerHTML+=' <style> .' + evt.target.title.replace(/\ /g,'_') + ' { ' + ' background:url(//www.rjmprogramming.com.au/ITblog/500/500/?random=178654345&mustbedated=' + pbs[4] + pbs[5] + pbs[6] + ') center center no-repeat !important; background-size:cover; } </style> '; } };
}
}
}
}
//for (itdzs=0; itdzs<cdes.length; itdzs++) {
// cdes[itdzs].className='notranslate';
// cdes[itdzs].translation='no';
//}
for (var iicp=0; iicp<h1cps.length; iicp++) {
thist=h1cps[iicp].innerHTML.split(' <')[0].split('<')[0];
thisurl='';
if (h1cps[iicp].innerHTML.indexOf(' id="d') != -1) {
thisurl="//www.rjmprogramming.com.au/ITblog/" + h1cps[iicp].innerHTML.split(' id="d')[1].split('"')[0];
}
if (jiicp < cps.length) {
while (jiicp < cps.length && (cps[jiicp].innerHTML.indexOf(' content="') == -1 || cps[jiicp].innerHTML.indexOf('&#') != -1)) {
jiicp++;
}
if (jiicp < cps.length) {
if (cps[jiicp].title.indexOf(':') != -1) {
thisdate=cps[jiicp].innerHTML.split(' content="')[1].split('"')[0].replace('-','').replace('-','');
thishour=eval(cps[jiicp].title.split(':')[0]);
nexthour=thishour;
if (cps[jiicp].title.indexOf(' pm') != -1 && thishour < 12) thishour+=12;
if (thishour < 12) {
nexthour+=12;
} else if (nexthour < 23) {
nexthour=23;
}
thisminute=cps[jiicp].title.split(':')[1].split(' ')[0];
thistime=':' + ('0' + thishour).slice(-2) + thisminute + thissecond;
nexttime=':' + ('0' + nexthour).slice(-2) + thisminute + thissecond;
//alert(thist + ' ' + thisurl + ' ' + thisdate + thistime);
//alert("//www.rjmprogramming.com.au/PHP/ics_attachment.php?id=0&inhouse_ynft=y&eventwords=test&title=" + encodeURIComponent(thist) + '&stage=' + encodeURIComponent(h1cps[iicp].innerHTML.split(' id="d')[1].split('"')[0]) + '&datestart=' + encodeURIComponent(thisdate + thistime) + '&dateend=' + encodeURIComponent(thisdate + thistime) + '&emode=Address&address=Address&description=Description&url=' + encodeURIComponent(thisurl));
//window.open("//www.rjmprogramming.com.au/PHP/ics_attachment.php?id=0&tz=" + encodeURIComponent("Australia/Perth,Australia/Perth") + "&inhouse_ynft=y&eventwords=test&title=" + encodeURIComponent(thist) + '&stage=' + encodeURIComponent(h1cps[iicp].innerHTML.split(' id="d')[1].split('"')[0]) + '&datestart=' + encodeURIComponent(thisdate + thistime) + '&dateend=' + encodeURIComponent(thisdate + nexttime) + '&emode=AndTo&address=' + encodeURIComponent('rmetcalfe15@gmail.com') + '&description=Description&url=' + encodeURIComponent(thisurl), '_blank', 'top=45,left=55,width=600,height=600');
thisc="//www.rjmprogramming.com.au/PHP/ics_attachment.php?id=0&tz=" + encodeURIComponent("Australia/Perth,Australia/Perth") + "&inhouse_ynft=y&eventwords=test&title=" + encodeURIComponent(thist) + '&stage=' + encodeURIComponent(h1cps[iicp].innerHTML.split(' id="d')[1].split('"')[0]) + '&datestart=' + encodeURIComponent(thisdate + thistime) + '&dateend=' + encodeURIComponent(thisdate + nexttime) + '&emode=To&address=emailAddress&description=Description&url=' + encodeURIComponent(thisurl);
thiscc="//www.rjmprogramming.com.au/PHP/ics_attachment.php?id=0&tz=" + encodeURIComponent("Australia/Perth,Australia/Perth") + "&inhouse_ynft=y&eventwords=test&title=" + encodeURIComponent(thist) + '&stage=' + encodeURIComponent(h1cps[iicp].innerHTML.split(' id="d')[1].split('"')[0]) + '&datestart=' + encodeURIComponent(thisdate + thistime) + '&dateend=' + encodeURIComponent(thisdate + nexttime) + '&emode=Address&address=&description=Description&url=' + encodeURIComponent(thisurl);

cps[jiicp].innerHTML+=' <a id="oe' + h1cps[iicp].innerHTML.split(' id="d')[1].split('"')[0] + '" title="Change order of blog posts (now newest to oldest) to oldest through to newest (like a book)" target=_blank style="text-decoration:none;cursor:pointer;" onclick="hrrearrange(this);">&#128256;</a>';

cps[jiicp].innerHTML+=' <a id="ce' + h1cps[iicp].innerHTML.split(' id="d')[1].split('"')[0] + '" title="Create iCal Calendar Event ' + thist + '" target=_blank href="' + "//www.rjmprogramming.com.au/PHP/ics_attachment.php?id=0&tz=" + encodeURIComponent("Australia/Perth,Australia/Perth") + "&inhouse_ynft=y&eventwords=test&title=" + encodeURIComponent(thist) + '&stage=' + encodeURIComponent(h1cps[iicp].innerHTML.split(' id="d')[1].split('"')[0]) + '&datestart=' + encodeURIComponent(thisdate + thistime) + '&dateend=' + encodeURIComponent(thisdate + nexttime) + '&emode=AndTo&address=' + encodeURIComponent('rmetcalfe15@gmail.com') + '&description=Description&url=' + encodeURIComponent(thisurl) + '">&#128197;</a>';
cps[jiicp].innerHTML+=' <iframe id="ice' + h1cps[iicp].innerHTML.split(' id="d')[1].split('"')[0] + '" src="about:blank" style="display:none;width:1px;height:1px;"></iframe><a title="Email and Create iCal Calendar Event ' + thist + '" target=_blank href="#" onclick=" var emtwo=prompt(' + "'" + 'Who do we email to?' + "','fillin@email.in'); document.getElementById('ice" + h1cps[iicp].innerHTML.split(' id="d')[1].split('"')[0] + "').src='" + thisc + "'.replace(/emailAddress/g, encodeURIComponent(emtwo)); window.open('" + thiscc + "','_blank'); \">&#10133;</a>";
cps[jiicp].innerHTML+=' <a id="ee' + h1cps[iicp].innerHTML.split(' id="d')[1].split('"')[0] + '" title="Email iCal Calendar Event ' + thist + '" target=_blank href="#" onclick=" var em=prompt(' + "'" + 'Who do we email to?' + "','fillin@email.in'); window.open('" + thisc + "'.replace(/emailAddress/g, encodeURIComponent(em)),'_blank'); \">&#128231;</a>";
jiicp+=3;
cps=document.getElementsByTagName('a');
}
}
}
}
}

?>

… coupled with changes to diff.php inhouse PHP code that go …

<?php

$seehtml=isset($_GET['seehtmllook']);
if (!$seehtml) { $seehtml=isset($_POST['seehtmllook']); }

if (isset($_GET['zero'])) {
if (strlen($_GET['zero']) > 0 && strpos(strtolower(str_replace('+',' ',urldecode($_GET['zero']))), '.htm') !== false) {
if (strpos(str_replace('+',' ',urldecode($_GET['zero'])), 'rjmprogramming.com.au') !== false || strpos(str_replace('+',' ',urldecode($_GET['zero'])), '/') !== false || $seehtml) {
if ($seehtml) {
header('Location: ' . str_replace('+',' ',urldecode($_GET['zero'])));
exit;
} else if (strpos(str_replace('+',' ',urldecode($_GET['zero'])), 'rjmprogramming.com.au') !== false) {
$zcont=str_replace("\n","<br>",str_replace(' ','&nbsp;',str_replace('&#','&#',str_replace('>','>',str_replace('<','<', file_get_contents($_SERVER['DOCUMENT_ROOT'] . explode('rjmprogramming.com.au',str_replace('+',' ',urldecode($_GET['zero'])))[1]) ) ))));
echo '<html><body title="Double click toggles between file and look modes for ' . str_replace('+',' ',urldecode($_GET['zero'])) . '" ondblclick="if (top.document.URL.indexOf(' . "'&seehtmllook='" . ') != -1) { top.location.href=top.document.URL.replace(' . "'seehtmllook','seeXhtmllook'" . '); } else { top.location.href=top.document.URL.split(' . "'#'" . ')[0] + ' . "'&seehtmllook=y'" . '; }">' . $zcont . '</body></html>';
exit;
} else if (strpos(str_replace('+',' ',urldecode($_GET['zero'])), '/') !== false) {
$zcont=str_replace("\n","<br>",str_replace(' ','&nbsp;',str_replace('&#','&#',str_replace('>','>',str_replace('<','<', file_get_contents($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . str_replace('+',' ',urldecode($_GET['zero'])))) ))));
echo '<html><body title="Double click toggles between file and look modes for ' . str_replace('+',' ',urldecode($_GET['zero'])) . '" ondblclick="if (top.document.URL.indexOf(' . "'&seehtmllook='" . ') != -1) { top.location.href=top.document.URL.replace(' . "'seehtmllook','seeXhtmllook'" . '); } else { top.location.href=top.document.URL.split(' . "'#'" . ')[0] + ' . "'&seehtmllook=y'" . '; }">' . $zcont . '</body></html>';
//echo $zcont;
exit;
}
}
}
} else if (isset($_POST['zero'])) {
if (strlen($_POST['zero']) > 0 && strpos(strtolower(str_replace('+',' ',urldecode($_POST['zero']))), '.htm') !== false) {
if (strpos(str_replace('+',' ',urldecode($_POST['zero'])), 'rjmprogramming.com.au') !== false || strpos(str_replace('+',' ',urldecode($_POST['zero'])), '/') !== false || $seehtml) {
if ($seehtml) {
header('Location: ' . str_replace('+',' ',urldecode($_POST['zero'])));
exit;
} else if (strpos(str_replace('+',' ',urldecode($_POST['zero'])), 'rjmprogramming.com.au') !== false) {
$zcont=str_replace("\n","<br>",str_replace(' ','&nbsp;',str_replace('&#','&#',str_replace('>','>',str_replace('<','<', file_get_contents($_SERVER['DOCUMENT_ROOT'] . explode('rjmprogramming.com.au',str_replace('+',' ',urldecode($_POST['zero'])))[1]) ) ))));
echo '<html><body title="Double click toggles between file and look modes for ' . str_replace('+',' ',urldecode($_POST['zero'])) . '" ondblclick="if (top.document.URL.indexOf(' . "'&seehtmllook='" . ') != -1) { top.location.href=top.document.URL.replace(' . "'seehtmllook','seeXhtmllook'" . '); } else { top.location.href=top.document.URL.split(' . "'#'" . ')[0] + ' . "'&seehtmllook=y'" . '; }">' . $zcont . '</body></html>';
//echo $zcont;
exit;
} else if (strpos(str_replace('+',' ',urldecode($_POST['zero'])), '/') !== false) {
$zcont=str_replace("\n","<br>",str_replace(' ','&nbsp;',str_replace('&#','&#',str_replace('>','>',str_replace('<','<', file_get_contents($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . str_replace('+',' ',urldecode($_POST['zero'])))) ))));
echo '<html><body title="Double click toggles between file and look modes for ' . str_replace('+',' ',urldecode($_POST['zero'])) . '" ondblclick="if (top.document.URL.indexOf(' . "'&seehtmllook='" . ') != -1) { top.location.href=top.document.URL.replace(' . "'seehtmllook','seeXhtmllook'" . '); } else { top.location.href=top.document.URL.split(' . "'#'" . ')[0] + ' . "'&seehtmllook=y'" . '; }">' . $zcont . '</body></html>';
//echo $zcont;
exit;
}
}
}
}

?>

Previous relevant Code Difference AlmaLinux HTML Issue Tutorial is shown below.

Code Difference AlmaLinux HTML Issue Tutorial

Code Difference AlmaLinux HTML Issue Tutorial

We’re pretty sure we have an Apache PHP arrangement difference affecting our Code Difference Reporting of HTML Based Code (since Code Difference Report Mixed Content Issue Tutorial) between moving from …

  • CentOS Apache PHP version starting with a 5 … to …
  • AlmaLinux Apache PHP version starting with an 8

… whereby our GETME suffix code versioning inhouse arrangements are affected, because it seems on AlmaLinux, unlike with CentOS a URL such as …


https://www.rjmprogramming.com.au/HTMLCSS/body_cavities.html-GETME
https://www.rjmprogramming.com.au/HTMLCSS/body_cavities.html-GETME

… shows the content as an HTML webpage, whereas we’re used to seeing this display the HTML code contained within that file.

Our code difference reporting system worked that way, ideally. Other extensions like *.php* based ones act the same way between CentOS and AlmaLinux, but we’ve decided to live with this “new woooorrrrllldddd order”, and turn it, in a mild way, to our advantage, offering code difference report readers of *.html* code the chance now to …

  • see the content as the HTML text within … now that we intervene with PHP code such as …

    <?php

    // initially ...
    $seehtml=isset($_GET['seehtmllook']);
    $latestfile="Latest file ";
    // ... and then later, within PHP mapit function ... PHP code snippets like ...
    if (!$seehtml) {
    $oneis=str_replace('+',' ',urldecode($_GET['two']));
    if (strpos(strtolower(str_replace('.html_getme','.html-GETME',$oneis)), '.html-') !== false && strpos(strtolower(str_replace('.html_getme','.html-GETME',$oneis)), '-getme') !== false) {
    $latestfile="Latest <select onchange=\" top.location.href=top.document.URL.replace('?','?seehtmllook=y&');\"><option value=''>file</option><option value='look'>look</option></select> ";
    file_put_contents($_SERVER['DOCUMENT_ROOT'] . '/two.html', str_replace("~!@#","
    ",str_replace('<','&gt;',str_replace('<','&lt;',str_replace("\n","~!@#",file_get_contents($_SERVER['DOCUMENT_ROOT'] . explode('rjmprogramming.com.au',$oneis)[1]))))));
    return '/two.html';
    }
    } else if (strpos(strtolower(str_replace('.html_getme','.html-GETME',str_replace('+',' ',urldecode($_GET['two'])))), '.html-') !== false && strpos(strtolower(str_replace('.html_getme','.html-GETME',str_replace('+',' ',urldecode($_GET['two'])))), '-getme') !== false) {
    $latestfile="Latest <select onchange=\" top.location.href=top.document.URL.replace('seehtmllook=','seehtmlXlook=');\"><option value='look'>look</option><option value=''>file</option></select> ";
    }
    return str_replace('+',' ',urldecode($_GET['two']));

    ?>

    … gotten to in this different way …

    <?php

    $mapitoneone=mapit('one.one');
    $mapittwotwo=mapit('two.two');
    $iframebits="<h1 id=latest_file" . $suffid . ">" . $latestfile . postmapit('...') . " <a href=#differences" . $suffid . " title=Differences>Differences</a> below this ... " . hit($_GET['one']) . "</h1><br><details open><summary></summary><iframe onload=mayberework(this); style='" . $bciy . "width:100%;height:300px;' height=300 src=" . $mapitoneone . "?randone=" . rand(0,564533) . " title='" . $_GET['one'] . "'></iframe></details><br>";
    $iframebits.="<h1 id=differences" . $suffid . ">Differences" . $haskbit . " <a href=#latest_file" . $suffid . " title=Latest>^</a> <a href=#older_file" . $suffid . " title=Older>v</a>" . $legend . "</h1><br><details open><summary></summary><iframe onload=mayberework(this); style='background-color:pink;width:100%;height:300px;' height=300 id=ifhuh src='huh" . server_remote_addr() . ".huh?rand=" . rand(0,5645342) . "' title='Differences between " . $_GET['one'] . " and " . str_replace("--GETME", "-GETME", $_GET['one']) . "'></iframe></details><br>";
    $iframebits.="<h1 id=older_file" . $suffid . ">Older file ... <a href=#differences" . $suffid . " title=Differences>Differences</a> just above ... " . hit(str_replace("--GETME", "-GETME", $_GET['one'])) . "</h1><br><details open><summary></summary><iframe onload=mayberework(this); style='background-color:lightgreen;width:100%;height:300px;' height=300 src=" . $mapittwotwo . "?randtwo=" . rand(0,564533) . " title='" . str_replace("--GETME", "-GETME", $_GET['one']) . "'></iframe></details><br>";

    ?>

    … or …

  • see the content as the HTML look … via an option on a newly presented dropdown … as per …


    … toggleable to see it like …

… to give a CMS (Content Management System) feel to this report in a changed diff.php PHP code basis, for this.

Previous relevant Code Difference Report Mixed Content Issue Tutorial is shown below.

Code Difference Report Mixed Content Issue Tutorial

Code Difference Report Mixed Content Issue Tutorial

It took us a long time, but we now feel we’re better across, writing web applications, and dealing with URLs, that …

  • not mentioning protocols http: nor https: specifically is preferable …

  • As time goes on, more and more we see the benefits of URLs that start with “/” (but not HTTP:// nor HTTPS:// absolute URL designations), especially when it comes to pointing at a “tool” (eg. external Javascript). It has
    the benefits of …

    • is programmer controlled, so they can place the tool in Document Root folder (in the case of an Apache web server) … and, in so doing …
    • it’s irrelevant where the “parent” (calling) web application is placed … and …
    • mixed content issues are avoided by not using an absolute URL, though it kind of, is!

… both ideals above related to Mixed Content (ie. involving “competing protocols” within a webpage).

Sometimes, however, you can’t help but have to deal with explicit http: and/or https: protocol syntax. It is that way calling our Differences Reporting PHP web application. And we figure, we opened a small can of worms performing the work of the recent Code Difference Highlighting User Interface Tutorial, and in so doing, we hope, sincerely …

  • really improved those middle HTML iframe Linux diff based Difference Reports … but may have opened us up to …
  • upper and lower HTML iframes, containing new and old code versions respectively, sometimes had Mixed Content issues that stopped them displaying

Consider a URL such as …


https://www.rjmprogramming.com.au/PHP/Geographicals/diff.php?one=HTTP://www.rjmprogramming.com.au/PHP/australia_place_crowfly_distances.php-------GETME&f0=&f1=&f2=&f3=&f4=&f5=&f6=

… or …


http://www.rjmprogramming.com.au/PHP/Geographicals/diff.php?one=HTTPS://www.rjmprogramming.com.au/PHP/australia_place_crowfly_distances.php-------GETME&f0=&f1=&f2=&f3=&f4=&f5=&f6=

… and we suspect either of these two URLs might have caused this upper and lower HTML iframes issue up until today. How did we approach the remedy? We could have …

  • detected the Mixed Content potential of the incoming URL and in the PHP reissued the address bar call, effectively, via a header(‘Location: [newUrlFixedForNiMixedContent]’); style of recall … or, what we ended up doing, being (some readers may find the following “a little bit kludgy , this kludgy inside 🎵, am not one of those, who easily 🎶 kludgifies (at least in public)“) …
  • stayed on the same PHP execution call via …
    <?php

    if (isset($_GET['one'])) { // && !isset($_GET['two'])) {
    if (strpos(('' .$_SERVER['SERVER_PORT']), '443') !== false && strpos(strtoupper($_GET['one']), 'HTTP') !== false && strpos(strtoupper($_GET['one']), 'HTTPS') === false) {
    $_GET['one']='HTTPS' . substr($_GET['one'], 4);
    } else if (strpos(('' .$_SERVER['SERVER_PORT']), '443') === false && strpos(strtoupper($_GET['one']), 'HTTPS') !== false) {
    $_GET['one']='HTTP' . substr($_GET['one'], 5);
    }
    if (isset($_GET['two'])) {
    if (strpos(('' .$_SERVER['SERVER_PORT']), '443') !== false && strpos(strtoupper($_GET['two']), 'HTTP') !== false && strpos(strtoupper($_GET['two']), 'HTTPS') === false) {
    $_GET['two']='HTTPS' . substr($_GET['two'], 4);
    } else if (strpos(('' .$_SERVER['SERVER_PORT']), '443') === false && strpos(strtoupper($_GET['two']), 'HTTPS') !== false) {
    $_GET['two']='HTTP' . substr($_GET['two'], 5);
    }
    }
    // more PHP
    }

    ?>

… to not mix any of the apples with any of the pears!

Previous relevant Code Difference Highlighting User Interface Tutorial is shown below.

Code Difference Highlighting User Interface Tutorial

Code Difference Highlighting User Interface Tutorial

Unless a piece of your web application functionality is categorized as “internal use only” you, as a programmer, will want to offer functionality that does not ask the user to remember some arcane URL (GET ? and &) arrangement at the address bar of a web browser. And so, onto yesterday’s Code Difference Highlighting Tutorial, talking about our inhouse PHP Code Difference Reporting functionality, we wanted to offer …



… which is, in raw HTML, at initialization …


<input onchange=doprehs(this.value,0); title="Highlight colour" style=display:inline-block;width:2%; type=color id=mcol value="#000000"><input style="width:18%;background-color:yellow;" onblur="if (this.value.length > 0) { location.href=(document.URL.replace('highlight=','hl=').split(String.fromCharCode(35))[0] + '&highlight=' + encodeURIComponent(prehs + this.value.replace(/\;/g,'U+0003B'))).replace('.php&','.php?');; }" id="myhl" value="" title="Highlight optionally entered string." placeholder="Highlight optionally entered string."></input><input onchange=doprehs(this.value,1); title="Highlight background colour" style=display:inline-block;width:2%; type=color id=mbcol value="#ffff00"></input>

… those two HTML input type=color “textboxes”, respectively, addressing how the HTML mark highlighting element is coloured, via …

  • color (default black)
  • background-color (default yellow)

… as a new highlight functionality feature introduced today in diff.php code or try it yourself here.

Stop Press

The PHP diff.php code got changed so that a user entered comma separated list will be scrutinised for whether it represents a single string to find, or if highlighting should happen for each list member in the comma separated list.

Previous relevant Code Difference Highlighting Tutorial is shown below.

Code Difference Highlighting Tutorial

Code Difference Highlighting Tutorial

We last mentioned our inhouse PHP code difference mechanism with …

It meant, in that scenario yesterday, when a single variable usage “tells a story” in the code, this code difference highlighting might be more effective at explaining the issues rather than showing the code in a code element (even with inhouse colour coding), because there is also the “before” and “after” scenarios there on the screen for the reader to contextualize. See the newly changed PHP diff.php code or try it yourself here.

Previous relevant Code Difference Saved User Settings Tutorial is shown below.

Code Difference Saved User Settings Tutorial

Code Difference Saved User Settings Tutorial

As a PHP programmer it is easy to admire …

  • the server side file and database and operating system smarts of the great serverside language PHP is … all while …
  • PHP writing out HTML (with its CSS and Javascript) has a web application able to access all that clientside intelligence

… and with this in mind, we allow for saved CSS styling user settings, as of today, with our Difference Report web application arrangements.

Don’t we need a database for this? Well, that is possible, and with serverside PHP, could be done, but we opt for clientside window.localStorage usage to …

  • Save user CSS styling settings
  • Recall user CSS styling settings

… so that a user might opt to “set and forget” their preferred set of …

  • New additional
  • Changed single line
  • New block of lines
  • Deleted lines
  • Changed multiple lines

… (CSS Selector) sensitive “categories” of Difference Report data type settings.

As a result, building on yesterday’s Code Difference User Settings Tutorial, the deployment of CSS selector logic, in PHP, now changes to …

<?php

$style="<style> font { text-shadow: -1px 1px 1px #ff2d95; } </style>";
$legend="";
$mx="";
$onecommand=" function nocaret(invx) { var outvx=decodeURIComponent(invx); while (outvx.indexOf('<') > outvx.indexOf('>')) { outvx=outvx.replace('>' + outvx.split('>')[1].split('<')[0] + '<',''); } return encodeURIComponent(outvx); } function onb(event) { var othis=event.target, cih=''; if (('' + othis.id + ' ').substring(0,1) == 'f') { cih=('' + window.localStorage.getItem('diff_' + othis.id)).replace(/^undefined$/g,''.replace(/^null$/g,'')); if (('' + othis.innerHTML.replace(/\ \;/g,' ') + '~~').indexOf(' ~~') != -1) { if (cih == '') { window.localStorage.setItem('diff_' + othis.id, encodeURIComponent('14 >' + othis.innerText + '<')); } else { window.localStorage.removeItem('diff_' + othis.id); window.localStorage.setItem('diff_' + othis.id, nocaret(cih) + encodeURIComponent(' >' + othis.innerText + '<')); } } } } function blurize(othis) { if (1 == 2) { othis.onblur=function(event) { onb(event); }; } return othis; } function perhapsih(insg,ofo) { if (insg.indexOf('<') > insg.indexOf('<') && insg.indexOf('<') != -1) { ofo.innerHTML=insg.split('>')[1].split('>')[0]; ofo.setAttribute('data-ih', insg.split('>')[1].split('>')[0]); return insg.replace('>' + insg.split('>')[1].split('>')[0] + '<', ''); } } function givef(idn,cssis) { if (('' + document.getElementById('f' + idn).title).indexOf(' ' + decodeURIComponent(cssis) + ' ') == -1) { document.getElementById('f' + idn).title=document.getElementById('lspan').title + ' You have user CSS styling friendly one off setting of ' + decodeURIComponent(cssis) + ' for this category of Difference Reporting'; } } function getmaybe(foin,defis) { var mgs=document.URL.split(foin.id + '='); thatget=('' + window.localStorage.getItem('diff_' + foin.id)).replace(/^undefined$/g,'').replace(/^null$/g,''); if (thatget != '') { if (eval('' + mgs.length) == 1) { return decodeURIComponent(thatget); } else if (mgs[1].split('&')[0].split('#')[0] == '') { return decodeURIComponent(thatget); } } if (eval('' + mgs.length) > 1) { if (mgs[1].split('&')[0].split('#')[0] != '') { return decodeURIComponent(mgs[1].split('&')[0].split('#')[0]); } } return defis; } function getany() { var mgs=[],addget='',thisget=''; if (document.URL.replace('?','&').indexOf('&f') == -1 || 1 == 1) { for (var iig=0; iig<=6; iig++) { mgs=document.URL.split('f' + iig + '='); thisget=('' + window.localStorage.getItem('diff_f' + iig)).replace(/^undefined$/g,'').replace(/^null$/g,''); if (thisget != '') { document.getElementById('f' + iig).title=document.getElementById('lspan').title + ' You have user CSS styling friendly setting of ' + decodeURIComponent(thisget) + ' for this category of Difference Reporting'; } if (eval('' + mgs.length) > 1) { if (mgs[1].split('&')[0].split('#')[0] != '') { document.getElementById('f' + iig).title=document.getElementById('lspan').title + ' You have user CSS styling friendly setting of ' + decodeURIComponent(mgs[1].split('&')[0].split('#')[0]) + ' for this category of Difference Reporting'; } } if (document.URL.replace('?','&').indexOf('&f' + iig + '=') == -1) { addget+='&f' + iig + '=' + thisget; } } } if (addget != '') { location.href=(document.URL.split('#')[0] + addget).replace('.php&','.php?'); } } setTimeout(getany,2000); function removeany(newfo) { window.localStorage.removeItem('diff_' + newfo.id); } function addany(newishfo,newwhat) { removeany(newishfo); window.localStorage.setItem('diff_' + newishfo.id, newwhat); } function askabout(fo) { var defd='14', ccol='black', ccols=fo.outerHTML.split(' color=' + String.fromCharCode(34)), psizes=fo.outerHTML.split('px'); if (eval('' + ccols.length) > 1) { ccol=ccols[1].split(String.fromCharCode(34))[0]; } if (eval('' + psizes.length) > 1) { defd=psizes[0].split(':')[eval(-1 + psizes[0].split(':').length)].trim(); } var numis=prompt('How many px (ie. pixels) do you want for the font size of these ' + fo.innerHTML + ' parts of report? Optionally append after a space a colour that is not the default colour ' + ccol + ' for this category of difference report. Optionally append after a space any other styling you want ( eg. text-shadow: -1px 1px 1px #ff2d95; ). Append spaces to save for other Coding Difference Report sessions into the future. Prefix with minus ( ie. - ) to forget any remembered setting. An entry can be > followed by a new wording for this category followed by <', getmaybe(fo,defd)); if (numis != null) { if ((perhapsih(numis,fo) + 'x').trim().substring(0,1) == '-') { removeany(fo); numis=numis.replace('-',''); } if (('' + numis).trim() != '') { if (numis.replace(/\ $/g,'') != numis) { addany(fo,encodeURIComponent(numis.trim())); } location.href=(document.URL.split('#')[0] + '&' + fo.id + '=' + encodeURIComponent(numis.trim())).replace('.php&','.php?'); } } } ";
if (isset($_GET['f0']) || isset($_GET['f1']) || isset($_GET['f2']) || isset($_GET['f3']) || isset($_GET['f4']) || isset($_GET['f5']) || isset($_GET['f6'])) {
$onecommand.=" function sizefonts() { } setTimeout(sizefonts, 3000); ";
for ($ij=0; $ij<=6; $ij++) {
if (isset($_GET['f' . $ij])) {
$ihbit="";
$words=str_replace('+',' ',urldecode($_GET['f' . $ij]));
if (strpos($words, '<') !== false && strpos($words, '>') !== false) {
if (strpos($words, '<') > strpos($words, '>')) {
$ihbit=" document.getElementById('f" . $ij . "').innerHTML='" . str_replace("'", "' + String.fromCharCode(39) + '", explode('<',explode('>',$words)[1])[0]) . "'; ";
}
}
if (trim($words) != '') { $onecommand=str_replace("} ", " givef(" . $ij . ",'" . $_GET['f' . $ij] . "'); } ", $onecommand); }
$wordsa=explode(' ', trim($words));
if (sizeof($wordsa) > 1) {
$words=substr($words,(1 + strlen($wordsa[0])));
for ($ijj=1; $ijj<sizeof($wordsa); $ijj++) {
if (strpos($wordsa[$ijj], ':') === false && $ijj == 1) {
$words=trim(substr($words,(0 + strlen($wordsa[$ijj]))));
$style.='<style> .f' . $ij . " { font-color: " . trim($wordsa[$ijj]) . '; } </style>';
$onecommand=str_replace("} ", " document.getElementById('f" . $ij . "').color='' + '" . trim($wordsa[$ijj]) . "'; document.getElementById('f" . $ij . "').style.fontColor='' + '" . trim($wordsa[$ijj]) . "'; } ", $onecommand);
}
}
if (trim($words) != '') {
if (strpos($words, "{") !== false && strpos($words, "}") !== false) {
$style.='<style> ' . $words . ' </style>';
$onecommand=str_replace("} ", " document.getElementById('dstyle').innerHTML+='<style> ' + '" . $words . " </style>'; } ", $onecommand);
} else {
$style.='<style> .f' . $ij . " { " . $words . ' } </style>';
$onecommand=str_replace("} ", " document.getElementById('dstyle').innerHTML+='<style> .f" . $ij . " { ' + '" . $words . " } </style>'; } ", $onecommand);
}
}
}
$onecommand=str_replace("} ", $ihbit . " document.getElementById('f" . $ij . "').style.fontSize='' + '" . trim($wordsa[0]) . "px'; } ", $onecommand);
$style.='<style> .f' . $ij . " { font-size: " . trim($wordsa[0]) . 'px; } </style>';
}
}
}

?>

… to start making this happen (including being able to change our “inhouse category” names, if you like) in our changed diff.php‘s more colourful Code Differences helper.

Previous relevant Code Difference User Settings Tutorial is shown below.

Code Difference User Settings Tutorial

Code Difference User Settings Tutorial

Yesterday’s Code Difference Privacy Tutorial represented too much of an echo chamber for our liking. Where possible, we prefer functionality that the users out there can tweak themselves.

In thinking about this, those 5 categories (involving 2 subcategories) …

  • New additional
  • Changed single line
  • New block of lines
  • Deleted lines
  • Changed multiple lines

… were what occurred to us could be the CSS Selector basis for us to improve the Code Difference reporting via CSS styling functionality.

Up to today the deployment of that CSS selector logic would have had to be more complex than necessary, but today’s …

  • giving new id and class attributes to the “legend” span id=lspan elements … and …
  • equivalent class attribute to report matching element data

… makes the deployment of CSS selector logic really easy, in PHP, as per …

<?php

$style="<style> font { text-shadow: -1px 1px 1px #ff2d95; } </style>";
$legend="";
$mx="";
$onecommand=" function askabout(fo) { var defd='14', ccol='black', ccols=fo.outerHTML.split(' color=' + String.fromCharCode(34)), psizes=fo.outerHTML.split('px'); if (eval('' + ccols.length) > 1) { ccol=ccols[1].split(String.fromCharCode(34))[0]; } if (eval('' + psizes.length) > 1) { defd=psizes[0].split(':')[eval(-1 + psizes[0].split(':').length)].trim(); } var numis=prompt('How many px (ie. pixels) do you want for the font size of these ' + fo.innerHTML + ' parts of report? Optionally append after a space a colour that is not the default colour ' + ccol + ' for this category of difference report. Optionally append after a space any other styling you want ( eg. text-shadow: -1px 1px 1px #ff2d95; )', defd); if (numis != null) { if (('' + numis).trim() != '') { location.href=(document.URL.split('#')[0] + '&' + fo.id + '=' + encodeURIComponent(numis.trim())).replace('.php&','.php?'); } } } ";
if (isset($_GET['f0']) || isset($_GET['f1']) || isset($_GET['f2']) || isset($_GET['f3']) || isset($_GET['f4']) || isset($_GET['f5']) || isset($_GET['f6'])) {
$onecommand.=" function sizefonts() { } setTimeout(sizefonts, 3000); ";
for ($ij=0; $ij<=6; $ij++) {
if (isset($_GET['f' . $ij])) {
$words=str_replace('+',' ',urldecode($_GET['f' . $ij]));
$wordsa=explode(' ', trim($words));
if (sizeof($wordsa) > 1) {
$words=substr($words,(1 + strlen($wordsa[0])));
for ($ijj=1; $ijj<sizeof($wordsa); $ijj++) {
if (strpos($wordsa[$ijj], ':') === false && $ijj == 1) {
$words=trim(substr($words,(0 + strlen($wordsa[$ijj]))));
$style.='<style> .f' . $ij . " { font-color: " . trim($wordsa[$ijj]) . '; } </style>';
$onecommand=str_replace("} ", " document.getElementById('f" . $ij . "').color='' + '" . trim($wordsa[$ijj]) . "'; document.getElementById('f" . $ij . "').style.fontColor='' + '" . trim($wordsa[$ijj]) . "'; } ", $onecommand);
}
}
if (trim($words) != '') {
if (strpos($words, "{") !== false && strpos($words, "}") !== false) {
$style.='<style> ' . $words . ' </style>';
$onecommand=str_replace("} ", " document.getElementById('dstyle').innerHTML+='<style> ' + '" . $words . " </style>'; } ", $onecommand);
} else {
$style.='<style> .f' . $ij . " { " . $words . ' } </style>';
$onecommand=str_replace("} ", " document.getElementById('dstyle').innerHTML+='<style> .f" . $ij . " { ' + '" . $words . " } </style>'; } ", $onecommand);
}
}
}
$onecommand=str_replace("} ", " document.getElementById('f" . $ij . "').style.fontSize='' + '" . trim($wordsa[0]) . "px'; } ", $onecommand);
$style.='<style> .f' . $ij . " { font-size: " . trim($wordsa[0]) . 'px; } </style>';
}
}
}

?>

… user tweakable (using window.prompt interactive entry) via clickable “legend” elements in our changed diff.php‘s more colourful Code Differences helper.

Previous relevant Code Difference Privacy Tutorial is shown below.

Code Difference Privacy Tutorial

Code Difference Privacy Tutorial

Yesterday’s Code Difference Colour Coding Tutorial Difference Report modifications (still) had the inherent weakness …

  • it was possible, but unlikely, for users to see other user generated reports, if they happened to be asking for reports at exactly the same time … because …
  • we had not catered for busy traffic here … but, today …
  • we cater, better, for busy online traffic … and at the same time …
  • improve the privacy of the reporting on an IP address basis

The downside, at least for us managing this, is that we do not want a build up of files belonging to difference reports long gone. We arrange it, then, that as soon as the report is created, a window.open scenario is coded for …

<?php

$legend=' <span id=lspan><span><font size=2 color=purple>New additional</font></span> <span><font size=2 color=magenta>Changed single </font><font size=2 color=indigo> line</font></span> <span><font size=2 color=blue>New block of lines</font></span> <span><font size=2 color=orange>Deleted lines</font></span> <span><font size=2 color=darkgreen>Changed multiple </font><font size=2 color=olive>lines</font> <a id=myaa onclick="var wod=window.open(' . "'','_blank','left=100,top=100,width=600,height=600'" . '); wod.document.write(' . "'<textarea title=' + document.URL + ' cols=120 rows=40 style=background-color:pink;>' + " . 'window.atob(' . "'" . trim(base64_encode(file_get_contents("huh" . server_remote_addr() . ".huh"))) . "'" . ') + ' . "'</textarea>'" . '); wod.document.title=document.URL; " style=text-decoration:underline;cursor:pointer;>Original ...</a></span></span>';

$onecommand=" function muchl() { if (document.getElementById('lspan').innerHTML.indexOf(\".atob('')\") != -1) { document.getElementById('lspan').innerHTML=document.getElementById('lspan').innerHTML.replace(\".atob('')\", \".atob('" . trim(base64_encode(file_get_contents("huh" . server_remote_addr() . ".huh"))) . "')\"); } } setTimeout(muchl,8000); ";

?>

… leaving the door open for us to tidy up straight away in our changed diff.php‘s more colourful Code Differences helper.

Previous relevant Code Difference Colour Coding Tutorial is shown below.

Code Difference Colour Coding Tutorial

Code Difference Colour Coding Tutorial

It’s coming up to a few years now, since we looked at the code differences reporting we offer the reader, as a way to scrutinize code changes, around here, when we presented Code Download Table Difference Functional Hover Tutorial. Well, we thought we might try some colour coding to perhaps lift the fog on the cryptic nature of Linux diff (difference) command based reports. They can be cryptic because they can feed into the automation feeding of the report into other Linux commands to facilitate ongoing editing endeavours, but we do not want to go into that here, at least today.

But on examining the reports we came up with the following difference report “categories” if you will …

  • New additional
  • Changed single line
  • New block of lines
  • Deleted lines
  • Changed multiple lines

… the header (of a block of interest) the dead give away, depending on the existence of “a” or “c” or “d” and/or “,” for a common sense reinterpretation by us not visiting “man diff” ourselves, yet, regarding this work.

Feel free to take a look at our changed diff.php‘s more colourful Code Differences helper.

Previous relevant Code Download Table Difference Functional Hover Tutorial is shown below.

Code Download Table Multiple Row Email Hover Tutorial

Code Download Table Difference Functional Hover Tutorial

Is it worth adding “onmouseover” event logic onto yesterday’s Code Download Table Difference Functional Linking Tutorial? You bet it is! Just because “onmouseover” has no relevance to mobile platforms, so, obversely, developing software with version control systems is irrelevant to mobile platforms.

… a place for everything and everything in its place …

… we figure. But this is of relevance to the programmer. Sometimes, rather than cater for all the platforms, settling on a subset (of those platforms) can be apt because …

  • one of mobile or non-mobile subsets of platforms is irrelevant to the scenario … as for today … or …
  • you try to reinvent the wheel on the pretext that you are waiting for a particular web browser or platform to allow the functionality in, into the future … you could be waiting a while, with the complexity of app arrangements going on around the net these days

Anyway, back to the “onmouseover” event on non-mobile platforms … it was the case that this event was a favourite for the conduit towards Ajax (client) functionality. And thinking on what we do today to nuance our Code Differences PHP web application, we were thinking …

What would Ajax (like to) do?

… and we decided Ajax would really like to …

  • populate a “div” style=display:inline-block; element adjacent to the functional detail to inform about … but this was not possible … so, instead, we …
  • populate a popup window near to the functional detail to inform about

… for a non-mobile “hover” (ie. “onmouseover”) event.

Along the way we add some more hashtag navigations and set up more colour coding to the output of (the optional) “functional links” Code Difference reporting.

So take a look at our changed diff.php Code Differences helper applied to itself below …

Previous relevant Code Download Table Multiple Row Email Report Tutorial is shown below.

Code Download Table Multiple Row Email Report Tutorial

Code Download Table Multiple Row Email Report Tutorial

Before leaving yesterday’s Download and Copy or Move Code Download Table Tutorial extensions to our Code Download Table functionality …

  • add copy onto a download functionality to the Code Download Table … today, we …
  • add a Multiple Row selection basis for a personalized Email Report for the user

… as we saw that there was scope for this as a sharing mechanism for project discussions and ideas, we hope.

Today’s tutorial picture tries to show the steps to emailing off a report of interest to a user …

  1. User clicks the “Allow Multiple Row Clicks” checkbox …

    prefixask=prefixask.replace('</div>', '<div id=divawrc style=display:inline-block;>  Allow Multiple Row Clicks <input onchange="domrows();" id=awrc style=inline-block; type=checkbox></input> <div id=dawrc style=display:inline-block;></div></div></div>');

    … which causes …
  2. “Report” button shows to its right …

    function domrows() {
    document.getElementById('dawrc').innerHTML='<input style=inline-block; type=button onclick=treportdo(); value=Report></input>';
    var trsis=document.getElementsByTagName('tr');
    for (var itrsis=0; itrsis<trsis.length; itrsis++) {
    trsis[itrsis].onclick = function(e) { if (e.target.innerHTML != '') { var trs=document.getElementsByTagName('tr'); for (var itrs=0; itrs<trs.length; itrs++) { if (trs[itrs].outerHTML.indexOf(e.target.innerHTML) != -1) { trs[itrs].style.border='2px dotted red'; } } } };
    }
    }

    … and table row onclick logic is dynamically applied to those “tr” elements
  3. User clicks somewhere within rows they are interested in seeing be included in a report (which is a snippet of the whole Code Download Table, perhaps to do with a project of interest, or a learning topic of interest)
  4. User optionally clicks the “Report” button …

    function treportdo() {
    var trsis=document.getElementsByTagName('tr');
    webc='<html><head><script type="text/javascript"> function emailto(eto) { window.opener.parentemailto(eto); } function xemailto(eto) { if (eto.indexOf("@") != -1) { var zhr=new XMLHttpRequest(); var zform=new FormData(); zform.append("inline",""); zform.append("to",eto); zform.append("subj","Code Download Table part"); zform.append("body",document.getElementById("mytable").outerHTML); zhr.open("post", "//www.rjmprogramming.com.au/HTMLCSS/emailhtml.php", true); zhr.send(zform); alert("Email sent to " + eto); } } </script></head><body><table id=mytable></table><br><br><br><input onblur=emailto(this.value); placeholder="Email to" type=email></input></body></html>';
    for (var itrsis=0; itrsis<trsis.length; itrsis++) {
    if (itrsis == 0) {
    webc=webc.replace('</table>', trsis[itrsis].outerHTML + '</table>');
    }
    if (trsis[itrsis].outerHTML.indexOf('>') > trsis[itrsis].outerHTML.indexOf('border:')) {
    if (trsis[itrsis].outerHTML.indexOf('dotted') > trsis[itrsis].outerHTML.indexOf('border:')) {
    webc=webc.replace('</table>', trsis[itrsis].outerHTML + '</table>');
    }
    }
    }
    var woois=window.open('','_blank','top=20,left=20,width=600,height=600');
    woois.document.write(webc);
    }

    … which causes a …
  5. New popup window opens showing the relevant snippet of Code Download Table of interest to the user … including …
  6. Textbox for an optional emailee entry that can be filled in … to …
  7. Set off Ajax/FormData methodology means …

    function parentemailto(eto) {
    if (eto.indexOf("@") != -1) {
    var zhr=new XMLHttpRequest();
    var zform=new FormData();
    zform.append("inline","");
    zform.append("to",eto);
    zform.append("subj","RJM Programming Code Download Table part");
    zform.append("body", reltoabs('<table' + webc.split('</table>')[0].split('<table')[1] + '</table>'));
    zhr.open("post", "//www.rjmprogramming.com.au/HTMLCSS/emailhtml.php", true);
    zhr.send(zform);
    alert("Email sent to " + eto);
    }
    }

    … to send off an Inline HTML Email report to the emailee … including …
  8. Links of email can be clicked to get back to source code and other links back at the RJM Programming domain web server

… in our changed getmelist.js external Javascript code file (that you can try out for yourself at this live run link).

Previous relevant Download and Copy or Move Code Download Table Tutorial is shown below.

Download and Copy or Move Code Download Table Tutorial

Download and Copy or Move Code Download Table Tutorial

After the “goings on” with the relatively recent PHP Blog Summary Fixed Title Events Tutorial we thought we were finished with “Code Download Table” functionality … but then …

… along came Jones yesterday’s Download and Copy or Move Server Tutorial …

… and … lo and behold … we saw a good use for the idea of …

  1. download from “the net” to a Downloads folder on your computer or device … and more often than not …
  2. you, the user, copies or renames this data to another location on your computer or device with command line or with operating system GUI

… and allowing for that second step above be programmatical with the most apt functionality that had ever passed our cotton pickin’ mind … our Code Download Table … wi’ all tho’ GETME’s!

But we don’t want to interfere too much with the Code Download Table “flow” here, so create up the top left 20 seconds worth of time (extendable by their actions) available to the user to create “download” attributes on all …

  • “a” links … with …
  • “href” attribute containing “GETME” …
  • but not “diff.php” … and …
  • “download” attribute (the attribute necessary to “download” rather than our default displaying of source code in a new webpage)

… plus no href attribute containing “?s=” either, for today’s purposes with a changed getmelist.js external Javascript code file (that you can try out for yourself at this live run link) … via its new …


var dnprefix=decodeURIComponent(('' + localStorage.getItem('download_copy_to_folder')).replace(/^null$/g,'')); //.replace(/\+/g,' ').replace(/\\\\/g, '_').replace(/\//g, '_').replace(/\:/g, '_');
var delaymore=0;
var prefixask='<div id=firstask style="position:absolute;top:0px;left:0px;"> Download GETME? <input id=dpccb style=inline-block; type=checkbox onchange="dogetmes(document.getElementById(' + "'" + 'dpcis' + "'" + ').value);"></input> <input style=inline-block;width:300px; onclick="delaymore+=20000;" onblur="if (document.getElementById(' + "'" + 'dpccb' + "'" + ').checked) { dogetmes(document.getElementById(this.value); }" type=text id=dpcis placeholder="Optional Download Folder Later Copy to Place via Listener" value="' + dnprefix + '"></input></div>';

function dogetmes(dpprefix) {
delaymore+=20000;
var asis=document.getElementsByTagName('a');
if (dpprefix != dnprefix && 1 == 7) {
localStorage.setItem('download_copy_to_folder', dpprefix);
}
for (var iasis=0; iasis<asis.length; iasis++) {
if (asis[iasis].href.indexOf('diff.php') == -1 && asis[iasis].href.indexOf('?s=') == -1 && asis[iasis].href.indexOf('GETME') != -1) {
asis[iasis].download=dpprefix.replace(/\//g,'_').replace(/\\\\/g,'_').replace(/\:/g,'_') + asis[iasis].href.split('/')[eval(-1 + asis[iasis].href.split('/').length)];
}
}
}

function nomorepa() {
if (eval('' + delaymore) == 0) {
if (document.getElementById('firstask')) {
document.getElementById('firstask').innerHTML='';
}
} else {
setTimeout(nomorepa, eval('' + delaymore));
delaymore=0;
}
}

function lastdivpop() {
var wasih='';
if (document.getElementById('lastdiv')) {
if (document.getElementById('lastdiv').innerHTML == '') {
wasih=wasih;
setTimeout(lastdivpop, 3000);
} else if (document.getElementById('lastdiv').innerHTML.indexOf('firstask') == -1) {
wasih=document.getElementById('lastdiv').innerHTML;
document.getElementById('lastdiv').innerHTML=prefixask + wasih;
prefixask='';
setTimeout(nomorepa, 20000);
} else {
setTimeout(lastdivpop, 3000);
}
}
}

setTimeout(lastdivpop, 8000);

Previous relevant Download and Copy or Move Server Tutorial is shown below.

Download and Copy or Move Server Tutorial

Download and Copy or Move Server Tutorial

Yesterday’s Download and Copy or Move Primer Tutorial was all about the “client side” of …

… and we’ve just “tweaked” (albeit, very importantly, in our books (… but the pamphlettes are still not playing ball)) to ensure no “file clobbering” takes place so that the Korn Shell now does …


suf=""
isuf=-1
while [ -f "${dpath}/${brest}${suf}" ]; do
((isuf=isuf+1))
suf="_${isuf}"
done
if [ ! -z "$suf" ]; then
echo "mv ${dpath}/${brest} ${dpath}/${brest}${suf} # `date`" >> download_to_place.out
mv ${dpath}/${brest} ${dpath}/${brest}${suf} >> download_to_place.out 2>> download_to_place.err
fi

… in download_copier.ksh download_copier.ksh Korn Shell scripting on our macOS operating system “client”.

But today is mainly about filling in the missing bits on the “server” side. This (need for a) “conduit” we referred to yesterday is because we accept no folder paths can be mentioned at the “server” end. Suppose, though, that the “non-pathed” filename we supply to an “a” link’s “download” attribute can be prefixed by a mildly mashed up version of that path we copy to from the Downloads folder of your “client” computer or device, as you perform a “download” via the clicking of an “a” link.

Well, at this blog we’d already started functionality to toggle the use or not of …

  • “a” links … with …
  • “href” attribute containing “GETME” …
  • but not “diff.php” … and …
  • “download” attribute (the attribute necessary to “download” rather than our default displaying of source code in a new webpage)

Were you here, then, when we published WordPress Blog Download Mode Toggler Primer Tutorial (or were you indisposed again?!) There we established an “All Posts” menu “Toggle Download Mode from GETME” option piece of functionality to toggle between …

  • displaying of source code in a new webpage for GETME “a” links … versus …
  • use the changed PHP toggle_download.php in conjunction with a changed good ‘ol TwentyTen Theme header.php as below …
    <?php

    if (outs == null) {
    var dnprefix=decodeURIComponent(('' + localStorage.getItem('download_copy_to_folder')).replace(/^null$/g,'')).replace(/\+/g,' ').replace(/\\\\/g, '_').replace(/\//g, '_').replace(/\:/g, '_');
    for (idmjk=0; idmjk<admjk.length; idmjk++) {
    if (admjk[idmjk].href.indexOf('GETME') != -1 && admjk[idmjk].href.indexOf('diff.php') == -1) {

    if (origcafd < 0) { //!cafd) {
    xp=admjk[idmjk].href.split("GETME");
    prexp=xp[0].split("/");
    postprexp=prexp[-1 + prexp.length].split(".");
    extis = postprexp[-1 + postprexp.length].replace(/_/g,"").replace(/-/g,"").replace(/GETME/g,"");
    outs="//www.rjmprogramming.com.au/getmelist.htm?topoff=150&tsp=" + (Math.floor(Math.random() * 1999900) + 100) + "#" + postprexp[0] + "." + postprexp[-1 + postprexp.length].replace(extis,"").replace(extis,"").replace(extis,"") + "GETME" + extis;
    aorig=admjk[idmjk].innerHTML;
    admjk[idmjk].innerHTML=admjk[idmjk].innerHTML.replace(".","<span data-alt='" + outs + "' id='spn" + cafd + "' title=\" + Code Download Table\" onclick=\"if (cafd == cafd) { cafd=" + cafd + "; changeasfordownload(); } else { window.open('" + outs + "','_blank','top=100,left=100,width=500,height=500'); } return false; \">⚫</span>");
    if (aorig == admjk[idmjk].innerHTML && admjk[idmjk].innerHTML.indexOf('er posts') == -1) admjk[idmjk].innerHTML=admjk[idmjk].innerHTML.replace(" ","<span data-alt='" + outs + "' id='spn" + cafd + "' title=\" + Code Download Table\" onclick=\"if (cafd == cafd) { cafd=" + cafd + "; changeasfordownload(); } else { window.open('" + outs + "','_blank','top=100,left=100,width=500,height=500'); } return false; \">⚪</span>");
    cafd++;
    } else {
    prestuffs = admjk[idmjk].href.split('/');
    newaspare = admjk[idmjk].href.replace('_-GETME', '').replace('__GETME', '').replace('_GETME', '').replace(big, '');

    while (big.indexOf('-') != -1) {

    big = big.replace('-', '');

    newaspare = newaspare.replace(big, '');

    }

    big = '----------------------GETME';
    stuffs = newaspare.split('/');
    if (dnprefix != '') {
    admjk[idmjk].download = dnprefix + prestuffs[stuffs.length - 1];
    } else {
    admjk[idmjk].download = dnprefix + stuffs[stuffs.length - 1];
    }
    admjk[idmjk].title = "(Really download) " + admjk[idmjk].title + ' ... welcome to the long hover functionality that shows allows for a Download Mode for the blog that can be toggled';
    admjk[idmjk].onmouseover = " getDownloadMode(); ";
    admjk[idmjk].onmouseout = " yehBut(); ";
    admjk[idmjk].ontouchstart = " getDownloadMode(); ";
    admjk[idmjk].ontouchend = " yehBut(); ";
    }
    } else if (admjk[idmjk].href.indexOf('GETME') != -1 && origcafd < 0) { //!cafd) {
    xp=admjk[idmjk].href.split("GETME");
    prexp=xp[0].split("/");
    postprexp=prexp[-1 + prexp.length].split(".");
    extis = postprexp[-1 + postprexp.length].replace(/_/g,"").replace(/-/g,"").replace(/GETME/g,"");
    outs="//www.rjmprogramming.com.au/getmelist.htm?topoff=150&tsp=" + (Math.floor(Math.random() * 1999900) + 100) + "#" + postprexp[0] + "." + postprexp[-1 + postprexp.length].replace(extis,"").replace(extis,"").replace(extis,"") + "GETME" + extis;
    aorig=admjk[idmjk].innerHTML;
    selbitis=allthecombos((admjk[idmjk].href + '=').split('=')[1].split('&')[0]);
    admjk[idmjk].innerHTML=admjk[idmjk].innerHTML.replace(".","<span data-alt='" + outs + "' id='spn" + cafd + "' title=\" + Code Download Table\" onclick=\"if (cafd == cafd) { cafd=" + cafd + "; changeasfordownload(); } else { window.open('" + outs + "','_blank','top=100,left=100,width=500,height=500'); } return false; \"><select onchange=\" if (this.value.length > 0) { window.open(this.value,'_blank'); } return false; \" style='margin-bottom:0px;width:40px;' id='sel" + cafd + "'><option value=>⚫</option>" + selbitis + "</select></span>");
    if (aorig == admjk[idmjk].innerHTML && admjk[idmjk].innerHTML.indexOf('er posts') == -1) admjk[idmjk].innerHTML=admjk[idmjk].innerHTML.replace(" ","<span data-alt='" + outs + "' id='spn" + cafd + "' title=\" + Code Download Table\" onclick=\"if (cafd == cafd) { cafd=" + cafd + "; changeasfordownload(); } else { window.open('" + outs + "','_blank','top=100,left=100,width=500,height=500'); } return false; \"><select onchange=\" if (this.value.length > 0) { window.open(this.value,'_blank'); } return false; \" style='margin-bottom:0px;width:40px;' id='sel" + cafd + "'><option value=>⚪</option>" + selbitis + "</select></span>");
    cafd++;
    } else if ((admjk[idmjk].innerHTML.indexOf('live run') != -1 || admjk[idmjk].title.toLowerCase().indexOf('click picture') != -1) && origcafd < 0) { //!cafd) {
    outs="//www.rjmprogramming.com.au/slideshow.html#tuts";
    admjk[idmjk].innerHTML=admjk[idmjk].innerHTML.replace(" ","<span data-alt='" + outs + "' id='spn" + cafd + "' title=\" + Cut to the Chase ... see the blog post list related to live runs and slideshows ... ie. the main point of the blog posting\" onclick=\"if (cafd == cafd) { cafd=" + cafd + "; changeasfordownload(); } else { window.open('" + outs + "','_blank','top=100,left=100,width=650,height=100'); } return false; \">✂</span>");
    cafd++;
    }
    }
    }

    ?>
    … to, depending on whether the user specifies in the “All Posts” toggling’s Javascript prompt window presented, specifies a new comma separated “client folder of interest to copy to” place (stored in window.localStorage), will …

    1. download with the GETME to the Downloads folder and copy off to the specified folder of interest (backing up as necessary) … versus …
    2. the default download mode downloads to the Downloads folder without the GETME parts

See these changes in action below, contextualizing “server” and “client” codes in the full picture of assisted Downloads (copied on to a folder of the user’s interest) …

Previous relevant Download and Copy or Move Primer Tutorial is shown below.

Download and Copy or Move Primer Tutorial

Download and Copy or Move Primer Tutorial

Downloading from “the net” (“server land”) to your computer or device (“client land”) is a big part of the online experience and the sharing of data over the world wide web. But have you ever wondered about the two step design of …

  1. download from “the net” to a Downloads folder on your computer or device … and more often than not …
  2. you, the user, copies or renames this data to another location on your computer or device with command line or with operating system GUI

… ? Why not allow the “server” side define where it can download to on the “client”? Well, that would be a security nightmare, allowing a highjacking of mission critical files on your computer or device. So, I get it, that is a “no no”. But could we have a controlled “arrangement” between …

… ? We think that sounds reasonable and so, today, we start our (two parts or more) mini-project (making step 2 above be considered to be programmatically handled, sometimes) designing a Korn Shell (“client” side) listener to suit our macOS “client” computer, executed as a background process via …


ksh download_copier.ksh &

But what is the conduit, if the “server” web applications/pages cannot define a destination folder other than the macOS Downloads folder for the user involved? Well, that is where we need either …

… to define a “client land” folder to copy to (from the user’s Download folder (receiving the downloaded data).

That first Korn Shell read command interactive input was interesting to us for a command backgrounded via the “&” command suffix. But if stdin and stdout are not mentioned in the command you can answer this interactive input and then the processing the Korn Shell performs proceeds in the background. Exactly what we were hoping for, but weren’t sure that this was the case!

The picture is filled in better tomorrow as we discuss the conduit in more detail tomorrow.

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.

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 eLearning, Operating System, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

GraphViz via PHP on AlmaLinux New Temporary Folder Tutorial

Posted on by
GraphViz via PHP on AlmaLinux New Temporary Folder Tutorial

GraphViz via PHP on AlmaLinux New Temporary Folder Tutorial

Today we’re revisiting the PHP web application calls Python via GraphViz themes last talked about with …

… to “move on” further regarding what might be a long running project we have around here with several PHP hosts Python web applications.

As an alternative to /tmp/ we’ve come up with, in PHP talk …

<?php

$tprefix=$_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . 'tmp' . DIRECTORY_SEPARATOR; // used to be '/tmp/'

?>

… paradigm instead. That way, when in the past the GraphViz dot means by which action was prepared into Korn Shell scripts no longer has to wait for crontab “root” application, but now

<?php

file_put_contents($prefix . 'twopi_vs_circo_' . $suffix . '.ksh', "#!/bin/ksh\n/usr/bin/" . $verb . $switch . " " . $tprefix . "twopi_vs_circo_" . $suffix . "." . $codeext . $codeafters . " 2>> " . $prefix . "twopi_vs_circo.bad \nsleep 5\n\n/usr/bin/" .$verb . $switch . $tprefix . "twopi_vs_circo_" . $suffix . "." . $codeext . $codeafters . " 2>> " . $prefix . "twopi_vs_circo.bad \n\nrm -f " . $tprefix . "twopi_vs_circo_" . $suffix . "." . $codeext . " \nrm -f " . $prefix . "twopi_vs_circo_" . $suffix . ".ksh \nexit");
file_put_contents($prefix . 'twopi_vs_circo0_' . $suffix . '.ksh', "#!/bin/ksh\n/usr/bin/" . $verb . $switch . " " . $tprefix . "twopi_vs_circo_" . $suffix . "." . $codeext . $codeafters . " 2>> " . $prefix . "twopi_vs_circo.bad \nsleep 5\n\n/usr/bin/" .$verb . $switch . $tprefix . "twopi_vs_circo_" . $suffix . "." . $codeext . $codeafters . " 2>> " . $prefix . "twopi_vs_circo.bad \n\nrm -f " . $tprefix . "twopi_vs_circo_" . $suffix . "." . $codeext . " \nrm -f " . $prefix . "twopi_vs_circo_" . $suffix . ".ksh \nexit");
exec('chmod 777 ' . $prefix . 'twopi_vs_circo_' . $suffix . '.ksh');
exec('ksh ' . $prefix . 'twopi_vs_circo_' . $suffix . '.ksh');
exec('chown root ' . $prefix . 'twopi_vs_circo_' . $suffix . '.ksh');
exec('chgrp root ' . $prefix . 'twopi_vs_circo_' . $suffix . '.ksh');
while (file_exists($prefix . 'twopi_vs_circo_' . $suffix . '.ksh')) {
sleep(10);
}

?>

… can be attempted straight away. In that way, this “new place to read and write temporarily” is a boon, in the tweaked twopi_vs_circo_example.php PHP hosting Dot most recent go Circular Layout web application.

Previous relevant Ffmpeg Interfacing Intranet Feeling New Temporary Folder Tutorial is shown below.

Ffmpeg Interfacing Intranet Feeling New Temporary Folder Tutorial

Ffmpeg Interfacing Intranet Feeling New Temporary Folder Tutorial

Onto yesterday’s Ffmpeg Interfacing Intranet Feeling Tutorial today’s work moving forward is to change references to temporary folder …


/tmp/

.. to …


the folder above the Apache Document Root folder

… because …

  1. it can be read and written to by the RJM Programming web server username … and yet …
  2. cannot be referenced by users surfing the net … being lower down the directory tree than the /home/rjmprogr/public_html which corresponds to our Apache Document Root folder
  3. it can be read and written to by the cPanel username … meaning …
  4. our web server’s main functioning crontab scheduling can reference it, like with yesterday’s New Temporary Folder Arrangements Tidying Tutorial

… in the downloadable a tweaked macos_ffmpeg_convert.php works Ffmpeg Converter Tool PHP web application.

Previous relevant Ffmpeg Interfacing Intranet Feeling Tutorial is shown below.

Ffmpeg Interfacing Intranet Feeling Tutorial

Ffmpeg Interfacing Intranet Feeling Tutorial

Today, onto the recent Ffmpeg User Defined Video Editing Crontab Assisted Sharing Tutorial, as far as interfacing to the great ffmpeg video editing software goes …

  • we start, in the work today, calling any existant macOS installed …
    1. ffmpeg
    2. downloaded macos_ffmpeg_convert.php placed into a macOS MAMP local Apache web server port 8888 Document Root folder
  • fix /tmp/ usage as flagged in the blog posting New Temporary Folder Arrangements PHP Primer Tutorial
  • whatever else that becomes an issue or can be an improvement

… in a new makeover operation.

What did we discover today? We think, perhaps, the “named iframe element called by second parameter of window.open” may not be an approach we can take on this makeover, perhaps because HTML content gets into the mix, whereas with the Talking Select Multiple Webpage Palette Speech Bubble Tutorial threads, “the content” has no HTML, just PHP calling the operating system via the macOS “say” command … unless tomorrow reveals today’s folly … that is?!

We can still use window.open second parameter “_blank” and third parameter “positioning” scenarios, though, as how we leave today’s machinations within a tweaked macos_ffmpeg_convert.php works Ffmpeg Converter Tool PHP web application.

Previous relevant Ffmpeg User Defined Video Editing Crontab Assisted Sharing Tutorial is shown below.

Ffmpeg User Defined Video Editing Crontab Assisted Sharing Tutorial

Ffmpeg User Defined Video Editing Crontab Assisted Sharing Tutorial

In yesterday’s Ffmpeg User Defined Video Editing Sharing Tutorial about sharing video data (that might have been edited by ffmpeg command line means) we warned …

even though it is only likely to work for shorter videos

… regarding the data URI hashtagged parts to SMS or email links that we were exclusively using … then. But, with this in mind, what do …

  1. data URI based URLs (hashtagged in an email or SMS link) … and …
  2. absolute URL that points to a web server soft link file, itself pointing to /tmp/ video data files ((we’re still hashtagging, but now, don’t really have to, apply) in an email or SMS link)

… share? We’d say, as far as sharing goes …

A sense of permanency.

But …

  • the second one does not “push the barrow” as much as the first regarding the amount of data … whereas …
  • the first is totally ephemeral and not asking anything more of the web server (ie. the RJM Programming associated one) regarding ongoing storage but is asking a lot of web browsers and client mail applications in the case of video data of any bulk

In terms of sharing videos of any bulk, we’re now, with our web application …

  • renaming the top button (that used to be “Display”) as “Display for a Day” and applying absolute URL (that point at web server soft links that, in turn, point at what can be sizeable video data files that might hang around in RJM Programming domain associated web server /tmp/ location) logics which call on “crontab” … (

    */53 * * * * /etc/init.d/every_hour.sh

    … now mentions …

    ksh -c 'for i in `find /tmp -name "my_video_*.*" -mmin -1440`; do rm -f $i; done'

    ) … assistance to do with the tidy up we feel we need to do on the web server so that large files do not hang around forever (and as you might surmise, at most a day, regarding the bulk of data requirements that are temporarily stored in /tmp/ locations with user associated IP addresses part of the file naming paradigm) … whereas …
  • the bottom button remains as “Display” and still uses data URI based logic

… so that these bulky videos can be successfully shared (via clicks of that “Display for a Day” button) as long as the email or SMS link is attended to by the collaboration recipient within those 24 hours, further to yesterday’s Ffmpeg User Defined Video Editing Sharing Tutorial.

As well, today, as a genericization measure, we stop seeing govetts_leap in any video file naming, replaced by my_video now that the input video control has become less rigid, and now can be controlled, to some extent, by the user in our changed fourth draft of Your Own Ffmpeg Video Changes, which can be that much more useful in a new way in the AlmaLinux web server environment.

Previous relevant Ffmpeg User Defined Video Editing Sharing Tutorial is shown below.

Ffmpeg User Defined Video Editing Sharing Tutorial

Ffmpeg User Defined Video Editing Sharing Tutorial

Sharing options for video based data are often more restrictive regarding email and SMS conduits, but we’ll still go ahead with a …

  • “a” link “mailto:” (for emails) or “sms:” (for SMS) methodology …
  • email subject containing ffmpeg command used for an output video mode of sharing … or …
  • input video mode of sharing before any ffmpeg involvement … based on …
  • email or SMS links where the video data URI (as necessary) is hashtagged

… set of ideas to try out, even though it is only likely to work for shorter videos. The other more obvious sharing mechanism is to download video data via right click options the web browser product you are using offers anyway. And another sharing idea, independent, and working for input videos is to browse for a video using the helper web application from yesterday, and use its Share API based button below the browsing button to share that input video using one of …

  • Mail
  • Messages
  • AirDrop
  • Notes
  • Simulator
  • Freeform

… on our macOS Safari web browser here on a MacBook Air.

Further to yesterday’s Ffmpeg User Defined Browsed Video Editing Tutorial, then, we have some new (PHP writes) Javascript functions …

<?php echo ”

function smsit() {
var smsno=prompt('Please enter SMS number.', '');
if (smsno != null) {
if (document.getElementById('cto').title.indexOf('data:') == 0) {
document.getElementById('asms').href='sms:' + smsno + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#vcont=' + document.getElementById('cto').title);
} else {
document.getElementById('asms').href='sms:' + smsno + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#vcont=' + document.getElementById('resultav').value);
}
document.getElementById('asms').click();
}
}


function emailit() {
var emailaddr=prompt('Please enter Email address.', '');
if (emailaddr != null) {
if (document.getElementById('cto').title.indexOf('data:') == 0) {
document.getElementById('aemail').href='mailto:' + emailaddr + '?subject=Ffmpeg%20Video' + encodeURIComponent(' ... ' + document.getElementById('mysubtwo').value.replace(/^Display$/g,'')) + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#vcont=' + document.getElementById('cto').title);
} else {
document.getElementById('aemail').href='mailto:' + emailaddr + '?subject=Ffmpeg%20Video' + encodeURIComponent(' ... ' + document.getElementById('mysubtwo').value.replace(/^Display$/g,'')) + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#vcont=' + document.getElementById('resultav').value);
}
document.getElementById('aemail').click();
}
}

function documentgetElementByIdmysubpclick() { // new arrangement for the programmatic click of form submit button
if (eval('' + document.getElementById('resultav').value.length) < 300) {
document.getElementById('myiftwo').src=document.URL.split('?')[0].split('#')[0] + '?becomes=' + encodeURIComponent(document.getElementById('becomes').value) + '&browsed=' + encodeURIComponent(document.getElementById('resultav').value);
} else {
document.getElementById('mysubp').click();
}
}

“; ?>

… in our changed third draft of Your Own Ffmpeg Video Changes, which can be that much more useful in a new way in the AlmaLinux web server environment.

Previous relevant Ffmpeg User Defined Browsed Video Editing Tutorial is shown below.

Ffmpeg User Defined Browsed Video Editing Tutorial

Ffmpeg User Defined Browsed Video Editing Tutorial

Today’s work, onto yesterday’s Ffmpeg User Defined Video Editing Tutorial, is to loosen the restrictions regarding “input video file source” we had happening in that “first draft” incarnation of our Ffmpeg User Defined Video Editing web application.

In order to achieve this, we called on a previous Ffmpeg Install and Public Face Tutorial inspired change to our inhouse macos_ffmpeg_convert.php PHP web application, which can serve as our conduit to either/or …

  • browse for a video file off the user local operating system environment … or …
  • path to a web server placed video file … or …
  • URL to a video file

… extra means by which the user can define the “input video file source” that we’re loosening the shackles regarding usage.

To do this, we look for user actions (via PHP writing out Javascript) …

<?php echo ”

var lastpathc='';
var lastopathc='';
var lastvidc='';
var lastvalue='.m4v';
var exactvalue='';
var vext='.mp4';

function lookfor() {
vext='.mp4';
var thisext='';
if (document.getElementById('opath').value != '') {
if (lastopathc != document.getElementById('opath').value && document.getElementById('opath').title != document.getElementById('opath').value) {
lastopathc=document.getElementById('opath').value;
}
}
if (document.getElementById('path').value != '') {
if (lastpathc != document.getElementById('path').value) {
lastpathc=document.getElementById('path').value;
if (lastopathc == ' ') { lastopathc=document.getElementById('opath').value; }
}
}
if (lastopathc.trim() != '') {
thisext=(lastopathc + '.').split('.')[1].split('.')[0].trim();
if (thisext != '') {
document.getElementById('opath').title=lastopathc;
document.getElementById('path').title='video/' + thisext + ';' + lastpathc + lastopathc;
document.getElementById('resultav').value=lastpathc + lastopathc;
lastopathc=' ';
}
}
if (document.getElementById('resultav').value != '') {
if (lastvidc != document.getElementById('resultav').value) {
if ((document.getElementById('path').title + document.getElementById('resultav').value).indexOf('video/') != -1) {
if (document.getElementById('ifbrowse').src.indexOf('=') != -1) {
document.getElementById('myaltin').value=decodeURIComponent(document.getElementById('ifbrowse').src.split('=')[1].split('&')[0].split('#')[0]);
}
if ((document.getElementById('path').title + document.getElementById('resultav').value).indexOf('video/') != -1) {
if (vext.indexOf((document.getElementById('path').title + document.getElementById('resultav').value).split('video/')[1].split(';')[0].split(',')[0]) == -1) {
vext='.' + document.getElementById('resultav').value.split('video/')[1].split(';')[0].split(',')[0];
document.getElementById('myaltin').value=document.getElementById('myaltin').value.split('.')[0] + vext;
document.getElementById('becomes').value=document.getElementById('becomes').value.split('.')[0] + vext;
}
}
lastvidc=document.getElementById('resultav').value;
document.getElementById('resultav').title='rework';
document.getElementById('mysubp').click();
setTimeout(function(){
if (1 == 1) {
document.getElementById('divvid').innerHTML=\"<video id=myinvideo style=width:95%; controls><source id=myinsource type='video/\" + vext.substring(1) + \"' src='\" + document.getElementById('resultav').value + \"'></source></video>\";
} else {
document.getElementById('myinsource').src=document.getElementById('resultav').value;
}
}, 2000);
//setTimeout(function(){
//document.getElementById('resultav').value='';
//}, 20000);
//alert(lastvidc);
setTimeout(lookfor, 23000);
return '';
}
setTimeout(lookfor, 3000);
return '';
}
}
setTimeout(lookfor, 3000);
return '';
}

setTimeout(lookfor, 3000);

“; ?>

… and then arrange the /tmp/ placed temporary video data via …

<?php

if (isset($_POST['browsed']) && isset($_POST['becomes'])) {
$fgccont='';
//file_put_contents('xzm.xzm', '1');
$outtmpfile=str_replace('+',' ',urldecode($_POST['becomes']));
//file_put_contents('xzm2.xzm2', $outtmpfile);
$outext=explode('.', $outtmpfile)[-1 + sizeof(explode('.', $outtmpfile))];
//file_put_contents('xzm3.xzm3', str_replace(' ','+',urldecode($_POST['browsed'])));
if (strpos(('xwq' . $_POST['browsed']), 'xwqdata') !== false) {
file_put_contents(str_replace('+',' ',urldecode($_POST['becomes'])), base64_decode(explode(";base64,", str_replace(' ','+',urldecode($_POST['browsed'])))[1]));
} else if (strpos(('xwq' . strtolower($_POST['browsed'])), 'xwqhttps') !== false) {
$fgccont=file_get_contents('http' . substr(str_replace('+',' ',urldecode($_POST['browsed'])),5));
if (trim($fgccont) != '') {
file_put_contents(str_replace('+',' ',urldecode($_POST['becomes'])), $fgccont);
}
} else if (strpos(('xwq' . strtolower($_POST['browsed'])), 'xwqhttp') !== false) {
$fgccont=file_get_contents('http' . substr(str_replace('+',' ',urldecode($_POST['browsed'])),4));
if (trim($fgccont) != '') {
file_put_contents(str_replace('+',' ',urldecode($_POST['becomes'])), $fgccont);
}
} else if (strpos(('xwq' . strtolower(str_replace('+',' ',urldecode($_POST['browsed'])))), 'xwq//') !== false) {
$fgccont=file_get_contents('http:' . substr(str_replace('+',' ',urldecode($_POST['browsed'])),0));
if (trim($fgccont) != '') {
file_put_contents(str_replace('+',' ',urldecode($_POST['becomes'])), $fgccont);
}
} else if (strpos(('xwq' . strtolower(str_replace('+',' ',urldecode($_POST['browsed'])))), 'xwqwww.') !== false) {
$fgccont=file_get_contents('http://' . substr(str_replace('+',' ',urldecode($_POST['browsed'])),0));
if (trim($fgccont) != '') {
file_put_contents(str_replace('+',' ',urldecode($_POST['becomes'])), $fgccont);
}
} else if (file_exists(str_replace('+',' ',urldecode($_POST['browsed'])))) {
file_put_contents(str_replace('+',' ',urldecode($_POST['becomes'])), file_get_contents(str_replace('+',' ',urldecode($_POST['browsed']))));
}
//file_put_contents('xzm4.xzm4', explode(";base64,", str_replace(' ','+',urldecode($_POST['browsed'])))[1]);
exit;
}

?>

… all the while being helped out by a tweaked macos_ffmpeg_convert.php works Ffmpeg Converter Tool PHP web application helper to our changed second draft of Your Own Ffmpeg Video Changes, which can be that much more useful in a new way in the AlmaLinux web server environment.

Previous relevant Ffmpeg User Defined Video Editing Tutorial is shown below.

Ffmpeg User Defined Video Editing Tutorial

Ffmpeg User Defined Video Editing Tutorial

Today we’re combining video contents from …

  • yesterday’s Ffmpeg Helps iPhone Video to YouTube Tutorial … with …
  • our newly created public interface to ffmpeg with the “soon to be DNS version of rjmprogramming.com.au … but not yet” AlmaLinux Apache/PHP/MySql web server install we talked about at Ffmpeg Install and Public Face Tutorial … and …
  • IP address redirecting, as needed, ifconfig (via PHP shell_exec and $_SERVER[‘SERVER_ADDR’]) based logic …
    <?php

    $whereplace=shell_exec("ifconfig | grep -Eo 'inet (addr:)?([0-9]*\.){3}[0-9]*' | grep -Eo '([0-9]*\.){3}[0-9]*' | grep -v '127.0.0.1'");
    if (strpos(($whereplace . ' ' . $_SERVER['SERVER_ADDR']), '65.254.92.213') !== false) {
    $sv='/usr/bin/ffmpeg';
    header('Location: https://65.254.95.247/PHP/tmp_ffmpeg.php'); //$smallpath='https://65.254.95.247/PHP/'; //header('Location: https://65.254.95.247/PHP/tmp_ffmpeg.php');
    exit; //exit;
    }

    ?>
    … we talked about at AlmaLinux Landing Page WordPress Content Update Solution Tutorial … as well as …
  • user definable form navigation … using …
  • optional dropdown ideas incorporating ideas from Sepia Video via ffmpeg Primer Tutorial … and using …
  • temporary storage places to place output video … and making use of …
  • soft links regarding URLs we talked about at Linux Web Server Soft Link URL Tutorial (saving us having to use ‘data:video/mp4;base64,’ . base64_encode(file_get_contents(trim($endout))) style PHP interventions (which were testing friendships))

… to start down this road towards public facing ffmpeg video editing around here (which we have been hankering for for several years now).

In this first draft of Your Own Ffmpeg Video Changes (via command line ffmpeg) we’re really buttoning down (via not allowing the forward slash character in amongst the user defined ffmpeg command innards) what happens regarding …

  • output video file source location … and …
  • input video file source …

… but who knows what the future holds?!

Previous relevant Ffmpeg Helps iPhone Video to YouTube Tutorial is shown below.

Ffmpeg Helps iPhone Video to YouTube Tutorial

Ffmpeg Helps iPhone Video to YouTube Tutorial

Today we recorded a video looking out from Govetts Leap, Blackheath, here in the Blue Mountains. We captured it via the Camera app on an iPhone via its Video option.

Nineteen seconds long, to share to this MacBook Air we needed AirDrop, the size of it precluding us from using the Photo app’s Mail sharing option.

And that’s where we wanted to use the great ffmpeg in an optimal way to create a video that we could upload to YouTube. In this, we arrived at this excellent link getting us to try …


ffmpeg -i govetts_leap.MOV -c:v libx264 -preset slow -crf 18 -vf scale=out_color_matrix=bt709 -color_primaries bt709 -color_trc bt709 -colorspace bt709 -c:a aac -ar 48000 -ac 2 -b:a 320k -profile:v high -level 4.0 -bf 2 -coder 1 -pix_fmt yuv420p -b:v 10M -threads 4 -cpu-used 0 -r 30 -g 15 -movflags +faststart govetts_leap.mp4

… with success. Checking with this other excellent link, thanks, we were comforted that they would have recommended an output mp4 file format as well, it seems …

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 eLearning, GUI, Tutorials | Tagged , , , , , , , , , , , , , , , , | Leave a comment

Canvas Methods GetContext Method Tutorial

Posted on by
Canvas Methods GetContext Method Tutorial

Canvas Methods GetContext Method Tutorial

A lot of canvas element Javascript coding, we find, starts something like …


var cnv=document.getElementById("mycanvas");
var ctx=cnv.getContext("2d");

… because we normally associate the canvas element with a 2 dimensional woooooooorrrrrrlllllldddd view, as with the recent Canvas Methods ToDataURL Method Tutorial. But lots of browsers do support 3 dimensional graphics Javascript logic involving WebGL (Web Graphics Library) API you can read more about here. And where that is established for the canvas element is via the getContext method first argument not being “2d” but rather in amongst …

“2d”
Creates a CanvasRenderingContext2D object representing a two-dimensional rendering context.

“webgl” (or “experimental-webgl”)
Creates a WebGLRenderingContext object representing a three-dimensional rendering context. This context is only available on browsers that implement WebGL version 1 (OpenGL ES 2.0).

“webgl2”
Creates a WebGL2RenderingContext object representing a three-dimensional rendering context. This context is only available on browsers that implement WebGL version 2 (OpenGL ES 3.0).

“webgpu”
Creates a GPUCanvasContext object representing a three-dimensional rendering context for WebGPU render pipelines. This context is only available on browsers that implement The WebGPU API.

“bitmaprenderer”
Creates an ImageBitmapRenderingContext which only provides functionality to replace the content of the canvas with a given ImageBitmap.

We’ve talked about WebGL in the past, which you can read about with WebGL Google Chrome Configuration Issue Tutorial, when this great link pointed us to clever external Javascript resources used to construct today’s changed webgl_test.html WebGL usage web application which is, as of today, hosted within an HTML iframe, to be the chance for the user to see some of this …

  • canvas
  • WebGL API

… graphics combination in 3D action, within the changed svg_to_canvas.html “what we’ll call” Canvas Showcase web application you can also try below.

Previous relevant Canvas Methods ToDataURL Method Tutorial is shown below.

Canvas Methods ToDataURL Method Tutorial

Canvas Methods ToDataURL Method Tutorial

The recent Canvas Methods DrawImage Method Tutorial‘s …

  • [canvasContext].drawImage method user forms … is joined today by the very useful
  • [canvas].toDataURL method user forms …

… as a means by which those “platform independent” (but sizeable) data URI representations of graphical data can be created.

We often use the image/jpeg option with a quality second argument less than one to reduce data sizes here.

Also, today, we allow users to browse for or specify URLs pointing to video data, as well as the image data means by which drawImage‘s first argument can be designated with the changed svg_to_canvas.html “what we’ll call” Canvas Showcase web application you can also try below.

Previous relevant Canvas Methods DrawImage Method Tutorial is shown below.

Canvas Methods DrawImage Method Tutorial

Canvas Methods DrawImage Method Tutorial

Today we’re completing our HTML5 canvas [canvasContext].drawImage method started recently with Canvas Methods Revisit Tutorial where we had a start using …

  1. Positioning … via 3 arguments …

    [canvasContext].drawImage([inObjectThatSuits], [X co-ordinate], [Y co-ordinate]);

    … today we add …
  2. Positioning and Scaling … via 5 arguments …

    [canvasContext].drawImage([inObjectThatSuits], [X co-ordinate], [Y co-ordinate], [Width], [Height]);
  3. Slicing and Scaling and Cropping … via 9 arguments …

    [canvasContext].drawImage([inObjectThatSuits], [X co-ordinate], [Y co-ordinate], [ClippedWidth], [ClippedHeight], [Final X co-ordinate], [Final Y co-ordinate], [FinalWidth], [FinalHeight]);

So feel free to have a go yourself with the changed svg_to_canvas.html “what we’ll call” Canvas Showcase web application you can also try below.

Previous relevant Canvas Methods Revisit Tutorial is shown below.

Canvas Methods Revisit Tutorial

Canvas Methods Revisit Tutorial

When we started being “blown away” by the potential of the HTML5 canvas element coming into play quite some time ago now, it was a bit like …

Wow!! But where to start?

… and due to our naivety we were not in a position back then to break down what was “cut through” (or not that practical, perhaps) about the canvas element “methods” with any authority. Over the years, though, we are more equipped, so what we are setting out to do is …

  • start with, though written a while ago, still to this day, feels like an advanced canvas application (as explained at Canvas DrawImage First Parameter Primer Tutorial) involving video elements (ie. we got a lot of help, thanks all) … and use this template …
  • to work it the other way (via new dropdown elements), building on “what you might aspire to if you are a beginner with the canvas element” and display new options to emphasise the huuuuuuuuuuuuugely valuable canvas methods out there (yes, OOP methods, not functions, as such)

The first cab off the rank here is the …


[canvasContext].drawImage([inObjectThatSuits], [X co-ordinate], [Y co-ordinate]);

… simplest usage of that drawImage method (in “OOP land” this 3 argument call can be thought of as “not the same logic” as (what we are going to get to later, for example) a 9 argument call). A form is presented here, and you, the user, can see the effects of controlling the 3 arguments (and you’ll notice “no truck” is given to any 5 minute? arguments here).

Feel free to have a go yourself with the changed svg_to_canvas.html “what we’ll call” Canvas Showcase web application you can also try below …

Previous relevant Canvas DrawImage First Parameter Primer Tutorial is shown below.

Canvas DrawImage First Parameter Primer Tutorial

Canvas DrawImage First Parameter Primer Tutorial

Some time ago we presented a short tutorial about a great online product addressing a big area of interest to online users … online meetings. We showcased the great GoToMeeting, with GoToMeeting Primer Tutorial, and we remember using it to good effect among …

  • installing software remotely
  • diagnosing software and hardware issues remotely
  • discussing issues remotely
  • client liaison remotely

… at a job involving EDI solutions with SAP Business One and Accpac. But that is just the subject matter basis here. Today we really want to use some media from that subject matter basis and use it’s video media as the first argument to the wonderful, the stupendous Canvas drawImage() Method, specifically its fascinating first parameter …

Syntax
Position the image on the canvas:

context.drawImage(img, x, y)
Position the image on the canvas, and specify width and height of the image:

context.drawImage(img, x, y, width, height)
Clip the image and position the clipped part on the canvas:

context.drawImage(img, sx, sy, swidth, sheight, x, y, width, height)

Don’t be fooled! It is a method offering, thanks, so much more that just an …

el interface intrinsicHeight(el) intrinsicWidth(el)
HTMLImageElement el.naturalWidth el.naturalHeight
SVGImageElement el.[… special case] el.[… special case]
HTMLVideoElement el.videoWidth el.videoHeight
HTMLCanvasElement el.width el.height
ImageBitmap el.width el.height
OffscreenCanvas el.width el.height

… but whaaaaatttttt?! What happens here assigning a video object as a first parameter to the canvas (context)’s drawImage method? It takes a snapshot image of the slide of the playing (and if not, the first image of that) video! That means, couch that in a codeline like …


setInterval(function(){ ctx.drawImage(ovid, 800, 0); }, 100);

… at the right time, and you can be playing a video into the canvas! Yay!!! Actually, we’ve done this before, and, call us innocents if you like, but this gave us the same thrill then, thanks to all the online contributors regarding heads up ideas here.

But we are “value adding” today. It hadn’t occurred to us that we could do this video to the right of the canvas and dedicate the left side to captions, and that over there, there was enough room to show the “whole blurb” … and nothing but the blurb, and that if we use …

  • HTML video element attribute … autostart=true
  • HTML video element attribute … autoplay=true
  • HTML video element attribute … loop=true

… even if they do not work right from the document.body onload event time, once the video play button is clicked, we could do without the actual video from then on, perhaps (we’ve allowed you to resurrect the video display, and have more work into the future, maybe, regarding the repercussions of this … we’ll see?!).

What form of caption source did we use? We happened to have a “.srt” format WebVTT file pertinent to the GoToMeeting video hanging about, and so we shoved it into the innards of an HTML textarea element, and coded it from there …


<html>
<head>
<title>SVG to Canvas - RJM Programming - May, 2024 ... thanks to https://jsfiddle.net/Na6X5/</title>
<style>
canvas {
border: 1px solid gray;
}
</style>
<script type='text/javascript'>
var divstrc='';
var timings=[];
var times=[];
var tstimes=[];
var blurbs=[];
var cf = "12px Verdana";
var thisy=20, thisi=0, thisc=0;
var can=null, ctx=null;
var collist=['black','blue','purple','magenta','darkred','darkgreen'];
var lenc=eval('' + collist.length);
var oppmode='none';

function tanal(intr) {
var pts=intr.split(':');
console.log(intr);
tstimes.push(eval(eval(pts[0] * 60 * 60 * 1000) + eval(pts[1] * 60 * 1000) + eval(pts[2] * 1000)));
return intr;
}

function onl() {
can = document.getElementById('canvas1');
ctx = can.getContext('2d');

var svg = document.getElementById('simage');
var oimg = document.getElementById('simg');
var ovid = document.getElementById('myvd');

divstrc=document.getElementById('divsrt').value;
timings=divstrc.split(' --> ');
//alert(timings.length);
times.push(tanal(timings[0].slice(-13).trim()));
for (var ii=1; ii<timings.length; ii++) {
if (1 == 2) { times.push(tanal(timings[ii].substring(0,13).trim())); }
if (eval(1 + ii) != eval('' + timings.length)) {
times.push(tanal(timings[ii].slice(-13).trim()));
} else {
times.push(tanal(timings[ii].substring(0,13).trim()));
}
blurbs.push(timings[ii].split(String.fromCharCode(10))[1]);
}

console.log(blurbs);
console.log(tstimes);

var img = new Image();
img.onload = function() {
//ctx.drawImage(svg, 0, 0);
//ctx.drawImage(img, 200, 0);
//ctx.drawImage(oimg, 400, 0);
//ovid.play();
setInterval(function(){ ctx.drawImage(ovid, 800, 0); }, 100);
}
//img.src = "http://upload.wikimedia.org/wikipedia/commons/d/d2/Svg_example_square.svg";
//img.src = "/hexagon.svg";
//img.src = "/homecircle.svg";
img.src=oimg.src;
}

function dotext() {
if (eval(1 + thisi) >= eval('' + tstimes.length)) {
thisc++;
if (thisc >= eval('' + collist.length)) {
collist.push(collist[eval(thisc % lenc)]);
}
return loadsrt('');
}
setTimeout(dotext, eval(tstimes[eval(1 + thisi)] - tstimes[eval(0 + thisi)]));
ctx.font = cf;
ctx.strokeStyle=collist[thisc];
ctx.strokeText(blurbs[thisi],20,thisy);
thisy+=15;
thisi++;
}

function loadsrt(dsp) {
thisi=0;
thisy=20;
setTimeout(dotext, tstimes[0]);
if (dsp != '') {
document.getElementById('mysummary').innerHTML='Please click to toggle video display ...';
}
return dsp;
}
</script>
</head>
<body onload="onl();">
<canvas style='background-color:yellow;' id="canvas1" width="1400" height="400"></canvas>

<div id=previd style="display:none;">
<svg id="mySVG" xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect width="150" height="150" fill="rgb(0, 255, 0)" stroke-width="1" stroke="rgb(0, 0, 0)"/>
</svg>

<svg id="mySVGimage" width="300" height="300" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" version="1.1">
<image id=simage href="/hexagon.svg" height="300" width="300" />
</svg>

<img id=simg src='data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve" height="100px" width="100px">
<g>
<path d="M28.1,36.6c4.6,1.9,12.2,1.6,20.9,1.1c8.9-0.4,19-0.9,28.9,0.9c6.3,1.2,11.9,3.1,16.8,6c-1.5-12.2-7.9-23.7-18.6-31.3 c-4.9-0.2-9.9,0.3-14.8,1.4C47.8,17.9,36.2,25.6,28.1,36.6z"/>
<path d="M70.3,9.8C57.5,3.4,42.8,3.6,30.5,9.5c-3,6-8.4,19.6-5.3,24.9c8.6-11.7,20.9-19.8,35.2-23.1C63.7,10.5,67,10,70.3,9.8z"/>
<path d="M16.5,51.3c0.6-1.7,1.2-3.4,2-5.1c-3.8-3.4-7.5-7-11-10.8c-2.1,6.1-2.8,12.5-2.3,18.7C9.6,51.1,13.4,50.2,16.5,51.3z"/>
<path d="M9,31.6c3.5,3.9,7.2,7.6,11.1,11.1c0.8-1.6,1.7-3.1,2.6-4.6c0.1-0.2,0.3-0.4,0.4-0.6c-2.9-3.3-3.1-9.2-0.6-17.6 c0.8-2.7,1.8-5.3,2.7-7.4c-5.2,3.4-9.8,8-13.3,13.7C10.8,27.9,9.8,29.7,9,31.6z"/>
<path d="M15.4,54.7c-2.6-1-6.1,0.7-9.7,3.4c1.2,6.6,3.9,13,8,18.5C13,69.3,13.5,61.8,15.4,54.7z"/>
<path d="M39.8,57.6C54.3,66.7,70,73,86.5,76.4c0.6-0.8,1.1-1.6,1.7-2.5c4.8-7.7,7-16.3,6.8-24.8c-13.8-9.3-31.3-8.4-45.8-7.7 c-9.5,0.5-17.8,0.9-23.2-1.7c-0.1,0.1-0.2,0.3-0.3,0.4c-1,1.7-2,3.4-2.9,5.1C28.2,49.7,33.8,53.9,39.8,57.6z"/>
<path d="M26.2,88.2c3.3,2,6.7,3.6,10.2,4.7c-3.5-6.2-6.3-12.6-8.8-18.5c-3.1-7.2-5.8-13.5-9-17.2c-1.9,8-2,16.4-0.3,24.7 C20.6,84.2,23.2,86.3,26.2,88.2z"/>
<path d="M30.9,73c2.9,6.8,6.1,14.4,10.5,21.2c15.6,3,32-2.3,42.6-14.6C67.7,76,52.2,69.6,37.9,60.7C32,57,26.5,53,21.3,48.6 c-0.6,1.5-1.2,3-1.7,4.6C24.1,57.1,27.3,64.5,30.9,73z"/>
</g>
</svg>'></img>
</div>

<details onclick=" document.getElementById('myvd').style.display=oppmode; if (oppmode == 'block') { oppmode='none'; } else { oppmode='block'; }" open><summary id=mysummary>Please click play button below ...</summary>
<video onplay="this.style.display=loadsrt('none');" id=myvd autoplay=true autostart=true loop=true controls><source src='/Mac/GoToMeeting/GoToMeeting.m4v' type='video/mp4'></source></video>
<div id=divhs style=display:inline-block;vertical-align:top;>
<h1>Video and Captions to Canvas</h1>
<h3>RJM Programming - May, 2024</h3>
<h4>Thanks to https://jsfiddle.net/Na6X5/</h4>
</div>
</details>

<textarea id=divsrt style="display:none;">
WEBVTT FILE

1
00:00:00.100 --> 00:00:01.000 D:vertical A:start
Welcome to our GoTo Meeting tutorial ...
{
"title": "GoTo Meeting tutorial image 1 of 5",
"description": "Welcome to our GoTo Meeting tutorial",
"src": "gm1.jpg",
"href": "http://www.rjmprogramming.com.au/PHP/videos"
}

2
00:00:01.000 --> 00:00:04.000
... we've installed GoTo Meeting and started it up. We have done the invite so we will be the "Presenter" ...

3
00:00:04.000 --> 00:00:06.000
... we click "Show My Screen" ...
{
"title": "GoTo Meeting tutorial image 2 of 5",
"description": "Show My Screen",
"src": "gm2.jpg",
"href": "http://www.rjmprogramming.com.au/PHP/videos"
}

4
00:00:06.000 --> 00:00:16.000
... which is enabled because we are the "Presenter". Now lets ready other things ready to make a connection ...

5
00:00:16.000 --> 00:00:22.000
... we click "Show My Webcam" and start Connecting ...
{
"title": "GoTo Meeting tutorial image 3 of 5",
"description": "Show My Webcam",
"src": "gm3.jpg",
"href": "http://www.rjmprogramming.com.au/PHP/videos"
}

6
00:00:22.000 --> 00:00:24.000
... the GoTo Viewer appears showing you a view of the person you are meeting ...

7
00:00:24.000 --> 00:00:26.000
... we have "lift off" ...
{
"title": "GoTo Meeting tutorial image 4 of 5",
"description": "Lift Off",
"src": "gm4.jpg",
"href": "http://www.rjmprogramming.com.au/PHP/videos"
}

8
00:00:26.000 --> 00:00:28.000
... lo and behold, we've called ourself ...

9
00:00:28.000 --> 00:00:32.000
... have a look at us looking at us ...

10
00:00:32.000 --> 00:00:52.000
... but don't let it blow your mind?!
{
"title": "GoTo Meeting tutorial image 5 of 5",
"description": "Don't blow your mind",
"src": "gm5.jpg",
"href": "http://www.rjmprogramming.com.au/PHP/videos"
}

11
00:00:52.000 --> 00:01:34.000
Leaving the GoTo Meeting now. See you again soon.
</textarea>

</body>
</html>

Yes, we started the day with a different idea, and end up where we are at with our first draft proof of concept Video to Canvas web application incarnation … again.

Previous relevant GoToMeeting Primer Tutorial is shown below.

GoToMeeting Primer Tutorial

GoToMeeting Primer Tutorial

Here is a tutorial that introduces you to GoToMeeting. GoToMeeting is a great user-friendly video conferencing software by Citrix.

For simple scenarios I’ve always felt comfortable with GoToMeeting for that video conferencing functionality, or for how I usually used it, remotely testing, troubleshooting and/or installing software on remote client sites. Other choices for all Windows scenarios, here are Remote Desktop, and for mixed scenarios, VNC.

GoToMeeting can work with a phone connection or by using the Microphone and Speakers at both ends of the connection. You can host the meeting or join the meeting, share your keyboard or mouse, share your display via a shared webcam, as necessary, meet straight away, or schedule it, or email an invitation … all in all there is a lot of great functionality. Like with Skype, audio and visual can be considered separate … from our tutorial session here is some audio, and here is some visual (ie. video).

Other such meeting ideas can be accessed via Skype, or WebEx Web Conferencing. All these are great ideas that can save companies lots of money on overseas trips!

Link to GoToMeeting “spiritual home” at GoToMeeting, which is owned by Citrix.

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 eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

Clairvoyance Game Chat Tutorial

Posted on by
Clairvoyance Game Chat Tutorial

Clairvoyance Game Chat Tutorial

Stepping back from the Clairvoyance++ Game project, of recent times, further to the recent Clairvoyance Game IP Address Links Tutorial it occurred to us just this morning how similar …

  • User Questions mode … is to …
  • a Chat web application

… and so we may as well build on the “connection work” already there, and bedded down, to also offer a two user Chat conversation set of functionalities, as a new dropdown option the user can choose.

New ideas are all fine and good, as long as it is not a pain in the neck to organize, fitting in with other dropdown option functionalities, and with this in mind, invented a new argument “itype” value of zero, it not having been used yet, and not interfering with window.localStorage “starting itype value” considerations.

You can try “Chat” as a new option in …

Previous relevant Clairvoyance Game IP Address Links Tutorial is shown below.

Clairvoyance Game IP Address Links Tutorial

Clairvoyance Game IP Address Links Tutorial

We’re not here, today, to in any way criticize the Javascript prompt window, and it’s (harkening back to the desktop application wooooorrrrrllldd in it’s feel) interactive talents, that wee bit removed and independent from webpage goings on. In fact, it is modal (ie. is capable of freezing the Javascript) and this talent needs to be used in the apt place, but is the easiest “modal means” when that is required.

Where it is not as useful, in it’s operating system origins, is it’s lack of colour coding possibilities, and it happens, today, that our work to improve on yesterday’s Clairvoyance Game Textarea Onblur Tutorial regarding creating IP Address Other Player links, can be all the more useful with some colour coding. We have these “colour modes of operation” going, today, as per …

  • IP Address Other Player comma separated links list alternates among …
    1. flash of yellow background on first showing, else white background
    2. blue font … for IP Address of current player … else …
    3. black font … alternating with …
    4. white fonts … shortly after window.prompt answer made … except for …
  • orange background is given to users “just arrived on the scene since last black/blue font incarnation” … and can persist through white fonts and pushed to start of links list

… perhaps helping users “hook up” with other users they are in contact with, and can invite, via these “just logged in” identifications.

Feel free to retry …

Previous relevant Clairvoyance Game Textarea Onblur Tutorial is shown below.

Clairvoyance Game Textarea Onblur Tutorial

Clairvoyance Game Textarea Onblur Tutorial

Further to the day before yesterday’s Clairvoyance Game Element Type Tutorial it’s in that form allowing users to design their own Clairvoyance Game style of game we harness …

the powers of the onblur event

… that great event to intervene with when processing the content of …

  • many input type elements
  • textarea
  • myriad of innerHTML friendly elements involving global attribute contenteditable=true

… via …


<textarea onblur=maybeif(this); title="Double click to populate with default suggestion" ondblclick="this.value=this.placeholder.split(String.fromCharCode(10))[eval(-1 + this.placeholder.split(String.fromCharCode(10)).length)]; document.getElementById('one').value='House'; document.getElementById('two').value='Thing'; " rows=2 style=width:90%; type=text placeholder='Image Map HTML URL eg. https://www.rjmprogramming.com.au/HTMLCSS/livingroom.htm' value='' name=three id=three></textarea><br><span> ... or ...</span><br>
<textarea onblur=numdotsonly(this); title="Double click to populate with default suggestion" ondblclick="this.value=this.placeholder.split(String.fromCharCode(10))[eval(-1 + this.placeholder.split(String.fromCharCode(10)).length)]; document.getElementById('one').value='Counting Number'; document.getElementById('two').value='Number'; " rows=3 style=width:90%; type=text placeholder='Comma separated list of 5 Emoji Decimal HTML Entity Values eg. for Game Name Words value of Counting Number (where . can facilitate complex emojis and the #span creates span elements) could be 49.65039.8419,50.65039.8419,51.65039.8419,52.65039.8419,53.65039.8419#span' value='' name=four id=four></textarea><br><span> ... or ...</span><br>
<textarea onblur=perhapsiframes(this); title="Double click to populate with default suggestion" ondblclick="this.value=this.placeholder.split(String.fromCharCode(10))[eval(-1 + this.placeholder.split(String.fromCharCode(10)).length)]; document.getElementById('one').value='Fish'; document.getElementById('two').value='Fish'; " rows=3 style=width:90%; type=text placeholder='Comma separated list of 5 Image URLs eg. for Game Name Words value of Fish could be //fishesofaustralia.net.au/images/thumbnailimage/NarcetesErimelasAlcock.jpg,//fishesofaustralia.net.au/images/thumbnailimage/LutjansuBengalensisuwkwaj.jpg,//fishesofaustralia.net.au/images/thumbnailimage/GobiodonSpadix2Holotype.jpg,//fishesofaustralia.net.au/images/thumbnailimage/SebastapistesMonospinaRandallHolotype.jpg,//fishesofaustralia.net.au/images/thumbnailimage/AmblyeleotrisBellicaudaRandall.jpg' value='' name=five id=five></textarea><br><br>

… to allow for many more scenarios a user might apply entering in various URLs or text data or hashtagging “switches”, as per …


function perhapsiframes(tao) {
var badcnt=0, compext='', jj=0, potnew='', othercnt=0, otherthing='';
if (tao.value != '') {
var ims=tao.value.split('#');
if (eval('' + ims.length) < 2) {
potnew=tao.value + '#iframe';
var intrms=ims[0].replace(/\;base64\,/g,';base64c').replace(/\;utf8\,/g,';utf8c').split(',');
for (jj=0; jj<intrms.length; jj++) {
intrms[jj]=intrms[jj].replace(';base64c',';base64,').replace(';utf8c',';utf8,')
if (intrms[jj].indexOf('data:') == 0) {
if (intrms[jj].indexOf('data:image/') == -1) {
badcnt++;
if (jj == 0) {
otherthing=intrms[jj].split('data:')[1].split('/')[0];
othercnt++;
} else if (otherthing == intrms[jj].split('data:')[1].split('/')[0]) {
othercnt++;
}
}
} else if (intrms[jj].indexOf('/') != -1) {
if (intrms[jj].indexOf('.') == -1) {
badcnt++;
} else {
compext='.' + intrms[jj].split('.')[eval(-1 + intrms[jj].split('.').length)].split('?')[0].split('&')[0].split('#')[0].toLowerCase();
if (xexts.indexOf(compext) != -1) {
if (xtypes[eval('' + xexts.indexOf(compext))].indexOf('image/') != 0) {
badcnt++;
if (jj == 0) {
otherthing=xtypes[eval('' + xexts.indexOf(compext))].split('/')[0];
othercnt++;
} else if (otherthing == xtypes[eval('' + xexts.indexOf(compext))].split('/')[0]) {
othercnt++;
}
}
} else {
badcnt++;
}
}
}
}
}
//alert(badcnt);
var comma=',';
if (othercnt == eval('' + intrms.length)) {
potnew=potnew.replace('#iframe', '#' + otherthing.replace('text','embed'));
tao.value=potnew;
} else if (badcnt == eval('' + intrms.length)) {
for (jj=eval(-1 + intrms.length); jj>=0; jj--) {
if (jj == 0) { comma=''; }
if (intrms[jj].toLowerCase().indexOf('http') == 0) {
potnew=potnew.replace(comma + intrms[jj], comma + '//www.rjmprogramming.com.au/recording_ideas.php?noinitialwo=open#' + encodeURIComponent(intrms[jj]));
} else if (intrms[jj].indexOf('//') != -1) {
potnew=potnew.replace(comma + intrms[jj], comma + '//www.rjmprogramming.com.au/recording_ideas.php?noinitialwo=open#' + encodeURIComponent(document.URL.split('//')[0] + '//' + intrms[jj].split('//')[1]));
} else if (intrms[jj].indexOf('/') == 0) {
potnew=potnew.replace(comma + intrms[jj], comma + '//www.rjmprogramming.com.au/recording_ideas.php?noinitialwo=open#' + encodeURIComponent(document.URL.split('//')[0] + '//' + document.URL.split('//')[1].split('/')[0] + intrms[jj]));
} else if (intrms[jj].indexOf('./') == 0) {
potnew=potnew.replace(comma + intrms[jj], comma + '//www.rjmprogramming.com.au/recording_ideas.php?noinitialwo=open#' + encodeURIComponent(document.URL.split('//')[0] + '//' + document.URL.split('//')[1].split('/')[0] + intrms[jj].substring(1)));
} else if (intrms[jj].indexOf('../') == 0) {
potnew=potnew.replace(comma + intrms[jj], comma + '//www.rjmprogramming.com.au/recording_ideas.php?noinitialwo=open#' + encodeURIComponent(document.URL.split('//')[0] + '//' + document.URL.split('//')[1].split('/')[0] + intrms[jj].substring(2)));
} else {
potnew=potnew.replace(comma + intrms[jj], comma + '//www.rjmprogramming.com.au/recording_ideas.php?noinitialwo=open#' + encodeURIComponent(document.URL.split('//')[0] + '//' + document.URL.split('//')[1].split('/')[0] + '/' + intrms[jj]));
}
}
tao.value=potnew.replace(/\/\/www\.rjmprogramming\.com\.au\/recording\_ideas\.php\?/g, document.URL.split(':')[0] + '://www.rjmprogramming.com.au/recording_ideas.php?');
}
}
}

function numdotsonly(ttxao) {
if (ttxao.value != '') {
var hsta=ttxao.value.split('#');
if (hsta[0] != '') {
if (hsta[0].replace(/\./g,'').replace(/\,/g,'').replace(/0/g,'').replace(/1/g,'').replace(/2/g,'').replace(/3/g,'').replace(/4/g,'').replace(/5/g,'').replace(/6/g,'').replace(/7/g,'').replace(/8/g,'').replace(/9/g,'') == '') {
return ttxao;
} else {
var newhtz=hsta[0].toHtmlEntities();
var inimter=newhtz.replace(/\&\#44\;/g,',').replace(/\&\#46\;/g,'.');
var insmtr=inimter.split('&#');
for (var jj=1; jj<insmtr.length; jj++) {
if (String.fromCharCode(eval('' + insmtr[jj].split(';')[0].split('.')[0].split(',')[0])) >= '0' && String.fromCharCode(eval('' + insmtr[jj].split(';')[0].split('.')[0].split(',')[0])) <= '9') {
inimter=inimter.replace('&#' + insmtr[jj].split(';')[0].split('.')[0].split(',')[0] + ';', String.fromCharCode(eval('' + insmtr[jj].split(';')[0].split('.')[0].split(',')[0])));
//alert('0:' + inimter);
} else if (String.fromCharCode(eval('' + insmtr[jj].split(';')[0].split('.')[0].split(',')[0])) == '.') {
inimter=inimter.replace('&#' + insmtr[jj].split(';')[0].split('.')[0].split(',')[0] + ';', String.fromCharCode(eval('' + insmtr[jj].split(';')[0].split('.')[0].split(',')[0])));
//alert('1:' + inimter);
} else if (String.fromCharCode(eval('' + insmtr[jj].split(';')[0].split('.')[0].split(',')[0])) == ',') {
inimter=inimter.replace('&#' + insmtr[jj].split(';')[0].split('.')[0].split(',')[0] + ';', String.fromCharCode(eval('' + insmtr[jj].split(';')[0].split('.')[0].split(',')[0])));
//alert('2:' + inimter);
} else {
inimter=(inimter.replace('&#' + insmtr[jj].split(';')[0].split('.')[0].split(',')[0] + ';', '.' + insmtr[jj].split(';')[0].split('.')[0].split(',')[0] + '.')).replace(/\.\./g,'.').replace(/^\./g,'').replace(/\.$/g,'').replace(/\.\,\./g,',').replace(/\.\,/g,',').replace(/\,\./g,',');
//alert('3:' + inimter);
}
}
//ttxao.value=newhtz.replace(/\&\#44\;/g,',').replace(/\&\#46\;/g,'.').replace(/\&\#/g,'').replace(/\;/g,'') + (eval('' + hsta.length) > 1 ? '#' + hsta[1] : '');
ttxao.value=inimter.replace(/\&\#/g,'').replace(/\;/g,'') + (eval('' + hsta.length) > 1 ? '#' + hsta[1] : '');
//alert(newhtz + ' ' + ttxao.value);
}
}
}
return ttxao;
}

function maybeif(tao) {
if (tao.value.trim() != '' && tao.value.trim().indexOf('//') != -1) {
justvalidity=true;
document.getElementById('ifimc').src='//' + tao.value.trim().split('//')[1];
setTimeout(function(){ justvalidity=false; }, 8000);
}
}

… sometimes resorting to QR Codes as a representation of a URL should we not be able to extract any data from that URL, in a changed latest draft Clairvoyance++ Game.

Previous relevant Clairvoyance Game Element Type Tutorial is shown below.

Clairvoyance Game Element Type Tutorial

Clairvoyance Game Element Type Tutorial

Today’s blog posting work …

… to make those User Bonus Score questions and answer default suggestions have lots more variety.

Also, today, we use the oninput event means by which we can stop the user entering particular delimiter characters we hope they do not use defining Game Names and Game Nouns …


<input oninput='this.value=this.value.replace(/[+|"#]/g, " ");' style=width:90%; type=text placeholder='Game Name Words' onblur="if (this.value.trim() != '' && document.getElementById('two').value.trim() == '') { document.getElementById('two').value=this.value; }" value='' name=one id=one></input><br>
<input oninput='this.value=this.value.replace(/[+|"#]/g, " ");' style=width:90%; type=text placeholder='Game Noun(s)' value='' name=two id=two></input><br><hr></hr>

And, today, we allow the user to hashtag enter an HTML element type as the output element type output within the five table cells of the game, exemplified by …


function fireup() {
var thisiw=theiw;
var zrect=document.getElementById('td1').getBoundingClientRect();
if (thisiw >= eval('' + thewords.length)) { thisiw=0; }
for (var ii=1; ii<=5; ii++) {
if (document.getElementById('td' + ii).outerHTML.indexOf('background') == -1 && window.parent == window.self) {
//alert(theelems[thisiw] + ' ... ' + zener_cards[eval(-1 + ii)]);
if (theelems[thisiw].indexOf('<img ') == 0) {
//document.getElementById('td' + ii).innerHTML=theelems[thisiw] + (theelems[thisiw].slice(-1) == '=' ? '' : '') + zener_cards[eval(-1 + ii)] + theelems[thisiw].slice(-1).replace('=','') + ' id=img' + ii + " onclick=\"if (!awaiting && !holdon) { pick=changeover(eval(this.id.replace('img',''))); } else { alert('' + ' Sorry, not your turn, so please wait.'); }\"" + theihs[thisiw] + (zener_cards[[eval(-1 + ii)]] + '|').split('|')[1] + (theelems[thisiw].split(' ')[0] + '>').replace('<','</');
document.getElementById('td' + ii).innerHTML=theelems[thisiw] + (theelems[thisiw].slice(-1) == '=' ? '' : '') + zener_cards[eval(-1 + ii)] + theelems[thisiw].slice(-1).replace('=','') + ' id=img' + ii + " onclick=\"if (!awaiting && !holdon) { pick=changeover(eval(this.id.replace('img',''))); } else { alert('' + ' Sorry, not your turn, so please wait.'); }\"" + theihs[thisiw] + (theelems[thisiw].split(' ')[0] + '>').replace('<','</');
} else if (usereletype != '') {
document.getElementById('td' + ii).innerHTML=theelems[thisiw] + (theelems[thisiw].slice(-1) == '=' ? '' : '') + zener_cards[eval(-1 + ii)] + theelems[thisiw].slice(-1).replace('=','') + " id=img" + ii + " onclick=\"if (!awaiting && !holdon) { pick=changeover(eval(this.id.replace('img',''))); } else { alert('' + ' Sorry, not your turn, so please wait.'); }\"" + theihs[thisiw] + (theelems[thisiw].split(' ')[0] + '>').replace('<','</');
//alert('1:' + document.getElementById('td' + ii).innerHTML);
if (document.getElementById('img' + ii).title != '' && ('' + document.getElementById('img' + ii).innerHTML).replace(/^null/g,'').replace(/^undefined/g,'') == '') {
if ((document.getElementById('img' + ii).title + zener_cards[0]).indexOf('&#') != -1) {
document.getElementById('img' + ii).style.width='100%';
document.getElementById('img' + ii).style.height='100%';
if (dataeltypes.toLowerCase().indexOf(',' + usereletype + ',') != -1) {
//alert(0);
document.getElementById('img' + ii).style.background='url("data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent("<svg xmlns='http://www.w3.org/2000/svg' width='" + zrect.width + "' height='" + zrect.height + "' viewport='0 0 100 100' style='fill:black;font-family:Verdana;font-size:100px;'><text x='5%' y='80%' xml:space='preserve'>" + document.getElementById('img' + ii).title.split('|')[1] + "</text></svg>"))) + '")';
//alert(10);
document.getElementById('img' + ii).style.backgroundRepeat='no-repeat';
document.getElementById('img' + ii).style.backgroundSize='contain';
} else if (valueeltypes.toLowerCase().indexOf(',' + usereletype + ',') != -1) {
document.getElementById('img' + ii).style.background='url("data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent("<svg xmlns='http://www.w3.org/2000/svg' width='" + zrect.width + "' height='" + zrect.height + "' viewport='0 0 100 100' style='fill:black;font-family:Verdana;font-size:100px;'><text x='5%' y='80%' xml:space='preserve'>" + document.getElementById('img' + ii).title.split('|')[1] + "</text></svg>"))) + '")';
document.getElementById('img' + ii).style.backgroundRepeat='no-repeat';
document.getElementById('img' + ii).style.backgroundSize='contain';
} else if (srceltypes.toLowerCase().indexOf(',' + usereletype + ',') != -1) {
document.getElementById('img' + ii).style.background='url("data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent("<svg xmlns='http://www.w3.org/2000/svg' width='" + zrect.width + "' height='" + zrect.height + "' viewport='0 0 100 100' style='fill:black;font-family:Verdana;font-size:100px;'><text x='5%' y='80%' xml:space='preserve'>" + document.getElementById('img' + ii).title.split('|')[1] + "</text></svg>"))) + '")';
document.getElementById('img' + ii).style.backgroundRepeat='no-repeat';
document.getElementById('img' + ii).style.backgroundSize='contain';
} else {
document.getElementById('img' + ii).innerHTML=document.getElementById('img' + ii).title.split('|')[1];
}
//alert('2:' + document.getElementById('td' + ii).innerHTML);
} else {
document.getElementById('img' + ii).style.width='100%';
document.getElementById('img' + ii).style.height='100%';
document.getElementById('img' + ii).style.background='url(' + document.getElementById('img' + ii).title.split('|')[1] + ')';
document.getElementById('img' + ii).style.backgroundRepeat='no-repeat';
document.getElementById('img' + ii).style.backgroundSize='contain';
//alert('3:' + document.getElementById('td' + ii).outerHTML);
}
}
} else {
if (dataeltypes.toLowerCase().indexOf(',' + usereletype + ',') != -1) {
document.getElementById('img' + ii).style.width='100%';
document.getElementById('img' + ii).style.height='100%';
//alert(0);
document.getElementById('img' + ii).style.background='url("' + (zener_cards[[eval(-1 + ii)]] + '|').split('|')[1].replace('https:','').replace('http:','') + '")';
//alert(10);
document.getElementById('img' + ii).style.backgroundRepeat='no-repeat';
document.getElementById('img' + ii).style.backgroundSize='contain';
} else if (valueeltypes.toLowerCase().indexOf(',' + usereletype + ',') != -1) {
document.getElementById('img' + ii).style.width='100%';
document.getElementById('img' + ii).style.height='100%';
document.getElementById('img' + ii).style.background='url("' + (zener_cards[[eval(-1 + ii)]] + '|').split('|')[1].replace('https:','').replace('http:','') + '")';
document.getElementById('img' + ii).style.backgroundRepeat='no-repeat';
document.getElementById('img' + ii).style.backgroundSize='contain';
} else if (srceltypes.toLowerCase().indexOf(',' + usereletype + ',') != -1) {
document.getElementById('img' + ii).style.width='100%';
document.getElementById('img' + ii).style.height='100%';
document.getElementById('img' + ii).style.background='url("' + (zener_cards[[eval(-1 + ii)]] + '|').split('|')[1].replace('https:','').replace('http:','') + '")';
document.getElementById('img' + ii).style.backgroundRepeat='no-repeat';
document.getElementById('img' + ii).style.backgroundSize='contain';
} else {
document.getElementById('td' + ii).innerHTML=theelems[thisiw] + (theelems[thisiw].slice(-1) == '=' ? '' : '') + zener_cards[eval(-1 + ii)] + theelems[thisiw].slice(-1).replace('=','') + " id=img" + ii + " onclick=\"if (!awaiting && !holdon) { pick=changeover(eval(this.id.replace('img',''))); } else { alert('' + ' Sorry, not your turn, so please wait.'); }\"" + theihs[thisiw] + (zener_cards[[eval(-1 + ii)]] + '|').split('|')[1] + (theelems[thisiw].split(' ')[0] + '>').replace('<','</');
}
}
//document.getElementById('td' + ii).style.background="url('" + zener_cards[eval(-1 + ii)] + "')";
//document.getElementById('td' + ii).style.backgroundSize='contain';
//document.getElementById('td' + ii).style.backgroundRepeat='no-repeat';
//alert(ii);
}
}
}

… in …

Previous relevant Clairvoyance Game Scoring Bonus Tutorial is shown below.

Clairvoyance Game Scoring Bonus Tutorial

Clairvoyance Game Scoring Bonus Tutorial

When a game scores and it’s got a non-aspirational feel about it, it can turn off some potential players. And so, with this in mind, onto yesterday’s Clairvoyance Game User Definitions Tutorial we now offer some optional bonus scoring functionality to also involve either …

  • Maths questions
  • User created questions

Either player can ask for this additional challenge involving …

Previous relevant Clairvoyance Game User Definitions Tutorial is shown below.

Clairvoyance Game User Definitions Tutorial

Clairvoyance Game User Definitions Tutorial

The day before yesterday’s Clairvoyance Game Image Map Tutorial work gets incorporated into today’s work allowing a three type way, as per …

  1. Image Map HTML URL
  2. Emoji list of 5
  3. Image URL list of 5

… means by which a user might design their own game to add to the dropdown list, and store in …


window.localStorage

… within the realms of the web browser being used. Then that newly created user defined game can be shared when invoking email or SMS invitations, and can get added to in that Game type dropdown, where another “Your Own …” suboption brings up the HTML form (and there, some textarea element double click logics might help with the filling out, and/or “modelling the filling out” for you) where the user can create and control these definitions.

Feel free to try this all out within a changed seventh draft Clairvoyance++ Game.

Previous relevant Clairvoyance Game Image Map Tutorial is shown below.

Clairvoyance Game Image Map Tutorial

Clairvoyance Game Image Map Tutorial

With our Clairvoyance++ Game project of recent times, before yesterday’s Clairvoyance Game Waiting Tutorial there was the day before yesterday’s Clairvoyance Game Sharing Scores Tutorial, where we “objectified” the project. Today’s job is to add into that “objectify mix” …


Image Map

… integration, where the …

  • HTML containing the …
  • Image img element’s …
  • Map map element guillotining … via …
    1. area element shape=”rect” … or …
    2. area element shape=”poly”

    subelements

… can be referenced to fill in new Clairvoyance++ Game looking incarnations as well as a means, via background image of a newly “top part of webpage” HTML div element, clicking means by which the original image map action item can be reopened, as well.

We think, at this stage, that we want to offer the user some “own incarnation” functionality eventually, and we’d like to add this image map idea into the mix. We’ll see about that later, but for now we have the modelled new dropdown options below …


var zener_cards=['/circle_yellow.jpg#circle_yellow','/cross_red.jpg#cross_red','/waves_blue.jpg#waves_blue','/square_black.jpg#square_black','/star_green.jpg#star_green'];

var theword='Clairvoyance';
var thenoun='Zener Card';
var theelem="<img style='object-fit:contain;' src=";
var thewords=['Clairvoyance', 'Fruit', 'Food', 'Animal', 'Bird', 'Carpentry', 'London', 'India', 'Australian Indigenous Language', 'Cell'];
var theelems=["<img style='object-fit:contain;' src=", "<img style='object-fit:contain;' src=", "<img style='object-fit:contain;' src=", "<img style='object-fit:contain;' src=", "<img style='object-fit:contain;' src=", "<img style='object-fit:contain;' src=", "<img style='object-fit:contain;' src=", "<img style='object-fit:contain;' src=", "<img style='object-fit:contain;' src=", "<img style='object-fit:contain;' src="];
var theihs=[">", ">", ">", ">", ">", ">", ">", ">", ">", ">"];
var thenouns=['Zener Card', 'Fruit', 'Meal', 'Creature', 'Bird', 'Framework Feature', 'Day', 'State', 'Language Area', 'Cell Part'];
var theiw=(document.URL.indexOf('itype=') != -1 ? eval(-1 + eval('' + document.URL.split('itype=')[1].split('&')[0].split('#'))) : 0);

if (theiw > 0) {
zcblurb='';
document.title=document.title.replace('Clairvoyance ', thewords[theiw] + ' ');
if (thewords[theiw] == 'Food') {
theelems[theiw]='<button style=font-size:100px; title=';
theihs[theiw]='>';
zener_cards[0]+='|&#x1f35b;';
zener_cards[1]+='|&#x1f371;';
zener_cards[2]+='|&#x1f358;';
zener_cards[3]+='|&#x1f359;';
zener_cards[4]+='|&#x1f363;';
} else if (thewords[theiw] == 'Fruit') { // '127825', '127825', '127818', '127827', '127821'
theelems[theiw]='<button style=font-size:100px; title=';
theihs[theiw]='>';
zener_cards[0]+='|&#127817;';
zener_cards[1]+='|&#127825;';
zener_cards[2]+='|&#127818;';
zener_cards[3]+='|&#127827;';
zener_cards[4]+='|&#127821;';
} else if (thewords[theiw] == 'Animal') {
theelems[theiw]='<button style=font-size:100px; title=';
theihs[theiw]='>';
zener_cards[0]+='|&#128018;';
zener_cards[1]+='|&#129421;';
zener_cards[2]+='|&#129447;';
zener_cards[3]+='|&#128054;';
zener_cards[4]+='|&#128021;';
} else if (thewords[theiw] == 'Bird') {
delay=8000;
randomize=true;
if (document.URL.indexOf('rjmprogramming.com.au/') != -1) {
theelems[theiw]='<img data-url="//www.rjmprogramming.com.au/HTMLCSS/bird_quiz.htm" style="object-fit:contain;" src="';
} else {
theelems[theiw]='<img data-url="/bird_quiz.htm" style="object-fit:contain;" src="';
}
theihs[theiw]='>';
zener_cards[0]+=''; // |//www.rjmprogramming.com.au/HTMLCSS/birdyquiz.jpeg#8,5,374,370';
zener_cards[1]+=''; // |//www.rjmprogramming.com.au/HTMLCSS/birdyquiz.jpeg#374,5,930,370';
zener_cards[2]+=''; // |//www.rjmprogramming.com.au/HTMLCSS/birdyquiz.jpeg#930,5,1164,370';
zener_cards[3]+=''; // |//www.rjmprogramming.com.au/HTMLCSS/birdyquiz.jpeg#1164,5,1500,370';
zener_cards[4]+=''; // |//www.rjmprogramming.com.au/HTMLCSS/birdyquiz.jpeg#5,680,374,1120';
} else if (thewords[theiw] == 'Carpentry') {
delay=8000;
randomize=true;
if (document.URL.indexOf('rjmprogramming.com.au/') != -1) {
theelems[theiw]='<img data-url="//www.rjmprogramming.com.au/HTMLCSS/floor_wall_roof_framing_members.html" style="object-fit:Cover;" src="';
} else {
theelems[theiw]='<img data-url="/HTMLCSS/floor_wall_roof_framing_members.html" style="object-fit:Cover;" src="';
}
theihs[theiw]='>';
zener_cards[0]+='';
zener_cards[1]+='';
zener_cards[2]+='';
zener_cards[3]+='';
zener_cards[4]+='';
} else if (thewords[theiw] == 'London') {
delay=8000;
if (document.URL.indexOf('rjmprogramming.com.au/') != -1) {
theelems[theiw]='<img data-url="//www.rjmprogramming.com.au/HTMLCSS/london_trip_via_map_element.html" style="object-fit:Cover;" src="';
} else {
theelems[theiw]='<img data-url="/HTMLCSS/london_trip_via_map_element.html" style="object-fit:Cover;" src="';
}
theihs[theiw]='>';
zener_cards[0]+='';
zener_cards[1]+='';
zener_cards[2]+='';
zener_cards[3]+='';
zener_cards[4]+='';
} else if (thewords[theiw] == 'India') {
delay=8000;
randomize=true;
if (document.URL.indexOf('rjmprogramming.com.au/') != -1) {
theelems[theiw]='<img data-url="//www.rjmprogramming.com.au/HTMLCSS/india_map.html" style="object-fit:Cover;" src="';
} else {
theelems[theiw]='<img data-url="/HTMLCSS/india_map.html" style="object-fit:Cover;" src="';
}
theihs[theiw]='>';
zener_cards[0]+='';
zener_cards[1]+='';
zener_cards[2]+='';
zener_cards[3]+='';
zener_cards[4]+='';
} else if (thewords[theiw] == 'Australian Indigenous Language') {
delay=8000;
randomize=true;
if (document.URL.indexOf('rjmprogramming.com.au/') != -1) {
theelems[theiw]='<img data-url="//www.rjmprogramming.com.au/HTMLCSS/ImageMap/Languages/aboriginal_language_regions.html" style="object-fit:Cover;" src="';
} else {
theelems[theiw]='<img data-url="/HTMLCSS/ImageMap/Languages/aboriginal_language_regions.html" style="object-fit:Cover;" src="';
}
theihs[theiw]='>';
zener_cards[0]+='';
zener_cards[1]+='';
zener_cards[2]+='';
zener_cards[3]+='';
zener_cards[4]+='';
} else if (thewords[theiw] == 'Cell') {
delay=8000;
randomize=true;
if (document.URL.indexOf('rjmprogramming.com.au/') != -1) {
theelems[theiw]='<img data-url="//www.rjmprogramming.com.au/HTMLCSS/the_cell.html" style="object-fit:Cover;" src="';
} else {
theelems[theiw]='<img data-url="/HTMLCSS/the_cell.html" style="object-fit:Cover;" src="';
}
theihs[theiw]='>';
zener_cards[0]+='';
zener_cards[1]+='';
zener_cards[2]+='';
zener_cards[3]+='';
zener_cards[4]+='';
}
}

var sideas=['Awaiting Other Player Choosing a ' + thenouns[theiw] + ' to Guess','Select the ' + thenouns[theiw] + ' Your Player Partner Selected','Select a ' + thenouns[theiw] + ' You Are Asking Your Player Partner to Guess','Awaiting Guess from Your Player Partner','Awaiting a ' + thenouns[theiw] + ' Selection from Your Playing Partner'];

… working with the cropping and resizing smarts the HTML canvas element is capable of …


function imc(iois) {

var aconto=null, prefixing='', ipr=0, minx=0, miny=0, maxx=0, maxy=0, donesofar=',';
if (iois.src.indexOf('/About_Us.htm') == -1) {
aconto = (iois.contentWindow || iois.contentDocument);
if (aconto != null) {
if (aconto.document) { aconto = aconto.document; }
if (aconto.body != null) {
//alert('' + aconto.body.innerHTML.indexOf('<area ') + '!' + aconto.body.innerHTML.split(' shape="rect"').length + '?' + iois.src + ';' + aconto.body.innerHTML.split('<map ')[0].split('<img ')[eval(-1 + aconto.body.innerHTML.split('<map ')[0].split('<img ').length)] + ':' + aconto.body.innerHTML);
if (eval('' + aconto.body.innerHTML.indexOf('<map ')) > eval('' + aconto.body.innerHTML.indexOf('<img ')) && aconto.body.innerHTML.indexOf('<map ') != -1 && aconto.body.innerHTML.indexOf('<img ') != -1 && aconto.body.innerHTML.indexOf('<area ') != -1 && aconto.body.innerHTML.replace(/shape\=\"poly\"/g,'shape="rect"').indexOf('shape="rect"') != -1) {
//alert('000:' + '');
if (aconto.body.innerHTML.indexOf('shape="rect"') == -1) {
prefixing=' ';
//if (document.URL.indexOf('&debug=') != -1) { alert('yes'); }
}
wourl=iois.src;
coordsarr=aconto.body.innerHTML.replace(/shape\=\"poly\"/g,'shape="rect"').split('shape="rect"');
//alert('0000:' + coordsarr.length);
if (eval('' + coordsarr.length) > 5) {
//alert('00:' + '');
imname=aconto.body.innerHTML.split('<map ')[0].split('<img ')[eval(-1 + aconto.body.innerHTML.split('<map ')[0].split('<img ').length)];
//alert('0:' + imname);
imname=imname.split('src="')[1];
//alert('1:' + imname);
imname=imname.split('"')[0];
//alert('2:' + imname);
if ((imname + 'x').indexOf('//') != -1 || (imname + 'x').indexOf('data:') == 0) { // || (imname + 'x').substring(0,1) == '/') {
if ((imname + 'x').indexOf('data:') == 0) {
imname=imname;
} else {
imname='//' + imname.split('//')[1];
}
} else if ((imname + 'x').substring(0,1) == '/') {
if (iois.src.indexOf('//') != -1) {
imname='//' + iois.src.split('//')[1].split('/')[0] + '/' + imname.substring(1);
} else {
imname='//www.rjmprogramming.com.au/' + imname.substring(1);
}
} else if ((imname + 'xxxxxxxxx').substring(0,12) == '../../../../') {
imname=iois.src.replace(iois.src.split('/')[eval(-5 + iois.src.split('/').length)], imname.substring(12) + '#');
} else if ((imname + 'xxxxxxxxx').substring(0,9) == '../../../') {
imname=iois.src.replace(iois.src.split('/')[eval(-4 + iois.src.split('/').length)], imname.substring(9) + '#');
} else if ((imname + 'xxxxxx').substring(0,6) == '../../') {
imname=iois.src.replace(iois.src.split('/')[eval(-3 + iois.src.split('/').length)], imname.substring(6) + '#');
} else if ((imname + 'xxx').substring(0,3) == '../') {
imname=iois.src.replace(iois.src.split('/')[eval(-2 + iois.src.split('/').length)], imname.substring(3) + '#');
} else if ((imname + 'xx').substring(0,1) == './') {
imname=iois.src.replace(iois.src.split('/')[eval(-1 + iois.src.split('/').length)], imname.substring(2));
} else {
imname=iois.src.replace(iois.src.split('/')[eval(-1 + iois.src.split('/').length)], imname.substring(0));
}
}

//alert(imname.split(' ')[0] + ' ' + coordsarr[1]);
imlist=document.getElementsByTagName('img');
tds=document.getElementsByTagName('td');
squaredim=eval('' + tds[0].getBoundingClientRect().width);
document.getElementById('dtop').style.background='linear-gradient(rgba(255,255,255,0.1),rgba(255,255,255,0.1)),url(' + imname.split(' ')[0] + ')';
document.getElementById('dtop').style.backgroundRepeat='no-repeat';
document.getElementById('dtop').style.backgroundSize='contain';
document.getElementById('dtop').style.backgroundPosition='right top';
document.getElementById('dtop').onclick=function(event){ event.stopPropagation(); window.open(wourl,'_blank','top=50,left=50,width=600,height=600'); };

var imgis=new Image();
imgis.onload = function(){
var ict=1, jct=1;
var zcanvas = document.createElement('canvas');
zcanvas.width = squaredim; //imgis.width;
zcanvas.height = squaredim; //imgis.height;
var zctx = zcanvas.getContext('2d');
if (!randomize) {
while (coordsarr[ict].indexOf(' coords="') == -1) {
ict++;
}
}
if (randomize) {
ict=Math.floor(Math.random() * eval(-1 + eval('' + coordsarr.length)));
//alert('first ict=' + ict + ' ... ' + donesofar);
while (ict == 0 || (donesofar + ',').indexOf(',' + ict + ',') != -1) {
ict=Math.floor(Math.random() * eval(-1 + eval('' + coordsarr.length)));
if (coordsarr[ict].indexOf(' coords="') == -1) {
if (donesofar != ',') {
ict=eval('' + donesofar.substring(1).split(',')[0]);
} else {
ict++;
}
}
}
donesofar+='' + ict + ',';
}
//for (ict=1; ict<=5; ict++) {
while (jct <= 5) {
//if (document.URL.indexOf('&debug=') != -1) { alert(coordsarr[ict]); }
coordsarr[ict]=coordsarr[ict].split(' coords="')[1].split('"')[0];
if (randomize || prefixing != '' || (eval(eval(coordsarr[ict].split(',')[2].split('"')[0]) - eval(coordsarr[ict].split(',')[0].split('"')[0])) > 10 && eval(eval(coordsarr[ict].split(',')[3].split('"')[0]) - eval(coordsarr[ict].split(',')[1].split('"')[0])) > 10)) {
//alert('zctx.drawImage("' + imname.split(' ')[0] + '",' + eval(coordsarr[ict].split(',')[0].split('"')[0]) + ',' + eval(coordsarr[ict].split(',')[1].split('"')[0]) + ',' + eval(eval(coordsarr[ict].split(',')[2].split('"')[0]) - eval(coordsarr[ict].split(',')[0].split('"')[0])) + ',' + eval(eval(coordsarr[ict].split(',')[3].split('"')[0]) - eval(coordsarr[ict].split(',')[1].split('"')[0])) + ',0,0' + ',' + tds[eval(-1 + ict)].getBoundingClientRect().width + ',' + tds[eval(-1 + ict)].getBoundingClientRect().width + ')');
if (prefixing != '') {
//if (document.URL.indexOf('&debug=') != -1) { alert('YES'); }
minx=0;
miny=0;
maxx=0;
maxy=0;
for (ipr=0; ipr<coordsarr[ict].split(',').length; ipr+=2) {
if (ipr == 0) {
minx=eval(coordsarr[ict].split(',')[ipr].split('"')[0]);
maxx=eval(coordsarr[ict].split(',')[ipr].split('"')[0]);
miny=eval(coordsarr[ict].split(',')[eval(1 + ipr)].split('"')[0]);
maxy=eval(coordsarr[ict].split(',')[eval(1 + ipr)].split('"')[0]);
} else {
if (eval(coordsarr[ict].split(',')[ipr].split('"')[0]) < minx) { minx=eval(coordsarr[ict].split(',')[ipr].split('"')[0]); }
if (eval(coordsarr[ict].split(',')[ipr].split('"')[0]) > maxx) { maxx=eval(coordsarr[ict].split(',')[ipr].split('"')[0]); }
if (eval(coordsarr[ict].split(',')[eval(1 + ipr)].split('"')[0]) < miny) { miny=eval(coordsarr[ict].split(',')[eval(1 + ipr)].split('"')[0]); }
if (eval(coordsarr[ict].split(',')[eval(1 + ipr)].split('"')[0]) > maxy) { maxy=eval(coordsarr[ict].split(',')[eval(1 + ipr)].split('"')[0]); }
}
}
prefixing='' + minx + ',' + miny + ',' + maxx + ',' + maxy;
//if (document.URL.indexOf('&debug=') != -1) { alert('prefixing=' + prefixing); }
coordsarr[ict]=prefixing.trim(); // + ',' + coordsarr[ict];
}
if (theelems[theiw].indexOf('object-fit:none') != -1 || theelems[theiw].indexOf('object-fit:Cover') != -1) {
//if (document.URL.indexOf('&debug=') != -1) { alert('Yes'); }
zcanvas.width = eval(eval(coordsarr[ict].split(',')[2].split('"')[0]) - eval(coordsarr[ict].split(',')[0].split('"')[0])); //imgis.width;
//if (document.URL.indexOf('&debug=') != -1) { alert('YeS'); }
zcanvas.height = eval(eval(coordsarr[ict].split(',')[3].split('"')[0]) - eval(coordsarr[ict].split(',')[1].split('"')[0])); //imgis.height;
//if (document.URL.indexOf('&debug=') != -1) { alert('YEs'); }
zctx.drawImage(imgis, eval(coordsarr[ict].split(',')[0].split('"')[0]), eval(coordsarr[ict].split(',')[1].split('"')[0]), eval(eval(coordsarr[ict].split(',')[2].split('"')[0]) - eval(coordsarr[ict].split(',')[0].split('"')[0])), eval(eval(coordsarr[ict].split(',')[3].split('"')[0]) - eval(coordsarr[ict].split(',')[1].split('"')[0])),0,0,eval(eval(coordsarr[ict].split(',')[2].split('"')[0]) - eval(coordsarr[ict].split(',')[0].split('"')[0])), eval(eval(coordsarr[ict].split(',')[3].split('"')[0]) - eval(coordsarr[ict].split(',')[1].split('"')[0])));
//if (document.URL.indexOf('&debug=') != -1) { alert('yeS'); }
} else {
zctx.drawImage(imgis, eval(coordsarr[ict].split(',')[0].split('"')[0]), eval(coordsarr[ict].split(',')[1].split('"')[0]), eval(eval(coordsarr[ict].split(',')[2].split('"')[0]) - eval(coordsarr[ict].split(',')[0].split('"')[0])), eval(eval(coordsarr[ict].split(',')[3].split('"')[0]) - eval(coordsarr[ict].split(',')[1].split('"')[0])),0,0,squaredim,squaredim);
}
xaltdu=zcanvas.toDataURL("image/jpeg", 0.1);
//alert(xaltdu);
//alert(imlist[eval(-1 + ict)].outerHTML);
//if (document.URL.indexOf('&debug=') != -1) { alert(xaltdu); }
imlist[eval(-1 + jct)].src=xaltdu;
//zener_cards[eval(-1 + jct)]+='' + xaltdu;
if (jct < 5) {
zcanvas.width = squaredim; //imgis.width;
zcanvas.height = squaredim; //imgis.height;
if (prefixing != '') { prefixing=' '; } else { prefixing=''; }
}
jct++;
//} else {
//alert(coordsarr[ict]);
}
if (!randomize) {
ict++;
if (document.URL.indexOf('&debug=') != -1) { alert('ict=' + ict + ' and jct=' + jct); }
} else {
ict=Math.floor(Math.random() * eval(-1 + eval('' + coordsarr.length)));
//alert('first ict=' + ict + ' ... ' + donesofar);
while (ict == 0 || (donesofar + ',').indexOf(',' + ict + ',') != -1) {
ict=Math.floor(Math.random() * eval(-1 + eval('' + coordsarr.length)));
if (coordsarr[ict].indexOf(' coords="') == -1) {
if (donesofar != ',') {
ict=eval('' + donesofar.substring(1).split(',')[0]);
} else {
ict++;
}
}
}
donesofar+='' + ict + ',';
}
}
};

imgis.src=imname.split(' ')[0];

}
}
}
}
}

function imagemapcheck() {
if (theelems[theiw].indexOf(' data-url="') != -1 && theelems[theiw].indexOf(' data-url=""') == -1 && zener_cards[0].replace('#circle_yellow','').indexOf('#') == -1) {
if (theelems[theiw].split(' data-url="')[1].split('"')[0].indexOf('#') == -1) {
if (theelems[theiw].split(' data-url="')[1].split('"')[0].slice(-5).indexOf('.') == -1 && theelems[theiw].split(' data-url="')[1].split('"')[0].slice(-1) != '/') {
document.getElementById('ifimc').src=theelems[theiw].split(' data-url="')[1].split('"')[0] + '/#';
} else {
document.getElementById('ifimc').src=theelems[theiw].split(' data-url="')[1].split('"')[0] + '#';
}
} else {
if (theelems[theiw].split(' data-url="')[1].split('"')[0].split('#')[0].slice(-5).indexOf('.') == -1 && theelems[theiw].split(' data-url="')[1].split('"')[0].split('#')[0].slice(-1) != '/') {
document.getElementById('ifimc').src=theelems[theiw].split(' data-url="')[1].split('"')[0].replace('#','/#');
} else {
document.getElementById('ifimc').src=theelems[theiw].split(' data-url="')[1].split('"')[0];
}
}
}
}

… in a changed sixth draft Clairvoyance++ Game.

Previous relevant Clairvoyance Game Waiting Tutorial is shown below.

Clairvoyance Game Waiting Tutorial

Clairvoyance Game Waiting Tutorial

The recent Clairvoyance Game Objectify Tutorial work is revisited today, with the news that we’ve introduced …

implied invitations

… when the user enters a “player name” (looking a lot like an IP address) from that list of “potential players online” that is not any form of their own IP address player name. It will be apparent to regular readers that this methodology was intended to be the “usual methodology” at the beginning of our project, and so “we’ll allow a leave pass” for you to ask …

How come this took so long?

And then we’d say …

Huh?!

And there you go! Just “keep those cards and letters” flowing in!

So what do we mean by “implied invitations”? Well, in between a user “Wait” answer and the next, any other user can ask to play that waiting user, and the next time out of the prompt window they may find they’re in the midst of a game of some sort, invited by another player. We hope this does not offend?!

The concept of a “formal invitation” still exists for the email or SMS collaboration conduits, we hasten to add.

And so “day ?whatevvvvvvvvvvveeeeerrrrrrrr” got us to …

Previous relevant Clairvoyance Game Objectify Tutorial is shown below.

Clairvoyance Game Objectify Tutorial

Clairvoyance Game Objectify Tutorial

Extending yesterday’s Clairvoyance Game Sharing Scores Tutorial, it’s not exactly OOP (Object Oriented Programming) we are doing, but what we’d describe as “objectify” the proceedings we’re attending to today. Take a look at the following Javascript initialization code (now versus before) …


var zener_cards=['/circle_yellow.jpg#circle_yellow','/cross_red.jpg#cross_red','/waves_blue.jpg#waves_blue','/square_black.jpg#square_black','/star_green.jpg#star_green'];

var theword='Clairvoyance';
var thenoun='Zener Card';
var theelem="<img style='object-fit:contain;' src=";
var thewords=['Clairvoyance', 'Fruit', 'Food'];
var theelems=["<img style='object-fit:contain;' src=", "<img style='object-fit:contain;' src=", "<img style='object-fit:contain;' src="];
var theihs=[">", ">", ">"];
var thenouns=['Zener Card', 'Fruit', 'Food'];
var theiw=(document.URL.indexOf('itype=') != -1 ? eval(-1 + eval('' + document.URL.split('itype=')[1].split('&')[0].split('#'))) : 0);

var ppsuff='';
var youare='';
var otheris='';
var score=0, goes=0;
var woois=null;
var pick=-1, awaiting=false, holdon=false;
var bihnull=true;
var anchor=null;
var initval='';
var lastafterscore='';
var wherewrong=false;
var sharemyscore=false, allowsdone=false;
var zcblurb=' You can enter ? to find out more about the history of Zener Cards. ';

if (theiw > 0) {
zcblurb='';
document.title=document.title.replace('Clairvoyance ', thewords[theiw] + ' ');
if (thenouns[theiw] == 'Food') {
theelems[theiw]='<button style=font-size:100px; title=';
theihs[theiw]='>';
zener_cards[0]+='|&#x1f35b;';
zener_cards[1]+='|&#x1f371;';
zener_cards[2]+='|&#x1f358;';
zener_cards[3]+='|&#x1f359;';
zener_cards[4]+='|&#x1f363;';
} else if (thenouns[theiw] == 'Fruit') { // '127825', '127825', '127818', '127827', '127821'
theelems[theiw]='&lt;button style=font-size:100px; title=';
theihs[theiw]='&gt;';
zener_cards[0]+='|&#127817;';
zener_cards[1]+='|&#127825;';
zener_cards[2]+='|&#127818;';
zener_cards[3]+='|&#127827;';
zener_cards[4]+='|&#127821;';
}
}


var sideas=['Awaiting Other Player Choosing a ' + thenouns[theiw] + ' to Guess','Select the ' + thenouns[theiw] + ' Your Player Partner Selected','Select a ' + thenouns[theiw] + ' You Are Asking Your Player Partner to Guess','Awaiting Guess from Your Player Partner','Awaiting a ' + thenouns[theiw] + ' Selection from Your Playing Partner'];

… helping build up HTML for a new dropdown (versus what was there before) …


function multimaybe() {
var selbit='', jsel=0;
if (eval('' + thenouns.length) > 1) {
selbit="<sup><select style=width:30px; onchange=\"if (eval('' + this.value) != eval(1 + eval('' + theiw))) { location.href=document.URL.split('?')[0].split('#')[0] + '?itype=' + this.value; }\"><option value=" + eval(1 + theiw) + ">?</option></select> </sup> ";
for (jsel=0; jsel<thenouns.length; jsel++) {
selbit=selbit.replace('</select>', '<option value=' + eval(1 + jsel) + '>' + thewords[jsel] + ' Game</option></select>');
}
}
return selbit;
}

… and then later within the HTML <body> section …


<script type=text/javascript>
document.write("<h1 id=muh1>" + thewords[theiw] + " Game " + multimaybe() + "<input type=checkbox id=allows style=display:none; onchange=chscal(this);><font size=1 id=fshare style=display:none;>Share Score</font></input> <input type=checkbox id=allowstwo style=display:none; onchange=chscaltwo(this);><font size=1 id=fsharetwo style=display:none;>Be Told Where You Went Wrong</font></input></h1>");
</script>

… and am sure you can see where an initial “Clairvoyance” noun “hardcoding” feel of logic gets expanded to an “array of nouns” (where lots of programmers will immediately shout “objects”), as an alternative way of thinking to the ways our Javascript functions are like “verbs”. If you “abstract” the “what was a hardcoding” into “a dynamically selectable list of nouns” this objectifying process can be quite useful.

And so “day six” got us to …

Previous relevant Clairvoyance Game Sharing Scores Tutorial is shown below.

Clairvoyance Game Sharing Scores Tutorial

Clairvoyance Game Sharing Scores Tutorial

Onto the day before yesterday’s (yes, another two dayer!) Clairvoyance Game Invitations Tutorial primarily we have a checkbox part regarding …

  • Be Told Where You Went Wrong … guessing within our two player Clairvoyance Game … easy peasy … but …
  • Share Your Score … was really difficult … go figure …

… though the latter did ask a lot regarding timing and the sleep patterns of the PHP interlocutor … ?

Let’s just “move on” … shall we?!

Also on the agenda was some colour coding … and who doesn’t like a bit of colour coding! We purloined CSS into play, with “the kind of kludgy / kind of cute (well, you had to be there)” introduction of a title attribute to the status wording element and then apply that CSS …


<style>
#tdstatus[title^='Awaiting Other '] {
border: 3px solid red;
}

#tdstatus[title^='Awaiting a '] {
border: 3px solid rgb(127,0,0);
}


#tdstatus[title^='Awaiting Guess '] {
border: 3px solid orange;
}

#tdstatus[title^='Select the '] {
border: 6px solid lightgreen;
}

#tdstatus[title^='Select a '] {
border: 6px solid green;
}

$tdstatus { padding: 5 5 5 5; }
</style>

We often find it the way, when it comes to colour coding, we borrow from “the traffic light creed” regarding the colours used, where a reddish colour means “hang on” and a greenish colour is an invitation to the user. One could also think of “beeps” or “notifications” here, but not with us here, as of yet.

And so “day four” and “day five” saw …

Previous relevant Clairvoyance Game Invitations Tutorial is shown below.

Clairvoyance Game Invitations Tutorial

Clairvoyance Game Invitations Tutorial

In yesterday’s Clairvoyance Game Tutorial, with our Clairvoyance Game, really a game for two, downplayed invitations to the end of the blog posting blurb. But really, invitations are the “be all and end all” for a two player game shared over the Internet and just using a “PHP and HTML/Javascript” level of sophistication.

And, of course, two days later (when we think it should have only been “one day later”), it might be me, but making this work for email or SMS invitations was not trivial, partly because …

  • we launched into this “phase two public invitational sharing” on a false premise … our “phase one window.open and window.opener” Javascript logics were flawed (further into the logic than the first foray, shall we say) … bad news … we reckon one out of two days “getting there” would have to be put down to the lack of testing on day one … whereas …
  • our thought that “phase two” is just phase one window.open and window.opener transfers to PHP writes Javascript equivalents was “more or less” true, but we all know “programming life” throws up unexpected roadblocks

… and that is the excuse today, which we are sticking to … so there, ngaaahhhh!

This calls into play the importance, often, of “project planning”, and the compartmentalizing of testing, including really tight unit testing, especially if your software plan has so much dependency in “day two” on the “day one” quality. As far as that goes, in our defence, regarding a networking web application, that this Clairvoyance Game “more or less is” (though yesterday’s work simplistically pared that down so that we never needed more than our local MAMP Apache/PHP web server involved) sometimes you find it is hard to recognize “units” within the big picture.

And so “day two” and “day three” were all about “online invitation” logic for email or SMS invitations in …

Previous relevant Clairvoyance Game Tutorial is shown below.

Clairvoyance Game Tutorial

Clairvoyance Game Tutorial

Are you sixth sensical? Can you read tea leaves? If it’s one out of two, that will do.

We’re starting down the road to a new …

Clairvoyance Game

… today, that on today’s first draft, as a design for two players …

  • starts you playing yourself, or a nearby other player willing to share windows on your one common web browser incarnation …
  • kind of ludicrous on this day one but the building blocks are there, they being …
    1. HTML and Javascript parent … talking to …
    2. PHP interlocutor

    … which we’re going to extend, on day two, simulating what a window.open and window.opener (just on client) can do, just with a few more calls, and sleeping

Two players take it in turns …

  1. selecting a Zener Card the other player is asked to guess
  2. other player trying to guess that Zener Card selected

… to score, or not, in this first draft Clairvoyance Game helped out by PHP first draft interlocutor.

In days to come, we think we’ll also be coding for email or SMS invitations to play, as well. This will be old news to some of you telepathic genii.

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.

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