<?php
// SVG_Primer.php
// Draw SVG elemnts
// RJM Programming
// December, 2016
// Features a colour picker ... perhaps via HTML(5) input type=color 

 $ris=255;
 $gis=0;
 $bis=0;
 $iurl = "";
 $what = "";
 if (isset($_GET['what'])) {
   $what = $_GET['what'];
 } else if (isset($_POST['what'])) {
   $what = $_POST['what'];
 }
 $mode = "GET";
 $p1 = "";
 $p2 = "";
 $p3 = "";
 $p4 = "";
 $p5 = "";
 $p6 = "";
 $p7 = "";
 $p8 = "";
 $p9 = "";
 $p10 = "";


 $p11 = "";
 $p12 = "";
 $p13 = "";
 $p14 = "";
 $p15 = "";
 $p16 = "";
 $p17 = "";
 $p18 = "";
 $p19 = "";
 $p20 = "";

function server_remote_addr() {
    $rma = $_SERVER['REMOTE_ADDR'];
    $ua = strtolower($_SERVER['HTTP_USER_AGENT']);
    // you can add different browsers with the same way ..
    if(preg_match('/(chromium)[ \/]([\w.]+)/', $ua))
            $rma = '000000'.$rma;
    elseif(preg_match('/(chrome)[ \/]([\w.]+)/', $ua))
            $rma = '00000'.$rma;
    elseif(preg_match('/(safari)[ \/]([\w.]+)/', $ua))
            $rma = '0000'.$rma;
    elseif(preg_match('/(opera)[ \/]([\w.]+)/', $ua))
            $rma = '000'.$rma;
    elseif(preg_match('/(msie)[ \/]([\w.]+)/', $ua))
            $rma = '00'.$rma;
    elseif(preg_match('/(mozilla)[ \/]([\w.]+)/', $ua))
            $rma = '0'.$rma;
    return $rma;
}

function stuffaround($aniname) {
 $istuff = "";
 $huh="?huh=" . rand(0,32674);
 if ($aniname != "") {
   $istuff='&nbsp&nbsp;<script type="text/javascript"> function ath() { window.open("' . $aniname . $huh . '","' . $aniname . $huh . '","top=100,left=100,width=300,height=300"); } setTimeout(ath,1000); </script>';
 }
 return $istuff;
}


function fmc($im, $incol) {
    $coltoget=str_replace(" ", "", str_replace(" ", "", strtolower(urldecode($incol))));
    if (file_exists("ideasfrom.txt")) {
      $vers=strtolower(file_get_contents("ideasfrom.txt"));
      //$versus=explode("<table>", $vers);
    //file_put_contents("ideasfrom.yyy", "<td>" . $coltoget . "</td> ?in? " . $versus);
      if (strpos($vers, "<td>" . $coltoget . "</td>") !== false) {
    //file_put_contents("ideasfrom.zzz", $_GET['findmecolour']);
        $rest=explode("<td>" . $coltoget . "</td>", $vers); //us[1]);
        $andthen=explode("</td>", $rest[1]);
        $r_g_b=explode("&#160;", str_replace("<td><code>", "", str_replace("</code>", "", str_replace("\n", "", $andthen[0]))));
        $xris=strval(hexdec($r_g_b[0]));
        $xgis=strval(hexdec($r_g_b[1]));
        $xbis=strval(hexdec($r_g_b[2]));
    //file_put_contents("ideasfrom.www", $xris . " " . $xgis . " " . $xbis);
        return imagecolorallocate($im, $xris, $xgis, $xbis);
      }
    }
    return null;
}

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;
}

