Guest User

Untitled

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

Adblocker detected! Please consider disabling it...

We've detected AdBlock Plus or some other adblocking software preventing Pastebin.com from fully loading.

We don't have any obnoxious sound, or popup ads, we actively block these annoying types of ads!

Please add Pastebin.com to your ad blocker whitelist or disable your adblocking software.

×