{"id":66476,"date":"2025-01-09T03:01:00","date_gmt":"2025-01-08T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=66476"},"modified":"2025-01-08T16:44:15","modified_gmt":"2025-01-08T06:44:15","slug":"image-average-colour-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/image-average-colour-primer-tutorial\/","title":{"rendered":"Image Average Colour Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/image_average_colour.php\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Image Average Colour Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/image_average_colour.gif\" title=\"Image Average Colour Primer Tutorial\" id='ibq' data-onmouseover=' this.src=this.src.replace(\".jpg\",\".PNG\").replace(\".png\",\".jpg\").replace(\".PNG\",\".png\");   '  \/><\/a><p class=\"wp-caption-text\">Image Average Colour Primer Tutorial<\/p><\/div>\n<p>Have you ever wondered whether, regarding an img (ie. image) HTML element &#8230;<\/p>\n<ul>\n<li>a median RGB colour &#8230; and\/or &#8230;<\/li>\n<li>a mode RGB colour &#8230; and\/or &#8230;<\/li>\n<li>a mean (ie. average) RGB colour<\/li>\n<\/ul>\n<p> &#8230; are useful concepts?!  Well, we tried it, with our new PHP web application, and we&#8217;re doubtful &#8230; end of tutorial.<\/p>\n<p>.<\/p>\n<p>.<\/p>\n<p>.<\/p>\n<p>.<\/p>\n<p>.<\/p>\n<p>.<\/p>\n<p>.<\/p>\n<p>.<\/p>\n<p>.<\/p>\n<p>.<\/p>\n<p>.<\/p>\n<p>.<\/p>\n<p>.<\/p>\n<p>.<\/p>\n<p>.<\/p>\n<p>.<\/p>\n<p>.<\/p>\n<p>.<\/p>\n<p>.<\/p>\n<p>.<\/p>\n<p>.<\/p>\n<p>.<\/p>\n<p>.<\/p>\n<p>.<\/p>\n<p>.<\/p>\n<p>.<\/p>\n<p>.<\/p>\n<p>.<\/p>\n<p>.<\/p>\n<p>.<\/p>\n<p>.<\/p>\n<p>.<\/p>\n<p>.<\/p>\n<p>.<\/p>\n<p>.<\/p>\n<p>.<\/p>\n<p>.<\/p>\n<p>.<\/p>\n<p>Well &#8230; alright &#8230; we&#8217;ll &#8220;play the game&#8221;.   Yes &#8230; <a target=\"_blank\" title=\"?\" href='https:\/\/www.youtube.com\/watch?v=e9_7GcQeiqw&#038;t=2m37s' rel=\"noopener\">it was interesting<\/a>.   Yes &#8230; <a target=\"_blank\" title=\"?\" href='https:\/\/www.youtube.com\/watch?v=e9_7GcQeiqw&#038;t=2m37s' rel=\"noopener\">we learnt a lot<\/a>.   Yes, <a target=\"_blank\" title=\"?\" href='https:\/\/www.youtube.com\/watch?v=e9_7GcQeiqw&#038;t=2m37s' rel=\"noopener\">there were tea and bikkies afterwards<\/a>.   Yes &#8230; <a target=\"_blank\" title=\"?\" href='https:\/\/www.youtube.com\/watch?v=e9_7GcQeiqw&#038;t=2m37s' rel=\"noopener\">Collingwood will rise again<\/a>!!!!!<\/p>\n<p>Yes &#8230; <strike><a target=\"_blank\" title=\"?\" href='https:\/\/www.youtube.com\/watch?v=e9_7GcQeiqw&#038;t=2m37s' rel=\"noopener\">in all seriousness<\/a><\/strike> to us it depends how we define these ideas.  What we said was &#8230;<\/p>\n<ul>\n<li>median colour is the one where you line up pixels in order of the (modal) list starting with the more popular one through to the least popular one, and the middle RGB colour value of these we&#8217;ll call &#8220;the median colour&#8221; &#8230;<\/li>\n<li>mode colour is easy &#8230; the most popular colour (ie. most numerous) &#8230; which we had huge help from <a target=\"_blank\" title='Useful link' href='https:\/\/stackoverflow.com\/questions\/3468500\/detect-overall-average-color-of-the-picture' rel=\"noopener\">this great link<\/a> regarding its suggested PHP GD based code to help, thanks &#8230; and &#8230;<\/li>\n<li>mean (ie. average) colour is calculated as the rgb(r,g,b) whereby r=moving average of Red pixel &#8220;strengths&#8221; encountered and g=moving average of Green pixel &#8220;strengths&#8221; encountered and b=moving average of Blue pixel &#8220;strengths&#8221; encountered<\/li>\n<\/ul>\n<p>You can try our <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/image_average_colour.php_GETME\" rel=\"noopener\">&#8220;proof of concept&#8221;<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/image_average_colour.php\" rel=\"noopener\">Image Average Colour<\/a> web application, below, also &#8230;<\/p>\n<p><iframe style=\"width:100%;height:900px;\" src=\"\/\/www.rjmprogramming.com.au\/image_average_colour.php\" rel=\"noopener\"><\/iframe><\/p>\n<p>Thinking philosophically here, as we intimated we might with yesterday&#8217;s <a title='HTML\/Javascript Binary to Hexadecimal Base Game Tutorial' href='#html\/jbhbgt'>HTML\/Javascript Binary to Hexadecimal Base Game Tutorial<\/a>, though, and not reaching for <a target=\"_blank\" href='\/\/wikipedia.org' rel=\"noopener\">Wikipedia<\/a> <a target=\"_blank\" title=\"?\" href='https:\/\/www.youtube.com\/watch?v=e9_7GcQeiqw&#038;t=2m37s' rel=\"noopener\">for once <font size=1>straight away<\/font><\/a>, in terms of the colour system here &#8230;<\/p>\n<blockquote><p>\nWhy couldn&#8217;t a colour system be &#8230;<br \/>\n     pfoa([pink amount 0 up to 255], [fuchsia amount 0 up to 255]], [olive amount 0 up to 255], [transparency amount 0 to 1]);<br \/>\n?\n<\/p><\/blockquote>\n<p>Well, yes, there are lots of colour systems?  There&#8217;s one with Cyan and Magenta and something else, but, guess we&#8217;re wondering if there is a transference mechanism (in mathematics, like)?   And, &#8220;is your Red&#8221; like &#8220;my Red&#8221;, is curious with all this?!   Anyway, enough philosophy!<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/image-average-colour-primer-tutorial\/' rel=\"noopener\">Image Average Colour Primer Tutorial<\/a>.<\/p-->\n<hr>\n<p id='html\/jbhbgt'>Previous relevant <a target=\"_blank\" title='HTML\/Javascript Binary to Hexadecimal Base Game Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html\/javascript-binary-to-hexadecimal-base-game-tutorial\/' rel=\"noopener\">HTML\/Javascript Binary to Hexadecimal Base Game Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/binary_quiz.htm\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML\/Javascript Binary to Hexadecimal Base Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/base_whatever_quiz.jpg\" title=\"HTML\/Javascript Binary to Hexadecimal Base Game Tutorial\" id='ibq' data-onmouseover=' this.src=this.src.replace(\".jpg\",\".PNG\").replace(\".png\",\".jpg\").replace(\".PNG\",\".png\");   '  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Binary to Hexadecimal Base Game Tutorial<\/p><\/div>\n<p>Remember being pointed out, at school, in mathematics, how you could have numerical counting systems that weren&#8217;t base 10, and it blowing my tiny little mind!   Then, in high school, imaginary numbers &#8230; wow!  Still don&#8217;t know what they&#8217;re useful for?!  But, for us, the point is, it can unhinge you to be thrown into, say, what we&#8217;d call &#8220;a dimensional thing&#8221; that you are just not used to.<\/p>\n<p>The next few days we&#8217;re devoting to a little more of this sort of thing, with &#8230;<\/p>\n<ul>\n<li>today, extending on from the base 2 (binary) and base 8 (octal) and base 16 (hexadecimal) themes of the quiz game of <a title='HTML\/Javascript Binary\/Octal\/Hexadecimal Game Tutorial' href='#html\/jb\/o\/hgt'>HTML\/Javascript Binary\/Octal\/Hexadecimal Game Tutorial<\/a> to allow for base numbers you set all the way from 2 to 16 <font size=1>(and please don&#8217;t ask me, yet, about fractional (ie. mantissa<sub>ish<\/sub>) real number representations)<\/font> &#8230; and &#8230;<\/li>\n<li>tomorrow, though we really wanted to break open colour Red\/Green\/Blue (ie. RGB) thinking to other &#8220;base thoughts&#8221;, for now, because we haven&#8217;t found any suitable lead ins yet, we&#8217;re settling on <i>the exploration of PHP image &#8220;average colour&#8221;<\/i> themes<\/li>\n<\/ul>\n<p>In today&#8217;s quiz work we melded those new base modes of play into the Hexadecimal Way <font size=2>(turn left at Station Street, up High Street, down Lowdown Crook, straight into Park Lane, hard right at Mayfair, and take the Town Drain home <\/font><font size=1><a target=\"_blank\" title=\"?\" href='https:\/\/www.youtube.com\/watch?v=dSpQ3G08k48' rel=\"noopener\">or away<\/a><\/font><font size=2>)<\/font> where we started adjusting dropdown (ie. select) element innards <font color=blue>so as to show blank options<\/font>, then resurrect them, rather then reinventing 12<sup><a href='#dyksf'>?<\/a><\/sup> wheels &#8230;<\/p>\n<p><code><br \/>\n<font color=blue>function thenstuff() {<br \/>\n  var sih='', sv='';<br \/>\n  var parts=[], wasbit='', nowbit='', subparts=[], isp=0, numtodo='';<br \/>\n  var sels=document.getElementsByTagName('select');<br \/>\n  for (var isels=0; isels&lt;sels.length; isels++) {<br \/>\n    sv=sels[isels].value;<br \/>\n    if (('' + sels[isels].id) != 'base') {<br \/>\n    sih=sels[isels].innerHTML;<br \/>\n    parts=sih.split(' value=\"' + ('' + eval(1 + maxnum)).replace('10','a').replace('11','b').replace('12','c').replace('13','d').replace('14','e').replace('15','f') + '\"');<br \/>\n    if (eval('' + parts.length) &gt; 1) {<br \/>\n       wasbit=parts[1];<br \/>\n       nowbit=wasbit;<br \/>\n       subparts=wasbit.split('&lt;\/option');<br \/>\n       for (isp=eval(-2 + subparts.length); isp&gt;=0; isp--) {<br \/>\n          numtodo=subparts[isp].split('&gt;')[eval(-1 + subparts[isp].split('&gt;').length)];<br \/>\n          nowbit=nowbit.replace('&gt;' + numtodo + '&lt;', '&gt;&lt;');<br \/>\n       }<br \/>\n    }<br \/>\n       if (sih.indexOf(wasbit) != -1) {<br \/>\n       sels[isels].innerHTML=sih.replace(wasbit, nowbit).replace('&gt;' + ('' + eval(1 + maxnum)).replace('10','a').replace('11','b').replace('12','c').replace('13','d').replace('14','e').replace('15','f') + '&lt;', '&gt;&lt;');<br \/>\n       sels[isels].value=sv;<br \/>\n       } else {<br \/>\n       sels[isels].innerHTML=sih.replace(wasbit, nowbit).replace('&gt;' + ('' + eval(1 + maxnum)).replace('10','a').replace('11','b').replace('12','c').replace('13','d').replace('14','e').replace('15','f') + '&lt;', '&gt;&lt;');<br \/>\n       sels[isels].value=sv;<br \/>\n       \/\/alert('oops ' + sih + ' ... ' + wasbit);<br \/>\n       }<br \/>\n    }<br \/>\n  }<br \/>\n}<br \/>\n<br \/>\nfunction hidestuff() {<br \/>\n  var sih='', sv='';<br \/>\n  var parts=[], wasbit='', nowbit='', subparts=[], isp=0, numtodo='';<br \/>\n  var sels=document.getElementsByTagName('select');<br \/>\n  \/\/if (1 == 1) {<br \/>\n  \/\/  restorestuff();<br \/>\n  \/\/}<br \/>\n  for (var isels=0; isels&lt;sels.length; isels++) {<br \/>\n    sv=sels[isels].value;<br \/>\n    if (('' + sels[isels].id) != 'base') {<br \/>\n    sih=sels[isels].innerHTML;<br \/>\n    parts=sih.split(' value=\"00\"&gt;&lt;');<br \/>\n    if (eval('' + parts.length) &gt; 1) {<br \/>\n       wasbit=parts[1];<br \/>\n       nowbit=wasbit;<br \/>\n       subparts=wasbit.split('&lt;\/option');<br \/>\n       for (isp=eval(-2 + subparts.length); isp&gt;=0; isp--) {<br \/>\n          numtodo=subparts[isp].split(' value=\"')[1].split('\"')[0];<br \/>\n          nowbit=nowbit.replace(' value=\"' + numtodo + '\"&gt;&lt;', ' value=\"' + numtodo + '\"&gt;' + numtodo + '&lt;');<br \/>\n          \/\/alert(subparts[isp] + ' ... regarding ' + numtodo);<br \/>\n       }<br \/>\n       if (nowbit != wasbit) {<br \/>\n       \/\/alert(nowbit + ' via ' + wasbit);<br \/>\n       if (sih.indexOf(wasbit) != -1) {<br \/>\n       sih=sih.replace(wasbit, nowbit);<br \/>\n       } \/\/else {<br \/>\n       \/\/alert('ooPs ' + wasbit);<br \/>\n       \/\/}<br \/>\n       }<br \/>\n    }<br \/>\n    \/\/alert(maxnum);<br \/>\n    <br \/>\n    wasbit='youllneverfindthis';<br \/>\n    <br \/>\n    if (1 == 1) {<br \/>\n    if (sih != '') {<br \/>\n    sels[isels].innerHTML=sih;<br \/>\n    sels[isels].value=sv;<br \/>\n    }<br \/>\n    } else {<br \/>\n    parts=sih.split(' value=\"' + ('' + eval(1 + maxnum)).replace('10','a').replace('11','b').replace('12','c').replace('13','d').replace('14','e').replace('15','f') + '\"');<br \/>\n    if (eval('' + parts.length) &gt; 1) {<br \/>\n       wasbit=parts[1];<br \/>\n       nowbit=wasbit;<br \/>\n       subparts=wasbit.split('&lt;\/option');<br \/>\n       for (isp=eval(-2 + subparts.length); isp&gt;=0; isp--) {<br \/>\n          numtodo=subparts[isp].split('&gt;')[eval(-1 + subparts[isp].split('&gt;').length)];<br \/>\n          nowbit=nowbit.replace('&gt;' + numtodo + '&lt;', '&gt;&lt;');<br \/>\n       }<br \/>\n    }<br \/>\n       if (sih.indexOf(wasbit) != -1) {<br \/>\n       sels[isels].innerHTML=sih.replace(wasbit, nowbit);<br \/>\n       sels[isels].value=sv;<br \/>\n       } else {<br \/>\n       sels[isels].innerHTML=sih;<br \/>\n       sels[isels].value=sv;<br \/>\n       \/\/alert('oops ' + sih + ' ... ' + wasbit);<br \/>\n       }<br \/>\n    }<br \/>\n    }<br \/>\n  }<br \/>\n  <br \/>\n  setTimeout(thenstuff, 800);<br \/>\n}<br \/>\n<br \/>\nfunction restorestuff() {<br \/>\n  var sv='';<br \/>\n  var parts=[], wasbit='', nowbit='', subparts=[], isp=0, numtodo='';<br \/>\n  if (1 == 2) {<br \/>\n  var opts=document.getElementsByTagName('options');<br \/>\n  for (var iopts=0; iopts&lt;opts.length; iopts++) {<br \/>\n     if (opts[iopts].value != '00') {<br \/>\n       if (opts[iopts].innerText != opts[iopts].value) {<br \/>\n         opts[iopts].Text=opts[iopts].value;<br \/>\n       }<br \/>\n     }<br \/>\n  }<br \/>\n  }<br \/>\n<br \/>\n  var sels=document.getElementsByTagName('select');<br \/>\n  for (var isels=0; isels&lt;sels.length; isels++) {<br \/>\n    sv=sels[isels].value;<br \/>\n    if (('' + sels[isels].id) != 'base') {<br \/>\n    parts=sels[isels].innerHTML.split(' value=\"00\"&gt;&lt;');<br \/>\n    if (eval('' + parts.length) &gt; 1) {<br \/>\n       wasbit=parts[1];<br \/>\n       nowbit=wasbit;<br \/>\n       subparts=wasbit.split('&lt;\/option');<br \/>\n       for (isp=eval(-2 + subparts.length); isp&gt;=0; isp--) {<br \/>\n          numtodo=subparts[isp].split(' value=\"')[1].split('\"')[0];<br \/>\n          nowbit=nowbit.replace(' value=\"' + numtodo + '\"&gt;&lt;', ' value=\"' + numtodo + '\"&gt;' + numtodo + '&lt;');<br \/>\n          \/\/alert(subparts[isp] + ' ... regarding ' + numtodo);<br \/>\n       }<br \/>\n       if (nowbit != wasbit) {<br \/>\n       \/\/alert(nowbit + ' via ' + wasbit);<br \/>\n       sels[isels].innerHTML=sels[isels].innerHTML.replace(wasbit, nowbit);<br \/>\n       sels[isels].value=sv;<br \/>\n       }<br \/>\n    }<br \/>\n    }<br \/>\n  }<br \/>\n}<\/font><br \/>\n<br \/>\nfunction display() {<br \/>\n  <font color=blue>if (!document.getElementById(mode)) {<br \/>\n  document.getElementById('hexadecimal').style.display = 'block';<br \/>\n  \/\/restorestuff();<br \/>\n  setTimeout(hidestuff, 500);<br \/>\n  } else {<\/font><br \/>\n  document.getElementById(mode).style.display = 'block';<br \/>\n  <font color=blue>setTimeout(restorestuff, 500);<br \/>\n  }<\/font><br \/>\n  <br \/>\n  if (mode == 'binary') {<br \/>\n   mnum = 255;<br \/>\n   cshort ='b';<br \/>\n   filledin = [0, 0, 0, 0, 0];<br \/>\n   maxnum = 1;<br \/>\n   numsels = 8;<br \/>\n   document.getElementById('octal').style.display = 'none';<br \/>\n   document.getElementById('hexadecimal').style.display = 'none';<br \/>\n  <font color=blue>} else if (mode == '3') {<br \/>\n   mnum = 8;<br \/>\n   cshort ='h';<br \/>\n   filledin = [0, 0, 0, 0, 0];<br \/>\n   maxnum = 2;<br \/>\n   numsels = 2;<br \/>\n   document.getElementById('binary').style.display = 'none';<br \/>\n   \/\/document.getElementById('hexadecimal').style.display = 'none';<br \/>\n   document.getElementById('octal').style.display = 'none';<br \/>\n  } else if (mode == '4') {<br \/>\n   mnum = 15;<br \/>\n   cshort ='h';<br \/>\n   filledin = [0, 0, 0, 0, 0];<br \/>\n   maxnum = 3;<br \/>\n   numsels = 2;<br \/>\n   document.getElementById('binary').style.display = 'none';<br \/>\n   \/\/document.getElementById('hexadecimal').style.display = 'none';<br \/>\n   document.getElementById('octal').style.display = 'none';<br \/>\n  } else if (mode == '5') {<br \/>\n   mnum = 24;<br \/>\n   cshort ='h';<br \/>\n   filledin = [0, 0, 0, 0, 0];<br \/>\n   maxnum = 4;<br \/>\n   numsels = 2;<br \/>\n   document.getElementById('binary').style.display = 'none';<br \/>\n   \/\/document.getElementById('hexadecimal').style.display = 'none';<br \/>\n   document.getElementById('octal').style.display = 'none';<br \/>\n  } else if (mode == '6') {<br \/>\n   mnum = 35;<br \/>\n   cshort ='h';<br \/>\n   filledin = [0, 0, 0, 0, 0];<br \/>\n   maxnum = 5;<br \/>\n   numsels = 2;<br \/>\n   document.getElementById('binary').style.display = 'none';<br \/>\n   \/\/document.getElementById('hexadecimal').style.display = 'none';<br \/>\n   document.getElementById('octal').style.display = 'none';<br \/>\n  } else if (mode == '7') {<br \/>\n   mnum = 48;<br \/>\n   cshort ='h';<br \/>\n   filledin = [0, 0, 0, 0, 0];<br \/>\n   maxnum = 6;<br \/>\n   numsels = 2;<br \/>\n   document.getElementById('binary').style.display = 'none';<br \/>\n   \/\/document.getElementById('hexadecimal').style.display = 'none';<br \/>\n   document.getElementById('octal').style.display = 'none';<\/font><br \/>\n  } else if (mode == 'octal') {<br \/>\n   mnum = 4095;<br \/>\n   cshort ='o';<br \/>\n   filledin = [0, 0, 0, 0, 0];<br \/>\n   maxnum = 7;<br \/>\n   numsels = 4;<br \/>\n   document.getElementById('binary').style.display = 'none';<br \/>\n   document.getElementById('hexadecimal').style.display = 'none';<br \/>\n<br \/>\n  <font color=blue>} else if (mode == '9') {<br \/>\n   mnum = 80;<br \/>\n   cshort ='h';<br \/>\n   filledin = [0, 0, 0, 0, 0];<br \/>\n   maxnum = 8;<br \/>\n   numsels = 2;<br \/>\n   document.getElementById('binary').style.display = 'none';<br \/>\n   \/\/document.getElementById('hexadecimal').style.display = 'none';<br \/>\n   document.getElementById('octal').style.display = 'none';<br \/>\n  } else if (mode == 'A') {<br \/>\n   mnum = 99;<br \/>\n   cshort ='h';<br \/>\n   filledin = [0, 0, 0, 0, 0];<br \/>\n   maxnum = 9;<br \/>\n   numsels = 2;<br \/>\n   document.getElementById('binary').style.display = 'none';<br \/>\n   \/\/document.getElementById('hexadecimal').style.display = 'none';<br \/>\n   document.getElementById('octal').style.display = 'none';<br \/>\n  } else if (mode == 'B') {<br \/>\n   mnum = 120;<br \/>\n   cshort ='h';<br \/>\n   filledin = [0, 0, 0, 0, 0];<br \/>\n   maxnum = 10;<br \/>\n   numsels = 2;<br \/>\n   document.getElementById('binary').style.display = 'none';<br \/>\n   \/\/document.getElementById('hexadecimal').style.display = 'none';<br \/>\n   document.getElementById('octal').style.display = 'none';<br \/>\n  } else if (mode == 'C') {<br \/>\n   mnum = 143;<br \/>\n   cshort ='h';<br \/>\n   filledin = [0, 0, 0, 0, 0];<br \/>\n   maxnum = 11;<br \/>\n   numsels = 2;<br \/>\n   document.getElementById('binary').style.display = 'none';<br \/>\n   \/\/document.getElementById('hexadecimal').style.display = 'none';<br \/>\n   document.getElementById('octal').style.display = 'none';<br \/>\n  } else if (mode == 'D') {<br \/>\n   mnum = 168;<br \/>\n   cshort ='h';<br \/>\n   filledin = [0, 0, 0, 0, 0];<br \/>\n   maxnum = 12;<br \/>\n   numsels = 2;<br \/>\n   document.getElementById('binary').style.display = 'none';<br \/>\n   \/\/document.getElementById('hexadecimal').style.display = 'none';<br \/>\n   document.getElementById('octal').style.display = 'none';<br \/>\n  } else if (mode == 'E') {<br \/>\n   mnum = 195;<br \/>\n   cshort ='h';<br \/>\n   filledin = [0, 0, 0, 0, 0];<br \/>\n   maxnum = 13;<br \/>\n   numsels = 2;<br \/>\n   document.getElementById('binary').style.display = 'none';<br \/>\n   \/\/document.getElementById('hexadecimal').style.display = 'none';<br \/>\n   document.getElementById('octal').style.display = 'none';<br \/>\n  } else if (mode == 'F') {<br \/>\n   mnum = 224;<br \/>\n   cshort ='h';<br \/>\n   filledin = [0, 0, 0, 0, 0];<br \/>\n   maxnum = 14;<br \/>\n   numsels = 2;<br \/>\n   document.getElementById('binary').style.display = 'none';<br \/>\n   \/\/document.getElementById('hexadecimal').style.display = 'none';<br \/>\n   document.getElementById('octal').style.display = 'none';<\/font><br \/>\n<br \/>\n  } else if (mode == 'hexadecimal') {<br \/>\n   mnum = 255;<br \/>\n   cshort ='h';<br \/>\n   filledin = [0, 0, 0, 0, 0];<br \/>\n   maxnum = 15;<br \/>\n   numsels = 2;<br \/>\n   document.getElementById('octal').style.display = 'none';<br \/>\n   document.getElementById('binary').style.display = 'none';<br \/>\n  }<br \/>\n  startoff();<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; in <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/binary_quiz.html--GETME\" rel=\"noopener\">the extended<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/binary_quiz.html--GETME\" rel=\"noopener\">binary_quiz.htm<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/binary_quiz.htm\" rel=\"noopener\">Base Quiz Game<\/a> you can also try below &#8230;<\/p>\n<p><iframe src=\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/binary_quiz.htm\" style=\"width:100%;height:400px;\"><\/iframe><\/p>\n<p id=dyksf><b><i>Did you know?<\/i><\/b><\/p>\n<p>My head hurts thinking about what we&#8217;d have had to do to make the other base that we use a lot around here, work!   That base is 64, used a lot with webpage information encoding and decoding these days.  Think &#8230;<\/p>\n<ul>\n<li>Javascript <a target=\"_blank\" title='Javascript btoa information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/met_win_btoa.asp' rel=\"noopener\">btoa<\/a> (to base64)<\/li>\n<li>Javascript <a target=\"_blank\" title='Javascript atob information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/met_win_atob.asp' rel=\"noopener\">atob<\/a> (from base64)<\/li>\n<li>PHP <a target=\"_blank\" title='PHP base64_encode information' href='http:\/\/php.net\/manual\/en\/function.base64-encode.php' rel=\"noopener\">base64_encode<\/a> (to base64)<\/li>\n<li>PHP <a target=\"_blank\" title='PHP base64_decode information' href='http:\/\/php.net\/manual\/en\/function.base64-decode.php' rel=\"noopener\">base64_decode<\/a> (from base64)<\/li>\n<\/ul>\n<p>Fair point, ex teacher &#8230;<\/p>\n<blockquote><p>\nBut you haven&#8217;t explained any usages!\n<\/p><\/blockquote>\n<p>Okay, here&#8217;s one you&#8217;ll like if you&#8217;ve ever &#8230;<\/p>\n<ul>\n<li>used an HTML form &#8230;<\/li>\n<li>to pass across data that is programming language &#8230; ie. bound to contain some <i>+<\/i> characters &#8230; being that <i>+<\/i> is also used to encode a space character &#8230; how do you tell the difference between these guises at the other end<sup>?<\/sup> &#8230; well, lately, we&#8217;ve been &#8230;<\/li>\n<li>introducing a form <i>onsubmit<\/i> event where, maybe just for the few seconds needed, the textbox or textarea content is changed to base64 via window.btoa and at some time after the <i>return true;<\/i> that finishes the event logic you might want to revert back <font size=1>(ie. use combination of setTimeout and window.atob to revert back, for this purpose)<\/font> &#8230; and at the receiving end &#8230;<\/li>\n<li>for HTML\/Javascript <font size=1>(or PHP, for that matter)<\/font> use window.atob <font size=1>(only)<\/font> or for PHP use base64_decode <font size=1>(only)<\/font> &#8230; <\/li>\n<li>to better preserve real <i>+<\/i> characters in the transfer<\/li>\n<\/ul>\n<p> &#8230; as explained when we presented <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-microtask-primer-tutorial\/' title='Javascript Microtask Primer Tutorial' rel=\"noopener\">Javascript Microtask Primer Tutorial<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-binary-to-hexadecimal-base-game-tutorial\/' rel=\"noopener\">HTML\/Javascript Binary to Hexadecimal Base Game Tutorial<\/a>.<\/p-->\n<hr>\n<p id='html\/jb\/o\/hgt'>Previous relevant <a target=\"_blank\" title='HTML\/Javascript Binary\/Octal\/Hexadecimal Game Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-binaryoctalhexadecimal-game-tutorial\/' rel=\"noopener\">HTML\/Javascript Binary\/Octal\/Hexadecimal Game Tutorial  HTML\/Javascript Binary to Hexadecimal Base Game Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/binary_quiz.html\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML\/Javascript Binary\/Octal\/Hexadecimal Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/binary_quiz.jpg\" title=\"HTML\/Javascript Binary\/Octal\/Hexadecimal Game Tutorial\" id='ibq' data-onmouseover=' this.src=this.src.replace(\".jpg\",\".PNG\").replace(\".png\",\".jpg\").replace(\".PNG\",\".png\");   '  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Binary\/Octal\/Hexadecimal Game Tutorial<\/p><\/div>\n<p>Are you feeling transformational?  Maybe calculating?   Perhaps didactic?   Witheringly logical?   You can test how you feel, in a mathematical sense, by playing our &#8220;Binary\/Octal\/Hexadecimal&#8221; <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/binary_quiz.html\" title=\"Binary\/Octal\/Hexadecimal game\" rel=\"noopener\">game<\/a> today.<\/p>\n<p>The study of <a target=\"_blank\" title='Radix information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Radix' rel=\"noopener\">bases<\/a> other than (decimal) 10 in mathematics is very interesting and it is used a lot in computing, a simple example of which is notation like #ffffff to describe the colour white, which lots of us were taught at school as the colour that contains the lot, hence all the 255 (hexadecimal ff) of Red and 255 (hexadecimal ff) of Green and 255 (hexadecimal ff) of Blue in the <a target=\"_blank\" title='RGB information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/RGB_color_model' rel=\"noopener\">RGB colour model<\/a> system.  You might think that a computer would be able to work faster with the smaller amounts of data of hexadecimal, but, basically, the computer will, eventually, go and turn this into binary because at the bottom of its design it understands <i>on<\/i> and <i>off<\/i>, as you would understand voltage on a Bugs Bunny cartoon if you were the Coyote just missing the Roadrunner, running into an electrical socket running an Eat at Joes sign being switched off, on (sizzle), off, on (sizzle), off, on (sizzled <a target=\"_blank\" title='Coyote' href='http:\/\/www.google.com.au\/imgres?imgurl=https%3A%2F%2Fi1.ytimg.com%2Fvi%2Fmtxe-vnyJms%2Fhqdefault.jpg&#038;imgrefurl=http%3A%2F%2Fwww.word.photos%2Findex.php%3Fkeyword%3Da%2520road%2520runner%2520cartoon&#038;h=360&#038;w=480&#038;tbnid=sPjKIjMu08ibPM%3A&#038;zoom=1&#038;docid=TJ4gSBsKEGhmtM&#038;ei=BK2WVKb2CeHUmAXGoYHIAQ&#038;tbm=isch&#038;iact=rc&#038;uact=3&#038;dur=765&#038;page=1&#038;start=0&#038;ndsp=15&#038;ved=0CB4QMygBMAE' rel=\"noopener\">Coyote<\/a>, meet <a target=\"_blank\" title='Daffy Duck' href='https:\/\/www.google.com.au\/search?q=daffy+duck+electrocuted+bugs+bunny&#038;biw=1280&#038;bih=622&#038;source=lnms&#038;tbm=isch&#038;sa=X&#038;ei=_KiWVLOOMIKwmwW9t4FI&#038;ved=0CAYQ_AUoAQ#tbm=isch&#038;q=%22daffy+duck+burnt%22&#038;facrc=_&#038;imgdii=_&#038;imgrc=5k8RuB5Gi-9jXM%253A%3Bvcv6zZqt_rMiGM%3Bhttp%253A%252F%252Fi.ytimg.com%252Fvi%252F0b1_9czUox4%252Fhqdefault.jpg%3Bhttp%253A%252F%252Fwww.youtube.com%252Fwatch%253Fv%253D0b1_9czUox4%3B480%3B360' rel=\"noopener\">Daffy Duck<\/a>?!).<\/p>\n<p>Anyway, see how you go with this game that asks you to solve 5 problems as quickly as possible.  One way around you can cheat the system, and this is fine by me, in the sense that the intention is just to put that picture in your head of the powers of 2 involved to get a little bit familiar with them.   Another way to do this is to access a text editor that can simultaneously display a hexadecimal view (or dump) of that data.  <a target=\"_blank\" title='UltraEdit Windows text editor' href='http:\/\/www.ultraedit.com\/ultraedit-tour\/hex-editor.html' rel=\"noopener\">UltraEdit<\/a> on Windows can do this.<\/p>\n<p>Here is a link to some downloadable HTML (with Javascript) programming code you could rename to <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/binary_quiz.html_GETME\" title=\"binary_quiz.html\" rel=\"noopener\">binary_quiz.html<\/a> and a <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/binary_quiz.html\" title=\"Live Run\" rel=\"noopener\">live run<\/a>.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d11158' onclick='var dv=document.getElementById(\"d11158\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=game\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d11158' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d66443' onclick='var dv=document.getElementById(\"d66443\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/base\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d66443' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d66476' onclick='var dv=document.getElementById(\"d66476\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/image\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d66476' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Have you ever wondered whether, regarding an img (ie. image) HTML element &#8230; a median RGB colour &#8230; and\/or &#8230; a mode RGB colour &#8230; and\/or &#8230; a mean (ie. average) RGB colour &#8230; are useful concepts?! Well, we tried &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/image-average-colour-primer-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,37],"tags":[224,5060,1550,590,932,1918,997,1319],"class_list":["post-66476","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-colour","tag-colour-system","tag-gd","tag-image","tag-php","tag-pixel","tag-programming","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/66476"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=66476"}],"version-history":[{"count":6,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/66476\/revisions"}],"predecessor-version":[{"id":66484,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/66476\/revisions\/66484"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=66476"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=66476"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=66476"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}