{"id":36609,"date":"2018-03-06T03:01:09","date_gmt":"2018-03-05T17:01:09","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=36609"},"modified":"2018-03-05T19:48:02","modified_gmt":"2018-03-05T09:48:02","slug":"blog-kaleidoscopic-view-randomosity-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/blog-kaleidoscopic-view-randomosity-tutorial\/","title":{"rendered":"Blog Kaleidoscopic View Randomosity Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/rjmgoogleimages.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Blog Kaleidoscopic View Randomosity Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/rjmgoogleimages.gif\" title=\"Blog Kaleidoscopic View Randomosity Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Blog Kaleidoscopic View Randomosity Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Blog Kaleidoscopic View Primer Tutorial' href='#bkvpt'>Blog Kaleidoscopic View Primer Tutorial<\/a> got us started down an image-led view of some aspects to the blog you are reading now.  However, the &#8220;kaleidoscopic&#8221; aspects to its look and feel were lacking dynamism to my mind.<\/p>\n<p>So today, we added the idea in the left hand cell of showing &#8230;<\/p>\n<ul>\n<li>up to 9 images at a time<\/li>\n<li>sequenced for display:block over the setTimeout period (currently hardcoded at 5 seconds)<\/li>\n<\/ul>\n<p>This change involved encasing yesterday&#8217;s single image HTML within a new HTML <b>div element<\/b> representing the content of the table&#8217;s left hand cell, now <i>ID<\/i>&#8216;ed and <i>height<\/i>ified as below &#8230;<\/p>\n<p><code><br \/>\n&lt;td <i>id=myleft <\/i>style='width:50%;<i>height:150vh;<\/i>'&gt;<br \/>\n<b>&lt;div id=dmyimg&gt;<\/b>&lt;img id=myimg style='width:100%;' alt='RJMProgrammingImage' title='RJM Programming image' onclick='clickthis(this.src,this.title);' src=''&gt;&lt;\/img&gt;<b>&lt;\/div&gt;<\/b><br \/>\n&lt;\/td&gt;<br \/>\n<\/code> <\/p>\n<p> &#8230; and the document.body onload (and its setTimeout continuously called) function <i>starttheballrolling<\/i> became responsive to a newly embedded HTML <b>select element<\/b> dropdown within the top h1 element as per &#8230;<\/p>\n<p><code><br \/>\n&lt;h1 id=myh1&gt;Kaleidoscopic &lt;a target=_blank title='RJM Programming Blog' href='\/\/www.rjmprogramming.com.au\/ITblog'&gt;Blog&lt;\/a&gt; Image <b>&lt;select id=mysel onchange=num=eval(this.value);&gt;&lt;option value=1&gt;&lt;\/option&gt;&lt;option value=2&gt; x 2&lt;\/option&gt;&lt;option value=3&gt; x 3&lt;\/option&gt;&lt;option value=4&gt; x 4&lt;\/option&gt;&lt;option value=5&gt; x 5&lt;\/option&gt;&lt;option value=6&gt; x 6&lt;\/option&gt;&lt;option value=7&gt; x 7&lt;\/option&gt;&lt;option value=8&gt; x 8&lt;\/option&gt;&lt;option value=9&gt; x 9&lt;\/option&gt;&lt;\/select&gt;<\/b> View&lt;\/h1&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; in <b>this (Javascript) way<\/b> &#8230;<\/p>\n<p><code><br \/>\n <b>var num=1, xoff=-1, yoff=-1, woff=-1, hoff=-1;<\/b><br \/>\n function startballrolling() {<br \/>\n   <b>var minx=0, miny=0, axp=[], ayp=[], awp=[], ahp=[], aop=[], xp=-1, yp=-1, wp=-1, hp=-1, stsuff='',  idsuff='';<br \/>\n   if (xoff == -1 && yoff == -1) {<br \/>\n     var rect=document.getElementById('myleft').getBoundingClientRect();<br \/>\n     xoff=Math.floor(eval(('' + rect.left).replace('px','')));<br \/>\n     yoff=Math.floor(eval(('' + rect.top).replace('px','')));<br \/>\n     woff=eval(('' + window.innerWidth).replace('px','')); \/\/ eval(eval(('' + rect.width).replace('px','')));<br \/>\n     woff\/=2.1;<br \/>\n     woff=Math.floor(eval('' + woff));<br \/>\n   }<\/b><br \/>\n   choiceis=<i>huh(<\/i>Math.floor(Math.random() * eval(-1 + imagelist.length))<i>)<\/i>;<br \/>\n   <b>if (num &gt; 1) {<br \/>\n   var dinnards='', thistemplate='';<br \/>\n   var templateimg=\"&lt;img id=myimg style='width:100%;' alt='RJMProgrammingImage' title='RJM Programming image' onclick='clickthis(this.src,this.title);' src=''&gt;&lt;\/img&gt;\";<br \/>\n   for (var iij=0; iij&lt;num; iij++) {<br \/>\n   xp=Math.floor(Math.random() * 90);<br \/>\n   xp\/=100;<br \/>\n   xp*=eval(('' + woff));<br \/>\n   yp=Math.floor(eval(Math.floor(Math.random() * 600))); \/\/ + eval(('' + yoff)))); \/\/90);<br \/>\n   yp+=eval(('' + yoff));<br \/>\n   op=eval(eval(Math.floor(Math.random() * 60) + 40) \/ 100.0);<br \/>\n   wp=woff;<br \/>\n   wp-=eval(('' + xoff));<br \/>\n   hp=Math.floor(eval(100 - eval(('' + xp))));<br \/>\n   xp+=eval(('' + xoff));<br \/>\n   xp=Math.floor(xp);<br \/>\n   if (iij == 0 || xp &lt; minx) minx=xp;<br \/>\n   if (iij == 0 || yp &lt; miny) miny=yp;<br \/>\n   axp.push(xp);<br \/>\n   ayp.push(yp);<br \/>\n   ahp.push(hp);<br \/>\n   aop.push(op);<br \/>\n   awp.push(wp);<br \/>\n   }<br \/>\n   for (var ij=0; ij&lt;num; ij++) {<br \/>\n   xp=axp[ij];<br \/>\n   xp-=eval(('' + minx));<br \/>\n   xp+=eval(('' + xoff));<br \/>\n   yp=ayp[ij];<br \/>\n   yp-=eval(('' + miny));<br \/>\n   yp+=eval(('' + yoff));<br \/>\n   op=aop[ij];<br \/>\n   wp=awp[ij];<br \/>\n   hp=ahp[ij];<br \/>\n   thistemplate=templateimg.replace(\" src=''\", \" src='\" + imagelist[choiceis].split('#')[0].split('&')[0].split('?')[0] + \"'\");<br \/>\n   thistemplate=thistemplate.replace(\"RJMProgrammingImage\", imagelist[choiceis].split('#')[0].split('&')[0].split('?')[0]);<br \/>\n   if (imagelist[choiceis].indexOf('#') != -1) {<br \/>\n     thistemplate=thistemplate.replace('myimg', 'myimg' + idsuff).replace('width:100%;',stsuff + 'z-index:2' + ij + ';position:absolute;left:' + xp + 'px;top:' + yp + 'px;width:' + wp + 'px;opacity:' + op + ';');<br \/>\n     thistemplate=thistemplate.replace(\"RJM Programming image\", imagelist[choiceis].split('#')[1].replace(\/\\`\/g,' '));<br \/>\n     if (imagelist[choiceis].indexOf('?') == -1) thistemplate=thistemplate.replace(\" style='\", \" style='1px solid orange;\");<br \/>\n     turl=imagelist[choiceis].split('#')[1].replace(\/\\`\/g,' ');<br \/>\n   } else {<br \/>\n     thistemplate=thistemplate.replace('myimg', 'myimg' + idsuff).replace('width:100%;',stsuff + 'z-index:1' + ij + ';position:absolute;left:' + xp + 'px;top:' + yp + 'px;width:' + wp + 'px;opacity:' + op + ';');<br \/>\n     if (1 == 2) turl='';<br \/>\n   }<br \/>\n   if (imagelist[choiceis].indexOf('?') != -1) {<br \/>\n     curl=imagelist[choiceis].split('#')[0].split('?')[1].split('&')[0].replace('p=','');<br \/>\n     thistemplate=thistemplate.replace(\" style='\", \" style='22px solid green;\");<br \/>\n   } else if (1 == 2) {<br \/>\n     curl='';<br \/>\n   }<br \/>\n   if (imagelist[choiceis].indexOf('&') != -1) {<br \/>\n     wurl=imagelist[choiceis].split('#')[0].split('&')[1].split('#')[0].replace('w=','');<br \/>\n   } else if (1 == 2) {<br \/>\n     wurl='';<br \/>\n   }<br \/>\n   dinnards+=thistemplate;<br \/>\n   idsuff='' + eval(2 + ij);<br \/>\n   if (ij &gt; 0) setTimeout(readforf, eval(Math.floor(eval((fivethousand * (1 + ij)) \/ eval(1 + num))) - 0));<br \/>\n   stsuff='display:none;';<br \/>\n   choiceis=huh(Math.floor(Math.random() * eval(-1 + imagelist.length)));<br \/>\n   }<br \/>\n   document.getElementById('dmyimg').innerHTML=dinnards;<br \/>\n   setTimeout(startballrolling, fivethousand);<br \/>\n   readyfor=2;<br \/>\n   } else {<br \/>\n    if (document.getElementById('myimg2')) document.getElementById('dmyimg').innerHTML=\"&lt;img id=myimg style='width:100%;' alt='RJMProgrammingImage' title='RJM Programming image' onclick='clickthis(this.src,this.title);' src=''&gt;&lt;\/img&gt;\";<\/b><br \/>\n   document.getElementById('myimg').style.border='0px solid orange';<br \/>\n   if (imagelist[choiceis].indexOf('#') != -1) {<br \/>\n     document.getElementById('myimg').title=imagelist[choiceis].split('#')[1].replace(\/\\`\/g,' ');<br \/>\n     document.getElementById('myimg').style.border='1px solid orange';<br \/>\n     turl=imagelist[choiceis].split('#')[1].replace(\/\\`\/g,' ');<br \/>\n   } else {<br \/>\n     document.getElementById('myimg').title='RJM Programming image';<br \/>\n     if (1 == 2) turl='';<br \/>\n   }<br \/>\n   if (imagelist[choiceis].indexOf('?') != -1) {<br \/>\n     curl=imagelist[choiceis].split('#')[0].split('?')[1].split('&')[0].replace('p=','');<br \/>\n     document.getElementById('myimg').style.border='12px solid green';<br \/>\n   } else if (1 == 2) {<br \/>\n     curl='';<br \/>\n   }<br \/>\n   if (imagelist[choiceis].indexOf('&') != -1) {<br \/>\n     wurl=imagelist[choiceis].split('#')[0].split('&')[1].split('#')[0].replace('w=','');<br \/>\n   } else if (1 == 2) {<br \/>\n     wurl='';<br \/>\n   }<br \/>\n   document.getElementById('myimg').alt=imagelist[choiceis].split('#')[0].split('&')[0].split('?')[0];<br \/>\n   document.getElementById('myimg').src=imagelist[choiceis].split('#')[0].split('&')[0].split('?')[0];<br \/>\n   setTimeout(startballrolling, <i>fivethousand<\/i>);<br \/>\n   <b>}<\/b><br \/>\n }<br \/>\n<\/code><\/p>\n<p>Again, you can try the more dynamic <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/rjmgoogleimages.html\" title=\"Click picture\">live run<\/a> and perhaps peruse its HTML and Javascript and CSS <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/rjmgoogleimages.html-GETME\" title=\"rjmgoogleimages.html\">rjmgoogleimages.html<\/a> code that changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/rjmgoogleimages.html-GETME\" title=\"rjmgoogleimages.html\">this way<\/a>.<\/p>\n<hr>\n<p id='bkvpt'>Previous relevant <a target=_blank title='Blog Kaleidoscopic View Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/blog-kaleidoscopic-view-primer-tutorial\/'>Blog Kaleidoscopic View Primer 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\/rjmgoogleimages.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Blog Kaleidoscopic View Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/rjmgoogleimages.jpg\" title=\"Blog Kaleidoscopic View Primer Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Blog Kaleidoscopic View Primer Tutorial<\/p><\/div>\n<p>We go to quite a bit of effort writing the wording of the blog posts, not to be noticed a great deal, but, the images we concoct perhaps grab more attention with the search engines.  With this in mind, and because we have this imagining of a &#8220;kaleidoscope&#8221; of imagery related to this blog, mainly, we guess, we&#8217;ve put together an HTML and Javascript and CSS web application to show a changing slideshow getting towards a &#8220;kaleidoscopic&#8221; image view of this blog.<\/p>\n<p>This web application&#8217;s innards, intrinsically very simple, consist, data wise, of one array of image URL members of the (syntax) form &#8230;<\/p>\n<p><code><br \/>\n{absoluteImageURL}[?p={cutToTheChaseURL}&w={blogPostURL}#{blogPostTitleNoBlanks}]<br \/>\n<\/code><\/p>\n<p>Have you ever thought to use ? and &amp; URL arguments (and # hashtag) on an image URL (in the web browser address bar, or programmatically)?  We&#8217;ve done it before, and there is no trouble about this type of URL showing the image, plus there&#8217;s a good chance you&#8217;ll make sure caching does not get in the way of seeing that image as it really is then and there.   Interesting, huh?   Of course, we claim this erudite thought pattern, but our motivation, as ever, is to keep the data arrangements as simple as possible, the above &#8220;delimitation&#8221; inhouse rules ensuring we can stick with a one array (of single dimension) data arrangement with our work.<\/p>\n<p>As you try the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/rjmgoogleimages.html\" title=\"Click picture\">live run<\/a> and perhaps peruse the HTML and Javascript and CSS <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/rjmgoogleimages.html_GETME\" title=\"rjmgoogleimages.html\">rjmgoogleimages.html<\/a> code, you can see that the bulk of the work is the compilation of this array.  So how was it derived?<\/p>\n<p>Via the View Page Source of the Google Advanced Option Image Search URL &#8230;<\/p>\n<p><code><br \/>\n<a target=_blank title='Google Advanced Option Image Search' href='https:\/\/www.google.com.au\/search?as_st=y&#038;tbm=isch&#038;hl=en&#038;as_q=rjmprogramming&#038;as_epq=&#038;as_oq=&#038;as_eq=&#038;imgsz=&#038;imgar=&#038;imgc=&#038;imgcolor=&#038;imgtype=&#038;cr=&#038;as_sitesearch=rjmprogramming.com.au&#038;safe=images&#038;as_filetype=&#038;as_rights='>https:\/\/www.google.com.au\/search?as_st=y&tbm=isch&hl=en&as_q=rjmprogramming&as_epq=&as_oq=&as_eq=&imgsz=&imgar=&imgc=&imgcolor=&imgtype=&cr=&as_sitesearch=rjmprogramming.com.au&safe=images&as_filetype=&as_rights=<\/a><br \/>\n<\/code><\/p>\n<p>Thanks, <a target=_blank title='Google search engine' href='https:\/\/google.com'>Google<\/a>, for that &#8220;view from above&#8221; perspective.<\/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='#d36585' onclick='var dv=document.getElementById(\"d36585\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/google\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d36585' 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='#d36609' onclick='var dv=document.getElementById(\"d36609\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/dropdown\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d36609' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday&#8217;s Blog Kaleidoscopic View Primer Tutorial got us started down an image-led view of some aspects to the blog you are reading now. However, the &#8220;kaleidoscopic&#8221; aspects to its look and feel were lacking dynamism to my mind. So today, &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/blog-kaleidoscopic-view-randomosity-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,14,37],"tags":[1885,103,151,177,281,367,513,576,587,590,652,1807,997,2047,1111,1319,1345,1456],"class_list":["post-36609","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-argument","tag-array","tag-blog","tag-cache","tag-css","tag-dropdown","tag-google","tag-html","tag-iframe","tag-image","tag-javascript","tag-link","tag-programming","tag-random","tag-search-engine","tag-tutorial","tag-url","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/36609"}],"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=36609"}],"version-history":[{"count":9,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/36609\/revisions"}],"predecessor-version":[{"id":36618,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/36609\/revisions\/36618"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=36609"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=36609"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=36609"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}