Walking Trip …

Walking Trip

Walking Trip

Offenbach's Suite ... Warts 'n All

Offenbach's Suite ... Warts 'n All

 📅  

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

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

Landing Page Autocompletion Blog Finds Tutorial

Landing Page Autocompletion Blog Finds Tutorial

Landing Page Autocompletion Blog Finds Tutorial

Two recent themes, and another we like, and enjoy using, combine today, as per …

… (along with good ol’ Javvascript DOM) to improve the functionality of the RJM Programming Landing Page means by which it connects to the RJM Programming WordPress Blog tutorial content.

Autocompletion is good primarily because it is quite a human response to fill in something given a “smaller” start, even given a modern baby’s likely first word …

goo … goog … googl … google

And so, if you have data at your disposal you would not have to wait for the baby to spout “google”. You might gather all the “google” relevant tutorials (and maybe some others) at the “goo” stage (or even earlier).

In our Landing Pages we do have this data available courtesy of the dropdown over to the right and down aways, populated by crontab PHP tasks undertaken each day up at the RJM Programming Apache/PHP/MySql web server. We’ve decided to copy that dropdown’s innerHTML content into the Javascript variable selcontis in the changed external Javascript WelcomeIndex.js “all Landing Pages helper” code below, where we add some new functions as well …


var selcontis='';
var acstr='';
var acsofar='';

function zotzmaybe(evt) {
var bigsih=document.getElementById('tuts').innerHTML.split('</option>')[0] + '</option>';
var bigs=[], jbigs=0, itot=0;
var testc='';
acstr=evt.target.value;
if (evt.keyCode >= 48 && evt.keyCode <= 57) {
acsofar=acstr + ('' + eval(-48 + evt.keyCode));
} else if (evt.keyCode >= 65 && evt.keyCode <= 90) {
acsofar=acstr + String.fromCharCode(evt.keyCode); //('' + eval(-65 + evt.keyCode));
} else if (evt.keyCode >= 97 && evt.keyCode <= 122) {
acsofar=acstr + + String.fromCharCode(evt.keyCode); //('' + eval(-97 + evt.keyCode));
} else {
acsofar+=' ';
}
//alert('acstr=' + acstr + ' and acsofar=' + acsofar);
if (selcontis.toLowerCase().indexOf('>' + acsofar.toLowerCase()) != -1) {
bigs=selcontis.split(new RegExp(('\>' + acsofar.toLowerCase()), 'i'));
for (jbigs=1; jbigs<bigs.length; jbigs++) {
testc='<option ' + bigs[eval(-1 + jbigs)].split('<option ')[eval(-1 + bigs[eval(-1 + jbigs)].split('<option ').length)] + selcontis.split('<option ' + bigs[eval(-1 + jbigs)].split('<option ')[eval(-1 + bigs[eval(-1 + jbigs)].split('<option ').length)])[1].substring(0, ('>' + acsofar).length) + bigs[eval(0 + jbigs)].split('</option>')[0] + '</option>';
if (testc.indexOf(')') != -1) {
itot++;
bigsih+=testc;
}
}
document.getElementById('tuts').innerHTML=bigsih;
document.getElementById('oneopti').innerHTML='Found ' + itot + ' for ' + acsofar + ' below ...';
} else {
document.getElementById('tuts').innerHTML=bigsih;
document.getElementById('oneopti').innerHTML='None found for ' + acsofar + ' ...';
}
}

function muchlater() {
document.getElementById('tuts').size='1';
}

function preChangeTutNow() {
if (!document.getElementById('autokey')) {
ChangeTutNow(document.getElementById('tuts'));
} else if (document.getElementById('tuts').outerHTML.indexOf(' data-onblur=') != -1 && document.getElementById('tuts').outerHTML.indexOf(' size=') != -1) {
ChangeTutNow(document.getElementById('tuts'));
}
document.body.style.cursor='pointer';
}