function saveit($drawwhat) {
 global $p1,$p2,$p3,$p4,$p5,$p6,$p7,$p8,$p9,$p10,$p11,$p12,$p13,$p14,$p15,$p16,$p17,$p18,$p19,$p20;
 $imgname="";
    //file_put_contents("ideasfrom.zzz", "0 " . $drawwhat);
 if ($drawwhat == "Circle") {
   $imgname="animage_" . str_replace(".", "_", str_replace(":", "_", server_remote_addr())) . ".jpg";
   //if (file_exists($imgname)) unlink($imgname);
   $iois=imagecreatetruecolor($p1, $p1); 
   $ourp5=fmc($iois, $p5);  
   //$ourp5=imagecolorallocate($iois, $ris, $bis, $gis); // vs red
   imagefilledarc($iois, $p2, $p3, $p4, $p4, 0, 360, $ourp5, IMG_ARC_PIE);
   imagejpeg($iois, $imgname);
   imagedestroy($iois);
   return $imgname;
 } else if ($drawwhat == "Rectangle") {
   $imgname="animage_" . str_replace(".", "_", str_replace(":", "_", server_remote_addr())) . ".jpg";
   //if (file_exists($imgname)) unlink($imgname);
   $iois=imagecreatetruecolor(max(max($p2,$p3),$p1), max(max($p2,$p3),$p1)); 
   $ourp5=fmc($iois, $p4);  
   //$ourp5=imagecolorallocate($iois, $ris, $bis, $gis); // vs red
   imagefilledrectangle($iois, 0, 0, ($p2 + 0), ($p3 + 0), $ourp5);
   imagejpeg($iois, $imgname);
   imagedestroy($iois);
   return $imgname;
 } else if ($drawwhat == "Line") {
   $imgname="animage_" . str_replace(".", "_", str_replace(":", "_", server_remote_addr())) . ".jpg";
   //if (file_exists($imgname)) unlink($imgname);
   $iois=imagecreatetruecolor(max(max($p2,$p4),$p1), max(max($p3,$p5),$p1)); 
   $ourp5=fmc($iois, $p6);  
   //$ourp5=imagecolorallocate($iois, $ris, $bis, $gis); // vs red
   imageline($iois, $p2, $p3, $p4, $p5, $ourp5);
   imagejpeg($iois, $imgname);
   imagedestroy($iois);
   return $imgname;
 } else if ($drawwhat == "Ellipse") {
   $imgname="animage_" . str_replace(".", "_", str_replace(":", "_", server_remote_addr())) . ".jpg";
   //if (file_exists($imgname)) unlink($imgname);
   $iois=imagecreatetruecolor(max($p4,$p1), max($p5,$p1)); 
   $ourp5=fmc($iois, $p6);  
   //$ourp5=imagecolorallocate($iois, $ris, $bis, $gis); // vs red
   imagefilledellipse($iois, $p2, $p3, $p4, $p5, $ourp5);
   imagejpeg($iois, $imgname);
   imagedestroy($iois);
   return $imgname;
 } else if ($drawwhat == "Polygon") {
    //file_put_contents("ideasfrom.zzz", "1");
   $imgname="animage_" . str_replace(".", "_", str_replace(":", "_", server_remote_addr())) . ".jpg";
    //file_put_contents("ideasfrom.zzz", "2");
   if (1 == 1) {
   $iois=imagecreatetruecolor(($p1 * 2), $p1); 
    //file_put_contents("ideasfrom.zzz", "3");
   $ourp5=fmc($iois, $p3);  
    //file_put_contents("ideasfrom.zzz", "4");
   //eval(" $arr2=array(" . str_replace(" ", ",", urldecode($p2)) . ");");
   $arr2=explode(",", str_replace(" ", ",", urldecode($p2)));
    //file_put_contents("ideasfrom.zzz", "5");
   imagefilledpolygon($iois, $arr2, (sizeof($arr2) / 2), $ourp5); 
    //file_put_contents("ideasfrom.zzz", "6");
   imagejpeg($iois, $imgname);
    //file_put_contents("ideasfrom.zzz", "7");
   imagedestroy($iois);
    //file_put_contents("ideasfrom.zzz", "8");
   }
   return $imgname;
 } 
 return $imgname;
}

 if ($what == "") {
?>
<!DOCTYPE html>
<head>
<title>SVG Tutorial - RJM Programming - July, 2014 and December, 2016 ... thanks to http://www.tutorialspoint.com/html5/html5_svg.htm</title>
<meta charset="utf-8" />
<link href='//www.rjmprogramming.com.au/PHP/emboss_h1.css' rel='stylesheet' type='text/css'>
<script type="text/javascript">

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;
}

