<?php
 $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 = "";
 if ($what == "") {
?>
<!DOCTYPE html>
<head>
<title>SVG Tutorial - RJM Programming - July, 2014 ... 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">
function fill_in_theparameters(othis) {
  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 type=text id=fill name=fill value=red></input><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 type=text id=fill name=fill value=red></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 type=text id=stroke name=stroke value=red></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 type=text id=fill name=fill value=red></input><br>";
  } else if (othis.value == "Polygon") {
    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 type=text id=fill name=fill value=red></input><br>";
  } else if (othis.value == "Polyline") {  
    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 type=text id=fill name=fill value=red></input><br>";
  } else if (othis.value == "Gradient Ellipse") {
    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 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>';
    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 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>';
    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;
}

</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;">
<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=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 ($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
   } else {
     $p1 = $_GET['height']; // 200
     $p2 = $_GET['cx']; // 50
     $p3 = $_GET['cy']; // 50
     $p4 = $_GET['r']; // 50
     $p5 = $_GET['fill']; // red
   }
?>
<!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></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
   } else {
     $p1 = $_GET['height']; // 200
     $p2 = $_GET['w']; // 300
     $p3 = $_GET['h']; // 100
     $p4 = $_GET['fill']; // red
   }
?>
<!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></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
   } 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
   }
?>
<!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></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
   } 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
   }
?>
<!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></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
   } else {
     $p1 = $_GET['height']; // 200
     $p2 = $_GET['points']; // 20,10 300,20 170,50
     $p3 = $_GET['fill']; // red
   }
?>
<!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></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
   } else {
     $p1 = $_GET['height']; // 200
     $p2 = $_GET['points']; // 0,0 0,20 20,20 20,40 40,40 40,60
     $p3 = $_GET['fill']; // red
   }
?>
<!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
   } 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
   }
?>
<!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></body>
</html>
<?php 
 } 
?>
