Walking Trip …

Walking Trip

Walking Trip

Offenbach's Suite ... Warts 'n All

Offenbach's Suite ... Warts 'n All

 📅  

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

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

WordPress Previous Relevant Published Date Tutorial

WordPress Previous Relevant Published Date Tutorial

WordPress Previous Relevant Published Date Tutorial

Meanwhile, back at “this blog posting’s WordPress Blog Twenty Ten theme header.php land”, like with the recent WordPress Same Action Item Tutorial we wanted to add some intelligence to those …

<p id=wpimbyrmt>Previous relevant <a href=’//www.rjmprogramming.com.au/ITblog/wordpress-is-mentioned-by-less-recently-modified-tutorial’ target=”_blank” rel=”noopener”>WordPress Is Mentioned By Less Recently Modified Tutorial</a> is shown below.</p>

… style of links we have going “stringing along” components of our more complex “blog posting threads”. We wanted to add into the title attribute …


WordPress Is Mentioned By Less Recently Modified Tutorial published on May 12, 2026

… to add some more context into these “blog posting thread” stories, via …

<php

if (isset($post->post_content)) { // publication date
$monam=['January','February','March','April','May','June','July','August','September','October','November','December','January','February','March','April','May','June','July','August','September'];
$mnin=['01','02','03','04','05','06','07','08','09','10','11','12','1','2','3','4','5','6','7','8','9'];
$pras=explode('>Previous relevant <a ', $post->post_content);
if (sizeof($pras) > 1) {
$selxbitsare=file_get_contents("../tutorial_options.html");
for ($inbc=1; $inbc<sizeof($pras); $inbc++) {
$titsofar=explode('>', explode('</a>', $pras[$inbc])[0])[-1 + sizeof(explode('>', explode('</a>', $pras[$inbc])[0]))];
if (strpos($selxbitsare, '>' . $titsofar . ' (') !== false && strpos(explode('</a>', $pras[$inbc])[0], ' title="' . $titsofar . '"') !== false) {
$eightis=explode(')',explode('>' . $titsofar . ' (',$selxbitsare)[1])[0];
if (strlen($eightis) == 8) {
$post->post_content=str_replace(' title="' . $titsofar . '"', ' title="' . $titsofar . ' published on ' . $monam[array_search(substr($eightis,-4,2),$mnin)] . ' ' . substr($eightis,-2,2) . ', ' . substr($eightis,0,4) . '"', $post->post_content);
} else {
$post->post_content=str_replace(' title="' . $titsofar . '"', ' title="' . $titsofar . ' published on ' . $eightis . '"', $post->post_content);
}
} else if (strpos($selxbitsare, '>' . $titsofar . ' (') !== false && strpos(explode('</a>', $pras[$inbc])[0], " title='" . $titsofar . "'") !== false) {
$eightis=explode(')',explode('>' . $titsofar . ' (',$selxbitsare)[1])[0];
if (strlen($eightis) == 8) {
$post->post_content=str_replace(" title='" . $titsofar . "'", " title='" . $titsofar . " published on " . $monam[array_search(substr($eightis,-4,2),$mnin)] . ' ' . substr($eightis,-2,2) . ', ' . substr($eightis,0,4) . "'", $post->post_content);
} else {
$post->post_content=str_replace(" title='" . $titsofar . "'", " title='" . $titsofar . " published on " . $eightis . "'", $post->post_content);
}
}
}
}
}

?>

… new to good ol’ header.php of the TwentyTen Theme of this WordPress blog, and using our crontab/curl based overnight processing help here.


Previous relevant WordPress Same Action Item Tutorial is shown below.

WordPress Same Action Item Tutorial

WordPress Same Action Item Tutorial

Today, we’re extending our WordPress TwentyTen themed blog posting inhouse feature …

… PHP changed logic within is_mentioned_by.php controlled via emoji ☞ button.


Previous relevant WordPress Is Mentioned By Less Recently Modified Tutorial is shown below.

WordPress Is Mentioned By Less Recently Modified Tutorial

WordPress Is Mentioned By Less Recently Modified Tutorial

