Guest User

Untitled

a guest
Jan 24th, 2016
199
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