function autokeyway() {
var tutselrect=document.getElementById('tuts').getBoundingClientRect();
if (!document.getElementById('autokey') && document.getElementById('id3')) {
selcontis=document.getElementById('tuts').innerHTML;
var wasd=document.getElementById('id3').innerHTML.length;
document.getElementById('tuts').style.display='none';

document.getElementById('id3').innerHTML=document.getElementById('id3').innerHTML.replace(document.getElementById('tuts').outerHTML,'<input autocomplete="off" type=text id=autokey onkeydown="zotzmaybe(event);" style="display:inline-block;z-index:99;width:' + Math.floor(eval(0.5 * eval('' + tutselrect.width))) + 'px;" placeholder="Type tutorial finding word(s)" value="" autofocus=""></input>' + document.getElementById('tuts').outerHTML.split('>')[0].replace('none','inline-block').replace('90%', Math.floor(eval(0.48 * eval('' + tutselrect.width))) + 'px').replace(/\"\ on/g, '" data-on') + '><option id=oneopti value=" ">Your finding options below ...</option></select>');
setTimeout(muchlater, 10000);
//alert('' + tutselrect.width + ' was=' + wasd + ' vs ' + document.getElementById('id3').innerHTML.length);
} else if (!document.getElementById('autokey') && document.getElementById('i268')) {
selcontis=document.getElementById('tuts').innerHTML;
document.getElementById('i268').innerHTML+='<input autocomplete="off" type=text id=autokey onkeyup="otzmaybe(this);" onchange="otzmaybe(this); " onblur=" justcheck(this.value); " style="z-index:99;position:absolute;top:' + tutselrect.top + 'px;left:' + tutselrect.left + 'px;width:' + tutselrect.width + 'px;" placeholder="Type tutorial finding word(s)" value="" autofocus=""></input>';
//alert('' + tutselrect.top);
}
}

… the “red rag to a bull” clue that hotkeys are involved being the use of the “onkeydown” (and/or sometimes you see “onkeypress”) keyboard event pointing at function zotzmaybe. In “function zotzmaybe” too, autocompletion compares a hotkey result to data ahead of the display of the keystroke, by which time the incarnation of the original dropdown can be populated with appropriate entries, along with the original calls and ways of functioning. You need to see how a Landing Page caller of the WelcomeIndex.js external Javascript changed to allow for this, as per …

  • Tell the cache we’ve changed WelcomeIndex.js …

    <script async="async" type="text/javascript" src="Welcome_files/WelcomeIndex.js?Lawson=Now&rand=76987"></script>
  • Substantially rearrange the tutorial dropdown’s attributes and first option element

    <select onchange=" if (('' + this.title).indexOf('.') != -1 && this.value.length <= 2) { autokeyway(); } else { if (1 == 1) { document.body.style.cursor='progress'; setTimeout(preChangeTutNow, 7000); } else { ChangeTutNow(this); } }" class='mytuts' id='tuts' style='margin-top:4px;width: 90%; background-color:pink;' title='Tutorials' onblur="if (document.getElementById('selfirstopt').innerHTML.indexOf('autocompletion keyboard') != -1) { document.getElementById('selfirstopt').innerHTML=document.getElementById('selfirstopt').innerHTML.replace('autocompletion keyboard','keyboard autocompletion'); if (this.value.length == 1) { this.value=' '; } } else if (('' + this.title).indexOf('.') != -1 && this.value.length == 1) { autokeyway(); }" onmouseout="this.title=this.title.split('.')[0] + '.';" ontouchdown="if (document.getElementById('selfirstopt').innerHTML.indexOf('autocompletion keyboard') != -1) { document.getElementById('selfirstopt').innerHTML=document.getElementById('selfirstopt').innerHTML.replace('autocompletion keyboard','keyboard autocompletion'); if (this.value.length == 1) { this.value=' '; } } else if (('' + this.title).indexOf('.') != -1 && this.value.length == 1) { autokeyway(); }" onmousedown="if (document.getElementById('selfirstopt').innerHTML.indexOf('autocompletion keyboard') != -1) { document.getElementById('selfirstopt').innerHTML=document.getElementById('selfirstopt').innerHTML.replace('autocompletion keyboard','keyboard autocompletion'); if (this.value.length == 1) { this.value=' '; } } else if (('' + this.title).indexOf('.') != -1 && this.value.length == 1) { autokeyway(); }" onclick="if (document.getElementById('selfirstopt').innerHTML.indexOf('autocompletion keyboard') != -1) { document.getElementById('selfirstopt').innerHTML=document.getElementById('selfirstopt').innerHTML.replace('autocompletion keyboard','keyboard autocompletion'); if (this.value.length == 1) { this.value=' '; } } else if (('' + this.title).indexOf('.') != -1 && this.value.length == 1) { autokeyway(); }"><option id=selfirstopt title="First option" selected='selected' value=' '>Tutorials (show blog, toggle sort order, click for autocompletion keyboard) ...</option>
  • And a small tweak to the next option regarding toggling …

    <option value=' '>Tutorials (toggle sort order and reselect and click first for autocompletion keyboard) ...</option>

… to add in a textbox and dropdown way for a user to use an autocompletion approach to finding topics of interest to filter the RJM Programming WordPress Blog tutorials via, in order to hone in on information and content of interest.

Stop Press

Until we line up our crontab PHP work (which effectively wipes out the tweaks above … sorry, viewers, earlier this morning) … we have the WelcomeIndex.js fix up as per …


function jsonloadf() {
var firsto=false, secondo=false;
var optsare=document.getElementsByTagName('option');
for (var ioptsare=0; ioptsare<optsare.length; ioptsare++) {
if (optsare[ioptsare].innerHTML.indexOf('toggle sort order') != -1) {
if (!firsto) {
if (optsare[ioptsare].innerHTML.indexOf('click for ') == -1 && optsare[ioptsare].innerHTML.indexOf(')') != -1) {
optsare[ioptsare].innerHTML=optsare[ioptsare].innerHTML.replace(')', ', click for autocompletion keyboard)');
optsare[ioptsare].id='selfirstopt';
}
firsto=true;
} else if (!secondo) {
if (optsare[ioptsare].innerHTML.indexOf('click first ') == -1 && optsare[ioptsare].innerHTML.indexOf(')') != -1) {
optsare[ioptsare].innerHTML=optsare[ioptsare].innerHTML.replace(')', ' and reselect and click first for autocompletion keyboard)');
}
secondo=true;
}
}
}
}

setTimeout(jsonloadf, 3000);


Previous relevant Blog Posting Filtering Background Date Interfacing Tutorial is shown below.

Blog Posting Filtering Background Date Interfacing Tutorial

Blog Posting Filtering Background Date Interfacing Tutorial

We wanted to nuance the Blog Content filtering functionality of Blog Posting Filtering Background Interfacing Tutorial by …

  • adding to the existant word within blog posting title filtering prowess … with …
  • date (YYYYMMDD) based date filtering of blog posting

… and needed to purloin (good ol’) WordPress codex 404.php PHP code functionality changes below …


29d28
< $mbd="";
32,148d30
< //file_put_contents('zac.zac', $_SERVER['QUERY_STRING']);
< if (isset($_GET['mustbedated'])) {
< $mbd=str_replace('+',' ',urldecode($_GET['mustbedated']));
< $mzs=explode(" ", $mbd);
< if (sizeof($mzs) > 1) {
< $newid="";
< $suffn="";
< if (strpos($mbd, ")") !== false) { $suffn=")"; }
< for ($imzs=0; $imzs<sizeof($mzs); $imzs++) {
< if (substr($mzs[$imzs],0,1) == '(') {
< $newid='(' . $newid;
< $mzs[$imzs]=substr($mzs[$imzs],1);
< }
< if ($mzs[$imzs] != '') {
< if (1 == 1 || (substr($mzs[$imzs],0,1) >= '0' && substr($mzs[$imzs],0,1) <= '9')) {
< if (substr($mzs[$imzs],0,1) >= '0' && substr($mzs[$imzs],0,1) <= '9' && strlen(str_replace(')','',$mzs[$imzs])) == 4) {
< $newid.=str_replace(')','',$mzs[$imzs]);
< } else if (substr($mzs[$imzs],0,1) >= '0' && substr($mzs[$imzs],0,1) <= '9' && strlen(str_replace(')','',$mzs[$imzs])) == 8) {
< $newid.=str_replace(')','',$mzs[$imzs]);
< } else if (substr($mzs[$imzs],0,1) >= '0' && substr($mzs[$imzs],0,1) <= '9' && strlen(str_replace(')','',$mzs[$imzs])) == 2 && strlen($newid) >= 4) {
< $newid.=str_replace(')','',$mzs[$imzs]);
< } else if (substr($mzs[$imzs],0,1) >= '0' && substr($mzs[$imzs],0,1) <= '9' && strlen(str_replace(')','',$mzs[$imzs])) == 2) {
< $suffn=str_replace(')','',$mzs[$imzs]) . $suffn;
< } else if (substr($mzs[$imzs],0,1) >= '0' && substr($mzs[$imzs],0,1) <= '9' && strlen(str_replace(')','',$mzs[$imzs])) == 1 && strlen($newid) >= 4) {
< $newid.='0' . str_replace(')','',$mzs[$imzs]);
< } else if (substr($mzs[$imzs],0,1) >= '0' && substr($mzs[$imzs],0,1) <= '9' && strlen(str_replace(')','',$mzs[$imzs])) == 1) {
< $suffn='0' . str_replace(')','',$mzs[$imzs]) . $suffn;
<
< } else if (strpos(strtolower($mzs[$imzs]), 'jan') !== false) {
< if (strlen($newid) >= 4) {
< $newid.='01';
< } else {
< $suffn='01' . $suffn;
< }
< } else if (strpos(strtolower($mzs[$imzs]), 'feb') !== false) {
< if (strlen($newid) >= 4) {
< $newid.='02';
< } else {
< $suffn='02' . $suffn;
< }
< } else if (strpos(strtolower($mzs[$imzs]), 'mar') !== false) {
< if (strlen($newid) >= 4) {
< $newid.='03';
< } else {
< $suffn='03' . $suffn;
< }
< } else if (strpos(strtolower($mzs[$imzs]), 'apr') !== false) {
< if (strlen($newid) >= 4) {
< $newid.='04';
< } else {
< $suffn='04' . $suffn;
< }
< } else if (strpos(strtolower($mzs[$imzs]), 'may') !== false) {
< if (strlen($newid) >= 4) {
< $newid.='05';
< } else {
< $suffn='05' . $suffn;
< }
< } else if (strpos(strtolower($mzs[$imzs]), 'jun') !== false) {
< if (strlen($newid) >= 4) {
< $newid.='06';
< } else {
< $suffn='06' . $suffn;
< }
< } else if (strpos(strtolower($mzs[$imzs]), 'jul') !== false) {
< if (strlen($newid) >= 4) {
< $newid.='07';
< } else {
< $suffn='07' . $suffn;
< }
< } else if (strpos(strtolower($mzs[$imzs]), 'aug') !== false) {
< if (strlen($newid) >= 4) {
< $newid.='08';
< } else {
< $suffn='08' . $suffn;
< }
< } else if (strpos(strtolower($mzs[$imzs]), 'sep') !== false) {
< if (strlen($newid) >= 4) {
< $newid.='09';
< } else {
< $suffn='09' . $suffn;
< }
< } else if (strpos(strtolower($mzs[$imzs]), 'oct') !== false) {
< if (strlen($newid) >= 4) {
< $newid.='10';
< } else {
< $suffn='10' . $suffn;
< }
< } else if (strpos(strtolower($mzs[$imzs]), 'nov') !== false) {
< if (strlen($newid) >= 4) {
< $newid.='11';
< } else {
< $suffn='11' . $suffn;
< }
< } else if (strpos(strtolower($mzs[$imzs]), 'dec') !== false) {
< if (strlen($newid) >= 4) {
< $newid.='12';
< } else {
< $suffn='12' . $suffn;
< }
< }
<
< }
< }
< }
< $newid.=$suffn;
< if ($newid != "") { if (strlen($newid) == 8) { $mbd='(' . $newid . ')'; } else { $mbd=$newid; } }
< }
< if (strlen($mbd) == 8) { $mbd='(' . $mbd . ')'; }
< //file_put_contents('zab.zab', $mbd . ' ... ' . $mc);
< if (strpos($icontis, $mbd) !== false && sizeof($ideaarray) > 1) {
< $mc=$mbd;
< $iicontis=substr(explode($mc, $icontis)[0],-500,500) . $mc . explode($mc, $icontis)[1];
< $ideaarray=explode('&pp=&pn=&title=', $iicontis);
< //file_put_contents('zaa.zaa', $ideaarray[1]);
< }
< }
153,155c35,36
< if (isset($_GET['mustcontain']) || $mc != "") {
< if (strlen(trim($_GET['mustcontain'])) > 0 || $mc != "") {
< if ($mc == "") {
---
> if (isset($_GET['mustcontain'])) {
> if (strlen(trim($_GET['mustcontain'])) > 0) {
157,158d37
< }
< //file_put_contents('zaq.zaq', $mc);
161c40
< if (@preg_match($mc, null) === false || $mbd != "") { // not regexp
---
> if (@preg_match($mc, null) === false) { // not regexp
170,171d48
< } else {
< $mcs=explode(",", $mc);
175,178d51
< if ($mbd != "") {
< $numf=explode($mc, $icontis);
< //file_put_contents('zas.zas', '' . sizeof($numf));
< } else {
180d52
< }
184d55
< //file_put_contents('zat.zat', '' . sizeof($numf));
186d56
< //file_put_contents('zad.zad', '' . sizeof($numf) . ' ... ' . $ideaarray[2]);
190,199c60
< $nmc=sizeof($ideaarray);
< $oned=">";
< $twod="'";
< $threed='"';
< $allok=true;
< if ($mbd != "") { $nmc=(1 + sizeof($numf)); $oned="</option>"; $twod="</option>"; $threed="</option>"; $jmc=1; }
<
< //if ($mbd != "") { file_put_contents('zar.zar', '' . sizeof($mcs) . ' ' . sizeof($mcss) . ' ' . $nmc . ' ' . $mbd); }
<
< for ($imc=$jmc; $imc<$nmc; $imc++) {
---
> for ($imc=$jmc; $imc<sizeof($ideaarray); $imc++) {
203d63
< //file_put_contents('zag.zag', '' . sizeof($mcs) . ' ' . sizeof($mcss) . ' ' . $imc . ' ' . $mc);
206c66
< if (strpos(str_replace('_',' ',explode($threed,explode($twod,explode($oned, $ideaarray[$imc])[0])[0])[0]), $mcs[$sdf]) === false) {
---
> if (strpos(str_replace('_',' ',explode('"',explode("'",explode(">", $ideaarray[$imc])[0])[0])[0]), $mcs[$sdf]) === false) {
213c73
< if (strpos(str_replace('_',' ',explode($threed,explode($twod,explode($oned, $ideaarray[$imc])[0])[0])[0]), $mcss[$sdf]) === false) {
---
> if (strpos(str_replace('_',' ',explode('"',explode("'",explode(">", $ideaarray[$imc])[0])[0])[0]), $mcss[$sdf]) === false) {
220c80
< if (strpos(str_replace('_',' ',explode($threed,explode($twod,explode($oned, $ideaarray[$imc])[0])[0])[0]), $mcss[$sdf]) > strpos(str_replace('_',' ',explode('"',explode("'",explode(">", $ideaarray[$imc])[0])[0])[0]), $mcss[-1 + $sdf])) {
---
> if (strpos(str_replace('_',' ',explode('"',explode("'",explode(">", $ideaarray[$imc])[0])[0])[0]), $mcss[$sdf]) > strpos(str_replace('_',' ',explode('"',explode("'",explode(">", $ideaarray[$imc])[0])[0])[0]), $mcss[-1 + $sdf])) {
232,236c92
< //if (trim($ideaarray[$imc]) != '' && strpos($ideaarray[$imc],'(') !== false) {
< //file_put_contents('zah.zah', '' . $mc . ' ' . $ideaarray[$imc]);
< //}
< if (strpos(strtolower($ideaarray[$imc]), strtolower($mc)) !== false && $allok && ($mbd == "" || strpos(strtolower($ideaarray[$imc]), "tutorial (") !== false)) {
< //if ($mbd != "") { file_put_contents('zaf.zaf', '' . $mc); }
---
> if (strpos(strtolower($ideaarray[$imc]), strtolower($mc)) !== false && $allok) {
243c99
< if (($hd % 2) == 0 || $mbd != "") {
---
> if (($hd % 2) == 0) {
265c121
< if (($hd % 2) == 0 || $mbd != "") {
---
> if (($hd % 2) == 0) {
275c131
< if (sizeof($fhuhs) == 20 || (sizeof($fhuhs) == 1 && strlen($mbd) > 6)) { break; }
---
> if (sizeof($fhuhs) == 20) { break; }
281,282c137
< if (sizeof($fhuhs) == 1 && ($mbd != "" || $imc > (sizeof($ideaarray) / 2))) {
< //if ($mbd != "") { $huhrand=$forcedhuh; file_put_contents('zae.zae', '' . $mbd . ' ' . $fhuhs[0] . ' ' . $ideaarray[$fhuhs[0]]); }
---
> if (sizeof($fhuhs) == 1 && $imc > (sizeof($ideaarray) / 2)) {
293d147
< if ($mbd == "") {
306d159
< }
308,323d160
< if ($mbd != "") {
< $huhrand=$fhuhs[0];
< //file_put_contents('zan.zan', '' . $huhrand . ' ' . $ideaarray[$huhrand]);
< if (strpos(strtolower($ideaarray[$huhrand]), "tutorial (") !== false) {
< //$ptis=str_replace('_',' ',$ideaarray[$huhrand] . ")");
< $ptis=str_replace('_',' ',explode('Tutorial', explode('>', explode('"', $ideaarray[$huhrand])[0])[0])[0] . "Tutorial");
< //file_put_contents('zao.zao', '' . $ptis);
< } else if (strpos(strtolower($ideaarray[1 + $huhrand]), "tutorial (") !== false) {
< $huhrand++;
< //file_put_contents('zau.zau', ' ' . $huhrand . ' ' . $ideaarray[$huhrand]);
< //$ptis=str_replace('_',' ',$ideaarray[$huhrand] . ")");
< $ptis=str_replace('_',' ',explode('Tutorial', explode('>', explode('"', $ideaarray[$huhrand])[0])[0])[0] . "Tutorial");
< //file_put_contents('zav.zav', ' ' . $ptis);
< }
< //file_put_contents('zaw.zaw', '' . $ptis);
< } else {
327d163
< }
329,332c165
< if ($mbd != "") {
< $tdt=str_replace('(','',str_replace(')','',$mbd));
< $tutdate=' (' . substr($tdt,6,2) . ' ' . str_replace("01","January",str_replace("02","February",str_replace("03","March",str_replace("04","April",str_replace("05","May",str_replace("06","June",str_replace("07","July",str_replace("08","August",str_replace("09","September",str_replace("10","October",str_replace("11","November",str_replace("12","December",substr($tdt,4,2))))))))))))) . ' ' . substr($tdt,0,4) . ')';
< } else if (strpos($ideaarray[-1 + $huhrand], 'MyNew-') !== false) {
---
> if (strpos($ideaarray[-1 + $huhrand], 'MyNew-') !== false) {
335d167
< //if ($mbd != "") { file_put_contents('zak.zak', '' . $tutdate); }
342d173
< //if ($mbd != "") { file_put_contents('zam.zam', '' . $tutdate); }
351d181
< if ($mbd != "") { $ptis=explode(' (', $ptis)[0]; }

… in conjunction with small changes amongst the RJM Programming landing pages …


<span style="cursor:pointer;font-size:18px;" title="Open a random date WordPress Blog post" onclick="window.open('//www.rjmprogramming.com.au/ITblog/500/500?random=' + Math.floor(Math.random() * 19875643) + '&andclickme=y','_blank','top=20,left=100,width=900,height=800');">&nbsp;&#128197;</span><sup onclick="var thuh=prompt('Optionally enter a topic of interest you find in the relevant blog posting title where you can use comma delimiter for a list of find strings or semicolon for list of find strings in nominated order, else for no RJM Programming blog navigations click/tap Cancel. An 8 numeric YYYYMMDD entry will look at that date.',' '); if (thuh != null) { if (thuh.trim().length == 8 && thuh.trim().replace(/0/g,'').replace(/1/g,'').replace(/2/g,'').replace(/3/g,'').replace(/4/g,'').replace(/5/g,'').replace(/6/g,'').replace(/7/g,'').replace(/8/g,'').replace(/9/g,'') == '') { window.open('//www.rjmprogramming.com.au/ITblog/500/500?random=' + Math.floor(Math.random() * 19875643) + '&andclickme=y&mustbedated=' + encodeURIComponent(thuh.trim()),'_blank','top=20,left=100,width=900,height=800'); } else if (thuh.trim() == '') { window.open('//www.rjmprogramming.com.au/ITblog/500/500?random=' + Math.floor(Math.random() * 19875643) + '&andclickme=y','_blank','top=20,left=100,width=900,height=800'); } else { window.open('//www.rjmprogramming.com.au/ITblog/500/500?random=' + Math.floor(Math.random() * 19875643) + '&andclickme=y&mustcontain=' + encodeURIComponent(thuh),'_blank','top=20,left=100,width=900,height=800'); } }" style="cursor:pointer;font-size:8px;" title="Open a random date WordPress Blog post filtered by your entered topic">&#10067;</sup>

… to make all this happen.


Previous relevant Blog Posting Filtering Background Interfacing Tutorial is shown below.

Blog Posting Filtering Background Interfacing Tutorial

Blog Posting Filtering Background Interfacing Tutorial

With Image Pair Fitting into a Given Dimension Sources Tutorial, below, we identified this WordPress Blog’s TwentyTen theme’s 404.php code as (an example of) …

“code lazy (for us)” “intervention points” that mean most of the hard part of the job is done for you

… means by which we could mimic a little of the brilliant Lorem Picsum‘s modus operandi providing a random image resource, providing our own inhouse RJM Programming WordPress Blog Posting Image resource.

Since then, we’ve leant on that start, nuancing it to allow “filtering” of that total “RJM Programming WordPress Blog Posting Image resource” dataset via a user nominated string that should appear in the Blog Posting Title. This led us, in Landing Page Random Blog Post Topic Link Tutorial to make the change …


<option id='MyNew-20110314' onclick='windowopen("//www.rjmprogramming.com.au/wordpress/?p=58&pp=&pn=&title=News_from_RJM_Programming","_blank"); ' value='//www.rjmprogramming.com.au/wordpress/?p=58&pp=&pn=&title=News_from_RJM_Programming'>News from RJM Programming (20110314)</option></select></span><span style="cursor:pointer;font-size:18px;" title="Open a random date WordPress Blog post" onclick="window.open('//www.rjmprogramming.com.au/ITblog/500/500?random=' + Math.floor(Math.random() * 19875643) + '&andclickme=y','_blank','top=20,left=100,width=900,height=800');">&nbsp;&#128197;</span><sup onclick="var thuh=prompt('Optionally enter a topic of interest you find in the relevant blog posting title, else for no RJM Programming blog navigations click/tap Cancel.',' '); if (thuh != null) { if (thuh.trim() == '') { window.open('//www.rjmprogramming.com.au/ITblog/500/500?random=' + Math.floor(Math.random() * 19875643) + '&andclickme=y','_blank','top=20,left=100,width=900,height=800'); } else { window.open('//www.rjmprogramming.com.au/ITblog/500/500?random=' + Math.floor(Math.random() * 19875643) + '&andclickme=y&mustcontain=' + encodeURIComponent(thuh),'_blank','top=20,left=100,width=900,height=800'); } }" style="cursor:pointer;font-size:8px;" title="Open a random date WordPress Blog post filtered by your entered topic">&#10067;</sup></p>

… these days, on Landing Pages appearing like  📅, as an example of how we interface the new 404.php “background helper” changes, below, into (one example of) “forward user interfacer” user of that “background helper” with its new code parts below …

<?php

// WordPress "codex" PHP comments precede

$ioff=0;
$imfnameafterdomainsep="random_background_fadeinout.jpg";
$ptitle="Random Background Webpage Fade Tutorial (10 May 2022)";
$bonl="";
$tonl="";
$mcs=[];
$mcss=[];
$bigmc="";


function selectNewBlogPostingTutorialPicture() {
global $imfnameafterdomainsep, $ptitle, $bonl, $tonl, $mcs, $mcss;
$forcedhuh=-1;
$fhuhs=[];
$mc="";
$mcs=[];
$mcss=[];
$isregexp=false;
$numf=[];

$foundipath="";
$icontis=file_get_contents(explode('ITblog' . DIRECTORY_SEPARATOR, dirname(__FILE__) . DIRECTORY_SEPARATOR)[0] . "index.html");
$ideaarray=explode('&pp=&pn=&title=', $icontis);
if (sizeof($ideaarray) <= 1) {
$imfnameafterdomainsep="random_background_fadeinout.jpg";
$ptitle="Random Background Webpage Fade Tutorial (10 May 2022)";
} else if (sizeof($ideaarray) > 1) {
if (isset($_GET['mustcontain'])) {
if (strlen(trim($_GET['mustcontain'])) > 0) {
$mc=str_replace('@#$','',str_replace(' ','+ ',str_replace(' @#$','++',str_replace(' ','++ ',(str_replace('+', ' ', urldecode($_GET['mustcontain']))) . '@#$'))));
$bigmc=str_replace(";","*",str_replace(",","*",$mc));
if (@preg_match($mc, null) === false) { // not regexp
if (strpos($mc, ",") !== false || strpos($mc, ";") !== false) {
if (strpos($mc, ';') !== false) {
$mcss=explode(";", $mc);
$mc=$mcss[0];
} else {
$mcs=explode(",", $mc);
$mc=$mcs[0];
}
}
$mc=strtolower($mc);
$numf=explode($mc, strtolower(explode($ideaarray[0], $icontis)[1]));
} else { // regexp
$isregexp=true;
$numf[0]=$icontis;
}
if (sizeof($numf) > 1 || $isregexp) { // && sizeof($numf) < 10) {
$jmc=(-1 + sizeof(explode('&pp=&pn=&title=', $numf[0])));
for ($imc=$jmc; $imc<sizeof($ideaarray); $imc++) {
if ($oktoloop) {
if (!$isregexp) {
$allok=true;
if (sizeof($mcs) > 1) {
for ($sdf=1; $sdf<sizeof($mcs); $sdf++) {
if (strpos(str_replace('_',' ',explode('"',explode("'",explode(">", $ideaarray[$imc])[0])[0])[0]), $mcs[$sdf]) === false) {
$allok=false;
}
}
} elseif (sizeof($mcss) > 1) {
for ($sdf=1; $sdf<sizeof($mcss); $sdf++) {
if ($allok) {
if (strpos(str_replace('_',' ',explode('"',explode("'",explode(">", $ideaarray[$imc])[0])[0])[0]), $mcss[$sdf]) === false) {
$allok=false;
} else {
if (strpos(strtolower($ideaarray[$imc]), strtolower($mc)) !== false) {
if (strpos(strtolower($ideaarray[$imc]), strtolower($mc)) > strpos(str_replace('_',' ',explode('"',explode("'",explode(">", $ideaarray[$imc])[0])[0])[0]), $mcss[$sdf])) {
$allok=false;
} else if ($sdk > 1) {
if (strpos(str_replace('_',' ',explode('"',explode("'",explode(">", $ideaarray[$imc])[0])[0])[0]), $mcss[$sdf]) > strpos(str_replace('_',' ',explode('"',explode("'",explode(">", $ideaarray[$imc])[0])[0])[0]), $mcss[-1 + $sdf])) {
$allok=false;
}
}
} else {
$allok=false;
}
}
}
}
}
if ($allok) {
if (strpos(strtolower($ideaarray[$imc]), strtolower($mc)) !== false && $allok) {
$hd=rand(2, (-1 + sizeof($ideaarray)));
$hdd=1;
if (sizeof($numf) > 20) {
$hdd=rand(2, (-1 + sizeof($ideaarray)));
}
if (($hdd % 2) == 1) {
if (($hd % 2) == 0) {
array_push($fhuhs, $imc);
} else {
array_unshift($fhuhs, $imc);
}
}
}
}
} else if ($isregexp) {
//$arrsp=preg_split($mc, explode(">", $ideaarray[$imc])[0]);
//$arrsp=preg_split('/Javascript/', str_replace('_',' ',explode(">", $ideaarray[$imc])[0]));
//if (!$arrsp) { $arrsp=[]; }
$mystr=str_replace('_',' ',explode('"',explode("'",explode(">", $ideaarray[$imc])[0])[0])[0]);
if (preg_match($mc, $mystr)) { // !== false) {
//if (sizeof($arrsp) > 1) {
if ($isregexp) { file_put_contents('iregtwo.found', '/Javascript/' . $mc . ' ... 1 ... ' . explode('"',explode("'",explode(">", $ideaarray[$imc])[0])[0])[0]); }
$hd=rand(2, (-1 + sizeof($ideaarray)));
$hdd=1;
if (sizeof($numf) > 20) {
$hdd=rand(2, (-1 + sizeof($ideaarray)));
}
if (($hdd % 2) == 1) {
if (($hd % 2) == 0) {
array_push($fhuhs, $imc);
} else {
array_unshift($fhuhs, $imc);
}
}
} else {
file_put_contents('jregtwo.found', '/Javascript/' . $mc . ' ... ' . ' ... ' . explode('"',explode("'",explode(">", $ideaarray[$imc])[0])[0])[0]);
}
}
if (sizeof($fhuhs) == 20) { break; }
}
}
}
if (sizeof($fhuhs) > 0) {
$forcedhuh=$fhuhs[0];
if (sizeof($fhuhs) == 1 && $imc > (sizeof($ideaarray) / 2)) {
$oktoloop=false; //break;
}
}
}
}

if (trim($mc) != "" && $forcedhuh == -1 && sizeof($numf) <= 1 && sizeof($fhuhs) == 0) {
$imfnameafterdomainsep="random_background_fadeinout.jpg";
$ptitle="Random Background Webpage Fade Tutorial (10 May 2022)";
} else {
while ($foundipath == "") {
if ($forcedhuh >= 1) {
$huhrand=$forcedhuh;
array_shift($fhuhs);
if (sizeof($fhuhs) > 0) {
$forcedhuh=$fhuhs[0];
} else {
$forcedhuh=-1;
$foundipath=" ";
}
} else {
$huhrand=rand(2, (-1 + sizeof($ideaarray)));
}
$ptis="";
if (strpos(explode('>', explode('"', $ideaarray[$huhrand])[0])[0], "Tutorial") !== false) {
$ptis=str_replace('_',' ',explode('Tutorial', explode('>', explode('"', $ideaarray[$huhrand])[0])[0])[0] . "Tutorial");
}
$tutdate="";
if (strpos($ideaarray[-1 + $huhrand], 'MyNew-') !== false) {
$tdt=substr(explode('MyNew-', $ideaarray[-1 + $huhrand])[-1 + sizeof(explode('MyNew-', $ideaarray[-1 + $huhrand]))],0,8);
$tutdate=' (' . substr($tdt,6,2) . ' ' . str_replace("01","January",str_replace("02","February",str_replace("03","March",str_replace("04","April",str_replace("05","May",str_replace("06","June",str_replace("07","July",str_replace("08","August",str_replace("09","September",str_replace("10","October",str_replace("11","November",str_replace("12","December",substr($tdt,4,2))))))))))))) . ' ' . substr($tdt,0,4) . ')';
if (trim($mc) != "") {
if (!$isregexp) {
if (strpos(strtolower($ptis), $mc) === false) { $tutdate=""; }
} else {
if (!preg_match($mc, $ptis)) { $tutdate=""; }
}

}
}
$pnumis=explode('&', explode('?p=', $ideaarray[-1 + $huhrand] )[-1 + sizeof(explode('?p=', $ideaarray[-1 + $huhrand] ))])[0];
$thisbpc=file_get_contents('//www.rjmprogramming.com.au/ITblog/?p=' . $pnumis);
if (strpos($thisbpc, ' class="wp-caption') !== false) {
$thatbpc=explode('"', explode(' src="', explode(' class="wp-caption', $thisbpc)[1])[1])[0]; // www.rjmprogramming.com.au/PHP/emoji_animation_css_block.jpg
if (strpos($thatbpc, "rjmprogramming.com.au/") !== false) {
if (strpos($thatbpc, ".jp") !== false || strpos($thatbpc, ".png") !== false || strpos($thatbpc, ".gif") !== false) {
if ($tutdate != "" && strpos($ptis, " Tutorial") !== false && strpos($ptis, " (") === false && strpos($ptis, "%") === false && strpos($ptis, "&") === false && file_exists(explode('ITblog' . DIRECTORY_SEPARATOR, dirname(__FILE__) . DIRECTORY_SEPARATOR)[0] . explode("rjmprogramming.com.au/", $thatbpc)[1] )) {
$ptis.=$tutdate;
$foundipath=explode('ITblog' . DIRECTORY_SEPARATOR, dirname(__FILE__) . DIRECTORY_SEPARATOR)[0] . explode("rjmprogramming.com.au/", $thatbpc)[1];
if ($foundipath != "") {
$imfnameafterdomainsep=explode("rjmprogramming.com.au/", $thatbpc)[1];
$ptitle=$ptis;
$onlme="";
if (strpos(('' . $_SERVER['QUERY_STRING']), 'andclickme=') !== false) {
if ($mc != "") {
$onlme=' onload=" window.open(' . "'//www.rjmprogramming.com.au/ITblog/?p=" . $pnumis . "','_blank','top=200,left=0,height=700,width=900'); " . '" ';
if ($isregexp) {
$zis=0;
$zzis=strlen($mc);
if (strpos(($mc . '~'), '/~') !== false) { $zzis--; }
if (strpos(('~' . $mc), '~/') !== false) { $zzis--; $zis=1; }
$onlme=str_replace('; "', '; window.open(' . "'//www.rjmprogramming.com.au/itnewblog/match/mapper.php?pm=" . urlencode(substr($mc,$zis,$zzis)) . "','_blank','top=250,left=1200,height=650,width=900'); " . '"', $onlme);
} else {
$onlme=str_replace('; "', '; window.open(' . "'//www.rjmprogramming.com.au/itnewblog/match/mapper.php?pm=" . urlencode(explode('*',$bigmc)[0]) . "','_blank','top=250,left=1200,height=650,width=900'); " . '"', $onlme);
}

} else {
$onlme=' onload=" window.open(' . "'//www.rjmprogramming.com.au/ITblog/?p=" . $pnumis . "','_blank','top=200,left=100,height=700,width=900'); " . '" ';
}
}
$bonl=$onlme . ' title=' . "'" . 'Click opens relevant blog post called ' . $ptis . ' and double click opens relevant blog post action item' . "'" . ' onclick=" window.open(' . "'//www.rjmprogramming.com.au/ITblog/?p=" . $pnumis . "','_blank'); " . '" ondblclick=" window.open(' . "'//www.rjmprogramming.com.au/slideshow.html?title=" . str_replace(urlencode('|'), '%20', urlencode(str_replace(' ','|',$ptis))) . "','_blank'); " . '"';
$tonl='<head><title>' . $ptis . '</title></head>';
}
}
}
}
}
}
}
}
}


function createScaledImage($newWidth,$newHeight,$path,$datauri) { // thanks to https://stackoverflow.com/questions/16774521/scale-image-using-php-and-maintaining-aspect-ratio

$image_name=explode(DIRECTORY_SEPARATOR, $path)[-1 + sizeof(explode(DIRECTORY_SEPARATOR, $path))];


$mime = getimagesize($path);

if ($mime['mime']=='image/png') {
$src_img = imagecreatefrompng($path);
}
if ($mime['mime']=='image/jpg' || $mime['mime']=='image/jpeg' || $mime['mime']=='image/pjpeg') {
$src_img = imagecreatefromjpeg($path);
}
if ($mime['mime']=='image/gif') {
$src_img = imagecreatefromgif($path);
}

$old_x = imageSX($src_img);
$old_y = imageSY($src_img);

if ($old_x > $old_y) {
$thumb_w = $newWidth;
$thumb_h = $old_y/$old_x*$newWidth;
}

if ($old_x < $old_y) {
$thumb_w = $old_x/$old_y*$newHeight;
$thumb_h = $newHeight;
}

if ($old_x == $old_y) {
$thumb_w = $newWidth;
$thumb_h = $newHeight;
}

$dst_img = imagecreatetruecolor($thumb_w,$thumb_h);

imagecopyresampled($dst_img,$src_img,0,0,0,0,$thumb_w,$thumb_h,$old_x,$old_y);

// New save location
$new_thumb_loc = '/tmp/' . $image_name;

if (!$datauri) {
if($mime['mime']=='image/png') {
header('Content-Type: image/png');
imagepng($dst_img); //,$new_thumb_loc,8);
if (file_exists($new_thumb_loc)) {
unlink($new_thumb_loc);
}
imagedestroy($dst_img);
imagedestroy($src_img);
exit;
} else if ($mime['mime']=='image/jpg' || $mime['mime']=='image/jpeg' || $mime['mime']=='image/pjpeg') {
header('Content-Type: image/jpeg');
imagejpeg($dst_img); //,$new_thumb_loc,80);
if (file_exists($new_thumb_loc)) {
unlink($new_thumb_loc);
}
imagedestroy($dst_img);
imagedestroy($src_img);
exit;
} else if ($mime['mime']=='image/gif') {
header('Content-Type: image/gif');
imagejpeg($dst_img); //,$new_thumb_loc,80);
if (file_exists($new_thumb_loc)) {
unlink($new_thumb_loc);
}
imagedestroy($dst_img);
imagedestroy($src_img);
exit;
}
exit;
}

$result="";
if ($mime['mime']=='image/png') {
imagepng($dst_img,$new_thumb_loc,8);
$result = file_get_contents($new_thumb_loc);
}
if ($mime['mime']=='image/jpg' || $mime['mime']=='image/jpeg' || $mime['mime']=='image/pjpeg') {
imagejpeg($dst_img,$new_thumb_loc,80);
$result = file_get_contents($new_thumb_loc);
}
if ($mime['mime']=='image/gif') {
imagegif($dst_img,$new_thumb_loc);
$result = file_get_contents($new_thumb_loc);
}

imagedestroy($dst_img);
imagedestroy($src_img);


if (file_exists($new_thumb_loc)) {
unlink($new_thumb_loc);
}

return $result;
}

?>

… called within “new if section URL analysis code”

<?php

$uparts=explode("/", $_SERVER['REQUEST_URI']);
if (sizeof($uparts) >= 2) {
if (trim(explode('#',explode('?',$uparts[-1 + sizeof($uparts)])[0])[0]) == '') {
$ioff=-1;
}
if (1 == 1 || ('' . $_SERVER['QUERY_STRING']) == '') {
$usz=sizeof($uparts);
if (str_replace('?' . $_SERVER['QUERY_STRING'],'',trim($uparts[-1 + sizeof($uparts)])) == '') { $usz--; }
if ($usz == 3 && strpos($uparts[-1 + $usz], "%20") !== false || strpos($uparts[-1 + $usz], "+") !== false) { // fix /ITblog/Linux%20mailx%20Primer%20Tutorial/ 18/1/2022 RM
$oky=true;
if (substr(trim($uparts[$ioff - 1 + sizeof($uparts)]) . ' ',0,1) >= '0' && substr(trim($uparts[$ioff - 1 + sizeof($uparts)]) . ' ',0,1) <= '9') {
if (substr(trim($uparts[$ioff - 2 + sizeof($uparts)]) . ' ',0,1) >= '0' && substr(trim($uparts[$ioff - 2 + sizeof($uparts)]) . ' ',0,1) <= '9') {
$oky=false;
}
}
if ($oky) {
if (('' . $_SERVER['QUERY_STRING']) == '') {
header('Location: ' . str_replace('~``','/ITblog/',str_replace('/','',str_replace('/ITBLOG/','~``',str_replace('/itblog/','~``',str_replace('/ITblog/','~``',str_replace('--','-',str_replace('---','-',str_replace('+','-',str_replace('%20','-',$_SERVER['REQUEST_URI']))))))))));
} else {
header('Location: ' . explode('?',str_replace('~``','/ITblog/',str_replace('/','',str_replace('/ITBLOG/','~``',str_replace('/itblog/','~``',str_replace('/ITblog/','~``',str_replace('--','-',str_replace('---','-',str_replace('+','-',str_replace('%20','-',$_SERVER['REQUEST_URI']))))))))))[0] . '?' . $_SERVER['QUERY_STRING']);
}
exit;
}
}
}
if (str_replace("category","cat",strtolower($uparts[-2 + sizeof($uparts)])) == "cat" || strtolower($uparts[-2 + sizeof($uparts)]) == "category") {
$catsare=["","Not Categorised","Ajax","Android","Animation","Anything You Like","Code::Blocks","Colour Matching","Data Integration","Database","Delphi","Eclipse","eLearning","ESL","Event-Driven Programming","Games","GIMP","GUI","Hradware","Installers","iOS","Land Surveying","Moodle","Music Poll","NetBeans","Networking","News","ontop","OOP","Operating System","Photography","Projects","Signage Poll","Software","SpectroPhotometer","Tiki Wiki","Trips","Tutorials","Uncategorized","Visual Studio","Xcode"];
for ($ibh=1; $ibh<sizeof($catsare); $ibh++) {
if (explode("&",strtolower($uparts[-1 + sizeof($uparts)]))[0] == strtolower($catsare[$ibh])) {
if (strtolower($catsare[$ibh]) == "ontop") {
header('Location: https://www.rjmprogramming.com.au/ITblog/category/' . str_replace(" ","-",explode("&",strtolower($uparts[-1 + sizeof($uparts)]))[0])) . '#' . $ibh;
} else {
header('Location: https://www.rjmprogramming.com.au/ITblog/category/' . str_replace(" ","-",explode("&",strtolower($uparts[-1 + sizeof($uparts)]))[0])) . '#' . $ibh;
}
} else if (explode("&",strtolower($uparts[-1 + sizeof($uparts)]))[0] == ('' . $ibh)) {
if (strtolower($catsare[$ibh]) == "ontop") {
header('Location: https://www.rjmprogramming.com.au/ITblog/?cat=' . str_replace(" ","-",explode("&",strtolower($uparts[-1 + sizeof($uparts)]))[0])) . '#' . $ibh;
} else {
header('Location: https://www.rjmprogramming.com.au/ITblog/?cat=' . str_replace(" ","-",explode("&",strtolower($uparts[-1 + sizeof($uparts)]))[0])) . '#' . $ibh;
}
}
}
} else if (substr(trim($uparts[$ioff - 1 + sizeof($uparts)]) . ' ',0,1) >= '0' && substr(trim($uparts[$ioff - 1 + sizeof($uparts)]) . ' ',0,1) <= '9') {
if (substr(trim($uparts[$ioff - 2 + sizeof($uparts)]) . ' ',0,1) >= '0' && substr(trim($uparts[$ioff - 2 + sizeof($uparts)]) . ' ',0,1) <= '9') {
$uwidth=trim($uparts[$ioff - 2 + sizeof($uparts)]);
$uheight=trim(explode('#',explode('?',$uparts[$ioff - 1 + sizeof($uparts)])[0])[0]);
$imfnameafterdomainsep="random_background_fadeinout.jpg";
$ptitle="Random Background Webpage Fade Tutorial";
selectNewBlogPostingTutorialPicture();
$postingiurl=explode('ITblog' . DIRECTORY_SEPARATOR, dirname(__FILE__) . DIRECTORY_SEPARATOR)[0] . $imfnameafterdomainsep;
list($iwidth, $iheight, $itype, $iattr) = getimagesize($postingiurl);
$amime = getimagesize($postingiurl);
if ($ioff == 0) {
//header('Content-Type: image/jpeg');
echo "<html>" . $tonl . "<body" . $bonl . "><pre>data:image/jpeg;base64," . base64_encode(createScaledImage($uwidth,$uheight,$postingiurl,true)) . "#" . str_replace('+','%20',urlencode($ptitle)) . "</pre></body></html>";
} else if (1 == 2) {
//header('Content-Type: image/jpeg');
echo '<img src="' . "data:image/jpeg;base64," . base64_encode(file_get_contents($postingiurl)) . "#" . str_replace('+','%20',urlencode($ptitle)) . '"></img>';
} else {
createScaledImage($uwidth,$uheight,$postingiurl,false); //imagecreatefromjpeg($postingiurl);
}
exit;
}
}
}

get_header(); ?>

// more WordPress "codex" PHP code follows

?>


Previous relevant Image Pair Fitting into a Given Dimension Sources Tutorial is shown below.

Image Pair Fitting into a Given Dimension Sources Tutorial

Image Pair Fitting into a Given Dimension Sources Tutorial

Thinking “layers of functionality” here, we think that progress onto yesterday’s Image Pair Fitting into a Given Dimension Primer Tutorial would go …

  • as well as the wonderful Lorem Picsum resource for beautiful images “source” … we might add …
  • new RJM Programming WordPress Blog (that you are probably reading from, now) tutorial picture “source” of images

… the functionality for which we have been trying to envisage for many years, and seeing the excellent Lorem Picsum arrangements being a catalyst, to give it a go.

Kludgy feeling or not, we are happy to be linking into the “last talked about” WordPress Blog Search Within Search Posting Progress Context Tutorial WordPress “URL not found” 404.php code methodologies here, as a great “intervention point”. We often find the biggest joy in web application code modifications is to identify “code lazy (for us)” “intervention points” that mean most of the hard part of the job is done for you, by others (here, that being the great WordPress TwentyTen theme “codex” PHP code helped out by Apache web server .htaccess permalink configurations) before you add your own “situation specific” interventional code.

And so, once at 404.php code, we add new global variables and functions …

<?php

// WordPress "codex" PHP comments precede

$ioff=0;
$imfnameafterdomainsep="random_background_fadeinout.jpg";
$ptitle="Random Background Webpage Fade Tutorial";
$bonl="";
$tonl="";

function selectNewBlogPostingTutorialPicture() {
global $imfnameafterdomainsep, $ptitle, $bonl, $tonl;
$foundipath="";
$icontis=file_get_contents(explode('ITblog' . DIRECTORY_SEPARATOR, dirname(__FILE__) . DIRECTORY_SEPARATOR)[0] . "index.html");
$ideaarray=explode('&pp=&pn=&title=', $icontis);
if (sizeof($ideaarray) > 1) {
while ($foundipath == "") {
$huhrand=rand(2, (-1 + sizeof($ideaarray)));
$ptis="";
if (strpos(explode('>', explode('"', $ideaarray[$huhrand])[0])[0], "Tutorial") !== false) {
$ptis=str_replace('_',' ',explode('Tutorial', explode('>', explode('"', $ideaarray[$huhrand])[0])[0])[0] . "Tutorial");
}
$tutdate="";
if (strpos($ideaarray[-1 + $huhrand], 'MyNew-') !== false) {
$tdt=substr(explode('MyNew-', $ideaarray[-1 + $huhrand])[-1 + sizeof(explode('MyNew-', $ideaarray[-1 + $huhrand]))],0,8);
$tutdate=' (' . substr($tdt,6,2) . ' ' . str_replace("01","January",str_replace("02","February",str_replace("03","March",str_replace("04","April",str_replace("05","May",str_replace("06","June",str_replace("07","July",str_replace("08","August",str_replace("09","September",str_replace("10","October",str_replace("11","November",str_replace("12","December",substr($tdt,4,2))))))))))))) . ' ' . substr($tdt,0,4) . ')';
}
$pnumis=explode('&', explode('?p=', $ideaarray[-1 + $huhrand] )[-1 + sizeof(explode('?p=', $ideaarray[-1 + $huhrand] ))])[0];
$thisbpc=file_get_contents('HTTP://www.rjmprogramming.com.au/ITblog/?p=' . $pnumis);
if (strpos($thisbpc, ' class="wp-caption') !== false) {
$thatbpc=explode('"', explode(' src="', explode(' class="wp-caption', $thisbpc)[1])[1])[0]; // www.rjmprogramming.com.au/PHP/emoji_animation_css_block.jpg
if (strpos($thatbpc, "rjmprogramming.com.au/") !== false) {
if (strpos($thatbpc, ".jp") !== false || strpos($thatbpc, ".png") !== false || strpos($thatbpc, ".gif") !== false) {
if ($tutdate != "" && strpos($ptis, " Tutorial") !== false && strpos($ptis, " (") === false && strpos($ptis, "%") === false && strpos($ptis, "&") === false && file_exists(explode('ITblog' . DIRECTORY_SEPARATOR, dirname(__FILE__) . DIRECTORY_SEPARATOR)[0] . explode("rjmprogramming.com.au/", $thatbpc)[1] )) {
$ptis.=$tutdate;
$foundipath=explode('ITblog' . DIRECTORY_SEPARATOR, dirname(__FILE__) . DIRECTORY_SEPARATOR)[0] . explode("rjmprogramming.com.au/", $thatbpc)[1];
if ($foundipath != "") {
$imfnameafterdomainsep=explode("rjmprogramming.com.au/", $thatbpc)[1];
$ptitle=$ptis;
$onlme="";
if (strpos(('' . $_SERVER['QUERY_STRING']), 'andclickme=') !== false) {
$onlme=' onload=" window.open(' . "'//www.rjmprogramming.com.au/ITblog/?p=" . $pnumis . "','_blank','top=200,left=100,height=700,width=900'); " . '" ';
}
$bonl=$onlme . ' title=' . "'" . 'Click opens relevant blog post called ' . $ptis . ' and double click opens relevant blog post action item' . "'" . ' onclick=" window.open(' . "'//www.rjmprogramming.com.au/ITblog/?p=" . $pnumis . "','_blank'); " . '" ondblclick=" window.open(' . "'//www.rjmprogramming.com.au/slideshow.html?title=" . str_replace(urlencode('|'), '%20', urlencode(str_replace(' ','|',$ptis))) . "','_blank'); " . '"';
$tonl='<head><title>' . $ptis . '</title></head>';
}
}
}
}
}
}
}
}


function createScaledImage($newWidth,$newHeight,$path,$datauri) { // thanks to https://stackoverflow.com/questions/16774521/scale-image-using-php-and-maintaining-aspect-ratio

$image_name=explode(DIRECTORY_SEPARATOR, $path)[-1 + sizeof(explode(DIRECTORY_SEPARATOR, $path))];


$mime = getimagesize($path);

if ($mime['mime']=='image/png') {
$src_img = imagecreatefrompng($path);
}
if ($mime['mime']=='image/jpg' || $mime['mime']=='image/jpeg' || $mime['mime']=='image/pjpeg') {
$src_img = imagecreatefromjpeg($path);
}
if ($mime['mime']=='image/gif') {
$src_img = imagecreatefromgif($path);
}

$old_x = imageSX($src_img);
$old_y = imageSY($src_img);

if ($old_x > $old_y) {
$thumb_w = $newWidth;
$thumb_h = $old_y/$old_x*$newWidth;
}

if ($old_x < $old_y) {
$thumb_w = $old_x/$old_y*$newHeight;
$thumb_h = $newHeight;
}

if ($old_x == $old_y) {
$thumb_w = $newWidth;
$thumb_h = $newHeight;
}

$dst_img = imagecreatetruecolor($thumb_w,$thumb_h);

imagecopyresampled($dst_img,$src_img,0,0,0,0,$thumb_w,$thumb_h,$old_x,$old_y);

// New save location
$new_thumb_loc = '/tmp/' . $image_name;

if (!$datauri) {
if($mime['mime']=='image/png') {
header('Content-Type: image/png');
imagepng($dst_img); //,$new_thumb_loc,8);
if (file_exists($new_thumb_loc)) {
unlink($new_thumb_loc);
}
imagedestroy($dst_img);
imagedestroy($src_img);
exit;
} else if ($mime['mime']=='image/jpg' || $mime['mime']=='image/jpeg' || $mime['mime']=='image/pjpeg') {
header('Content-Type: image/jpeg');
imagejpeg($dst_img); //,$new_thumb_loc,80);
if (file_exists($new_thumb_loc)) {
unlink($new_thumb_loc);
}
imagedestroy($dst_img);
imagedestroy($src_img);
exit;
} else if ($mime['mime']=='image/gif') {
header('Content-Type: image/gif');
imagejpeg($dst_img); //,$new_thumb_loc,80);
if (file_exists($new_thumb_loc)) {
unlink($new_thumb_loc);
}
imagedestroy($dst_img);
imagedestroy($src_img);
exit;
}
exit;
}

$result="";
if ($mime['mime']=='image/png') {
imagepng($dst_img,$new_thumb_loc,8);
$result = file_get_contents($new_thumb_loc);
}
if ($mime['mime']=='image/jpg' || $mime['mime']=='image/jpeg' || $mime['mime']=='image/pjpeg') {
imagejpeg($dst_img,$new_thumb_loc,80);
$result = file_get_contents($new_thumb_loc);
}
if ($mime['mime']=='image/gif') {
imagegif($dst_img,$new_thumb_loc);
$result = file_get_contents($new_thumb_loc);
}

imagedestroy($dst_img);
imagedestroy($src_img);


if (file_exists($new_thumb_loc)) {
unlink($new_thumb_loc);
}

return $result;
}

?>

… called within “new if section URL analysis code”

<?php

$uparts=explode("/", $_SERVER['REQUEST_URI']);
if (sizeof($uparts) >= 2) {
if (trim(explode('#',explode('?',$uparts[-1 + sizeof($uparts)])[0])[0]) == '') {
$ioff=-1;
}

if (1 == 1 || ('' . $_SERVER['QUERY_STRING']) == '') {
$usz=sizeof($uparts);
if (str_replace('?' . $_SERVER['QUERY_STRING'],'',trim($uparts[-1 + sizeof($uparts)])) == '') { $usz--; }
if ($usz == 3 && strpos($uparts[-1 + $usz], "%20") !== false || strpos($uparts[-1 + $usz], "+") !== false) { // fix /ITblog/Linux%20mailx%20Primer%20Tutorial/ 18/1/2022 RM
if (('' . $_SERVER['QUERY_STRING']) == '') {
header('Location: ' . str_replace('~``','/ITblog/',str_replace('/','',str_replace('/ITBLOG/','~``',str_replace('/itblog/','~``',str_replace('/ITblog/','~``',str_replace('--','-',str_replace('---','-',str_replace('+','-',str_replace('%20','-',$_SERVER['REQUEST_URI']))))))))));
} else {
header('Location: ' . explode('?',str_replace('~``','/ITblog/',str_replace('/','',str_replace('/ITBLOG/','~``',str_replace('/itblog/','~``',str_replace('/ITblog/','~``',str_replace('--','-',str_replace('---','-',str_replace('+','-',str_replace('%20','-',$_SERVER['REQUEST_URI']))))))))))[0] . '?' . $_SERVER['QUERY_STRING']);
}
exit;
}
}
if (str_replace("category","cat",strtolower($uparts[-2 + sizeof($uparts)])) == "cat" || strtolower($uparts[-2 + sizeof($uparts)]) == "category") {
$catsare=["","Not Categorised","Ajax","Android","Animation","Anything You Like","Code::Blocks","Colour Matching","Data Integration","Database","Delphi","Eclipse","eLearning","ESL","Event-Driven Programming","Games","GIMP","GUI","Hradware","Installers","iOS","Land Surveying","Moodle","Music Poll","NetBeans","Networking","News","ontop","OOP","Operating System","Photography","Projects","Signage Poll","Software","SpectroPhotometer","Tiki Wiki","Trips","Tutorials","Uncategorized","Visual Studio","Xcode"];
for ($ibh=1; $ibh<sizeof($catsare); $ibh++) {
if (explode("&",strtolower($uparts[-1 + sizeof($uparts)]))[0] == strtolower($catsare[$ibh])) {
if (strtolower($catsare[$ibh]) == "ontop") {
header('Location: https://www.rjmprogramming.com.au/ITblog/category/' . str_replace(" ","-",explode("&",strtolower($uparts[-1 + sizeof($uparts)]))[0])) . '#' . $ibh;
} else {
header('Location: https://www.rjmprogramming.com.au/ITblog/category/' . str_replace(" ","-",explode("&",strtolower($uparts[-1 + sizeof($uparts)]))[0])) . '#' . $ibh;
}
} else if (explode("&",strtolower($uparts[-1 + sizeof($uparts)]))[0] == ('' . $ibh)) {
if (strtolower($catsare[$ibh]) == "ontop") {
header('Location: https://www.rjmprogramming.com.au/ITblog/?cat=' . str_replace(" ","-",explode("&",strtolower($uparts[-1 + sizeof($uparts)]))[0])) . '#' . $ibh;
} else {
header('Location: https://www.rjmprogramming.com.au/ITblog/?cat=' . str_replace(" ","-",explode("&",strtolower($uparts[-1 + sizeof($uparts)]))[0])) . '#' . $ibh;
}
}
}
} else if (substr(trim($uparts[$ioff - 1 + sizeof($uparts)]) . ' ',0,1) >= '0' && substr(trim($uparts[$ioff - 1 + sizeof($uparts)]) . ' ',0,1) <= '9') {
if (substr(trim($uparts[$ioff - 2 + sizeof($uparts)]) . ' ',0,1) >= '0' && substr(trim($uparts[$ioff - 2 + sizeof($uparts)]) . ' ',0,1) <= '9') {
$uwidth=trim($uparts[$ioff - 2 + sizeof($uparts)]);
$uheight=trim(explode('#',explode('?',$uparts[$ioff - 1 + sizeof($uparts)])[0])[0]);
$imfnameafterdomainsep="random_background_fadeinout.jpg";
$ptitle="Random Background Webpage Fade Tutorial";
selectNewBlogPostingTutorialPicture();
$postingiurl=explode('ITblog' . DIRECTORY_SEPARATOR, dirname(__FILE__) . DIRECTORY_SEPARATOR)[0] . $imfnameafterdomainsep;
list($iwidth, $iheight, $itype, $iattr) = getimagesize($postingiurl);
$amime = getimagesize($postingiurl);
if ($ioff == 0) {
echo "<html>" . $tonl . "<body" . $bonl . "><pre>data:image/jpeg;base64," . base64_encode(createScaledImage($uwidth,$uheight,$postingiurl,true)) . "#" . str_replace('+','%20',urlencode($ptitle)) . "</pre></body></html>";
} else if (1 == 2) {
echo '<img src="' . "data:image/jpeg;base64," . base64_encode(file_get_contents($postingiurl)) . "#" . str_replace('+','%20',urlencode($ptitle)) . '"></img>';
} else {
createScaledImage($uwidth,$uheight,$postingiurl,false); //imagecreatefromjpeg($postingiurl);
}
exit;
}
}
}


get_header(); ?>

// more WordPress "codex" PHP code follows

?>

… that amount to changes which enable two types of newly functional URLs that, without the changes, used to result in a WordPress webpage explaining that the URL could not be found …

  1. a URL such as https://www.rjmprogramming.com.au/ITblog/537/500 will pick a random RJM Programming Blog tutorial picture and show …

    [image data URI of tutorial picture]#[blog posting title]

    … along with the happy discovery along the way that the “#[blog posting title]” can be tagged onto a base64 data URI and still successfully display the image
  2. whereas a URL such as https://www.rjmprogramming.com.au/ITblog/537/500/ will pick a random RJM Programming Blog tutorial picture and show it

… the combination allowing our changed proof of concept CSS (styling) “object-fit” experimenting web application to be now allowing for two sources of image data which the user can select between, themselves, with the RJM Programming WordPress Blog images also containing clickable links back to the WordPress Blog post of relevance. You can also try this here.

Stop Press

And then there is some optional filtering of RJM Programming blog image topic, as we make happen with our changed proof of concept CSS (styling) “object-fit” experimenting web application.


Previous relevant Image Pair Fitting into a Given Dimension Primer Tutorial is shown below.

Image Pair Fitting into a Given Dimension Primer Tutorial

Image Pair Fitting into a Given Dimension Primer Tutorial

One of the most “catered for” part of webpage design involves the display of images. Our recent “stumbling upon” …

  • the excellent Lorem Picsum resource for beautiful images suiting a given width x height … had us looking around for an interesting image related theme to “tutorialize” and “stumbled upon” …
  • the excellent CSS object-fit Property explanation of CSS “object-fit” property …

… facilitating the interest in the scenario …

  • you are presented with “webpage real estate” of a given width x height … into which …
  • you want to display two images side by side …

… and in this scenario the use of “object-fit” property values …

Here is where the object-fit property comes in. The object-fit property can take one of the following values:

fill – This is default. The image is resized to fill the given dimension. If necessary, the image will be stretched or squished to fit
contain – The image keeps its aspect ratio, but is resized to fit within the given dimension
cover – The image keeps its aspect ratio and fills the given dimension. The image will be clipped to fit
none – The image is not resized
scale-down – the image is scaled down to the smallest version of none or contain

… creates interesting variety in how you can configure this scenario depending on your (constraint) interest in …

  • you are constrained by fact you must see all the image’s content in original aspect ratio … think … contain or scale-down
  • you are constrained by fact you must see all the image’s content but not necessarily with original aspect ratio … think … fill or contain or scale-down
  • you are constrained by fact that your “webpage real estate” of the given width x height must be filled (by imagery) … think … fill or cover (or (quite often, but not always) none)
  • you must keep original image dimensions but clipping okay … think … none
  • you must keep original aspect ratio of images but clipping okay … think … contain or cover or none or scale-down

… and then there is …

What happens when you resize your webpage window?

Feel free to try our proof of concept CSS (styling) “object-fit” experimenting web application

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


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


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


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


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

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

Blog Posting Filtering Background Date Interfacing Tutorial

Blog Posting Filtering Background Date Interfacing Tutorial

Blog Posting Filtering Background Date Interfacing Tutorial

We wanted to nuance the Blog Content filtering functionality of Blog Posting Filtering Background Interfacing Tutorial by …

  • adding to the existant word within blog posting title filtering prowess … with …
  • date (YYYYMMDD) based date filtering of blog posting

… and needed to purloin (good ol’) WordPress codex 404.php PHP code functionality changes below …


29d28
< $mbd="";
32,148d30
< //file_put_contents('zac.zac', $_SERVER['QUERY_STRING']);
< if (isset($_GET['mustbedated'])) {
< $mbd=str_replace('+',' ',urldecode($_GET['mustbedated']));
< $mzs=explode(" ", $mbd);
< if (sizeof($mzs) > 1) {
< $newid="";
< $suffn="";
< if (strpos($mbd, ")") !== false) { $suffn=")"; }
< for ($imzs=0; $imzs<sizeof($mzs); $imzs++) {
< if (substr($mzs[$imzs],0,1) == '(') {
< $newid='(' . $newid;
< $mzs[$imzs]=substr($mzs[$imzs],1);
< }
< if ($mzs[$imzs] != '') {
< if (1 == 1 || (substr($mzs[$imzs],0,1) >= '0' && substr($mzs[$imzs],0,1) <= '9')) {
< if (substr($mzs[$imzs],0,1) >= '0' && substr($mzs[$imzs],0,1) <= '9' && strlen(str_replace(')','',$mzs[$imzs])) == 4) {
< $newid.=str_replace(')','',$mzs[$imzs]);
< } else if (substr($mzs[$imzs],0,1) >= '0' && substr($mzs[$imzs],0,1) <= '9' && strlen(str_replace(')','',$mzs[$imzs])) == 8) {
< $newid.=str_replace(')','',$mzs[$imzs]);
< } else if (substr($mzs[$imzs],0,1) >= '0' && substr($mzs[$imzs],0,1) <= '9' && strlen(str_replace(')','',$mzs[$imzs])) == 2 && strlen($newid) >= 4) {
< $newid.=str_replace(')','',$mzs[$imzs]);
< } else if (substr($mzs[$imzs],0,1) >= '0' && substr($mzs[$imzs],0,1) <= '9' && strlen(str_replace(')','',$mzs[$imzs])) == 2) {
< $suffn=str_replace(')','',$mzs[$imzs]) . $suffn;
< } else if (substr($mzs[$imzs],0,1) >= '0' && substr($mzs[$imzs],0,1) <= '9' && strlen(str_replace(')','',$mzs[$imzs])) == 1 && strlen($newid) >= 4) {
< $newid.='0' . str_replace(')','',$mzs[$imzs]);
< } else if (substr($mzs[$imzs],0,1) >= '0' && substr($mzs[$imzs],0,1) <= '9' && strlen(str_replace(')','',$mzs[$imzs])) == 1) {
< $suffn='0' . str_replace(')','',$mzs[$imzs]) . $suffn;
<
< } else if (strpos(strtolower($mzs[$imzs]), 'jan') !== false) {
< if (strlen($newid) >= 4) {
< $newid.='01';
< } else {
< $suffn='01' . $suffn;
< }
< } else if (strpos(strtolower($mzs[$imzs]), 'feb') !== false) {
< if (strlen($newid) >= 4) {
< $newid.='02';
< } else {
< $suffn='02' . $suffn;
< }
< } else if (strpos(strtolower($mzs[$imzs]), 'mar') !== false) {
< if (strlen($newid) >= 4) {
< $newid.='03';
< } else {
< $suffn='03' . $suffn;
< }
< } else if (strpos(strtolower($mzs[$imzs]), 'apr') !== false) {
< if (strlen($newid) >= 4) {
< $newid.='04';
< } else {
< $suffn='04' . $suffn;
< }
< } else if (strpos(strtolower($mzs[$imzs]), 'may') !== false) {
< if (strlen($newid) >= 4) {
< $newid.='05';
< } else {
< $suffn='05' . $suffn;
< }
< } else if (strpos(strtolower($mzs[$imzs]), 'jun') !== false) {
< if (strlen($newid) >= 4) {
< $newid.='06';
< } else {
< $suffn='06' . $suffn;
< }
< } else if (strpos(strtolower($mzs[$imzs]), 'jul') !== false) {
< if (strlen($newid) >= 4) {
< $newid.='07';
< } else {
< $suffn='07' . $suffn;
< }
< } else if (strpos(strtolower($mzs[$imzs]), 'aug') !== false) {
< if (strlen($newid) >= 4) {
< $newid.='08';
< } else {
< $suffn='08' . $suffn;
< }
< } else if (strpos(strtolower($mzs[$imzs]), 'sep') !== false) {
< if (strlen($newid) >= 4) {
< $newid.='09';
< } else {
< $suffn='09' . $suffn;
< }
< } else if (strpos(strtolower($mzs[$imzs]), 'oct') !== false) {
< if (strlen($newid) >= 4) {
< $newid.='10';
< } else {
< $suffn='10' . $suffn;
< }
< } else if (strpos(strtolower($mzs[$imzs]), 'nov') !== false) {
< if (strlen($newid) >= 4) {
< $newid.='11';
< } else {
< $suffn='11' . $suffn;
< }
< } else if (strpos(strtolower($mzs[$imzs]), 'dec') !== false) {
< if (strlen($newid) >= 4) {
< $newid.='12';
< } else {
< $suffn='12' . $suffn;
< }
< }
<
< }
< }
< }
< $newid.=$suffn;
< if ($newid != "") { if (strlen($newid) == 8) { $mbd='(' . $newid . ')'; } else { $mbd=$newid; } }
< }
< if (strlen($mbd) == 8) { $mbd='(' . $mbd . ')'; }
< //file_put_contents('zab.zab', $mbd . ' ... ' . $mc);
< if (strpos($icontis, $mbd) !== false && sizeof($ideaarray) > 1) {
< $mc=$mbd;
< $iicontis=substr(explode($mc, $icontis)[0],-500,500) . $mc . explode($mc, $icontis)[1];
< $ideaarray=explode('&pp=&pn=&title=', $iicontis);
< //file_put_contents('zaa.zaa', $ideaarray[1]);
< }
< }
153,155c35,36
< if (isset($_GET['mustcontain']) || $mc != "") {
< if (strlen(trim($_GET['mustcontain'])) > 0 || $mc != "") {
< if ($mc == "") {
---
> if (isset($_GET['mustcontain'])) {
> if (strlen(trim($_GET['mustcontain'])) > 0) {
157,158d37
< }
< //file_put_contents('zaq.zaq', $mc);
161c40
< if (@preg_match($mc, null) === false || $mbd != "") { // not regexp
---
> if (@preg_match($mc, null) === false) { // not regexp
170,171d48
< } else {
< $mcs=explode(",", $mc);
175,178d51
< if ($mbd != "") {
< $numf=explode($mc, $icontis);
< //file_put_contents('zas.zas', '' . sizeof($numf));
< } else {
180d52
< }
184d55
< //file_put_contents('zat.zat', '' . sizeof($numf));
186d56
< //file_put_contents('zad.zad', '' . sizeof($numf) . ' ... ' . $ideaarray[2]);
190,199c60
< $nmc=sizeof($ideaarray);
< $oned=">";
< $twod="'";
< $threed='"';
< $allok=true;
< if ($mbd != "") { $nmc=(1 + sizeof($numf)); $oned="</option>"; $twod="</option>"; $threed="</option>"; $jmc=1; }
<
< //if ($mbd != "") { file_put_contents('zar.zar', '' . sizeof($mcs) . ' ' . sizeof($mcss) . ' ' . $nmc . ' ' . $mbd); }
<
< for ($imc=$jmc; $imc<$nmc; $imc++) {
---
> for ($imc=$jmc; $imc<sizeof($ideaarray); $imc++) {
203d63
< //file_put_contents('zag.zag', '' . sizeof($mcs) . ' ' . sizeof($mcss) . ' ' . $imc . ' ' . $mc);
206c66
< if (strpos(str_replace('_',' ',explode($threed,explode($twod,explode($oned, $ideaarray[$imc])[0])[0])[0]), $mcs[$sdf]) === false) {
---
> if (strpos(str_replace('_',' ',explode('"',explode("'",explode(">", $ideaarray[$imc])[0])[0])[0]), $mcs[$sdf]) === false) {
213c73
< if (strpos(str_replace('_',' ',explode($threed,explode($twod,explode($oned, $ideaarray[$imc])[0])[0])[0]), $mcss[$sdf]) === false) {
---
> if (strpos(str_replace('_',' ',explode('"',explode("'",explode(">", $ideaarray[$imc])[0])[0])[0]), $mcss[$sdf]) === false) {
220c80
< if (strpos(str_replace('_',' ',explode($threed,explode($twod,explode($oned, $ideaarray[$imc])[0])[0])[0]), $mcss[$sdf]) > strpos(str_replace('_',' ',explode('"',explode("'",explode(">", $ideaarray[$imc])[0])[0])[0]), $mcss[-1 + $sdf])) {
---
> if (strpos(str_replace('_',' ',explode('"',explode("'",explode(">", $ideaarray[$imc])[0])[0])[0]), $mcss[$sdf]) > strpos(str_replace('_',' ',explode('"',explode("'",explode(">", $ideaarray[$imc])[0])[0])[0]), $mcss[-1 + $sdf])) {
232,236c92
< //if (trim($ideaarray[$imc]) != '' && strpos($ideaarray[$imc],'(') !== false) {
< //file_put_contents('zah.zah', '' . $mc . ' ' . $ideaarray[$imc]);
< //}
< if (strpos(strtolower($ideaarray[$imc]), strtolower($mc)) !== false && $allok && ($mbd == "" || strpos(strtolower($ideaarray[$imc]), "tutorial (") !== false)) {
< //if ($mbd != "") { file_put_contents('zaf.zaf', '' . $mc); }
---
> if (strpos(strtolower($ideaarray[$imc]), strtolower($mc)) !== false && $allok) {
243c99
< if (($hd % 2) == 0 || $mbd != "") {
---
> if (($hd % 2) == 0) {
265c121
< if (($hd % 2) == 0 || $mbd != "") {
---
> if (($hd % 2) == 0) {
275c131
< if (sizeof($fhuhs) == 20 || (sizeof($fhuhs) == 1 && strlen($mbd) > 6)) { break; }
---
> if (sizeof($fhuhs) == 20) { break; }
281,282c137
< if (sizeof($fhuhs) == 1 && ($mbd != "" || $imc > (sizeof($ideaarray) / 2))) {
< //if ($mbd != "") { $huhrand=$forcedhuh; file_put_contents('zae.zae', '' . $mbd . ' ' . $fhuhs[0] . ' ' . $ideaarray[$fhuhs[0]]); }
---
> if (sizeof($fhuhs) == 1 && $imc > (sizeof($ideaarray) / 2)) {
293d147
< if ($mbd == "") {
306d159
< }
308,323d160
< if ($mbd != "") {
< $huhrand=$fhuhs[0];
< //file_put_contents('zan.zan', '' . $huhrand . ' ' . $ideaarray[$huhrand]);
< if (strpos(strtolower($ideaarray[$huhrand]), "tutorial (") !== false) {
< //$ptis=str_replace('_',' ',$ideaarray[$huhrand] . ")");
< $ptis=str_replace('_',' ',explode('Tutorial', explode('>', explode('"', $ideaarray[$huhrand])[0])[0])[0] . "Tutorial");
< //file_put_contents('zao.zao', '' . $ptis);
< } else if (strpos(strtolower($ideaarray[1 + $huhrand]), "tutorial (") !== false) {
< $huhrand++;
< //file_put_contents('zau.zau', ' ' . $huhrand . ' ' . $ideaarray[$huhrand]);
< //$ptis=str_replace('_',' ',$ideaarray[$huhrand] . ")");
< $ptis=str_replace('_',' ',explode('Tutorial', explode('>', explode('"', $ideaarray[$huhrand])[0])[0])[0] . "Tutorial");
< //file_put_contents('zav.zav', ' ' . $ptis);
< }
< //file_put_contents('zaw.zaw', '' . $ptis);
< } else {
327d163
< }
329,332c165
< if ($mbd != "") {
< $tdt=str_replace('(','',str_replace(')','',$mbd));
< $tutdate=' (' . substr($tdt,6,2) . ' ' . str_replace("01","January",str_replace("02","February",str_replace("03","March",str_replace("04","April",str_replace("05","May",str_replace("06","June",str_replace("07","July",str_replace("08","August",str_replace("09","September",str_replace("10","October",str_replace("11","November",str_replace("12","December",substr($tdt,4,2))))))))))))) . ' ' . substr($tdt,0,4) . ')';
< } else if (strpos($ideaarray[-1 + $huhrand], 'MyNew-') !== false) {
---
> if (strpos($ideaarray[-1 + $huhrand], 'MyNew-') !== false) {
335d167
< //if ($mbd != "") { file_put_contents('zak.zak', '' . $tutdate); }
342d173
< //if ($mbd != "") { file_put_contents('zam.zam', '' . $tutdate); }
351d181
< if ($mbd != "") { $ptis=explode(' (', $ptis)[0]; }

… in conjunction with small changes amongst the RJM Programming landing pages …


<span style="cursor:pointer;font-size:18px;" title="Open a random date WordPress Blog post" onclick="window.open('//www.rjmprogramming.com.au/ITblog/500/500?random=' + Math.floor(Math.random() * 19875643) + '&andclickme=y','_blank','top=20,left=100,width=900,height=800');">&nbsp;&#128197;</span><sup onclick="var thuh=prompt('Optionally enter a topic of interest you find in the relevant blog posting title where you can use comma delimiter for a list of find strings or semicolon for list of find strings in nominated order, else for no RJM Programming blog navigations click/tap Cancel. An 8 numeric YYYYMMDD entry will look at that date.',' '); if (thuh != null) { if (thuh.trim().length == 8 && thuh.trim().replace(/0/g,'').replace(/1/g,'').replace(/2/g,'').replace(/3/g,'').replace(/4/g,'').replace(/5/g,'').replace(/6/g,'').replace(/7/g,'').replace(/8/g,'').replace(/9/g,'') == '') { window.open('//www.rjmprogramming.com.au/ITblog/500/500?random=' + Math.floor(Math.random() * 19875643) + '&andclickme=y&mustbedated=' + encodeURIComponent(thuh.trim()),'_blank','top=20,left=100,width=900,height=800'); } else if (thuh.trim() == '') { window.open('//www.rjmprogramming.com.au/ITblog/500/500?random=' + Math.floor(Math.random() * 19875643) + '&andclickme=y','_blank','top=20,left=100,width=900,height=800'); } else { window.open('//www.rjmprogramming.com.au/ITblog/500/500?random=' + Math.floor(Math.random() * 19875643) + '&andclickme=y&mustcontain=' + encodeURIComponent(thuh),'_blank','top=20,left=100,width=900,height=800'); } }" style="cursor:pointer;font-size:8px;" title="Open a random date WordPress Blog post filtered by your entered topic">&#10067;</sup>

… to make all this happen.


Previous relevant Blog Posting Filtering Background Interfacing Tutorial is shown below.

Blog Posting Filtering Background Interfacing Tutorial

Blog Posting Filtering Background Interfacing Tutorial

With Image Pair Fitting into a Given Dimension Sources Tutorial, below, we identified this WordPress Blog’s TwentyTen theme’s 404.php code as (an example of) …

“code lazy (for us)” “intervention points” that mean most of the hard part of the job is done for you

… means by which we could mimic a little of the brilliant Lorem Picsum‘s modus operandi providing a random image resource, providing our own inhouse RJM Programming WordPress Blog Posting Image resource.

Since then, we’ve leant on that start, nuancing it to allow “filtering” of that total “RJM Programming WordPress Blog Posting Image resource” dataset via a user nominated string that should appear in the Blog Posting Title. This led us, in Landing Page Random Blog Post Topic Link Tutorial to make the change …


<option id='MyNew-20110314' onclick='windowopen("//www.rjmprogramming.com.au/wordpress/?p=58&pp=&pn=&title=News_from_RJM_Programming","_blank"); ' value='//www.rjmprogramming.com.au/wordpress/?p=58&pp=&pn=&title=News_from_RJM_Programming'>News from RJM Programming (20110314)</option></select></span><span style="cursor:pointer;font-size:18px;" title="Open a random date WordPress Blog post" onclick="window.open('//www.rjmprogramming.com.au/ITblog/500/500?random=' + Math.floor(Math.random() * 19875643) + '&andclickme=y','_blank','top=20,left=100,width=900,height=800');">&nbsp;&#128197;</span><sup onclick="var thuh=prompt('Optionally enter a topic of interest you find in the relevant blog posting title, else for no RJM Programming blog navigations click/tap Cancel.',' '); if (thuh != null) { if (thuh.trim() == '') { window.open('//www.rjmprogramming.com.au/ITblog/500/500?random=' + Math.floor(Math.random() * 19875643) + '&andclickme=y','_blank','top=20,left=100,width=900,height=800'); } else { window.open('//www.rjmprogramming.com.au/ITblog/500/500?random=' + Math.floor(Math.random() * 19875643) + '&andclickme=y&mustcontain=' + encodeURIComponent(thuh),'_blank','top=20,left=100,width=900,height=800'); } }" style="cursor:pointer;font-size:8px;" title="Open a random date WordPress Blog post filtered by your entered topic">&#10067;</sup></p>

… these days, on Landing Pages appearing like  📅, as an example of how we interface the new 404.php “background helper” changes, below, into (one example of) “forward user interfacer” user of that “background helper” with its new code parts below …

<?php

// WordPress "codex" PHP comments precede

$ioff=0;
$imfnameafterdomainsep="random_background_fadeinout.jpg";
$ptitle="Random Background Webpage Fade Tutorial (10 May 2022)";
$bonl="";
$tonl="";
$mcs=[];
$mcss=[];
$bigmc="";


function selectNewBlogPostingTutorialPicture() {
global $imfnameafterdomainsep, $ptitle, $bonl, $tonl, $mcs, $mcss;
$forcedhuh=-1;
$fhuhs=[];
$mc="";
$mcs=[];
$mcss=[];
$isregexp=false;
$numf=[];

$foundipath="";
$icontis=file_get_contents(explode('ITblog' . DIRECTORY_SEPARATOR, dirname(__FILE__) . DIRECTORY_SEPARATOR)[0] . "index.html");
$ideaarray=explode('&pp=&pn=&title=', $icontis);
if (sizeof($ideaarray) <= 1) {
$imfnameafterdomainsep="random_background_fadeinout.jpg";
$ptitle="Random Background Webpage Fade Tutorial (10 May 2022)";
} else if (sizeof($ideaarray) > 1) {
if (isset($_GET['mustcontain'])) {
if (strlen(trim($_GET['mustcontain'])) > 0) {
$mc=str_replace('@#$','',str_replace(' ','+ ',str_replace(' @#$','++',str_replace(' ','++ ',(str_replace('+', ' ', urldecode($_GET['mustcontain']))) . '@#$'))));
$bigmc=str_replace(";","*",str_replace(",","*",$mc));
if (@preg_match($mc, null) === false) { // not regexp
if (strpos($mc, ",") !== false || strpos($mc, ";") !== false) {
if (strpos($mc, ';') !== false) {
$mcss=explode(";", $mc);
$mc=$mcss[0];
} else {
$mcs=explode(",", $mc);
$mc=$mcs[0];
}
}
$mc=strtolower($mc);
$numf=explode($mc, strtolower(explode($ideaarray[0], $icontis)[1]));
} else { // regexp
$isregexp=true;
$numf[0]=$icontis;
}
if (sizeof($numf) > 1 || $isregexp) { // && sizeof($numf) < 10) {
$jmc=(-1 + sizeof(explode('&pp=&pn=&title=', $numf[0])));
for ($imc=$jmc; $imc<sizeof($ideaarray); $imc++) {
if ($oktoloop) {
if (!$isregexp) {
$allok=true;
if (sizeof($mcs) > 1) {
for ($sdf=1; $sdf<sizeof($mcs); $sdf++) {
if (strpos(str_replace('_',' ',explode('"',explode("'",explode(">", $ideaarray[$imc])[0])[0])[0]), $mcs[$sdf]) === false) {
$allok=false;
}
}
} elseif (sizeof($mcss) > 1) {
for ($sdf=1; $sdf<sizeof($mcss); $sdf++) {
if ($allok) {
if (strpos(str_replace('_',' ',explode('"',explode("'",explode(">", $ideaarray[$imc])[0])[0])[0]), $mcss[$sdf]) === false) {
$allok=false;
} else {
if (strpos(strtolower($ideaarray[$imc]), strtolower($mc)) !== false) {
if (strpos(strtolower($ideaarray[$imc]), strtolower($mc)) > strpos(str_replace('_',' ',explode('"',explode("'",explode(">", $ideaarray[$imc])[0])[0])[0]), $mcss[$sdf])) {
$allok=false;
} else if ($sdk > 1) {
if (strpos(str_replace('_',' ',explode('"',explode("'",explode(">", $ideaarray[$imc])[0])[0])[0]), $mcss[$sdf]) > strpos(str_replace('_',' ',explode('"',explode("'",explode(">", $ideaarray[$imc])[0])[0])[0]), $mcss[-1 + $sdf])) {
$allok=false;
}
}
} else {
$allok=false;
}
}
}
}
}
if ($allok) {
if (strpos(strtolower($ideaarray[$imc]), strtolower($mc)) !== false && $allok) {
$hd=rand(2, (-1 + sizeof($ideaarray)));
$hdd=1;
if (sizeof($numf) > 20) {
$hdd=rand(2, (-1 + sizeof($ideaarray)));
}
if (($hdd % 2) == 1) {
if (($hd % 2) == 0) {
array_push($fhuhs, $imc);
} else {
array_unshift($fhuhs, $imc);
}
}
}
}
} else if ($isregexp) {
//$arrsp=preg_split($mc, explode(">", $ideaarray[$imc])[0]);
//$arrsp=preg_split('/Javascript/', str_replace('_',' ',explode(">", $ideaarray[$imc])[0]));
//if (!$arrsp) { $arrsp=[]; }
$mystr=str_replace('_',' ',explode('"',explode("'",explode(">", $ideaarray[$imc])[0])[0])[0]);
if (preg_match($mc, $mystr)) { // !== false) {
//if (sizeof($arrsp) > 1) {
if ($isregexp) { file_put_contents('iregtwo.found', '/Javascript/' . $mc . ' ... 1 ... ' . explode('"',explode("'",explode(">", $ideaarray[$imc])[0])[0])[0]); }
$hd=rand(2, (-1 + sizeof($ideaarray)));
$hdd=1;
if (sizeof($numf) > 20) {
$hdd=rand(2, (-1 + sizeof($ideaarray)));
}
if (($hdd % 2) == 1) {
if (($hd % 2) == 0) {
array_push($fhuhs, $imc);
} else {
array_unshift($fhuhs, $imc);
}
}
} else {
file_put_contents('jregtwo.found', '/Javascript/' . $mc . ' ... ' . ' ... ' . explode('"',explode("'",explode(">", $ideaarray[$imc])[0])[0])[0]);
}
}
if (sizeof($fhuhs) == 20) { break; }
}
}
}
if (sizeof($fhuhs) > 0) {
$forcedhuh=$fhuhs[0];
if (sizeof($fhuhs) == 1 && $imc > (sizeof($ideaarray) / 2)) {
$oktoloop=false; //break;
}
}
}
}

if (trim($mc) != "" && $forcedhuh == -1 && sizeof($numf) <= 1 && sizeof($fhuhs) == 0) {
$imfnameafterdomainsep="random_background_fadeinout.jpg";
$ptitle="Random Background Webpage Fade Tutorial (10 May 2022)";
} else {
while ($foundipath == "") {
if ($forcedhuh >= 1) {
$huhrand=$forcedhuh;
array_shift($fhuhs);
if (sizeof($fhuhs) > 0) {
$forcedhuh=$fhuhs[0];
} else {
$forcedhuh=-1;
$foundipath=" ";
}
} else {
$huhrand=rand(2, (-1 + sizeof($ideaarray)));
}
$ptis="";
if (strpos(explode('>', explode('"', $ideaarray[$huhrand])[0])[0], "Tutorial") !== false) {
$ptis=str_replace('_',' ',explode('Tutorial', explode('>', explode('"', $ideaarray[$huhrand])[0])[0])[0] . "Tutorial");
}
$tutdate="";
if (strpos($ideaarray[-1 + $huhrand], 'MyNew-') !== false) {
$tdt=substr(explode('MyNew-', $ideaarray[-1 + $huhrand])[-1 + sizeof(explode('MyNew-', $ideaarray[-1 + $huhrand]))],0,8);
$tutdate=' (' . substr($tdt,6,2) . ' ' . str_replace("01","January",str_replace("02","February",str_replace("03","March",str_replace("04","April",str_replace("05","May",str_replace("06","June",str_replace("07","July",str_replace("08","August",str_replace("09","September",str_replace("10","October",str_replace("11","November",str_replace("12","December",substr($tdt,4,2))))))))))))) . ' ' . substr($tdt,0,4) . ')';
if (trim($mc) != "") {
if (!$isregexp) {
if (strpos(strtolower($ptis), $mc) === false) { $tutdate=""; }
} else {
if (!preg_match($mc, $ptis)) { $tutdate=""; }
}

}
}
$pnumis=explode('&', explode('?p=', $ideaarray[-1 + $huhrand] )[-1 + sizeof(explode('?p=', $ideaarray[-1 + $huhrand] ))])[0];
$thisbpc=file_get_contents('//www.rjmprogramming.com.au/ITblog/?p=' . $pnumis);
if (strpos($thisbpc, ' class="wp-caption') !== false) {
$thatbpc=explode('"', explode(' src="', explode(' class="wp-caption', $thisbpc)[1])[1])[0]; // www.rjmprogramming.com.au/PHP/emoji_animation_css_block.jpg
if (strpos($thatbpc, "rjmprogramming.com.au/") !== false) {
if (strpos($thatbpc, ".jp") !== false || strpos($thatbpc, ".png") !== false || strpos($thatbpc, ".gif") !== false) {
if ($tutdate != "" && strpos($ptis, " Tutorial") !== false && strpos($ptis, " (") === false && strpos($ptis, "%") === false && strpos($ptis, "&") === false && file_exists(explode('ITblog' . DIRECTORY_SEPARATOR, dirname(__FILE__) . DIRECTORY_SEPARATOR)[0] . explode("rjmprogramming.com.au/", $thatbpc)[1] )) {
$ptis.=$tutdate;
$foundipath=explode('ITblog' . DIRECTORY_SEPARATOR, dirname(__FILE__) . DIRECTORY_SEPARATOR)[0] . explode("rjmprogramming.com.au/", $thatbpc)[1];
if ($foundipath != "") {
$imfnameafterdomainsep=explode("rjmprogramming.com.au/", $thatbpc)[1];
$ptitle=$ptis;
$onlme="";
if (strpos(('' . $_SERVER['QUERY_STRING']), 'andclickme=') !== false) {
if ($mc != "") {
$onlme=' onload=" window.open(' . "'//www.rjmprogramming.com.au/ITblog/?p=" . $pnumis . "','_blank','top=200,left=0,height=700,width=900'); " . '" ';
if ($isregexp) {
$zis=0;
$zzis=strlen($mc);
if (strpos(($mc . '~'), '/~') !== false) { $zzis--; }
if (strpos(('~' . $mc), '~/') !== false) { $zzis--; $zis=1; }
$onlme=str_replace('; "', '; window.open(' . "'//www.rjmprogramming.com.au/itnewblog/match/mapper.php?pm=" . urlencode(substr($mc,$zis,$zzis)) . "','_blank','top=250,left=1200,height=650,width=900'); " . '"', $onlme);
} else {
$onlme=str_replace('; "', '; window.open(' . "'//www.rjmprogramming.com.au/itnewblog/match/mapper.php?pm=" . urlencode(explode('*',$bigmc)[0]) . "','_blank','top=250,left=1200,height=650,width=900'); " . '"', $onlme);
}

} else {
$onlme=' onload=" window.open(' . "'//www.rjmprogramming.com.au/ITblog/?p=" . $pnumis . "','_blank','top=200,left=100,height=700,width=900'); " . '" ';
}
}
$bonl=$onlme . ' title=' . "'" . 'Click opens relevant blog post called ' . $ptis . ' and double click opens relevant blog post action item' . "'" . ' onclick=" window.open(' . "'//www.rjmprogramming.com.au/ITblog/?p=" . $pnumis . "','_blank'); " . '" ondblclick=" window.open(' . "'//www.rjmprogramming.com.au/slideshow.html?title=" . str_replace(urlencode('|'), '%20', urlencode(str_replace(' ','|',$ptis))) . "','_blank'); " . '"';
$tonl='<head><title>' . $ptis . '</title></head>';
}
}
}
}
}
}
}
}
}


function createScaledImage($newWidth,$newHeight,$path,$datauri) { // thanks to https://stackoverflow.com/questions/16774521/scale-image-using-php-and-maintaining-aspect-ratio

$image_name=explode(DIRECTORY_SEPARATOR, $path)[-1 + sizeof(explode(DIRECTORY_SEPARATOR, $path))];


$mime = getimagesize($path);

if ($mime['mime']=='image/png') {
$src_img = imagecreatefrompng($path);
}
if ($mime['mime']=='image/jpg' || $mime['mime']=='image/jpeg' || $mime['mime']=='image/pjpeg') {
$src_img = imagecreatefromjpeg($path);
}
if ($mime['mime']=='image/gif') {
$src_img = imagecreatefromgif($path);
}

$old_x = imageSX($src_img);
$old_y = imageSY($src_img);

if ($old_x > $old_y) {
$thumb_w = $newWidth;
$thumb_h = $old_y/$old_x*$newWidth;
}

if ($old_x < $old_y) {
$thumb_w = $old_x/$old_y*$newHeight;
$thumb_h = $newHeight;
}

if ($old_x == $old_y) {
$thumb_w = $newWidth;
$thumb_h = $newHeight;
}

$dst_img = imagecreatetruecolor($thumb_w,$thumb_h);

imagecopyresampled($dst_img,$src_img,0,0,0,0,$thumb_w,$thumb_h,$old_x,$old_y);

// New save location
$new_thumb_loc = '/tmp/' . $image_name;

if (!$datauri) {
if($mime['mime']=='image/png') {
header('Content-Type: image/png');
imagepng($dst_img); //,$new_thumb_loc,8);
if (file_exists($new_thumb_loc)) {
unlink($new_thumb_loc);
}
imagedestroy($dst_img);
imagedestroy($src_img);
exit;
} else if ($mime['mime']=='image/jpg' || $mime['mime']=='image/jpeg' || $mime['mime']=='image/pjpeg') {
header('Content-Type: image/jpeg');
imagejpeg($dst_img); //,$new_thumb_loc,80);
if (file_exists($new_thumb_loc)) {
unlink($new_thumb_loc);
}
imagedestroy($dst_img);
imagedestroy($src_img);
exit;
} else if ($mime['mime']=='image/gif') {
header('Content-Type: image/gif');
imagejpeg($dst_img); //,$new_thumb_loc,80);
if (file_exists($new_thumb_loc)) {
unlink($new_thumb_loc);
}
imagedestroy($dst_img);
imagedestroy($src_img);
exit;
}
exit;
}

$result="";
if ($mime['mime']=='image/png') {
imagepng($dst_img,$new_thumb_loc,8);
$result = file_get_contents($new_thumb_loc);
}
if ($mime['mime']=='image/jpg' || $mime['mime']=='image/jpeg' || $mime['mime']=='image/pjpeg') {
imagejpeg($dst_img,$new_thumb_loc,80);
$result = file_get_contents($new_thumb_loc);
}
if ($mime['mime']=='image/gif') {
imagegif($dst_img,$new_thumb_loc);
$result = file_get_contents($new_thumb_loc);
}

imagedestroy($dst_img);
imagedestroy($src_img);


if (file_exists($new_thumb_loc)) {
unlink($new_thumb_loc);
}

return $result;
}

?>

… called within “new if section URL analysis code”

<?php

$uparts=explode("/", $_SERVER['REQUEST_URI']);
if (sizeof($uparts) >= 2) {
if (trim(explode('#',explode('?',$uparts[-1 + sizeof($uparts)])[0])[0]) == '') {
$ioff=-1;
}
if (1 == 1 || ('' . $_SERVER['QUERY_STRING']) == '') {
$usz=sizeof($uparts);
if (str_replace('?' . $_SERVER['QUERY_STRING'],'',trim($uparts[-1 + sizeof($uparts)])) == '') { $usz--; }
if ($usz == 3 && strpos($uparts[-1 + $usz], "%20") !== false || strpos($uparts[-1 + $usz], "+") !== false) { // fix /ITblog/Linux%20mailx%20Primer%20Tutorial/ 18/1/2022 RM
$oky=true;
if (substr(trim($uparts[$ioff - 1 + sizeof($uparts)]) . ' ',0,1) >= '0' && substr(trim($uparts[$ioff - 1 + sizeof($uparts)]) . ' ',0,1) <= '9') {
if (substr(trim($uparts[$ioff - 2 + sizeof($uparts)]) . ' ',0,1) >= '0' && substr(trim($uparts[$ioff - 2 + sizeof($uparts)]) . ' ',0,1) <= '9') {
$oky=false;
}
}
if ($oky) {
if (('' . $_SERVER['QUERY_STRING']) == '') {
header('Location: ' . str_replace('~``','/ITblog/',str_replace('/','',str_replace('/ITBLOG/','~``',str_replace('/itblog/','~``',str_replace('/ITblog/','~``',str_replace('--','-',str_replace('---','-',str_replace('+','-',str_replace('%20','-',$_SERVER['REQUEST_URI']))))))))));
} else {
header('Location: ' . explode('?',str_replace('~``','/ITblog/',str_replace('/','',str_replace('/ITBLOG/','~``',str_replace('/itblog/','~``',str_replace('/ITblog/','~``',str_replace('--','-',str_replace('---','-',str_replace('+','-',str_replace('%20','-',$_SERVER['REQUEST_URI']))))))))))[0] . '?' . $_SERVER['QUERY_STRING']);
}
exit;
}
}
}
if (str_replace("category","cat",strtolower($uparts[-2 + sizeof($uparts)])) == "cat" || strtolower($uparts[-2 + sizeof($uparts)]) == "category") {
$catsare=["","Not Categorised","Ajax","Android","Animation","Anything You Like","Code::Blocks","Colour Matching","Data Integration","Database","Delphi","Eclipse","eLearning","ESL","Event-Driven Programming","Games","GIMP","GUI","Hradware","Installers","iOS","Land Surveying","Moodle","Music Poll","NetBeans","Networking","News","ontop","OOP","Operating System","Photography","Projects","Signage Poll","Software","SpectroPhotometer","Tiki Wiki","Trips","Tutorials","Uncategorized","Visual Studio","Xcode"];
for ($ibh=1; $ibh<sizeof($catsare); $ibh++) {
if (explode("&",strtolower($uparts[-1 + sizeof($uparts)]))[0] == strtolower($catsare[$ibh])) {
if (strtolower($catsare[$ibh]) == "ontop") {
header('Location: https://www.rjmprogramming.com.au/ITblog/category/' . str_replace(" ","-",explode("&",strtolower($uparts[-1 + sizeof($uparts)]))[0])) . '#' . $ibh;
} else {
header('Location: https://www.rjmprogramming.com.au/ITblog/category/' . str_replace(" ","-",explode("&",strtolower($uparts[-1 + sizeof($uparts)]))[0])) . '#' . $ibh;
}
} else if (explode("&",strtolower($uparts[-1 + sizeof($uparts)]))[0] == ('' . $ibh)) {
if (strtolower($catsare[$ibh]) == "ontop") {
header('Location: https://www.rjmprogramming.com.au/ITblog/?cat=' . str_replace(" ","-",explode("&",strtolower($uparts[-1 + sizeof($uparts)]))[0])) . '#' . $ibh;
} else {
header('Location: https://www.rjmprogramming.com.au/ITblog/?cat=' . str_replace(" ","-",explode("&",strtolower($uparts[-1 + sizeof($uparts)]))[0])) . '#' . $ibh;
}
}
}
} else if (substr(trim($uparts[$ioff - 1 + sizeof($uparts)]) . ' ',0,1) >= '0' && substr(trim($uparts[$ioff - 1 + sizeof($uparts)]) . ' ',0,1) <= '9') {
if (substr(trim($uparts[$ioff - 2 + sizeof($uparts)]) . ' ',0,1) >= '0' && substr(trim($uparts[$ioff - 2 + sizeof($uparts)]) . ' ',0,1) <= '9') {
$uwidth=trim($uparts[$ioff - 2 + sizeof($uparts)]);
$uheight=trim(explode('#',explode('?',$uparts[$ioff - 1 + sizeof($uparts)])[0])[0]);
$imfnameafterdomainsep="random_background_fadeinout.jpg";
$ptitle="Random Background Webpage Fade Tutorial";
selectNewBlogPostingTutorialPicture();
$postingiurl=explode('ITblog' . DIRECTORY_SEPARATOR, dirname(__FILE__) . DIRECTORY_SEPARATOR)[0] . $imfnameafterdomainsep;
list($iwidth, $iheight, $itype, $iattr) = getimagesize($postingiurl);
$amime = getimagesize($postingiurl);
if ($ioff == 0) {
//header('Content-Type: image/jpeg');
echo "<html>" . $tonl . "<body" . $bonl . "><pre>data:image/jpeg;base64," . base64_encode(createScaledImage($uwidth,$uheight,$postingiurl,true)) . "#" . str_replace('+','%20',urlencode($ptitle)) . "</pre></body></html>";
} else if (1 == 2) {
//header('Content-Type: image/jpeg');
echo '<img src="' . "data:image/jpeg;base64," . base64_encode(file_get_contents($postingiurl)) . "#" . str_replace('+','%20',urlencode($ptitle)) . '"></img>';
} else {
createScaledImage($uwidth,$uheight,$postingiurl,false); //imagecreatefromjpeg($postingiurl);
}
exit;
}
}
}

get_header(); ?>

// more WordPress "codex" PHP code follows

?>


Previous relevant Image Pair Fitting into a Given Dimension Sources Tutorial is shown below.

Image Pair Fitting into a Given Dimension Sources Tutorial

Image Pair Fitting into a Given Dimension Sources Tutorial

Thinking “layers of functionality” here, we think that progress onto yesterday’s Image Pair Fitting into a Given Dimension Primer Tutorial would go …

  • as well as the wonderful Lorem Picsum resource for beautiful images “source” … we might add …
  • new RJM Programming WordPress Blog (that you are probably reading from, now) tutorial picture “source” of images

… the functionality for which we have been trying to envisage for many years, and seeing the excellent Lorem Picsum arrangements being a catalyst, to give it a go.

Kludgy feeling or not, we are happy to be linking into the “last talked about” WordPress Blog Search Within Search Posting Progress Context Tutorial WordPress “URL not found” 404.php code methodologies here, as a great “intervention point”. We often find the biggest joy in web application code modifications is to identify “code lazy (for us)” “intervention points” that mean most of the hard part of the job is done for you, by others (here, that being the great WordPress TwentyTen theme “codex” PHP code helped out by Apache web server .htaccess permalink configurations) before you add your own “situation specific” interventional code.

And so, once at 404.php code, we add new global variables and functions …

<?php

// WordPress "codex" PHP comments precede

$ioff=0;
$imfnameafterdomainsep="random_background_fadeinout.jpg";
$ptitle="Random Background Webpage Fade Tutorial";
$bonl="";
$tonl="";

function selectNewBlogPostingTutorialPicture() {
global $imfnameafterdomainsep, $ptitle, $bonl, $tonl;
$foundipath="";
$icontis=file_get_contents(explode('ITblog' . DIRECTORY_SEPARATOR, dirname(__FILE__) . DIRECTORY_SEPARATOR)[0] . "index.html");
$ideaarray=explode('&pp=&pn=&title=', $icontis);
if (sizeof($ideaarray) > 1) {
while ($foundipath == "") {
$huhrand=rand(2, (-1 + sizeof($ideaarray)));
$ptis="";
if (strpos(explode('>', explode('"', $ideaarray[$huhrand])[0])[0], "Tutorial") !== false) {
$ptis=str_replace('_',' ',explode('Tutorial', explode('>', explode('"', $ideaarray[$huhrand])[0])[0])[0] . "Tutorial");
}
$tutdate="";
if (strpos($ideaarray[-1 + $huhrand], 'MyNew-') !== false) {
$tdt=substr(explode('MyNew-', $ideaarray[-1 + $huhrand])[-1 + sizeof(explode('MyNew-', $ideaarray[-1 + $huhrand]))],0,8);
$tutdate=' (' . substr($tdt,6,2) . ' ' . str_replace("01","January",str_replace("02","February",str_replace("03","March",str_replace("04","April",str_replace("05","May",str_replace("06","June",str_replace("07","July",str_replace("08","August",str_replace("09","September",str_replace("10","October",str_replace("11","November",str_replace("12","December",substr($tdt,4,2))))))))))))) . ' ' . substr($tdt,0,4) . ')';
}
$pnumis=explode('&', explode('?p=', $ideaarray[-1 + $huhrand] )[-1 + sizeof(explode('?p=', $ideaarray[-1 + $huhrand] ))])[0];
$thisbpc=file_get_contents('HTTP://www.rjmprogramming.com.au/ITblog/?p=' . $pnumis);
if (strpos($thisbpc, ' class="wp-caption') !== false) {
$thatbpc=explode('"', explode(' src="', explode(' class="wp-caption', $thisbpc)[1])[1])[0]; // www.rjmprogramming.com.au/PHP/emoji_animation_css_block.jpg
if (strpos($thatbpc, "rjmprogramming.com.au/") !== false) {
if (strpos($thatbpc, ".jp") !== false || strpos($thatbpc, ".png") !== false || strpos($thatbpc, ".gif") !== false) {
if ($tutdate != "" && strpos($ptis, " Tutorial") !== false && strpos($ptis, " (") === false && strpos($ptis, "%") === false && strpos($ptis, "&") === false && file_exists(explode('ITblog' . DIRECTORY_SEPARATOR, dirname(__FILE__) . DIRECTORY_SEPARATOR)[0] . explode("rjmprogramming.com.au/", $thatbpc)[1] )) {
$ptis.=$tutdate;
$foundipath=explode('ITblog' . DIRECTORY_SEPARATOR, dirname(__FILE__) . DIRECTORY_SEPARATOR)[0] . explode("rjmprogramming.com.au/", $thatbpc)[1];
if ($foundipath != "") {
$imfnameafterdomainsep=explode("rjmprogramming.com.au/", $thatbpc)[1];
$ptitle=$ptis;
$onlme="";
if (strpos(('' . $_SERVER['QUERY_STRING']), 'andclickme=') !== false) {
$onlme=' onload=" window.open(' . "'//www.rjmprogramming.com.au/ITblog/?p=" . $pnumis . "','_blank','top=200,left=100,height=700,width=900'); " . '" ';
}
$bonl=$onlme . ' title=' . "'" . 'Click opens relevant blog post called ' . $ptis . ' and double click opens relevant blog post action item' . "'" . ' onclick=" window.open(' . "'//www.rjmprogramming.com.au/ITblog/?p=" . $pnumis . "','_blank'); " . '" ondblclick=" window.open(' . "'//www.rjmprogramming.com.au/slideshow.html?title=" . str_replace(urlencode('|'), '%20', urlencode(str_replace(' ','|',$ptis))) . "','_blank'); " . '"';
$tonl='<head><title>' . $ptis . '</title></head>';
}
}
}
}
}
}
}
}


function createScaledImage($newWidth,$newHeight,$path,$datauri) { // thanks to https://stackoverflow.com/questions/16774521/scale-image-using-php-and-maintaining-aspect-ratio

$image_name=explode(DIRECTORY_SEPARATOR, $path)[-1 + sizeof(explode(DIRECTORY_SEPARATOR, $path))];


$mime = getimagesize($path);

if ($mime['mime']=='image/png') {
$src_img = imagecreatefrompng($path);
}
if ($mime['mime']=='image/jpg' || $mime['mime']=='image/jpeg' || $mime['mime']=='image/pjpeg') {
$src_img = imagecreatefromjpeg($path);
}
if ($mime['mime']=='image/gif') {
$src_img = imagecreatefromgif($path);
}

$old_x = imageSX($src_img);
$old_y = imageSY($src_img);

if ($old_x > $old_y) {
$thumb_w = $newWidth;
$thumb_h = $old_y/$old_x*$newWidth;
}

if ($old_x < $old_y) {
$thumb_w = $old_x/$old_y*$newHeight;
$thumb_h = $newHeight;
}

if ($old_x == $old_y) {
$thumb_w = $newWidth;
$thumb_h = $newHeight;
}

$dst_img = imagecreatetruecolor($thumb_w,$thumb_h);

imagecopyresampled($dst_img,$src_img,0,0,0,0,$thumb_w,$thumb_h,$old_x,$old_y);

// New save location
$new_thumb_loc = '/tmp/' . $image_name;

if (!$datauri) {
if($mime['mime']=='image/png') {
header('Content-Type: image/png');
imagepng($dst_img); //,$new_thumb_loc,8);
if (file_exists($new_thumb_loc)) {
unlink($new_thumb_loc);
}
imagedestroy($dst_img);
imagedestroy($src_img);
exit;
} else if ($mime['mime']=='image/jpg' || $mime['mime']=='image/jpeg' || $mime['mime']=='image/pjpeg') {
header('Content-Type: image/jpeg');
imagejpeg($dst_img); //,$new_thumb_loc,80);
if (file_exists($new_thumb_loc)) {
unlink($new_thumb_loc);
}
imagedestroy($dst_img);
imagedestroy($src_img);
exit;
} else if ($mime['mime']=='image/gif') {
header('Content-Type: image/gif');
imagejpeg($dst_img); //,$new_thumb_loc,80);
if (file_exists($new_thumb_loc)) {
unlink($new_thumb_loc);
}
imagedestroy($dst_img);
imagedestroy($src_img);
exit;
}
exit;
}

$result="";
if ($mime['mime']=='image/png') {
imagepng($dst_img,$new_thumb_loc,8);
$result = file_get_contents($new_thumb_loc);
}
if ($mime['mime']=='image/jpg' || $mime['mime']=='image/jpeg' || $mime['mime']=='image/pjpeg') {
imagejpeg($dst_img,$new_thumb_loc,80);
$result = file_get_contents($new_thumb_loc);
}
if ($mime['mime']=='image/gif') {
imagegif($dst_img,$new_thumb_loc);
$result = file_get_contents($new_thumb_loc);
}

imagedestroy($dst_img);
imagedestroy($src_img);


if (file_exists($new_thumb_loc)) {
unlink($new_thumb_loc);
}

return $result;
}

?>

… called within “new if section URL analysis code”

<?php

$uparts=explode("/", $_SERVER['REQUEST_URI']);
if (sizeof($uparts) >= 2) {
if (trim(explode('#',explode('?',$uparts[-1 + sizeof($uparts)])[0])[0]) == '') {
$ioff=-1;
}

if (1 == 1 || ('' . $_SERVER['QUERY_STRING']) == '') {
$usz=sizeof($uparts);
if (str_replace('?' . $_SERVER['QUERY_STRING'],'',trim($uparts[-1 + sizeof($uparts)])) == '') { $usz--; }
if ($usz == 3 && strpos($uparts[-1 + $usz], "%20") !== false || strpos($uparts[-1 + $usz], "+") !== false) { // fix /ITblog/Linux%20mailx%20Primer%20Tutorial/ 18/1/2022 RM
if (('' . $_SERVER['QUERY_STRING']) == '') {
header('Location: ' . str_replace('~``','/ITblog/',str_replace('/','',str_replace('/ITBLOG/','~``',str_replace('/itblog/','~``',str_replace('/ITblog/','~``',str_replace('--','-',str_replace('---','-',str_replace('+','-',str_replace('%20','-',$_SERVER['REQUEST_URI']))))))))));
} else {
header('Location: ' . explode('?',str_replace('~``','/ITblog/',str_replace('/','',str_replace('/ITBLOG/','~``',str_replace('/itblog/','~``',str_replace('/ITblog/','~``',str_replace('--','-',str_replace('---','-',str_replace('+','-',str_replace('%20','-',$_SERVER['REQUEST_URI']))))))))))[0] . '?' . $_SERVER['QUERY_STRING']);
}
exit;
}
}
if (str_replace("category","cat",strtolower($uparts[-2 + sizeof($uparts)])) == "cat" || strtolower($uparts[-2 + sizeof($uparts)]) == "category") {
$catsare=["","Not Categorised","Ajax","Android","Animation","Anything You Like","Code::Blocks","Colour Matching","Data Integration","Database","Delphi","Eclipse","eLearning","ESL","Event-Driven Programming","Games","GIMP","GUI","Hradware","Installers","iOS","Land Surveying","Moodle","Music Poll","NetBeans","Networking","News","ontop","OOP","Operating System","Photography","Projects","Signage Poll","Software","SpectroPhotometer","Tiki Wiki","Trips","Tutorials","Uncategorized","Visual Studio","Xcode"];
for ($ibh=1; $ibh<sizeof($catsare); $ibh++) {
if (explode("&",strtolower($uparts[-1 + sizeof($uparts)]))[0] == strtolower($catsare[$ibh])) {
if (strtolower($catsare[$ibh]) == "ontop") {
header('Location: https://www.rjmprogramming.com.au/ITblog/category/' . str_replace(" ","-",explode("&",strtolower($uparts[-1 + sizeof($uparts)]))[0])) . '#' . $ibh;
} else {
header('Location: https://www.rjmprogramming.com.au/ITblog/category/' . str_replace(" ","-",explode("&",strtolower($uparts[-1 + sizeof($uparts)]))[0])) . '#' . $ibh;
}
} else if (explode("&",strtolower($uparts[-1 + sizeof($uparts)]))[0] == ('' . $ibh)) {
if (strtolower($catsare[$ibh]) == "ontop") {
header('Location: https://www.rjmprogramming.com.au/ITblog/?cat=' . str_replace(" ","-",explode("&",strtolower($uparts[-1 + sizeof($uparts)]))[0])) . '#' . $ibh;
} else {
header('Location: https://www.rjmprogramming.com.au/ITblog/?cat=' . str_replace(" ","-",explode("&",strtolower($uparts[-1 + sizeof($uparts)]))[0])) . '#' . $ibh;
}
}
}
} else if (substr(trim($uparts[$ioff - 1 + sizeof($uparts)]) . ' ',0,1) >= '0' && substr(trim($uparts[$ioff - 1 + sizeof($uparts)]) . ' ',0,1) <= '9') {
if (substr(trim($uparts[$ioff - 2 + sizeof($uparts)]) . ' ',0,1) >= '0' && substr(trim($uparts[$ioff - 2 + sizeof($uparts)]) . ' ',0,1) <= '9') {
$uwidth=trim($uparts[$ioff - 2 + sizeof($uparts)]);
$uheight=trim(explode('#',explode('?',$uparts[$ioff - 1 + sizeof($uparts)])[0])[0]);
$imfnameafterdomainsep="random_background_fadeinout.jpg";
$ptitle="Random Background Webpage Fade Tutorial";
selectNewBlogPostingTutorialPicture();
$postingiurl=explode('ITblog' . DIRECTORY_SEPARATOR, dirname(__FILE__) . DIRECTORY_SEPARATOR)[0] . $imfnameafterdomainsep;
list($iwidth, $iheight, $itype, $iattr) = getimagesize($postingiurl);
$amime = getimagesize($postingiurl);
if ($ioff == 0) {
echo "<html>" . $tonl . "<body" . $bonl . "><pre>data:image/jpeg;base64," . base64_encode(createScaledImage($uwidth,$uheight,$postingiurl,true)) . "#" . str_replace('+','%20',urlencode($ptitle)) . "</pre></body></html>";
} else if (1 == 2) {
echo '<img src="' . "data:image/jpeg;base64," . base64_encode(file_get_contents($postingiurl)) . "#" . str_replace('+','%20',urlencode($ptitle)) . '"></img>';
} else {
createScaledImage($uwidth,$uheight,$postingiurl,false); //imagecreatefromjpeg($postingiurl);
}
exit;
}
}
}


get_header(); ?>

// more WordPress "codex" PHP code follows

?>

… that amount to changes which enable two types of newly functional URLs that, without the changes, used to result in a WordPress webpage explaining that the URL could not be found …

  1. a URL such as https://www.rjmprogramming.com.au/ITblog/537/500 will pick a random RJM Programming Blog tutorial picture and show …

    [image data URI of tutorial picture]#[blog posting title]

    … along with the happy discovery along the way that the “#[blog posting title]” can be tagged onto a base64 data URI and still successfully display the image
  2. whereas a URL such as https://www.rjmprogramming.com.au/ITblog/537/500/ will pick a random RJM Programming Blog tutorial picture and show it

… the combination allowing our changed proof of concept CSS (styling) “object-fit” experimenting web application to be now allowing for two sources of image data which the user can select between, themselves, with the RJM Programming WordPress Blog images also containing clickable links back to the WordPress Blog post of relevance. You can also try this here.

Stop Press

And then there is some optional filtering of RJM Programming blog image topic, as we make happen with our changed proof of concept CSS (styling) “object-fit” experimenting web application.


Previous relevant Image Pair Fitting into a Given Dimension Primer Tutorial is shown below.

Image Pair Fitting into a Given Dimension Primer Tutorial

Image Pair Fitting into a Given Dimension Primer Tutorial

One of the most “catered for” part of webpage design involves the display of images. Our recent “stumbling upon” …

  • the excellent Lorem Picsum resource for beautiful images suiting a given width x height … had us looking around for an interesting image related theme to “tutorialize” and “stumbled upon” …
  • the excellent CSS object-fit Property explanation of CSS “object-fit” property …

… facilitating the interest in the scenario …

  • you are presented with “webpage real estate” of a given width x height … into which …
  • you want to display two images side by side …

… and in this scenario the use of “object-fit” property values …

Here is where the object-fit property comes in. The object-fit property can take one of the following values:

fill – This is default. The image is resized to fill the given dimension. If necessary, the image will be stretched or squished to fit
contain – The image keeps its aspect ratio, but is resized to fit within the given dimension
cover – The image keeps its aspect ratio and fills the given dimension. The image will be clipped to fit
none – The image is not resized
scale-down – the image is scaled down to the smallest version of none or contain

… creates interesting variety in how you can configure this scenario depending on your (constraint) interest in …

  • you are constrained by fact you must see all the image’s content in original aspect ratio … think … contain or scale-down
  • you are constrained by fact you must see all the image’s content but not necessarily with original aspect ratio … think … fill or contain or scale-down
  • you are constrained by fact that your “webpage real estate” of the given width x height must be filled (by imagery) … think … fill or cover (or (quite often, but not always) none)
  • you must keep original image dimensions but clipping okay … think … none
  • you must keep original aspect ratio of images but clipping okay … think … contain or cover or none or scale-down

… and then there is …

What happens when you resize your webpage window?

Feel free to try our proof of concept CSS (styling) “object-fit” experimenting web application

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


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


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


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

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

Keyboard Based Cursor Image Blog Source Link Tutorial

Keyboard Based Cursor Image Blog Source Link Tutorial

Keyboard Based Cursor Image Blog Source Link Tutorial

Yesterday’s Keyboard Based Cursor Image Source Tutorial established …

  • on top of the default Lorem Picsum image source … yesterday …
  • a purely image based additional source to images from the RJM Programming Blog (you are reading) and its tutorial pictures

… but, in addition, much more satisfactory would be to improve on a purely image based piece of functionality with, as of today, an image linked to a WordPress Blog Posting based additional source to images from the RJM Programming Blog piece of functionality.

The work for this proceeds on two levels …

  1. at the RJM Programming WordPress Blog codex TwentyTen theme 404.php level new up the top of 404.php PHP “function createScaledImage” …
    <?php

    function createScaledImage($newWidth,$newHeight,$path,$datauri) { // thanks to https://stackoverflow.com/questions/16774521/scale-image-using-php-and-maintaining-aspect-ratio
    global $ptitle;
    $image_name=explode(DIRECTORY_SEPARATOR, $path)[-1 + sizeof(explode(DIRECTORY_SEPARATOR, $path))];


    if (!$datauri) {
    if (isset($_GET['random'])) {
    if (substr(($_GET['random'] . ' '),0,1) == '0') {
    $thist=' ' . time();
    $thistminustwo=substr($thist,0,(strlen($thist) - 2));
    if (!file_exists('./rjmlist.htm')) {
    file_put_contents('./rjmlist.htm', '<body><pre>' . "\n" . $thist . '|' . $_GET['random'] . '|' . $ptitle . "\n</pre></body>");
    } else {
    $sofarc=file_get_contents('./rjmlist.htm');
    $newones=explode($thistminustwo, $sofarc);
    $lastiis=0;
    if (strpos($sofarc, ' ') !== false) { $lastiis=explode('|',explode(' ', $sofarc)[1])[0]; }
    if (sizeof($newones) == 1 && (time() - $lastiis) > 100) {
    file_put_contents('./rjmlist.htm', '<body><pre>' . "\n" . $thist . '|' . $_GET['random'] . '|' . $ptitle . "\n</pre></body>");
    } else {
    $sofarcs=explode('|' . $_GET['random'] . '|', $sofarc);
    if (sizeof($sofarcs) > 1) {
    $sofarpref=' ' . explode(' ', $sofarcs[0])[-1 + sizeof(explode(' ', $sofarcs[0]))] . '|' . $_GET['random'] . '|' . explode("\n", $sofarcs[1])[0] . "\n";
    $sofarc=str_replace($sofarpref, "", $sofarc);
    }
    file_put_contents('./rjmlist.htm', '<body><pre>' . "\n" . $thist . '|' . $_GET['random'] . '|' . $ptitle . "\n" . str_replace('<body><pre>' . "\n", '', $sofarc));
    }
    }
    }
    }
    }


    // rest of createScaledImage follows ...
    }

    ?>
    … as well as …
  2. at the changed body_mouse_deepdive.html‘s “parent” single background image web application (or, for example, “parent” eight background RJM Programming Blog Tutorial Picture image web application) where a user can latch onto the new image source via a first key press is a + plus character level …

    <div id=dif style=display:none;></div>

    … populated via …


    if (thesource != '//picsu' + 'm.photos') {
    themp='/';
    setTimeout(popdif, 20000);
    }

    function popdif() {
    document.getElementById('dif').innerHTML='<iframe style="display:none;" onload="difit(this);" src="../ITblog/rjmlist.htm?rand=' + Math.floor(Math.random() * 198765453) + '"></iframe>';
    }

    function difit(iois) {
    if (iois != null) {
    //alert('src=' + iois.src);
    var aconto = (iois.contentWindow || iois.contentDocument);
    if (aconto != null) {
    if (aconto.document) { aconto = aconto.document; }
    if (aconto.body != null) {
    underliers=aconto.body.innerHTML;
    //alert(underliers);
    var jlsts=justificationlist.replace(/\ \,/g,',').split(',');
    var divt=promptselectpart(true);
    if (divt.trim() == '') { document.getElementById('mydiv').title+='..'; } else {
    for (var ipvb=1; ipvb<=jlsts.length; ipvb++) {
    if (1 == 6) { divt=divt.replace(' ' + ipvb + ' ', ' ' + ipvb + ' (' + jlsts[eval(-1 + ipvb)].trim() + ') '); }
    }
    origtitle=document.getElementById('mydiv').title;
    alttitle=divt + String.fromCharCode(10) + String.fromCharCode(10) + ' You can enter + to access these RJM Programming Blog Posts';
    document.getElementById('mydiv').title=alttitle; //divt + String.fromCharCode(10) + String.fromCharCode(10) + ' You can enter + to access these RJM Programming Blog Posts';
    setInterval(toggletitlef, 10000);
    }
    } //else {
    //alert('huh?');
    //}
    }
    }
    }

    … using …


    var pblurbisc='';

    function promptselectpart(halfway) {
    var isokret=true;
    var myarris=[];
    var prepblurbisc=[];
    //var pblurbisc='';
    var pansisc='';
    var acceptable=false, iaccis=0;
    var ipb=0, jpb=0;
    if (underliers.trim() != '') {
    underliers=underliers.replace(underliers.split(' ')[0] + ' ', '');
    if (document.head.innerHTML.indexOf(' body { ') != -1) {
    myarris=document.head.innerHTML.split(' body { ')[-1 + document.head.innerHTML.split(' body { ').length].split('?random=');
    //alert('Here at ' + 'promptselectpart with ' + document.head.innerHTML.split(' body { ')[-1 + document.head.innerHTML.split(' body { ').length].split('?random=').length + ' ... ' + underliers);
    prepblurbisc=underliers.split('</pre>')[0].split(String.fromCharCode(10));
    if (pblurbisc == '') {
    for (ipb=0; ipb<prepblurbisc.length; ipb++) {
    if (prepblurbisc[ipb].trim() != '') {
    acceptable=false;
    for (iaccis=1; iaccis<myarris.length; iaccis++) {
    if (prepblurbisc[ipb].indexOf('|' + myarris[iaccis].split(')')[0].split('"')[0].split("'")[0].split('&')[0] + '|') != -1) {
    acceptable=true;
    }
    }
    if (acceptable) {
    pblurbisc+=' ' + eval(1 + jpb) + ' ' + prepblurbisc[ipb].split('|')[eval(-1 + prepblurbisc[ipb].split('|').length)] + String.fromCharCode(10);
    jpb++;
    }
    }
    }
    }
    } else {
    myarris=document.head.innerHTML.split('?random=');
    //alert('here at ' + 'promptselectpart with ' + document.head.innerHTML.split('?random=').length + ' ... ' + underliers);
    prepblurbisc=underliers.split('</pre>')[0].split(String.fromCharCode(10));
    if (pblurbisc == '') {
    for (ipb=0; ipb<prepblurbisc.length; ipb++) {
    if (prepblurbisc[ipb].trim() != '') {
    acceptable=false;
    for (iaccis=1; iaccis<myarris.length; iaccis++) {
    if (prepblurbisc[ipb].indexOf('|' + myarris[iaccis].split(')')[0].split('"')[0].split("'")[0].split('&')[0] + '|') != -1) {
    acceptable=true;
    }
    }
    if (acceptable) {
    pblurbisc+=' ' + eval(1 + jpb) + ' ' + prepblurbisc[ipb].split('|')[eval(-1 + prepblurbisc[ipb].split('|').length)] + String.fromCharCode(10);
    jpb++;
    }
    }
    }
    }
    }
    }
    if (halfway) { return pblurbisc; }
    if (pblurbisc != '') {
    var defv='';
    if (pblurbisc.indexOf(' ' + eval(-1 + eval('' + myarris.length)) + ' ') != -1) { defv='' + eval(-1 + eval('' + myarris.length)); }
    pansisc=prompt(pblurbisc + String.fromCharCode(10) + String.fromCharCode(10) + 'Optionally enter left hand number as above for access to a WordPress Blog Posting', defv);
    if (pansisc == null) { pansisc=''; }
    if (pansisc != '') {
    //if (eval('' + pansisc.trim().length) == 1) {
    if (pansisc.trim().replace(/0/g,'').replace(/1/g,'').replace(/2/g,'').replace(/3/g,'').replace(/4/g,'').replace(/5/g,'').replace(/6/g,'').replace(/7/g,'').replace(/8/g,'').replace(/9/g,'') == '') {
    if (pansisc.trim() >= '1' && eval('' + pansisc.trim()) < eval('' + myarris.length)) {
    //alert('found');
    isokret=false;
    window.open('//www.rjmprogramming.com.au/ITblog/' + pblurbisc.split(' ' + pansisc.trim() + ' ')[1].split(' (')[0].toLowerCase().replace("+","").replace("/","").replace(" ","-").replace("/","").replace(" ","-").replace("/","").replace(" ","-").replace("/","").replace(" ","-").replace("/","").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(/---/g,"-").replace(/--/g,"-"), '_blank','top=50,left=50,width=1200,height=900');
    }
    }
    //}
    }
    }
    return isokret;
    }

    // used in code snippets of the ilk ...
    if (evt.keyCode == 43 || evt.keyCode == 187) {
    if (!kpdone) {
    if (themp != '') {
    if (promptselectpart(false)) {
    location.href=document.URL.split('?')[0].split('#')[0] + '?numbi=+' + numbi;
    kpdone=true;
    }
    } else {
    location.href=document.URL.split('?')[0].split('#')[0] + '?numbi=+' + numbi;
    kpdone=true;
    }
    }

… accessed from a RJM Programming WordPress Blog tutorial picture image source URL (eg. HTTP://www.rjmprogramming.com.au/HTMLCSS/body_mouse_deepdive.html?numbi=+9) where the first character entered at the keyboard is (still) “+” plus character. At this scenario, the user may be presented with a list of associated RJM Programming WordPress Blog Postings associated with the background image(s) presented, and a Javascript prompt window numerical answer may help navigate to that number’s associated blog posting.

Stop Press

The 404.php changed in other ways to shore up its other mode of use where it displays a data-url (for the most part). As such we present all the differences in a report below …


191c191
< $onlme=' onload=" window.open(' . "'//www.rjmprogramming.com.au/ITblog/?p=" . $pnumis . "','_blank','top=200,left=0,height=700,width=900'); " . '" ';
---
> $onlme=' onload=" window.open(' . "'//www.rjmprogramming.com.au/ITblog/?p=" . $pnumis . "','_blank','top=200,left=0,height=1200,width=900'); " . '" ';
197c197
< $onlme=str_replace('; "', '; window.open(' . "'//www.rjmprogramming.com.au/itnewblog/match/mapper.php?pm=" . urlencode(substr($mc,$zis,$zzis)) . "','_blank','top=250,left=1200,height=650,width=900'); " . '"', $onlme);
---
> $onlme=str_replace('; "', '; window.open(' . "'//www.rjmprogramming.com.au/itnewblog/match/mapper.php?pm=" . urlencode(substr($mc,$zis,$zzis)) . "','_blank','top=250,left=1200,height=1250,width=900'); " . '"', $onlme);
199c199
< $onlme=str_replace('; "', '; window.open(' . "'//www.rjmprogramming.com.au/itnewblog/match/mapper.php?pm=" . urlencode(explode('*',$bigmc)[0]) . "','_blank','top=250,left=1200,height=650,width=900'); " . '"', $onlme);
---
> $onlme=str_replace('; "', '; window.open(' . "'//www.rjmprogramming.com.au/itnewblog/match/mapper.php?pm=" . urlencode(explode('*',$bigmc)[0]) . "','_blank','top=250,left=1200,height=1250,width=900'); " . '"', $onlme);
202c202
< $onlme=' onload=" window.open(' . "'//www.rjmprogramming.com.au/ITblog/?p=" . $pnumis . "','_blank','top=200,left=100,height=700,width=900'); " . '" ';
---
> $onlme=' onload=" window.open(' . "'//www.rjmprogramming.com.au/ITblog/?p=" . $pnumis . "','_blank','top=200,left=100,height=1200,width=900'); " . '" ';
205c205
< $bonl=$onlme . ' title=' . "'" . 'Click opens relevant blog post called ' . $ptis . ' and double click opens relevant blog post action item' . "'" . ' onclick=" if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { document.getElementById(' . "'" . 'preif' . "'" . ').src=' . "'" . '//www.rjmprogramming.com.au/ITblog/?p=' . $pnumis . "'" . '; document.getElementById(' . "'" . 'preif' . "'" . ').style.display=' . "'" . 'block' . "'" . '; } window.open(' . "'//www.rjmprogramming.com.au/ITblog/?p=" . $pnumis . "','_blank'); " . '" ondblclick=" window.open(' . "'//www.rjmprogramming.com.au/slideshow.html?title=" . str_replace(urlencode('|'), '%20', urlencode(str_replace(' ','|',$ptis))) . "','_blank'); " . '"';
---
> $bonl=$onlme . ' title=' . "'" . 'Click opens relevant blog post called ' . $ptis . ' and double click opens relevant blog post action item' . "'" . ' onmouseover="document.getElementById(' . "'" . 'moimg' . "'" . ').style.display=' . "'" . 'block' . "'" . ';" onclick=" if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { document.getElementById(' . "'" . 'preif' . "'" . ').src=' . "'" . '//www.rjmprogramming.com.au/ITblog/?p=' . $pnumis . "'" . '; document.getElementById(' . "'" . 'preif' . "'" . ').style.display=' . "'" . 'block' . "'" . '; } window.open(' . "'//www.rjmprogramming.com.au/ITblog/?p=" . $pnumis . "','_blank'); " . '" ondblclick=" window.open(' . "'//www.rjmprogramming.com.au/slideshow.html?title=" . str_replace(urlencode('|'), '%20', urlencode(str_replace(' ','|',$ptis))) . "','_blank'); " . '"';
219c219
<
---
> global $ptitle;
221a222,248
> if (!$datauri) {
> if (isset($_GET['random'])) {
> if (substr(($_GET['random'] . ' '),0,1) == '0') {
> $thist=' ' . time();
> $thistminustwo=substr($thist,0,(strlen($thist) - 2));
> if (!file_exists('./rjmlist.htm')) {
> file_put_contents('./rjmlist.htm', '<body><pre>' . "\n" . $thist . '|' . $_GET['random'] . '|' . $ptitle . "\n</pre></body>");
> } else {
> $sofarc=file_get_contents('./rjmlist.htm');
> $newones=explode($thistminustwo, $sofarc);
> $lastiis=0;
> if (strpos($sofarc, ' ') !== false) { $lastiis=explode('|',explode(' ', $sofarc)[1])[0]; }
> if (sizeof($newones) == 1 && (time() - $lastiis) > 100) {
> file_put_contents('./rjmlist.htm', '<body><pre>' . "\n" . $thist . '|' . $_GET['random'] . '|' . $ptitle . "\n</pre></body>");
> } else {
> $sofarcs=explode('|' . $_GET['random'] . '|', $sofarc);
> if (sizeof($sofarcs) > 1) {
> $sofarpref=' ' . explode(' ', $sofarcs[0])[-1 + sizeof(explode(' ', $sofarcs[0]))] . '|' . $_GET['random'] . '|' . explode("\n", $sofarcs[1])[0] . "\n";
> $sofarc=str_replace($sofarpref, "", $sofarc);
> }
> file_put_contents('./rjmlist.htm', '<body><pre>' . "\n" . $thist . '|' . $_GET['random'] . '|' . $ptitle . "\n" . str_replace('<body><pre>' . "\n", '', $sofarc));
> }
> }
> }
> }
> }
>
370c397
< echo "<html>" . $tonl . "<body" . $bonl . "><pre>data:image/jpeg;base64," . base64_encode(createScaledImage($uwidth,$uheight,$postingiurl,true)) . "#" . str_replace('+','%20',urlencode($ptitle)) . "</pre><br><iframe id=preif style='display:none;width:100%;height:1200px;' src=''></iframe></body></html>";
---
> echo "<html>" . $tonl . "<body" . $bonl . " style=\"background:linear-gradient(rgba(255,255,255,0.7),rgba(255,255,255,0.7)),Url('data:image/jpeg;base64," . base64_encode(createScaledImage($uwidth,$uheight,$postingiurl,true)) . "#" . str_replace('+','%20',urlencode($ptitle)) . "') 0px 30px no-repeat;background-size:contain;background-repeat:no-repeat;background-position:0px 30px;\"><pre>data:image/jpeg;base64," . base64_encode(createScaledImage($uwidth,$uheight,$postingiurl,true)) . "#" . str_replace('+','%20',urlencode($ptitle)) . "</pre><br><iframe id=preif style='display:none;width:100%;height:1200px;' src=''></iframe><br><img onclick=\"document.getElementsByTagName('pre')[0].click();\" id=moimg style='display:none;border-width: 28px;border-style: solid; border-image: linear-gradient(to right, lightblue, lightgreen) 1;' src='data:image/jpeg;base64," . base64_encode(createScaledImage($uwidth,$uheight,$postingiurl,true)) . "#" . str_replace('+','%20',urlencode($ptitle)) . "'></img></body></html>";


Previous relevant Keyboard Based Cursor Image Source Tutorial is shown below.

Keyboard Based Cursor Image Source Tutorial

Keyboard Based Cursor Image Source Tutorial

Another layer of functionality thinking on top of the work of yesterday’s Keyboard Based Cursor Multiple Background Images Tutorial

  • multiple background image functionality … could be today’s …
  • image source choice to add to the generous Lorem Picsum image resource … thanks … that of a resource of the tutorial images amongst those of this RJM Programming WordPress Blog you are reading

… channelling the ever nuanced start we made in this regard when we presented Image Pair Fitting into a Given Dimension Sources Tutorial, with its interfacing to an increasing role for the WordPress codex TwentyTen theme 404.php role dealing with the HTTP error 404 well known as “Webpage Not Found”.

To make this happen, in code, we had to start breaking up (parameterizing, if you prefer) the hardcoding …

//picsum.photos

… into (variable) …


thesource

… and …

?random=

… into (variable usage) …


themp + '?random='

reflected into code snippet example below …


var thesource=location.search.split('numbi=')[1] ? (decodeURIComponent(location.search.split('numbi=')[1].split('&')[0]).replace('+',' ').replace(' ',' ').replace('-',' ').substring(0,1) == ' ' ? '//www.rjmprogramming.com.au/ITblog' : '//picsu' + 'm.photos') : '//picsu' + 'm.photos';
var themp='';
if (thesource != '//picsu' + 'm.photos') {
themp='/';
}

if (numbi != '') {
if (eval('' + numbi) == 2) {
document.head.innerHTML+='<style> #mydiv, body { background: url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 76547646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 76147646) + '); background-position: top left, top right; background-size: 50% 100%, 50% 100%; background-repeat: no-repeat, no-repeat; } </style>';
} else if (eval('' + numbi) == 3) {
document.head.innerHTML+='<style> #mydiv, body { background: url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 76547646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 70147646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 76147646) + '); background-position: top left, top center, top right; background-size: 33% 100%, 34% 100%, 33% 100%; background-repeat: no-repeat, no-repeat, no-repeat; } </style>';
} else if (eval('' + numbi) == 4) {
document.head.innerHTML+='<style> #mydiv, body { background: url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 76547646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 70143646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 70147646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 76147646) + '); background-position: top left, top right, bottom left, bottom right; background-size: 50% 50%, 50% 50%, 50% 50%, 50% 50%; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat; } </style>';
} else if (eval('' + numbi) == 5) {
document.head.innerHTML+='<style> #mydiv, body { background: url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 76547646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 70143646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 50147646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 70147646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 76147646) + '); background-position: top left, top center, top right, bottom left, bottom right; background-size: 33% 50%, 34% 50%, 33% 50%, 50% 50%, 50% 50%; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; } </style>';
} else if (eval('' + numbi) == 6) {
document.head.innerHTML+='<style> #mydiv, body { background: url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 76547646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 10143646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 70143646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 50147646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 70147646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 76147646) + '); background-position: top left, top center, top right, bottom left, bottom center, bottom right; background-size: 33% 50%, 34% 50%, 33% 50%, 33% 50%, 34% 50%, 33% 50%; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; } </style>';
} else if (eval('' + numbi) == 7) {
document.head.innerHTML+='<style> #mydiv, body { background: url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 76547646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 27143646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 10143646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 70143646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 50147646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 70147646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 76147646) + '); background-position: top left, top center, top right, center center, bottom left, bottom center, bottom right; background-size: 33% 50%, 34% 33%, 33% 50%, 34% 34%, 33% 50%, 34% 33%, 33% 50%; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; } </style>';
} else if (eval('' + numbi) == 8) {
document.head.innerHTML+='<style> #mydiv, body { background: url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 76547646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 27143646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 87123646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 10143646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 70143646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 50147646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 70147646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 76147646) + '); background-position: top left, top center, top right, center left, center center, bottom left, bottom center, bottom right; background-size: 33% 33%, 34% 33%, 33% 50%, 33% 34%, 34% 34%, 33% 33%, 34% 33%, 33% 50%; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; } </style>';
} else if (eval('' + numbi) == 9) {
document.head.innerHTML+='<style> #mydiv, body { background: url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 76547646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 27143646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 67143446) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 87123646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 10143646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 70143646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 50147646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 70147646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 76147646) + '); background-position: top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right; background-size: 33% 33%, 34% 33%, 33% 33%, 33% 34%, 34% 34%, 33% 34%, 33% 33%, 34% 33%, 33% 33%; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; } </style>';
} else if (thesource != '//picsu' + 'm.photos') {
document.head.innerHTML+='<style> ' + document.head.innerHTML.split('<style>')[1].split('</style>')[0].replace(/\/\/picsum\.photos/g, thesource).replace(/\?random\=/g, themp + '?random=').replace(/00\)/g, '00' + themp + '?random=' + Math.floor(Math.random() * 198765434) + ')') + ' </style>';
}
} else if (thesource != '//picsu' + 'm.photos') {
document.head.innerHTML+='<style> ' + document.head.innerHTML.split('<style>')[1].split('</style>')[0].replace(/\/\/picsum\.photos/g, thesource).replace(/\?random\=/g, themp + '?random=').replace(/00\)/g, '00' + themp + '?random=' + Math.floor(Math.random() * 198765434) + ')') + ' </style>';
}

… in our changed body_mouse_deepdive.html‘s “parent” single background image web application (or, for example, “parent” eight background RJM Programming Blog Tutorial Picture image web application) where a user can latch onto the new image source via a first key press is a + plus character

Click and type and see the cursor change as you use Alt or Shift or Control that can be reset via Caps Lock with a click copying cursor into content … RJM Programming … May, 2022 … thanks to https://picsum.photos/ Lorem Picsum You can change emojis if you know the \002602 form of UTF-16 (hex) entry (our example is umbrella and if you express it as \\002602 that leaves cursor just as your emoji). Double click existant foreground emoji element to clear all the foreground emoji elements. With complex emoji entries do not zero leftpad until your last simple entity eg. \\1F6A3\200D\2640\00FE0F could define a Woman Rowing complex emoji. Optionally make emojis bigger after \ with + two time multipliers. Share with email or SMS happens via screenshots (macOS control-command-shift-3 or Windows Prnt-Scrn) followed by File menu Paste option causing chance to share after which File menu Undo can work. If first key is (+ is RJM image else) from 1 to 9 that will be number of background images displayed.


Previous relevant Keyboard Based Cursor Multiple Background Images Tutorial is shown below.

Keyboard Based Cursor Multiple Background Images Tutorial

Keyboard Based Cursor Multiple Background Images Tutorial

For the images, those background ones, used in the recent Canvas Graphics Editing in Zoomed Webpage Tutorial, we use the great Lorem Picsum resource. So far that has been the one background image covering the background of the webpage …


<style>

body {
display: inline-block;
font-size: 128px;
line-height: 1.2;
text-align: center;
background: url(//picsum.photos/1000/1000) center center no-repeat;
background-size: cover;
background-clip: text;
-webkit-background-clip: text;


color: rgba(255,0,0,0.6);

span { color: transparent; }
}

div {
background-color: transparent;
caret-color: transparent;
}

@media only screen and (max-width: 1000px) {
div {
background: url(//picsum.photos/1000/1000) center center no-repeat;
}
}

div:focus {
outline: none !important;
}

html {
height: 100%;
display: flex;
cursor: Url("data:image/svg+xml;utf8,<svg xmlns='//www.w3.org/2000/svg' width='126' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(0,255,0,0.3);fill:black;font-family:Verdana;font-size:16px;'><text y='80%'>Shift/Alt/Ctrl\002753</text></svg>") 16 0, crosshair;
}

</style>

… nominally background-positioned “center center”. But there are 9 background-position of that similar ilk available …

  • top left
  • top center
  • top right
  • center left
  • center center
  • center right
  • bottom left
  • bottom center
  • bottom right

… which we’d like to, optionally, be involved with how a user users our changed body_mouse_deepdive.html‘s “parent” single background image web application (or, for example, “parent” four background image web application).

So, how to make it be able to be controlled by those users? Well, those previous keyboard logics involving emojis always involved a leading “\” backslash, so that leaves open numbers from 1 to 9 entered as a first keyboard character entered meaning that that is how many background images is wanted by that user

Click and type and see the cursor change as you use Alt or Shift or Control that can be reset via Caps Lock with a click copying cursor into content … RJM Programming … May, 2022 … thanks to https://picsum.photos/ Lorem Picsum You can change emojis if you know the \002602 form of UTF-16 (hex) entry (our example is umbrella and if you express it as \\002602 that leaves cursor just as your emoji). Double click existant foreground emoji element to clear all the foreground emoji elements. With complex emoji entries do not zero leftpad until your last simple entity eg. \\1F6A3\200D\2640\00FE0F could define a Woman Rowing complex emoji. Optionally make emojis bigger after \ with + two time multipliers. Share with email or SMS happens via screenshots (macOS control-command-shift-3 or Windows Prnt-Scrn) followed by File menu Paste option causing chance to share after which File menu Undo can remove pasted part as required. If first key is from 1 to 9 that will be number of background images displayed.

… supported by …


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

if (numbi != '') {
if (eval('' + numbi) == 2) {
document.head.innerHTML+='<style> body { background: url(//picsum.photos/1000/1000?random=76547646), url(//picsum.photos/1000/1000?random=76147646); background-position: top left, top right; background-size: 50% 100%, 50% 100%; background-repeat: no-repeat, no-repeat; } </style>';
} else if (eval('' + numbi) == 3) {
document.head.innerHTML+='<style> body { background: url(//picsum.photos/1000/1000?random=76547646), url(//picsum.photos/1000/1000?random=70147646), url(//picsum.photos/1000/1000?random=76147646); background-position: top left, top center, top right; background-size: 33% 100%, 34% 100%, 33% 100%; background-repeat: no-repeat, no-repeat, no-repeat; } </style>';
} else if (eval('' + numbi) == 4) {
document.head.innerHTML+='<style> body { background: url(//picsum.photos/1000/1000?random=76547646), url(//picsum.photos/1000/1000?random=70143646), url(//picsum.photos/1000/1000?random=70147646), url(//picsum.photos/1000/1000?random=76147646); background-position: top left, top right, bottom left, bottom right; background-size: 50% 50%, 50% 50%, 50% 50%, 50% 50%; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat; } </style>';
} else if (eval('' + numbi) == 5) {
document.head.innerHTML+='<style> body { background: url(//picsum.photos/1000/1000?random=76547646), url(//picsum.photos/1000/1000?random=70143646), url(//picsum.photos/1000/1000?random=50147646), url(//picsum.photos/1000/1000?random=70147646), url(//picsum.photos/1000/1000?random=76147646); background-position: top left, top center, top right, bottom left, bottom right; background-size: 33% 50%, 34% 50%, 33% 50%, 50% 50%, 50% 50%; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; } </style>';
} else if (eval('' + numbi) == 6) {
document.head.innerHTML+='<style> body { background: url(//picsum.photos/1000/1000?random=76547646), url(//picsum.photos/1000/1000?random=10143646), url(//picsum.photos/1000/1000?random=70143646), url(//picsum.photos/1000/1000?random=50147646), url(//picsum.photos/1000/1000?random=70147646), url(//picsum.photos/1000/1000?random=76147646); background-position: top left, top center, top right, bottom left, bottom center, bottom right; background-size: 33% 50%, 34% 50%, 33% 50%, 33% 50%, 34% 50%, 33% 50%; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; } </style>';
} else if (eval('' + numbi) == 7) {
document.head.innerHTML+='<style> body { background: url(//picsum.photos/1000/1000?random=76547646), url(//picsum.photos/1000/1000?random=27143646), url(//picsum.photos/1000/1000?random=10143646), url(//picsum.photos/1000/1000?random=70143646), url(//picsum.photos/1000/1000?random=50147646), url(//picsum.photos/1000/1000?random=70147646), url(//picsum.photos/1000/1000?random=76147646); background-position: top left, top center, top right, center center, bottom left, bottom center, bottom right; background-size: 33% 50%, 34% 33%, 33% 50%, 34% 34%, 33% 50%, 34% 33%, 33% 50%; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; } </style>';
} else if (eval('' + numbi) == 8) {
document.head.innerHTML+='<style> body { background: url(//picsum.photos/1000/1000?random=76547646), url(//picsum.photos/1000/1000?random=27143646), url(//picsum.photos/1000/1000?random=87123646), url(//picsum.photos/1000/1000?random=10143646), url(//picsum.photos/1000/1000?random=70143646), url(//picsum.photos/1000/1000?random=50147646), url(//picsum.photos/1000/1000?random=70147646), url(//picsum.photos/1000/1000?random=76147646); background-position: top left, top center, top right, center left, center center, bottom left, bottom center, bottom right; background-size: 33% 33%, 34% 33%, 33% 50%, 33% 34%, 34% 34%, 33% 33%, 34% 33%, 33% 50%; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; } </style>';
} else if (eval('' + numbi) == 9) {
document.head.innerHTML+='<style> body { background: url(//picsum.photos/1000/1000?random=76547646), url(//picsum.photos/1000/1000?random=27143646), url(//picsum.photos/1000/1000?random=67143446), url(//picsum.photos/1000/1000?random=87123646), url(//picsum.photos/1000/1000?random=10143646), url(//picsum.photos/1000/1000?random=70143646), url(//picsum.photos/1000/1000?random=50147646), url(//picsum.photos/1000/1000?random=70147646), url(//picsum.photos/1000/1000?random=76147646); background-position: top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right; background-size: 33% 33%, 34% 33%, 33% 33%, 33% 34%, 34% 34%, 33% 34%, 33% 33%, 34% 33%, 33% 33%; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; } </style>';
}
}


function reduce(invl) {
if (('' + invl).trim() == '') { return '1'; }
if (('' + invl).trim().replace(/0/g,'').replace(/1/g,'').replace(/0/g,'').replace(/2/g,'').replace(/3/g,'').replace(/4/g,'').replace(/5/g,'').replace(/6/g,'').replace(/7/g,'').replace(/8/g,'').replace(/9/g,'') != '') { return '1'; }
var retval=0, ij=0;
var cinvl='' + invl;
var xcinvl='';
for (ij=0; ij<cinvl.length; ij++) {
if (cinvl.substring(ij).substring(0,1) != '-') {
retval+=eval(cinvl.substring(ij).substring(0,1));
}
}
xcinvl='' + retval;
while (xcinvl.length > 1) {
retval=0;
for (ij=0; ij<xcinvl.length; ij++) {
if (xcinvl.substring(ij).substring(0,1) != '-') {
retval+=eval(xcinvl.substring(ij).substring(0,1));
}
}
xcinvl='' + retval;
}
if (retval == 0) { retval=1; }
return '' + retval;
}


Previous relevant Keyboard Based Cursor Canvas Content Copy Tutorial is shown below.

Keyboard Based Cursor Canvas Content Copy Tutorial

Keyboard Based Cursor Canvas Content Copy Tutorial

You may have noticed with yesterday’s Keyboard Based Cursor Share Content Copy Tutorial, crucial to the sharing code, was the use of the incredible HTML5 introduced canvas element, helped by that middleperson link to those public email and SMS sharing conduits, overseeing the great random Lorem Picsum background images and user created emoji and/or text initial annotations.

And this got us wondering whether there was a private (ie. inhouse) web application of the past that could further value add as another optional middleperson tool for (user) personalization (of the content) purposes. And yes, do you remember the canvas work involved in the featured web application of Emoji Borders and Backgrounds Canvas Annotation Tutorial?

It uses an interesting approach with the transference of data across from a canvas in one application to the canvas in that user_of_signature_signature.htm web application. Once our changed body_mouse_deepdive.html‘s “parent” web application has organized its canvas contents, it’s just a matter of …


var awo=null;
awo=window.open('./user_of_signature_signature.htm','_blank','top=100,left=100,width=800,height=800');

… for the “child” canvas annotator to effectively “suck up” the canvas data into its canvas via …


var cancont='';
var elemode=location.search.split('elemode=')[1] ? (location.search.split('elemode=')[1].split('&')[0]) : "canvas";

if (('' + window.opener).replace('null','') != '') {
var cans=window.opener.document.getElementsByTagName(elemode);
if (cans.length > 0) {
if (elemode == 'img') {
cancont=cans[0].src;
} else {
cancont=cans[0].toDataURL('image/png');
}
if (cancontw < 0 && canconth < 0) { cancontw=cans[0].width; canconth=cans[0].height; } } }

... possible because both "parent" and "child" exist on the same RJM Programming domain (web server).

Once there, another woooooorrrrrlllddd of image manipulations, via canvas, can await the user, perhaps ready for ongoing sharing possibilities with that "child".


Previous relevant Keyboard Based Cursor Share Content Copy Tutorial is shown below.

Keyboard Based Cursor Share Content Copy Tutorial

Keyboard Based Cursor Share Content Copy Tutorial

Yesterday's Keyboard Based Cursor Personalized Content Copy Tutorial has probably reached a point where some sharing mechanism is apt, for accountability and usefulness purposes, at the very least, regarding our recent web application allowing for foreground content on top of a random Lorem Picsum background image.

We've been helped out greatly by javascript - Can I take a screenshot from the clipboard? - Stack Overflow and html - How to render a blob on a canvas element? - Stack Overflow in the following new relevant Javascript code ...


function renderNoImage(canvas, blob) { // thanks to https://stackoverflow.com/questions/38004917/how-to-render-a-blob-on-a-canvas-element
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = (event) => {
URL.revokeObjectURL(event.target.src) // This is important. If you are not using the blob, you should release it if you don't want to reuse it. It's good for memory.
ctx.drawImage(event.target, 0, 0)
img.style.display='none';
img.style.zIndex='-123';
};
img.src = URL.createObjectURL(blob);
}


function renderImage(canvas, blob) { // thanks to https://stackoverflow.com/questions/38004917/how-to-render-a-blob-on-a-canvas-element
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = (event) => {
URL.revokeObjectURL(event.target.src) // This is important. If you are not using the blob, you should release it if you don't want to reuse it. It's good for memory.
ctx.drawImage(event.target, 0, 0)
};
img.src = URL.createObjectURL(blob);
}


addEventListener("paste", ev => { // thanks to https://stackoverflow.com/questions/55559432/can-i-take-a-screenshot-from-the-clipboard
for(const item of ev.clipboardData.items) { /// Clipboard may contain multiple elements of different type -- text, image, etc
if(item.type.startsWith("image/")) { /// We are only interested in clipboard data that is an image
if (emailee == '') {
emailee=prompt('Your clipboard has a useful image you could share the image with. Optionally, please enter an email address or SMS number to share with.');
if (emailee == null) { emailee=''; }
}
if (emailee.indexOf('@') != -1) {
document.getElementById('mydiv').style.overflow='scroll';
document.getElementById('mycanvas').innerHTML='<br><canvas style="position:absolute;z-index:98;top:0px;left:0px;" id=thecanvas width=' + screen.width + ' height=' + screen.height + '></canvas>';
elem=document.getElementById('thecanvas');
context=elem.getContext('2d');
renderImage(elem, item.getAsFile()); //context.drawImage(item.getAsFile(), 0, 0);
document.getElementById('aemail').href=document.getElementById('aemail').href.replace(':?', ':' + emailee + '?');
document.getElementById('aemail').click();
document.getElementById('mycanvas').innerHTML='';
} else if (emailee != '' && emailee.replace(/0/g,'').replace(/1/g,'').replace(/2/g,'').replace(/3/g,'').replace(/4/g,'').replace(/5/g,'').replace(/6/g,'').replace(/7/g,'').replace(/8/g,'').replace(/9/g,'') == '') {
document.getElementById('mydiv').style.overflow='scroll';
document.getElementById('mycanvas').innerHTML='<br><canvas style="position:absolute;z-index:98;top:0px;left:0px;" id=thecanvas width=' + screen.width + ' height=' + screen.height + '></canvas>';
elem=document.getElementById('thecanvas');
context=elem.getContext('2d');
renderImage(elem, item.getAsFile()); //context.drawImage(item.getAsFile(), 0, 0);
document.getElementById('asms').href=document.getElementById('asms').href.replace(':&', ':' + emailee + '&');
document.getElementById('asms').click();
document.getElementById('mycanvas').innerHTML='';
} else {
//document.getElementById('mydiv').style.overflow='scroll';
document.getElementById('mycanvas').innerHTML='<br><canvas style="display:none;position:absolute;z-index:-98;top:0px;left:0px;" id=thecanvas width=' + screen.width + ' height=' + screen.height + '></canvas>';
elem=document.getElementById('thecanvas');
context=elem.getContext('2d');
renderNoImage(elem, item.getAsFile()); //context.drawImage(item.getAsFile(), 0, 0);
document.getElementById('mycanvas').innerHTML='';
}
}
}
});

... which is explained to the user in the following way ...

Share with email or SMS happens via screenshots (macOS control-command-shift-3 or Windows Prnt-Scrn) followed by File menu Paste option causing chance to share after which File menu Undo can remove pasted part as required.

... in the changed "proof of concept" body_mouse_deepdive.html live run.


Previous relevant Keyboard Based Cursor Personalized Content Copy Tutorial is shown below.

Keyboard Based Cursor Personalized Content Copy Tutorial

Keyboard Based Cursor Personalized Content Copy Tutorial

On top of yesterday's Keyboard Based Cursor Content Copy Tutorial we wanted to offer the user the chance for them to tailor their foreground content on top of the Lorem Picsum background image.

The user can enter this via the keyboard because there is an HTML div contenteditable=true pallette to work with ...


<div id=mydiv onfocus='setTimeout(alte, 1000);' ondblclick="this.innerHTML='';" onclick='stamp(event);' title='Click and type and see the cursor change as you use Alt or Shift or Control that can be reset via Caps Lock with a click copying cursor into content ... RJM Programming ... May, 2022 ... thanks to https://picsum.photos/ Lorem Picsum You can change emojis if you know the \002602 form of UTF-16 (hex) entry (our example is umbrella and if you express it as \\002602 that leaves cursor just as your emoji). Double click existant foreground emoji element to clear all the foreground emoji elements.' spellcheck='false' contenteditable=true style='width:100vw;height:100%;color:transparent;text-color:transparent;' onkeypress=kpcursorlook(event); onkeydown=cursorlook(event); onmousemove=xycursorlook(event); ontouchmove=xycursorlook(event);></div>

It's "title" attribute now talks about two new pieces of functionality, those being ...

  • You can change emojis if you know the \002602 form of UTF-16 (hex) entry (our example is umbrella and if you express it as \\002602 that leaves cursor just as your emoji).
  • Double click existant foreground emoji element to clear all the foreground emoji elements.

The choice of keyboard input methodology also suits CSS "content" property definitions as one backslash followed by a hexidecimal value left padded with zeroes to a length of six. See us doing this below for an umbrella emoji (which could also be expressed in an HTML hexadecimal entity way &#x2602; ☂ the information for which you can find at Unicode Character 'UMBRELLA' (U+2602) we normally get to by entering "U+2602" at a web browser address bar, the knowledge for which we arrive at via entering "umbrella emojipedia" and moving down the top link's webpage to find the "U+2602") ...


<style> #myumbrella::after { content: '\002602'; } </style>

... that feeds into some new "onkeypress" keyboard event logic ...


function kpcursorlook(evt) {
var atofa=['a','b','c','d','e','f'];
var rgbit='';
if (evt.keyCode == 92) {
if (newu.length == 1) { gro=true; } else { gro=false; }
newu=("\\").substring(0,1);
} else if (evt.keyCode >= 48 && evt.keyCode <= 57) {
newu+=('' + eval(-48 + evt.keyCode));
} else if (evt.keyCode >= 65 && evt.keyCode <= 70) {
newu+=('' + atofa[eval(-65 + evt.keyCode)]);
} else if (evt.keyCode >= 97 && evt.keyCode <= 102) {
newu+=('' + atofa[eval(-97 + evt.keyCode)]);
}
if (newu.length == 7) {
if (lastcursor.indexOf(("\\\\").substring(0,2)) != -1) {
rgbit=lastcursor.split(("\\\\").substring(0,2))[1].substring(6);
lastcursor=lastcursor.split(("\\\\").substring(0,2))[0] + ("\\").substring(0,1) + newu + rgbit;
document.head.innerHTML+='<style> html { cursor: ' + lastcursor + '; } </style>';
} else if (lastcursor.indexOf(("\\").substring(0,1)) != -1) {
rgbit=lastcursor.split(("\\").substring(0,1))[1].substring(6);
lastcursor=lastcursor.split(("\\").substring(0,1))[0] + newu + rgbit;
if (gro) {
lastcursor=lastcursor.replace('>Shift/Alt/Ctrl', '>').replace('>Shift', '>').replace('>Alt', '>').replace('>Ctrl', '>').replace(" width='126'", " width='20'").replace(" width='66'", " width='20'").replace(" height='48'", " height='20'").replace('0 0 100 100', '0 0 20 20');
}
document.head.innerHTML+='<style> html { cursor: ' + lastcursor + '; } </style>';
}
}
// console.log(evt.keyCode);
}

... in the changed "proof of concept" body_mouse_deepdive.html live run.

Stop Press

Two more "title" attribute pieces of functionality are now ...

  • With complex emoji entries do not zero leftpad until your last simple entity eg. \\1F6A3\200D\2640\00FE0F could define a Woman Rowing complex emoji.
  • Optionally make emojis bigger after \ with + two time multipliers.

The choice of keyboard input methodology also suits CSS "content" property definitions as one backslash followed by "first off" sets of HTML entities they should not left zero pad in their entry, followed by a last HTML entity hexidecimal value left padded with zeroes to a length of six to finish up with. See us doing this below for a woman rowing emoji (which could also be expressed in an HTML hexadecimal entity way &#x1f6a3;&#x0200d;&#x02640;&#x0fe0f; the information for which you can find at 🚣‍♀️ Woman Rowing Boat Emoji we normally get to by entering "woman rowing emoji" at the web browser address bar) ...


<style> #myrowing::after { content: '\01f6a3\00200d\002640\00fe0f'; } </style>

... in the changed "proof of concept" body_mouse_deepdive.html live run.


Previous relevant Keyboard Based Cursor Content Copy Tutorial is shown below.

Keyboard Based Cursor Content Copy Tutorial

Keyboard Based Cursor Content Copy Tutorial

The "onkeydown" keyboard event can involve in its logic three mouse event (event object) property usages that caught our interest recently ...

... and we wanted to have "keyboard" meets "mouse" events, along with the brilliance of Lorem Picsum regarding background image randomosity and quality, working with HTML ...


<div id=mydiv onfocus='setTimeout(alte, 1000);' onclick='stamp(this);' title='Click and type and see the cursor change as you use Alt or Shift or Control that can be reset via Caps Lock with a click copying cursor into content ... RJM Programming ... May, 2022 ... thanks to https://picsum.photos/ Lorem Picsum' spellcheck='false' contenteditable=true style='width:100vw;height:100%;color:transparent;text-color:transparent;' data-onkeypress=xycursorlook(event); onkeydown=cursorlook(event); onmousemove=xycursorlook(event); ontouchmove=xycursorlook(event);></div>

... in a way we hadn't tried before that called on some inhouse cursor SVG creations (and so is, alas, just a non-mobile fully featured experience), in the sense that ...

  1. keyboard helps creating the "what" regarding content ...

    <script type='text/javascript'>
    var lastkeymodifier=''
    var lastcursor="Url(\"data:image/svg+xml;utf8,<svg xmlns='//www.w3.org/2000/svg' width='126' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(0,255,0,0.3);fill:black;font-family:Verdana;font-size:16px;'><text y='80%'>Shift/Alt/Ctrl\\002753</text></svg>\") 16 0, crosshair";
    var pos3=-1, pos4=-1;
    var subdiv=1;
    var lastpos3=-2, lastpos4=-1;
    var allowable=false;

    function cursorlook(evt) {
    if (evt.altKey) {
    if (lastkeymodifier != 'alt') {
    lastcursor="Url(\"data:image/svg+xml;utf8,<svg xmlns='//www.w3.org/2000/svg' width='66' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(0,0,255,0.3);fill:black;font-family:Verdana;font-size:17px;'><text y='80%'>Alt\\01f3d5</text></svg>\") 16 0, progress";
    document.head.innerHTML+='<style> html { cursor: ' + lastcursor + '; } </style>';
    lastkeymodifier='alt';
    }
    } else if (evt.ctrlKey) {
    if (lastkeymodifier != 'ctrl') {
    lastcursor="Url(\"data:image/svg+xml;utf8,<svg xmlns='//www.w3.org/2000/svg' width='66' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(0,255,0,0.3);fill:black;font-family:Verdana;font-size:17px;'><text y='80%'>Ctrl\\01f333</text></svg>\") 16 0, pointer";
    document.head.innerHTML+='<style> html { cursor: ' + lastcursor + '; } </style>';
    lastkeymodifier='ctrl';
    }
    } else if (evt.shiftKey) {
    if (lastkeymodifier != 'shift') {
    lastcursor="Url(\"data:image/svg+xml;utf8,<svg xmlns='//www.w3.org/2000/svg' width='66' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(255,0,0,0.3);fill:black;font-family:Verdana;font-size:17px;'><text y='80%'>Shift\\01f389</text></svg>\") 16 0, grab";
    document.head.innerHTML+='<style> html { cursor: ' + lastcursor + '; } </style>';
    lastkeymodifier='shift';
    }
    } else {
    if (lastkeymodifier != '') {
    lastcursor="Url(\"data:image/svg+xml;utf8,<svg xmlns='//www.w3.org/2000/svg' width='126' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(0,255,0,0.3);fill:black;font-family:Verdana;font-size:16px;'><text y='80%'>Shift/Alt/Ctrl\\002753</text></svg>\") 16 0, crosshair";
    document.head.innerHTML+='<style> html { cursor: ' + lastcursor + '; } </style>';
    lastkeymodifier='';
    }
    }
    }
    </script>
  2. mouse "onmousemove" or "ontouchmove" helps with the "where" regarding content above ...

    <script type='text/javascript'>
    var pos3=-1, pos4=-1;
    var subdiv=1;
    var lastpos3=-2, lastpos4=-1;
    var allowable=false;

    function xycursorlook(e) {
    e = e || window.event;
    e.preventDefault();

    if (e.touches) {
    if (e.touches[0].pageX) {
    pos3 = e.touches[0].pageX;
    pos4 = e.touches[0].pageY;
    } else {
    pos3 = e.touches[0].clientX;
    pos4 = e.touches[0].clientY;
    }
    //console.log('pos3=' + pos3 + ',pos4=' + pos4);
    } else if (e.clientX || e.clientY) {
    pos3 = e.clientX;
    pos4 = e.clientY;
    } else {
    pos3 = e.pageX;
    pos4 = e.pageY;
    }
    }
    </script>
  3. preparations for "onclick" way a cursor can be plonked into (real lasting) content ...

    <script type='text/javascript'>
    var lastcursor="Url(\"data:image/svg+xml;utf8,<svg xmlns='//www.w3.org/2000/svg' width='126' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(0,255,0,0.3);fill:black;font-family:Verdana;font-size:16px;'><text y='80%'>Shift/Alt/Ctrl\\002753</text></svg>\") 16 0, crosshair";
    var pos3=-1, pos4=-1;
    var subdiv=1;
    var lastpos3=-2, lastpos4=-1;
    var allowable=false;

    function stamp(divo) {
    if (('' + pos3).indexOf('-') == -1) {
    if (allowable) {
    //if (allowed) {
    //allowed=false;
    //setTimeout(reseta, 2000);
    divo.innerHTML+='<div id=div' + subdiv + ' style="position:absolute;top:' + pos4 + 'px;left:' + pos3 + 'px;width:126px;height:48px;background-color:transparent;"></div><style> #div' + subdiv + ' { background:' + lastcursor.split(') ')[0] + ') no-repeat; } </style>';
    subdiv++;
    //console.log('lastpos4=' + lastpos4 + ' and pos4=' + pos4);
    //console.log('lastpos3=' + lastpos3 + ' and pos3=' + pos3);
    lastpos3=pos3;
    lastpos4=pos4;
    //}
    }
    }
    }
    </script>

... with the "proof of concept" body_mouse_deepdive.html live run.

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


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


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


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


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


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


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

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

Keyboard Based Cursor Image Source Tutorial

Keyboard Based Cursor Image Source Tutorial

Keyboard Based Cursor Image Source Tutorial

Another layer of functionality thinking on top of the work of yesterday’s Keyboard Based Cursor Multiple Background Images Tutorial

  • multiple background image functionality … could be today’s …
  • image source choice to add to the generous Lorem Picsum image resource … thanks … that of a resource of the tutorial images amongst those of this RJM Programming WordPress Blog you are reading

… channelling the ever nuanced start we made in this regard when we presented Image Pair Fitting into a Given Dimension Sources Tutorial, with its interfacing to an increasing role for the WordPress codex TwentyTen theme 404.php role dealing with the HTTP error 404 well known as “Webpage Not Found”.

To make this happen, in code, we had to start breaking up (parameterizing, if you prefer) the hardcoding …

//picsum.photos

… into (variable) …


thesource

… and …

?random=

… into (variable usage) …


themp + '?random='

reflected into code snippet example below …


var thesource=location.search.split('numbi=')[1] ? (decodeURIComponent(location.search.split('numbi=')[1].split('&')[0]).replace('+',' ').replace(' ',' ').replace('-',' ').substring(0,1) == ' ' ? '//www.rjmprogramming.com.au/ITblog' : '//picsu' + 'm.photos') : '//picsu' + 'm.photos';
var themp='';
if (thesource != '//picsu' + 'm.photos') {
themp='/';
}

if (numbi != '') {
if (eval('' + numbi) == 2) {
document.head.innerHTML+='<style> #mydiv, body { background: url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 76547646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 76147646) + '); background-position: top left, top right; background-size: 50% 100%, 50% 100%; background-repeat: no-repeat, no-repeat; } </style>';
} else if (eval('' + numbi) == 3) {
document.head.innerHTML+='<style> #mydiv, body { background: url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 76547646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 70147646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 76147646) + '); background-position: top left, top center, top right; background-size: 33% 100%, 34% 100%, 33% 100%; background-repeat: no-repeat, no-repeat, no-repeat; } </style>';
} else if (eval('' + numbi) == 4) {
document.head.innerHTML+='<style> #mydiv, body { background: url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 76547646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 70143646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 70147646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 76147646) + '); background-position: top left, top right, bottom left, bottom right; background-size: 50% 50%, 50% 50%, 50% 50%, 50% 50%; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat; } </style>';
} else if (eval('' + numbi) == 5) {
document.head.innerHTML+='<style> #mydiv, body { background: url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 76547646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 70143646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 50147646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 70147646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 76147646) + '); background-position: top left, top center, top right, bottom left, bottom right; background-size: 33% 50%, 34% 50%, 33% 50%, 50% 50%, 50% 50%; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; } </style>';
} else if (eval('' + numbi) == 6) {
document.head.innerHTML+='<style> #mydiv, body { background: url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 76547646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 10143646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 70143646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 50147646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 70147646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 76147646) + '); background-position: top left, top center, top right, bottom left, bottom center, bottom right; background-size: 33% 50%, 34% 50%, 33% 50%, 33% 50%, 34% 50%, 33% 50%; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; } </style>';
} else if (eval('' + numbi) == 7) {
document.head.innerHTML+='<style> #mydiv, body { background: url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 76547646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 27143646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 10143646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 70143646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 50147646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 70147646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 76147646) + '); background-position: top left, top center, top right, center center, bottom left, bottom center, bottom right; background-size: 33% 50%, 34% 33%, 33% 50%, 34% 34%, 33% 50%, 34% 33%, 33% 50%; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; } </style>';
} else if (eval('' + numbi) == 8) {
document.head.innerHTML+='<style> #mydiv, body { background: url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 76547646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 27143646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 87123646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 10143646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 70143646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 50147646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 70147646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 76147646) + '); background-position: top left, top center, top right, center left, center center, bottom left, bottom center, bottom right; background-size: 33% 33%, 34% 33%, 33% 50%, 33% 34%, 34% 34%, 33% 33%, 34% 33%, 33% 50%; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; } </style>';
} else if (eval('' + numbi) == 9) {
document.head.innerHTML+='<style> #mydiv, body { background: url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 76547646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 27143646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 67143446) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 87123646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 10143646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 70143646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 50147646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 70147646) + '), url(' + thesource + '/1000/1000' + themp + '?random=0' + Math.floor(Math.random() * 76147646) + '); background-position: top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right; background-size: 33% 33%, 34% 33%, 33% 33%, 33% 34%, 34% 34%, 33% 34%, 33% 33%, 34% 33%, 33% 33%; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; } </style>';
} else if (thesource != '//picsu' + 'm.photos') {
document.head.innerHTML+='<style> ' + document.head.innerHTML.split('<style>')[1].split('</style>')[0].replace(/\/\/picsum\.photos/g, thesource).replace(/\?random\=/g, themp + '?random=').replace(/00\)/g, '00' + themp + '?random=' + Math.floor(Math.random() * 198765434) + ')') + ' </style>';
}
} else if (thesource != '//picsu' + 'm.photos') {
document.head.innerHTML+='<style> ' + document.head.innerHTML.split('<style>')[1].split('</style>')[0].replace(/\/\/picsum\.photos/g, thesource).replace(/\?random\=/g, themp + '?random=').replace(/00\)/g, '00' + themp + '?random=' + Math.floor(Math.random() * 198765434) + ')') + ' </style>';
}

… in our changed body_mouse_deepdive.html‘s “parent” single background image web application (or, for example, “parent” eight background RJM Programming Blog Tutorial Picture image web application) where a user can latch onto the new image source via a first key press is a + plus character

Click and type and see the cursor change as you use Alt or Shift or Control that can be reset via Caps Lock with a click copying cursor into content … RJM Programming … May, 2022 … thanks to https://picsum.photos/ Lorem Picsum You can change emojis if you know the \002602 form of UTF-16 (hex) entry (our example is umbrella and if you express it as \\002602 that leaves cursor just as your emoji). Double click existant foreground emoji element to clear all the foreground emoji elements. With complex emoji entries do not zero leftpad until your last simple entity eg. \\1F6A3\200D\2640\00FE0F could define a Woman Rowing complex emoji. Optionally make emojis bigger after \ with + two time multipliers. Share with email or SMS happens via screenshots (macOS control-command-shift-3 or Windows Prnt-Scrn) followed by File menu Paste option causing chance to share after which File menu Undo can work. If first key is (+ is RJM image else) from 1 to 9 that will be number of background images displayed.


Previous relevant Keyboard Based Cursor Multiple Background Images Tutorial is shown below.

Keyboard Based Cursor Multiple Background Images Tutorial

Keyboard Based Cursor Multiple Background Images Tutorial

For the images, those background ones, used in the recent Canvas Graphics Editing in Zoomed Webpage Tutorial, we use the great Lorem Picsum resource. So far that has been the one background image covering the background of the webpage …


<style>

body {
display: inline-block;
font-size: 128px;
line-height: 1.2;
text-align: center;
background: url(//picsum.photos/1000/1000) center center no-repeat;
background-size: cover;
background-clip: text;
-webkit-background-clip: text;


color: rgba(255,0,0,0.6);

span { color: transparent; }
}

div {
background-color: transparent;
caret-color: transparent;
}

@media only screen and (max-width: 1000px) {
div {
background: url(//picsum.photos/1000/1000) center center no-repeat;
}
}

div:focus {
outline: none !important;
}

html {
height: 100%;
display: flex;
cursor: Url("data:image/svg+xml;utf8,<svg xmlns='//www.w3.org/2000/svg' width='126' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(0,255,0,0.3);fill:black;font-family:Verdana;font-size:16px;'><text y='80%'>Shift/Alt/Ctrl\002753</text></svg>") 16 0, crosshair;
}

</style>

… nominally background-positioned “center center”. But there are 9 background-position of that similar ilk available …

  • top left
  • top center
  • top right
  • center left
  • center center
  • center right
  • bottom left
  • bottom center
  • bottom right

… which we’d like to, optionally, be involved with how a user users our changed body_mouse_deepdive.html‘s “parent” single background image web application (or, for example, “parent” four background image web application).

So, how to make it be able to be controlled by those users? Well, those previous keyboard logics involving emojis always involved a leading “\” backslash, so that leaves open numbers from 1 to 9 entered as a first keyboard character entered meaning that that is how many background images is wanted by that user

Click and type and see the cursor change as you use Alt or Shift or Control that can be reset via Caps Lock with a click copying cursor into content … RJM Programming … May, 2022 … thanks to https://picsum.photos/ Lorem Picsum You can change emojis if you know the \002602 form of UTF-16 (hex) entry (our example is umbrella and if you express it as \\002602 that leaves cursor just as your emoji). Double click existant foreground emoji element to clear all the foreground emoji elements. With complex emoji entries do not zero leftpad until your last simple entity eg. \\1F6A3\200D\2640\00FE0F could define a Woman Rowing complex emoji. Optionally make emojis bigger after \ with + two time multipliers. Share with email or SMS happens via screenshots (macOS control-command-shift-3 or Windows Prnt-Scrn) followed by File menu Paste option causing chance to share after which File menu Undo can remove pasted part as required. If first key is from 1 to 9 that will be number of background images displayed.

… supported by …


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

if (numbi != '') {
if (eval('' + numbi) == 2) {
document.head.innerHTML+='<style> body { background: url(//picsum.photos/1000/1000?random=76547646), url(//picsum.photos/1000/1000?random=76147646); background-position: top left, top right; background-size: 50% 100%, 50% 100%; background-repeat: no-repeat, no-repeat; } </style>';
} else if (eval('' + numbi) == 3) {
document.head.innerHTML+='<style> body { background: url(//picsum.photos/1000/1000?random=76547646), url(//picsum.photos/1000/1000?random=70147646), url(//picsum.photos/1000/1000?random=76147646); background-position: top left, top center, top right; background-size: 33% 100%, 34% 100%, 33% 100%; background-repeat: no-repeat, no-repeat, no-repeat; } </style>';
} else if (eval('' + numbi) == 4) {
document.head.innerHTML+='<style> body { background: url(//picsum.photos/1000/1000?random=76547646), url(//picsum.photos/1000/1000?random=70143646), url(//picsum.photos/1000/1000?random=70147646), url(//picsum.photos/1000/1000?random=76147646); background-position: top left, top right, bottom left, bottom right; background-size: 50% 50%, 50% 50%, 50% 50%, 50% 50%; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat; } </style>';
} else if (eval('' + numbi) == 5) {
document.head.innerHTML+='<style> body { background: url(//picsum.photos/1000/1000?random=76547646), url(//picsum.photos/1000/1000?random=70143646), url(//picsum.photos/1000/1000?random=50147646), url(//picsum.photos/1000/1000?random=70147646), url(//picsum.photos/1000/1000?random=76147646); background-position: top left, top center, top right, bottom left, bottom right; background-size: 33% 50%, 34% 50%, 33% 50%, 50% 50%, 50% 50%; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; } </style>';
} else if (eval('' + numbi) == 6) {
document.head.innerHTML+='<style> body { background: url(//picsum.photos/1000/1000?random=76547646), url(//picsum.photos/1000/1000?random=10143646), url(//picsum.photos/1000/1000?random=70143646), url(//picsum.photos/1000/1000?random=50147646), url(//picsum.photos/1000/1000?random=70147646), url(//picsum.photos/1000/1000?random=76147646); background-position: top left, top center, top right, bottom left, bottom center, bottom right; background-size: 33% 50%, 34% 50%, 33% 50%, 33% 50%, 34% 50%, 33% 50%; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; } </style>';
} else if (eval('' + numbi) == 7) {
document.head.innerHTML+='<style> body { background: url(//picsum.photos/1000/1000?random=76547646), url(//picsum.photos/1000/1000?random=27143646), url(//picsum.photos/1000/1000?random=10143646), url(//picsum.photos/1000/1000?random=70143646), url(//picsum.photos/1000/1000?random=50147646), url(//picsum.photos/1000/1000?random=70147646), url(//picsum.photos/1000/1000?random=76147646); background-position: top left, top center, top right, center center, bottom left, bottom center, bottom right; background-size: 33% 50%, 34% 33%, 33% 50%, 34% 34%, 33% 50%, 34% 33%, 33% 50%; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; } </style>';
} else if (eval('' + numbi) == 8) {
document.head.innerHTML+='<style> body { background: url(//picsum.photos/1000/1000?random=76547646), url(//picsum.photos/1000/1000?random=27143646), url(//picsum.photos/1000/1000?random=87123646), url(//picsum.photos/1000/1000?random=10143646), url(//picsum.photos/1000/1000?random=70143646), url(//picsum.photos/1000/1000?random=50147646), url(//picsum.photos/1000/1000?random=70147646), url(//picsum.photos/1000/1000?random=76147646); background-position: top left, top center, top right, center left, center center, bottom left, bottom center, bottom right; background-size: 33% 33%, 34% 33%, 33% 50%, 33% 34%, 34% 34%, 33% 33%, 34% 33%, 33% 50%; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; } </style>';
} else if (eval('' + numbi) == 9) {
document.head.innerHTML+='<style> body { background: url(//picsum.photos/1000/1000?random=76547646), url(//picsum.photos/1000/1000?random=27143646), url(//picsum.photos/1000/1000?random=67143446), url(//picsum.photos/1000/1000?random=87123646), url(//picsum.photos/1000/1000?random=10143646), url(//picsum.photos/1000/1000?random=70143646), url(//picsum.photos/1000/1000?random=50147646), url(//picsum.photos/1000/1000?random=70147646), url(//picsum.photos/1000/1000?random=76147646); background-position: top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right; background-size: 33% 33%, 34% 33%, 33% 33%, 33% 34%, 34% 34%, 33% 34%, 33% 33%, 34% 33%, 33% 33%; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; } </style>';
}
}


function reduce(invl) {
if (('' + invl).trim() == '') { return '1'; }
if (('' + invl).trim().replace(/0/g,'').replace(/1/g,'').replace(/0/g,'').replace(/2/g,'').replace(/3/g,'').replace(/4/g,'').replace(/5/g,'').replace(/6/g,'').replace(/7/g,'').replace(/8/g,'').replace(/9/g,'') != '') { return '1'; }
var retval=0, ij=0;
var cinvl='' + invl;
var xcinvl='';
for (ij=0; ij<cinvl.length; ij++) {
if (cinvl.substring(ij).substring(0,1) != '-') {
retval+=eval(cinvl.substring(ij).substring(0,1));
}
}
xcinvl='' + retval;
while (xcinvl.length > 1) {
retval=0;
for (ij=0; ij<xcinvl.length; ij++) {
if (xcinvl.substring(ij).substring(0,1) != '-') {
retval+=eval(xcinvl.substring(ij).substring(0,1));
}
}
xcinvl='' + retval;
}
if (retval == 0) { retval=1; }
return '' + retval;
}


Previous relevant Keyboard Based Cursor Canvas Content Copy Tutorial is shown below.

Keyboard Based Cursor Canvas Content Copy Tutorial

Keyboard Based Cursor Canvas Content Copy Tutorial

You may have noticed with yesterday’s Keyboard Based Cursor Share Content Copy Tutorial, crucial to the sharing code, was the use of the incredible HTML5 introduced canvas element, helped by that middleperson link to those public email and SMS sharing conduits, overseeing the great random Lorem Picsum background images and user created emoji and/or text initial annotations.

And this got us wondering whether there was a private (ie. inhouse) web application of the past that could further value add as another optional middleperson tool for (user) personalization (of the content) purposes. And yes, do you remember the canvas work involved in the featured web application of Emoji Borders and Backgrounds Canvas Annotation Tutorial?

It uses an interesting approach with the transference of data across from a canvas in one application to the canvas in that user_of_signature_signature.htm web application. Once our changed body_mouse_deepdive.html‘s “parent” web application has organized its canvas contents, it’s just a matter of …


var awo=null;
awo=window.open('./user_of_signature_signature.htm','_blank','top=100,left=100,width=800,height=800');

… for the “child” canvas annotator to effectively “suck up” the canvas data into its canvas via …


var cancont='';
var elemode=location.search.split('elemode=')[1] ? (location.search.split('elemode=')[1].split('&')[0]) : "canvas";

if (('' + window.opener).replace('null','') != '') {
var cans=window.opener.document.getElementsByTagName(elemode);
if (cans.length > 0) {
if (elemode == 'img') {
cancont=cans[0].src;
} else {
cancont=cans[0].toDataURL('image/png');
}
if (cancontw < 0 && canconth < 0) { cancontw=cans[0].width; canconth=cans[0].height; } } }

... possible because both "parent" and "child" exist on the same RJM Programming domain (web server).

Once there, another woooooorrrrrlllddd of image manipulations, via canvas, can await the user, perhaps ready for ongoing sharing possibilities with that "child".


Previous relevant Keyboard Based Cursor Share Content Copy Tutorial is shown below.

Keyboard Based Cursor Share Content Copy Tutorial

Keyboard Based Cursor Share Content Copy Tutorial

Yesterday's Keyboard Based Cursor Personalized Content Copy Tutorial has probably reached a point where some sharing mechanism is apt, for accountability and usefulness purposes, at the very least, regarding our recent web application allowing for foreground content on top of a random Lorem Picsum background image.

We've been helped out greatly by javascript - Can I take a screenshot from the clipboard? - Stack Overflow and html - How to render a blob on a canvas element? - Stack Overflow in the following new relevant Javascript code ...


function renderNoImage(canvas, blob) { // thanks to https://stackoverflow.com/questions/38004917/how-to-render-a-blob-on-a-canvas-element
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = (event) => {
URL.revokeObjectURL(event.target.src) // This is important. If you are not using the blob, you should release it if you don't want to reuse it. It's good for memory.
ctx.drawImage(event.target, 0, 0)
img.style.display='none';
img.style.zIndex='-123';
};
img.src = URL.createObjectURL(blob);
}


function renderImage(canvas, blob) { // thanks to https://stackoverflow.com/questions/38004917/how-to-render-a-blob-on-a-canvas-element
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = (event) => {
URL.revokeObjectURL(event.target.src) // This is important. If you are not using the blob, you should release it if you don't want to reuse it. It's good for memory.
ctx.drawImage(event.target, 0, 0)
};
img.src = URL.createObjectURL(blob);
}


addEventListener("paste", ev => { // thanks to https://stackoverflow.com/questions/55559432/can-i-take-a-screenshot-from-the-clipboard
for(const item of ev.clipboardData.items) { /// Clipboard may contain multiple elements of different type -- text, image, etc
if(item.type.startsWith("image/")) { /// We are only interested in clipboard data that is an image
if (emailee == '') {
emailee=prompt('Your clipboard has a useful image you could share the image with. Optionally, please enter an email address or SMS number to share with.');
if (emailee == null) { emailee=''; }
}
if (emailee.indexOf('@') != -1) {
document.getElementById('mydiv').style.overflow='scroll';
document.getElementById('mycanvas').innerHTML='<br><canvas style="position:absolute;z-index:98;top:0px;left:0px;" id=thecanvas width=' + screen.width + ' height=' + screen.height + '></canvas>';
elem=document.getElementById('thecanvas');
context=elem.getContext('2d');
renderImage(elem, item.getAsFile()); //context.drawImage(item.getAsFile(), 0, 0);
document.getElementById('aemail').href=document.getElementById('aemail').href.replace(':?', ':' + emailee + '?');
document.getElementById('aemail').click();
document.getElementById('mycanvas').innerHTML='';
} else if (emailee != '' && emailee.replace(/0/g,'').replace(/1/g,'').replace(/2/g,'').replace(/3/g,'').replace(/4/g,'').replace(/5/g,'').replace(/6/g,'').replace(/7/g,'').replace(/8/g,'').replace(/9/g,'') == '') {
document.getElementById('mydiv').style.overflow='scroll';
document.getElementById('mycanvas').innerHTML='<br><canvas style="position:absolute;z-index:98;top:0px;left:0px;" id=thecanvas width=' + screen.width + ' height=' + screen.height + '></canvas>';
elem=document.getElementById('thecanvas');
context=elem.getContext('2d');
renderImage(elem, item.getAsFile()); //context.drawImage(item.getAsFile(), 0, 0);
document.getElementById('asms').href=document.getElementById('asms').href.replace(':&', ':' + emailee + '&');
document.getElementById('asms').click();
document.getElementById('mycanvas').innerHTML='';
} else {
//document.getElementById('mydiv').style.overflow='scroll';
document.getElementById('mycanvas').innerHTML='<br><canvas style="display:none;position:absolute;z-index:-98;top:0px;left:0px;" id=thecanvas width=' + screen.width + ' height=' + screen.height + '></canvas>';
elem=document.getElementById('thecanvas');
context=elem.getContext('2d');
renderNoImage(elem, item.getAsFile()); //context.drawImage(item.getAsFile(), 0, 0);
document.getElementById('mycanvas').innerHTML='';
}
}
}
});

... which is explained to the user in the following way ...

Share with email or SMS happens via screenshots (macOS control-command-shift-3 or Windows Prnt-Scrn) followed by File menu Paste option causing chance to share after which File menu Undo can remove pasted part as required.

... in the changed "proof of concept" body_mouse_deepdive.html live run.


Previous relevant Keyboard Based Cursor Personalized Content Copy Tutorial is shown below.

Keyboard Based Cursor Personalized Content Copy Tutorial

Keyboard Based Cursor Personalized Content Copy Tutorial

On top of yesterday's Keyboard Based Cursor Content Copy Tutorial we wanted to offer the user the chance for them to tailor their foreground content on top of the Lorem Picsum background image.

The user can enter this via the keyboard because there is an HTML div contenteditable=true pallette to work with ...


<div id=mydiv onfocus='setTimeout(alte, 1000);' ondblclick="this.innerHTML='';" onclick='stamp(event);' title='Click and type and see the cursor change as you use Alt or Shift or Control that can be reset via Caps Lock with a click copying cursor into content ... RJM Programming ... May, 2022 ... thanks to https://picsum.photos/ Lorem Picsum You can change emojis if you know the \002602 form of UTF-16 (hex) entry (our example is umbrella and if you express it as \\002602 that leaves cursor just as your emoji). Double click existant foreground emoji element to clear all the foreground emoji elements.' spellcheck='false' contenteditable=true style='width:100vw;height:100%;color:transparent;text-color:transparent;' onkeypress=kpcursorlook(event); onkeydown=cursorlook(event); onmousemove=xycursorlook(event); ontouchmove=xycursorlook(event);></div>

It's "title" attribute now talks about two new pieces of functionality, those being ...

  • You can change emojis if you know the \002602 form of UTF-16 (hex) entry (our example is umbrella and if you express it as \\002602 that leaves cursor just as your emoji).
  • Double click existant foreground emoji element to clear all the foreground emoji elements.

The choice of keyboard input methodology also suits CSS "content" property definitions as one backslash followed by a hexidecimal value left padded with zeroes to a length of six. See us doing this below for an umbrella emoji (which could also be expressed in an HTML hexadecimal entity way &#x2602; ☂ the information for which you can find at Unicode Character 'UMBRELLA' (U+2602) we normally get to by entering "U+2602" at a web browser address bar, the knowledge for which we arrive at via entering "umbrella emojipedia" and moving down the top link's webpage to find the "U+2602") ...


<style> #myumbrella::after { content: '\002602'; } </style>

... that feeds into some new "onkeypress" keyboard event logic ...


function kpcursorlook(evt) {
var atofa=['a','b','c','d','e','f'];
var rgbit='';
if (evt.keyCode == 92) {
if (newu.length == 1) { gro=true; } else { gro=false; }
newu=("\\").substring(0,1);
} else if (evt.keyCode >= 48 && evt.keyCode <= 57) {
newu+=('' + eval(-48 + evt.keyCode));
} else if (evt.keyCode >= 65 && evt.keyCode <= 70) {
newu+=('' + atofa[eval(-65 + evt.keyCode)]);
} else if (evt.keyCode >= 97 && evt.keyCode <= 102) {
newu+=('' + atofa[eval(-97 + evt.keyCode)]);
}
if (newu.length == 7) {
if (lastcursor.indexOf(("\\\\").substring(0,2)) != -1) {
rgbit=lastcursor.split(("\\\\").substring(0,2))[1].substring(6);
lastcursor=lastcursor.split(("\\\\").substring(0,2))[0] + ("\\").substring(0,1) + newu + rgbit;
document.head.innerHTML+='<style> html { cursor: ' + lastcursor + '; } </style>';
} else if (lastcursor.indexOf(("\\").substring(0,1)) != -1) {
rgbit=lastcursor.split(("\\").substring(0,1))[1].substring(6);
lastcursor=lastcursor.split(("\\").substring(0,1))[0] + newu + rgbit;
if (gro) {
lastcursor=lastcursor.replace('>Shift/Alt/Ctrl', '>').replace('>Shift', '>').replace('>Alt', '>').replace('>Ctrl', '>').replace(" width='126'", " width='20'").replace(" width='66'", " width='20'").replace(" height='48'", " height='20'").replace('0 0 100 100', '0 0 20 20');
}
document.head.innerHTML+='<style> html { cursor: ' + lastcursor + '; } </style>';
}
}
// console.log(evt.keyCode);
}

... in the changed "proof of concept" body_mouse_deepdive.html live run.

Stop Press

Two more "title" attribute pieces of functionality are now ...

  • With complex emoji entries do not zero leftpad until your last simple entity eg. \\1F6A3\200D\2640\00FE0F could define a Woman Rowing complex emoji.
  • Optionally make emojis bigger after \ with + two time multipliers.

The choice of keyboard input methodology also suits CSS "content" property definitions as one backslash followed by "first off" sets of HTML entities they should not left zero pad in their entry, followed by a last HTML entity hexidecimal value left padded with zeroes to a length of six to finish up with. See us doing this below for a woman rowing emoji (which could also be expressed in an HTML hexadecimal entity way &#x1f6a3;&#x0200d;&#x02640;&#x0fe0f; the information for which you can find at 🚣‍♀️ Woman Rowing Boat Emoji we normally get to by entering "woman rowing emoji" at the web browser address bar) ...


<style> #myrowing::after { content: '\01f6a3\00200d\002640\00fe0f'; } </style>

... in the changed "proof of concept" body_mouse_deepdive.html live run.


Previous relevant Keyboard Based Cursor Content Copy Tutorial is shown below.

Keyboard Based Cursor Content Copy Tutorial

Keyboard Based Cursor Content Copy Tutorial

The "onkeydown" keyboard event can involve in its logic three mouse event (event object) property usages that caught our interest recently ...

... and we wanted to have "keyboard" meets "mouse" events, along with the brilliance of Lorem Picsum regarding background image randomosity and quality, working with HTML ...


<div id=mydiv onfocus='setTimeout(alte, 1000);' onclick='stamp(this);' title='Click and type and see the cursor change as you use Alt or Shift or Control that can be reset via Caps Lock with a click copying cursor into content ... RJM Programming ... May, 2022 ... thanks to https://picsum.photos/ Lorem Picsum' spellcheck='false' contenteditable=true style='width:100vw;height:100%;color:transparent;text-color:transparent;' data-onkeypress=xycursorlook(event); onkeydown=cursorlook(event); onmousemove=xycursorlook(event); ontouchmove=xycursorlook(event);></div>

... in a way we hadn't tried before that called on some inhouse cursor SVG creations (and so is, alas, just a non-mobile fully featured experience), in the sense that ...

  1. keyboard helps creating the "what" regarding content ...

    <script type='text/javascript'>
    var lastkeymodifier=''
    var lastcursor="Url(\"data:image/svg+xml;utf8,<svg xmlns='//www.w3.org/2000/svg' width='126' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(0,255,0,0.3);fill:black;font-family:Verdana;font-size:16px;'><text y='80%'>Shift/Alt/Ctrl\\002753</text></svg>\") 16 0, crosshair";
    var pos3=-1, pos4=-1;
    var subdiv=1;
    var lastpos3=-2, lastpos4=-1;
    var allowable=false;

    function cursorlook(evt) {
    if (evt.altKey) {
    if (lastkeymodifier != 'alt') {
    lastcursor="Url(\"data:image/svg+xml;utf8,<svg xmlns='//www.w3.org/2000/svg' width='66' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(0,0,255,0.3);fill:black;font-family:Verdana;font-size:17px;'><text y='80%'>Alt\\01f3d5</text></svg>\") 16 0, progress";
    document.head.innerHTML+='<style> html { cursor: ' + lastcursor + '; } </style>';
    lastkeymodifier='alt';
    }
    } else if (evt.ctrlKey) {
    if (lastkeymodifier != 'ctrl') {
    lastcursor="Url(\"data:image/svg+xml;utf8,<svg xmlns='//www.w3.org/2000/svg' width='66' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(0,255,0,0.3);fill:black;font-family:Verdana;font-size:17px;'><text y='80%'>Ctrl\\01f333</text></svg>\") 16 0, pointer";
    document.head.innerHTML+='<style> html { cursor: ' + lastcursor + '; } </style>';
    lastkeymodifier='ctrl';
    }
    } else if (evt.shiftKey) {
    if (lastkeymodifier != 'shift') {
    lastcursor="Url(\"data:image/svg+xml;utf8,<svg xmlns='//www.w3.org/2000/svg' width='66' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(255,0,0,0.3);fill:black;font-family:Verdana;font-size:17px;'><text y='80%'>Shift\\01f389</text></svg>\") 16 0, grab";
    document.head.innerHTML+='<style> html { cursor: ' + lastcursor + '; } </style>';
    lastkeymodifier='shift';
    }
    } else {
    if (lastkeymodifier != '') {
    lastcursor="Url(\"data:image/svg+xml;utf8,<svg xmlns='//www.w3.org/2000/svg' width='126' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(0,255,0,0.3);fill:black;font-family:Verdana;font-size:16px;'><text y='80%'>Shift/Alt/Ctrl\\002753</text></svg>\") 16 0, crosshair";
    document.head.innerHTML+='<style> html { cursor: ' + lastcursor + '; } </style>';
    lastkeymodifier='';
    }
    }
    }
    </script>
  2. mouse "onmousemove" or "ontouchmove" helps with the "where" regarding content above ...

    <script type='text/javascript'>
    var pos3=-1, pos4=-1;
    var subdiv=1;
    var lastpos3=-2, lastpos4=-1;
    var allowable=false;

    function xycursorlook(e) {
    e = e || window.event;
    e.preventDefault();

    if (e.touches) {
    if (e.touches[0].pageX) {
    pos3 = e.touches[0].pageX;
    pos4 = e.touches[0].pageY;
    } else {
    pos3 = e.touches[0].clientX;
    pos4 = e.touches[0].clientY;
    }
    //console.log('pos3=' + pos3 + ',pos4=' + pos4);
    } else if (e.clientX || e.clientY) {
    pos3 = e.clientX;
    pos4 = e.clientY;
    } else {
    pos3 = e.pageX;
    pos4 = e.pageY;
    }
    }
    </script>
  3. preparations for "onclick" way a cursor can be plonked into (real lasting) content ...

    <script type='text/javascript'>
    var lastcursor="Url(\"data:image/svg+xml;utf8,<svg xmlns='//www.w3.org/2000/svg' width='126' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(0,255,0,0.3);fill:black;font-family:Verdana;font-size:16px;'><text y='80%'>Shift/Alt/Ctrl\\002753</text></svg>\") 16 0, crosshair";
    var pos3=-1, pos4=-1;
    var subdiv=1;
    var lastpos3=-2, lastpos4=-1;
    var allowable=false;

    function stamp(divo) {
    if (('' + pos3).indexOf('-') == -1) {
    if (allowable) {
    //if (allowed) {
    //allowed=false;
    //setTimeout(reseta, 2000);
    divo.innerHTML+='<div id=div' + subdiv + ' style="position:absolute;top:' + pos4 + 'px;left:' + pos3 + 'px;width:126px;height:48px;background-color:transparent;"></div><style> #div' + subdiv + ' { background:' + lastcursor.split(') ')[0] + ') no-repeat; } </style>';
    subdiv++;
    //console.log('lastpos4=' + lastpos4 + ' and pos4=' + pos4);
    //console.log('lastpos3=' + lastpos3 + ' and pos3=' + pos3);
    lastpos3=pos3;
    lastpos4=pos4;
    //}
    }
    }
    }
    </script>

... with the "proof of concept" body_mouse_deepdive.html live run.

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


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


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


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


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


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

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

Keyboard Based Cursor Multiple Background Images Tutorial

Keyboard Based Cursor Multiple Background Images Tutorial

Keyboard Based Cursor Multiple Background Images Tutorial

For the images, those background ones, used in the recent Canvas Graphics Editing in Zoomed Webpage Tutorial, we use the great Lorem Picsum resource. So far that has been the one background image covering the background of the webpage …


<style>

body {
display: inline-block;
font-size: 128px;
line-height: 1.2;
text-align: center;
background: url(//picsum.photos/1000/1000) center center no-repeat;
background-size: cover;
background-clip: text;
-webkit-background-clip: text;


color: rgba(255,0,0,0.6);

span { color: transparent; }
}

div {
background-color: transparent;
caret-color: transparent;
}

@media only screen and (max-width: 1000px) {
div {
background: url(//picsum.photos/1000/1000) center center no-repeat;
}
}

div:focus {
outline: none !important;
}

html {
height: 100%;
display: flex;
cursor: Url("data:image/svg+xml;utf8,<svg xmlns='//www.w3.org/2000/svg' width='126' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(0,255,0,0.3);fill:black;font-family:Verdana;font-size:16px;'><text y='80%'>Shift/Alt/Ctrl\002753</text></svg>") 16 0, crosshair;
}

</style>

… nominally background-positioned “center center”. But there are 9 background-position of that similar ilk available …

  • top left
  • top center
  • top right
  • center left
  • center center
  • center right
  • bottom left
  • bottom center
  • bottom right

… which we’d like to, optionally, be involved with how a user users our changed body_mouse_deepdive.html‘s “parent” single background image web application (or, for example, “parent” four background image web application).

So, how to make it be able to be controlled by those users? Well, those previous keyboard logics involving emojis always involved a leading “\” backslash, so that leaves open numbers from 1 to 9 entered as a first keyboard character entered meaning that that is how many background images is wanted by that user

Click and type and see the cursor change as you use Alt or Shift or Control that can be reset via Caps Lock with a click copying cursor into content … RJM Programming … May, 2022 … thanks to https://picsum.photos/ Lorem Picsum You can change emojis if you know the \002602 form of UTF-16 (hex) entry (our example is umbrella and if you express it as \\002602 that leaves cursor just as your emoji). Double click existant foreground emoji element to clear all the foreground emoji elements. With complex emoji entries do not zero leftpad until your last simple entity eg. \\1F6A3\200D\2640\00FE0F could define a Woman Rowing complex emoji. Optionally make emojis bigger after \ with + two time multipliers. Share with email or SMS happens via screenshots (macOS control-command-shift-3 or Windows Prnt-Scrn) followed by File menu Paste option causing chance to share after which File menu Undo can remove pasted part as required. If first key is from 1 to 9 that will be number of background images displayed.

… supported by …


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

if (numbi != '') {
if (eval('' + numbi) == 2) {
document.head.innerHTML+='<style> #mydiv, body { background: url(//picsum.photos/1000/1000?random=76547646), url(//picsum.photos/1000/1000?random=76147646); background-position: top left, top right; background-size: 50% 100%, 50% 100%; background-repeat: no-repeat, no-repeat; } </style>';
} else if (eval('' + numbi) == 3) {
document.head.innerHTML+='<style> #mydiv, body { background: url(//picsum.photos/1000/1000?random=76547646), url(//picsum.photos/1000/1000?random=70147646), url(//picsum.photos/1000/1000?random=76147646); background-position: top left, top center, top right; background-size: 33% 100%, 34% 100%, 33% 100%; background-repeat: no-repeat, no-repeat, no-repeat; } </style>';
} else if (eval('' + numbi) == 4) {
document.head.innerHTML+='<style> #mydiv, body { background: url(//picsum.photos/1000/1000?random=76547646), url(//picsum.photos/1000/1000?random=70143646), url(//picsum.photos/1000/1000?random=70147646), url(//picsum.photos/1000/1000?random=76147646); background-position: top left, top right, bottom left, bottom right; background-size: 50% 50%, 50% 50%, 50% 50%, 50% 50%; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat; } </style>';
} else if (eval('' + numbi) == 5) {
document.head.innerHTML+='<style> #mydiv, body { background: url(//picsum.photos/1000/1000?random=76547646), url(//picsum.photos/1000/1000?random=70143646), url(//picsum.photos/1000/1000?random=50147646), url(//picsum.photos/1000/1000?random=70147646), url(//picsum.photos/1000/1000?random=76147646); background-position: top left, top center, top right, bottom left, bottom right; background-size: 33% 50%, 34% 50%, 33% 50%, 50% 50%, 50% 50%; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; } </style>';
} else if (eval('' + numbi) == 6) {
document.head.innerHTML+='<style> #mydiv, body { background: url(//picsum.photos/1000/1000?random=76547646), url(//picsum.photos/1000/1000?random=10143646), url(//picsum.photos/1000/1000?random=70143646), url(//picsum.photos/1000/1000?random=50147646), url(//picsum.photos/1000/1000?random=70147646), url(//picsum.photos/1000/1000?random=76147646); background-position: top left, top center, top right, bottom left, bottom center, bottom right; background-size: 33% 50%, 34% 50%, 33% 50%, 33% 50%, 34% 50%, 33% 50%; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; } </style>';
} else if (eval('' + numbi) == 7) {
document.head.innerHTML+='<style> #mydiv, body { background: url(//picsum.photos/1000/1000?random=76547646), url(//picsum.photos/1000/1000?random=27143646), url(//picsum.photos/1000/1000?random=10143646), url(//picsum.photos/1000/1000?random=70143646), url(//picsum.photos/1000/1000?random=50147646), url(//picsum.photos/1000/1000?random=70147646), url(//picsum.photos/1000/1000?random=76147646); background-position: top left, top center, top right, center center, bottom left, bottom center, bottom right; background-size: 33% 50%, 34% 33%, 33% 50%, 34% 34%, 33% 50%, 34% 33%, 33% 50%; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; } </style>';
} else if (eval('' + numbi) == 8) {
document.head.innerHTML+='<style> #mydiv, body { background: url(//picsum.photos/1000/1000?random=76547646), url(//picsum.photos/1000/1000?random=27143646), url(//picsum.photos/1000/1000?random=87123646), url(//picsum.photos/1000/1000?random=10143646), url(//picsum.photos/1000/1000?random=70143646), url(//picsum.photos/1000/1000?random=50147646), url(//picsum.photos/1000/1000?random=70147646), url(//picsum.photos/1000/1000?random=76147646); background-position: top left, top center, top right, center left, center center, bottom left, bottom center, bottom right; background-size: 33% 33%, 34% 33%, 33% 50%, 33% 34%, 34% 34%, 33% 33%, 34% 33%, 33% 50%; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; } </style>';
} else if (eval('' + numbi) == 9) {
document.head.innerHTML+='<style> #mydiv, body { background: url(//picsum.photos/1000/1000?random=76547646), url(//picsum.photos/1000/1000?random=27143646), url(//picsum.photos/1000/1000?random=67143446), url(//picsum.photos/1000/1000?random=87123646), url(//picsum.photos/1000/1000?random=10143646), url(//picsum.photos/1000/1000?random=70143646), url(//picsum.photos/1000/1000?random=50147646), url(//picsum.photos/1000/1000?random=70147646), url(//picsum.photos/1000/1000?random=76147646); background-position: top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right; background-size: 33% 33%, 34% 33%, 33% 33%, 33% 34%, 34% 34%, 33% 34%, 33% 33%, 34% 33%, 33% 33%; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; } </style>';
}
}


function reduce(invl) {
if (('' + invl).trim() == '') { return '1'; }
if (('' + invl).trim().replace(/0/g,'').replace(/1/g,'').replace(/0/g,'').replace(/2/g,'').replace(/3/g,'').replace(/4/g,'').replace(/5/g,'').replace(/6/g,'').replace(/7/g,'').replace(/8/g,'').replace(/9/g,'') != '') { return '1'; }
var retval=0, ij=0;
var cinvl='' + invl;
var xcinvl='';
for (ij=0; ij<cinvl.length; ij++) {
if (cinvl.substring(ij).substring(0,1) != '-') {
retval+=eval(cinvl.substring(ij).substring(0,1));
}
}
xcinvl='' + retval;
while (xcinvl.length > 1) {
retval=0;
for (ij=0; ij<xcinvl.length; ij++) {
if (xcinvl.substring(ij).substring(0,1) != '-') {
retval+=eval(xcinvl.substring(ij).substring(0,1));
}
}
xcinvl='' + retval;
}
if (retval == 0) { retval=1; }
return '' + retval;
}


Previous relevant Keyboard Based Cursor Canvas Content Copy Tutorial is shown below.

Keyboard Based Cursor Canvas Content Copy Tutorial

Keyboard Based Cursor Canvas Content Copy Tutorial

You may have noticed with yesterday’s Keyboard Based Cursor Share Content Copy Tutorial, crucial to the sharing code, was the use of the incredible HTML5 introduced canvas element, helped by that middleperson link to those public email and SMS sharing conduits, overseeing the great random Lorem Picsum background images and user created emoji and/or text initial annotations.

And this got us wondering whether there was a private (ie. inhouse) web application of the past that could further value add as another optional middleperson tool for (user) personalization (of the content) purposes. And yes, do you remember the canvas work involved in the featured web application of Emoji Borders and Backgrounds Canvas Annotation Tutorial?

It uses an interesting approach with the transference of data across from a canvas in one application to the canvas in that user_of_signature_signature.htm web application. Once our changed body_mouse_deepdive.html‘s “parent” web application has organized its canvas contents, it’s just a matter of …


var awo=null;
awo=window.open('./user_of_signature_signature.htm','_blank','top=100,left=100,width=800,height=800');

… for the “child” canvas annotator to effectively “suck up” the canvas data into its canvas via …


var cancont='';
var elemode=location.search.split('elemode=')[1] ? (location.search.split('elemode=')[1].split('&')[0]) : "canvas";

if (('' + window.opener).replace('null','') != '') {
var cans=window.opener.document.getElementsByTagName(elemode);
if (cans.length > 0) {
if (elemode == 'img') {
cancont=cans[0].src;
} else {
cancont=cans[0].toDataURL('image/png');
}
if (cancontw < 0 && canconth < 0) { cancontw=cans[0].width; canconth=cans[0].height; } } }

... possible because both "parent" and "child" exist on the same RJM Programming domain (web server).

Once there, another woooooorrrrrlllddd of image manipulations, via canvas, can await the user, perhaps ready for ongoing sharing possibilities with that "child".


Previous relevant Keyboard Based Cursor Share Content Copy Tutorial is shown below.

Keyboard Based Cursor Share Content Copy Tutorial

Keyboard Based Cursor Share Content Copy Tutorial

Yesterday's Keyboard Based Cursor Personalized Content Copy Tutorial has probably reached a point where some sharing mechanism is apt, for accountability and usefulness purposes, at the very least, regarding our recent web application allowing for foreground content on top of a random Lorem Picsum background image.

We've been helped out greatly by javascript - Can I take a screenshot from the clipboard? - Stack Overflow and html - How to render a blob on a canvas element? - Stack Overflow in the following new relevant Javascript code ...


function renderNoImage(canvas, blob) { // thanks to https://stackoverflow.com/questions/38004917/how-to-render-a-blob-on-a-canvas-element
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = (event) => {
URL.revokeObjectURL(event.target.src) // This is important. If you are not using the blob, you should release it if you don't want to reuse it. It's good for memory.
ctx.drawImage(event.target, 0, 0)
img.style.display='none';
img.style.zIndex='-123';
};
img.src = URL.createObjectURL(blob);
}


function renderImage(canvas, blob) { // thanks to https://stackoverflow.com/questions/38004917/how-to-render-a-blob-on-a-canvas-element
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = (event) => {
URL.revokeObjectURL(event.target.src) // This is important. If you are not using the blob, you should release it if you don't want to reuse it. It's good for memory.
ctx.drawImage(event.target, 0, 0)
};
img.src = URL.createObjectURL(blob);
}


addEventListener("paste", ev => { // thanks to https://stackoverflow.com/questions/55559432/can-i-take-a-screenshot-from-the-clipboard
for(const item of ev.clipboardData.items) { /// Clipboard may contain multiple elements of different type -- text, image, etc
if(item.type.startsWith("image/")) { /// We are only interested in clipboard data that is an image
if (emailee == '') {
emailee=prompt('Your clipboard has a useful image you could share the image with. Optionally, please enter an email address or SMS number to share with.');
if (emailee == null) { emailee=''; }
}
if (emailee.indexOf('@') != -1) {
document.getElementById('mydiv').style.overflow='scroll';
document.getElementById('mycanvas').innerHTML='<br><canvas style="position:absolute;z-index:98;top:0px;left:0px;" id=thecanvas width=' + screen.width + ' height=' + screen.height + '></canvas>';
elem=document.getElementById('thecanvas');
context=elem.getContext('2d');
renderImage(elem, item.getAsFile()); //context.drawImage(item.getAsFile(), 0, 0);
document.getElementById('aemail').href=document.getElementById('aemail').href.replace(':?', ':' + emailee + '?');
document.getElementById('aemail').click();
document.getElementById('mycanvas').innerHTML='';
} else if (emailee != '' && emailee.replace(/0/g,'').replace(/1/g,'').replace(/2/g,'').replace(/3/g,'').replace(/4/g,'').replace(/5/g,'').replace(/6/g,'').replace(/7/g,'').replace(/8/g,'').replace(/9/g,'') == '') {
document.getElementById('mydiv').style.overflow='scroll';
document.getElementById('mycanvas').innerHTML='<br><canvas style="position:absolute;z-index:98;top:0px;left:0px;" id=thecanvas width=' + screen.width + ' height=' + screen.height + '></canvas>';
elem=document.getElementById('thecanvas');
context=elem.getContext('2d');
renderImage(elem, item.getAsFile()); //context.drawImage(item.getAsFile(), 0, 0);
document.getElementById('asms').href=document.getElementById('asms').href.replace(':&', ':' + emailee + '&');
document.getElementById('asms').click();
document.getElementById('mycanvas').innerHTML='';
} else {
//document.getElementById('mydiv').style.overflow='scroll';
document.getElementById('mycanvas').innerHTML='<br><canvas style="display:none;position:absolute;z-index:-98;top:0px;left:0px;" id=thecanvas width=' + screen.width + ' height=' + screen.height + '></canvas>';
elem=document.getElementById('thecanvas');
context=elem.getContext('2d');
renderNoImage(elem, item.getAsFile()); //context.drawImage(item.getAsFile(), 0, 0);
document.getElementById('mycanvas').innerHTML='';
}
}
}
});

... which is explained to the user in the following way ...

Share with email or SMS happens via screenshots (macOS control-command-shift-3 or Windows Prnt-Scrn) followed by File menu Paste option causing chance to share after which File menu Undo can remove pasted part as required.

... in the changed "proof of concept" body_mouse_deepdive.html live run.


Previous relevant Keyboard Based Cursor Personalized Content Copy Tutorial is shown below.

Keyboard Based Cursor Personalized Content Copy Tutorial

Keyboard Based Cursor Personalized Content Copy Tutorial

On top of yesterday's Keyboard Based Cursor Content Copy Tutorial we wanted to offer the user the chance for them to tailor their foreground content on top of the Lorem Picsum background image.

The user can enter this via the keyboard because there is an HTML div contenteditable=true pallette to work with ...


<div id=mydiv onfocus='setTimeout(alte, 1000);' ondblclick="this.innerHTML='';" onclick='stamp(event);' title='Click and type and see the cursor change as you use Alt or Shift or Control that can be reset via Caps Lock with a click copying cursor into content ... RJM Programming ... May, 2022 ... thanks to https://picsum.photos/ Lorem Picsum You can change emojis if you know the \002602 form of UTF-16 (hex) entry (our example is umbrella and if you express it as \\002602 that leaves cursor just as your emoji). Double click existant foreground emoji element to clear all the foreground emoji elements.' spellcheck='false' contenteditable=true style='width:100vw;height:100%;color:transparent;text-color:transparent;' onkeypress=kpcursorlook(event); onkeydown=cursorlook(event); onmousemove=xycursorlook(event); ontouchmove=xycursorlook(event);></div>

It's "title" attribute now talks about two new pieces of functionality, those being ...

  • You can change emojis if you know the \002602 form of UTF-16 (hex) entry (our example is umbrella and if you express it as \\002602 that leaves cursor just as your emoji).
  • Double click existant foreground emoji element to clear all the foreground emoji elements.

The choice of keyboard input methodology also suits CSS "content" property definitions as one backslash followed by a hexidecimal value left padded with zeroes to a length of six. See us doing this below for an umbrella emoji (which could also be expressed in an HTML hexadecimal entity way &#x2602; ☂ the information for which you can find at Unicode Character 'UMBRELLA' (U+2602) we normally get to by entering "U+2602" at a web browser address bar, the knowledge for which we arrive at via entering "umbrella emojipedia" and moving down the top link's webpage to find the "U+2602") ...


<style> #myumbrella::after { content: '\002602'; } </style>

... that feeds into some new "onkeypress" keyboard event logic ...


function kpcursorlook(evt) {
var atofa=['a','b','c','d','e','f'];
var rgbit='';
if (evt.keyCode == 92) {
if (newu.length == 1) { gro=true; } else { gro=false; }
newu=("\\").substring(0,1);
} else if (evt.keyCode >= 48 && evt.keyCode <= 57) {
newu+=('' + eval(-48 + evt.keyCode));
} else if (evt.keyCode >= 65 && evt.keyCode <= 70) {
newu+=('' + atofa[eval(-65 + evt.keyCode)]);
} else if (evt.keyCode >= 97 && evt.keyCode <= 102) {
newu+=('' + atofa[eval(-97 + evt.keyCode)]);
}
if (newu.length == 7) {
if (lastcursor.indexOf(("\\\\").substring(0,2)) != -1) {
rgbit=lastcursor.split(("\\\\").substring(0,2))[1].substring(6);
lastcursor=lastcursor.split(("\\\\").substring(0,2))[0] + ("\\").substring(0,1) + newu + rgbit;
document.head.innerHTML+='<style> html { cursor: ' + lastcursor + '; } </style>';
} else if (lastcursor.indexOf(("\\").substring(0,1)) != -1) {
rgbit=lastcursor.split(("\\").substring(0,1))[1].substring(6);
lastcursor=lastcursor.split(("\\").substring(0,1))[0] + newu + rgbit;
if (gro) {
lastcursor=lastcursor.replace('>Shift/Alt/Ctrl', '>').replace('>Shift', '>').replace('>Alt', '>').replace('>Ctrl', '>').replace(" width='126'", " width='20'").replace(" width='66'", " width='20'").replace(" height='48'", " height='20'").replace('0 0 100 100', '0 0 20 20');
}
document.head.innerHTML+='<style> html { cursor: ' + lastcursor + '; } </style>';
}
}
// console.log(evt.keyCode);
}

... in the changed "proof of concept" body_mouse_deepdive.html live run.

Stop Press

Two more "title" attribute pieces of functionality are now ...

  • With complex emoji entries do not zero leftpad until your last simple entity eg. \\1F6A3\200D\2640\00FE0F could define a Woman Rowing complex emoji.
  • Optionally make emojis bigger after \ with + two time multipliers.

The choice of keyboard input methodology also suits CSS "content" property definitions as one backslash followed by "first off" sets of HTML entities they should not left zero pad in their entry, followed by a last HTML entity hexidecimal value left padded with zeroes to a length of six to finish up with. See us doing this below for a woman rowing emoji (which could also be expressed in an HTML hexadecimal entity way &#x1f6a3;&#x0200d;&#x02640;&#x0fe0f; the information for which you can find at 🚣‍♀️ Woman Rowing Boat Emoji we normally get to by entering "woman rowing emoji" at the web browser address bar) ...


<style> #myrowing::after { content: '\01f6a3\00200d\002640\00fe0f'; } </style>

... in the changed "proof of concept" body_mouse_deepdive.html live run.


Previous relevant Keyboard Based Cursor Content Copy Tutorial is shown below.

Keyboard Based Cursor Content Copy Tutorial

Keyboard Based Cursor Content Copy Tutorial

The "onkeydown" keyboard event can involve in its logic three mouse event (event object) property usages that caught our interest recently ...

... and we wanted to have "keyboard" meets "mouse" events, along with the brilliance of Lorem Picsum regarding background image randomosity and quality, working with HTML ...


<div id=mydiv onfocus='setTimeout(alte, 1000);' onclick='stamp(this);' title='Click and type and see the cursor change as you use Alt or Shift or Control that can be reset via Caps Lock with a click copying cursor into content ... RJM Programming ... May, 2022 ... thanks to https://picsum.photos/ Lorem Picsum' spellcheck='false' contenteditable=true style='width:100vw;height:100%;color:transparent;text-color:transparent;' data-onkeypress=xycursorlook(event); onkeydown=cursorlook(event); onmousemove=xycursorlook(event); ontouchmove=xycursorlook(event);></div>

... in a way we hadn't tried before that called on some inhouse cursor SVG creations (and so is, alas, just a non-mobile fully featured experience), in the sense that ...

  1. keyboard helps creating the "what" regarding content ...

    <script type='text/javascript'>
    var lastkeymodifier=''
    var lastcursor="Url(\"data:image/svg+xml;utf8,<svg xmlns='//www.w3.org/2000/svg' width='126' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(0,255,0,0.3);fill:black;font-family:Verdana;font-size:16px;'><text y='80%'>Shift/Alt/Ctrl\\002753</text></svg>\") 16 0, crosshair";
    var pos3=-1, pos4=-1;
    var subdiv=1;
    var lastpos3=-2, lastpos4=-1;
    var allowable=false;

    function cursorlook(evt) {
    if (evt.altKey) {
    if (lastkeymodifier != 'alt') {
    lastcursor="Url(\"data:image/svg+xml;utf8,<svg xmlns='//www.w3.org/2000/svg' width='66' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(0,0,255,0.3);fill:black;font-family:Verdana;font-size:17px;'><text y='80%'>Alt\\01f3d5</text></svg>\") 16 0, progress";
    document.head.innerHTML+='<style> html { cursor: ' + lastcursor + '; } </style>';
    lastkeymodifier='alt';
    }
    } else if (evt.ctrlKey) {
    if (lastkeymodifier != 'ctrl') {
    lastcursor="Url(\"data:image/svg+xml;utf8,<svg xmlns='//www.w3.org/2000/svg' width='66' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(0,255,0,0.3);fill:black;font-family:Verdana;font-size:17px;'><text y='80%'>Ctrl\\01f333</text></svg>\") 16 0, pointer";
    document.head.innerHTML+='<style> html { cursor: ' + lastcursor + '; } </style>';
    lastkeymodifier='ctrl';
    }
    } else if (evt.shiftKey) {
    if (lastkeymodifier != 'shift') {
    lastcursor="Url(\"data:image/svg+xml;utf8,<svg xmlns='//www.w3.org/2000/svg' width='66' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(255,0,0,0.3);fill:black;font-family:Verdana;font-size:17px;'><text y='80%'>Shift\\01f389</text></svg>\") 16 0, grab";
    document.head.innerHTML+='<style> html { cursor: ' + lastcursor + '; } </style>';
    lastkeymodifier='shift';
    }
    } else {
    if (lastkeymodifier != '') {
    lastcursor="Url(\"data:image/svg+xml;utf8,<svg xmlns='//www.w3.org/2000/svg' width='126' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(0,255,0,0.3);fill:black;font-family:Verdana;font-size:16px;'><text y='80%'>Shift/Alt/Ctrl\\002753</text></svg>\") 16 0, crosshair";
    document.head.innerHTML+='<style> html { cursor: ' + lastcursor + '; } </style>';
    lastkeymodifier='';
    }
    }
    }
    </script>
  2. mouse "onmousemove" or "ontouchmove" helps with the "where" regarding content above ...

    <script type='text/javascript'>
    var pos3=-1, pos4=-1;
    var subdiv=1;
    var lastpos3=-2, lastpos4=-1;
    var allowable=false;

    function xycursorlook(e) {
    e = e || window.event;
    e.preventDefault();

    if (e.touches) {
    if (e.touches[0].pageX) {
    pos3 = e.touches[0].pageX;
    pos4 = e.touches[0].pageY;
    } else {
    pos3 = e.touches[0].clientX;
    pos4 = e.touches[0].clientY;
    }
    //console.log('pos3=' + pos3 + ',pos4=' + pos4);
    } else if (e.clientX || e.clientY) {
    pos3 = e.clientX;
    pos4 = e.clientY;
    } else {
    pos3 = e.pageX;
    pos4 = e.pageY;
    }
    }
    </script>
  3. preparations for "onclick" way a cursor can be plonked into (real lasting) content ...

    <script type='text/javascript'>
    var lastcursor="Url(\"data:image/svg+xml;utf8,<svg xmlns='//www.w3.org/2000/svg' width='126' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(0,255,0,0.3);fill:black;font-family:Verdana;font-size:16px;'><text y='80%'>Shift/Alt/Ctrl\\002753</text></svg>\") 16 0, crosshair";
    var pos3=-1, pos4=-1;
    var subdiv=1;
    var lastpos3=-2, lastpos4=-1;
    var allowable=false;

    function stamp(divo) {
    if (('' + pos3).indexOf('-') == -1) {
    if (allowable) {
    //if (allowed) {
    //allowed=false;
    //setTimeout(reseta, 2000);
    divo.innerHTML+='<div id=div' + subdiv + ' style="position:absolute;top:' + pos4 + 'px;left:' + pos3 + 'px;width:126px;height:48px;background-color:transparent;"></div><style> #div' + subdiv + ' { background:' + lastcursor.split(') ')[0] + ') no-repeat; } </style>';
    subdiv++;
    //console.log('lastpos4=' + lastpos4 + ' and pos4=' + pos4);
    //console.log('lastpos3=' + lastpos3 + ' and pos3=' + pos3);
    lastpos3=pos3;
    lastpos4=pos4;
    //}
    }
    }
    }
    </script>

... with the "proof of concept" body_mouse_deepdive.html live run.

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


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


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


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


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

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

Clone Within Clone Ajax HTML Iframe Tutorial

Clone Within Clone Ajax HTML Iframe Tutorial

Clone Within Clone Ajax HTML Iframe Tutorial

Can Ajax return you HTML data, if you are okay with an asynchronous call?

Glad you asked. Yes.

And just such an idea features in our Clone Within Clone idea we want to show you as a proof of concept today.

With this Clone Within Clone idea we use an HTML iframe srcdoc attribute as the conduit to cloning a webpage HTML into an embedded iframe. And then we offer the user the nine second chance to keep the embedding going by clicking a link in time, to set up a hierarchy of one webpage as the top hierarchy for a hierarchy series of embedded iframe elements.

The Ajax Javascript code which results in HTML output is shown below helping populate the relevant HTML iframe srcdoc attribute


var zhr=null;
var zform=null;
var rawhtml='';

var calling=location.search.split('calling=')[1] ? decodeURIComponent(location.search.split('calling=')[1].split('&')[0]) : '' + ('' + document.referrer).replace('undefined','');
var qclick=false;
var countdown=9;
var lh=location.search.split('calling=')[1] ? decodeURIComponent(location.search.split('calling=')[1].split('&')[0]) : '0';
lh='' + eval(1 + eval('' + lh));
if (calling.indexOf('rjmprogramming.com.au/ITblog/clone-within-clone-ajax-html-iframe-tutorial') != -1 && eval('' + lh) == 1) { calling=''; }
if (eval('' + lh) > 1 && calling == '') { calling=' '; }

function stateChanged() {
if (zhr.readyState == 4) {
if (zhr.status == 200) {
rawhtml = zhr.response;

if (calling == '' || qclick) {
document.getElementById('myif').style.display='block';
if (rawhtml.indexOf('<span id="spancq">clicked</span>') != -1 && rawhtml.indexOf('></a>') != -1) {
document.getElementById('myif').srcdoc=rawhtml.replace(" : '0';", " : '" + lh + "';").replace('<span id="spancq">clicked</span>', '<span id="spancq"></span>').replace('></a>', '>click here</a>');
} else {
document.getElementById('myif').srcdoc=rawhtml.replace(" : '0';", " : '" + lh + "';");
}

if (calling != '') {
var sofarhh=eval(('' + parent.document.getElementById('myif').style.height).replace('px',''));
console.log('sofarhh=' + sofarhh);
parent.document.getElementById('myif').style.height='' + eval(sofarhh + eval(50 + eval('' + document.getElementsByTagName('div')[0].getBoundingClientRect().height))) + 'px';
parent.document.getElementById('myspan').innerHTML='' + lh;
}
}
}
}
}


function ajaxit() {
document.getElementById('acq').innerHTML='';
document.getElementById('acq').style.cursor='pointer';
document.getElementById('spancq').innerHTML='clicked';
countdown=0;
document.getElementById('more').innerHTML='';
document.getElementById('myif').style.width='' + eval(16 + eval('' + document.getElementsByTagName('h1')[0].getBoundingClientRect().width)) + 'px';
document.getElementById('myif').style.height='' + eval(50 + eval('' + document.getElementsByTagName('div')[0].getBoundingClientRect().height)) + 'px';
zhr = new XMLHttpRequest();
zform = new FormData();

document.getElementById('myh1').title='This Child level ' + lh;
console.log('Child level ' + lh);
zform.append('calling', '' + lh);
zhr.responseType='Document';
zhr.onreadystatechange=stateChanged;
zhr.open('get', './ajax_html.html', true);
zhr.send(zform);

}

… appearing in ajax_html.html‘s web application you can also try below (or click here if it is sitting there looking at you like a wet lettuce) …

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

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

Keyboard Based Cursor Canvas Content Copy Tutorial

Keyboard Based Cursor Canvas Content Copy Tutorial

Keyboard Based Cursor Canvas Content Copy Tutorial

You may have noticed with yesterday’s Keyboard Based Cursor Share Content Copy Tutorial, crucial to the sharing code, was the use of the incredible HTML5 introduced canvas element, helped by that middleperson link to those public email and SMS sharing conduits, overseeing the great random Lorem Picsum background images and user created emoji and/or text initial annotations.

And this got us wondering whether there was a private (ie. inhouse) web application of the past that could further value add as another optional middleperson tool for (user) personalization (of the content) purposes. And yes, do you remember the canvas work involved in the featured web application of Emoji Borders and Backgrounds Canvas Annotation Tutorial?

It uses an interesting approach with the transference of data across from a canvas in one application to the canvas in that user_of_signature_signature.htm web application. Once our changed body_mouse_deepdive.html‘s “parent” web application has organized its canvas contents, it’s just a matter of …


var awo=null;
awo=window.open('./user_of_signature_signature.htm','_blank','top=100,left=100,width=800,height=800');

for the “child” canvas annotator to effectively “suck up” the canvas data into its canvas via …


var cancont='';
var elemode=location.search.split('elemode=')[1] ? (location.search.split('elemode=')[1].split('&')[0]) : "canvas";

if (('' + window.opener).replace('null','') != '') {
var cans=window.opener.document.getElementsByTagName(elemode);
if (cans.length > 0) {
if (elemode == 'img') {
cancont=cans[0].src;
} else {
cancont=cans[0].toDataURL('image/png');
}
if (cancontw < 0 && canconth < 0) { cancontw=cans[0].width; canconth=cans[0].height; } } }

... possible because both "parent" and "child" exist on the same RJM Programming domain (web server).

Once there, another woooooorrrrrlllddd of image manipulations, via canvas, can await the user, perhaps ready for ongoing sharing possibilities with that "child".


Previous relevant Keyboard Based Cursor Share Content Copy Tutorial is shown below.

Keyboard Based Cursor Share Content Copy Tutorial

Keyboard Based Cursor Share Content Copy Tutorial

Yesterday's Keyboard Based Cursor Personalized Content Copy Tutorial has probably reached a point where some sharing mechanism is apt, for accountability and usefulness purposes, at the very least, regarding our recent web application allowing for foreground content on top of a random Lorem Picsum background image.

We've been helped out greatly by javascript - Can I take a screenshot from the clipboard? - Stack Overflow and html - How to render a blob on a canvas element? - Stack Overflow in the following new relevant Javascript code ...


function renderNoImage(canvas, blob) { // thanks to https://stackoverflow.com/questions/38004917/how-to-render-a-blob-on-a-canvas-element
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = (event) => {
URL.revokeObjectURL(event.target.src) // This is important. If you are not using the blob, you should release it if you don't want to reuse it. It's good for memory.
ctx.drawImage(event.target, 0, 0)
img.style.display='none';
img.style.zIndex='-123';
};
img.src = URL.createObjectURL(blob);
}


function renderImage(canvas, blob) { // thanks to https://stackoverflow.com/questions/38004917/how-to-render-a-blob-on-a-canvas-element
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = (event) => {
URL.revokeObjectURL(event.target.src) // This is important. If you are not using the blob, you should release it if you don't want to reuse it. It's good for memory.
ctx.drawImage(event.target, 0, 0)
};
img.src = URL.createObjectURL(blob);
}


addEventListener("paste", ev => { // thanks to https://stackoverflow.com/questions/55559432/can-i-take-a-screenshot-from-the-clipboard
for(const item of ev.clipboardData.items) { /// Clipboard may contain multiple elements of different type -- text, image, etc
if(item.type.startsWith("image/")) { /// We are only interested in clipboard data that is an image
if (emailee == '') {
emailee=prompt('Your clipboard has a useful image you could share the image with. Optionally, please enter an email address or SMS number to share with.');
if (emailee == null) { emailee=''; }
}
if (emailee.indexOf('@') != -1) {
document.getElementById('mydiv').style.overflow='scroll';
document.getElementById('mycanvas').innerHTML='<br><canvas style="position:absolute;z-index:98;top:0px;left:0px;" id=thecanvas width=' + screen.width + ' height=' + screen.height + '></canvas>';
elem=document.getElementById('thecanvas');
context=elem.getContext('2d');
renderImage(elem, item.getAsFile()); //context.drawImage(item.getAsFile(), 0, 0);
document.getElementById('aemail').href=document.getElementById('aemail').href.replace(':?', ':' + emailee + '?');
document.getElementById('aemail').click();
document.getElementById('mycanvas').innerHTML='';
} else if (emailee != '' && emailee.replace(/0/g,'').replace(/1/g,'').replace(/2/g,'').replace(/3/g,'').replace(/4/g,'').replace(/5/g,'').replace(/6/g,'').replace(/7/g,'').replace(/8/g,'').replace(/9/g,'') == '') {
document.getElementById('mydiv').style.overflow='scroll';
document.getElementById('mycanvas').innerHTML='<br><canvas style="position:absolute;z-index:98;top:0px;left:0px;" id=thecanvas width=' + screen.width + ' height=' + screen.height + '></canvas>';
elem=document.getElementById('thecanvas');
context=elem.getContext('2d');
renderImage(elem, item.getAsFile()); //context.drawImage(item.getAsFile(), 0, 0);
document.getElementById('asms').href=document.getElementById('asms').href.replace(':&', ':' + emailee + '&');
document.getElementById('asms').click();
document.getElementById('mycanvas').innerHTML='';
} else {
//document.getElementById('mydiv').style.overflow='scroll';
document.getElementById('mycanvas').innerHTML='<br><canvas style="display:none;position:absolute;z-index:-98;top:0px;left:0px;" id=thecanvas width=' + screen.width + ' height=' + screen.height + '></canvas>';
elem=document.getElementById('thecanvas');
context=elem.getContext('2d');
renderNoImage(elem, item.getAsFile()); //context.drawImage(item.getAsFile(), 0, 0);
document.getElementById('mycanvas').innerHTML='';
}
}
}
});

... which is explained to the user in the following way ...

Share with email or SMS happens via screenshots (macOS control-command-shift-3 or Windows Prnt-Scrn) followed by File menu Paste option causing chance to share after which File menu Undo can remove pasted part as required.

... in the changed "proof of concept" body_mouse_deepdive.html live run.


Previous relevant Keyboard Based Cursor Personalized Content Copy Tutorial is shown below.

Keyboard Based Cursor Personalized Content Copy Tutorial

Keyboard Based Cursor Personalized Content Copy Tutorial

On top of yesterday's Keyboard Based Cursor Content Copy Tutorial we wanted to offer the user the chance for them to tailor their foreground content on top of the Lorem Picsum background image.

The user can enter this via the keyboard because there is an HTML div contenteditable=true pallette to work with ...


<div id=mydiv onfocus='setTimeout(alte, 1000);' ondblclick="this.innerHTML='';" onclick='stamp(event);' title='Click and type and see the cursor change as you use Alt or Shift or Control that can be reset via Caps Lock with a click copying cursor into content ... RJM Programming ... May, 2022 ... thanks to https://picsum.photos/ Lorem Picsum You can change emojis if you know the \002602 form of UTF-16 (hex) entry (our example is umbrella and if you express it as \\002602 that leaves cursor just as your emoji). Double click existant foreground emoji element to clear all the foreground emoji elements.' spellcheck='false' contenteditable=true style='width:100vw;height:100%;color:transparent;text-color:transparent;' onkeypress=kpcursorlook(event); onkeydown=cursorlook(event); onmousemove=xycursorlook(event); ontouchmove=xycursorlook(event);></div>

It's "title" attribute now talks about two new pieces of functionality, those being ...

  • You can change emojis if you know the \002602 form of UTF-16 (hex) entry (our example is umbrella and if you express it as \\002602 that leaves cursor just as your emoji).
  • Double click existant foreground emoji element to clear all the foreground emoji elements.

The choice of keyboard input methodology also suits CSS "content" property definitions as one backslash followed by a hexidecimal value left padded with zeroes to a length of six. See us doing this below for an umbrella emoji (which could also be expressed in an HTML hexadecimal entity way &#x2602; ☂ the information for which you can find at Unicode Character 'UMBRELLA' (U+2602) we normally get to by entering "U+2602" at a web browser address bar, the knowledge for which we arrive at via entering "umbrella emojipedia" and moving down the top link's webpage to find the "U+2602") ...


<style> #myumbrella::after { content: '\002602'; } </style>

... that feeds into some new "onkeypress" keyboard event logic ...


function kpcursorlook(evt) {
var atofa=['a','b','c','d','e','f'];
var rgbit='';
if (evt.keyCode == 92) {
if (newu.length == 1) { gro=true; } else { gro=false; }
newu=("\\").substring(0,1);
} else if (evt.keyCode >= 48 && evt.keyCode <= 57) {
newu+=('' + eval(-48 + evt.keyCode));
} else if (evt.keyCode >= 65 && evt.keyCode <= 70) {
newu+=('' + atofa[eval(-65 + evt.keyCode)]);
} else if (evt.keyCode >= 97 && evt.keyCode <= 102) {
newu+=('' + atofa[eval(-97 + evt.keyCode)]);
}
if (newu.length == 7) {
if (lastcursor.indexOf(("\\\\").substring(0,2)) != -1) {
rgbit=lastcursor.split(("\\\\").substring(0,2))[1].substring(6);
lastcursor=lastcursor.split(("\\\\").substring(0,2))[0] + ("\\").substring(0,1) + newu + rgbit;
document.head.innerHTML+='<style> html { cursor: ' + lastcursor + '; } </style>';
} else if (lastcursor.indexOf(("\\").substring(0,1)) != -1) {
rgbit=lastcursor.split(("\\").substring(0,1))[1].substring(6);
lastcursor=lastcursor.split(("\\").substring(0,1))[0] + newu + rgbit;
if (gro) {
lastcursor=lastcursor.replace('>Shift/Alt/Ctrl', '>').replace('>Shift', '>').replace('>Alt', '>').replace('>Ctrl', '>').replace(" width='126'", " width='20'").replace(" width='66'", " width='20'").replace(" height='48'", " height='20'").replace('0 0 100 100', '0 0 20 20');
}
document.head.innerHTML+='<style> html { cursor: ' + lastcursor + '; } </style>';
}
}
// console.log(evt.keyCode);
}

... in the changed "proof of concept" body_mouse_deepdive.html live run.

Stop Press

Two more "title" attribute pieces of functionality are now ...

  • With complex emoji entries do not zero leftpad until your last simple entity eg. \\1F6A3\200D\2640\00FE0F could define a Woman Rowing complex emoji.
  • Optionally make emojis bigger after \ with + two time multipliers.

The choice of keyboard input methodology also suits CSS "content" property definitions as one backslash followed by "first off" sets of HTML entities they should not left zero pad in their entry, followed by a last HTML entity hexidecimal value left padded with zeroes to a length of six to finish up with. See us doing this below for a woman rowing emoji (which could also be expressed in an HTML hexadecimal entity way &#x1f6a3;&#x0200d;&#x02640;&#x0fe0f; the information for which you can find at 🚣‍♀️ Woman Rowing Boat Emoji we normally get to by entering "woman rowing emoji" at the web browser address bar) ...


<style> #myrowing::after { content: '\01f6a3\00200d\002640\00fe0f'; } </style>

... in the changed "proof of concept" body_mouse_deepdive.html live run.


Previous relevant Keyboard Based Cursor Content Copy Tutorial is shown below.

Keyboard Based Cursor Content Copy Tutorial

Keyboard Based Cursor Content Copy Tutorial

The "onkeydown" keyboard event can involve in its logic three mouse event (event object) property usages that caught our interest recently ...

... and we wanted to have "keyboard" meets "mouse" events, along with the brilliance of Lorem Picsum regarding background image randomosity and quality, working with HTML ...


<div id=mydiv onfocus='setTimeout(alte, 1000);' onclick='stamp(this);' title='Click and type and see the cursor change as you use Alt or Shift or Control that can be reset via Caps Lock with a click copying cursor into content ... RJM Programming ... May, 2022 ... thanks to https://picsum.photos/ Lorem Picsum' spellcheck='false' contenteditable=true style='width:100vw;height:100%;color:transparent;text-color:transparent;' data-onkeypress=xycursorlook(event); onkeydown=cursorlook(event); onmousemove=xycursorlook(event); ontouchmove=xycursorlook(event);></div>

... in a way we hadn't tried before that called on some inhouse cursor SVG creations (and so is, alas, just a non-mobile fully featured experience), in the sense that ...

  1. keyboard helps creating the "what" regarding content ...

    <script type='text/javascript'>
    var lastkeymodifier=''
    var lastcursor="Url(\"data:image/svg+xml;utf8,<svg xmlns='//www.w3.org/2000/svg' width='126' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(0,255,0,0.3);fill:black;font-family:Verdana;font-size:16px;'><text y='80%'>Shift/Alt/Ctrl\\002753</text></svg>\") 16 0, crosshair";
    var pos3=-1, pos4=-1;
    var subdiv=1;
    var lastpos3=-2, lastpos4=-1;
    var allowable=false;

    function cursorlook(evt) {
    if (evt.altKey) {
    if (lastkeymodifier != 'alt') {
    lastcursor="Url(\"data:image/svg+xml;utf8,<svg xmlns='//www.w3.org/2000/svg' width='66' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(0,0,255,0.3);fill:black;font-family:Verdana;font-size:17px;'><text y='80%'>Alt\\01f3d5</text></svg>\") 16 0, progress";
    document.head.innerHTML+='<style> html { cursor: ' + lastcursor + '; } </style>';
    lastkeymodifier='alt';
    }
    } else if (evt.ctrlKey) {
    if (lastkeymodifier != 'ctrl') {
    lastcursor="Url(\"data:image/svg+xml;utf8,<svg xmlns='//www.w3.org/2000/svg' width='66' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(0,255,0,0.3);fill:black;font-family:Verdana;font-size:17px;'><text y='80%'>Ctrl\\01f333</text></svg>\") 16 0, pointer";
    document.head.innerHTML+='<style> html { cursor: ' + lastcursor + '; } </style>';
    lastkeymodifier='ctrl';
    }
    } else if (evt.shiftKey) {
    if (lastkeymodifier != 'shift') {
    lastcursor="Url(\"data:image/svg+xml;utf8,<svg xmlns='//www.w3.org/2000/svg' width='66' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(255,0,0,0.3);fill:black;font-family:Verdana;font-size:17px;'><text y='80%'>Shift\\01f389</text></svg>\") 16 0, grab";
    document.head.innerHTML+='<style> html { cursor: ' + lastcursor + '; } </style>';
    lastkeymodifier='shift';
    }
    } else {
    if (lastkeymodifier != '') {
    lastcursor="Url(\"data:image/svg+xml;utf8,<svg xmlns='//www.w3.org/2000/svg' width='126' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(0,255,0,0.3);fill:black;font-family:Verdana;font-size:16px;'><text y='80%'>Shift/Alt/Ctrl\\002753</text></svg>\") 16 0, crosshair";
    document.head.innerHTML+='<style> html { cursor: ' + lastcursor + '; } </style>';
    lastkeymodifier='';
    }
    }
    }
    </script>
  2. mouse "onmousemove" or "ontouchmove" helps with the "where" regarding content above ...

    <script type='text/javascript'>
    var pos3=-1, pos4=-1;
    var subdiv=1;
    var lastpos3=-2, lastpos4=-1;
    var allowable=false;

    function xycursorlook(e) {
    e = e || window.event;
    e.preventDefault();

    if (e.touches) {
    if (e.touches[0].pageX) {
    pos3 = e.touches[0].pageX;
    pos4 = e.touches[0].pageY;
    } else {
    pos3 = e.touches[0].clientX;
    pos4 = e.touches[0].clientY;
    }
    //console.log('pos3=' + pos3 + ',pos4=' + pos4);
    } else if (e.clientX || e.clientY) {
    pos3 = e.clientX;
    pos4 = e.clientY;
    } else {
    pos3 = e.pageX;
    pos4 = e.pageY;
    }
    }
    </script>
  3. preparations for "onclick" way a cursor can be plonked into (real lasting) content ...

    <script type='text/javascript'>
    var lastcursor="Url(\"data:image/svg+xml;utf8,<svg xmlns='//www.w3.org/2000/svg' width='126' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(0,255,0,0.3);fill:black;font-family:Verdana;font-size:16px;'><text y='80%'>Shift/Alt/Ctrl\\002753</text></svg>\") 16 0, crosshair";
    var pos3=-1, pos4=-1;
    var subdiv=1;
    var lastpos3=-2, lastpos4=-1;
    var allowable=false;

    function stamp(divo) {
    if (('' + pos3).indexOf('-') == -1) {
    if (allowable) {
    //if (allowed) {
    //allowed=false;
    //setTimeout(reseta, 2000);
    divo.innerHTML+='<div id=div' + subdiv + ' style="position:absolute;top:' + pos4 + 'px;left:' + pos3 + 'px;width:126px;height:48px;background-color:transparent;"></div><style> #div' + subdiv + ' { background:' + lastcursor.split(') ')[0] + ') no-repeat; } </style>';
    subdiv++;
    //console.log('lastpos4=' + lastpos4 + ' and pos4=' + pos4);
    //console.log('lastpos3=' + lastpos3 + ' and pos3=' + pos3);
    lastpos3=pos3;
    lastpos4=pos4;
    //}
    }
    }
    }
    </script>

... with the "proof of concept" body_mouse_deepdive.html live run.

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


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


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


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

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

Keyboard Based Cursor Share Content Copy Tutorial

Keyboard Based Cursor Share Content Copy Tutorial

Keyboard Based Cursor Share Content Copy Tutorial

Yesterday’s Keyboard Based Cursor Personalized Content Copy Tutorial has probably reached a point where some sharing mechanism is apt, for accountability and usefulness purposes, at the very least, regarding our recent web application allowing for foreground content on top of a random Lorem Picsum background image.

We’ve been helped out greatly by javascript – Can I take a screenshot from the clipboard? – Stack Overflow and html – How to render a blob on a canvas element? – Stack Overflow in the following new relevant Javascript code …


function renderNoImage(canvas, blob) { // thanks to https://stackoverflow.com/questions/38004917/how-to-render-a-blob-on-a-canvas-element
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = (event) => {
URL.revokeObjectURL(event.target.src) // This is important. If you are not using the blob, you should release it if you don't want to reuse it. It's good for memory.
ctx.drawImage(event.target, 0, 0)
img.style.display='none';
img.style.zIndex='-123';
};
img.src = URL.createObjectURL(blob);
}


function renderImage(canvas, blob) { // thanks to https://stackoverflow.com/questions/38004917/how-to-render-a-blob-on-a-canvas-element
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = (event) => {
URL.revokeObjectURL(event.target.src) // This is important. If you are not using the blob, you should release it if you don't want to reuse it. It's good for memory.
ctx.drawImage(event.target, 0, 0)
};
img.src = URL.createObjectURL(blob);
}


addEventListener("paste", ev => { // thanks to https://stackoverflow.com/questions/55559432/can-i-take-a-screenshot-from-the-clipboard
for(const item of ev.clipboardData.items) { /// Clipboard may contain multiple elements of different type -- text, image, etc
if(item.type.startsWith("image/")) { /// We are only interested in clipboard data that is an image
if (emailee == '') {
emailee=prompt('Your clipboard has a useful image you could share the image with. Optionally, please enter an email address or SMS number to share with.');
if (emailee == null) { emailee=''; }
}
if (emailee.indexOf('@') != -1) {
document.getElementById('mydiv').style.overflow='scroll';
document.getElementById('mycanvas').innerHTML='<br><canvas style="position:absolute;z-index:98;top:0px;left:0px;" id=thecanvas width=' + screen.width + ' height=' + screen.height + '></canvas>';
elem=document.getElementById('thecanvas');
context=elem.getContext('2d');
renderImage(elem, item.getAsFile()); //context.drawImage(item.getAsFile(), 0, 0);
document.getElementById('aemail').href=document.getElementById('aemail').href.replace(':?', ':' + emailee + '?');
document.getElementById('aemail').click();
document.getElementById('mycanvas').innerHTML='';
} else if (emailee != '' && emailee.replace(/0/g,'').replace(/1/g,'').replace(/2/g,'').replace(/3/g,'').replace(/4/g,'').replace(/5/g,'').replace(/6/g,'').replace(/7/g,'').replace(/8/g,'').replace(/9/g,'') == '') {
document.getElementById('mydiv').style.overflow='scroll';
document.getElementById('mycanvas').innerHTML='<br><canvas style="position:absolute;z-index:98;top:0px;left:0px;" id=thecanvas width=' + screen.width + ' height=' + screen.height + '></canvas>';
elem=document.getElementById('thecanvas');
context=elem.getContext('2d');
renderImage(elem, item.getAsFile()); //context.drawImage(item.getAsFile(), 0, 0);
document.getElementById('asms').href=document.getElementById('asms').href.replace(':&', ':' + emailee + '&');
document.getElementById('asms').click();
document.getElementById('mycanvas').innerHTML='';
} else {
//document.getElementById('mydiv').style.overflow='scroll';
document.getElementById('mycanvas').innerHTML='<br><canvas style="display:none;position:absolute;z-index:-98;top:0px;left:0px;" id=thecanvas width=' + screen.width + ' height=' + screen.height + '></canvas>';
elem=document.getElementById('thecanvas');
context=elem.getContext('2d');
renderNoImage(elem, item.getAsFile()); //context.drawImage(item.getAsFile(), 0, 0);
document.getElementById('mycanvas').innerHTML='';
}
}
}
});

… which is explained to the user in the following way …

Share with email or SMS happens via screenshots (macOS control-command-shift-3 or Windows Prnt-Scrn) followed by File menu Paste option causing chance to share after which File menu Undo can remove pasted part as required.

… in the changed “proof of concept” body_mouse_deepdive.html live run.


Previous relevant Keyboard Based Cursor Personalized Content Copy Tutorial is shown below.

Keyboard Based Cursor Personalized Content Copy Tutorial

Keyboard Based Cursor Personalized Content Copy Tutorial

On top of yesterday’s Keyboard Based Cursor Content Copy Tutorial we wanted to offer the user the chance for them to tailor their foreground content on top of the Lorem Picsum background image.

The user can enter this via the keyboard because there is an HTML div contenteditable=true pallette to work with …


<div id=mydiv onfocus='setTimeout(alte, 1000);' ondblclick="this.innerHTML='';" onclick='stamp(event);' title='Click and type and see the cursor change as you use Alt or Shift or Control that can be reset via Caps Lock with a click copying cursor into content ... RJM Programming ... May, 2022 ... thanks to https://picsum.photos/ Lorem Picsum You can change emojis if you know the \002602 form of UTF-16 (hex) entry (our example is umbrella and if you express it as \\002602 that leaves cursor just as your emoji). Double click existant foreground emoji element to clear all the foreground emoji elements.' spellcheck='false' contenteditable=true style='width:100vw;height:100%;color:transparent;text-color:transparent;' onkeypress=kpcursorlook(event); onkeydown=cursorlook(event); onmousemove=xycursorlook(event); ontouchmove=xycursorlook(event);></div>

It’s “title” attribute now talks about two new pieces of functionality, those being …

  • You can change emojis if you know the \002602 form of UTF-16 (hex) entry (our example is umbrella and if you express it as \\002602 that leaves cursor just as your emoji).
  • Double click existant foreground emoji element to clear all the foreground emoji elements.

The choice of keyboard input methodology also suits CSS “content” property definitions as one backslash followed by a hexidecimal value left padded with zeroes to a length of six. See us doing this below for an umbrella emoji (which could also be expressed in an HTML hexadecimal entity way &#x2602; ☂ the information for which you can find at Unicode Character ‘UMBRELLA’ (U+2602) we normally get to by entering “U+2602″ at a web browser address bar, the knowledge for which we arrive at via entering “umbrella emojipedia” and moving down the top link’s webpage to find the “U+2602″) …


<style> #myumbrella::after { content: '\002602'; } </style>

… that feeds into some new “onkeypress” keyboard event logic …


function kpcursorlook(evt) {
var atofa=['a','b','c','d','e','f'];
var rgbit='';
if (evt.keyCode == 92) {
if (newu.length == 1) { gro=true; } else { gro=false; }
newu=("\\").substring(0,1);
} else if (evt.keyCode >= 48 && evt.keyCode <= 57) {
newu+=('' + eval(-48 + evt.keyCode));
} else if (evt.keyCode >= 65 && evt.keyCode <= 70) {
newu+=('' + atofa[eval(-65 + evt.keyCode)]);
} else if (evt.keyCode >= 97 && evt.keyCode <= 102) {
newu+=('' + atofa[eval(-97 + evt.keyCode)]);
}
if (newu.length == 7) {
if (lastcursor.indexOf(("\\\\").substring(0,2)) != -1) {
rgbit=lastcursor.split(("\\\\").substring(0,2))[1].substring(6);
lastcursor=lastcursor.split(("\\\\").substring(0,2))[0] + ("\\").substring(0,1) + newu + rgbit;
document.head.innerHTML+='<style> html { cursor: ' + lastcursor + '; } </style>';
} else if (lastcursor.indexOf(("\\").substring(0,1)) != -1) {
rgbit=lastcursor.split(("\\").substring(0,1))[1].substring(6);
lastcursor=lastcursor.split(("\\").substring(0,1))[0] + newu + rgbit;
if (gro) {
lastcursor=lastcursor.replace('>Shift/Alt/Ctrl', '>').replace('>Shift', '>').replace('>Alt', '>').replace('>Ctrl', '>').replace(" width='126'", " width='20'").replace(" width='66'", " width='20'").replace(" height='48'", " height='20'").replace('0 0 100 100', '0 0 20 20');
}
document.head.innerHTML+='<style> html { cursor: ' + lastcursor + '; } </style>';
}
}
// console.log(evt.keyCode);
}

… in the changed “proof of concept” body_mouse_deepdive.html live run.

Stop Press

Two more “title” attribute pieces of functionality are now …

  • With complex emoji entries do not zero leftpad until your last simple entity eg. \\1F6A3\200D\2640\00FE0F could define a Woman Rowing complex emoji.
  • Optionally make emojis bigger after \ with + two time multipliers.

The choice of keyboard input methodology also suits CSS “content” property definitions as one backslash followed by “first off” sets of HTML entities they should not left zero pad in their entry, followed by a last HTML entity hexidecimal value left padded with zeroes to a length of six to finish up with. See us doing this below for a woman rowing emoji (which could also be expressed in an HTML hexadecimal entity way &#x1f6a3;&#x0200d;&#x02640;&#x0fe0f; the information for which you can find at 🚣‍♀️ Woman Rowing Boat Emoji we normally get to by entering “woman rowing emoji” at the web browser address bar) …


<style> #myrowing::after { content: '\01f6a3\00200d\002640\00fe0f'; } </style>

… in the changed “proof of concept” body_mouse_deepdive.html live run.


Previous relevant Keyboard Based Cursor Content Copy Tutorial is shown below.

Keyboard Based Cursor Content Copy Tutorial

Keyboard Based Cursor Content Copy Tutorial

The “onkeydown” keyboard event can involve in its logic three mouse event (event object) property usages that caught our interest recently …

… and we wanted to have “keyboard” meets “mouse” events, along with the brilliance of Lorem Picsum regarding background image randomosity and quality, working with HTML …


<div id=mydiv onfocus='setTimeout(alte, 1000);' onclick='stamp(this);' title='Click and type and see the cursor change as you use Alt or Shift or Control that can be reset via Caps Lock with a click copying cursor into content ... RJM Programming ... May, 2022 ... thanks to https://picsum.photos/ Lorem Picsum' spellcheck='false' contenteditable=true style='width:100vw;height:100%;color:transparent;text-color:transparent;' data-onkeypress=xycursorlook(event); onkeydown=cursorlook(event); onmousemove=xycursorlook(event); ontouchmove=xycursorlook(event);></div>

… in a way we hadn’t tried before that called on some inhouse cursor SVG creations (and so is, alas, just a non-mobile fully featured experience), in the sense that …

  1. keyboard helps creating the “what” regarding content …

    <script type='text/javascript'>
    var lastkeymodifier=''
    var lastcursor="Url(\"data:image/svg+xml;utf8,<svg xmlns='//www.w3.org/2000/svg' width='126' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(0,255,0,0.3);fill:black;font-family:Verdana;font-size:16px;'><text y='80%'>Shift/Alt/Ctrl\\002753</text></svg>\") 16 0, crosshair";
    var pos3=-1, pos4=-1;
    var subdiv=1;
    var lastpos3=-2, lastpos4=-1;
    var allowable=false;

    function cursorlook(evt) {
    if (evt.altKey) {
    if (lastkeymodifier != 'alt') {
    lastcursor="Url(\"data:image/svg+xml;utf8,<svg xmlns='//www.w3.org/2000/svg' width='66' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(0,0,255,0.3);fill:black;font-family:Verdana;font-size:17px;'><text y='80%'>Alt\\01f3d5</text></svg>\") 16 0, progress";
    document.head.innerHTML+='<style> html { cursor: ' + lastcursor + '; } </style>';
    lastkeymodifier='alt';
    }
    } else if (evt.ctrlKey) {
    if (lastkeymodifier != 'ctrl') {
    lastcursor="Url(\"data:image/svg+xml;utf8,<svg xmlns='//www.w3.org/2000/svg' width='66' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(0,255,0,0.3);fill:black;font-family:Verdana;font-size:17px;'><text y='80%'>Ctrl\\01f333</text></svg>\") 16 0, pointer";
    document.head.innerHTML+='<style> html { cursor: ' + lastcursor + '; } </style>';
    lastkeymodifier='ctrl';
    }
    } else if (evt.shiftKey) {
    if (lastkeymodifier != 'shift') {
    lastcursor="Url(\"data:image/svg+xml;utf8,<svg xmlns='//www.w3.org/2000/svg' width='66' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(255,0,0,0.3);fill:black;font-family:Verdana;font-size:17px;'><text y='80%'>Shift\\01f389</text></svg>\") 16 0, grab";
    document.head.innerHTML+='<style> html { cursor: ' + lastcursor + '; } </style>';
    lastkeymodifier='shift';
    }
    } else {
    if (lastkeymodifier != '') {
    lastcursor="Url(\"data:image/svg+xml;utf8,<svg xmlns='//www.w3.org/2000/svg' width='126' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(0,255,0,0.3);fill:black;font-family:Verdana;font-size:16px;'><text y='80%'>Shift/Alt/Ctrl\\002753</text></svg>\") 16 0, crosshair";
    document.head.innerHTML+='<style> html { cursor: ' + lastcursor + '; } </style>';
    lastkeymodifier='';
    }
    }
    }
    </script>
  2. mouse “onmousemove” or “ontouchmove” helps with the “where” regarding content above …

    <script type='text/javascript'>
    var pos3=-1, pos4=-1;
    var subdiv=1;
    var lastpos3=-2, lastpos4=-1;
    var allowable=false;

    function xycursorlook(e) {
    e = e || window.event;
    e.preventDefault();

    if (e.touches) {
    if (e.touches[0].pageX) {
    pos3 = e.touches[0].pageX;
    pos4 = e.touches[0].pageY;
    } else {
    pos3 = e.touches[0].clientX;
    pos4 = e.touches[0].clientY;
    }
    //console.log('pos3=' + pos3 + ',pos4=' + pos4);
    } else if (e.clientX || e.clientY) {
    pos3 = e.clientX;
    pos4 = e.clientY;
    } else {
    pos3 = e.pageX;
    pos4 = e.pageY;
    }
    }
    </script>
  3. preparations for “onclick” way a cursor can be plonked into (real lasting) content …

    <script type='text/javascript'>
    var lastcursor="Url(\"data:image/svg+xml;utf8,<svg xmlns='//www.w3.org/2000/svg' width='126' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(0,255,0,0.3);fill:black;font-family:Verdana;font-size:16px;'><text y='80%'>Shift/Alt/Ctrl\\002753</text></svg>\") 16 0, crosshair";
    var pos3=-1, pos4=-1;
    var subdiv=1;
    var lastpos3=-2, lastpos4=-1;
    var allowable=false;

    function stamp(divo) {
    if (('' + pos3).indexOf('-') == -1) {
    if (allowable) {
    //if (allowed) {
    //allowed=false;
    //setTimeout(reseta, 2000);
    divo.innerHTML+='<div id=div' + subdiv + ' style="position:absolute;top:' + pos4 + 'px;left:' + pos3 + 'px;width:126px;height:48px;background-color:transparent;"></div><style> #div' + subdiv + ' { background:' + lastcursor.split(') ')[0] + ') no-repeat; } </style>';
    subdiv++;
    //console.log('lastpos4=' + lastpos4 + ' and pos4=' + pos4);
    //console.log('lastpos3=' + lastpos3 + ' and pos3=' + pos3);
    lastpos3=pos3;
    lastpos4=pos4;
    //}
    }
    }
    }
    </script>

… with the “proof of concept” body_mouse_deepdive.html live run.

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


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


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

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