Supposing you came in here paying scant attention to the Blog Posting Title and its Animated GIF Tutorial picture I’d like to set you the challenge to look at the build up to organizing the use of the theme for today’s tutorial, and you try to anticipate what that may be? Up to the challenge? We hope so, because, with respect to the recent WordPress Is Mentioned By Recently Modified Tutorial‘s …

  • MySql SQL …
    <?php

    $res = mysql_query("SELECT " . $tname . ".post_title, " . $tname . ".guid, " . $tname . ".post_content, LOCATE('" . $ourtitle . "'," . $tname . ".post_content) as tfind, LOCATE('" . $ourother . "'," . $tname . ".post_title) as tother, " . $tname . ".post_date as post_date FROM " . $tname . "
    WHERE " . $tname . ".post_status = 'publish' " . "
    AND (1 = 1 OR LOWER(" . $tname . ".post_title) != LOWER('" . $ourtitle . "')) " . "
    AND (" . $tname . ".post_content like CONCAT(CONCAT('%?p='," . $tname . ".guid), '%') " . "
    OR " . $tname . ".post_content like '%" . str_replace('youllneverfindthis','%',permalinkit($ourtitle)) . "%' " . "
    OR " . $tname . ".post_content like '%" . str_replace('youllneverfindthis','%',$ourother) . "%' " . "
    OR " . $tname . ".post_content like '%" . str_replace('youllneverfindthis','%',$ourtitle) . "%') " . " UNION SELECT " . $tname . ".post_title, " . $tname . ".post_content as guid, ' ' as post_content, -1 as tfind, -1 as tother, " . $tname . ".post_modified as post_date FROM " . $tname . " WHERE " . $tname . ".post_status = 'publish' AND " . $tname . ".post_modified > NOW() - INTERVAL 1 WEEK " . " UNION SELECT 'Code Download Table' as post_title, " . $tname . ".post_content as guid, '' as post_content, 1 as tfind, 0 as tother, CURTIME() as post_date FROM " . $tname . "
    WHERE " . $tname . ".post_status = 'publish' " . "
    AND LOWER(" . $tname . ".post_title) = LOWER('" . $ourtitle . "') " . "
    AND " . $tname . ".post_content like '%GETME%' ORDER BY post_date ");

    ?>
    … we changed it to be
    <?php

    $res = mysql_query("SELECT " . $tname . ".post_title, " . $tname . ".guid, " . $tname . ".post_content, LOCATE('" . $ourtitle . "'," . $tname . ".post_content) as tfind, LOCATE('" . $ourother . "'," . $tname . ".post_title) as tother, " . $tname . ".post_date as post_date FROM " . $tname . "
    WHERE " . $tname . ".post_status = 'publish' " . "
    AND (1 = 1 OR LOWER(" . $tname . ".post_title) != LOWER('" . $ourtitle . "')) " . "
    AND (" . $tname . ".post_content like CONCAT(CONCAT('%?p='," . $tname . ".guid), '%') " . "
    OR " . $tname . ".post_content like '%" . str_replace('youllneverfindthis','%',permalinkit($ourtitle)) . "%' " . "
    OR " . $tname . ".post_content like '%" . str_replace('youllneverfindthis','%',$ourother) . "%' " . "
    OR " . $tname . ".post_content like '%" . str_replace('youllneverfindthis','%',$ourtitle) . "%') " . " UNION SELECT " . $tname . ".post_title, " . $tname . ".post_content as guid, ' ' as post_content, -1 as tfind, (-480 + TIMESTAMPDIFF(MINUTE,NOW()," . $tname . ".post_modified)) as tother, " . $tname . ".post_modified as post_date FROM " . $tname . " WHERE " . $tname . ".post_status = 'publish' AND " . $tname . ".post_modified > NOW() - INTERVAL 1 MONTH " . " UNION SELECT 'Code Download Table' as post_title, " . $tname . ".post_content as guid, '' as post_content, 1 as tfind, 0 as tother, CURTIME() as post_date FROM " . $tname . "
    WHERE " . $tname . ".post_status = 'publish' " . "
    AND LOWER(" . $tname . ".post_title) = LOWER('" . $ourtitle . "') " . "
    AND " . $tname . ".post_content like '%GETME%' ORDER BY post_date ");

    ?>
    … to fit in with …
  • we changed the modified is_mentioned_by.php‘s SQL result set logic “if logic framework” … from
    <?php

    while (($r_array = mysql_fetch_row($res))) {
    if ($r_array[3] == "-1" && strtolower($r_array[3]) == strtolower($r_array[4])) {
    // this is a member of the modified list (via middle UNION SELECT) of the MySQL SQL query result set
    } else if (strtolower($r_array[0]) == strtolower($ourtitle)) {
    // matches current post logic goes here
    } else {
    // does not match current post logic goes here
    }
    }

    ?>
    to
    <?php

    while (($r_array = mysql_fetch_row($res))) {
    if ($r_array[3] == "-1" && strpos(("" . $r_array[4]), "-") !== false) {
    // this is a member of the modified (and less recently modified) list (via middle UNION SELECT) of the MySQL SQL query result set
    } else if (strtolower($r_array[0]) == strtolower($ourtitle)) {
    // matches current post logic goes here
    } else {
    // does not match current post logic goes here
    }
    }

    ?>
    … turning a “binary” piece of logic into a “ternary” (and above) one … as well as, for good ol’ header.php we add some global Javascript variables

    var coption='option';
    var cdisabled='disabled';
    var chidden='hidden';
    var cblank='_blank';

Is it apparent to you now what we are using to achieve some new “Less Recently Modified Tutorial” list data onto the “Recently Modified Tutorial” list data of below? But how do we go about doing that, that has been an enthusiasm around here, of recent times? What if we could say …

  • we changed the modified is_mentioned_by.php‘s SQL result set logic “within that top if logic” … from
    <?php

    if ($secresult == "") {
    $secresult=" <span id=xdrpl><select style=\"background-color:orange;display:inline-block;width:80px;\" id=mr" . permalinkit($ourtitle) . " onchange=window.open(this.value,\"_blank\"); title=\"Modified recently (over last week)\"><option value=\"\">Modified</option></select></span> ";
    }
    $secresult=str_replace('>Modified</option>','>Modified</option><option value=https://www.rjmprogramming.com.au/ITblog/' . permalinkit($r_array[0]) . '>' . $r_array[0] . '</option>', $secresult);

    ?>
    to
    <?php

    if ($secresult == "") {
    $secresult=" <span id=xdrpl><select style=\"background-color:orange;display:inline-block;width:80px;\" id=mr" . permalinkit($ourtitle) . " onchange=\"if (this.value.trim().length == 0) { var optslst=document.getElementsByTagName(coption); for (var ioptslst=0; ioptslst<optslst.length; ioptslst++) { if (optslst[ioptslst].outerHTML.indexOf(this.value) != -1) { if (optslst[ioptslst].outerHTML.indexOf(cdisabled) != -1) { optslst[ioptslst].removeAttribute(cdisabled); } if (optslst[ioptslst].outerHTML.indexOf(chidden) != -1) { optslst[ioptslst].removeAttribute(chidden); } } } } else { window.open(this.value,cblank); }\" title=\"Modified recently (over last week)\"><option value=\"\">Modified</option></select></span> ";
    }
    if ($r_array[4] <= -11520) {
    $blks=(40 - floor((0 - $r_array[4]) / (24 * 60)));
    $optv='<option value="">Enable and show through to ' . (40 - $blks) . ' days';
    $altv=' title=""';
    for ($iblks=0; $iblks<$blks; $iblks++) {
    $altv=str_replace(' title="', ' title=" ', $altv);
    $optv=str_replace(' value="', ' value=" ', $optv);
    }
    if (strpos($secresult, $optv) !== false) { $secresult=str_replace($optv . " ... ",$optv . " ... " . $r_array[0] . " and ",$secresult); $optv=""; } else { $optv .= " ... " . $r_array[0] . "</option>"; }
    $secresult=str_replace('>Modified</option>','>Modified</option>' . $optv . '<option' . $altv . ' value=https://www.rjmprogramming.com.au/ITblog/' . permalinkit($r_array[0]) . ' disabled hidden>' . $r_array[0] . '</option>', $secresult);
    } else {

    $secresult=str_replace('>Modified</option>','>Modified</option><option value=https://www.rjmprogramming.com.au/ITblog/' . permalinkit($r_array[0]) . '>' . $r_array[0] . '</option>', $secresult);
    }

    ?>
  • and does the disabled hidden above tell you more?

Yes, back with the recent Emoji Circuit Quiz Animated Emoji Tutorial you might recall …

We’ve also long been interested in HTML select (dropdown) element option (subelement) disabling and/or hiding (statically or dynamically (as with today’s Javascript work)), and today, for the first time for us, we put this into action

… and we’ve found a new (probably you’d say, “more apt”) use of this idea. We differentiate the …

  • arguably more potent “week’s worth” of modified postings list (as per WordPress Is Mentioned By Recently Modified Tutorial‘s situation) … still as is, and “singly selectable” … with …
  • new less potent (you could argue) “older than one week and up to one month” of modified postings list that can be made “singly selectable” by the user (but don’t start that way, because they initially have “hidden” and “disabled” option element attributes set) … and …
  • in order to save space and honour those platforms that really render the “hidden” option tags we add “older than one week and up to one month” blog posting titles onto the “selectable day age” ones (all causing a select (dropdown) element value property of blank (if trimmed … ie. their length matches (40 – number of days age)) so that that new Javascript onchange logic can just look for a select element value existing in an option (list) member outerHTML property in order to decide whether to remove the “disabled” and “hidden” properties initially populated into those option “older than one week and up to one month” elements

Now can we recommend turning off the “scant attention” and having a look at today’s animated GIF tutorial picture showing a bit of how this new functionality works in practice here at the WordPress TwentyTen themed blog you are reading up with the emoji button (you click) above.

For biassed moi, just another reason to keep on admiring and using the ever useful HTML select (dropdown) element in our web applications.


Previous relevant WordPress Is Mentioned By Recently Modified Tutorial is shown below.

WordPress Is Mentioned By Recently Modified Tutorial

WordPress Is Mentioned By Recently Modified Tutorial

Administering this blog there are two major criteria that would cause a blog posting’s modified date to change, that being …

  1. at this blog we schedule one new blog post per day … and …
  2. as we see things, on an ad hoc basis, we’ll make changes

… but that “Recent Posts” widget you see at this blog only reflects blog post criteria 1 above. Supposing you are following a thread of blog posts or an old blog post, try out the code and see that there is something amiss. How could this possibly be so! Yes, humanity rainsreigns, and we are scouring the postings you might visit to see what you might see, as a basis for revisits to code of the past.

And pretty naturally, if we find an issue, and can do something about it, with that category 2 blog posting type above, we may change one or other or both of …

  • the underlying code of said category 2 blog posting … and/or, as applicable …
  • the blog posting content of said category 2 blog posting

… the latter of which will cause that blog posting’s modified date to change, and as of today, adding onto yesterday’s WordPress Is Mentioned By Posting Order Tutorial, your clicking of “Is Mentioned By” “emoji button” above to change the “Recent Posts” widget title to “Recent Posts”, that (select element) dropdown populated in chronological order by a week’s worth of modified date changes at this blog. Using this, you may get an update to something you cannot figure, else drop us a line.

What needed to change for this? Well, first off, we’d like to thank the inspiration of 27 Handy SQL Query Hacks for WordPress for the means by which we changed is_mentioned_by.php‘s central SQL SELECT (DML) statement should receive a new UNION clause as per

<?php

$res = mysql_query("SELECT " . $tname . ".post_title, " . $tname . ".guid, " . $tname . ".post_content, LOCATE('" . $ourtitle . "'," . $tname . ".post_content) as tfind, LOCATE('" . $ourother . "'," . $tname . ".post_title) as tother, " . $tname . ".post_date as post_date FROM " . $tname . "
WHERE " . $tname . ".post_status = 'publish' " . "
AND (1 = 1 OR LOWER(" . $tname . ".post_title) != LOWER('" . $ourtitle . "')) " . "
AND (" . $tname . ".post_content like CONCAT(CONCAT('%?p='," . $tname . ".guid), '%') " . "
OR " . $tname . ".post_content like '%" . str_replace('youllneverfindthis','%',permalinkit($ourtitle)) . "%' " . "
OR " . $tname . ".post_content like '%" . str_replace('youllneverfindthis','%',$ourother) . "%' " . "
OR " . $tname . ".post_content like '%" . str_replace('youllneverfindthis','%',$ourtitle) . "%') " . " UNION SELECT " . $tname . ".post_title, " . $tname . ".post_content as guid, ' ' as post_content, -1 as tfind, -1 as tother, " . $tname . ".post_modified as post_date FROM " . $tname . " WHERE " . $tname . ".post_status = 'publish' AND " . $tname . ".post_modified > NOW() - INTERVAL 1 WEEK " . " UNION SELECT 'Code Download Table' as post_title, " . $tname . ".post_content as guid, '' as post_content, 1 as tfind, 0 as tother, CURTIME() as post_date FROM " . $tname . "
WHERE " . $tname . ".post_status = 'publish' " . "
AND LOWER(" . $tname . ".post_title) = LOWER('" . $ourtitle . "') " . "
AND " . $tname . ".post_content like '%GETME%' ORDER BY post_date ");

?>

… that -1 as tfind, -1 as tother an intentional ploy to fit in with a new “if” clause in the PHP (that loops through database record reads of the MySql SQL query above) as per

<?php

$secresult="";
if ($res == 0) {
if (1 == 2) echo("<b>Error " . mysql_errno() . ": " . mysql_error() . "</b>");
} else if (mysql_num_rows($res) == 0) {
if (1 == 2) echo("<b>Query executed successfully</b>");
$retval=$delim;
$retval = str_replace(" }", " parent.document.getElementById('d" . permalinkit($ourtitle) . "').innerHTML='<select style=background-color:yellow; id=" . permalinkit($ourtitle) . " onchange=window.open(this.value,\"_blank\"); title=\"Is mentioned by\"><option value=\"\">Sadly, this tutorial is not mentioned by any others, yet</option></select>'; }", $retval);
} else {
while (($r_array = mysql_fetch_row($res))) {
if ($r_array[3] == "-1" && strtolower($r_array[3]) == strtolower($r_array[4])) {
if ($secresult == "") {
$secresult=" <span id=xdrpl><select style=\"background-color:orange;display:inline-block;width:80px;\" id=mr" . permalinkit($ourtitle) . " onchange=window.open(this.value,\"_blank\"); title=\"Modified recently (over last week)\"><option value=\"\">Modified</option></select></span> ";
}
$secresult=str_replace('>Modified</option>','>Modified</option><option value=https://www.rjmprogramming.com.au/ITblog/' . permalinkit($r_array[0]) . '>' . $r_array[0] . '</option>', $secresult);
}
else if (strtolower($r_array[0]) == strtolower($ourtitle)) {
$isize++;
$retval = str_replace(" }", " isize++; theseopts=theseopts.replace(' size=' + eval(-1 + isize) + ' ', ' size=' + isize + ' ').replace('>','><option value=https://www.rjmprogramming.com.au/ITblog/" . permalinkit($r_array[0]) . " selected>" . $r_array[0] . pluckfirstreal($r_array[2]) . "</option>'); }", $retval);
} else {
$pdate = $r_array[1];
if ($retval == "") {
$retval=$delim;
$retval = str_replace(" }", " var theseoptions='<select style=background-color:yellow; id=" . permalinkit($ourtitle) . " onchange=window.open(this.value,\"_blank\"); title=\"Is mentioned by\"><option value=\"\">This tutorial is mentioned by ...</option></select>'; }", $retval);
$retval = str_replace(" }", " var theseopts='<select si' + 'ze=0 style=width:100%;background-color:#f0f0f0; class=select_ms id=z" . permalinkit($ourtitle) . " onchange=changed(this.value,ocb); title=\"Is part of a blog posting thread ... and you can select multiple tutorials to show\"></selec' + 't>'; }", $retval);
}
if ($r_array[3] != "0") $retval = str_replace(" }", " theseoptions=theseoptions.replace('</select>','<option value=https://www.rjmprogramming.com.au/ITblog/" . permalinkit($r_array[0]) . ">" . $r_array[0] . "</option></select>'); }", $retval);
if ($criteria != "") {
if (str_replace($criteria, "", $r_array[0]) != $r_array[0] && $r_array[4] != "0") {
$found = true;
$isize++;
$retval = str_replace(" }", " isize++; theseopts=theseopts.replace(' size=' + eval(-1 + isize) + ' ', ' size=' + isize + ' ').replace('>','><option value=https://www.rjmprogramming.com.au/ITblog/" . permalinkit($r_array[0]) . ">" . $r_array[0] . pluckfirstreal($r_array[2]) . "</option>'); }", $retval);
}
}
}
}
if ($retval != "") {
if (!$found) {
$retval = str_replace(" }", " theseopts=''; }", $retval);
} else {
$retval = str_replace(" }", " theseoptions+=(' ' + theseopts); }", $retval);
}
$retval = str_replace(" }", " parent.document.getElementById('d" . permalinkit($ourtitle) . "').innerHTML=theseoptions; parent.checkclass(\"\"); }", $retval);
}
}
mysql_close($link); // close the MySql database connection
if ($retval != "") {
if ($secresult != "") {
$retval=str_replace("></selec' + 't>';", "></selec' + 't>' + '" . $secresult . "'; ", $retval);
}

echo $retval; // this get communicated back to TwentyTen theme's header.php changes as explained below ...
}

?>

… teaming up with this blog’s TwentyTen theme’s (good ol’) header.php changes (to suit above) that go

<?php

var rppspana=null;

function rpcheck() {
if (rppspana == null) {
var h3sare=document.getElementsByTagName('h3');
for (var ih3sare=0; ih3sare<h3sare.length; ih3sare++) {
if (('' + h3sare[ih3sare].innerHTML).indexOf('cent Post') != -1) { rppspana=h3sare[ih3sare]; }
}
}
if (rppspana != null && document.getElementById('xdrpl')) {
if (rppspana.innerHTML.indexOf('cent Post') != -1 && document.getElementById('xdrpl').innerHTML != '') {
var dx=document.getElementById('xdrpl').innerHTML;
document.getElementById('xdrpl').innerHTML='';
rppspana.innerHTML=rppspana.innerHTML.replace('cent Post', 'cent ' + dx + ' Post');
} else {
setTimeout(rpcheck, 4000);
}
} else if (document.getElementById('xdrpl')) {
setTimeout(rpcheck, 4000);
} else if (rppspana != null) {
setTimeout(rpcheck, 4000);
}
}


function preresize_font(aois) {
setTimeout(rpcheck, 3000);
zzzspare=aois.id.replace('t','d');
resize_font();
}

function is_mentioned_by() {
var zspare,xspare,xxspare,ximb,xpspana=docgetclass("entry-title", "h2"); // search URL returns
for (ximb=0; ximb<xpspana.length; ximb++) {
xxspare=xpspana[ximb].innerHTML.replace('</a>','').split('>');
xspare=xxspare[eval(-1 + xxspare.length)];
zspare=xspare.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(" ","-");
if (document.body.innerHTML.indexOf('d' + zspare) == -1) {
xpspana[ximb].innerHTML+=' <div style="display:inline-block;border:3px solid rgba(255,165,0,0.4); background-color:rgba(255,255,0,0.3); " id=cc' + zspare + '><a target=_blank style="cursor:pointer;display:inline-block;text-decoration:none; font-size:12px;" href=//www.rjmprogramming.com.au/slideshow.html?title=' + encodeURIComponent(xspare) + ' " title="Cut to the Chase to (the gist of) ' + (xspare) + '" id=tcc' + zspare + '>✂</a><a target=_blank style="background: rgba(0,255,0,0.3); background: -webkit-linear-gradient(left top, rgba(0,255,0,0.3), rgba(255,255,0,0.3)); background: -o-linear-gradient(bottom right, rgba(0,255,0,0.3), rgba(255,255,0,0.3)); background: -moz-linear-gradient(bottom right, rgba(0,255,0,0.3), rgba(255,255,0,0.3)); background: linear-gradient(to bottom right, rgba(0,255,0,0.3), rgba(255,255,0,0.3)); cursor:pointer;display:inline-block;text-decoration:none;transform: scale(-1, 1); -o-transform: scale(-1, 1); -moz-transform: scale(-1, 1); -ms-transform: scale(-1, 1); -webkit-transform: scale(-1, 1); font-size:12px;" href=//www.rjmprogramming.com.au/slideshow.html?title=' + encodeURIComponent(xspare) + ' " title="Cut to the Chase to (the gist of) ' + (xspare) + '" id=ttcc' + zspare + '>🏃🏾‍♀️🏃🏼‍♂️</a><iframe style=display:none; id=icc' + zspare + ' src=></iframe></div>';
xpspana[ximb].innerHTML+=' <div style="display:inline; background-color:rgba(255,255,0,0.3);" id=d' + zspare + '><a style="cursor:pointer;display:inline;text-decoration:none; border:2px solid yellow;" onclick=" preresize_font(this); document.getElementById(this.id.replace(String.fromCharCode(116),String.fromCharCode(105))).src=' + "'" + '//www.rjmprogramming.com.au/PHP/is_mentioned_by.php?title=' + encodeURIComponent(xspare) + "'" + '; setTimeout(precheckclass,3000); " title="' + (xspare) + ' is mentioned by ..." id=t' + zspare + '>☞</a><iframe style=display:none; id=i' + zspare + ' src=></iframe></div>';
}
}
xpspana=docgetclass("entry-title", "h1"); // real blog postings
for (ximb=0; ximb<xpspana.length; ximb++) {
xxspare=xpspana[ximb].innerHTML.replace('</a>','').split('>');
xspare=xxspare[eval(-1 + xxspare.length)];
zspare=xspare.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(" ","-");
if (document.body.innerHTML.indexOf('d' + zspare) == -1) {
xpspana[ximb].innerHTML+=' <div style="display:inline-block;border:3px solid rgba(255,165,0,0.4); background-color:rgba(255,255,0,0.3); " id=cc' + zspare + '><a target=_blank style="cursor:pointer;display:inline-block;text-decoration:none; font-size:12px;" href=//www.rjmprogramming.com.au/slideshow.html?title=' + encodeURIComponent(xspare) + ' " title="Cut to the Chase to (the gist of) ' + (xspare) + '" id=tcc' + zspare + '>✂</a><a target=_blank style="background: rgba(0,255,0,0.3); background: -webkit-linear-gradient(left top, rgba(0,255,0,0.3), rgba(255,255,0,0.3)); background: -o-linear-gradient(bottom right, rgba(0,255,0,0.3), rgba(255,255,0,0.3)); background: -moz-linear-gradient(bottom right, rgba(0,255,0,0.3), rgba(255,255,0,0.3)); background: linear-gradient(to bottom right, rgba(0,255,0,0.3), rgba(255,255,0,0.3)); cursor:pointer;display:inline-block;text-decoration:none;transform: scale(-1, 1); -o-transform: scale(-1, 1); -moz-transform: scale(-1, 1); -ms-transform: scale(-1, 1); -webkit-transform: scale(-1, 1); font-size:12px;" href=//www.rjmprogramming.com.au/slideshow.html?title=' + encodeURIComponent(xspare) + ' " title="Cut to the Chase to (the gist of) ' + (xspare) + '" id=ttcc' + zspare + '>🏃🏾‍♀️🏃🏼‍♂️</a><iframe style=display:none; id=icc' + zspare + ' src=></iframe></div>';
xpspana[ximb].innerHTML+=' <div style="display:inline; background-color:rgba(255,255,0,0.3);" id=d' + zspare + '><a style="cursor:pointer;display:inline;text-decoration:none; border:2px solid yellow;" onclick=" preresize_font(this); document.getElementById(this.id.replace(String.fromCharCode(164),String.fromCharCode(151))).src=' + "'" + '//www.rjmprogramming.com.au/PHP/is_mentioned_by.php?title=' + encodeURIComponent(xspare) + "'" + '; " setTimeout(precheckclass,3000); title="' + (xspare) + ' is mentioned by ..." id=t' + zspare + '>☞</a><iframe style=display:none; id=i' + zspare + ' src=></iframe></div>';
}
}
}

?>

… to move this newly created “Modified” (select element) dropdown from the Blog Posting content area over to the title of the Recent Posts widget to become that “Recent Posts” dropdown populated with a week’s worth of modified date changed blog posting titles that if selected navigate the user onto that blog posting.


Previous relevant WordPress Is Mentioned By Posting Order Tutorial is shown below.

WordPress Is Mentioned By Posting Order Tutorial

WordPress Is Mentioned By Posting Order Tutorial

We are revisiting the WordPress Blog “Is Mentioned By” functionality talked about at WordPress Is Mentioned By Posting Thread Tutorial for a few reasons …

  1. the order of blog postings that could end up on dropdowns as a result of this PHP code was not always chronological … and …
  2. the … “glimpse into” wording on the dropdown options told us (the users) nothing … and …
  3. the navigation off a user selected dropdown option was flaky and sporadic

… so let’s talk about these in more depth below …

  1. the order of blog postings that could end up on dropdowns as a result of this PHP code was not always chronological … so … we changed is_mentioned_by.php‘s central bit of SELECT (DML) SQL as per
    <?php

    $res = mysql_query("SELECT " . $tname . ".post_title, " . $tname . ".guid, " . $tname . ".post_content, LOCATE('" . $ourtitle . "'," . $tname . ".post_content) as tfind, LOCATE('" . $ourother . "'," . $tname . ".post_title) as tother, " . $tname . ".post_date as post_date FROM " . $tname . "
    WHERE " . $tname . ".post_status = 'publish' " . "
    AND (1 = 1 OR LOWER(" . $tname . ".post_title) != LOWER('" . $ourtitle . "')) " . "
    AND (" . $tname . ".post_content like CONCAT(CONCAT('%?p='," . $tname . ".guid), '%') " . "
    OR " . $tname . ".post_content like '%" . str_replace('youllneverfindthis','%',permalinkit($ourtitle)) . "%' " . "
    OR " . $tname . ".post_content like '%" . str_replace('youllneverfindthis','%',$ourother) . "%' " . "
    OR " . $tname . ".post_content like '%" . str_replace('youllneverfindthis','%',$ourtitle) . "%') UNION SELECT 'Code Download Table' as post_title, " . $tname . ".post_content as guid, '' as post_content, 1 as tfind, 0 as tother, CURTIME() as post_date FROM " . $tname . "
    WHERE " . $tname . ".post_status = 'publish' " . "
    AND LOWER(" . $tname . ".post_title) = LOWER('" . $ourtitle . "') " . "
    AND " . $tname . ".post_content like '%GETME%' ORDER BY post_date ");

    ?>
    … noting that ORDER BY clause fields should appear in the (SELECT) column list, and we chose to put it at the end (of that list) to avoid any array indexing code changes
  2. the … “glimpse into” wording on the dropdown options told us (the users) nothing … so … we changed is_mentioned_by.php‘s “function pluckfirstreal” as per
    <?php

    function pluckfirstreal($pcont) {
    $xpcont=$pcont;
    if (strpos($xpcont, "[/caption]</p>") !== false) {
    $xpcont=explode("[/caption]</p>", $pcont)[1];
    } else if (strpos($xpcont, "[/caption]") !== false) {
    $xpcont=explode("[/caption]", $pcont)[1];
    }

    $paras = explode("</p", str_replace("<p", "</p", $xpcont));
    if (sizeof($paras) > 2) {
    $oth = explode("<", $paras[1]);
    $retval = " ... ";
    for ($i=0; $i<sizeof($oth); $i++) {
    $huh = explode(">", $oth[$i]);
    $retval .= str_replace("'", "`", str_replace("}", " ", str_replace("{", " ", $huh[-1 + sizeof($huh)])));
    }
    return substr($retval,0,200);
    }
    return "";
    }

    ?>
  3. the navigation off a user selected dropdown option was flaky and sporadic … so … in (good ol’) header.php of the WordPress Blog TwentyTen theme folder we changed
    <?php

    function changed(inval,intxt) {
    if (1 == 1 || navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
    if (callwhat.length == 0) {
    parentwino(inval,intxt.toLowerCase(),'');
    }
    }

    if (callwhat.length > 1) {
    if (prevxcmd != "") {
    eval(prevxcmd);
    } else if (prevcmd != "") {
    eval(prevcmd.replace("''","'top=50,left=50,width=600,height=600'"));
    }
    prevxcmd="parentwino('" + inval + "','" + intxt.toLowerCase() + "','top=50,left=50,width=600,height=600')";
    prevcmd="";
    } else if (callwhat.length == 1) {
    if (sitlist.indexOf(',') != -1) {
    prevcmd="";
    prevxcmd="";
    var invala=sitlist.split(',');
    for (var ip=0; ip<invala.length; ip++) {
    if (prevxcmd != "") {
    eval(prevxcmd);
    } else if (prevcmd != "") {
    eval(prevcmd.replace("''","'top=50,left=50,width=600,height=600'"));
    }
    prevxcmd="parentwino('" + invala[ip] + "','" + intxt.toLowerCase() + "','top=50,left=50,width=600,height=600')";
    prevcmd="";
    }
    } else if (1 == 1) {
    parentwino(inval,intxt.toLowerCase(),'');
    } else {
    if (prevcmd != "") {
    eval(prevcmd);
    } else if (prevxcmd != "") {
    eval(prevxcmd.replace("'top=50,left=50,width=600,height=600'", "''"));
    }
    prevcmd="parentwino('" + inval + "','" + intxt.toLowerCase() + "','')";
    prevxcmd="";
    }
    }
    }

    function antiaway() {
    if (document.getElementById('hfloater') && document.getElementById('aaway')) {
    document.getElementById('hfloater').innerHTML=document.getElementById('hfloater').innerHTML.replace(' ' + document.getElementById('aaway').outerHTML, '');
    }
    }


    function parentwino(a, b, c) {
    var woisp=null, eqas=null;
    if (c == "") {
    try {
    if (woisp == null && document.getElementById('hfloater')) { // && !navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
    document.getElementById('hfloater').innerHTML+=' <a id="aaway" target="_blank" href="' + a + '" style="display:none;">WOpen</a>';
    document.getElementById('aaway').click();
    setTimeout(antiaway, 4300);
    } else {
    woisp=window.open(a,b);
    }
    } catch(eqas) {
    woisp=null;
    }

    return woisp; //window.open(a,b);

    } else {
    try {
    if (woisp == null && document.getElementById('hfloater')) { // && !navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
    document.getElementById('hfloater').innerHTML+=' <a id="aaway" target="_blank" href="' + a + '" style="display:none;">WOpen</a>';
    document.getElementById('aaway').click();
    setTimeout(antiaway, 4300);
    } else {
    woisp=window.open(a,b,c);
    }
    } catch(eqas) {
    woisp=null;
    }
    }

    return woisp; //window.open(a,b,c);
    }

    ?>
    … helping reduce the amount of Javascript window.open we call (and use)
  4. To try this, try the “emoji button” above.


    Previous relevant WordPress Is Mentioned By Posting Thread Tutorial is shown below.

    WordPress Is Mentioned By Posting Thread Tutorial

    WordPress Is Mentioned By Posting Thread Tutorial

    At this blog we are keen for users to learn one off ideas and on occasions linked “threaded” (or blog postings of a theme) ones.

    The last WordPress Blog (TwentyTen theme) “Is Mentioned by” functionality is good for certain scenarios, but what if you arrive at a blog posting that is part of a “threaded” series of blog postings? We normally show you older ones and that’s fine. But I’m not so much talking about the avid reader here who follows it “hot off the press” but more the users finding things off search engines, coming to this blog, and the posting they get to may not be the last in the “thread”. Below the blog posting they log in at, the reader can read all the information of the past to do with the thread, but what of getting it into context, relative to the entire “thread” up to that point, or out more recently “beyond” it? Well, that is the purpose of today’s extension of functionality to the WordPress Blog “Is Mentioned by” functionality we last finished up discussing with WordPress Is Mentioned By Code Download Progress Tutorial as shown below.

    Surprisingly the WordPress Blog TwentyTen theme’s header.php does not need to change to make this happen. The PHP that queries the WordPress MySql database can handle all the change today, and ended up looking like is_mentioned_by.php changing this way.

    The method is to …

    • query the MySql database with a more complex query that results in data for …
    • “is mentioned by” and “is part of a blog posting thread” are represented by two separate dropdowns … and …
    • in order to show you the context of the current blog posting in a blog posting “thread” we have an HTML select size property set to the number of dropdown records … alas, mobile platforms do not honour the size property regarding their display of dropdowns … display and set the selected property to the current blog posting’s entry, with this entry consisting of …
    • a blog posting title and the first paragraph of content are put into the “is part of a blog posting thread” dropdown option text to enhance the context for the user, shown this list with the most recent posting first down in reverse chronological order to the older blog posting of the “thread” down the bottom

    Below in bold is how the MySql query got more complex …


    $res = mysql_query("SELECT " . $tname . ".post_title, " . $tname . ".guid, " . $tname . ".post_content, LOCATE('" . $ourtitle . "'," . $tname . ".post_content) as tfind, LOCATE('" . $ourother . "'," . $tname . ".post_title) as tother FROM " . $tname . "
    WHERE " . $tname . ".post_status = 'publish' " . "
    AND (1 = 1 OR LOWER(" . $tname . ".post_title) != LOWER('" . $ourtitle . "')) " . "
    AND (" . $tname . ".post_content like CONCAT(CONCAT('%?p='," . $tname . ".guid), '%') " . "
    OR " . $tname . ".post_content like '%" . str_replace('youllneverfindthis','%',permalinkit($ourtitle)) . "%' " . "
    OR " . $tname . ".post_content like '%" . str_replace('youllneverfindthis','%',$ourother) . "%' " . "
    OR " . $tname . ".post_content like '%" . str_replace('youllneverfindthis','%',$ourtitle) . "%') UNION SELECT 'Code Download Table' as post_title, " . $tname . ".post_content as guid, '' as post_content, 1 as tfind, 0 as tother FROM " . $tname . "
    WHERE " . $tname . ".post_status = 'publish' " . "
    AND LOWER(" . $tname . ".post_title) = LOWER('" . $ourtitle . "') " . "
    AND " . $tname . ".post_content like '%GETME%'");

    where the (new) variable $ourother is set to being the first few words of the blog posting title.

    In order to “pluck out” one paragraph from the content (of variable $pcont) we use …


    function pluckfirstreal($pcont) {
    $paras = explode("</p", str_replace("<p", "</p", $pcont));
    if (sizeof($paras) > 2) {
    $oth = explode("<", $paras[1]);
    $retval = " ... ";
    for ($i=0; $i<sizeof($oth); $i++) {
    $huh = explode(">", $oth[$i]);
    $retval .= str_replace("'", "`", str_replace("}", " ", str_replace("{", " ", $huh[-1 + sizeof($huh)])));
    }
    return substr($retval,0,200);
    }
    return "";
    }

    … to append to the blog posting title as the user’s dropdown text for contextual purposes.

    Stop Press

    Was this a Bad Day at Black Rock? We revisit this work with WordPress Is Mentioned By Posting Order Tutorial.


    Previous relevant WordPress Is Mentioned By Code Download Progress Tutorial is shown below.

    WordPress Is Mentioned By Code Download Progress Tutorial

    WordPress Is Mentioned By Code Download Progress Tutorial

    There are various approaches with user experience (UX) considerations regarding putting a web application user at their ease as they wait for a response. I’m talking about where the response is coming from a separate serverside script doing something that may take a while, such as querying a database for instance, and that responder will do the work back at its parent to say it has finished its job. Given all this, you may be asking “What is there left to worry about, with the user, if the responder is doing this?”. Well, there is that amount of time between …

    • clicking the action item of HTML at the parent … all the way through to …
    • the responder “child”, often serverside code (for us, PHP), finishing its work and fixing the parent webpage to indicate that it has finished its work

    Now, we all hope this time period is short, and, hopefully, most of the time, it is short, and perhaps it is “overkill” to worry about doing anything here. However there are some things to consider …

    • if you are writing commercial software code there could well be an UX expectation that you would code for this, to keep the user informed at all times … and …
    • it could be the case that the database crashes at that very “clicking” moment, and though your responder may not get back to the parent with information, at least if you’ve coded for the scenario back at the client, at least the user will know something is being attempted, even if it doesn’t appear to be succeeding, which is less frustrating than getting no information at all, which could be mistaken for software code “hanging” … definitely not a great UX feel, or look

    Now there are a variety of client code approaches for showing “progress”, such as …

    • additional progress bar … like
    • additional meter … like
    • something you just clicked, changing appearance cyclically over time

    That last one appeals to us for a recent bit of functionality we added to this WordPress Blog you are reading, as well as for the fact that what we show “progress” on is difficult to numerically quantify as far as completion time is concerned, and so the first two above are not as suitable. We actually change the HTML div element font size to make an emoji “button” pressed “throb” while the user waits for the PHP and MySql query to respond back. Do you remember our thread of blog posting that used to end with WordPress Is Mentioned By Code Download CSS Tutorial? That’s the functionality we’re talking about today, as we do at WordPress 4.1.1’s WordPress Is Mentioned By Code Download Progress Tutorial.

    Now reading that previous link’s content below, you may see that we have considered the scenario of the child responder not finding any mentions and responding with …

    Sadly, this tutorial is not mentioned by any others, yet

    … which is good, but it may either take a long time for the responder to work this out, or, as we’ve indicated above, the responder’s mechanism for finding out may fail, and we’re dealing with that, from the perspective of the user looking at the client webpage, and waiting for information after clicking that emoji link we introduced when we did that work in that tutorial.

    We decided to prove our method with a “proof of concept” local MAMP web server HTML and Javascript and CSS parent taking …

    1. one blog posting bit of HTML body HTML …
    2. the is_mentioned_by function renamed to was_is_mentioned_by and a new is_mentioned_by worked until it works, tested via the Safari web browser’s Develop menu’s Web Inspector (similar to the Firefox Firebug web inspector we tend to go on and on and on and on and on and on about at this blog)

    … that took the form of this imb_poc.html … supervising the reworked PHP serverside code is_mentioned_by.php on MAMP that is, deliberately, made to …

    • wreck the connection to MySql … and then intervene to …
    • change the die message to instead sleep(18) before showing “Sadly, this tutorial is not mentioned by any others, yet” … at which time our changes should look good UX wise for the user

    We must stress this about “proof of concept”. Don’t waste time on “proof of concept” with too much fine grain simulation of the original scenario, if it is not involved in what you are proving, that is different, and is what is being tested here. See how it can even be that it suits the purposes of some “proof of concept” scenarios, like today’s, that you wreck the MySql connection in a progress “proof of concept” scenario, for example?

    We made these WordPress Blog changes in good ol’ TwentyTen themed header.php, as we so often do, and show changed code bold below …


    <script>
    var ourfs=21, zzzspare='';
    // ...
    // lots of other Javascript code
    // ...
    // down to ...

    function preresize_font(aois) {
    zzzspare=aois.id.replace('t','d');
    resize_font();
    }

    function resize_font() {
    ourfs=eval((ourfs + 5) % 45);
    if (document.getElementById(zzzspare).innerHTML.indexOf('<select ') != -1) {
    ourfs=21;
    } else {
    setTimeout(resize_font, 500);
    }
    document.getElementById(zzzspare).style.fontSize='' + ourfs + 'px';
    }

    function is_mentioned_by() {
    var zspare,xspare,xxspare,ximb,xpspana=docgetclass("entry-title", "h2");
    for (ximb=0; ximb<xpspana.length; ximb++) {
    xxspare=xpspana[ximb].innerHTML.replace('</a>','').split('>');
    xspare=xxspare[eval(-1 + xxspare.length)];
    zspare=xspare.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(" ","-");
    if (document.body.innerHTML.indexOf('d' + zspare) == -1) xpspana[ximb].innerHTML+=' <div style="display:inline;" id=d' + zspare + '><a style="cursor:pointer;display:inline;text-decoration:none; border:2px solid yellow;" onclick=" preresize_font(this); document.getElementById(this.id.replace(String.fromCharCode(116),String.fromCharCode(105))).src=' + "'" + 'http://www.rjmprogramming.com.au/PHP/is_mentioned_by.php?title=' + encodeURIComponent(xspare) + "'" + '; " title="' + (xspare) + ' is mentioned by ..." id=t' + zspare + '>☞</a><iframe style=display:none; id=i' + zspare + ' src=></iframe></div>';
    }
    xpspana=docgetclass("entry-title", "h1");
    for (ximb=0; ximb<xpspana.length; ximb++) {
    xxspare=xpspana[ximb].innerHTML.replace('</a>','').split('>');
    xspare=xxspare[eval(-1 + xxspare.length)];
    zspare=xspare.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(" ","-");
    if (document.body.innerHTML.indexOf('d' + zspare) == -1) xpspana[ximb].innerHTML+=' <div style="display:inline;" id=d' + zspare + '><a style="cursor:pointer;display:inline;text-decoration:none; border:2px solid yellow;" onclick=" preresize_font(this); document.getElementById(this.id.replace(String.fromCharCode(164),String.fromCharCode(151))).src=' + "'" + 'http://www.rjmprogramming.com.au/PHP/is_mentioned_by.php?title=' + encodeURIComponent(xspare) + "'" + '; " title="' + (xspare) + ' is mentioned by ..." id=t' + zspare + '>☞</a><iframe style=display:none; id=i' + zspare + ' src=></iframe></div>';
    }
    }

    … where is_mentioned_by function is called by the document.body onload event, to trigger all this. You can see some of all this with today’s tutorial picture, and by trying to click some of the right pointing emoji “is mentioned by” functionality “buttons” you see next to Blog Posting Titles around you here at this WordPress TwentyTen themed blog, but here’s hoping you don’t see too many throbbing emojis … heaven forbid?!

    Stop Press

    More regarding this CSS cursor property tomorrow.


    Previous relevant WordPress Is Mentioned By Code Download CSS Tutorial is shown below.

    WordPress Is Mentioned By Code Download CSS Tutorial

    WordPress Is Mentioned By Code Download CSS Tutorial

    A few things come together for today’s user experience (UX) inspired tutorial whereby …

    … to make what we are doing stand out more for the user, who may “swim” in a large table devoid of any styling to focus their attention.

    We’ll leave you with modified PHP, that writes out the HTML Code Download Table manipulator, you could call getmelist.php and which changed in this way to make the Code Download Table be more usercentric with its presentation of hashtagged calls linking a WordPress Blog Posting at this blog with a particular piece of software code of interest in our Code Download Table.

    Hope you try this functionality out for yourself.


    Previous relevant WordPress Is Mentioned By Code Download Navigation Tutorial is shown below.

    WordPress Is Mentioned By Code Download Navigation Tutorial

    WordPress Is Mentioned By Code Download Navigation Tutorial

    We’re following up on some recent WordPress navigation logic today, that we started with WordPress Is Mentioned By Navigation Primer Tutorial as shown below, for blog posting relationships between …

    • A blog posting being referred to … back, optionally, as a link, to …
    • A blog posting that mentioned that blog posting currently being viewed

    … and looking at this premise, it stands to reason that as helpful as this concept looks on paper, if a regular reader expects a recent posting be referred to by others “hot off the press” they’d be expecting quite a lot, and though what they get in this scenario …

    Sadly, this tutorial is not mentioned by any others, yet

    … probably does a good job tweaking them to the dilemma of “hot off the press” being “too recent to be referred to” it still remains a disappointment, perhaps. So, thinking a tad laterally on this, what is going to help out here will be to particularize the scenario for what we do around here … and am sorry if this annoys, but we are showing a line of thinking here … and allow for Blog Posts that contain the word “GETME” … our favourite code download mechanism around here … to add a “Code Download Table” dropdown option, that if selected will lob the user directly onto the RJM Programming Code Download Table entry for the first “GETME” file link found in that blog posting. This additional scouring of the MySql database, that utilizes the SQL UNION operator (the “adding an extra clause or paragraph” SQL operator, we like to think of it as) with its query, will not be relevant to all unmentioned blog postings, but it will help those that talk about software coding, which is quite a few.

    That functionality had us looking back at how the Code Download Table was constructed in terms of its hashtagging when we discussed PHP Blog Summary Follow Up Tutorial. In this way, we had a first try at …

    • … using the hashtagging for a date … as you see with these changes to is_mentioned_by.php at the left hand column of the Code Download Table … did a couple of unit tests seeing the first one work, the second one work if you take it a day back, and the third one not work at all, at which point it tweaked with us that the date in the Code Download Table is a date reflected by the software code file’s modified date, not the WordPress Blog Posting publication date, that we can derive off our amended query … so that being less friendly than we envisaged we end up …
    • … using the very interesting hashtagging that particularizes the filename, where the read file extension (minus all the “GETME” and “-“‘s and “_”‘s that is) is taken out of the prefix to the hashtag, and made into a suffix … like “analogue_clock.-GETMEhtml” for Analogue Clock Timezone Tutorial that is exemplified in today’s tutorial picture and as you can see the changes for at this is_mentioned_by.php link

    So it panned out to make this happen the original Code Download Table code did not need any tweaking, not good ol’ WordPress TwentyTen theme header.php … just is_mentioned_by.php … but we hope you try out clicking some “White Right Pointing Index” emoji …

    … at this WordPress blog sometime soon.

    Did you know?

    What gives with the &tsp=[someBigNumber] GET parameter … like is yellow highlighted in today’s tutorial picture … in the “Code Download Table” lookup URLs? This is so that we end up with different URLs each time a user accesses this functionality. This is because web browsers often try to help you out with speeding up your browsing, and use the web browser cache to “regurgitate” a previously visited URL should that have happened since the last clearing of any web browser cache, to “slap” the cache version quickly on the screen. But we don’t want any “slapping” to go on around our functionality today, and a way to force the web browser to reconsider the real lookup, and go back to the real web server again for data, is to make your URL be unique. A curiosity here you can try is to use something like a local MAMP (for Mac or EasyPHP for Windows) local web server to, for an image file called image.jpg that is put into the Apache web server’s Document Root

    1. see the image in your favoured web browser with the URL http://localhost:8888/image.jpg … then …
    2. change that image somehow with an image editor … and …
    3. refresh, or revisit the image with the URL http://localhost:8888/image.jpg … and you’ll probably see the cached web server version … unless you haven’t got web browser caching going … so amend this to …
    4. revisit the image with the URL http://localhost:8888/image.jpg?random=7456536 … and this time we think you’ll see the amended image that happened with your image editing … and yes, you can add GET parameters to your URLs even for image URLs (often, most helpfully with image URLs, actually)

    Previous relevant WordPress Is Mentioned By Navigation Primer Tutorial is shown below.

    WordPress Is Mentioned By Navigation Primer Tutorial

    WordPress Is Mentioned By Navigation Primer Tutorial

    We’ve written some new WordPress navigation logic today, for blog posting relationships between …

    • A blog posting being referred to … back, optionally, as a link, to …
    • A blog posting that mentioned that blog posting currently being viewed

    … done, because we see that it is not only the “vertical” type linking of blog postings into a “thread” that helps understanding … we hope … but also to jump around among commonalities between concepts (like “horizontal” “degrees of separation”), perhaps. This functionality involves MySql database queries, and is best suited to a user clicks something (rather than pre-emptive content loading) to reach the functionality so that our database query has a post title to work with, and also so that every blog post does not overload the web server with a query ahead of time whose work may not be accessed anyway. The something that is clicked is an HTML a tag whose “look” is an Emoji.

    We also wrote a proof of concept, before applying that proof of concept live. To us, a “proof of concept” is not much use if it is as involved as what it is trying to prove, and in today’s scenario we did a proof of concept for two scenarios, that being …

    • a blog posting that was referred to by others … and …
    • a blog posting that wasn’t … doh! … but if you don’t change something about the “look of things” you’ll confuse the user as to whether the web application just took notice of their click (via the onclick event) … so this is of mild importance, but we grant you that it is not as important as the first scenario’s workings

    We quite often adopt a proof of concept scenario which tests the workings of a child (often in an HTML iframe element), in this case, PHP server side, piece of code, by introducing a simplified and pared down parent, in this case HTML piece of code. At the end of successful testing you are left with a good, and close to totally suitable child piece of code, to slot into the functionality of the real and live parent code.

    That proof of concept was definitely a good “unit testing” thing to do, but nevertheless, don’t feel overconfident as you go live … living with other real “goings on” on the live website are things to consider, and test … it took us half an hour to iron out these types of issues.

    The other good thing to have on your side is a Web Inspector like on Safari, similar to the Firefox Firebug web inspector we tend to go on and on and on and on and on and on about at this blog. We’re giving you a Safari rest on that today, and we want to show you an “early days” view …

    … in the proof of concept help that the Safari Web Inspector gave us, delving in under the called (by HTML parent) PHP’s actions. This type of information makes server side programming, like you do with PHP, that much easier … much easier than ideas where you write out web server files, with information, for your own benefit, or the other one we often like, during testing, is to write information out to top.document.title or perhaps to an alert box or to use console.log (on the debugging window, down the bottom).

    You’ll never guess where we made this change to our WordPress TwentyTen themed blog? Give up … yes, good ol’ header.php changed in the bold Javascript new function way below …



    function is_mentioned_by() {
    var zspare,xspare,xxspare,ximb,xpspana=docgetclass("entry-title", "h2");
    for (ximb=0; ximb<xpspana.length; ximb++) {
    xxspare=xpspana[ximb].innerHTML.replace('</a>','').split('>');
    xspare=xxspare[eval(-1 + xxspare.length)];
    zspare=xspare.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(" ","-");
    if (document.body.innerHTML.indexOf('d' + zspare) == -1) xpspana[ximb].innerHTML+=' <div style="display:inline;" id=d' + zspare + '><a style="display:inline;text-decoration:none; border:2px solid yellow;" onclick=" document.getElementById(this.id.replace(String.fromCharCode(116),String.fromCharCode(105))).src=' + "'" + 'http://www.rjmprogramming.com.au/PHP/is_mentioned_by.php?title=' + encodeURIComponent(xspare) + "'" + '; " title="' + (xspare) + ' is mentioned by ..." id=t' + zspare + '>&#9758;</a><iframe style=display:none; id=i' + zspare + ' src=></iframe></div>';
    }
    xpspana=docgetclass("entry-title", "h1");
    for (ximb=0; ximb<xpspana.length; ximb++) {
    xxspare=xpspana[ximb].innerHTML.replace('</a>','').split('>');
    xspare=xxspare[eval(-1 + xxspare.length)];
    zspare=xspare.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(" ","-");
    if (document.body.innerHTML.indexOf('d' + zspare) == -1) xpspana[ximb].innerHTML+=' <div style="display:inline;" id=d' + zspare + '><a style="display:inline;text-decoration:none; border:2px solid yellow;" onclick=" document.getElementById(this.id.replace(String.fromCharCode(164),String.fromCharCode(151))).src=' + "'" + 'http://www.rjmprogramming.com.au/PHP/is_mentioned_by.php?title=' + encodeURIComponent(xspare) + "'" + '; " title="' + (xspare) + ' is mentioned by ..." id=t' + zspare + '>&#9758;</a><iframe style=display:none; id=i' + zspare + ' src=></iframe></div>';
    }
    }

    … called by …


    <body onload=" checkonl(); setTimeout(initpostedoncc, 3000); widgetcon(); precc(); courseCookies(); cookie_fonts(); is_mentioned_by(); " <?php body_class(); ?>>

    Team that with some new PHP source code you could call is_mentioned_by.php and you have today’s new WordPress blog TwentyTen theme “Is Mentioned By” functionality.

    The proof of concept parent HTML was is_mentioned_by.html for your perusal.

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

Canvas Methods DrawImage Method Tutorial

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.

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

Clairvoyance Game IP Address Links Tutorial

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.

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

Clairvoyance Game Textarea Onblur Tutorial

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.

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

Canvas Methods Revisit Tutorial

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.

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

Clairvoyance Game Element Type Tutorial

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.

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

PHP Intl Class AlmaLinux Install Tutorial

PHP Intl Class AlmaLinux Install Tutorial

PHP Intl Class AlmaLinux Install Tutorial

We’re hoping you noticed less, or not at all, that the RJM Programming AlmaLinux web server got upgraded recently (for about the third or fourth time) … like within the last month.

Things evolve, involving defaults for Apache/PHP/MySql web servers, particularly in the realm of security, but one that has taken us by surprise, was the lack of …


PHP intl class

… existant in the “out of the box” arrangements, that we just discovered yesterday, when revisiting PHP Intl Class Peer to Peer Locale Variants World Map Tutorial. Programmers get a “primeval feeling of dread” when the “when of life” is taken away from them, regarding web server goings on … if you’ll pardon the “shock, horror” over the top reaction, here. Anyway?!

Of course, we blamed our own code, and were confused, legitimately as we think it happened, when earlier that day, in another PHP usage, we were getting legitimate results with (PHP code such as) …


$locale = Locale::acceptFromHttp($_SERVER['HTTP_ACCEPT_LANGUAGE']); // thanks to https://www.google.com/search?q=can+php+do+country+location&sca_esv=4533f9585008942f&rlz=1C5OZZY_en&sxsrf=ANbL-n5iGRGQuTQ3m6YQqOsufh5ToxHOUA%3A1779528402624&ei=0nIRaq7sJe-2vr0PhuSBqQM&biw=1432&bih=729&ved=0ahUKEwiunbnyi8-UAxVvm68BHQZyIDUQ4dUDCBA&uact=5&oq=can+php+do+country+location&gs_lp=Egxnd3Mtd2l6LXNlcnAiG2NhbiBwaHAgZG8gY291bnRyeSBsb2NhdGlvbjIFECEYoAEyBRAhGJ8FMgUQIRifBUizNVCyDVioMnABeAGQAQCYAcEBoAGNFKoBBDAuMTa4AQPIAQD4AQGYAhGgAtwUwgIKEAAYRxjWBBiwA8ICBhAAGBYYHsICCxAAGIAEGIoFGIYDwgIFEAAY7wXCAggQABiABBiiBMICBxAhGAoYoAGYAwCIBgGQBgiSBwYxLjE1LjGgB9RDsgcGMC4xNS4xuAfXFMIHBjIuMTAuNcgHKoAIAQ&sclient=gws-wiz-serp
$region = Locale::getRegion($locale) . ' ; ' . Locale::getPrimaryLanguage($locale); // e.g., 'US', 'GB', 'AU'

… and yet, later the same day, on that revisit, it was more like the dreaded …

This page isn’t working
www.rjmprogramming.com.au is currently unable to handle this request.
HTTP ERROR 500

… scenario?! In this circumstance, naturally, we blamed ourselves fully, and have spent half a day, up until ten minutes ago, playing the “blame game” to no effect. What panned out to be the real issue was that the PHP intl class was not activated, nor installed, within the realms of the PHP version 8.1 (and yes, the version to that “1” matters regarding the “dnf” package manager install required).

Help!!! We eventually got to this really useful link, thanks which got us to, in our case, up at the RJM Programming AlmaLinux command line, go …


php -m | grep -i intl # resulted in nothing ... ie. PHP Intl class not installed ... and so, not activated either
dnf search intl # and we used to go "list" rather than "search" ... make such enquiries "your friend" !!!
php -v # resulted in PHP 8.1.34 (cli) (built: Apr 8 2026 00:00:00) (NTS) Copyright (c) The PHP Group Zend Engine v4.1.34, Copyright (c) Zend Technologies
dnf install ea-php81-php-intl.x86_64
php -m | grep -i intl # then shows "intl"

… to fix the problems regarding PHP intl class usage web application like this one and others of a similar ilk.


Previous relevant PHP Intl Class Peer to Peer Locale Variants World Map Tutorial is shown below.

PHP Intl Class Peer to Peer Locale Variants World Map Tutorial

PHP Intl Class Peer to Peer Locale Variants World Map Tutorial

Today, further to yesterday’s PHP Intl Class Peer to Peer Locale Variants Tutorial, we seek to answer questions such as …

Which countries in the world speak Arabic?

… and with a changed i_eg.js supporting a changed i_variant_eg.php and with the inhouse PHP intl class web application such questions are easier to answer on a Google Chart Geo Chart world map we start presenting.

And regarding “too thin” table cells hosting iframe hosting variant Current Datetimes, we also now offer onclick or oncontextmenu right click ways to show a “blow up view” of that same data in a table row below the top table row cells, which you can see and try for yourself below.

Now, in a data display sense, you might ask (via entering into yellow Locale textbox)

For a given Language can you show me Current Datetime in all the Countries of relevance using it?

Example below is for de German

For a given Script type can you show me Current Datetime in all the Countries of relevance using it?

Example below is for Latn script type

For a given Country can you show me Current Datetime in all the Languages of relevance to it?

Example below is for CY Cyprus


Previous relevant PHP Intl Class Peer to Peer Locale Variants Tutorial is shown below.

PHP Intl Class Peer to Peer Locale Variants Tutorial

PHP Intl Class Peer to Peer Locale Variants Tutorial

We’ve written a new member of “the peerage”, in other words, our inhouse PHP intl class web applications. It gathers variants of an entered Locale into a group we display Current Datetimes for in a series of HTML iframe hosting elements.

And if you’ve been keeping up with the goings on here, from yesterday’s PHP Intl Class Peer to Peer World Map Tutorial, you’ll know that we have code for the external Javascript to automatically change when a new member of “the peerage” is created, and we upload GETME files such as today’s i_variant_eg.php_GETME into place up at the RJM Programming domain as a web application

… with an updated peer to peer dropdown easily able to navigate the user to other web applications of its ilk.


Previous relevant PHP Intl Class Peer to Peer World Map Tutorial is shown below.

PHP Intl Class Peer to Peer World Map Tutorial

PHP Intl Class Peer to Peer World Map Tutorial

All the web applications in the suite of PHP intl class using web applications were capable of making a connection between …

Country Name and ISO-3166 2 letter Country Code suffixing a Locale … and … Emoji Flag

… setting our mind to an “across the board” improvement chance on top of progress up until yesterday’s PHP Intl Class Peer to Peer Serverside Tutorial.

And so, rather than change five members of “the peerage” …

  1. Sorting Words PHP code changed today this way only to reorder the external script call to be placed below the web application Javascript
  2. Language Name PHP code changed today this way only to reorder the external script call to be placed below the web application Javascript
  3. Region Name PHP code changed today this way only to reorder the external script call to be placed below the web application Javascript
  4. Currency PHP code changed today this way only to reorder the external script call to be placed below the web application Javascript
  5. Current Datetime PHP code changed today this way only to reorder the external script call to be placed below the web application Javascript

… in any major way, rather we significantly changed the one i_eg.js as per


// i_eg.js
// RJM Programming - December, 2024
// Allow for peer to peer access amongst i_eg.php i_cur_eg.php i_region_eg.php i_language_eg.php i_sort_eg.php

var thisflagiso='', thisfemoji='';
var candidates="i_eg.php i_cur_eg.php i_region_eg.php i_language_eg.php i_sort_eg.php";
var candidatesd=candidates;
var candidatesdesc="Current_Datetime Currency Region_Name Language_Name Sort_Words";
var candidatesdarr=candidates.replace(/\,/g,' ').split(' ');

var herel=location.search.split('locale=')[1] ? decodeURIComponent(location.search.split('locale=')[1].split('&')[0]) : '';

if (document.head.innerHTML.indexOf('/i_eg.js?') != -1) {
var qs=document.head.innerHTML.split('/i_eg.js?')[1].split('"')[0].split("'")[0].split(' ')[0].split('>')[0];
if (qs.replace(/^rand\=/g,'').indexOf('=') != -1) {
candidates=decodeURIComponent(document.head.innerHTML.split('/i_eg.js?')[1].split('=')[1].split('&')[0].split('#')[0].split('"')[0].split("'")[0]).replace(/\+/g,' ');
}
}

var candidatesarr=candidates.replace(/\,/g,' ').split(' ');

function jorflag(thiscc) {
var lri='ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var dri=['127462','127463','127464','127465','127466','127467','127468','127469','127470','127471','127472','127473','127474','127475','127476','127477','127478','127479','127480','127481','127482','127483','127484','127485','127486','127487'];
var ccsuff='', ccchar=' ', cde='';
for (var iccsuff=0; iccsuff<thiscc.length; iccsuff++) {
ccchar=thiscc.substring(iccsuff, eval(1 + eval('' + iccsuff))).toUpperCase();
ccsuff+=String.fromCodePoint(dri[eval('' + lri.indexOf(ccchar))]); //'&#' + dri[eval('' + lri.indexOf(ccchar))] + ';';
cde='.';
}
if ((document.URL.split('#')[0] + '&').indexOf(encodeURIComponent('_') + thiscc.toUpperCase() + '&') != -1 && herel != '') {
if (thisfemoji == '' && thisflagiso != '') {
ccsuff=ccsuff;
} else {
thisflagiso=thiscc.toUpperCase();
thisfemoji=ccsuff;
setTimeout(geochartit, 20000);
}
}
return ccsuff;
}

function geochartit() {
var hostelt='', bighostelt='', resthostelt='', prefb='', ctynameisnow='';
//alert('0ccsuff');
if (thisfemoji == '' && thisflagiso != '') {
thisfemoji=jorflag(thisflagiso);
}
if (thisfemoji != '' && thisflagiso != '') {
//alert('1ccsuff');
if (!document.getElementById('ageoc') && document.getElementsByTagName('h1')[0].innerHTML.indexOf(thisfemoji) != -1) {
//alert('2ccsuff');
if (document.getElementsByTagName('h1')[0].innerHTML.split(thisfemoji)[0].indexOf('<') != -1) {
prefb=document.getElementsByTagName('h1')[0].innerHTML.split(thisfemoji)[0];
ctynameisnow='%20in%20' + prefb.split('>')[eval(-1 + prefb.split('>').length)].trim() + '%20' + encodeURIComponent(thisfemoji);
//alert('ccsuff');
//bighostelt=document.getElementsByTagName('h1')[0].innerHTML.split('</')[0].split(thisfemoji)[0].split('<')[eval(-1 + document.getElementsByTagName('h1')[0].innerHTML.split('</')[0].split(thisfemoji)[0].split('<').length)];
bighostelt=document.getElementsByTagName('h1')[0].innerHTML.split(thisfemoji)[0].split('<')[eval(-1 + document.getElementsByTagName('h1')[0].innerHTML.split('</')[0].split(thisfemoji)[0].split('<').length)];
hostelt=bighostelt.split(' ')[0].split('>')[0];
resthostelt=document.getElementsByTagName('h1')[0].innerHTML.split(thisfemoji)[1].replace('</' + hostelt + '>', '').split('<')[0];
//alert('Resthostelt=' + resthostelt + ' and hostelt=' + hostelt + ' and bighostelt=' + bighostelt);
}
if (hostelt != '' && document.getElementsByTagName('h1')[0].innerHTML.split(thisfemoji)[0].indexOf('</') == -1) {
//alert('resthostelt=' + resthostelt + ' and hostelt=' + hostelt + ' and bighostelt=' + bighostelt);
if (resthostelt.trim() != '') {
document.getElementsByTagName('h1')[0].innerHTML=prefb + "</" + hostelt + "><a id=ageoc style=cursor:pointer;text-decoration:none; title=GeoChart onclick=\"window.open('//www.rjmprogramming.com.au/PHP/GeoChart/geo_chart.php?title=Where%20Locale%20" + encodeURIComponent(herel) + "%20Lives" + ctynameisnow + "&width=556&height=347&country=Country&popularity=Popularity&data=%20[~" + thisflagiso + '~,2]' + "','_blank','top=200,left=200,width=630,height=600');\">" + thisfemoji + '</a><' + bighostelt.split('>')[0] + '>' + resthostelt + '</' + hostelt + '>';
} else {
//alert(prefb + "</" + hostelt + "><a id=ageoc style=cursor:pointer;text-decoration:none; title=GeoChart onclick=\"window.open('//www.rjmprogramming.com.au/PHP/GeoChart/geo_chart.php?title=Where%20Locale%20" + encodeURIComponent(herel) + "%20Lives&width=556&height=347&country=Country&popularity=Popularity&data=%20[~" + thisflagiso + '~,2]' + "','_blank','top=100,left=100,width=600,height=600');\">" + thisfemoji + '</a>');
document.getElementsByTagName('h1')[0].innerHTML=prefb + "</" + hostelt + "><a id=ageoc style=cursor:pointer;text-decoration:none; title=GeoChart onclick=\"window.open('//www.rjmprogramming.com.au/PHP/GeoChart/geo_chart.php?title=Where%20Locale%20" + encodeURIComponent(herel) + "%20Lives" + ctynameisnow + "&width=556&height=347&country=Country&popularity=Popularity&data=%20[~" + thisflagiso + '~,2]' + "','_blank','top=200,left=200,width=630,height=600');\">" + thisfemoji + '</a>';
}
//alert('0:' + resthostelt + ' ... ' + document.getElementsByTagName('h1')[0].innerHTML);
} else {
document.getElementsByTagName('h1')[0].innerHTML=document.getElementsByTagName('h1')[0].innerHTML.replace(thisfemoji, "<a style=cursor:pointer;text-decoration:none; title=GeoChart onclick=\"window.open('//www.rjmprogramming.com.au/PHP/GeoChart/geo_chart.php?title=Where%20Locale%20" + encodeURIComponent(herel) + "%20Lives&width=556&height=347&country=Country&popularity=Popularity&data=%20[~" + thisflagiso + '~,2]' + "','_blank','top=100,left=100,width=600,height=600');\">" + thisfemoji + '</a>');
thisfemoji='';
thisflagiso='';
//alert('1:' + document.getElementsByTagName('h1')[0].innerHTML);
}
}
}
}


function hthreesel() {
var icv=0, hthreesuffix='', curone='', curdesc='', compone=document.URL.split('?')[0].split('#')[0].split('/')[eval(-1 + document.URL.split('?')[0].split('#')[0].split('/').length)];
var hthreearr=document.getElementsByTagName('h3');

if (herel != '') {
var piso=herel.split('_')[eval(-1 + herel.split('_').length)];
piso=piso.split('-')[eval(-1 + piso.split('-').length)];
if (eval('' + piso.length) == 2 && piso == piso.toUpperCase()) {
thisflagiso=piso;
setTimeout(geochartit, 22000);
}
}


if (eval('' + hthreearr.length) > 0) {
if (hthreearr[0].outerHTML.indexOf('</select>') == -1 && candidates.trim() != '' && eval('' + candidatesarr.length) > 0) {
if ((' ' + candidatesd.replace(/\+/g,' ') + ' ').indexOf(' ' + compone + ' ') != -1) {
curone=compone;
//alert('1:' + compone + ' found at ' + candidatesdarr.indexOf(curone));
curdesc=candidatesdesc.split(' ')[candidatesdarr.indexOf(curone)].replace(/\_/g, ' ');
//alert(curdesc);
}
if (curone == '') {
if ((' ' + candidates.replace(/\+/g,' ') + ' ').indexOf(' ' + compone + ' ') != -1) {
curone=compone;
//alert('11:' + compone);
if (curone.indexOf('i_') == 0 && curone.indexOf('_eg.') != -1) {
curdesc=curone.split('i_')[1].split('_eg.')[0].replace(/\_/g,' ').substring(0,1).toUpperCase() + curone.split('i_')[1].split('_eg.')[0].replace(/\_/g,' ').substring(1).toLowerCase();
}
}
}

hthreesuffix='<select onchange="location.href=this.value;"><option value="' + document.URL.split('?')[0].split('#')[0] + '">Optionally select peer ' + ('to ' + curdesc).replace(/^to\ $/g, '') + ' web application below ...</option></select>';
for (icv=0; icv<candidatesarr.length; icv++) {
if (candidatesdarr.indexOf(candidatesarr[icv]) != -1) {
hthreesuffix=hthreesuffix.replace('</select>', '<option value="/' + candidatesarr[icv] + '">' + ('' + candidatesdesc.split(' ')[candidatesdarr.indexOf(candidatesarr[icv])]).replace(/\_/g,' ') + '</option></select>');
} else if (candidatesarr[icv].indexOf('i_') == 0 && curone.indexOf('_eg.') != -1) {
hthreesuffix=hthreesuffix.replace('</select>', '<option value="/' + candidatesarr[icv] + '">' + ('' + candidatesarr[icv].split('i_')[1].split('_eg.')[0].replace(/\_/g,' ').substring(0,1).toUpperCase() + candidatesarr[icv].split('i_')[1].split('_eg.')[0].replace(/\_/g,' ').substring(1).toLowerCase()).replace(/\_/g,' ') + '</option></select>');
} else {
hthreesuffix=hthreesuffix.replace('</select>', '<option value="/' + candidatesarr[icv] + '">' + candidatesarr[icv] + '</option></select>');
}
}

if (hthreesuffix != '') {
if (curone != '' && curdesc != '') {
hthreearr[0].innerHTML+='  ' + hthreesuffix.replace('</select>', '<option value="/' + curone + '">' + curdesc + '</option></select>');
} else {
hthreearr[0].innerHTML+='  ' + hthreesuffix;
}
}
}
}
}

setTimeout(hthreesel, 2000);

… featuring an overridden function jorflag which explains our reordering of script tags we’ve talked about above.

And the benefits are that wherever you see an emoji flag in a heading tag of one of “the peerage” after a while the emoji flag can be clicked to create a popup window that shows the country relevant to the Locale involved shaded on a Google Chart Geo Chart world map.


Previous relevant PHP Intl Class Peer to Peer Serverside Tutorial is shown below.

PHP Intl Class Peer to Peer Serverside Tutorial

PHP Intl Class Peer to Peer Serverside Tutorial

Sometimes, in programming …

  • you’re stringent … especially regarding security matters, but most of the time, when we organize the programming rules, so to speak, we prefer it when …
  • you’re flexible

… and so, back with GraphViz via PHP on AlmaLinux Require Once Tutorial when we used a …

  • require_once … PHP calling paradigm (we’re not going to change it, because it is still fine) … we’re wondering now, why we didn’t use an …
  • include … paradigm, because the arrangement was optional

as per

The include (or require) statement takes all the text/code/markup that exists in the specified file and copies it into the file that uses the include statement.

Including files is very useful when you want to include the same PHP, HTML, or text on multiple pages of a website.

… as with the optional nature of today’s PHP include paradigm call of a new i_eg_js.php piece of PHP we’ve decided should …

Can’t “when the need arises” be contentious?

… we hear you ask. Good question! We could jump the gun, before code is properly ready using PHP glob to look for files existant under the ./i_*eg.php file specification, and match them to what we have in the i_eg.js external Javascript, adding new entries when a mismatch is found. But that is where “local knowledge” can come into play (and the other aspect to “local knowledge” here is that the suite of PHP intl class using web applications all have a file specification suiting /i_*eg.php here). Genericity has it’s limits sometimes, in other words. Take a look at what we do to time this PHP rewrites external Javascript serverside intervention safely …

<?php

<?php
// i_eg_js.php
// RJM Programming - December, 2024
// Rewrite i_eg.js as needed

$iscand=false;
$pcont='';
$jscont='';
$phplistcomp='';
$desclistcomp='';
if (file_exists('./i_eg.js')) {
$jscont=file_get_contents('./i_eg.js');
$bitsphpa=explode(' candidates="', $jscont);
$bitsdesca=explode(' candidatesdesc="', $jscont);
if (sizeof($bitsphpa) > 1 && sizeof($bitsdesca) > 1) {
foreach (glob('./i_*eg.php') as $pfile) {
$iscand=false;
$pcont='';
if (strpos(' ' . explode('"', $bitsphpa[1])[0] . ' ', ' ' . basename($pfile) . ' ') === false) {
foreach (glob('./' . basename($pfile) . '*GETME') as $ppfile) {
$iscand=true;
}

}
if ($iscand) {
$pcont=file_get_contents('./' . basename($pfile));
if (strpos($pcont, '>Show ') === false) { $iscand=false; }
}
if ($iscand) {
$jscont=str_replace(' candidates="' . explode('"', $bitsphpa[1])[0] . '"', ' candidates="' . explode('"', $bitsphpa[1])[0] . ' ' . basename($pfile) . '"', $jscont);
$jscont=str_replace(' candidatesdesc="' . explode('"', $bitsdesca[1])[0] . '"', ' candidatesdesc="' . explode('"', $bitsdesca[1])[0] . ' ' . str_replace(' ','_',explode('"',explode('<', explode('>Show ', $pcont)[1])[0])[0]) . '"', $jscont);
file_put_contents('./i_eg.js', $jscont);
$bitsphpa=explode(' candidates="', $jscont);
$bitsdesca=explode(' candidatesdesc="', $jscont);
}
}
}
}

?>

Yes, we share via a GETME filename suffixing set of rules here at RJM Programming, and we only do that, and upload codefiles and GETME files to the RJM Programming web server via sftp means, when we’ve tested the code.

How is this new include paradigm PHP called in each PHP web application of …

  1. Sorting Words PHP code changed today this way and changed this way yesterday
  2. Language Name PHP code changed today this way and changed this way yesterday
  3. Region Name PHP code changed today this way and changed this way yesterday
  4. Currency PHP code changed today this way and changed this way yesterday
  5. Current Datetime PHP code changed today this way and changed this way yesterday

? As simple as now having …

<?php

include "i_eg_js.php";

?>

… up near the top of the PHP code and, unlike require_once these PHP suite web applications will not fall over should they not find i_eg_js.php in their same web server folder, and meaning the use of any of “the peerage” can look for new members without constantly having to update that external Javascript list, it flowing through to that dropdown, created via that external Javascript, updated, as required, by this new PHP include paradigm intervention.

Did you know?

If we’re not introducing any new PHP members of “the peerage” today, how did we test this thinking above, to our satisfaction? Simulating the scenario on our test Apache/PHP/MySql MAMP web server is how we tested it. We went, at the local macOS command line …


cp i_eg.php i_new_eg.php

… and tested, to be satisfied that the external Javascript remained unchanged, and then went …


cp i_eg.php i_new_eg.php_GETME

… to see that the external Javascript was appropriately changed, as you can see occurring in today’s tutorial picture. When happy, we undid all these changes, ready for when a new member of “the peerage” is really added, and then we’ll test further.


Previous relevant PHP Intl Class Peer to Peer Tutorial is shown below.

PHP Intl Class Peer to Peer Tutorial

PHP Intl Class Peer to Peer Tutorial

Today we’re implementing, on top of the progress of yesterday’s PHP Intl Class Word Sorting Primer Tutorial

  • a clientside (external Javascript called by the PHP) approach to gathering this PHP intl “Internationalization” class work into a suite of peer to peer web applications so that they can easily access each other rather than worrying about any web browser address bar (or bookmark) recalling of URLs in that group (once you get one under your belt, that is) … as maybe, another day, we’ll develop …
  • a serverside (PHP require/include) approach (helping out that clientside approach more generically and scientifically)

… meaning i_eg.js external Javascript …


// i_eg.js
// RJM Programming - December, 2024
// Allow for peer to peer access amongst i_eg.php i_cur_eg.php i_region_eg.php i_language_eg.php i_sort_eg.php
<>br>
var candidates="i_eg.php i_cur_eg.php i_region_eg.php i_language_eg.php i_sort_eg.php";
var candidatesd=candidates;
var candidatesdesc="Current_Datetime Currency Region_Name Language_Name Sort_Words";
var candidatesdarr=candidates.replace(/\,/g,' ').split(' ');

var candidatesarr=candidates.replace(/\,/g,' ').split(' ');

function hthreesel() {
var icv=0, hthreesuffix='', curone='', curdesc='', compone=document.URL.split('?')[0].split('#')[0].split('/')[eval(-1 + document.URL.split('?')[0].split('#')[0].split('/').length)];
var hthreearr=document.getElementsByTagName('h3');
if (eval('' + hthreearr.length) > 0) {
if (hthreearr[0].outerHTML.indexOf('</select>') == -1 && candidates.trim() != '' && eval('' + candidatesarr.length) > 0) {
if ((' ' + candidatesd.replace(/\+/g,' ') + ' ').indexOf(' ' + compone + ' ') != -1) {
curone=compone;
//alert('1:' + compone + ' found at ' + candidatesdarr.indexOf(curone));
curdesc=candidatesdesc.split(' ')[candidatesdarr.indexOf(curone)].replace(/\_/g, ' ');
//alert(curdesc);
}
if (curone == '') {
if ((' ' + candidates.replace(/\+/g,' ') + ' ').indexOf(' ' + compone + ' ') != -1) {
curone=compone;
//alert('11:' + compone);
if (curone.indexOf('i_') == 0 && curone.indexOf('_eg.') != -1) {
curdesc=curone.split('i_')[1].split('_eg.')[0].replace(/\_/g,' ').substring(0,1).toUpperCase() + curone.split('i_')[1].split('_eg.')[0].replace(/\_/g,' ').substring(1).toLowerCase();
}
}
}


hthreesuffix='<select onchange="location.href=this.value;"><option value="' + document.URL.split('?')[0].split('#')[0] + '">Optionally select peer ' + ('to ' + curdesc).replace(/^to\ $/g, '') + ' web application below ...</option></select>';
for (icv=0; icv<candidatesarr.length; icv++) {
if (candidatesdarr.indexOf(candidatesarr[icv]) != -1) {
hthreesuffix=hthreesuffix.replace('</select>', '<option value="/' + candidatesarr[icv] + '">' + ('' + candidatesdesc.split(' ')[candidatesdarr.indexOf(candidatesarr[icv])]).replace(/\_/g,' ') + '</option></select>');
} else if (candidatesarr[icv].indexOf('i_') == 0 && curone.indexOf('_eg.') != -1) {
hthreesuffix=hthreesuffix.replace('</select>', '<option value="/' + candidatesarr[icv] + '">' + ('' + candidatesarr[icv].split('i_')[1].split('_eg.')[0].replace(/\_/g,' ').substring(0,1).toUpperCase() + candidatesarr[icv].split('i_')[1].split('_eg.')[0].replace(/\_/g,' ').substring(1).toLowerCase()).replace(/\_/g,' ') + '</option></select>');
} else {
hthreesuffix=hthreesuffix.replace('</select>', '<option value="/' + candidatesarr[icv] + '">' + candidatesarr[icv] + '</option></select>');
}
}

if (hthreesuffix != '') {
if (curone != '' && curdesc != '') {
hthreearr[0].innerHTML+='  ' + hthreesuffix.replace('</select>', '<option value="/' + curone + '">' + curdesc + '</option></select>');
} else {
hthreearr[0].innerHTML+='  ' + hthreesuffix;
}
}
}
}
}

setTimeout(hthreesel, 2000);

… is overseeing “the peerage” …

  1. Sorting Words
  2. Language Name
  3. Region Name
  4. Currency
  5. Current Datetime

… by constructing a new dropdown means of navigating into each …


<script type=text/javascript src=/i_eg.js></script>

… of the above PHP web applications.


Previous relevant PHP Intl Class Word Sorting Primer Tutorial is shown below.

PHP Intl Class Word Sorting Primer Tutorial

PHP Intl Class Word Sorting Primer Tutorial

The PHP intl “Internationalization” class can help with an issue that has haunted me for many years. When you sort words in my English biased way, will they be sorted the same way in other languages, given alphabets and diacritics (with thanks to this excellent link regarding an example we’re defaulting to in the web application) and emojis and non-ascii characters, in various keyboard configurations, which might happen with words expressing the human condition? Luckily, the PHP intl class has

<?php

function sortit($arr, $thisloc) {
global $dias, $dia, $tabis;
$coll = collator_create( $thisloc );
//$arr = array( 'at', 'às', 'as' );
//var_export( $arr );
if (!isset($_GET['sorttype']) && !isset($_POST['sorttype'])) {
collator_sort( $coll, $arr );
} else if (isset($_GET['sorttype'])) {
if (strpos($_GET['sorttype'], 'REGULAR') !== false) {
collator_sort( $coll, $arr, Collator::SORT_REGULAR );
} else if (strpos($_GET['sorttype'], 'NUMERIC') !== false) {
collator_sort( $coll, $arr, Collator::SORT_NUMERIC );
} else if (strpos($_GET['sorttype'], 'STRING') !== false) {
collator_sort( $coll, $arr, Collator::SORT_STRING );
} else {
collator_sort( $coll, $arr );
}
} else if (isset($_POST['sorttype'])) {
if (strpos($_POST['sorttype'], 'REGULAR') !== false) {
collator_sort( $coll, $arr, Collator::SORT_REGULAR );
} else if (strpos($_POST['sorttype'], 'NUMERIC') !== false) {
collator_sort( $coll, $arr, Collator::SORT_NUMERIC );
} else if (strpos($_POST['sorttype'], 'STRING') !== false) {
collator_sort( $coll, $arr, Collator::SORT_STRING );
} else {
collator_sort( $coll, $arr );
}
}
//var_export( $arr );
for ($ij=(-1 + sizeof($arr)); $ij>=0; $ij--) {
$tabis=str_replace('<td id="sorttd">', '<td id="sorttd">' . $arr[$ij] . '<br>', $tabis);
}
echo $tabis;
}

?>

… to verify, one way or the other, and thanks to a heads up from this useful link here, further to yesterday’s PHP Intl Class Language Names Primer Tutorial.

Again, feel free to try a new “proof of concept” i_sort_eg.php Word Sorting Internationalization web application, where you can test out these concepts yourself, using your own word lists, you can enter into textarea elements.


Previous relevant PHP Intl Class Language Names Primer Tutorial is shown below.

PHP Intl Class Language Names Primer Tutorial

PHP Intl Class Language Names Primer Tutorial

You might have noticed over the last week (further to yesterday’s PHP Intl Class Region Names Primer Tutorial) or so, how useful …

Locales

… are as a data item involved with PHP intl “Internationalization” class programming work.

As an example Locale …


pt_BR

… we’ve been making quite a lot out of the “BR” ISO-3166 2 letter Country Code as the suffix of such a Locale. But what about the prefix of Locales? That prefix maps to an ISO-639 Language Code, meaning any derivable (ie. via our keyboard onkeydown and oninput logics) set of Locales could tell us (at the very least) two types of information, exemplifying the case above …

List of Countries using pt Portuguese List of Languages used in BR Brazil
pt pt_AO pt_BR pt_CH pt_CV pt_GQ pt_GW pt_LU pt_MO pt_MZ pt_PT pt_ST pt_TL es_BR pt_BR

All “code talk” above, but what about some Language Names, because you are not likely to ask down at Copacabana Beach …

Ei, cara! Você falar es?

That’s where we thank https://www.php.net/manual/en/locale.getprimarylanguage.php for the “heads up” to use code as per the followup to $lochelper and $lochelpertwo data flows to help with these Language Name determinations …

<?php

$locsel='';
$altinlang='';
$locit=user_agent();
$arrl=ResourceBundle::getLocales('');
for ($df=0; $df<sizeof($arrl); $df++) {
$endih='';
$lastword=explode('_',$arrl[$df])[-1 + sizeof(explode('_',$arrl[$df]))];
$isalt=false;
if (isset($_GET['languagecode'])) {
if (strlen($_GET['languagecode']) > 0) {
if ($lastword == $_GET['languagecode']) { $isalt=true; }
}
} else if (isset($_POST['languagecode'])) {
if (strlen($_POST['languagecode']) > 0) {
if ($lastword == $_POST['languagecode']) { $isalt=true; }
}
}
$ends=explode("['" . explode('-',explode('_',$arrl[$df])[0])[0] . '-', $lochelper);
if (sizeof($ends) > 1) {
$endih.=' ' . explode("'", explode("['", $ends[0])[-1 + sizeof(explode("['", $ends[0]))])[0];
if (explode("'", explode("['", $ends[0])[-1 + sizeof(explode("['", $ends[0]))])[0] != '') {
$inlang=' is ' . explode("'", explode("['", $ends[0])[-1 + sizeof(explode("['", $ends[0]))])[0];
if ($isalt) { $altinlang=' is ' . explode("'", explode("['", $ends[0])[-1 + sizeof(explode("['", $ends[0]))])[0]; }
}
}
if (strpos($lochelpertwo, '>' . explode('-',explode('_',$arrl[$df])[0])[0] . '</a>') !== false) {
//echo "yes " . explode('-',explode('_',$arrl[$df])[0])[0] . "\n<br>";
//echo substr(explode('>' . explode('-',explode('_',$arrl[$df])[0])[0] . '</a>', $lochelpertwo)[0], -250,250);
$interim=explode('</a>', explode('<tr', explode('>' . explode('-',explode('_',$arrl[$df])[0])[0] . '</a>', $lochelpertwo)[0])[-1 + sizeof(explode('<tr', explode('>' . explode('-',explode('_',$arrl[$df])[0])[0] . '</a>', $lochelpertwo)[0]))])[0]; //)[-1 + sizeof(explode('>', explode('</td>', explode('<tr', explode('>' . explode('-',explode('_',$arrl[$df])[0])[0] . '</a>', $lochelpertwo)[0];
//exit;
//if ($isalt) { echo $interim; exit; }
$aintm=explode('>', str_replace('</a>','',$interim))[-1 + sizeof(explode('>', str_replace('</a>','',$interim) ))];
//if ($isalt) { echo $interim . '<br>' . $aintm . '<br>' . $endih; exit; }
if (strpos($endih, ' ' . $aintm) === false) {
if ($endih != '') {
$endih.=' (' . $aintm . ')';
$inlang=' is ' . $aintm;
if ($isalt) {
//echo "yes " . explode('-',explode('_',$arrl[$df])[0])[0] . "\n<br>";
if ($altinlang != '') {
$altinlang.=' (' . $aintm . ')';
} else {
$altinlang=' is ' . $aintm;
}
}
} else {
$endih.=' ' . $aintm;
if ($isalt) {
//echo "Yes " . explode('-',explode('_',$arrl[$df])[0])[0] . "\n<br>";
if ($altinlang != '') {
$altinlang.=' (' . $aintm . ')';
} else {
$altinlang=' is ' . $aintm;
}
}
}
}
}
if ($lastword == strtoupper($lastword) && strlen($lastword) == 2) {
$endih.=' ' . orflag($lastword);
}
if ($endih != '') {
$endih="\t" . $endih . '';
}
if (strpos(($arrl[$df] . '_'), '_') !== false) { //} && strpos($arrl[$df], '0') === false) {
if ($locsel == '') {
$locsel="<select ontouchdown=ots(event); onchange=\"if (this.value.trim().length != 0) { document.getElementById('locale').value=(this.value); document.getElementById('justincase').src=document.URL.split('?')[0].split('#')[0] + '?ccode=' + this.value.split('_')[0].split('-')[0]; }\" id=locsel>
<option id=\"loptone\" value=''>Optionally select a Locale below ...</option></select>";
}
if ($locit != 'pc' && 1 == 1) {
$locsel=str_replace("</select>", "
<option value='" . $arrl[$df] . "' translate=\"no\" data-ontouchstart=ots(event); title=\"" . $endih . "\">" . $arrl[$df] . ' ' . $endih . "</option></select>", $locsel);
} else {
$locsel=str_replace("</select>", "
<option value='" . $arrl[$df] . "' translate=\"no\" data-ontouchstart=ots(event); title=\"" . $endih . "\">" . $arrl[$df] . "</option></select>", $locsel);
}
}
}

?>

So, feel free to try a new “proof of concept” i_language_eg.php Language Names Internationalization web application.


Previous relevant PHP Intl Class Region Names Primer Tutorial is shown below.

PHP Intl Class Region Names Primer Tutorial

PHP Intl Class Region Names Primer Tutorial

Apart from Ghostbusters who do you turn to when you want to know what a resident of a region calls their region?

Still, Ghostbusters, you must be pulling my leg?!

Anyway, further to yesterday’s PHP Intl Class Currency Primer Tutorial, we’ve turned to good ol’ PHP.net, as usual (when it comes to many matters PHP).

In amongst all the ISO code usage we seek when interfacing to the PHP intl “Internationalization” class, because they are definitive, even so, we feel we need to allow users to enter Country Names, as one concept, especially as Country Names have been there before any ISO codes even started. The trouble with Country Names is twofold …

  • it is not a reliable indexer, if you get my drift, because there are lots of forms, in any language you pick, for what a Country Name is
  • at least for an English representation of a Country Name we’d like consistency, and, happily, the PHP intl “Internationalization” class can provide it

… via PHP code of the ilk …

<?php

echo "<p id=pdfmt>" . locale_get_display_region(urldecode($_GET['locale']), urldecode($_GET['displaylocale'])) . "</p><br>";

?>

As you might imagine, this discovery can have mildly wide ranging implications … well, you had to be there … on …

…PHP intl class suite of web applications we’re not letting Ghostbusters anywhere near!


Previous relevant PHP Intl Class Currency Primer Tutorial is shown below.

PHP Intl Class Currency Primer Tutorial

PHP Intl Class Currency Primer Tutorial

We’re back with the PHP intl “Internationalization” class, today, last talked about with the recent PHP Intl Class Datetime Keyboard Events Tutorial, this time discussing …

Currency Internationalization

… topics. Again, we found the Locale data item, as with Datetimes, the main data item of interest. But, any one Country can use more than one Currency (defined by an ISO-4217 3 letter Currency Code) in this new PHP Intl using Currency web application we’ve started developing today, and on a Locale selection we choose the first such one, and leave it open to the user to be able to type in their own ISO-4217 three letter Currency Code, as required.

We got great help from https://stackoverflow.com/questions/76825595/php-format-currency-issue with codeline ideas, such as …

<?php

$formatter = new NumberFormatter(urldecode($_GET['locale']), NumberFormatter::CURRENCY);
if (isset($_GET['amount'])) {
echo "<p id=pdfmt>" . $formatter->formatCurrency(urldecode($_GET['amount']), urldecode($_GET['currency'])) . "</p><br>";
} else {
echo "<p id=pdfmt>" . $formatter->formatCurrency(76543.210, urldecode($_GET['currency'])) . "</p><br>";
}

?>

The work of Datetimes, ahead of all this, has meant it is easier to get “further down the track” for today’s “proof of concept” i_cur_eg.php PHP code start, that has keyboard event and dropdown logics all in there, and which you can try below …


Previous relevant PHP Intl Class Datetime Keyboard Events Tutorial is shown below.

PHP Intl Class Datetime Keyboard Events Tutorial

PHP Intl Class Datetime Keyboard Events Tutorial

As far as “user interaction” goes with our Current Datetime PHP web application of PHP Intl Class Datetime Google Translate Tutorial we’ve been thinking …

  • the user would be more likely to use the dropdown element selection methods … but supposing …
  • the user uses the keyboard to enter Locale and/or Timezone

… and, as of yesterday’s logic, that would have been quite unwieldy, especially regarding timezone entries.

And so, today, we’ve added keyboard onkeydown and oninput event logics to cater for several scenarios we can “shortcut” those user requirements, often down to the entry of a couple or a few characters, and from there click appropriate created links in …

<?php echo ”

var morechanges=true;
var lastwo='';
var woi=null;
var oko=null;
var nlastokn='';
var xokn='';
var xlastconto=[];
var xmorechanges=true;
var xlastwo='';
var xwoi=null;
var xoko=null;

function precval(iois) {
//okn=iois.value;
oko=iois;
lastokn=okn;
}

function xprecval(iois) {
//okn=iois.value;
xoko=iois;
xlastokn=xokn;
}

function cval(eiois) {
//if (document.URL.indexOf('i0=') == -1) {
//if (eiois.which != 16) { alert('2:' + eiois.which); }
//okn+=String.fromCharCode(eiois.which || eiois.keyCode);
if ((eiois.which || eiois.keyCode) == 8) {
okn='';
} else if ((eiois.which || eiois.keyCode) == 186 || (eiois.which || eiois.keyCode) == 900000016) {
okn=okn.replace(':','') + ':';
//document.title=okn + ' ' + (eiois.which || eiois.keyCode);
var cvi=okn.split(':');
if (cvi.length > 1) {
var scs=0.0, factor=1.0;
for (var ij=eval(-1 + cvi.length); ij>=0; ij--) {
if (cvi[ij] == '') cvi[ij]='00';
scs+=eval(factor * eval(cvi[ij]));
factor*=60.0;
}
//alert(scs + ' ' + okn);
okn='' + scs;
oko.value=okn;
lastokn=okn.replace(':','');
//document.title=okn + ' ' + (eiois.which || eiois.keyCode) + ' ' + oko.value;
//setTimeout(fixval,30);
}
} else if ((eiois.which || eiois.keyCode) == 191) {
if (!eiois.shiftKey) {
okn+=String.fromCharCode(47);
//document.title='=1:' + okn + '+' + eiois.which + ' ' + eiois.keyCode + ' ... ';
}
if (eval('' + okn.length) > 1) { expandokn(); }
} else if ((eiois.which || eiois.keyCode) == 189) {
if (eiois.shiftKey) {
okn+=String.fromCharCode(95);
} else {
okn+=String.fromCharCode(45);
}
if (eval('' + okn.length) > 1) { expandokn(); }
//document.title='=1:' + okn + '+' + eiois.which + ' ' + eiois.keyCode + ' ... ';
} else if (eiois.keyCode == 189 || (eiois.which || eiois.keyCode) >= 65 && (eiois.which || eiois.keyCode) <= 90) {
if (eiois.shiftKey) {
okn+=String.fromCharCode(eiois.which || eiois.keyCode);
} else {
okn+=String.fromCharCode(eval(32 + eval(eiois.which || eiois.keyCode)));
}
//document.title='=1:' + okn + '+' + eiois.which + ' ' + eiois.keyCode + ' ... ';
if (eval('' + okn.length) > 1) { expandokn(); }
} else if ((eiois.which || eiois.keyCode) < 46 || (eiois.which || eiois.keyCode) > 58) {
okn=okn;
} else if (1 == 3) {
okn+=String.fromCharCode(eiois.which || eiois.keyCode);
document.title+='=1:' + okn + '+' + eiois.which + ' ' + eiois.keyCode + ' ... ';
}
//}
}

function xcval(eiois) {
//if (document.URL.indexOf('i0=') == -1) {
//if (eiois.which != 16) { alert('1:' + eiois.which); }
//xokn+=String.fromCharCode(eiois.which || eiois.keyCode);
if ((eiois.which || eiois.keyCode) == 8) {
xokn='';
} else if ((eiois.which || eiois.keyCode) == 186 || (eiois.which || eiois.keyCode) == 900000016) {
xokn=xokn.replace(':','') + ':';
//document.title=okn + ' ' + (eiois.which || eiois.keyCode);
var cvi=xokn.split(':');
if (cvi.length > 1) {
var scs=0.0, factor=1.0;
for (var ij=eval(-1 + cvi.length); ij>=0; ij--) {
if (cvi[ij] == '') cvi[ij]='00';
scs+=eval(factor * eval(cvi[ij]));
factor*=60.0;
}
//alert(scs + ' ' + okn);
xokn='' + scs;
xoko.value=xokn;
xlastokn=xokn.replace(':','');
//document.title=okn + ' ' + (eiois.which || eiois.keyCode) + ' ' + oko.value;
//setTimeout(fixval,30);
}
} else if ((eiois.which || eiois.keyCode) == 191) {
if (!eiois.shiftKey) {
xokn+=String.fromCharCode(47);
//document.title='=2:' + xokn + '+' + eiois.which + ' ' + eiois.keyCode + ' ... ';
}
if (eval('' + xokn.length) > 1) { expandxokn(); }
} else if ((eiois.which || eiois.keyCode) == 189) {
if (eiois.shiftKey) {
xokn+=String.fromCharCode(95);
} else {
xokn+=String.fromCharCode(45);
}
if (eval('' + xokn.length) > 1) { expandxokn(); }
//document.title='=2:' + xokn + '+' + eiois.which + ' ' + eiois.keyCode + ' ... ';
} else if (eiois.keyCode == 189 || (eiois.which || eiois.keyCode) >= 65 && (eiois.which || eiois.keyCode) <= 90) {
if (eiois.shiftKey) {
xokn+=String.fromCharCode(eiois.which || eiois.keyCode);
} else {
xokn+=String.fromCharCode(eval(32 + eval(eiois.which || eiois.keyCode)));
}
if (eval('' + xokn.length) > 1) { expandxokn(); }
//document.title='=2:' + xokn + '+' + eiois.which + ' ' + eiois.keyCode + ' ... ';
} else if ((eiois.which || eiois.keyCode) < 46 || (eiois.which || eiois.keyCode) > 58) {
xokn=xokn;
} else if (1 == 3) {
xokn+=String.fromCharCode(eiois.which || eiois.keyCode);
document.title+='=' + xokn + '+' + eiois.which + ' ' + eiois.keyCode + ' ... ';
}
//}
}

function expandokn() {
var iut=0, pls=[],firsttz='',tzsih='',xtzsih='',thatloc='', wds=[];
if (okn.substring(0,1) == okn.substring(0,1).toUpperCase() && okn != okn.toUpperCase()) {
document.getElementById('das').innerHTML='Country Name<br>';
pls=ctynames.split('>' + okn);
if (eval('' + pls.length) > 1) {
//alert('here');
for (iut=1; iut<pls.length; iut++) {
document.getElementById('das').innerHTML+=' <a onclick=analp(this,0); title=' + pls[eval(-1 + iut)].slice(-4) + ' style=cursor:pointer;text-decoration:underline;>' + okn + pls[iut].split('<')[0] + ' ' + jorflag(pls[eval(-1 + iut)].slice(-3).substring(0,2)) + '</a>';
}
}
} else if (okn.substring(0,1) == okn.substring(0,1).toLowerCase() && okn == okn.toLowerCase()) {
xtzsih=document.getElementById('tzsel').innerHTML;
document.getElementById('das').innerHTML+='<br><br>Locale<br>';
tzsih=document.getElementById('locsel').innerHTML;
//alert(tzsih.length);
pls=tzsih.split( value='\"' + okn);
if (eval('' + pls.length) > 1) {
//alert('here');
for (iut=1; iut<pls.length; iut++) {
thatloc=pls[iut].split('>')[1].split('<')[0].split(' ')[0].split('+')[0];
wds=thatloc.split('_');
if (eval('' + wds[eval(-1 + wds.length)].length) == 2 && wds[eval(-1 + wds.length)] == wds[eval(-1 + wds.length)].toUpperCase() && eval('' + wds.length) > 1) {
//alert('1:' + wds[eval(-1 + wds.length)]);
firsttz='';
if (xtzsih.indexOf(',' + wds[eval(-1 + wds.length)] + ',') != -1) {
firsttz=xtzsih.split(',' + wds[eval(-1 + wds.length)] + ',')[1].split('>')[1].split('<')[0].split(' ')[0];
//alert('2:' + firsttz);
}
document.getElementById('das').innerHTML+=' <a onclick=analr(this,\"' + firsttz + '\"); style=cursor:pointer;text-decoration:underline;>' + thatloc + ' ' + jorflag(wds[eval(-1 + wds.length)]) + '</a>';
} else {
document.getElementById('das').innerHTML+=' <a onclick=analr(this,\"\"); style=cursor:pointer;text-decoration:underline;>' + thatloc + '</a>';
}
}
}

} else if (okn.substring(0,1) == okn.substring(0,1).toUpperCase() && okn == okn.toUpperCase() && eval('' + okn.length) == 2) {
document.getElementById('das').innerHTML='Country Name<br>';
pls=ctynames.split(\"'\" + okn + \"'>\");
if (eval('' + pls.length) > 1) {
//alert('here');
for (iut=1; iut<pls.length; iut++) {
document.getElementById('das').innerHTML+=' <a onclick=analp(this,0); title=' + okn + ' style=cursor:pointer;text-decoration:underline;>' + pls[iut].split('<')[0] + ' ' + jorflag(okn) + '</a>';
}
}

tzsih=document.getElementById('tzsel').innerHTML;
if (tzsih.indexOf(',' + okn + ',') != -1) {
firsttz=tzsih.split(',' + okn + ',')[1].split('>')[1].split('<')[0].split(' ')[0];
}
document.getElementById('das').innerHTML+='<br><br>Locale<br>';
tzsih=document.getElementById('locsel').innerHTML;
//alert(tzsih.length);
pls=tzsih.split('_' + okn + '\"');
if (eval('' + pls.length) > 1) {
//alert('here');
for (iut=1; iut<pls.length; iut++) {
document.getElementById('das').innerHTML+=' <a onclick=analr(this,\"' + firsttz + '\"); style=cursor:pointer;text-decoration:underline;>' + pls[iut].split('>')[1].split('<')[0].split(' ')[0].split('+')[0] + ' ' + jorflag(okn) + '</a>';
}
}

}
}

function expandxokn() {
var iut=0, pls=[], tzsih='', thattz='';
if (xokn.substring(0,1) == xokn.substring(0,1).toUpperCase() && xokn != xokn.toUpperCase()) {
document.getElementById('das').innerHTML='TimeZone Place Name<br>';
tzsih=document.getElementById('tzsel').innerHTML;
//alert(tzsih.length);
pls=tzsih.split('/' + xokn);
if (eval('' + pls.length) > 1) {
//alert('here');
for (iut=1; iut<pls.length; iut+=2) {
if (pls[iut].split('\"')[0].indexOf('/') == -1) {
thattz=pls[iut].split('>')[1].split('<')[0].split(' ')[0].split('+')[0].split('/' + xokn)[0] + '/' + xokn + pls[iut].split('\"')[0];
if (eval('' + tzsih.split(thattz)[1].split(' data-geo=')[1].split(',').length) > 3) {
document.getElementById('das').innerHTML+=' <a onclick=analo(this); style=cursor:pointer;text-decoration:underline;>' + pls[iut].split('>')[1].split('<')[0].split(' ')[0].split('+')[0].split('/' + xokn)[0] + '/' + xokn + pls[iut].split('\"')[0] + ' ' + jorflag(tzsih.split(thattz)[1].split(' data-geo=')[1].split(',')[3]) + '</a>';
} else {
document.getElementById('das').innerHTML+=' <a onclick=analo(this); style=cursor:pointer;text-decoration:underline;>' + pls[iut].split('>')[1].split('<')[0].split(' ')[0].split('+')[0].split('/' + xokn)[0] + '/' + xokn + pls[iut].split('\"')[0] + '</a>';
}
}
}
}
document.getElementById('das').innerHTML+='<br><br>Country Name<br>';
pls=ctynames.split('>' + xokn);
if (eval('' + pls.length) > 1) {
//alert('here');
for (iut=1; iut<pls.length; iut++) {
document.getElementById('das').innerHTML+=' <a onclick=analp(this,1); title=' + pls[eval(-1 + iut)].slice(-4) + ' style=cursor:pointer;text-decoration:underline;>' + xokn + pls[iut].split('<')[0] + ' ' + jorflag(pls[eval(-1 + iut)].slice(-3).substring(0,2)) + '</a>';
}
}
}
}

function analr(ao,tzi) { // locale
if (ao.innerHTML.indexOf('_') != -1) {
document.getElementById('locsel').value=ao.innerHTML.split(' ')[0];
document.getElementById('locale').value=ao.innerHTML.split(' ')[0];
document.getElementById('timezone').value=tzi.split(' ')[0];
document.getElementById('das').innerHTML='';
okn='';
}
}

function analq(ao,tzi) { // locale
if (ao.innerHTML.indexOf('_') != -1) {
document.getElementById('locsel').value=ao.innerHTML.split(' ')[0];
document.getElementById('locale').value=ao.innerHTML.split(' ')[0];
document.getElementById('timezone').value=tzi.split(' ')[0];
document.getElementById('das').innerHTML='';
xokn='';
okn='';
}
}

function analo(ao) { // timezone places
if (ao.innerHTML.indexOf('/') != -1) {
document.getElementById('tzsel').value=ao.innerHTML.split(' ')[0];
document.getElementById('timezone').value=ao.innerHTML.split(' ')[0];
document.getElementById('das').innerHTML='';
xokn='';
}
}

function analp(ao,isxokn) { // country names
var tzsih='',pls=[],iut=0, firsttz='', thattz='';
if (ao.innerHTML.indexOf('/') != -1) {
document.getElementById('tzsel').value=ao.innerHTML.split(' ')[0];
document.getElementById('timezone').value=ao.innerHTML.split(' ')[0];
document.getElementById('das').innerHTML='';
if (isxokn != 0) {
xokn='';
} else {
okn='';
}
} else {
document.getElementById('das').innerHTML+='<br><br>TimeZone Place Name<br>';
tzsih=document.getElementById('tzsel').innerHTML;
//alert(tzsih.length);
pls=tzsih.split(',' + ao.title.split(' ')[0] + ',');
if (eval('' + pls.length) > 1) {
//alert('here');
for (iut=1; iut<pls.length; iut++) {
if (firsttz == '') { firsttz=pls[iut].split('>')[1].split('<')[0].split(' ')[0].split('+')[0]; }
document.getElementById('das').innerHTML+=' <a onclick=analo(this); style=cursor:pointer;text-decoration:underline;>' + pls[iut].split('>')[1].split('<')[0].split(' ')[0].split('+')[0] + ' ' + jorflag(ao.title.split(' ')[0]) + '</a>';
}
}

document.getElementById('das').innerHTML+='<br><br>Locale<br>';
tzsih=document.getElementById('locsel').innerHTML;
//alert(tzsih.length);
pls=tzsih.split('_' + ao.title.split(' ')[0] + '\"');
if (eval('' + pls.length) > 1) {
//alert('here');
for (iut=1; iut<pls.length; iut++) {
document.getElementById('das').innerHTML+=' <a onclick=analq(this,\"' + firsttz + '\"); style=cursor:pointer;text-decoration:underline;>' + pls[iut].split('>')[1].split('<')[0].split(' ')[0].split('+')[0] + ' ' + jorflag(ao.title.split(' ')[0]) + '</a>';
}
}

xokn='';
}
}

“; ?>

… in further changed latest draft PHP code offering here, as a PHP web application, you can also try below.


Previous relevant PHP Intl Class Datetime Google Translate Tutorial is shown below.

PHP Intl Class Datetime Google Translate Tutorial

PHP Intl Class Datetime Google Translate Tutorial

The Internationalization improvements of yesterday’s PHP Intl Class Datetime Clock Tutorial get another boost today via the inclusion of some interfacing to the great …


Google Translate

… for those incidental translations regarding …

  • titles and headings
  • dropdown instructions

… while avoiding what might add confusion, that being any translation of user web application settings, as you might get … you being the user … that is!

But we ask first on this. And when it is the case for asking here, a useful mechanism can be the HTML input type=checkbox element which now feeds into the Javascript below …

<?php echo ”

function parhelp() {
" . $gone . "
}

function storeinnertexts() {
if (!document.getElementById('translate').checked) { return ''; }
if (!allowanyway) {
if (document.getElementById('locale').value == '') { return ''; }
if (document.getElementById('timezone').value == '') { return ''; }
}
var bcols=['yellow','yellow','white','#ffffff'];
var idcnt=0;
var seclet=['h translate=\"no\"','d','h translate=\"no\"','d','d translate=\"no\"','d','d','d'];
var inb='', ina='</span>';
var krow=0;
var itsare=['locale','loptone','timezone','toptone','calendar','calone','doneb','Clock'], thisrowis='';
var h1toform='<html><head><body>' + document.body.innerHTML.split('<form')[0] + '<br><table style=width:100%; border=2></table></body></html>';
for (var iuyt=0; iuyt<itsare.length; iuyt+=2) {
thisrowis='<tr style=background-color:' + bcols[krow] + ';></tr>';
thisrowis='<tr></tr>';
tdsuff='';
inb='<span>';
if (eval('' + seclet[idcnt].length) > 1) {
inb='<span' + seclet[idcnt].substring(1) + '>';
}
if (bcols[krow] == '#ffffff') {
tdsuff=' style=background-color:lightgreen;'
}
if (document.getElementById(itsare[iuyt]).value.trim() != '' || 1 == 1) {
thisrowis=thisrowis.replace('</tr>', '<t' + seclet[idcnt].substring(0,1) + '>' + inb + (inb == '<span>' ? document.getElementById(itsare[iuyt]).value : '') + ina + '</t' + seclet[idcnt].substring(0,1) + '></tr>');
} else {
thisrowis=thisrowis.replace('</tr>', '<t' + seclet[idcnt].substring(0,1) + '>' + inb + (inb == '<span>' ? document.getElementById(itsare[iuyt]).placeholder : '') + ina + '</t' + seclet[idcnt].substring(0,1) + '></tr>');
}
idcnt++;
if (bcols[krow] == '#ffffff') {
tdsuff=' style=background-color:#f0f0f0;'
}
inb='<span>';
if (eval('' + seclet[idcnt].length) > 1) {
inb='<span' + seclet[idcnt].substring(1) + '>';
}
if (itsare[eval(1 + iuyt)] == itsare[eval(1 + iuyt)].toLowerCase()) {
try {
if (document.getElementById(itsare[eval(1 + iuyt)]).innerText.trim() != '') {
//if (doseti == 1) { alert(document.getElementById(itsare[eval(1 + iuyt)]).innerText); }
thisrowis=thisrowis.replace('</tr>', '<t' + seclet[idcnt].substring(0,1) + '>' + inb + (inb == '<span>' ? document.getElementById(itsare[eval(1 + iuyt)]).innerText : '') + ina + '</t' + seclet[idcnt].substring(0,1) + '></tr>');
}
} catch(erty) { alert(itsare[eval(1 + iuyt)]); }
} else {
if (document.getElementById(itsare[eval(1 + iuyt)].toLowerCase()).value.trim() != '') {
thisrowis=thisrowis.replace('</tr>', '<t' + seclet[idcnt].substring(0,1) + '>' + inb + (inb == '<span>' ? document.getElementById(itsare[eval(1 + iuyt)].toLowerCase()).value : '') + ina + '</t' + seclet[idcnt].substring(0,1) + '></tr>');
} else {
thisrowis=thisrowis.replace('</tr>', '<t' + seclet[idcnt].substring(0,1) + '>' + inb + (inb == '<span>' ? document.getElementById(itsare[eval(1 + iuyt)].toLowerCase()).placeholder : '') + ina + '</t' + seclet[idcnt].substring(0,1) + '></tr>');
}
}
idcnt++;
krow++;
h1toform=h1toform.replace('</table>', thisrowis + '</table>');
}
//if (doseti == 1) { alert(h1toform); }
h1toform=h1toform.replace(/Optionally\ select\ /g, '*');
h1toform=h1toform.replace(/Show\ Current\ Time/g, '@');
h1toform=h1toform.replace('RJM Programming - December, 2024', '$');
h1toform=h1toform.replace('As per (white background textboxes optional) ...', '!');
h1toform=h1toform.replace(/\<br\>/g, '');
h1toform=h1toform.replace('<span translate=\"no\"></span>', '');
h1toform=h1toform.replace('<span translate=\"no\"></span>', '');
//if (doseti == 1) { var tyr=prompt('' + (documentURL.split('?')[0] + '?sra=' + encodeURIComponent(sra) + '&it=' + encodeURIComponent(h1toform) + '&rand=' + Math.floor(Math.random() * 1987865)).length + ' ' + h1toform.replace(/\<\//g, String.fromCharCode(10) + '</'), h1toform.replace(/\<\//g, String.fromCharCode(10) + '</')); }
document.getElementById('setiif').src=documentURL.split('?')[0] + '?sra=' + encodeURIComponent(sra) + '&it=' + encodeURIComponent(h1toform) + '&rand=' + Math.floor(Math.random() * 1987865);
doseti++;
return '';
}

function setitranslate() {
if (doseti == 0) {
doseti=1;
setInterval(storeinnertexts, 2000);
}
}

“; ?>

… and the PHP …

<?php

$gtwo='';
$delthis='';
$optcnt=0;

if (isset($_GET['timezone'])) {
$_GET['timezone']=explode('%20',explode('+', $_GET['timezone'])[0])[0];
} else if (isset($_POST['timezone'])) {
$_POST['timezone']=explode('%20',explode('+', $_POST['timezone'])[0])[0];
}

function user_agent() { // thanks to https://stackoverflow.com/questions/6322112/check-if-php-page-is-accessed-from-an-ios-device/6322131
$iPod = strpos($_SERVER['HTTP_USER_AGENT'],"iPod");
$iPhone = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$iPad = strpos($_SERVER['HTTP_USER_AGENT'],"iPad");
$android = strpos($_SERVER['HTTP_USER_AGENT'],"Android");
//file_put_contents('./public/upload/install_log/agent',$_SERVER['HTTP_USER_AGENT']);
if ($iPad||$iPhone||$iPod) {
return 'ios';
} else if ($android) {
return 'android';
} else {
return 'pc';
}
}

function server_remote_addr() {
$rma = $_SERVER['REMOTE_ADDR'];
$ua = strtolower($_SERVER['HTTP_USER_AGENT']);
// you can add different browsers with the same way ..
if (1 == 1) {
if(preg_match('/(chromium)[ \/]([\w.]+)/', $ua))
$rma = '000000'.$rma;
elseif(preg_match('/(chrome)[ \/]([\w.]+)/', $ua))
$rma = '00000'.$rma;
elseif(preg_match('/(safari)[ \/]([\w.]+)/', $ua))
$rma = '0000'.$rma;
elseif(preg_match('/(opera)[ \/]([\w.]+)/', $ua))
$rma = '000'.$rma;
elseif(preg_match('/(msie)[ \/]([\w.]+)/', $ua))
$rma = '00'.$rma;
elseif(preg_match('/(mozilla)[ \/]([\w.]+)/', $ua))
$rma = '0'.$rma;
}
return str_replace(':','_',str_replace('.','_',$rma));
}

if (isset($_GET['sra']) && isset($_GET['it'])) {
//if (file_exists($_SERVER['DOCUMENT_ROOT'] . '/html_intl_' . str_replace('+',' ',urldecode($_GET['sra'])) . '.html')) {
// exec('rm -f ' . $_SERVER['DOCUMENT_ROOT'] . '/html_intl_' . str_replace('+',' ',urldecode($_GET['sra'])) . '.html');
//}
$wopenit=false;
if (!file_exists($_SERVER['DOCUMENT_ROOT'] . '/html_intl_' . str_replace('+',' ',urldecode($_GET['sra'])) . '.html')) {
$wopenit=true;
}
$cont=str_replace('+',' ',urldecode($_GET['it']));
$cont=str_replace('*', 'Optionally select ', $cont);
$cont=str_replace('@', 'Show Current Time', $cont);
$cont=str_replace('$', 'RJM Programming - December, 2024', $cont);
$cont=str_replace('!', 'As per (white background textboxes optional) ...', $cont);
$cont=str_replace('</body>', '<style> th { background-color:yellow; } </style></body>', $cont);
file_put_contents($_SERVER['DOCUMENT_ROOT'] . '/html_intl_' . str_replace('+',' ',urldecode($_GET['sra'])) . '.html', $cont);
if ($wopenit) {
echo "<html><body onload=\" parent.parhelp(); \"></body></html>";
}
exit;
} else if (isset($_POST['sra']) && isset($_POST['it'])) {
//if (file_exists($_SERVER['DOCUMENT_ROOT'] . '/html_intl_' . str_replace('+',' ',urldecode($_POST['sra'])) . '.html')) {
// exec('rm -f ' . $_SERVER['DOCUMENT_ROOT'] . '/html_intl_' . str_replace('+',' ',urldecode($_POST['sra'])) . '.html');
//}
$wopenit=false;
if (!file_exists($_SERVER['DOCUMENT_ROOT'] . '/html_intl_' . str_replace('+',' ',urldecode($_POST['sra'])) . '.html')) {
$wopenit=true;
}
$cont=str_replace('+',' ',urldecode($_POST['it']));
$cont=str_replace('*', 'Optionally select ', $cont);
$cont=str_replace('@', 'Show Current Time', $cont);
$cont=str_replace('$', 'RJM Programming - December, 2024', $cont);
$cont=str_replace('!', 'As per (white background textboxes optional) ...', $cont);
$cont=str_replace('</body>', '<style> th { background-color:yellow; } </style></body>', $cont);
file_put_contents($_SERVER['DOCUMENT_ROOT'] . '/html_intl_' . str_replace('+',' ',urldecode($_POST['sra'])) . '.html', $cont);
if ($wopenit) {
echo "<html><body onload=\" parent.parhelp(); \"></body></html>";
}
exit;
}

$gone="\n setTimeout(function(){ if ((document.getElementById('locale').value + document.getElementById('locale').placeholder).split('_')[0].split('-')[0] != 'en') { gtwoo=window.open('https://www-rjmprogramming-com-au.translate.goog/html_intl_" . server_remote_addr() . ".html?_x_tr_sch=https&_x_tr_sl=en&_x_tr_tl=' + (document.getElementById('locale').value + document.getElementById('locale').placeholder).split('_')[0].split('-')[0] + '&_x_tr_hl=en','_blank','top=200,left=' + eval(-500 + eval('' + screen.width)) + ',width=500,height=500'); } }, 7000); \n";

// https://www-rjmprogramming-com-au.translate.goog/PHP/GeoChart/image_chart.php?_x_tr_sch=https&_x_tr_sl=en&_x_tr_tl=it&_x_tr_hl=en
if (isset($_GET['translate']) && isset($_GET['locale'])) {
if (strlen($_GET['locale']) > 0) {
$delthis=$_SERVER['DOCUMENT_ROOT'] . "/html_intl_" . server_remote_addr() . ".html";
if (explode('-',explode('_',urldecode($_GET['locale']))[0])[0] != 'en') {
$gtwo="\n setTimeout(function(){ gtwoo=window.open('https://www-rjmprogramming-com-au.translate.goog/html_intl_" . server_remote_addr() . ".html?_x_tr_sch=https&_x_tr_sl=en&_x_tr_tl=" . explode('-',explode('_',urldecode($_GET['locale']))[0])[0] . "&_x_tr_hl=en','_blank','top=200,left=' + eval(-500 + eval('' + screen.width)) + ',width=500,height=500'); }, 7000); \n";
}
}
} else if (isset($_POST['translate']) && isset($_POST['locale'])) {
if (strlen($_POST['locale']) > 0) {
$delthis=$_SERVER['DOCUMENT_ROOT'] . "/html_intl_" . server_remote_addr() . ".html";
if (explode('-',explode('_',urldecode($_POST['locale']))[0])[0] != 'en') {
$gtwo="\n setTimeout(function(){ gtwoo=window.open('https://www-rjmprogramming-com-au.translate.goog/html_intl_" . server_remote_addr() . ".html?_x_tr_sch=https&_x_tr_sl=en&_x_tr_tl=" . explode('-',explode('_',urldecode($_POST['locale']))[0])[0] . "&_x_tr_hl=en','_blank','top=200,left=' + eval(-500 + eval('' + screen.width)) + ',width=500,height=500'); }, 7000); \n";
}
}
}

?>

… to make this a possibility in a changed “fourth draft” PHP code offering here, as a PHP web application, you can also try below.


Previous relevant PHP Intl Class Datetime Clock Tutorial is shown below.

PHP Intl Class Datetime Clock Tutorial

PHP Intl Class Datetime Clock Tutorial

Yesterday’s PHP Intl Class Datetime Defaults Tutorial‘s PHP web application involves …

  • timezones … and, for us, whenever that happens, our eyes light up with “possibility” because …
  • “where” meets “when” … when you have timezones involved … and to our mind …
  • “where” and “when” are the best catered for “adverbs” in the I.T. wooooorrrrlllldddd

Invariably, too, the data is “full of possibility” regarding simple ideas of “internationalization” that are easy to deploy, such as …

  • emoji flags
  • Wikipedia lookups in the form of tabulated lists

And so, though our last web application is not totally disengageable from our English bias, we can help its “Internationalization Credentials” today, via …

  • emoji flag code …
    PHP
    <?php

    function orflag($incc) {
    $uretv='';
    $lri=["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P", "Q","R","S","T","U","V","W","X","Y","Z"];
    $dri=["127462","127463","127464","127465","127466","127467","127468", "127469","127470","127471","127472","127473","127474","127475", "127476","127477","127478","127479","127480","127481", "127482","127483","127484","127485","127486","127487"];
    for ($jjm=0; $jjm<strlen($incc); $jjm++) {
    for ($jm=0; $jm<sizeof($lri); $jm++) {
    if (strtoupper(substr(substr($incc,$jjm),0,1)) == $lri[$jm]) {
    $uretv.='&#' . $dri[$jm] . ";";
    }
    }
    }
    return $uretv;
    }

    ?>
    Javascript
    <?php echo ”

    function jorflag(thiscc) {
    var lri='ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    var dri=['127462','127463','127464','127465','127466','127467','127468', '127469','127470','127471','127472','127473','127474', '127475','127476','127477','127478','127479','127480', '127481','127482','127483','127484','127485','127486','127487'];
    var ccsuff='', ccchar=' ', cde='';
    for (var iccsuff=0; iccsuff<thiscc.length; iccsuff++) {
    ccchar=thiscc.substring(iccsuff, eval(1 + eval('' + iccsuff))).toUpperCase();
    ccsuff+=String.fromCodePoint(dri[eval('' + lri.indexOf(ccchar))]); //'&#' + dri[eval('' + lri.indexOf(ccchar))] + ';';
    cde='.';
    }
    return ccsuff;
    }

    “; ?>
  • new clock functionality (using an Internationalization emoji usage regarding an SVG based button background image) and known timezone reasons to tabulate …
    <?php

    $tabp='';
    $tabs='';
    if (isset($_GET['timezone'])) {
    $tabp='<table style=width:100%;><tr><td style=vertical-align:top;>';
    $tabs='</td><td style=vertical-align:top;width:50%;><iframe src="/HTMLCSS/colour_wheel.html?mode=' . $_GET['timezone'] . '" style=width:100%;height:800px;></iframe></td></tr></table>';
    } else if (isset($_POST['timezone'])) {
    $tabp='<table style=width:100%;><tr><td style=vertical-align:top;>';
    $tabs='</td><td style=vertical-align:top;width:50%;><iframe src="/HTMLCSS/colour_wheel.html?mode=' . $_POST['timezone'] . '" style=width:100%;height:800px;></iframe></td></tr></table>';
    }
    $revealp='';
    $reveals='';
    $clockcss='';
    $clocksvg="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewport='0 0 100 100' style='font-family:Verdana;font-size:10px;'><text y='50%'>\\0023f0</text></svg>";

    if (isset($_GET['clock']) || isset($_POST['clock'])) {
    $revealp='<details title="Form you can use to display different time or different clock"><summary title="Form you can use to display different time or different clock"></summary>' . $tabp;
    $reveals=$tabs . '</details>';
    $clockcss="\n #pdfmt { border-radius: 50px; } \n";
    } else {
    $revealp=$tabp;
    $reveals=$tabs;
    }

    ?>

  • document.body onload emoji flag application (via Javascript) …
    <?php echo ”

    function onlit() {
    txils=parent.document.getElementById('tzsel').innerHTML.split(' value=\"' + thistz + '\"');
    if (eval('' + txils.length) > 1) {
    isov=txils[1].split('>')[0].split(',')[3];
    cnb='';
    if (ctynames.indexOf(\" value='\" + isov + \"'>\") != -1) {
    cnb=' in ' + ctynames.split(\" value='\" + isov + \"'>\")[1].split('<')[0];
    document.getElementById('tzsel').title='Default is a Timezone in ' + ctynames.split(\" value='\" + isov + \"'>\")[1].split('<')[0];
    document.getElementById('myh1').innerHTML+=' for ' + (thistz + '/').replace(thistz.split('/')[0] + '/', '').split('/')[1].replace(/\_/g,' ') + ' ' + (thistz + '/').replace(thistz.split('/')[0] + '/', '').split('/')[0].replace(/\_/g,' ').trim().replace('Argentina','');
    document.getElementById('myh1').innerHTML+=cnb + ' ' + jorflag(isov);
    }
    }
    }

    “; ?>
  • clock button styling …
    <?php

    $clockcss='';
    $clocksvg="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewport='0 0 100 100' style='font-family:Verdana;font-size:10px;'><text y='50%'>\\0023f0</svg>";

    ?>
    <?php echo ”

    <style>
    " . $clockcss . "
    input[type=\"text\"] { width: 250px; }
    #clock { border-radius: 50px; color:pink; text-shadow:-1px 1px 1px yellow; background-image: url('" . str_replace("'",'"',$clocksvg) . "'); }
    </style>

    “; ?>

  • clock recursive style functionality via an iframe onload event paradigm (with function clockif below) …
    <?php echo ”

    var documentURL=document.URL;
    var repcnt=0, cnb='', isov='', txils=[];
    var thistz=(location.search.split('timezone=')[1] ? (decodeURIComponent(location.search.split('timezone=')[1].split('&')[0]) + '') : '');

    function clockif(iois) {
    if (iois.src.indexOf('About_Us.') == -1) {
    repcnt++;
    setTimeout(function(){ iois.src=iois.src.split('&rand=')[0] + '&rand=' + repcnt; }, 1000);
    var aconto = (iois.contentWindow || iois.contentDocument);
    if (aconto != null) {
    if (aconto.document) { aconto = aconto.document; }
    if (aconto.body != null) {
    if (aconto.getElementById('pdfmt') && parent.document.getElementById('pdfmt')) {
    parent.document.getElementById('pdfmt').innerHTML=aconto.getElementById('pdfmt').innerHTML;
    if (repcnt == 1) {
    parent.document.getElementById('pdfmt').style.border='5px dotted pink';
    parent.document.getElementById('pdfmt').style.padding='5 5 5 5';
    if (eval('' + txils.length) > 1) {
    parent.document.getElementById('pdfmt').title='Timestamp for ' + documentURL.split('?')[1].split('&cl')[0].replace(/\&/g,' ').replace(/\=/g,' ').replace(/\%2F/g,'/').replace(/\%2f/g,'/') + txils[1].split('>')[0] + cnb;
    } else {
    parent.document.getElementById('pdfmt').title='Timestamp for ' + documentURL.split('?')[1].split('&cl')[0].replace(/\&/g,' ').replace(/\=/g,' ').replace(/\%2F/g,'/').replace(/\%2f/g,'/');
    }
    }
    }
    }
    }
    }
    }

    “; ?>
    … called into play via document.body onload Javascript …
    <?php echo ”

    <body onload="onlit(); if (documentURL.indexOf('clock=') != -1) { setTimeout(function(){ document.getElementById('justincase').src=documentURL=documentURL.replace('clock=','cloNOWAYck=') + '&rand=' + repcnt; }, 1000); } ">

    “; ?>
    … along with a new form submit button choice …
    <?php echo ”

    <input style=background-color:#f0f0f0; title=Clock type=submit id=clock name=clock value=Clock></input>

    “; ?>

  • dropdown option (subelement) emoji flag title …
    Locale
    <?php

    $locsel='';
    $arrl=ResourceBundle::getLocales('');
    for ($df=0; $df<sizeof($arrl); $df++) {
    $endih='';
    $lastword=explode('_',$arrl[$df])[-1 + sizeof(explode('_',$arrl[$df]))];
    $ends=explode("['" . explode('-',explode('_',$arrl[$df])[0])[0] . '-', $lochelper);
    if (sizeof($ends) > 1) {
    $endih.=' ' . explode("'", explode("['", $ends[0])[-1 + sizeof(explode("['", $ends[0]))])[0];
    }
    if (strpos($lochelpertwo, '>' . explode('-',explode('_',$arrl[$df])[0])[0] . '</a>') !== false) {
    //echo "yes " . explode('-',explode('_',$arrl[$df])[0])[0] . "\n<br>";
    //echo substr(explode('>' . explode('-',explode('_',$arrl[$df])[0])[0] . '</a>', $lochelpertwo)[0], -250,250);
    $interim=explode('</a>', explode('<tr', explode('>' . explode('-',explode('_',$arrl[$df])[0])[0] . '</a>', $lochelpertwo)[0])[-1 + sizeof(explode('<tr', explode('>' . explode('-',explode('_',$arrl[$df])[0])[0] . '</a>', $lochelpertwo)[0]))])[0]; //)[-1 + sizeof(explode('>', explode('</td>', explode('<tr', explode('>' . explode('-',explode('_',$arrl[$df])[0])[0] . '</a>', $lochelpertwo)[0];
    //exit;
    $aintm=explode('>', $interim)[-1 + sizeof(explode('>', $interim))];
    if (strpos($endih, ' ' . $aintm) === false) {
    if ($endih != '') {
    $endih.=' (' . $aintm . ')';
    } else {
    $endih.=' ' . $aintm;
    }
    }
    }
    if ($lastword == strtoupper($lastword) && strlen($lastword) == 2) {
    $endih.=' ' . orflag($lastword);
    }
    if ($endih != '') {
    $endih="\t" . $endih . '';
    }

    if (strpos(($arrl[$df] . '_'), '_') !== false) { //} && strpos($arrl[$df], '0') === false) {
    if ($locsel == '') {
    $locsel="<select onchange=\"if (this.value.trim().length != 0) { document.getElementById('locale').value=tzdef(this.value); }\" id=locsel><option id=\"loptone\" value=''>Optionally select a Locale below ...</option></select>";
    }
    $locsel=str_replace("</select>", "<option value='" . $arrl[$df] . "' translate=\"no\" title=\"" . $endih . "\">" . $arrl[$df] . "</option></select>", $locsel);
    }
    }

    ?>
    TimeZone
    <?php

    $yourtzlist="<select onchange=\"if (this.value.trim().length != 0) { document.getElementById('timezone').value=this.value; }\" id=tzsel><option id=\"toptone\" value=''>Optionally select a TimeZone below ...</option><option value='Africa/Abidjan' data-geo='5.31666,-4.03334,GMT,CI,+0'>Africa/Abidjan</option><option value='Africa/Accra' data-geo='5.55,-0.21667,GMT,GH,+0'>Africa/Accra</option><option value='Africa/Addis_Ababa' data-geo='9.03333,38.7,EAT,ET,+3'>Africa/Addis_Ababa</option><option value='Africa/Algiers' data-geo='36.78333,3.05,CET,DZ,+1'>Africa/Algiers</option> ... blah ... blah ... blah ... </select>";

    $yls=explode(" data-geo='", $yourtzlist);
    for ($iy=(-1 + sizeof($yls)); $iy>=1; $iy--) {
    if (sizeof(explode(',', $yls[$iy])) > 3) {
    $icp=explode(',', $yls[$iy])[3];
    //echo $icp;
    if ($icp == strtoupper($icp) && strlen($icp) == 2 && strpos($icp, '?') === false) {
    //echo $icp . ' data-geo="' . $yls[$iy] . ' becomes ' . ' title="' . orflag($icp) . '" data-geo="' . $yls[$iy];
    //exit;
    $yourtzlist=str_replace(" data-geo='" . $yls[$iy], ' title=' . "'" . orflag($icp) . "'" . " data-geo='" . $yls[$iy], $yourtzlist);
    }
    }
    }


    ?>

… in a changed “third draft” PHP code offering here, as a PHP web application, you can also try below.


Previous relevant PHP Intl Class Datetime Defaults Tutorial is shown below.

PHP Intl Class Datetime Defaults Tutorial

PHP Intl Class Datetime Defaults Tutorial

Onto the recent PHP Intl Class Datetime Tutorial start to a PHP Current Datetime Intl Using Internationalization web application we see a way forward improving …

  • default Locale and TimeZone presented …
    Locale
    <?php

    $defloc=Locale::acceptFromHttp($_SERVER['HTTP_ACCEPT_LANGUAGE']);

    ?>
    Timezone
    <?php

    $deficc=explode('_', str_replace('_posix','',$defloc))[-1 + sizeof(explode('_', str_replace('_posix','',$defloc)))];
    $yourtzlist="<select onchange=\"if (this.value.trim().length != 0) { document.getElementById('timezone').value=this.value; }\" id=tzsel><option id=\"toptone\" value=''>Optionally select a TimeZone below ...</option><option value='Africa/Abidjan' data-geo='5.31666,-4.03334,GMT,CI,+0'>Africa/Abidjan</option><option value='Africa/Accra' data-geo='5.55,-0.21667,GMT,GH,+0'>Africa/Accra</option><option value='Africa/Addis_Ababa' data-geo='9.03333,38.7,EAT,ET,+3'>Africa/Addis_Ababa</option><option value='Africa/Algiers' data-geo='36.78333,3.05,CET,DZ,+1'>Africa/Algiers</option> ... blah ... blah ... blah ... </select>";

    if (strpos($yourtzlist, ',' . $deficc . ',') !== false) {
    $ourtz=explode('<', explode('>', explode(',' . $deficc . ',', $yourtzlist)[1])[1])[0];
    } else {
    $ourtz="''"; //date.timezone; // ($_SERVER['TZ'] ?? (file_get_contents('/etc/timezone') ?: file_get_contents('/etc/localtime')))
    }

    ?>

  • add accompanying dropdown ways to select values from a list of what is available on Locale and TimeZone (as above) and Calendar …
    <?php

    $calsel='';
    if (1 == 1) {
    $bundle=new ResourceBundle('','ICUDATA');
    $cnames=[];
    $calendars=$bundle->get('calendar');
    foreach ($calendars as $n=>$v) {
    if ($calsel == '') {
    $calsel="<select onchange=\"if (this.value.trim().length != 0) { document.getElementById('calendar').value=this.value; }\" id=calsel><option value=''>Optionally select a Calendar system below ...</option></select>";
    }
    $calsel=str_replace("</select>", "<option value='" . $n . "'>" . $n . "</option></select>", $calsel);
    $cnames[]=$n;
    }
    }

    $locsel='';
    $arrl=ResourceBundle::getLocales('');
    for ($df=0; $df<sizeof($arrl); $df++) {
    if (strpos(($arrl[$df] . '_'), '_') !== false) { //} && strpos($arrl[$df], '0') === false) {
    if ($locsel == '') {
    $locsel="<select onchange=\"if (this.value.trim().length != 0) { document.getElementById('locale').value=tzdef(this.value); }\" id=locsel><option id=\"loptone\" value=''>Optionally select a Locale below ...</option></select>";
    }
    $locsel=str_replace("</select>", "<option value='" . $arrl[$df] . "'>" . $arrl[$df] . "</option></select>", $locsel);
    }
    }

    ?>

  • change input type=text placeholder reflect any previously selected Locale and TimeZone and/or Calendar …
    <?php echo ”

    echo "<h1>Show Current Time</h1><br><h3>RJM Programming - December, 2024</h3><br><h4>As per (white background textboxes optional) ...</h4><br><br><form method=GET onsubmit=\"if (document.getElementById('calendar').value.trim() != '') { document.getElementById('calendar').name='calendar'; } if (document.getElementById('locale').value.trim() == '' || document.getElementById('timezone').value.trim() == '') { return false; } return true;\" action=\"./i_eg.php\">
    <br><input type=text ondblclick=this.value=this.placeholder; style=background-color:yellow; id=locale name=locale placeholder=" . (isset($_GET['locale']) ? urldecode($_GET['locale']) : (isset($_POST['locale']) ? urldecode($_POST['locale']) : $defloc)) . " value='' title=Locale></input> " . $locsel . "
    <br><input type=text ondblclick=this.value=this.placeholder; style=background-color:yellow; id=timezone name=timezone placeholder=" . (isset($_GET['timezone']) ? urldecode($_GET['timezone']) : (isset($_POST['timezone']) ? urldecode($_POST['timezone']) : $ourtz)) . " value='' title=TimeZone></input> " . $yourtzlist . "
    <br><input type=text ondblclick=this.value=this.placeholder; style=background-color:white; id=calendar placeholder=" . (isset($_GET['calendar']) ? urldecode($_GET['calendar']) : (isset($_POST['calendar']) ? urldecode($_POST['calendar']) : "gregorian")) . " value='' title=Calendar></input> " . $calsel . "
    <br><br><input style=background-color:lightgreen; type=submit value=Display></input>
    </form>
    ";

    “; ?>

… and regarding Locale selections take the opportunity to gather up to the top of Locale and TimeZone dropdowns any options relevant to any Locale first selected …

<?php echo ”

<scri" . "pt type=text/javascript>
var ctynames=\"" . str_replace("\n","",$ctynames) . "\";
var canmakenothing=false, firstloc='';

function tzdef(inloc) { // wrapper around Locale dropdown selected value
var inicc=inloc.replace(/\-/g,'_').split('_')[eval(-1 + inloc.replace(/\-/g,'_').split('_').length)];
var jnicc=inicc;
var newtstuff='', newlstuff='', newts=0, newls=0, tvalis='';
if (ctynames.indexOf(\" value='\" + inicc + \"'>\") != -1) {
jnicc=ctynames.split(\" value='\" + inicc + \"'>\")[1].split('<')[0];
}
if (document.getElementById('timezone').value == '' && inicc.trim() != '' && inicc == inicc.toUpperCase() && eval('' + inicc.length) == 2) {
var tzoh=document.getElementById('tzsel').innerHTML;
var aftertopt=document.getElementById('toptone').outerHTML;
var tzloh=document.getElementById('locsel').innerHTML;
var afterlopt=document.getElementById('loptone').outerHTML;
var tzs=tzoh.split(',' + inicc + ',');
if (eval('' + tzs.length) > 1) {
//document.getElementById('timezone').value=tzs[1].split('>')[1].split('<')[0];
tvalis=tzs[1].split('>')[1].split('<')[0];
newtstuff+='<option value=\"' + tvalis + '\">' + tvalis + '</option>';
for (newts=1; newts<eval('' + tzs.length); newts++) {
if (tzs[newts].split('>')[1].split('<')[0] != tvalis) {
newtstuff+='<option value=\"' + tzs[newts].split('>')[1].split('<')[0] + '\">' + tzs[newts].split('>')[1].split('<')[0] + '</option>';
}
}
tzs=tzloh.split('_' + inicc + '\"');
if (eval('' + tzs.length) > 1) {
newlstuff+='<option value=\"' + inloc + '\">' + inloc + '</option>';
for (newls=1; newls<eval('' + tzs.length); newls++) {
if (tzs[newls].split('>')[1].split('<')[0] != inloc) {
newlstuff+='<option value=\"' + tzs[newls].split('>')[1].split('<')[0] + '\">' + tzs[newls].split('>')[1].split('<')[0] + '</option>';
}
}
}
}
if (tzoh.indexOf(aftertopt) != -1 && newtstuff != '') {
document.getElementById('tzsel').innerHTML=aftertopt.replace(' id=', ' data-id=').replace(' value=\"', ' value=\" ').replace(' a Time', ' ' + jnicc + ' Time') + newtstuff + aftertopt + tzoh.split(aftertopt)[1];
}
if (tzloh.indexOf(afterlopt) != -1 && newlstuff != '') {
document.getElementById('locsel').innerHTML=afterlopt.replace(' id=', ' data-id=').replace(' value=\"', ' value=\" ').replace(' a Locale', ' ' + jnicc + ' Locale') + newlstuff + afterlopt + tzloh.split(afterlopt)[1];
}
if (tvalis != '') { document.getElementById('timezone').value=tvalis; }
document.getElementById('locsel').value=inloc;
firstloc=inicc;
canmakenothing=true;
}
if (document.getElementById('tzsel').value == ' ' && canmakenothing) {
if (inicc != firstloc) {
document.getElementById('tzsel').value='';
}
}
return inloc.replace(/\-/g,'_');
}
</scr" . "ipt>

“; ?>

… containing an ISO-3166 2 letter Country Code at it’s end, mentioning that country’s name in that first option of the TimeZone dropdown, so that some users will see a Country Name in the mix, adding to relatability, perhaps.

We feel this considerably improves the User Experience using a changed “second draft” PHP code offering here, as a PHP web application, you can also try below.


Previous relevant PHP Intl Class Datetime Tutorial is shown below.

PHP Intl Class Datetime Tutorial

PHP Intl Class Datetime Tutorial

We’re back revisiting the PHP intl “Internationalization” class mentioned in “the AlmaLinux install feeling” PHP Mbstring Multibyte String and Intl Class Tutorial

Reading a bit, we cottoned onto three data items being central to Datetime PHP intl usage being …

  1. locale
  2. timezone
  3. calendar … optional

… and, so, we’re starting our “learning curve” (we got great help from this excellent website developing …

<?php

if (isset($_GET['locale']) && isset($_GET['timezone']) && isset($_GET['calendar'])) {
$DateTime = new DateTime();
$IntlDateFormatter = new IntlDateFormatter(
urldecode($_GET['locale']) . '@calendar=' . urldecode($_GET['calendar']),
IntlDateFormatter::FULL,
IntlDateFormatter::FULL,
urldecode($_GET['timezone']),
IntlDateFormatter::TRADITIONAL);

echo '<p>' . $IntlDateFormatter->format($DateTime) . '</p><br><br>';
}

?>

…) in today’s “first draft” “proof of concept” offering here, as a PHP web application, you can also try below …


Previous relevant PHP Mbstring Multibyte String and Intl Class Tutorial is shown below.

PHP Mbstring Multibyte String and Intl Class Tutorial

PHP Mbstring Multibyte String and Intl Class Tutorial

We’re revisiting the PHP Mbstring Multibyte String Primer Tutorial of the past to see where we stand now with PHP 8 and …

  • mbstring “Multibyte String” extension … and …
  • intl “Internationalization Functions” extension

… and discovered that we can happily now have a chance incorporating these functionalities into PHP serverside logic into the future. We tested this with a tweaked mbstring_test.php “old way” live run and “new way” live run via the writing of a couple of “proof of concepts” …


Previous relevant PHP Mbstring Multibyte String Primer Tutorial is shown below.

PHP Mbstring Multibyte String Primer Tutorial

PHP Mbstring Multibyte String Primer Tutorial

Our (Mac OS X laptop) local MAMP web server is an Apache/PHP/MySql web server. In this environment you can find out a lot with some PHP code as per …

<?php phpinfo(); ?>

… and if, in doing this, you find a reference to the “mbstring” Multibyte String Information functionality existing, you are a lucky candidate to introduce some internationalization code into your PHP code, for those occasions where the destination language uses a UTF-8 character set where individual characters can not be described by the ascii character set from decimal 0 to decimal 255. In other words, it takes more than one byte to describe each character of the language. There are many languages like this, a few being the Chinese languages, Japanese and Korean.

We followed a lot of the advice of the very useful link (thanks) to create some PHP called …

… where we show what we always suspected but were too shy to ask, and didn’t flesh it out before … doh! … you can’t split a Chinese phrase’s characters into their individual characters and expect those characters individually translated bring you back to the sense of the Chinese phrase to start with.

So we take the Chinese phrase 火车票 (which translates into English as “Train tickets” … and we thank Google Translate for help with all this) and use PHP mbstring’s mb_str_split to properly split the Chinese into its constituent multibyte (UTF-8) characters (and along the way, show that PHP str_split messes up this same task, as you’d probably guess would happen), and then translate all these into English using Google Translate, as an intellectual exercise.

If this exercise makes you …

  • a) fall on the floor laughing
  • b) hit a gong with a huge hammer
  • c) cook up some deep fried dumplings
  • d) put the left chopstick in the right ear and the right chopstick in the left ear (please ask for adult supervision) … translation: do not do this
  • e) while reading you sweep the cat under the rug (no animals were harmed in the making of this blog posting)

… then we’re here to tell you that you need to take a Bex and have a lie down.

We are just showing in PHP that if the mbstring functionality is available to you, that the mbstring library of functionality can help with some Internationalization issues you may be grappling with and that this PHP code you could try via this live run link.

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

Clairvoyance Game Scoring Bonus Tutorial

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.

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