function fill_in_theparameters(othis) {
  var hideit=false;
  var odiv = document.getElementById("theparameters");
  var odivcontents = '<br>Height: <input type=number step=any id=height name=height value=200></input><br>';
  if (othis.value == "Circle") {
    odivcontents = odivcontents + "<br>Centre X: <input type=number step=any id=cx name=cx value=50></input><br>";
    odivcontents = odivcontents + "<br>Centre Y: <input type=number step=any id=cy name=cy value=50></input><br>";
    odivcontents = odivcontents + "<br>Radius: <input type=number step=any id=r name=r value=50></input><br>";
    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>";
  } else if (othis.value == "Rectangle") {
    odivcontents = odivcontents + "<br>Rectangle Width: <input type=number step=any id=w name=w value=300></input><br>";
    odivcontents = odivcontents + "<br>Rectangle Height: <input type=number step=any id=h name=h value=100></input><br>";
    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>";
  } else if (othis.value == "Line") {
    odivcontents = odivcontents + "<br>First X: <input type=number step=any id=x1 name=x1 value=0></input><br>";
    odivcontents = odivcontents + "<br>First Y: <input type=number step=any id=y1 name=y1 value=0></input><br>";
    odivcontents = odivcontents + "<br>Last X: <input type=number step=any id=x2 name=x2 value=200></input><br>";
    odivcontents = odivcontents + "<br>Last Y: <input type=number step=any id=y2 name=y2 value=100></input><br>";
    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 Width: <input type=number step=any id="stroke-width" name="stroke-width" value=2></input><br>';
  } else if (othis.value == "Ellipse") {
    odivcontents = odivcontents + "<br>Centre X: <input type=number step=any id=cx name=cx value=100></input><br>";
    odivcontents = odivcontents + "<br>Centre Y: <input type=number step=any id=cy name=cy value=50></input><br>";
    odivcontents = odivcontents + "<br>Radius X: <input type=number step=any id=rx name=rx value=100></input><br>";
    odivcontents = odivcontents + "<br>Radius Y: <input type=number step=any id=ry name=ry value=50></input><br>";
    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>";
  } else if (othis.value == "Polygon") {
    //hideit=true;
    odivcontents = odivcontents + '<br>Polygon Co-ordinates: <input type=text id=points name=points value="20,10 300,20 170,50"></input><br>';
    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>";
  } else if (othis.value == "Polyline") {  
    hideit=true;
    odivcontents = odivcontents + '<br>Polygon Co-ordinates: <input type=text id=points name=points value="0,0 0,20 20,20 20,40 40,40 40,60"></input><br>';
    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>";
  } else if (othis.value == "Gradient Ellipse") {
    hideit=true;
    odivcontents = "Height: <input type=number step=any id=height name=height value=200></input><br>";
    odivcontents = odivcontents + 'Radial Gradient % Centre X: <input type=text id=rcx name=rcx value="50%"></input><br>';
    odivcontents = odivcontents + 'Radial Gradient % Centre Y: <input type=text id=rcy name=rcy value="50%"></input><br>';
    odivcontents = odivcontents + 'Radial Gradient Radius %: <input type=text id=rr name=rr value="50%"></input><br>';
    odivcontents = odivcontents + 'Radial Gradient % X: <input type=text id=rfx name=rfx value="50%"></input><br>';
    odivcontents = odivcontents + 'Radial Gradient % Y: <input type=text id=rfy name=rfy value="50%"></input><br>';
    odivcontents = odivcontents + 'Stop 1 Offset %: <input type=text id=s1offset name=s1offset value="0%"></input><br>';
    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 Opacity 0.0-&gt;1.0: <input type=number step=any id=s1opacity name=s1opacity value="0"></input><br>';
    odivcontents = odivcontents + 'Stop 2 Offset %: <input type=text id=s2offset name=s2offset value="100%"></input><br>';
    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 Opacity 0.0-&gt;1.0: <input type=number step=any id=s2opacity name=s2opacity value="1"></input><br>';
    odivcontents = odivcontents + "Centre X: <input type=number step=any id=cx name=cx value=100></input><br>";
    odivcontents = odivcontents + "Centre Y: <input type=number step=any id=cy name=cy value=50></input><br>";
    odivcontents = odivcontents + "Radius X: <input type=number step=any id=rx name=rx value=100></input><br>";
    odivcontents = odivcontents + "Radius Y: <input type=number step=any id=ry name=ry value=50></input><br>";
  }
  odiv.innerHTML = odivcontents;
  if (hideit) {
    document.getElementById('submitsave').style.display='none';
  } else {
    document.getElementById('submitsave').style.display='inline';
  }
}

