<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
+ <link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Optional theme -->
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
+ <link rel="stylesheet" href="css/bootstrap-theme.min.css">
</head>
<body>
<script>
var ws;
- var day_chart;
+ var daychart;
+ var daychart_days = 5;
+ var windrose;
+ var windrose_mins = 10;
+ var windspeed;
+ var winddir;
var h = new Object();
}
}
+ var lastwind = 0;
+ var lastdir = 0;
+ var lastt = 0;
+
function startws() {
ws = new WebSocket('<%= $url->to_abs %>');
var js = JSON.parse(event.data);
if (js !== null && typeof(js) === 'object') {
traverse(js, fill_html);
- traverse(js, update_h);
- document.getElementById("hh").innerHTML = JSON.stringify(h);
+// traverse(js, update_h);
+// document.getElementById("hh").innerHTML = JSON.stringify(h);
if ("h" in js) {
- fill_day_chart(js);
+ fill_daychart(js, daychart_days);
+ }
+ if ("r" in js) {
+// if (js.t > lastt + 15) {
+ if ("Wind" in js.r) {
+ lastwind = js.r.Wind;
+ } else {
+ js.r.Wind = lastwind;
+ }
+ if ("Dir" in js.r) {
+ lastdir = js.r.dir;
+ } else {
+ js.r.Dir = lastdir;
+ }
+ lastt = js.t;
+ fill_windrose(js, windrose_mins * (60 / 2.5));
+// }
+ fill_windspeed(js);
+ fill_winddir(js);
}
}
};
}
}
- function start_day_chart() {
- day_chart = new Highcharts.Chart({
+ function start_daychart() {
+ daychart = new Highcharts.Chart({
chart: {
- renderTo: 'day_chart',
+ renderTo: 'daychart',
zoomType: 'xy'
},
title: {
- text: '24 Hour Chart'
+ text: 'Five Day Chart'
},
xAxis: [{
type: 'datetime',
});
}
- function fill_day_chart(js) {
- var rainfall = day_chart.series[0].data.length > 48;
- var pressure = day_chart.series[1].data.length > 48;
- var temp = day_chart.series[2].data.length > 48;
+ function start_windrose() {
+
+ // Load the fonts
+ Highcharts.createElement('link', {
+ href: '//fonts.googleapis.com/css?family=Dosis:400,600',
+ rel: 'stylesheet',
+ type: 'text/css'
+ }, null, document.getElementsByTagName('head')[0]);
+
+ Highcharts.theme = {
+ colors: ["#7cb5ec", "#f7a35c", "#90ee7e", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee",
+ "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
+ chart: {
+ backgroundColor: null,
+ style: {
+ fontFamily: "Dosis, sans-serif"
+ }
+ },
+ title: {
+ style: {
+ fontSize: '16px',
+ fontWeight: 'bold',
+ textTransform: 'uppercase'
+ }
+ },
+ tooltip: {
+ borderWidth: 0,
+ backgroundColor: 'rgba(219,219,216,0.8)',
+ shadow: false
+ },
+ legend: {
+ itemStyle: {
+ fontWeight: 'bold',
+ fontSize: '13px'
+ }
+ },
+ xAxis: {
+ gridLineWidth: 1,
+ labels: {
+ style: {
+ fontSize: '12px'
+ }
+ }
+ },
+ yAxis: {
+ minorTickInterval: 'auto',
+ title: {
+ style: {
+ textTransform: 'uppercase'
+ }
+ },
+ labels: {
+ style: {
+ fontSize: '12px'
+ }
+ }
+ },
+ plotOptions: {
+ candlestick: {
+ lineColor: '#404048'
+ }
+ },
+
+
+ // General
+ background2: '#F0F0EA'
+
+ };
+
+ // Apply the theme
+ Highcharts.setOptions(Highcharts.theme);
+
+ windrose = new Highcharts.Chart({
+ chart: {
+ polar: true,
+ renderTo: 'windrose'
+ },
+
+ title: {
+ text: 'Wind Rose'
+ },
+
+ pane: {
+ startAngle: 0,
+ endAngle: 360
+ },
+
+ xAxis: {
+ tickInterval: 15,
+ min: 0,
+ max: 360,
+ labels: {
+ formatter: function () {
+ return this.value + '°';
+ }
+ }
+ },
+
+ yAxis: {
+ min: 0
+ },
+
+ plotOptions: {
+ series: {
+ pointStart: 0,
+ pointInterval: 15
+ },
+ column: {
+ pointPadding: 0,
+ groupPadding: 0
+ }
+ },
+
+ series: [ {
+ type: 'scatter',
+ name: 'Wind mph',
+ data: []
+ }]
+ });
+ }
+
+ function start_windspeed() {
+ windspeed = new Highcharts.Chart({
+ chart: {
+ type: 'gauge',
+ renderTo: 'windspeed',
+ plotBackgroundColor: null,
+ plotBackgroundImage: null,
+ plotBorderWidth: 0,
+ plotShadow: false
+ },
+
+ title: {
+ text: 'Wind Speed'
+ },
+
+ pane: {
+ startAngle: -150,
+ endAngle: 150,
+ background: [{
+ backgroundColor: {
+ linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+ stops: [
+ [0, '#FFF'],
+ [1, '#333']
+ ]
+ },
+ borderWidth: 0,
+ outerRadius: '109%'
+ }, {
+ backgroundColor: {
+ linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+ stops: [
+ [0, '#333'],
+ [1, '#FFF']
+ ]
+ },
+ borderWidth: 1,
+ outerRadius: '107%'
+ }, {
+ // default background
+ }, {
+ backgroundColor: '#DDD',
+ borderWidth: 0,
+ outerRadius: '105%',
+ innerRadius: '103%'
+ }]
+ },
+
+ // the value axis
+ yAxis: {
+ min: 0,
+ max: 50,
+
+ minorTickInterval: 'auto',
+ minorTickWidth: 1,
+ minorTickLength: 10,
+ minorTickPosition: 'inside',
+ minorTickColor: '#666',
+
+ tickPixelInterval: 30,
+ tickWidth: 2,
+ tickPosition: 'inside',
+ tickLength: 10,
+ tickColor: '#666',
+ labels: {
+ step: 2,
+ rotation: 'auto'
+ },
+ title: {
+ text: 'mph'
+ },
+ plotBands: [{
+ from: 0,
+ to: 15,
+ color: '#55BF3B' // green
+ }, {
+ from: 16,
+ to: 29,
+ color: '#DDDF0D' // yellow
+ }, {
+ from: 30,
+ to: 50,
+ color: '#DF5353' // red
+ }]
+ },
+
+ series: [{
+ name: 'Speed',
+ data: [0],
+ tooltip: {
+ valueSuffix: ' mph'
+ }
+ }]
+ });
+ }
+
+ function start_winddir() {
+ winddir = new Highcharts.Chart({
+ chart: {
+ type: 'gauge',
+ renderTo: 'winddir',
+ plotBackgroundColor: null,
+ plotBackgroundImage: null,
+ plotBorderWidth: 0,
+ plotShadow: false
+ },
+
+ title: {
+ text: 'Wind Direction'
+ },
+
+ pane: {
+ startAngle: 0,
+ endAngle: 359,
+ background: [{
+ backgroundColor: {
+ linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+ stops: [
+ [0, '#FFF'],
+ [1, '#333']
+ ]
+ },
+ borderWidth: 0,
+ outerRadius: '109%'
+ }, {
+ backgroundColor: {
+ linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+ stops: [
+ [0, '#333'],
+ [1, '#FFF']
+ ]
+ },
+ borderWidth: 1,
+ outerRadius: '107%'
+ }, {
+ // default background
+ }, {
+ backgroundColor: '#DDD',
+ borderWidth: 0,
+ outerRadius: '105%',
+ innerRadius: '103%'
+ }]
+ },
+
+ // the value axis
+ yAxis: {
+ min: 0,
+ max: 360,
+
+ minorTickInterval: 'auto',
+ minorTickWidth: 1,
+ minorTickLength: 10,
+ minorTickPosition: 'inside',
+ minorTickColor: '#666',
+
+ tickPixelInterval: 15,
+ tickWidth: 2,
+ tickPosition: 'inside',
+ tickLength: 10,
+ tickColor: '#666',
+ labels: {
+ step: 2,
+ rotation: 'auto'
+ },
+ title: {
+ text: '° deg'
+ },
+ },
+
+ series: [{
+ name: 'Direction',
+ data: [0],
+ tooltip: {
+ valueSuffix: ' ° deg'
+ }
+ }]
+ });
+ }
+
+ function fill_daychart(js, days) {
+ var rainfall = daychart.series[0].data.length > (days * 48);
+ var pressure = daychart.series[1].data.length > (days * 48);
+ var temp = daychart.series[2].data.length > (days * 48);
var hr = js.h;
var t = js.t * 1000;
var pr = [t, hr.Pressure];
var te = [t, hr.Temp_Out];
- do_debug(js.tm + " " + t + " " + te + "<br>");
- day_chart.series[0].addPoint(ra, true, rainfall);
- day_chart.series[1].addPoint(pr, true, pressure);
- day_chart.series[2].addPoint(te, true, temp);
+// do_debug(js.tm + " " + t + " " + te + "<br>");
+ daychart.series[0].addPoint(ra, true, rainfall);
+ daychart.series[1].addPoint(pr, true, pressure);
+ daychart.series[2].addPoint(te, true, temp);
+ }
+
+ var conv = 2.23694;
+
+ function fill_windrose(js, points) {
+ var p = windrose.series[0].data.length > points;
+ var rr = js.r;
+ windrose.series[0].addPoint([rr.Dir, Math.round(rr.Wind*conv)], true, p);
+ }
+
+ function fill_windspeed(js) {
+ var rr = js.r;
+ var point = windspeed.series[0].points[0];
+ point.update(Math.round(rr.Wind*conv));
+ }
+
+ function fill_winddir(js) {
+ var rr = js.r;
+ var point = winddir.series[0].points[0];
+ point.update(rr.Dir);
}
window.onload = function() {
startws();
- start_day_chart();
+ start_daychart();
+ start_windrose();
+ start_windspeed();
+ start_winddir();
window.setInterval(function() {
if (ws === null)
startws();
</script>
+ <div id="container">
+ <div id="daychart" style="min-width: 400px; height: 400px; margin: 0 auto"> </div>
+ </div>
+
+ <div id="container">
+ <table border="0" align="center">
+ <tr>
+ <td id="windrose" style="min-width: 350px; max-width: 400px; height: 330px; margin: 0 auto"> </td>
+ <td id="windspeed" style="min-width: 280px; max-width: 400px; height: 270px; margin: 0 auto"> </td>
+ <td id="winddir" style="min-width: 280px; max-width: 400px; height: 270px; margin: 0 auto"> </td>
+ </tr>
+ </table>
+ </div>
+
<div id="container">
<div id="start-template">
<br><br>
<th>Humidity:</th><td> <span id="Humidity_In"> </span></td>
</tr>
<tr>
- <th>Temperature out:</th><td> <span id="Temp_Out"> </span></td>
<th>Min:</th><td> <span id="Temp_Out_Min"> </span> @ <span id="Temp_Out_Min_T"> </span></td>
<th>Max:</th><td> <span id="Temp_Out_Max"> </span> @ <span id="Temp_Out_Max_T"> </span></td>
<th>Humidity:</th><td> <span id="Humidity_Out"> </span></td>
<th>Dew Point:</th><td> <span id="Dew_Point"> </span></td>
</tr>
<tr>
- <th>Wind Direction:</th><td> <span id="Dir"> </span></td>
- <th>Minute Avg:</th><td> <span id="Dir_1m"> </span></td>
- <th>Speed:</th><td> <span id="Wind"> </span></td>
- <th>Minute Avg:</th><td> <span id="Wind_1m"> </span></td>
+ <th>Wind Dir Minute Avg:</th><td> <span id="Dir_1m"> </span></td>
+ <th>Wind Speed Minute Avg:</th><td> <span id="Wind_1m"> </span></td>
</tr>
<tr>
<th>Rain 30mins:</th><td> <span id="Rain_1h"> </span></td>
<th>Year:</th><td> <span id="Rain_Year"> </span></td>
</tr>
</table>
- <br>
- <div id="wsconnect" align="center"> </div>
- <br>
- <div id="hh" align="center"> </div>
</div>
</div>
- <div id="container">
- <div id="day_chart" style="min-width: 400px; height: 400px; margin: 0 auto">
- </div>
- </div>
-
- <div id="container">
- <center><div id="do_debug"> </div></center>
- </div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+ <script src="js/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
+ <script src="js/bootstrap.min.js"></script>
<!-- High Chart stuff -->
- <script src="http://code.highcharts.com/highcharts.js"></script>
- <script src="http://code.highcharts.com/modules/exporting.js"></script>
+ <script src="js/highcharts.js"></script>
+ <script src="js/highcharts-more.js"></script>
+ <script src="js/modules/exporting.js"></script>
</body>
</html>
projects / dweather.git / blobdiff