{"id":50065,"date":"2020-08-24T03:01:23","date_gmt":"2020-08-23T17:01:23","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=50065"},"modified":"2020-08-24T10:10:01","modified_gmt":"2020-08-24T00:10:01","slug":"input-colour-picker-multiple-linear-gradient-background-feedback-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/input-colour-picker-multiple-linear-gradient-background-feedback-tutorial\/","title":{"rendered":"Input Colour Picker Multiple Linear Gradient Background Feedback Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=Input Colour Picker Multiple Linear Gradient Background Feedback Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback_tutti_frutti.jpg\" title=\"Input Colour Picker Multiple Linear Gradient Background Feedback Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Input Colour Picker Multiple Linear Gradient Background Feedback Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Input Colour Picker Multiple Linear Gradient Background Time Tutorial' href='#icpmlgbtt'>Input Colour Picker Multiple Linear Gradient Background Time Tutorial<\/a>&#8216;s external Javascript has been put to the test, that of &#8220;software integration&#8221;, today, and passed.   By what criteria?  There is no better criteria than &#8220;a thing integrated into changed&#8221; and the new functionality integrated with (ie. yesterday&#8217;s external Javascript) &#8220;did not change at all&#8221;.<\/p>\n<p>And yes, those &#8220;time&#8221; aspects to the external Javascript now included in its workings have helped it be a useful integration player (with our &#8220;Feedback&#8221; application last referenced by <a target=_blank title='CSS Gradient Creations Popup Integration Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/css-gradient-creations-popup-integration-tutorial\/'>CSS Gradient Creations Popup Integration Tutorial<\/a> when whole canvas backgrounds could be linear gradient by nature).  And yes, that global var<font size=1>iable<\/font> &#8220;iohuh&#8221; panned out to be invaluable.<\/p>\n<p>How does this work?  How does this manifest itself to how the user interacts with the &#8220;Feedback&#8221; web application (based on HTML5 <a target=_blank href='https:\/\/www.w3schools.com\/html\/html5_canvas.asp' title='HTML(5) canvas element information from w3schools'>canvas<\/a> element &#8220;Annotations Menu&#8221; functionality) integrated to?<\/p>\n<ul>\n<li>as envisaged, it works &#8230;\n<ol>\n<li>codewise via (<a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.html-----------------------------------GETME'>the changed<\/a> <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.html-----------------------------------GETME' title='feedback.htm'>feedback.htm<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm\" title=\"Click picture\">live run<\/a> link) &#8230;<br \/>\n<code><br \/>\n&lt;script type='text\/javascript' src='input_col_multiple.js'&gt;&lt;\/script&gt;<br \/>\n<\/code>\n<\/li>\n<li>interactive use via quick enough selections of multiple colours (going to make up a relevant linear gradient) via the &#8220;Feedback&#8221; application&#8217;s &#8220;Annotation menu&#8221;&#8216;s Colour Picker<\/li>\n<\/ol>\n<\/li>\n<li>the user sees the Colour Picker (and if non-mobile, can hover over it for usage help) and &#8230;\n<ol>\n<li>on selection of first colour via the Colour Picker the user will see a textbox to its right with this background colour (and some white, to give a hint regarding linear gradient possibilities)<\/li>\n<li>on selection of subsequent colours within 20 seconds the Linear Gradient functionality is activated for circles, text, rectangles and lines (for now) and that right hand textbox has its background appropriately linear gradientized<\/li>\n<li>create canvas circles, lines, text or rectangles that can be filled or stroked via these Linear Gradients, as asked for, by the user, clicking on the canvas and clicking Annotation menu buttons<\/li>\n<li>and lastly, to turn off any turned on Linear Gradient functionality, enter any opacity with a prefixed negative sign into that right hand textbox, that turns that textbox&#8217;s background (plain straight) white<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p>Today sees the unusual code changes scenario that just about all the integration (apart from that one codeline change above) is &#8230;<\/p>\n<ul>\n<li>between two external Javascript helpers to &#8230;<\/li>\n<li>the one calling &#8220;Feedback&#8221; web application HTML (as mentioned above) &#8230; and because the &#8220;integrating with\u201d Colour Picker Multiple Attribute is unchanged (as mentioned above) &#8230; that just leaves &#8230;<\/li>\n<li>the &#8220;Feedback&#8221; application&#8217;s &#8220;Annotation menu&#8221;&#8216;s <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world.js---------------------------------GETME' title='world.js'>changed external Javascript<\/a> <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world.js---------------------------------GETME'>world.js<\/a> to complete the integration work of today &#8230; intervening at circle, rectangle, line, text &#8220;[canvasContext].strokeStyle=&#8221; and &#8220;[canvasContext].fillStyle=&#8221; codelines to start using the new Javascript functions below &#8230;<\/p>\n<p><code><br \/>\nvar grad = null; \/\/context.createLinearGradient(begin[0], begin[1], end[0], end[1]);<br \/>\nvar gopac='1.0';<br \/>\n<br \/>\nfunction fillr_look(thecol,rect1,rect2,rect3,rect4) {<br \/>\n  var colsare=[], icolsare=0;<br \/>\n  if (typeof iohuh !== 'undefined') {<br \/>\n  if (('' + iohuh).replace(\/^null$\/g,'').replace(\/^undefined$\/g,'').indexOf('),') != -1 && ('' + iohuh).replace(\/^null$\/g,'').replace(\/^undefined$\/g,'').indexOf('radient(') != -1) {<br \/>\n    colsare=('' + iohuh).split('radient(')[1].split('),');<br \/>\n    grad=context.createLinearGradient(rect1,rect2,eval(rect1 + rect3),eval(rect2 + rect4));<br \/>\n    for (icolsare=0; icolsare&lt;colsare.length; icolsare++) {<br \/>\n      grad.addColorStop(eval(eval('' + icolsare) \/ eval(0 + eval('' + colsare.length))), (colsare[icolsare].split(')')[0] + ')').replace('0.5',gopac));<br \/>\n    }<br \/>\n    return grad;<br \/>\n  }<br \/>\n  }<br \/>\n  return thecol;<br \/>\n}<br \/>\n<br \/>\nfunction stroker_look(thecol,rect1,rect2,rect3,rect4) {<br \/>\n  var colsare=[], icolsare=0;<br \/>\n  if (typeof iohuh !== 'undefined') {<br \/>\n  if (('' + iohuh).replace(\/^null$\/g,'').replace(\/^undefined$\/g,'').indexOf('),') != -1 && ('' + iohuh).replace(\/^null$\/g,'').replace(\/^undefined$\/g,'').indexOf('radient(') != -1) {<br \/>\n    colsare=('' + iohuh).split('radient(')[1].split('),');<br \/>\n    grad=context.createLinearGradient(rect1,rect2,eval(rect1 + rect3),eval(rect2 + rect4));<br \/>\n    for (icolsare=0; icolsare&lt;colsare.length; icolsare++) {<br \/>\n      grad.addColorStop(eval(eval('' + icolsare) \/ eval(0 + eval('' + colsare.length))), (colsare[icolsare].split(')')[0] + ')').replace('0.5',gopac));<br \/>\n    }<br \/>\n    return grad;<br \/>\n  }<br \/>\n  }<br \/>\n  return thecol;<br \/>\n}<br \/>\n<br \/>\nfunction fillc_look(thecol,arc1,arc2,arc3,arc4,arc5) {<br \/>\n  var colsare=[], icolsare=0;<br \/>\n  if (typeof iohuh !== 'undefined') {<br \/>\n  if (('' + iohuh).replace(\/^null$\/g,'').replace(\/^undefined$\/g,'').indexOf('),') != -1 && ('' + iohuh).replace(\/^null$\/g,'').replace(\/^undefined$\/g,'').indexOf('radient(') != -1) {<br \/>\n    colsare=('' + iohuh).split('radient(')[1].split('),');<br \/>\n    grad=context.createLinearGradient(eval(arc1 - arc3),eval(arc2 - arc3),eval(arc1 + arc3),eval(arc2 + arc3));<br \/>\n    for (icolsare=0; icolsare&lt;colsare.length; icolsare++) {<br \/>\n      grad.addColorStop(eval(eval('' + icolsare) \/ eval(0 + eval('' + colsare.length))), (colsare[icolsare].split(')')[0] + ')').replace('0.5',gopac));<br \/>\n    }<br \/>\n    return grad;<br \/>\n  }<br \/>\n  }<br \/>\n  return thecol;<br \/>\n}<br \/>\n<br \/>\nfunction strokec_look(thecol,arc1,arc2,arc3,arc4,arc5) {<br \/>\n  var colsare=[], icolsare=0;<br \/>\n  if (typeof iohuh !== 'undefined') {<br \/>\n  if (('' + iohuh).replace(\/^null$\/g,'').replace(\/^undefined$\/g,'').indexOf('),') != -1 && ('' + iohuh).replace(\/^null$\/g,'').replace(\/^undefined$\/g,'').indexOf('radient(') != -1) {<br \/>\n    colsare=('' + iohuh).split('radient(')[1].split('),');<br \/>\n    grad=context.createLinearGradient(eval(arc1 - arc3),eval(arc2 - arc3),eval(arc1 + arc3),eval(arc2 + arc3));<br \/>\n    for (icolsare=0; icolsare&lt;colsare.length; icolsare++) {<br \/>\n      grad.addColorStop(eval(eval('' + icolsare) \/ eval(0 + eval('' + colsare.length))), (colsare[icolsare].split(')')[0] + ')').replace('0.5',gopac));<br \/>\n    }<br \/>\n    return grad;<br \/>\n  }<br \/>\n  }<br \/>\n  return thecol;<br \/>\n}<br \/>\n<br \/>\nfunction stroket_look(thecol,text1,text2) {<br \/>\n  var colsare=[], icolsare=0;<br \/>\n  if (typeof iohuh !== 'undefined') {<br \/>\n  if (('' + iohuh).replace(\/^null$\/g,'').replace(\/^undefined$\/g,'').indexOf('),') != -1 && ('' + iohuh).replace(\/^null$\/g,'').replace(\/^undefined$\/g,'').indexOf('radient(') != -1) {<br \/>\n    colsare=('' + iohuh).split('radient(')[1].split('),');<br \/>\n    grad=context.createLinearGradient(text1,text2,eval(text1 + 200),eval(text2 + 200));<br \/>\n    for (icolsare=0; icolsare&lt;colsare.length; icolsare++) {<br \/>\n      alert(45);<br \/>\n      grad.addColorStop(eval(eval('' + icolsare) \/ eval(0 + eval('' + colsare.length))), (colsare[icolsare].split(')')[0] + ')').replace('0.5',gopac));<br \/>\n    }<br \/>\n    return grad;<br \/>\n  }<br \/>\n  return thecol;<br \/>\n}<br \/>\n<br \/>\nfunction strokel_look(thecol,line1,line2,line3,line4) {<br \/>\n  var colsare=[], icolsare=0;<br \/>\n  if (('' + iohuh).replace(\/^null$\/g,'').replace(\/^undefined$\/g,'').indexOf('),') != -1 && ('' + iohuh).replace(\/^null$\/g,'').replace(\/^undefined$\/g,'').indexOf('radient(') != -1) {<br \/>\n    colsare=('' + iohuh).split('radient(')[1].split('),');<br \/>\n    grad=context.createLinearGradient(line3,line4,line1,line2);<br \/>\n    for (icolsare=0; icolsare&lt;colsare.length; icolsare++) {<br \/>\n      grad.addColorStop(eval(eval('' + icolsare) \/ eval(0 + eval('' + colsare.length))), (colsare[icolsare].split(')')[0] + ')').replace('0.5',gopac));<br \/>\n    }<br \/>\n    return grad;<br \/>\n  }<br \/>\n  }<br \/>\n  return thecol;<br \/>\n}<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p> &#8230; ready for <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm\" title=\"Click picture\">your perusal<\/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\/input-colour-picker-multiple-linear-gradient-background-feedback-tutorial\/'>Input Colour Picker Multiple Linear Gradient Background Feedback Tutorial<\/a>.<\/p-->\n<hr>\n<p id='icpmlgbtt'>Previous relevant <a target=_blank title='Input Colour Picker Multiple Linear Gradient Background Time Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/input-colour-picker-multiple-linear-gradient-background-time-tutorial\/'>Input Colour Picker Multiple Linear Gradient Background Time 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\/input_col_multiple.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=Input Colour Picker Multiple Linear Gradient Background Time Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/input_col_multiple_time.jpg\" title=\"Input Colour Picker Multiple Linear Gradient Background Time Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Input Colour Picker Multiple Linear Gradient Background Time Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Input Colour Picker Multiple Linear Gradient Background Primer Tutorial' href='#icpmlgbpt'>Input Colour Picker Multiple Linear Gradient Background Primer Tutorial<\/a> could do with some more &#8220;genericization <a target=_blank onclick=\"  setTimeout(function(){ alert(' ... and awaiting ... &#129704; &#129704; ... the rocks!'); }, 4000);\" href='https:\/\/www.google.com\/search?q=chops+meaning&#038;rlz=1C5CHFA_enAU832AU832&#038;oq=chops+meaning&#038;aqs=chrome..69i57j0l7.3587j1j7&#038;sourceid=chrome&#038;ie=UTF-8'>chops<\/a>&#8220;.<\/p>\n<p>With any web application that is &#8230;<\/p>\n<ul>\n<li>largely &#8220;external Javascript&#8221; as far as the scripting goes &#8230; and has been tested with &#8230;<\/li>\n<li>a simple &#8220;proof of concept&#8221; web application supervisor &#8230; needs &#8230;<\/li>\n<li>genericization thoughts regarding other uses for the &#8220;external Javascript&#8221; that can facilitate setting that Javascript free to be of use in <i>other scenarios<\/i><\/li>\n<\/ul>\n<p>That <i>other scenario<\/i> we can envisage is regarding those <a target=_blank title='HTML Canvas element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp'>canvas<\/a> element based annotation functionalities that use a colour picker (ie. input type=color element) to determine a colour (such as a line drawing colour).  We want to, eventually, &#8220;imbue&#8221; that colour picker with more functionality, and yet leave its functionality as is, for the <i>simple &#8220;one colour&#8221; linework arrangements<\/i> a lot of users will be happy to stick with.  How do we keep both ideas happy?  We introduce (into the equation) &#8230;<\/p>\n<ul>\n<li>a time factor to the user interactions with the colour picker &#8230; so that &#8230;<\/li>\n<li>if a user takes a long time between colour selections using the colour picker (or even only visits it the once) that means they are selecting <i>simple &#8220;one colour&#8221; linework arrangements<\/i> &#8230; but &#8230;<\/li>\n<li>if a user takes a short time between colour selections that indicates they wouldn&#8217;t be against creating linear gradient linework on their canvas annotations (until a &#8220;double click&#8221; on the same colour to revert back to <i>simple &#8220;one colour&#8221; linework arrangements<\/i> as above)<\/li>\n<\/ul>\n<p> &#8230; leaving any calling web application the global variable &#8230;<\/p>\n<p><code><br \/>\n var iohuh='';     \/\/ if iohuh contains \"),\" linear gradients will be observed, rather than simple one colour arrangements<br \/>\n<\/code><\/p>\n<p> &#8230; <font color=blue>containing &#8220;),&#8221;<\/font> (being <font color=blue>true<\/font>) as a determinant that linear gradients <font color=blue>are currently in play<\/font> (in the user&#8217;s mind), else use the last colour picked as your <i>simple &#8220;one colour&#8221; linework arrangement<\/i>.<\/p>\n<p>All today&#8217;s changes to our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/input_col_multiple.htm\" title=\"Click picture\">live run<\/a> link&#8217;s workings are derived from <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/input_col_multiple.js-GETME\" title=\"input_col_multiple.js\">a changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/input_col_multiple.js-GETME\" title=\"input_col_multiple.js\">input_col_multiple.js<\/a> external Javascript code.<\/p>\n<p>And what drives the &#8220;timeliness&#8221; of this changed external Javascript code?  Good ol&#8217; <a target=_blank title='Javascript setTimeout method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_settimeout.asp'><i>setTimeout<\/i><\/a> (combined with some global var<font size=1>iable<\/font> &#8220;inplay&#8221; usage where you should know that &#8220;inplay++;&#8221; happens each time a body background change is made and then a &#8220;setTimeout(lessinplay, 20000);&#8221; immediately follows), as per &#8230;<\/p>\n<p><code><br \/>\n  var inplay=0;<br \/>\n  var documentbody=document.body;<br \/>\n<br \/> <br \/>\n  function lessinplay() {<br \/>\n    if (iohuh.indexOf('),') == -1) {<br \/>\n      inplay--;<br \/>\n      if (eval('' + inplay) &lt;= 0) {<br \/>\n        iohuh='';<br \/>\n        documentbody.style.background='';<br \/>\n        documentbody.style.backgroundColor='white';<br \/>\n        if ((optionvalmultiple ? optionvalmultiple : elsel)) {<br \/>\n          if ((optionvalmultiple ? optionvalmultiple : elsel).innerHTML.indexOf(')') == -1) {<br \/>\n            iohuh=' ';<br \/>\n            if (optionvalmultiple) {<br \/>\n            optionvalmultiple.innerHTML+=optionsuffix;<br \/>\n            } else {<br \/>\n            elsel.innerHTML=elsel.innerHTML.replace('&lt;\/option&gt;', optionsuffix + '&lt;\/option&gt;');<br \/>\n            }<br \/>\n          }<br \/>\n        }<br \/>\n      }<br \/>\n    } else if (<i>(optionvalmultiple ? optionvalmultiple : elsel)<\/i>) {<br \/>\n      if (<i>(optionvalmultiple ? optionvalmultiple : elsel)<\/i>.innerHTML.indexOf(')') != -1) {<br \/>\n            iohuh+=' ';<br \/>\n            if (optionvalmultiple) {<br \/>\n            optionvalmultiple.innerHTML=optionvalmultiple.innerHTML.replace(optionsuffix, '');<br \/>\n            } else {<br \/>\n            elsel.innerHTML=elsel.innerHTML.replace(optionsuffix + '&lt;\/option&gt;', '&lt;\/option&gt;');<br \/>\n            }<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n<\/code><\/p>\n<p> &#8230; those <i>ternary element object tests<\/i> having a meaning because of a <font color=blue>more &#8220;forensic&#8221;<\/font> &#8230;<\/p>\n<p><code><br \/>\n  <font color=blue>var elsel=null;<br \/>\n  var willingtotryupto=55;<br \/>\n  var linear_gradient_part='';<br \/>\n  var elitext=null;<br \/>\n  var optionvalmultiple=null;<\/font><br \/>\n<br \/>\n  function onl() {<br \/>\n    <font color=blue>var el=document.querySelector(\"input[type='color']\");<br \/>\n    if (!el && eval('' + willingtotryupto) &gt; 0) {<br \/>\n      willingtotryupto--;<br \/>\n      setTimeout(onl, 1000);<br \/>\n      return;<br \/>\n    }<br \/>\n    if (document.getElementById('mycolour') && el) {<br \/>\n      documentbody=document.getElementById('mycolour');<br \/>\n      document.getElementById('mycolour').title=('' + document.getElementById('mycolour').title + ' ') + ' (negative opacity value here stops Linear Gradient mode). Multiple selections with colour picker within 20 seconds signify a linear gradient stroke (as relevant)';<br \/>\n      el.title=('' + el.title + ' ') + 'Multiple selections of this colour picker within 20 seconds signify a linear gradient stroke (as relevant)';<br \/>\n      linear_gradient_part='to right,';<br \/>\n      iomultiple='multiple';<br \/>\n      willingtotryupto=555;<br \/>\n    } else {<br \/>\n      documentbody=document.body;<br \/>\n    }<br \/>\n    elitext=document.querySelector(\"input[type='text']\");<br \/>\n    optionvalmultiple=document.querySelector(\"option[value='multiple']\");<br \/>\n    if (!optionvalmultiple && iomultiple == '') { iomultiple='multiple'; }<br \/>\n    if (el) {<br \/>\n     if (!el.onclick) {<br \/>\n       el.addEventListener('click', function(event) {  checkformultiple(event.target);  });<br \/>\n     } else if (('' + el.onclick).indexOf('checkformultiple') == -1) {<br \/>\n       el.addEventListener('click', function(event) {  checkformultiple(event.target);  });<br \/>\n     }<br \/>\n     if (!el.onblur) {<br \/>\n       el.addEventListener('blur', function(event) {  finalchoice(event.target);  });<br \/>\n     } else if (('' + el.onblur).indexOf('finalchoice') == -1) {<br \/>\n       el.addEventListener('blur', function(event) {  finalchoice(event.target);  });<br \/>\n     }<br \/>\n     if (!el.onchange) {<br \/>\n       el.addEventListener('change', function(event) {  finalchoice(event.target);  });<br \/>\n     } else if (('' + el.onchange).indexOf('finalchoice') == -1) {<br \/>\n       el.addEventListener('change', function(event) {  finalchoice(event.target);  });<br \/>\n     }<br \/>\n    }<br \/>\n    var elsels=document.querySelectorAll(\"select\");<br \/>\n    if (elsels.length > 0) {<br \/>\n    for (var iko=0; iko&lt;elsels.length; iko++) {<br \/>\n    if (elsels[iko].innerHTML.indexOf('ultiple') != -1 && !elsel) {<br \/>\n    <\/font>elsel=<font color=blue>elsels[iko]; \/\/<\/font>document.querySelector(\"select\");<font color=blue><br \/>\n    }<br \/>\n    }<br \/>\n    }<\/font><br \/>\n    if (elsel && documentbody == document.body) { if (('' + elsel.id) == '') { iomultiple='' + elsel.value;  } else { sel(('' + elsel.id)); } }<br \/>\n  }<br \/>\n<\/code> <\/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\/input-colour-picker-multiple-linear-gradient-background-primer-tutorial\/'>Input Colour Picker Multiple Linear Gradient Background Primer Tutorial<\/a>.<\/p-->\n<hr>\n<p id='icpmlgbpt'>Previous relevant <a target=_blank title='Input Colour Picker Multiple Linear Gradient Background Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/input-colour-picker-multiple-linear-gradient-background-primer-tutorial\/'>Input Colour Picker Multiple Linear Gradient Background 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\/input_col_multiple.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=Input Colour Picker Multiple Linear Gradient Background Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/input_col_multiple.jpg\" title=\"Input Colour Picker Multiple Linear Gradient Background Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Input Colour Picker Multiple Linear Gradient Background Primer Tutorial<\/p><\/div>\n<p>We&#8217;ve got two ideas floating around today&#8217;s proof of concept &#8220;Input Colour Picker Multiple Linear Gradient Background&#8221; web application concept, the second being the &#8220;proof of concept&#8221; bit, at least for us &#8230;<\/p>\n<ul>\n<li>dynamically created linear-gradient backgrounds (as you can read about recently at <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/css-gradient-creations-popup-integration-tutorial' title='CSS Gradient Creations Popup Integration Tutorial'>CSS Gradient Creations Popup Integration Tutorial<\/a>) &#8230; augmented by the interactive input required, via the new idea of &#8230;<\/li>\n<li>input type=color &#8220;multiple&#8221; attribute (not of meaning to default HTML and CSS and Javascript that involves element types that are not &#8220;select&#8221; (dropdowns), but) made to mean something (for input type=color elements) today<\/li>\n<\/ul>\n<p> &#8230; in our inhouse HTML and Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/input_col_multiple.html-GETME\" title=\"input_col_multiple.htm\">input_col_multiple.htm<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/input_col_multiple.htm\" title=\"Click picture\">live run<\/a> link (that includes the crucial external Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/input_col_multiple.js_GETME\" title=\"input_col_multiple.js\">input_col_multiple.js<\/a> and <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/input_col_multiple.html-GETME\" title=\"input_col_multiple.htm\">derived via<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/input_col_multiple.html\" title=\"Click picture\">less interesting live run<\/a>), (any\/all of which) you can try for yourself.<\/p>\n<p>Notice some <font color=red>genericization considerations<\/font> in the Javascript with code snippets like &#8230;<\/p>\n<p><code><br \/>\n    var el=<font color=red>document.<a target=_blank title='HTML DOM querySelector() Method information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/met_document_queryselector.asp'>querySelector<\/a>(\"input[type='color']\")<\/font>;  \/\/ gets first CSS'y element selector filtering (in Javascript)<br \/>\n    var eloh='';<br \/>\n    if (el && iomultiple != '') { if (el.outerHTML.toLowerCase().indexOf(' multiple') == -1) { el.setAttribute('multiple',true);  }  eloh=el.outerHTML; }<br \/>\n    if (eloh.toLowerCase().indexOf(' multiple') != -1) {<br \/>\n      \/\/ do stuff regarding document.body linear gradient background<br \/>\n    }<br \/>\n<\/code><\/p>\n<p> &#8230; or the body onload substitute code &#8230;<\/p>\n<p><code><br \/>\n  var iomultiple='';<br \/>\n<br \/>\n  function sel(oid) {<br \/>\n    if (document.getElementById(oid)) {<br \/>\n      iomultiple='' + document.getElementById(oid).value;<br \/>\n    }<br \/>\n  }<br \/>\n<br \/>\n  function onl() {<br \/>\n    var elsel=document.querySelector(\"select\");<br \/>\n    if (elsel) { <font color=blue>if (('' + elsel.id) == '') { iomultiple='' + elsel.value;  } else {<\/font> sel(('' + elsel.id)); } }<br \/>\n  }<br \/>\n<br \/> <br \/>\n  setTimeout(onl, 1000);<br \/>\n<\/code><\/p>\n<p> &#8230; where the determining &#8220;select&#8221; dropdown (as to whether linear gradients will be dynamically applied to document.body background)<strike style=color:blue> needs an ID but we do not care what that ID<\/strike> is.<\/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='#d50036' onclick='var dv=document.getElementById(\"d50036\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/multiple\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d50036' 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='#d50046' onclick='var dv=document.getElementById(\"d50046\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/time\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d50046' 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='#d50065' onclick='var dv=document.getElementById(\"d50065\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/integration\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d50065' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday&#8217;s Input Colour Picker Multiple Linear Gradient Background Time Tutorial&#8216;s external Javascript has been put to the test, that of &#8220;software integration&#8221;, today, and passed. By what criteria? There is no better criteria than &#8220;a thing integrated into changed&#8221; and &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/input-colour-picker-multiple-linear-gradient-background-feedback-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":[126,184,224,228,281,1683,409,1847,1839,3081,576,609,614,652,2020,2092,997,2835,2854,1126,1168,3404,1279,1319],"class_list":["post-50065","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-background","tag-canvas","tag-colour","tag-colour-picker","tag-css","tag-dynamic","tag-external-javascript","tag-feedback","tag-genericization","tag-global-variable","tag-html","tag-input","tag-integration","tag-javascript","tag-linear-gradient","tag-multiple","tag-programming","tag-queryselector","tag-queryselectorall","tag-settimeout","tag-software-integration","tag-ternary","tag-time","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/50065"}],"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=50065"}],"version-history":[{"count":14,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/50065\/revisions"}],"predecessor-version":[{"id":50080,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/50065\/revisions\/50080"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=50065"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=50065"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=50065"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}