</script>
</head>
<body align="center" style="background-color:teal;">
<h1 align="center">HTML5 SVG Tutorial</h1>
<br>
<form id="svgform" method="POST" action="./SVG_Primer.php" align="center" style="width: 96%; background-color:pink; padding: 20 20 20 20; border: 5px solid red;">
<!--input style='display:none;' type='text' value='255' name='r' id='r'></input>
<input style='display:none;' type='text' value='0' name='g' id='g'></input>
<input style='display:none;' type='text' value='0' name='b' id='b'></input-->
<div id="theselect" align="center"><br><select align="center" name="what" id="what" onchange="fill_in_theparameters(this);"><option value=''>Please select a SVG shape to create below ...</option>
<option value='Circle'>Circle</option>
<option value='Rectangle'>Rectangle</option>
<option value='Line'>Line</option>
<option value='Ellipse'>Ellipse</option>
<option value='Polygon'>Polygon</option>
<option value='Polyline'>Polyline</option>
<option value='Gradient Ellipse'>Gradient Ellipse</option>
</select>
</div>
<div id="theparameters" align="center">
</div>
<br><div id="thebuttons" align="center"><input align="center" type=submit id=submit name=submit value="Draw shape above"></input>&nbsp;&nbsp;&nbsp;&nbsp;<input align="center" type=submit id=submitsave name=submitsave value="Draw and save shape above"></input>&nbsp;&nbsp;&nbsp;&nbsp;<input align="center" type=reset id=reset name=reset value="Reset"></input></div>
<br></form>
</body>
</html>
<?php 
 } else if (isset($_GET['what'])) {
   $what = $_GET['what'];
 } else {
   $what = $_POST['what'];
   $mode = "POST";
 }
 
    if (!file_exists("ideasfrom.txt")) {
      if (strlen($_GET['ideasfrom']) == 0) {
       file_put_contents("ideasfrom.txt", file_get_contents( "http://en.wikipedia.org/wiki/Web_colors"));
      } else { 
       file_put_contents("ideasfrom.txt", file_get_contents($_GET['ideasfrom']));
      }
    }

 
 if ($what == "Circle") {
   if ($mode == "POST") {
     $p1 = $_POST['height']; // 200
     $p2 = $_POST['cx']; // 50
     $p3 = $_POST['cy']; // 50
     $p4 = $_POST['r']; // 50
     $p5 = $_POST['fill']; // red
     if (isset($_POST['submitsave'])) $iurl=saveit($what);
   } else {
     $p1 = $_GET['height']; // 200
     $p2 = $_GET['cx']; // 50
     $p3 = $_GET['cy']; // 50
     $p4 = $_GET['r']; // 50
     $p5 = $_GET['fill']; // red
     if (isset($_POST['submitsave'])) $iurl=saveit($what);
   }
?>
<!DOCTYPE html>
<head>
<title>SVG</title>
<link href='//www.rjmprogramming.com.au/PHP/emboss_h1.css' rel='stylesheet' type='text/css'>
<meta charset="utf-8" />
</head>
<body style="background-color:#F0F0F0;">
<h1 align="center">HTML5 SVG Circle</h1><?php echo '<div align="center"><svg id="svgelem" height="' . $p1 . '" xmlns="http://www.w3.org/2000/svg"><circle id="redcircle" cx="' . $p2 . '" cy="' . $p3 . '" r="' . $p4 . '" fill="' . $p5 . '" /></svg></div>'; ?>
<br><a align="center" href="./SVG_Primer.php" title="Another go">Another go?</a><?php echo stuffaround($iurl); ?></body>
</html>
<?php 
 } else if ($what == "Rectangle") {
   if ($mode == "POST") {
     $p1 = $_POST['height']; // 200
     $p2 = $_POST['w']; // 300
     $p3 = $_POST['h']; // 100
     $p4 = $_POST['fill']; // red
     if (isset($_POST['submitsave'])) $iurl=saveit($what);
   } else {
     $p1 = $_GET['height']; // 200
     $p2 = $_GET['w']; // 300
     $p3 = $_GET['h']; // 100
     $p4 = $_GET['fill']; // red
     if (isset($_POST['submitsave'])) $iurl=saveit($what);
   }
?>
<!DOCTYPE html>
<head>
<title>SVG</title>
<link href='//www.rjmprogramming.com.au/PHP/emboss_h1.css' rel='stylesheet' type='text/css'>
<meta charset="utf-8" />
</head>
<body style="background-color:#F0F0F0;">
<h1 align="center">HTML5 SVG Rectangle</h1><?php echo '<div align="center"><svg id="svgelem" height="' . $p1 . '" xmlns="http://www.w3.org/2000/svg"><rect id="redrect" width="' . $p2 . '" height="' . $p3 . '" fill="' . $p4 . '" /></svg></div>'; ?>
<br><a align="center" href="./SVG_Primer.php" title="Another go">Another go?</a><?php echo stuffaround($iurl); ?></body>
</html>
<?php 
 } else if ($what == "Line") {
   if ($mode == "POST") {
     $p1 = $_POST['height']; // 200
     $p2 = $_POST['x1']; // 0
     $p3 = $_POST['y1']; // 0
     $p4 = $_POST['x2']; // 200
     $p5 = $_POST['y2']; // 100
     $p6 = $_POST['stroke']; // red
     $p7 = $_POST['stroke-width']; // 2
     if (isset($_POST['submitsave'])) $iurl=saveit($what);
   } else {
     $p1 = $_GET['height']; // 200
     $p2 = $_GET['x1']; // 0
     $p3 = $_GET['y1']; // 0
     $p4 = $_GET['x2']; // 200
     $p5 = $_GET['y2']; // 100
     $p6 = $_GET['stroke']; // red
     $p7 = $_GET['stroke-width']; // 2
     if (isset($_POST['submitsave'])) $iurl=saveit($what);
   }
?>
<!DOCTYPE html>
<head>
<title>SVG</title>
<link href='//www.rjmprogramming.com.au/PHP/emboss_h1.css' rel='stylesheet' type='text/css'>
<meta charset="utf-8" />
</head>
<body style="background-color:#F0F0F0;">
<h1 align="center">HTML5 SVG Line</h1><?php echo '<div align="center"><svg id="svgelem" height="' . $p1 . '" xmlns="http://www.w3.org/2000/svg"><line x1="' . $p2 . '" y1="' . $p3 . '" x2="' . $p4 . '" y2="' . $p5 . '" style="stroke:' . $p6 . ';stroke-width:' . $p7 . '"/></svg></div>'; ?>
<br><a align="center" href="./SVG_Primer.php" title="Another go">Another go?</a><?php echo stuffaround($iurl); ?></body>
</html>
<?php 
 } else if ($what == "Ellipse") {
   if ($mode == "POST") {
     $p1 = $_POST['height']; // 200
     $p2 = $_POST['cx']; // 100
     $p3 = $_POST['cy']; // 50
     $p4 = $_POST['rx']; // 100
     $p5 = $_POST['ry']; // 50
     $p6 = $_POST['fill']; // red
     if (isset($_POST['submitsave'])) $iurl=saveit($what);
   } else {
     $p1 = $_GET['height']; // 200
     $p2 = $_GET['cx']; // 100
     $p3 = $_GET['cy']; // 50
     $p4 = $_GET['rx']; // 100
     $p5 = $_GET['ry']; // 50
     $p6 = $_GET['fill']; // red
     if (isset($_POST['submitsave'])) $iurl=saveit($what);
   }
?>
<!DOCTYPE html>
<head>
<title>SVG</title>
<link href='//www.rjmprogramming.com.au/PHP/emboss_h1.css' rel='stylesheet' type='text/css'>
<meta charset="utf-8" />
</head>
<body style="background-color:#F0F0F0;">
<h1 align="center">HTML5 SVG Ellipse</h1><?php echo '<div align="center"><svg id="svgelem" height="' . $p1 . '" xmlns="http://www.w3.org/2000/svg"><ellipse cx="' . $p2 . '" cy="' . $p3 . '" rx="' . $p4 . '" ry="' . $p5 . '" fill="' . $p6 . '" /></svg></div>'; ?>
<br><a align="center" href="./SVG_Primer.php" title="Another go">Another go?</a><?php echo stuffaround($iurl); ?></body>
</html>
<?php 
 } else if ($what == "Polygon") {
   if ($mode == "POST") {
     $p1 = $_POST['height']; // 200
     $p2 = $_POST['points']; // 20,10 300,20 170,50
     $p3 = $_POST['fill']; // red
     if (isset($_POST['submitsave'])) $iurl=saveit($what);
   } else {
     $p1 = $_GET['height']; // 200
     $p2 = $_GET['points']; // 20,10 300,20 170,50
     $p3 = $_GET['fill']; // red
     if (isset($_POST['submitsave'])) $iurl=saveit($what);
   }
?>
<!DOCTYPE html>
<head>
<title>SVG</title>
<link href='//www.rjmprogramming.com.au/PHP/emboss_h1.css' rel='stylesheet' type='text/css'>
<meta charset="utf-8" />
</head>
<body style="background-color:#F0F0F0;">
<h1 align="center">HTML5 SVG Polygon</h1><?php echo '<div align="center"><svg id="svgelem" height="' . $p1 . '" xmlns="http://www.w3.org/2000/svg"><polygon  points="' . $p2 . '" fill="' . $p3 . '" /></svg></div>'; ?>
<br><a align="center" href="./SVG_Primer.php" title="Another go">Another go?</a><?php echo stuffaround($iurl); ?></body>
</html>
<?php 
 } else if ($what == "Polyline") {
   if ($mode == "POST") {
     $p1 = $_POST['height']; // 200
     $p2 = $_POST['points']; // 0,0 0,20 20,20 20,40 40,40 40,60
     $p3 = $_POST['fill']; // red
     //if (isset($_POST['submitsave'])) $iurl=saveit($what);
   } else {
     $p1 = $_GET['height']; // 200
     $p2 = $_GET['points']; // 0,0 0,20 20,20 20,40 40,40 40,60
     $p3 = $_GET['fill']; // red
     //if (isset($_POST['submitsave'])) $iurl=saveit($what);
   }
?>
<!DOCTYPE html>
<head>
<title>SVG</title>
<link href='//www.rjmprogramming.com.au/PHP/emboss_h1.css' rel='stylesheet' type='text/css'>
<meta charset="utf-8" />
</head>
<body style="background-color:#F0F0F0;">
<h1 align="center">HTML5 SVG Polyline</h1><?php echo '<div align="center"><svg id="svgelem" height="' . $p1 . '" xmlns="http://www.w3.org/2000/svg"><polyline points="' . $p2 . '" fill="' . $p3 . '" /></svg></div>'; ?>
<br><a align="center" href="./SVG_Primer.php" title="Another go">Another go?</a></body>
</html>
<?php 
 } else if ($what == "Gradient Ellipse") {
   if ($mode == "POST") {
     $p1 = $_POST['height']; // 200
     $p2 = $_POST['rcx']; // 50%
     $p3 = $_POST['rcy']; // 50%
     $p4 = $_POST['rr']; // 50%
     $p5 = $_POST['rfx']; // 50%
     $p6 = $_POST['rfy']; // 50%
     $p7 = $_POST['s1offset']; // 0%
     $p8 = $_POST['s1stop-colorr']; // 200
     $p9 = $_POST['s1stop-colorg']; // 200
     $p10 = $_POST['s1stop-colorb']; // 200
     $p11 = $_POST['s1opacity']; // 0
     $p12 = $_POST['s2offset']; // 100%
     $p13 = $_POST['s2stop-colorr']; // 0
     $p14 = $_POST['s2stop-colorg']; // 0
     $p15 = $_POST['s2stop-colorb']; // 255
     $p16 = $_POST['s2opacity']; // 1
     $p17 = $_POST['cx']; // 100
     $p18 = $_POST['cy']; // 50
     $p19 = $_POST['rx']; // 100
     $p20 = $_POST['ry']; // 50
     //if (isset($_POST['submitsave'])) $iurl=saveit($what);
   } else {
     $p1 = $_GET['height']; // 200
     $p2 = $_GET['rcx']; // 50%
     $p3 = $_GET['rcy']; // 50%
     $p4 = $_GET['rr']; // 50%
     $p5 = $_GET['rfx']; // 50%
     $p6 = $_GET['rfy']; // 50%
     $p7 = $_GET['s1offset']; // 0%
     $p8 = $_GET['s1stop-colorr']; // 200
     $p9 = $_GET['s1stop-colorg']; // 200
     $p10 = $_GET['s1stop-colorb']; // 200
     $p11 = $_GET['s1opacity']; // 0
     $p12 = $_GET['s2offset']; // 100%
     $p13 = $_GET['s2stop-colorr']; // 0
     $p14 = $_GET['s2stop-colorg']; // 0
     $p15 = $_GET['s2stop-colorb']; // 255
     $p16 = $_GET['s2opacity']; // 1
     $p17 = $_GET['cx']; // 100
     $p18 = $_GET['cy']; // 50
     $p19 = $_GET['rx']; // 100
     $p20 = $_GET['ry']; // 50
     //if (isset($_POST['submitsave'])) $iurl=saveit($what);
   }
?>
<!DOCTYPE html>
<head>
<title>SVG</title>
<link href='//www.rjmprogramming.com.au/PHP/emboss_h1.css' rel='stylesheet' type='text/css'>
<meta charset="utf-8" />
</head>
<body style="background-color:#F0F0F0;">
<h1 align="center">HTML5 SVG Gradient Ellipse</h1><?php echo '<div align="center"><svg id="svgelem" height="' . $p1 . '" xmlns="http://www.w3.org/2000/svg"><defs><radialGradient id="gradient" cx="' . $p2 . '" cy="' . $p3 . '" r="' . $p4 . '" fx="' . $p5 . '" fy="' . $p6 . '"><stop offset="' . $p7 . '" style="stop-color:rgb(' . $p8 . ',' . $p9 . ',' . $p10 . '); stop-opacity:' . $p11 . '"/><stop offset="' . $p12 . '" style="stop-color:rgb(' . $p13 . ',' . $p14 . ',' . $p15 . '); stop-opacity:' . $p16 . '"/></radialGradient></defs><ellipse cx="' . $p17 . '" cy="' . $p18 . '" rx="' . $p19 . '" ry="' . $p20 . '" style="fill:url(#gradient)" /></svg></div>'; ?>
<br><a align="center" href="./SVG_Primer.php" title="Another go">Another go?</a><?php echo stuffaround($iurl); ?></body>
</html>
<?php 
 } 
?>
