2,6d1
< // SVG_Primer.php
< // Draw SVG elemnts
< // RJM Programming
< // December, 2016
< // Features a colour picker ... perhaps via HTML(5) input type=color 
92,106d86
< function arrdo() {
<     $arrb = "\n var arrb=['pink','#ffc0cb'";
<     if (file_exists("ideasfrom.txt")) {
<       $vers=strtolower(file_get_contents("ideasfrom.txt"));
<       $codetds=explode("</code></td>", $vers);
<       for ($ik=2; $ik<(-1 + sizeof($codetds)); $ik+=2) {
<         $names=explode("</td>", str_replace("<td>","</td>",$codetds[0 + $ik]));
<         $r_g_b=explode("&#160;", str_replace("<td><code>", "", str_replace("</code>", "", str_replace("\n", "",$codetds[$ik]))));
<         $arrb .= "," . "'" . $names[-3 + sizeof($names)] . "','#" . substr(("0" . $r_g_b[0]), (strlen($r_g_b[0]) - 1)) . substr(("0" . $r_g_b[1]), (strlen($r_g_b[1]) - 1)) . substr(("0" . $r_g_b[2]), (strlen($r_g_b[2]) - 1)) . "'\n";   
<       }
<     }
<     $arrb .= "]; \n";
<     return $arrb;
< }
< 
179c159
< <title>SVG Tutorial - RJM Programming - July, 2014 and December, 2016 ... thanks to http://www.tutorialspoint.com/html5/html5_svg.htm</title>
---
> <title>SVG Tutorial - RJM Programming - July, 2014 ... thanks to http://www.tutorialspoint.com/html5/html5_svg.htm</title>
184,213d163
< var arr=['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];
< var colourpickerhelper='<input id="filler" onchange=" document.getElementById(\'fill\').value=this.value; " type="color" value="#ff0000"></input>';
< var colourpickerhelperone='<input id="s1stop-color" onchange=" modify(this.value,\'s1stop-color\'); " type="color" value="#c4c4c4"></input>';
< var colourpickerhelpertwo='<input id="s2stop-color" onchange=" modify(this.value,\'s2stop-color\'); " type="color" value="#0000ff"></input>';
< 
< <?php echo arrdo(); ?>
< 
< function modifyback(one_or_two) {
<    var r,g,b;
<    r = document.getElementById('s' + one_or_two + 'stop-colorr').value;
<    g = document.getElementById('s' + one_or_two + 'stop-colorg').value;
<    b = document.getElementById('s' + one_or_two + 'stop-colorb').value;
<    document.getElementById('s' + one_or_two + 'stop-color').value ='#' + arr[(r-(r % 16)) / 16] + arr[r % 16] + arr[(g-(g % 16))  / 16] + arr[g % 16] + arr[(b-(b % 16))  / 16] + arr[b % 16];
< }
< 
< function modify(hexin, idprefix) {
<  var ival=0;
<  var inhex=hexin.toLowerCase().replace('#','');
<  ival+=arr.indexOf(inhex.substring(1,2));
<  ival+=(16 * arr.indexOf(inhex.substring(0,1)));
<  document.getElementById(idprefix + 'r').value=ival;
<  ival=0;
<  ival+=arr.indexOf(inhex.substring(3,4));
<  ival+=(16 * arr.indexOf(inhex.substring(2,3)));
<  document.getElementById(idprefix + 'g').value=ival;
<  ival=0;
<  ival+=arr.indexOf(inhex.substring(5,6));
<  ival+=(16 * arr.indexOf(inhex.substring(4,5)));
<  document.getElementById(idprefix + 'b').value=ival;
< }
223c173
<     odivcontents = odivcontents + "<br>Colour: <input onblur=\"if (this.value.indexOf('#') == 0) { document.getElementById('filler').value=this.value; } else if (arrb.indexOf(this.value.toLowerCase()) != -1) { document.getElementById('filler').value=arrb[1 + arrb.indexOf(this.value.toLowerCase())];  } else if (arrb.indexOf(this.value.replace(' ','').replace(' ','').toLowerCase()) != -1) { document.getElementById('filler').value=arrb[1 + arrb.indexOf(this.value.replace(' ','').replace(' ','').toLowerCase())]; this.value=this.value.replace(' ','').replace(' ','');  }\" type=text id=fill name=fill value=red></input>" + colourpickerhelper + "<br>";
---
>     odivcontents = odivcontents + "<br>Colour: <input type=text id=fill name=fill value=red></input><br>";
227c177
<     odivcontents = odivcontents + "<br>Colour: <input onblur=\"if (this.value.indexOf('#') == 0) { document.getElementById('filler').value=this.value; } else if (arrb.indexOf(this.value.toLowerCase()) != -1) {  document.getElementById('filler').value=arrb[1 + arrb.indexOf(this.value.toLowerCase())];  } else if (arrb.indexOf(this.value.replace(' ','').replace(' ','').toLowerCase()) != -1) { document.getElementById('filler').value=arrb[1 + arrb.indexOf(this.value.replace(' ','').replace(' ','').toLowerCase())]; this.value=this.value.replace(' ','').replace(' ','');  }\" type=text id=fill name=fill value=red>" + colourpickerhelper + "</input><br>";
---
>     odivcontents = odivcontents + "<br>Colour: <input type=text id=fill name=fill value=red></input><br>";
233c183
<     odivcontents = odivcontents + "<br>Stroke Colour: <input onblur=\"if (this.value.indexOf('#') == 0) { document.getElementById('filler').value=this.value; } else if (arrb.indexOf(this.value.toLowerCase()) != -1) { document.getElementById('filler').value=arrb[1 + arrb.indexOf(this.value.toLowerCase())];  } else if (arrb.indexOf(this.value.replace(' ','').replace(' ','').toLowerCase()) != -1) { document.getElementById('filler').value=arrb[1 + arrb.indexOf(this.value.replace(' ','').replace(' ','').toLowerCase())]; this.value=this.value.replace(' ','').replace(' ','');  }\"  type=text id=fill name=stroke value=red>" + colourpickerhelper + "</input><br>";
---
>     odivcontents = odivcontents + "<br>Stroke Colour: <input type=text id=stroke name=stroke value=red></input><br>";
240c190
<     odivcontents = odivcontents + "<br>Colour: <input onblur=\"if (this.value.indexOf('#') == 0) { document.getElementById('filler').value=this.value; } else if (arrb.indexOf(this.value.toLowerCase()) != -1) {  document.getElementById('filler').value=arrb[1 + arrb.indexOf(this.value.toLowerCase())];  } else if (arrb.indexOf(this.value.replace(' ','').replace(' ','').toLowerCase()) != -1) { document.getElementById('filler').value=arrb[1 + arrb.indexOf(this.value.replace(' ','').replace(' ','').toLowerCase())]; this.value=this.value.replace(' ','').replace(' ','');  }\" type=text id=fill name=fill value=red></input>" + colourpickerhelper + "<br>";
---
>     odivcontents = odivcontents + "<br>Colour: <input type=text id=fill name=fill value=red></input><br>";
244c194
<     odivcontents = odivcontents + "<br>Colour: <input onblur=\"if (this.value.indexOf('#') == 0) { document.getElementById('filler').value=this.value; } else if (arrb.indexOf(this.value.toLowerCase()) != -1) {  document.getElementById('filler').value=arrb[1 + arrb.indexOf(this.value.toLowerCase())];  } else if (arrb.indexOf(this.value.replace(' ','').replace(' ','').toLowerCase()) != -1) { document.getElementById('filler').value=arrb[1 + arrb.indexOf(this.value.replace(' ','').replace(' ','').toLowerCase())]; this.value=this.value.replace(' ','').replace(' ','');  }\"  type=text id=fill name=fill value=red></input>" + colourpickerhelper + "<br>";
---
>     odivcontents = odivcontents + "<br>Colour: <input type=text id=fill name=fill value=red></input><br>";
248c198
<     odivcontents = odivcontents + "<br>Colour: <input onblur=\"if (this.value.indexOf('#') == 0) { document.getElementById('filler').value=this.value; } else if (arrb.indexOf(this.value.toLowerCase()) != -1) {  document.getElementById('filler').value=arrb[1 + arrb.indexOf(this.value.toLowerCase())];  } else if (arrb.indexOf(this.value.replace(' ','').replace(' ','').toLowerCase()) != -1) { document.getElementById('filler').value=arrb[1 + arrb.indexOf(this.value.replace(' ','').replace(' ','').toLowerCase())]; this.value=this.value.replace(' ','').replace(' ','');  }\"  type=text id=fill name=fill value=red></input>" + colourpickerhelper + "<br>";
---
>     odivcontents = odivcontents + "<br>Colour: <input type=text id=fill name=fill value=red></input><br>";
258,260c208,210
<     odivcontents = odivcontents + 'Stop 1 Red 0-&gt;255: <input onblur=" modifyback(1); " type=number step=any id="s1stop-colorr" name="s1stop-colorr" value="200">' + colourpickerhelperone + '</input><br>';
<     odivcontents = odivcontents + 'Stop 1 Green 0-&gt;255: <input onblur=" modifyback(1); " type=number step=any id="s1stop-colorg" name="s1stop-colorg" value="200"></input><br>';
<     odivcontents = odivcontents + 'Stop 1 Blue 0-&gt;255: <input onblur=" modifyback(1); " type=number step=any id="s1stop-colorb" name="s1stop-colorb" value="200"></input><br>';
---
>     odivcontents = odivcontents + 'Stop 1 Red 0-&gt;255: <input type=number step=any id="s1stop-colorr" name="s1stop-colorr" value="200"></input><br>';
>     odivcontents = odivcontents + 'Stop 1 Green 0-&gt;255: <input type=number step=any id="s1stop-colorg" name="s1stop-colorg" value="200"></input><br>';
>     odivcontents = odivcontents + 'Stop 1 Blue 0-&gt;255: <input type=number step=any id="s1stop-colorb" name="s1stop-colorb" value="200"></input><br>';
263,265c213,215
<     odivcontents = odivcontents + 'Stop 2 Red 0-&gt;255: <input onblur=" modifyback(2); " type=number step=any id="s2stop-colorr" name="s2stop-colorr" value="0"></input>' + colourpickerhelpertwo + '<br>';
<     odivcontents = odivcontents + 'Stop 2 Green 0-&gt;255: <input onblur=" modifyback(2); " type=number step=any id="s2stop-colorg" name="s2stop-colorg" value="0"></input><br>';
<     odivcontents = odivcontents + 'Stop 2 Blue 0-&gt;255: <input onblur=" modifyback(2); " type=number step=any id="s2stop-colorb" name="s2stop-colorb" value="255"></input><br>';
---
>     odivcontents = odivcontents + 'Stop 2 Red 0-&gt;255: <input type=number step=any id="s2stop-colorr" name="s2stop-colorr" value="0"></input><br>';
>     odivcontents = odivcontents + 'Stop 2 Green 0-&gt;255: <input type=number step=any id="s2stop-colorg" name="s2stop-colorg" value="0"></input><br>';
>     odivcontents = odivcontents + 'Stop 2 Blue 0-&gt;255: <input type=number step=any id="s2stop-colorb" name="s2stop-colorb" value="255"></input><br>';