Today’s work with Code Difference Reporting both …
changes and standardizes dates presented under the Code Difference Reporting Context Tutorial iframe (edge) hovering reports to … in PHP talk …
<?php
$oneize='';
$twoize='';
if (isset($_GET['zero'])) { // && !isset($_GET['two'])) {
if (strpos(str_replace('+',' ',urldecode($_GET['zero'])), 'rjmprogramming.com.au') !== false) {
$oneize='https://www.rjmprogramming.com.au' . explode('rjmprogramming.com.au',str_replace('+',' ',urldecode($_GET['zero'])))[1] . ' last modified on ' . gmdate("F d, Y H:i:s \G\M\T", filemtime($_SERVER['DOCUMENT_ROOT'] . explode('rjmprogramming.com.au',str_replace('+',' ',urldecode($_GET['zero'])))[1]));
}
}
if (isset($_GET['one'])) { // && !isset($_GET['two'])) {
if (strpos(str_replace('+',' ',urldecode($_GET['one'])), 'rjmprogramming.com.au') !== false) {
$oneize='https://www.rjmprogramming.com.au' . explode('rjmprogramming.com.au',str_replace('+',' ',urldecode($_GET['one'])))[1] . ' last modified on ' . gmdate("F d, Y H:i:s \G\M\T", filemtime($_SERVER['DOCUMENT_ROOT'] . explode('rjmprogramming.com.au',str_replace('+',' ',urldecode($_GET['one'])))[1])));
}
}
if (isset($_GET['two'])) {
if (strpos(str_replace('+',' ',urldecode($_GET['two'])), 'rjmprogramming.com.au') !== false) {
$twoize='https://www.rjmprogramming.com.au' . explode('rjmprogramming.com.au',str_replace('+',' ',urldecode($_GET['two'])))[1] . ' last modified on ' . gmdate("F d, Y H:i:s \G\M\T", filemtime($_SERVER['DOCUMENT_ROOT'] . explode('rjmprogramming.com.au',str_replace('+',' ',urldecode($_GET['two'])))[1])));
}
} else if (strpos($oneize,'-GETME') !== false) {
$twoize='https://www.rjmprogramming.com.au' . str_replace('-_GETME','-GETME',str_replace('-GETME','_GETME',explode('rjmprogramming.com.au',str_replace('+',' ',urldecode($_GET['one'])))[1])) . ' last modified on ' . gmdate("F d, Y H:i:s \G\M\T", filemtime($_SERVER['DOCUMENT_ROOT'] . str_replace('-_GETME','-GETME',str_replace('-GETME','_GETME',explode('rjmprogramming.com.au',str_replace('+',' ',urldecode($_GET['one'])))[1]))));
}
?>
… to look like a lot like the dates presented on this WordPress Blog, but datumized to being a GMT file modified datetime … and, as with today’s …
additional top and bottom iframe (content) hover new reporting … like …
https://www.rjmprogramming.com.au/Games/Clairvoyance/clairvoyance_game.html-----------GETME last modified on June 01, 2026 10:39:09 GMT
… created, involving …
<?php
$midhsscr.=" var aconto=null; if (iois != null) { aconto = (iois.contentWindow || iois.contentDocument); if (aconto != null) { if (aconto.document) { aconto = aconto.document; } if (aconto.body != null) { parent.titleize(event.target.src,aconto.body,'" . $oneize . "','" . $twoize . "'); } } } var difs=document.getElementsByTagName('iframe'); for (var ij=0; ij<=2; ij+=2) { if (difs[ij].title.replace('.js_','.js-').indexOf('.js-') != -1 && difs[ij].title.replace('.js_','.js-').indexOf('GETME') != -1) { difs[ij].src=difs[ij].title; difs[ij].title=''; } } ";
$style="<scr" . "ipt type=text/javascript> var prehs=';;'; function doprehs(cval,cwhich) { var pbits=prehs.split(';'); if (cwhich == 0) { document.getElementById('myhl').style.color=cval; prehs=cval.replace(/\;/g,'') + ';' + pbits[1] + ';'; } else if (cwhich == 1) { document.getElementById('myhl').style.backgroundColor=cval; prehs=pbits[0] + ';' + cval.replace(/\;/g,'') + ';'; } } function mayberework(iois) { " . $midhsscr . " } ";
$style.="\n function titleize(tpone,tptwo,tone,ttwo) { if (tpone.indexOf('zero.') != -1) { if (('' + tone) != '') { tptwo.title='' + tone; tptwo.ondblclick=function(event) { alert('' + event.target.title); } } } else if (tpone.indexOf('one.') != -1) { if (('' + tone) != '') { tptwo.title='' + tone; tptwo.ondblclick=function(event) { alert('' + event.target.title); } } } else if (tpone.indexOf('two.') != -1) { if (('' + ttwo) != '') { tptwo.title='' + ttwo; tptwo.ondblclick=function(event) { alert('' + event.target.title); } } } } \n";
$style.=" </scr" . "ipt><style> font { text-shadow: -1px 1px 1px #ff2d95; } </style>";
?>
… to further, and better formalize the contextualization of the context within the diff.php PHP code base.
We had a day recently where we thought it useful to somehow point out to users if their Code Difference Report is not related to the most up to date one they could get, or for that matter if not at the beginning of the code development process.
And then a few days later we realized it would be related, and good, to supply some code file dates for reference, which now happens via a double click or with non-mobile user, just hovering over the Code Difference Report web page.
Primarily, what changed is encapsulated by this new PHP function …
<?php
function posthit($inhit) {
global $dtbizzo;
$outhit=$inhit;
$preout="";
$pregetme="";
$postgetme="";
$htis='';
if (strpos($inhit, 'http://www.rjmprogramming.com.au') !== false) {
$htis='http://';
} else if (strpos($inhit, 'HTTPS://www.rjmprogramming.com.au') !== false) {
$htis='HTTPS://';
}
if (strpos($inhit, '' . $htis . 'www.rjmprogramming.com.au') !== false) {
if (strpos($inhit, '_GETME') !== false) {
$pregetme=str_replace("" . $htis . "www.rjmprogramming.com.au",$_SERVER['DOCUMENT_ROOT'],explode("_GETME", $inhit)[0]);
} else {
$pregetme=rtrim(str_replace("" . $htis . "www.rjmprogramming.com.au",$_SERVER['DOCUMENT_ROOT'],explode("-GETME", $inhit)[0]),'-');
}
$maxlenfile="";
$minlenfile="";
$seclast="";
$thelast="";
foreach (glob($pregetme . "*GETME") as $flfilename) {
if ($thelast == "") {
$thelast=basename($flfilename);
} else {
$seclast=$thelast;
$thelast=basename($flfilename);
}
}
$thisoneinteresting=true;
$nextoneinteresting=false;
$midoneinterest=false;
foreach (glob($pregetme . "*GETME") as $flfilename) {
if ($dtbizzo == "") {
$dtbizzo=" document.body.title='Relevant filenames and dates (also via double click) are '; ";
}
if ($seclast == basename($flfilename)) {
$thisoneinteresting=true;
$nextoneinteresting=false;
$midoneinterest=false;
}
if (basename($flfilename) == basename($inhit)) {
$thisoneinteresting=true;
$nextoneinteresting=false;
$midoneinteresting=true;
}
if ($maxlenfile == "") {
$maxlenfile=$flfilename;
$minlenfile=$flfilename;
} else if (strlen($flfilename) > strlen($maxlenfile)) {
$maxlenfile=$flfilename;
} else if (strlen($flfilename) <= strlen($minlenfile)) {
if (strlen($flfilename) < strlen($minlenfile)) {
$minlenfile=$flfilename;
} else { //if (strpos($flfilename, '-GETME') !== false) {
if (file_exists(str_replace('_GETME','-GETME',$flfilename))) {
$minlenfile=str_replace('_GETME','-GETME',$flfilename);
} else {
$minlenfile=$flfilename;
}
}
}
if (strpos($dtbizzo, " ") === false && ($thisoneinteresting || $nextoneinteresting || $midoneinteresting)) {
$dtbizzo=str_replace(" ';", "' + String.fromCharCode(10) + '" . basename($flfilename) . " " . date ("F d Y H:i:s.", filemtime($flfilename)) . " ';",$dtbizzo);
if ($thisoneinteresting && !$nextoneinteresting && !$midoneinteresting) {
$thisoneinteresting=false;
$nextoneinteresting=true;
} else if ($thisoneinteresting && !$nextoneinteresting && $midoneinteresting) {
$thisoneinteresting=false;
$nextoneinteresting=false;
} else if (!$thisoneinteresting && !$nextoneinteresting && $midoneinteresting) {
$midoneinteresting=false;
} else if (!$thisoneinteresting && $nextoneinteresting && !$midoneinteresting) {
$nextoneinteresting=false;
}
}
}
if ($dtbizzo != "" && strpos($dtbizzo, " ") === false) { $dtbizzo.=' document.body.ondblclick=function(){ var huhpr=prompt(document.body.title,document.body.title); }; '; }
}
if ($minlenfile != "" && $maxlenfile != "") {
if (str_replace($_SERVER['DOCUMENT_ROOT'],"" . $htis . "www.rjmprogramming.com.au",$minlenfile) == $inhit && str_replace($_SERVER['DOCUMENT_ROOT'],"" . $htis . "www.rjmprogramming.com.au",$maxlenfile) == $inhit) {
$preout.=" corresponds to first (and last) difference report ... ";
} else if (str_replace($_SERVER['DOCUMENT_ROOT'],"" . $htis . "www.rjmprogramming.com.au",$minlenfile) == $inhit) {
$preout.=" is first relevant difference report and <a target=_blank title='Latest difference report' href='/PHP/Geographicals/diff.php?one=" . str_replace($_SERVER['DOCUMENT_ROOT'],"" . $htis . "www.rjmprogramming.com.au",$maxlenfile) . "'>currently the report would be</a> <font size=1>(but work on it may be not finalised)</font> ... ";
} else if (str_replace($_SERVER['DOCUMENT_ROOT'],"" . $htis . "www.rjmprogramming.com.au",$maxlenfile) == $inhit) {
$preout.=" <a target=_blank title='First difference report' href='/PHP/Geographicals/diff.php?one=" . str_replace($_SERVER['DOCUMENT_ROOT'],"" . $htis . "www.rjmprogramming.com.au",$minlenfile) . "'>is first relevant difference report</a> and this report corresponds to latest difference report ... ";
} else if ($minlenfile != "" && $maxlenfile != "") {
$preout.=" <a target=_blank title='First difference report' href='/PHP/Geographicals/diff.php?one=" . str_replace($_SERVER['DOCUMENT_ROOT'],"" . $htis . "www.rjmprogramming.com.au",$minlenfile) . "'>is first relevant difference report</a> and <a target=_blank title='Latest difference report' href='/PHP/Geographicals/diff.php?one=" . str_replace($_SERVER['DOCUMENT_ROOT'],"" . $htis . "www.rjmprogramming.com.au",$maxlenfile) . "'>currently the report would be</a> <font size=1>(but work on it may be not finalised)</font> ... ";
}
}
Code Difference AlmaLinux New Webserver Issue Tutorial
Software people involved in PHP programming will be aware that a lot of “what goes on under the hood” configuration wise happens regarding that PHP version’s php.ini configuration file. Sometimes you have direct access to changing the php.ini file. Need I say “be careful” if you make changes, and restart the Apache httpd service to implement? There’ll be situations you have no access to that php.ini file or rely on a shared hosting environment or prefer better experts to handle the changes cough, cough where you’ll forgo these changes to your web hoster’s expertise. Anyway, up until today, php.ini issues on our newer AlmaLinux webserver stopped it performing on that webserver, and had us pointing back to the old webserver IP address to get something working these last weeks.
That php.ini may have a directive …
disable_functions
… where PHP functions such as exec and shell_exec become more and more contentious over time regarding security concerns. Other PHP functions in that category might be file_get_contents (and we started using PHP fread a lot more for example …
… and though we could rearrange into a crontab/curl arrangement that would get around the need for exec and shell_exec calls within this project’s PHP … but as Lleyton and John would say … come on … and … you cannot be serious!
The new diff.php got changed as per this link to suit this new webserver, on it’s own terms.
Code Difference AlmaLinux HTML Issue Followup Tutorial
Web application solutions, looking at them the next day, can often throw up …
There’s more to it than that.
… ideas, especially if you’ve been beavering away at the one code source (section), and the overall solution might involve more than that. And it may be …
your own followup testing … or …
your own followup usage (somewhere else, that annoys) … or …
someone else’s observations
… which gets you to realize you’ve only addressed one part of several parts to an overall solution. This occurred regarding Code Difference AlmaLinux HTML Issue Tutorial from a couple of days ago, and us happening upon a link like the https://www.rjmprogramming.com.au/HTMLCSS/body_cavities.html-GETME (and we’re only worrying about .html and GETME style URLs here) of …
… is like one we’d use at this blog but want it to display code, and in this scenario we often display …
a code differences link … the problems of which we addressed in part one of the solution a few days ago …
a link like above that is meant to display HTML code …
as applicable, a link to the web application involved
So, as of a couple of days ago, that middle one would do something, for HTML code links, but not what we were expecting. But because we have that access to the WordPress blog TwentyTen theme header.php PHP codex code, we can amend as per (working off the structure of a previous modification you can read about at WordPress Table Cell Nests Code Element Overflow Issue Tutorial) …
<?php
function calendar_pass() {
var thisc='', thiscc='', thist='', jiicp=0, thisdate='', thistime='', nexttime='', thishour=0, nexthour=0, thisminute='', thissecond='00', thisurl='';
var h1cps=docgetclass('entry-title','*'); //document.getElementsByTagName('h2');
var tdzs=document.getElementsByTagName('td'), itdzs=0;
var cps=document.getElementsByTagName('a');
var cdes=document.getElementsByTagName('code');
var mfnd=false, washref='';
for (var ijcal=0; ijcal<cps.length; ijcal++) { // new calendar links background image
// Check for GETME links for .htm and no diff.php mention
if (('' + cps[ijcal].href).toLowerCase().indexOf('.htm') != -1 && ('' + cps[ijcal].href).indexOf('GETME') != -1 && ('' + cps[ijcal].href).indexOf('diff.php') == -1) {
washref=('' + cps[ijcal].href);
cps[ijcal].href='//www.rjmprogramming.com.au/PHP/Geographicals/diff.php?zero=' + encodeURIComponent(washref) + '#seehtmllook=n';
}
if (eval('' + ('' + cps[ijcal].href).split('/').length) == 8) {
if (eval('' + ('' + cps[ijcal].href).split('/')[4].length) == 4) {
mfnd=false;
for (itdzs=0; itdzs<tdzs.length; itdzs++) {
if (tdzs[itdzs].innerHTML.replace(String.fromCharCode(10),'').indexOf('<code') == 0 && navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
if (tdzs[itdzs].outerHTML.indexOf('-webkit-overflow-scrolling') == -1) {
if (1 == 1) {
tdzs[itdzs].innerHTML=tdzs[itdzs].innerHTML.replace('<code>','<code style="-webkit-overflow-scrolling:touch;overflow:scroll;">').replace('<code style="','<code style="-webkit-overflow-scrolling:touch;overflow:scroll;');
} else {
tdzs[itdzs].WebkitOverflowScrolling='touch';
tdzs[itdzs].Overflow='scroll';
}
}
}
cps[jiicp].innerHTML+=' <a id="oe' + h1cps[iicp].innerHTML.split(' id="d')[1].split('"')[0] + '" title="Change order of blog posts (now newest to oldest) to oldest through to newest (like a book)" target=_blank style="text-decoration:none;cursor:pointer;" onclick="hrrearrange(this);">🔀</a>';
… shows the content as an HTML webpage, whereas we’re used to seeing this display the HTML code contained within that file.
Our code difference reporting system worked that way, ideally. Other extensions like *.php* based ones act the same way between CentOS and AlmaLinux, but we’ve decided to live with this “new woooorrrrllldddd order”, and turn it, in a mild way, to our advantage, offering code difference report readers of *.html* code the chance now to …
see the content as the HTML text within … now that we intervene with PHP code such as …
It took us a long time, but we now feel we’re better across, writing web applications, and dealing with URLs, that …
not mentioning protocols http: nor https: specifically is preferable …
As time goes on, more and more we see the benefits of URLs that start with “/” (but not HTTP:// nor HTTPS:// absolute URL designations), especially when it comes to pointing at a “tool” (eg. external Javascript). It has
the benefits of …
is programmer controlled, so they can place the tool in Document Root folder (in the case of an Apache web server) … and, in so doing …
it’s irrelevant where the “parent” (calling) web application is placed … and …
mixed content issues are avoided by not using an absolute URL, though it kind of, is!
… both ideals above related to Mixed Content (ie. involving “competing protocols” within a webpage).
… and we suspect either of these two URLs might have caused this upper and lower HTML iframes issue up until today. How did we approach the remedy? We could have …
detected the Mixed Content potential of the incoming URL and in the PHP reissued the address bar call, effectively, via a header(‘Location: [newUrlFixedForNiMixedContent]’); style of recall … or, what we ended up doing, being (some readers may find the following “a little bit kludgy , this kludgy inside 🎵, am not one of those, who easily 🎶 kludgifies (at least in public)“) …
stayed on the same PHP execution call via …
<?php
if (isset($_GET['one'])) { // && !isset($_GET['two'])) {
if (strpos(('' .$_SERVER['SERVER_PORT']), '443') !== false && strpos(strtoupper($_GET['one']), 'HTTP') !== false && strpos(strtoupper($_GET['one']), 'HTTPS') === false) {
$_GET['one']='HTTPS' . substr($_GET['one'], 4);
} else if (strpos(('' .$_SERVER['SERVER_PORT']), '443') === false && strpos(strtoupper($_GET['one']), 'HTTPS') !== false) {
$_GET['one']='HTTP' . substr($_GET['one'], 5);
}
if (isset($_GET['two'])) {
if (strpos(('' .$_SERVER['SERVER_PORT']), '443') !== false && strpos(strtoupper($_GET['two']), 'HTTP') !== false && strpos(strtoupper($_GET['two']), 'HTTPS') === false) {
$_GET['two']='HTTPS' . substr($_GET['two'], 4);
} else if (strpos(('' .$_SERVER['SERVER_PORT']), '443') === false && strpos(strtoupper($_GET['two']), 'HTTPS') !== false) {
$_GET['two']='HTTP' . substr($_GET['two'], 5);
}
}
// more PHP
}
?>
… to not mix any of the apples with any of the pears!
Code Difference Highlighting User Interface Tutorial
Unless a piece of your web application functionality is categorized as “internal use only” you, as a programmer, will want to offer functionality that does not ask the user to remember some arcane URL (GET ? and &) arrangement at the address bar of a web browser. And so, onto yesterday’s Code Difference Highlighting Tutorial, talking about our inhouse PHP Code Difference Reporting functionality, we wanted to offer …
The PHP diff.php code got changed so that a user entered comma separated list will be scrutinised for whether it represents a single string to find, or if highlighting should happen for each list member in the comma separated list.
also useful, here, could be a highlighting functionality making use of the HTML mark element, that we gave a sneak peek to regarding, yesterday, with Ants Up a Wall Game Mobile Tutorial if you were one of those readers to click the …
It meant, in that scenario yesterday, when a single variable usage “tells a story” in the code, this code difference highlighting might be more effective at explaining the issues rather than showing the code in a code element (even with inhouse colour coding), because there is also the “before” and “after” scenarios there on the screen for the reader to contextualize. See the newly changed PHP diff.php code or try it yourself here.
the server side file and database and operating system smarts of the great serverside language PHP is … all while …
PHP writing out HTML (with its CSS and Javascript) has a web application able to access all that clientside intelligence
… and with this in mind, we allow for saved CSS styling user settings, as of today, with our Difference Report web application arrangements.
Don’t we need a database for this? Well, that is possible, and with serverside PHP, could be done, but we opt for clientside window.localStorage usage to …
Save user CSS styling settings
Recall user CSS styling settings
… so that a user might opt to “set and forget” their preferred set of …
New additional
Changed single line
New block of lines
Deleted lines
Changed multiple lines
… (CSS Selector) sensitive “categories” of Difference Report data type settings.
<?php
$style="<style> font { text-shadow: -1px 1px 1px #ff2d95; } </style>";
$legend="";
$mx="";
$onecommand=" function nocaret(invx) { var outvx=decodeURIComponent(invx); while (outvx.indexOf('<') > outvx.indexOf('>')) { outvx=outvx.replace('>' + outvx.split('>')[1].split('<')[0] + '<',''); } return encodeURIComponent(outvx); } function onb(event) { var othis=event.target, cih=''; if (('' + othis.id + ' ').substring(0,1) == 'f') { cih=('' + window.localStorage.getItem('diff_' + othis.id)).replace(/^undefined$/g,''.replace(/^null$/g,'')); if (('' + othis.innerHTML.replace(/\ \;/g,' ') + '~~').indexOf(' ~~') != -1) { if (cih == '') { window.localStorage.setItem('diff_' + othis.id, encodeURIComponent('14 >' + othis.innerText + '<')); } else { window.localStorage.removeItem('diff_' + othis.id); window.localStorage.setItem('diff_' + othis.id, nocaret(cih) + encodeURIComponent(' >' + othis.innerText + '<')); } } } } function blurize(othis) { if (1 == 2) { othis.onblur=function(event) { onb(event); }; } return othis; } function perhapsih(insg,ofo) { if (insg.indexOf('<') > insg.indexOf('<') && insg.indexOf('<') != -1) { ofo.innerHTML=insg.split('>')[1].split('>')[0]; ofo.setAttribute('data-ih', insg.split('>')[1].split('>')[0]); return insg.replace('>' + insg.split('>')[1].split('>')[0] + '<', ''); } } function givef(idn,cssis) { if (('' + document.getElementById('f' + idn).title).indexOf(' ' + decodeURIComponent(cssis) + ' ') == -1) { document.getElementById('f' + idn).title=document.getElementById('lspan').title + ' You have user CSS styling friendly one off setting of ' + decodeURIComponent(cssis) + ' for this category of Difference Reporting'; } } function getmaybe(foin,defis) { var mgs=document.URL.split(foin.id + '='); thatget=('' + window.localStorage.getItem('diff_' + foin.id)).replace(/^undefined$/g,'').replace(/^null$/g,''); if (thatget != '') { if (eval('' + mgs.length) == 1) { return decodeURIComponent(thatget); } else if (mgs[1].split('&')[0].split('#')[0] == '') { return decodeURIComponent(thatget); } } if (eval('' + mgs.length) > 1) { if (mgs[1].split('&')[0].split('#')[0] != '') { return decodeURIComponent(mgs[1].split('&')[0].split('#')[0]); } } return defis; } function getany() { var mgs=[],addget='',thisget=''; if (document.URL.replace('?','&').indexOf('&f') == -1 || 1 == 1) { for (var iig=0; iig<=6; iig++) { mgs=document.URL.split('f' + iig + '='); thisget=('' + window.localStorage.getItem('diff_f' + iig)).replace(/^undefined$/g,'').replace(/^null$/g,''); if (thisget != '') { document.getElementById('f' + iig).title=document.getElementById('lspan').title + ' You have user CSS styling friendly setting of ' + decodeURIComponent(thisget) + ' for this category of Difference Reporting'; } if (eval('' + mgs.length) > 1) { if (mgs[1].split('&')[0].split('#')[0] != '') { document.getElementById('f' + iig).title=document.getElementById('lspan').title + ' You have user CSS styling friendly setting of ' + decodeURIComponent(mgs[1].split('&')[0].split('#')[0]) + ' for this category of Difference Reporting'; } } if (document.URL.replace('?','&').indexOf('&f' + iig + '=') == -1) { addget+='&f' + iig + '=' + thisget; } } } if (addget != '') { location.href=(document.URL.split('#')[0] + addget).replace('.php&','.php?'); } } setTimeout(getany,2000); function removeany(newfo) { window.localStorage.removeItem('diff_' + newfo.id); } function addany(newishfo,newwhat) { removeany(newishfo); window.localStorage.setItem('diff_' + newishfo.id, newwhat); } function askabout(fo) { var defd='14', ccol='black', ccols=fo.outerHTML.split(' color=' + String.fromCharCode(34)), psizes=fo.outerHTML.split('px'); if (eval('' + ccols.length) > 1) { ccol=ccols[1].split(String.fromCharCode(34))[0]; } if (eval('' + psizes.length) > 1) { defd=psizes[0].split(':')[eval(-1 + psizes[0].split(':').length)].trim(); } var numis=prompt('How many px (ie. pixels) do you want for the font size of these ' + fo.innerHTML + ' parts of report? Optionally append after a space a colour that is not the default colour ' + ccol + ' for this category of difference report. Optionally append after a space any other styling you want ( eg. text-shadow: -1px 1px 1px #ff2d95; ). Append spaces to save for other Coding Difference Report sessions into the future. Prefix with minus ( ie. - ) to forget any remembered setting. An entry can be > followed by a new wording for this category followed by <', getmaybe(fo,defd)); if (numis != null) { if ((perhapsih(numis,fo) + 'x').trim().substring(0,1) == '-') { removeany(fo); numis=numis.replace('-',''); } if (('' + numis).trim() != '') { if (numis.replace(/\ $/g,'') != numis) { addany(fo,encodeURIComponent(numis.trim())); } location.href=(document.URL.split('#')[0] + '&' + fo.id + '=' + encodeURIComponent(numis.trim())).replace('.php&','.php?'); } } } ";
if (isset($_GET['f0']) || isset($_GET['f1']) || isset($_GET['f2']) || isset($_GET['f3']) || isset($_GET['f4']) || isset($_GET['f5']) || isset($_GET['f6'])) {
$onecommand.=" function sizefonts() { } setTimeout(sizefonts, 3000); ";
for ($ij=0; $ij<=6; $ij++) {
if (isset($_GET['f' . $ij])) {
$ihbit="";
$words=str_replace('+',' ',urldecode($_GET['f' . $ij]));
if (strpos($words, '<') !== false && strpos($words, '>') !== false) {
if (strpos($words, '<') > strpos($words, '>')) {
$ihbit=" document.getElementById('f" . $ij . "').innerHTML='" . str_replace("'", "' + String.fromCharCode(39) + '", explode('<',explode('>',$words)[1])[0]) . "'; ";
}
}
if (trim($words) != '') { $onecommand=str_replace("} ", " givef(" . $ij . ",'" . $_GET['f' . $ij] . "'); } ", $onecommand); }
$wordsa=explode(' ', trim($words));
if (sizeof($wordsa) > 1) {
$words=substr($words,(1 + strlen($wordsa[0])));
for ($ijj=1; $ijj<sizeof($wordsa); $ijj++) {
if (strpos($wordsa[$ijj], ':') === false && $ijj == 1) {
$words=trim(substr($words,(0 + strlen($wordsa[$ijj]))));
$style.='<style> .f' . $ij . " { font-color: " . trim($wordsa[$ijj]) . '; } </style>';
$onecommand=str_replace("} ", " document.getElementById('f" . $ij . "').color='' + '" . trim($wordsa[$ijj]) . "'; document.getElementById('f" . $ij . "').style.fontColor='' + '" . trim($wordsa[$ijj]) . "'; } ", $onecommand);
}
}
if (trim($words) != '') {
if (strpos($words, "{") !== false && strpos($words, "}") !== false) {
$style.='<style> ' . $words . ' </style>';
$onecommand=str_replace("} ", " document.getElementById('dstyle').innerHTML+='<style> ' + '" . $words . " </style>'; } ", $onecommand);
} else {
$style.='<style> .f' . $ij . " { " . $words . ' } </style>';
$onecommand=str_replace("} ", " document.getElementById('dstyle').innerHTML+='<style> .f" . $ij . " { ' + '" . $words . " } </style>'; } ", $onecommand);
}
}
}
$onecommand=str_replace("} ", $ihbit . " document.getElementById('f" . $ij . "').style.fontSize='' + '" . trim($wordsa[0]) . "px'; } ", $onecommand);
$style.='<style> .f' . $ij . " { font-size: " . trim($wordsa[0]) . 'px; } </style>';
}
}
}
?>
… to start making this happen (including being able to change our “inhouse category” names, if you like) in our changeddiff.php‘s more colourful Code Differences helper.
Yesterday’s Code Difference Privacy Tutorial represented too much of an echo chamber for our liking. Where possible, we prefer functionality that the users out there can tweak themselves.
In thinking about this, those 5 categories (involving 2 subcategories) …
New additional
Changed single line
New block of lines
Deleted lines
Changed multiple lines
… were what occurred to us could be the CSS Selector basis for us to improve the Code Difference reporting via CSS styling functionality.
Up to today the deployment of that CSS selector logic would have had to be more complex than necessary, but today’s …
giving new id and class attributes to the “legend” span id=lspan elements … and …
equivalent class attribute to report matching element data
… makes the deployment of CSS selector logic really easy, in PHP, as per …
<?php
$style="<style> font { text-shadow: -1px 1px 1px #ff2d95; } </style>";
$legend="";
$mx="";
$onecommand=" function askabout(fo) { var defd='14', ccol='black', ccols=fo.outerHTML.split(' color=' + String.fromCharCode(34)), psizes=fo.outerHTML.split('px'); if (eval('' + ccols.length) > 1) { ccol=ccols[1].split(String.fromCharCode(34))[0]; } if (eval('' + psizes.length) > 1) { defd=psizes[0].split(':')[eval(-1 + psizes[0].split(':').length)].trim(); } var numis=prompt('How many px (ie. pixels) do you want for the font size of these ' + fo.innerHTML + ' parts of report? Optionally append after a space a colour that is not the default colour ' + ccol + ' for this category of difference report. Optionally append after a space any other styling you want ( eg. text-shadow: -1px 1px 1px #ff2d95; )', defd); if (numis != null) { if (('' + numis).trim() != '') { location.href=(document.URL.split('#')[0] + '&' + fo.id + '=' + encodeURIComponent(numis.trim())).replace('.php&','.php?'); } } } ";
if (isset($_GET['f0']) || isset($_GET['f1']) || isset($_GET['f2']) || isset($_GET['f3']) || isset($_GET['f4']) || isset($_GET['f5']) || isset($_GET['f6'])) {
$onecommand.=" function sizefonts() { } setTimeout(sizefonts, 3000); ";
for ($ij=0; $ij<=6; $ij++) {
if (isset($_GET['f' . $ij])) {
$words=str_replace('+',' ',urldecode($_GET['f' . $ij]));
$wordsa=explode(' ', trim($words));
if (sizeof($wordsa) > 1) {
$words=substr($words,(1 + strlen($wordsa[0])));
for ($ijj=1; $ijj<sizeof($wordsa); $ijj++) {
if (strpos($wordsa[$ijj], ':') === false && $ijj == 1) {
$words=trim(substr($words,(0 + strlen($wordsa[$ijj]))));
$style.='<style> .f' . $ij . " { font-color: " . trim($wordsa[$ijj]) . '; } </style>';
$onecommand=str_replace("} ", " document.getElementById('f" . $ij . "').color='' + '" . trim($wordsa[$ijj]) . "'; document.getElementById('f" . $ij . "').style.fontColor='' + '" . trim($wordsa[$ijj]) . "'; } ", $onecommand);
}
}
if (trim($words) != '') {
if (strpos($words, "{") !== false && strpos($words, "}") !== false) {
$style.='<style> ' . $words . ' </style>';
$onecommand=str_replace("} ", " document.getElementById('dstyle').innerHTML+='<style> ' + '" . $words . " </style>'; } ", $onecommand);
} else {
$style.='<style> .f' . $ij . " { " . $words . ' } </style>';
$onecommand=str_replace("} ", " document.getElementById('dstyle').innerHTML+='<style> .f" . $ij . " { ' + '" . $words . " } </style>'; } ", $onecommand);
}
}
}
$onecommand=str_replace("} ", " document.getElementById('f" . $ij . "').style.fontSize='' + '" . trim($wordsa[0]) . "px'; } ", $onecommand);
$style.='<style> .f' . $ij . " { font-size: " . trim($wordsa[0]) . 'px; } </style>';
}
}
}
it was possible, but unlikely, for users to see other user generated reports, if they happened to be asking for reports at exactly the same time … because …
we had not catered for busy traffic here … but, today …
we cater, better, for busy online traffic … and at the same time …
improve the privacy of the reporting on an IP address basis
The downside, at least for us managing this, is that we do not want a build up of files belonging to difference reports long gone. We arrange it, then, that as soon as the report is created, a window.open scenario is coded for …
It’s coming up to a few years now, since we looked at the code differences reporting we offer the reader, as a way to scrutinize code changes, around here, when we presented Code Download Table Difference Functional Hover Tutorial. Well, we thought we might try some colour coding to perhaps lift the fog on the cryptic nature of Linux diff (difference) command based reports. They can be cryptic because they can feed into the automation feeding of the report into other Linux commands to facilitate ongoing editing endeavours, but we do not want to go into that here, at least today.
But on examining the reports we came up with the following difference report “categories” if you will …
New additional
Changed single line
New block of lines
Deleted lines
Changed multiple lines
… the header (of a block of interest) the dead give away, depending on the existence of “a” or “c” or “d” and/or “,” for a common sense reinterpretation by us not visiting “man diff” ourselves, yet, regarding this work.
Is it worth adding “onmouseover” event logic onto yesterday’s Code Download Table Difference Functional Linking Tutorial? You bet it is! Just because “onmouseover” has no relevance to mobile platforms, so, obversely, developing software with version control systems is irrelevant to mobile platforms.
… we figure. But this is of relevance to the programmer. Sometimes, rather than cater for all the platforms, settling on a subset (of those platforms) can be apt because …
one of mobile or non-mobile subsets of platforms is irrelevant to the scenario … as for today … or …
you try to reinvent the wheel on the pretext that you are waiting for a particular web browser or platform to allow the functionality in, into the future … you could be waiting a while, with the complexity of app arrangements going on around the net these days
Anyway, back to the “onmouseover” event on non-mobile platforms … it was the case that this event was a favourite for the conduit towards Ajax (client) functionality. And thinking on what we do today to nuance our Code Differences PHP web application, we were thinking …
What would Ajax (like to) do?
… and we decided Ajax would really like to …
populate a “div” style=display:inline-block; element adjacent to the functional detail to inform about … but this was not possible … so, instead, we …
populate a popup window near to the functional detail to inform about
… for a non-mobile “hover” (ie. “onmouseover”) event.
Along the way we add some more hashtag navigations and set up more colour coding to the output of (the optional) “functional links” Code Difference reporting.
So take a look at our changeddiff.php Code Differences helper applied to itself below …
“Report” button shows to its right …
function domrows() {
document.getElementById('dawrc').innerHTML='<input style=inline-block; type=button onclick=treportdo(); value=Report></input>';
var trsis=document.getElementsByTagName('tr');
for (var itrsis=0; itrsis<trsis.length; itrsis++) {
trsis[itrsis].onclick = function(e) { if (e.target.innerHTML != '') { var trs=document.getElementsByTagName('tr'); for (var itrs=0; itrs<trs.length; itrs++) { if (trs[itrs].outerHTML.indexOf(e.target.innerHTML) != -1) { trs[itrs].style.border='2px dotted red'; } } } };
}
}
… and table row onclick logic is dynamically applied to those “tr” elements
User clicks somewhere within rows they are interested in seeing be included in a report (which is a snippet of the whole Code Download Table, perhaps to do with a project of interest, or a learning topic of interest)
User optionally clicks the “Report” button …
function treportdo() {
var trsis=document.getElementsByTagName('tr');
webc='<html><head><script type="text/javascript"> function emailto(eto) { window.opener.parentemailto(eto); } function xemailto(eto) { if (eto.indexOf("@") != -1) { var zhr=new XMLHttpRequest(); var zform=new FormData(); zform.append("inline",""); zform.append("to",eto); zform.append("subj","Code Download Table part"); zform.append("body",document.getElementById("mytable").outerHTML); zhr.open("post", "//www.rjmprogramming.com.au/HTMLCSS/emailhtml.php", true); zhr.send(zform); alert("Email sent to " + eto); } } </script></head><body><table id=mytable></table><br><br><br><input onblur=emailto(this.value); placeholder="Email to" type=email></input></body></html>';
for (var itrsis=0; itrsis<trsis.length; itrsis++) {
if (itrsis == 0) {
webc=webc.replace('</table>', trsis[itrsis].outerHTML + '</table>');
}
if (trsis[itrsis].outerHTML.indexOf('>') > trsis[itrsis].outerHTML.indexOf('border:')) {
if (trsis[itrsis].outerHTML.indexOf('dotted') > trsis[itrsis].outerHTML.indexOf('border:')) {
webc=webc.replace('</table>', trsis[itrsis].outerHTML + '</table>');
}
}
}
var woois=window.open('','_blank','top=20,left=20,width=600,height=600');
woois.document.write(webc);
}
… which causes a …
New popup window opens showing the relevant snippet of Code Download Table of interest to the user … including …
Textbox for an optional emailee entry that can be filled in … to …
Set off Ajax/FormData methodology means …
function parentemailto(eto) {
if (eto.indexOf("@") != -1) {
var zhr=new XMLHttpRequest();
var zform=new FormData();
zform.append("inline","");
zform.append("to",eto);
zform.append("subj","RJM Programming Code Download Table part");
zform.append("body", reltoabs('<table' + webc.split('</table>')[0].split('<table')[1] + '</table>'));
zhr.open("post", "//www.rjmprogramming.com.au/HTMLCSS/emailhtml.php", true);
zhr.send(zform);
alert("Email sent to " + eto);
}
}
… to send off an Inline HTML Email report to the emailee … including …
Links of email can be clicked to get back to source code and other links back at the RJM Programming domain web server
… and … lo and behold … we saw a good use for the idea of …
download from “the net” to a Downloads folder on your computer or device … and more often than not …
you, the user, copies or renames this data to another location on your computer or device with command line or with operating system GUI
… and allowing for that second step above be programmatical with the most apt functionality that had ever passed our cotton pickin’ mind … our Code Download Table … wi’ all tho’ GETME’s!
But we don’t want to interfere too much with the Code Download Table “flow” here, so create up the top left 20 seconds worth of time (extendable by their actions) available to the user to create “download” attributes on all …
“a” links … with …
“href” attribute containing “GETME” …
but not “diff.php” … and …
“download” attribute (the attribute necessary to “download” rather than our default displaying of source code in a new webpage)
… plus no href attribute containing “?s=” either, for today’s purposes with a changedgetmelist.js external Javascript code file (that you can try out for yourself at this live run link) … via its new …
var dnprefix=decodeURIComponent(('' + localStorage.getItem('download_copy_to_folder')).replace(/^null$/g,'')); //.replace(/\+/g,' ').replace(/\\\\/g, '_').replace(/\//g, '_').replace(/\:/g, '_');
var delaymore=0;
var prefixask='<div id=firstask style="position:absolute;top:0px;left:0px;"> Download GETME? <input id=dpccb style=inline-block; type=checkbox onchange="dogetmes(document.getElementById(' + "'" + 'dpcis' + "'" + ').value);"></input> <input style=inline-block;width:300px; onclick="delaymore+=20000;" onblur="if (document.getElementById(' + "'" + 'dpccb' + "'" + ').checked) { dogetmes(document.getElementById(this.value); }" type=text id=dpcis placeholder="Optional Download Folder Later Copy to Place via Listener" value="' + dnprefix + '"></input></div>';
function dogetmes(dpprefix) {
delaymore+=20000;
var asis=document.getElementsByTagName('a');
if (dpprefix != dnprefix && 1 == 7) {
localStorage.setItem('download_copy_to_folder', dpprefix);
}
for (var iasis=0; iasis<asis.length; iasis++) {
if (asis[iasis].href.indexOf('diff.php') == -1 && asis[iasis].href.indexOf('?s=') == -1 && asis[iasis].href.indexOf('GETME') != -1) {
asis[iasis].download=dpprefix.replace(/\//g,'_').replace(/\\\\/g,'_').replace(/\:/g,'_') + asis[iasis].href.split('/')[eval(-1 + asis[iasis].href.split('/').length)];
}
}
}
function nomorepa() {
if (eval('' + delaymore) == 0) {
if (document.getElementById('firstask')) {
document.getElementById('firstask').innerHTML='';
}
} else {
setTimeout(nomorepa, eval('' + delaymore));
delaymore=0;
}
}
function lastdivpop() {
var wasih='';
if (document.getElementById('lastdiv')) {
if (document.getElementById('lastdiv').innerHTML == '') {
wasih=wasih;
setTimeout(lastdivpop, 3000);
} else if (document.getElementById('lastdiv').innerHTML.indexOf('firstask') == -1) {
wasih=document.getElementById('lastdiv').innerHTML;
document.getElementById('lastdiv').innerHTML=prefixask + wasih;
prefixask='';
setTimeout(nomorepa, 20000);
} else {
setTimeout(lastdivpop, 3000);
}
}
}
… and we’ve just “tweaked” (albeit, very importantly, in our books (… but the pamphlettes are still not playing ball)) to ensure no “file clobbering” takes place so that the Korn Shell now does …
suf=""
isuf=-1
while [ -f "${dpath}/${brest}${suf}" ]; do
((isuf=isuf+1))
suf="_${isuf}"
done
if [ ! -z "$suf" ]; then
echo "mv ${dpath}/${brest} ${dpath}/${brest}${suf} # `date`" >> download_to_place.out
mv ${dpath}/${brest} ${dpath}/${brest}${suf} >> download_to_place.out 2>> download_to_place.err
fi
But today is mainly about filling in the missing bits on the “server” side. This (need for a) “conduit” we referred to yesterday is because we accept no folder paths can be mentioned at the “server” end. Suppose, though, that the “non-pathed” filename we supply to an “a” link’s “download” attribute can be prefixed by a mildly mashed up version of that path we copy to from the Downloads folder of your “client” computer or device, as you perform a “download” via the clicking of an “a” link.
Well, at this blog we’d already started functionality to toggle the use or not of …
“a” links … with …
“href” attribute containing “GETME” …
but not “diff.php” … and …
“download” attribute (the attribute necessary to “download” rather than our default displaying of source code in a new webpage)
displaying of source code in a new webpage for GETME “a” links … versus …
use the changed PHPtoggle_download.php in conjunction with a changed good ‘ol TwentyTen Theme header.php as below …
<?php
if (outs == null) {
var dnprefix=decodeURIComponent(('' + localStorage.getItem('download_copy_to_folder')).replace(/^null$/g,'')).replace(/\+/g,' ').replace(/\\\\/g, '_').replace(/\//g, '_').replace(/\:/g, '_');
for (idmjk=0; idmjk<admjk.length; idmjk++) {
if (admjk[idmjk].href.indexOf('GETME') != -1 && admjk[idmjk].href.indexOf('diff.php') == -1) {
big = '----------------------GETME';
stuffs = newaspare.split('/');
if (dnprefix != '') {
admjk[idmjk].download = dnprefix + prestuffs[stuffs.length - 1];
} else {
admjk[idmjk].download = dnprefix + stuffs[stuffs.length - 1];
}
admjk[idmjk].title = "(Really download) " + admjk[idmjk].title + ' ... welcome to the long hover functionality that shows allows for a Download Mode for the blog that can be toggled';
admjk[idmjk].onmouseover = " getDownloadMode(); ";
admjk[idmjk].onmouseout = " yehBut(); ";
admjk[idmjk].ontouchstart = " getDownloadMode(); ";
admjk[idmjk].ontouchend = " yehBut(); ";
}
} else if (admjk[idmjk].href.indexOf('GETME') != -1 && origcafd < 0) { //!cafd) {
xp=admjk[idmjk].href.split("GETME");
prexp=xp[0].split("/");
postprexp=prexp[-1 + prexp.length].split(".");
extis = postprexp[-1 + postprexp.length].replace(/_/g,"").replace(/-/g,"").replace(/GETME/g,"");
outs="//www.rjmprogramming.com.au/getmelist.htm?topoff=150&tsp=" + (Math.floor(Math.random() * 1999900) + 100) + "#" + postprexp[0] + "." + postprexp[-1 + postprexp.length].replace(extis,"").replace(extis,"").replace(extis,"") + "GETME" + extis;
aorig=admjk[idmjk].innerHTML;
selbitis=allthecombos((admjk[idmjk].href + '=').split('=')[1].split('&')[0]);
admjk[idmjk].innerHTML=admjk[idmjk].innerHTML.replace(".","<span data-alt='" + outs + "' id='spn" + cafd + "' title=\" + Code Download Table\" onclick=\"if (cafd == cafd) { cafd=" + cafd + "; changeasfordownload(); } else { window.open('" + outs + "','_blank','top=100,left=100,width=500,height=500'); } return false; \"><select onchange=\" if (this.value.length > 0) { window.open(this.value,'_blank'); } return false; \" style='margin-bottom:0px;width:40px;' id='sel" + cafd + "'><option value=>⚫</option>" + selbitis + "</select></span>");
if (aorig == admjk[idmjk].innerHTML && admjk[idmjk].innerHTML.indexOf('er posts') == -1) admjk[idmjk].innerHTML=admjk[idmjk].innerHTML.replace(" ","<span data-alt='" + outs + "' id='spn" + cafd + "' title=\" + Code Download Table\" onclick=\"if (cafd == cafd) { cafd=" + cafd + "; changeasfordownload(); } else { window.open('" + outs + "','_blank','top=100,left=100,width=500,height=500'); } return false; \"><select onchange=\" if (this.value.length > 0) { window.open(this.value,'_blank'); } return false; \" style='margin-bottom:0px;width:40px;' id='sel" + cafd + "'><option value=>⚪</option>" + selbitis + "</select></span>");
cafd++;
} else if ((admjk[idmjk].innerHTML.indexOf('live run') != -1 || admjk[idmjk].title.toLowerCase().indexOf('click picture') != -1) && origcafd < 0) { //!cafd) {
outs="//www.rjmprogramming.com.au/slideshow.html#tuts";
admjk[idmjk].innerHTML=admjk[idmjk].innerHTML.replace(" ","<span data-alt='" + outs + "' id='spn" + cafd + "' title=\" + Cut to the Chase ... see the blog post list related to live runs and slideshows ... ie. the main point of the blog posting\" onclick=\"if (cafd == cafd) { cafd=" + cafd + "; changeasfordownload(); } else { window.open('" + outs + "','_blank','top=100,left=100,width=650,height=100'); } return false; \">✂</span>");
cafd++;
}
}
}
?>
… to, depending on whether the user specifies in the “All Posts” toggling’s Javascript prompt window presented, specifies a new comma separated “client folder of interest to copy to” place (stored in window.localStorage), will …
download with the GETME to the Downloads folder and copy off to the specified folder of interest (backing up as necessary) … versus …
the default download mode downloads to the Downloads folder without the GETME parts
See these changes in action below, contextualizing “server” and “client” codes in the full picture of assisted Downloads (copied on to a folder of the user’s interest) …
Downloading from “the net” (“server land”) to your computer or device (“client land”) is a big part of the online experience and the sharing of data over the world wide web. But have you ever wondered about the two step design of …
download from “the net” to a Downloads folder on your computer or device … and more often than not …
you, the user, copies or renames this data to another location on your computer or device with command line or with operating system GUI
… ? Why not allow the “server” side define where it can download to on the “client”? Well, that would be a security nightmare, allowing a highjacking of mission critical files on your computer or device. So, I get it, that is a “no no”. But could we have a controlled “arrangement” between …
… ? We think that sounds reasonable and so, today, we start our (two parts or more) mini-project (making step 2 above be considered to be programmatically handled, sometimes) designing a Korn Shell (“client” side) listener to suit our macOS “client” computer, executed as a background process via …
But what is the conduit, if the “server” web applications/pages cannot define a destination folder other than the macOS Downloads folder for the user involved? Well, that is where we need either …
Korn Shell interactive input (via read command) … or …
… to define a “client land” folder to copy to (from the user’s Download folder (receiving the downloaded data).
That first Korn Shell read command interactive input was interesting to us for a command backgrounded via the “&” command suffix. But if stdin and stdout are not mentioned in the command you can answer this interactive input and then the processing the Korn Shell performs proceeds in the background. Exactly what we were hoping for, but weren’t sure that this was the case!
The picture is filled in better tomorrow as we discuss the conduit in more detail tomorrow.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
… to “move on” further regarding what might be a long running project we have around here with several PHP hosts Python web applications.
As an alternative to /tmp/ we’ve come up with, in PHP talk …
<?php
$tprefix=$_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . 'tmp' . DIRECTORY_SEPARATOR; // used to be '/tmp/'
?>
… paradigm instead. That way, when in the past the GraphViz dot means by which action was prepared into Korn Shell scripts no longer has to wait for crontab “root” application, but now
… can be attempted straight away. In that way, this “new place to read and write temporarily” is a boon, in the tweakedtwopi_vs_circo_example.php PHP hosting Dot most recent go Circular Layout web application.
it can be read and written to by the RJM Programming web server username … and yet …
cannot be referenced by users surfing the net … being lower down the directory tree than the /home/rjmprogr/public_html which corresponds to our Apache Document Root folder
it can be read and written to by the cPanel username … meaning …
whatever else that becomes an issue or can be an improvement
… in a new makeover operation.
What did we discover today? We think, perhaps, the “named iframe element called by second parameter of window.open” may not be an approach we can take on this makeover, perhaps because HTML content gets into the mix, whereas with the Talking Select Multiple Webpage Palette Speech Bubble Tutorial threads, “the content” has no HTML, just PHP calling the operating system via the macOS “say” command … unless tomorrow reveals today’s folly … that is?!
We can still use window.open second parameter “_blank” and third parameter “positioning” scenarios, though, as how we leave today’s machinations within a tweakedmacos_ffmpeg_convert.php works Ffmpeg Converter Tool PHP web application.
even though it is only likely to work for shorter videos
… regarding the data URI hashtagged parts to SMS or email links that we were exclusively using … then. But, with this in mind, what do …
data URI based URLs (hashtagged in an email or SMS link) … and …
absolute URL that points to a web server soft link file, itself pointing to /tmp/ video data files ((we’re still hashtagging, but now, don’t really have to, apply) in an email or SMS link)
… share? We’d say, as far as sharing goes …
A sense of permanency.
But …
the second one does not “push the barrow” as much as the first regarding the amount of data … whereas …
the first is totally ephemeral and not asking anything more of the web server (ie. the RJM Programming associated one) regarding ongoing storage but is asking a lot of web browsers and client mail applications in the case of video data of any bulk
In terms of sharing videos of any bulk, we’re now, with our web application …
renaming the top button (that used to be “Display”) as “Display for a Day” and applying absolute URL (that point at web server soft links that, in turn, point at what can be sizeable video data files that might hang around in RJM Programming domain associated web server /tmp/ location) logics which call on “crontab” … (
*/53 * * * * /etc/init.d/every_hour.sh
… now mentions …
ksh -c 'for i in `find /tmp -name "my_video_*.*" -mmin -1440`; do rm -f $i; done'
) … assistance to do with the tidy up we feel we need to do on the web server so that large files do not hang around forever (and as you might surmise, at most a day, regarding the bulk of data requirements that are temporarily stored in /tmp/ locations with user associated IP addresses part of the file naming paradigm) … whereas …
the bottom button remains as “Display” and still uses data URI based logic
… so that these bulky videos can be successfully shared (via clicks of that “Display for a Day” button) as long as the email or SMS link is attended to by the collaboration recipient within those 24 hours, further to yesterday’s Ffmpeg User Defined Video Editing Sharing Tutorial.
As well, today, as a genericization measure, we stop seeing govetts_leap in any video file naming, replaced by my_video now that the input video control has become less rigid, and now can be controlled, to some extent, by the user in our changedfourth draft of Your Own Ffmpeg Video Changes, which can be that much more useful in a new way in the AlmaLinux web server environment.
Ffmpeg User Defined Video Editing Sharing Tutorial
Sharing options for video based data are often more restrictive regarding email and SMS conduits, but we’ll still go ahead with a …
“a” link “mailto:” (for emails) or “sms:” (for SMS) methodology …
email subject containing ffmpeg command used for an output video mode of sharing … or …
input video mode of sharing before any ffmpeg involvement … based on …
email or SMS links where the video data URI (as necessary) is hashtagged
… set of ideas to try out, even though it is only likely to work for shorter videos. The other more obvious sharing mechanism is to download video data via right click options the web browser product you are using offers anyway. And another sharing idea, independent, and working for input videos is to browse for a video using the helper web application from yesterday, and use its Share API based button below the browsing button to share that input video using one of …
Mail
Messages
AirDrop
Notes
Simulator
Freeform
… on our macOS Safari web browser here on a MacBook Air.
Ffmpeg User Defined Browsed Video Editing Tutorial
Today’s work, onto yesterday’s Ffmpeg User Defined Video Editing Tutorial, is to loosen the restrictions regarding “input video file source” we had happening in that “first draft” incarnation of our Ffmpeg User Defined Video Editing web application.
In order to achieve this, we called on a previous Ffmpeg Install and Public Face Tutorial inspired change to our inhouse macos_ffmpeg_convert.php PHP web application, which can serve as our conduit to either/or …
browse for a video file off the user local operating system environment … or …
path to a web server placed video file … or …
URL to a video file
… extra means by which the user can define the “input video file source” that we’re loosening the shackles regarding usage.
To do this, we look for user actions (via PHP writing out Javascript) …
<?php echo ”
var lastpathc='';
var lastopathc='';
var lastvidc='';
var lastvalue='.m4v';
var exactvalue='';
var vext='.mp4';
our newly created public interface to ffmpeg with the “soon to be DNS version of rjmprogramming.com.au … but not yet” AlmaLinux Apache/PHP/MySql web server install we talked about at Ffmpeg Install and Public Face Tutorial … and …
IP address redirecting, as needed, ifconfig (via PHP shell_exec and $_SERVER[‘SERVER_ADDR’]) based logic …
<?php
$whereplace=shell_exec("ifconfig | grep -Eo 'inet (addr:)?([0-9]*\.){3}[0-9]*' | grep -Eo '([0-9]*\.){3}[0-9]*' | grep -v '127.0.0.1'");
if (strpos(($whereplace . ' ' . $_SERVER['SERVER_ADDR']), '65.254.92.213') !== false) {
$sv='/usr/bin/ffmpeg';
header('Location: https://65.254.95.247/PHP/tmp_ffmpeg.php'); //$smallpath='https://65.254.95.247/PHP/'; //header('Location: https://65.254.95.247/PHP/tmp_ffmpeg.php');
exit; //exit;
}
temporary storage places to place output video … and making use of …
soft links regarding URLs we talked about at Linux Web Server Soft Link URL Tutorial (saving us having to use ‘data:video/mp4;base64,’ . base64_encode(file_get_contents(trim($endout))) style PHP interventions (which were testing friendships))
… to start down this road towards public facing ffmpeg video editing around here (which we have been hankering for for several years now).
In this first draft of Your Own Ffmpeg Video Changes (via command line ffmpeg) we’re really buttoning down (via not allowing the forward slash character in amongst the user defined ffmpeg command innards) what happens regarding …
Today we recorded a video looking out from Govetts Leap, Blackheath, here in the Blue Mountains. We captured it via the Camera app on an iPhone via its Video option.
Nineteen seconds long, to share to this MacBook Air we needed AirDrop, the size of it precluding us from using the Photo app’s Mail sharing option.
And that’s where we wanted to use the great ffmpeg in an optimal way to create a video that we could upload to YouTube. In this, we arrived at this excellent link getting us to try …
… with success. Checking with this other excellent link, thanks, we were comforted that they would have recommended an output mp4 file format as well, it seems …
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
A lot of canvas element Javascript coding, we find, starts something like …
var cnv=document.getElementById("mycanvas");
var ctx=cnv.getContext("2d");
… because we normally associate the canvas element with a 2 dimensional woooooooorrrrrrlllllldddd view, as with the recent Canvas Methods ToDataURL Method Tutorial. But lots of browsers do support 3 dimensional graphics Javascript logic involving WebGL (Web Graphics Library) API you can read more about here. And where that is established for the canvas element is via the getContext method first argument not being “2d” but rather in amongst …
“2d”
Creates a CanvasRenderingContext2D object representing a two-dimensional rendering context.
“webgl” (or “experimental-webgl”)
Creates a WebGLRenderingContext object representing a three-dimensional rendering context. This context is only available on browsers that implement WebGL version 1 (OpenGL ES 2.0).
“webgl2”
Creates a WebGL2RenderingContext object representing a three-dimensional rendering context. This context is only available on browsers that implement WebGL version 2 (OpenGL ES 3.0).
“webgpu”
Creates a GPUCanvasContext object representing a three-dimensional rendering context for WebGPU render pipelines. This context is only available on browsers that implement The WebGPU API.
“bitmaprenderer”
Creates an ImageBitmapRenderingContext which only provides functionality to replace the content of the canvas with a given ImageBitmap.
… as a means by which those “platform independent” (but sizeable) data URI representations of graphical data can be created.
We often use the image/jpeg option with a quality second argument less than one to reduce data sizes here.
Also, today, we allow users to browse for or specify URLs pointing to video data, as well as the image data means by which drawImage‘s first argument can be designated with the changedsvg_to_canvas.html “what we’ll call” Canvas Showcase web application you can also try below.
Positioning and Scaling … via 5 arguments …
[canvasContext].drawImage([inObjectThatSuits], [X co-ordinate], [Y co-ordinate], [Width], [Height]);
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]);
When we started being “blown away” by the potential of the HTML5canvas 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)
… 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).
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 …
… 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';
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.
Here is a tutorial that introduces you to GoToMeeting. GoToMeeting is a great user-friendly video conferencing software by Citrix.
For simple scenarios I’ve always felt comfortable with GoToMeeting for that video conferencing functionality, or for how I usually used it, remotely testing, troubleshooting and/or installing software on remote client sites. Other choices for all Windows scenarios, here are Remote Desktop, and for mixed scenarios, VNC.
GoToMeeting can work with a phone connection or by using the Microphone and Speakers at both ends of the connection. You can host the meeting or join the meeting, share your keyboard or mouse, share your display via a shared webcam, as necessary, meet straight away, or schedule it, or email an invitation … all in all there is a lot of great functionality. Like with Skype, audio and visual can be considered separate … from our tutorial session here is some audio, and here is some visual (ie. video).
Other such meeting ideas can be accessed via Skype, or WebEx Web Conferencing. All these are great ideas that can save companies lots of money on overseas trips!
Link to GoToMeeting “spiritual home” at GoToMeeting, which is owned by Citrix.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
Stepping back from the Clairvoyance++ Game project, of recent times, further to the recent Clairvoyance Game IP Address Links Tutorial it occurred to us just this morning how similar …
… and so we may as well build on the “connection work” already there, and bedded down, to also offer a two user Chat conversation set of functionalities, as a new dropdown option the user can choose.
New ideas are all fine and good, as long as it is not a pain in the neck to organize, fitting in with other dropdown option functionalities, and with this in mind, invented a new argument “itype” value of zero, it not having been used yet, and not interfering with window.localStorage “starting itype value” considerations.
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 …
flash of yellow background on first showing, else white background
blue font … for IP Address of current player … else …
black font … alternating with …
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.
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 …
… 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 …
… 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 changedlatest draftClairvoyance++ Game.
… 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 …
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 …
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 …
… 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.
… 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 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 …
… 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 …
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 …
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. ';
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) …
<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.
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^='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.
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 …
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 …
HTML and Javascript parent … talking to …
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 …
selecting a Zener Card the other player is asked to guess
other player trying to guess that Zener Card selected
… as a means by which those “platform independent” (but sizeable) data URI representations of graphical data can be created.
We often use the image/jpeg option with a quality second argument less than one to reduce data sizes here.
Also, today, we allow users to browse for or specify URLs pointing to video data, as well as the image data means by which drawImage‘s first argument can be designated with the changedsvg_to_canvas.html “what we’ll call” Canvas Showcase web application you can also try below.
Positioning and Scaling … via 5 arguments …
[canvasContext].drawImage([inObjectThatSuits], [X co-ordinate], [Y co-ordinate], [Width], [Height]);
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]);
When we started being “blown away” by the potential of the HTML5canvas 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)
… 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).
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 …
… 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';
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.
Here is a tutorial that introduces you to GoToMeeting. GoToMeeting is a great user-friendly video conferencing software by Citrix.
For simple scenarios I’ve always felt comfortable with GoToMeeting for that video conferencing functionality, or for how I usually used it, remotely testing, troubleshooting and/or installing software on remote client sites. Other choices for all Windows scenarios, here are Remote Desktop, and for mixed scenarios, VNC.
GoToMeeting can work with a phone connection or by using the Microphone and Speakers at both ends of the connection. You can host the meeting or join the meeting, share your keyboard or mouse, share your display via a shared webcam, as necessary, meet straight away, or schedule it, or email an invitation … all in all there is a lot of great functionality. Like with Skype, audio and visual can be considered separate … from our tutorial session here is some audio, and here is some visual (ie. video).
Other such meeting ideas can be accessed via Skype, or WebEx Web Conferencing. All these are great ideas that can save companies lots of money on overseas trips!
Link to GoToMeeting “spiritual home” at GoToMeeting, which is owned by Citrix.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
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 …
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 modifiedis_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 modifiedis_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);
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 …
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.
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 …
at this blog we schedule one new blog post per day … and …
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.
<?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();
}
… 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.
the order of blog postings that could end up on dropdowns as a result of this PHP code was not always chronological … and …
the … “glimpse into” wording on the dropdown options told us (the users) nothing … and …
the navigation off a user selected dropdown option was flaky and sporadic
… so let’s talk about these in more depth below …
the order of blog postings that could end up on dropdowns as a result of this PHP code was not always chronological … so … we changedis_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
the … “glimpse into” wording on the dropdown options told us (the users) nothing … so … we changedis_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 "";
}
?>
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);
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 …
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 …
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 …
one blog posting bit of HTML body HTML …
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';
}
… 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?!
change the PHP that creates the HTML for displaying the Code Download Table, and that is accessed by our web server at RJM Programming using the Crontab/Curl “dynamic duo” (we often look at) … that uses …
CSS Complex Selector functionality (we’ve last talked about with WordPress Blog Complex Selectors Tutorial), but via the use of jQuery methods like parent() and siblings() methods … and only being called, as for yesterday’s scenario, where …
… 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.
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 …
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 …
see the image in your favoured web browser with the URL http://localhost:8888/image.jpg … then …
change that image somehow with an image editor … and …
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 …
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)
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 …
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.
Positioning and Scaling … via 5 arguments …
[canvasContext].drawImage([inObjectThatSuits], [X co-ordinate], [Y co-ordinate], [Width], [Height]);
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]);
When we started being “blown away” by the potential of the HTML5canvas 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)
… 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).
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 …
… 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';
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.
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.
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 …
flash of yellow background on first showing, else white background
blue font … for IP Address of current player … else …
black font … alternating with …
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.
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 …
… 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 …
… 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 changedlatest draftClairvoyance++ Game.
… 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 …
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 …
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 …
… 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.
… 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 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 …
… 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 …
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 …
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. ';
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) …
<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.
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^='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.
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 …
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 …
HTML and Javascript parent … talking to …
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 …
selecting a Zener Card the other player is asked to guess
other player trying to guess that Zener Card selected