SHARE
TWEET

Untitled

a guest Jan 24th, 2016 99 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!-- Written by David Neuy
  2.      Version 0.1.0 @ 03.12.2014
  3.      This script was first published at: http://www.home-automation-community.com/
  4.      You may republish it as is or publish a modified version only when you
  5.      provide a link to 'http://www.home-automation-community.com/'.
  6.  
  7.     Lightly Modified by Sean Kelley
  8.     To include second sensor for soil temperature
  9.     No need to provide a link to Sean @ http://www.brickstobits.com
  10. -->
  11. <html>
  12. <head>
  13.   <title>Raspberry Pi Worm Conditions</title>
  14.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  15.   <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
  16.   <script src="http://d3js.org/d3.v3.min.js"></script>
  17.   <script src="http://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.js"></script>
  18.   <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.css">
  19.   <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
  20.   <style>
  21.     body {
  22.       font-size: 16px;
  23.       font-family: verdana,helvetica,arial,sans-serif;
  24.     }
  25.     table {
  26.       background:#CCC;border:1px solid #000;margin-bottom:5px;
  27.     }
  28.     table td, th {
  29.       padding-left:10px;padding-right:10px;border:1px solid #DDD;
  30.     }
  31.   </style>
  32.   <script>
  33.     chartDatetimeFormatter   = d3.time.format("%d.%m.%y - %H:%M"); //see https://github.com/mbostock/d3/wiki/Time-Formatting
  34.     tableDatetimeFormatter   = d3.time.format("%d.%m.%y - %H:%M:%S"); //see https://github.com/mbostock/d3/wiki/Time-Formatting
  35.     soapServiceHistDataUrl   = "http://192.168.1.111:9999/historical-sensordata/";
  36.     soapServiceLatestDataUrl = "http://192.168.1.111:9999/latest-sensordata/";
  37.   </script>
  38.   <script>
  39.     $(function() {
  40.       $("#fromdate").datepicker({
  41.         changeMonth: true,
  42.         onClose: function(selectedDate) {
  43.           $("#todate").datepicker("option", "minDate", selectedDate);
  44.         }
  45.       });
  46.       $("#todate").datepicker({
  47.         changeMonth: true,
  48.         onClose: function( selectedDate ) {
  49.           $("#fromdate").datepicker("option", "maxDate", selectedDate);
  50.         }
  51.       });
  52.     });
  53.   </script>
  54.   <script>
  55.     $(function() {
  56.       $("#refresh_historical_btn")
  57.         .button()
  58.         .click(function(event) {
  59.           getHistoricalSensordata();
  60.         });
  61.     });
  62.     $(function() {
  63.       $("#refresh_latest_btn")
  64.         .button()
  65.         .click(function(event) {
  66.           getLatestSensordata();
  67.         });
  68.     });
  69.  
  70.     function getHistoricalSensordata() {
  71.       var fromDate   = $("#fromdate").val();
  72.       var fromTs     = fromDate == "" ? "" : Date.parse(fromDate);
  73.       var toDate     = $("#todate").val();
  74.       var oneDayInMs = new Date(1970, 0, 2) - new Date(1970, 0, 1);
  75.       var toTs       = toDate == "" ? "" : Date.parse(toDate) + oneDayInMs - 1; //increase to end of day
  76.       $.ajax({
  77.         url: soapServiceHistDataUrl + "?fromtimestamp=" + fromTs + "&totimestamp=" + toTs
  78.       }).then(function(data) {
  79.         var chartData = [];
  80.         data.forEach(function(elem) {
  81.           //var color = elem.sensorKind == 'temperature' ? '#A4C4E8' : elem.sensorKind == 'humidity' ? '#FCDAB0' : '#336600';
  82.           //var color = elem.sensorKind == 'temperature' ? '#A4C4E8' : elem.sensorKind == 'temperature' ? '#A4C4E8' : elem.sensorKind == 'humidity' ? '#FCDAB0' : '#336600';
  83.  
  84.           var color = elem.sensorName == 'soil' ? '#886d5c' : elem.sensorKind == 'temperature' ? '#A4C4E8' : elem.sensorKind == 'humidity' ? '#FCDAB0' : '#336600';
  85.           console.log(elem.sensorName)
  86.           chartData.push({key: (elem.sensorKind +" " +elem.sensorName), area: true, color: color, values: elem.values});
  87.         });
  88.         drawChart(chartData);
  89.       });
  90.     }
  91.  
  92.     function getLatestSensordata() {
  93.       $.ajax({
  94.         url: soapServiceLatestDataUrl
  95.       }).then(function(data) {
  96.         $('#dynamictable').empty();
  97.         $('#dynamictable').append('<table></table>');
  98.         var table = $('#dynamictable').children();
  99.         table.append("<tr><th>Sensor Kind</th><th>Sensor Name</th><th>Value Time</th><th>Value</th></tr>");
  100.         data.forEach(function(elem) {
  101.           table.append("<tr><td>" + elem.sensorKind + "</td><td>" + elem.sensorName + "</td><td>" + tableDatetimeFormatter(new Date(elem.values[0].x)) + "</td><td>" + elem.values[0].y.toFixed(1) + "</td></tr>");
  102.         });
  103.       });
  104.     }
  105.  
  106.     function drawChart(tempHumidData) {
  107.       nv.addGraph(function() {
  108.         // For other chart types see: https://nvd3.org/examples/index.html
  109.         // API documentation: https://github.com/novus/nvd3/wiki/API-Documentation
  110.         var chart = nv.models.lineChart()
  111.           .margin({left: 100})
  112.           .margin({bottom: 130})
  113.           .useInteractiveGuideline(true)
  114.           .transitionDuration(500)
  115.           .showLegend(true);
  116.        
  117.         chart.xAxis    
  118.           .rotateLabels(-45)
  119.           .tickFormat(function(d) {
  120.             return chartDatetimeFormatter(new Date(d))
  121.           });
  122.        
  123.         chart.yAxis    
  124.           .axisLabel('Temperature °F / Humidity %')
  125.           .tickFormat(d3.format('.01f'));
  126.        
  127.         d3.select('#chart svg')
  128.           .datum(tempHumidData)
  129.           .call(chart);
  130.        
  131.         nv.utils.windowResize(function() { chart.update() });
  132.         return chart;
  133.       });
  134.     }
  135.   </script>
  136. </head>
  137. <body>
  138. <h1>Worm Conditions</h1>
  139.  
  140. <div id='chart'>
  141.   <svg style='height:500px'></svg>
  142. </div>
  143.  
  144. <script>
  145.   getHistoricalSensordata();
  146.   getLatestSensordata();
  147. </script>
  148.  
  149. <div class="ui-widget">
  150.   <label for="fromdate">From</label>
  151.   <input type="text" id="fromdate" name="fromdate">
  152.   <label for="todate">To</label>
  153.   <input type="text" id="todate" name="fromdate">
  154.   <button id="refresh_historical_btn">Refresh Chart</button>
  155. </div>
  156.  
  157. <br />
  158. <div class="ui-widget">
  159.   <div id="dynamictable"></div>
  160.   <button id="refresh_latest_btn">Refresh Latest Values</button>
  161. </div>
  162.  
  163. </body>
  164. </html>
RAW Paste Data
Pastebin PRO Autumn Special!
Get 40% OFF on Pastebin PRO accounts!
Top