From cef47a2ed5d75aa5bb2c6270c5321df059fc72ef Mon Sep 17 00:00:00 2001
From: Bruce Flynn <brucef@ssec.wisc.edu>
Date: Mon, 14 Apr 2014 13:09:01 -0500
Subject: [PATCH] Add pressure trend
---
stationplot/index.html | 55 ++++++++++++++++++++++++++++++++++++++++--
1 file changed, 53 insertions(+), 2 deletions(-)
diff --git a/stationplot/index.html b/stationplot/index.html
index 5e875a0..707123c 100644
--- a/stationplot/index.html
+++ b/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>
--
GitLab