Add pressure trend

stationplot/index.html

@@ -59,10 +59,23 @@
 				<button onclick="set_rotation(this)">Rotate</button>
 			</div>
 
+			<div>
+				<h3>Pressure Trend</h3>
+				<button onclick="set_trend(this)">steady</button>
+				<button onclick="set_trend(this)">cont-falling</button>
+				<button onclick="set_trend(this)">falling-steady</button>
+				<button onclick="set_trend(this)">falling-lessrise</button>
+				<button onclick="set_trend(this)">rising-greatfall</button>
+				<button onclick="set_trend(this)">cont-rising</button>
+				<button onclick="set_trend(this)">rising-steady</button>
+				<button onclick="set_trend(this)">falling-greatrise</button>
+				<button onclick="set_trend(this)">rising-lessfall</button>
+			</div>
+
 			<div>
 				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"	
 						 preserveAspectRatio="xMinYMin meet"
-						 height="100" width="100"
+						 height="400" width="400"
 						 viewBox="0 0 100 100">
 						 <!-- http://commons.oreilly.com/wiki/index.php/SVG_Essentials -->
 					<style type="text/css">
@@ -89,6 +102,9 @@
 						svg#wind g {
 							display: none;
 						}
+						g[name=pressure-trend] g {
+							display: none;
+						}
 					</style>
 
 					<svg id="wind" viewBox="-50 -50 100 100">
@@ -262,11 +278,39 @@
 
 					<svg id="pressure" x="50" y="25">
 						<g name="pressure-value">
-							<title>Pressure 999mb</title>
+							<title>Pressure 9999mb</title>
 							<text x="20" y="15" text-anchor="end">999</text>
 						</g>
 						<g name="pressure-trend">
+							<title>3hr Pressure Trend: -99, Falling-Steady</title>
 							<text x="20" y="28">-99</text>
+							<g name="pressure-steady">
+								<path d="M27,25 h12" />	
+							</g>
+							<g name="pressure-cont-falling">
+								<path d="M27,19 l8,12" />	
+							</g>
+							<g name="pressure-falling-steady">
+								<path d="M27,19 l8,12 h4" style="fill:none"/>	
+							</g>
+							<g name="pressure-falling-lessrise">
+								<path d="M27,19 l8,12 l4,-4" style="fill:none"/>	
+							</g>
+							<g name="pressure-rising-greatfall">
+								<path d="M27,23 l4,-4 l8,12" style="fill:none"/>	
+							</g>
+							<g name="pressure-cont-rising">
+								<path d="M27,31 l8,-12" style="fill:none"/>	
+							</g>
+							<g name="pressure-rising-steady">
+								<path d="M27,31 l8,-12 h4" style="fill:none"/>	
+							</g>
+							<g name="pressure-falling-greatrise">
+								<path d="M27,27 l4,4 l8,-12" style="fill:none"/>	
+							</g>
+							<g name="pressure-rising-lessfall">
+								<path d="M27,31 l8,-12 l4,4" style="fill:none"/>	
+							</g>
 						</g>
 					</svg>
 
@@ -304,6 +348,13 @@
 					var num = $("input[name=rotation]").val();
 					$("g[name=wind-dir]").attr("transform", "rotate(" + num + ")");
 				}
+				function set_trend(elem) {
+					var id = $(elem).text();
+					$("g[name^=pressure]").hide();
+					$("g[name=pressure-value]").show();
+					$("g[name^=pressure-trend]").show();
+					$("g[name=pressure-" + id + "]").show();
+				}
 			</script>
     </body>
 </html>