Untitled

<!-- Written by David Neuy
     Version 0.1.0 @ 03.12.2014
     This script was first published at: http://www.home-automation-community.com/
     You may republish it as is or publish a modified version only when you
     provide a link to 'http://www.home-automation-community.com/'.

    Lightly Modified by Sean Kelley
    To include second sensor for soil temperature
    No need to provide a link to Sean @ http://www.brickstobits.com
-->
<html>
<head>
  <title>Raspberry Pi Worm Conditions</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.js"></script>
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.css">
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
  <style>
    body {
      font-size: 16px;
      font-family: verdana,helvetica,arial,sans-serif;
    }
    table {
      background:#CCC;border:1px solid #000;margin-bottom:5px;
    }
    table td, th {
      padding-left:10px;padding-right:10px;border:1px solid #DDD;
    }
  </style>
  <script>
    chartDatetimeFormatter   = d3.time.format("%d.%m.%y - %H:%M"); //see https://github.com/mbostock/d3/wiki/Time-Formatting
    tableDatetimeFormatter   = d3.time.format("%d.%m.%y - %H:%M:%S"); //see https://github.com/mbostock/d3/wiki/Time-Formatting
    soapServiceHistDataUrl   = "http://192.168.1.111:9999/historical-sensordata/";
    soapServiceLatestDataUrl = "http://192.168.1.111:9999/latest-sensordata/";
  </script>
  <script>
    $(function() {
      $("#fromdate").datepicker({
        changeMonth: true,
        onClose: function(selectedDate) {
          $("#todate").datepicker("option", "minDate", selectedDate);
        }
      });
      $("#todate").datepicker({
        changeMonth: true,
        onClose: function( selectedDate ) {
          $("#fromdate").datepicker("option", "maxDate", selectedDate);
        }
      });
    });
  </script>
  <script>
    $(function() {
      $("#refresh_historical_btn")
        .button()
        .click(function(event) {
          getHistoricalSensordata();
        });
    });
    $(function() {
      $("#refresh_latest_btn")
        .button()
        .click(function(event) {
          getLatestSensordata();
        });
    });

    function getHistoricalSensordata() {
      var fromDate   = $("#fromdate").val();
      var fromTs     = fromDate == "" ? "" : Date.parse(fromDate);
      var toDate     = $("#todate").val();
      var oneDayInMs = new Date(1970, 0, 2) - new Date(1970, 0, 1);
      var toTs       = toDate == "" ? "" : Date.parse(toDate) + oneDayInMs - 1; //increase to end of day
      $.ajax({
        url: soapServiceHistDataUrl + "?fromtimestamp=" + fromTs + "&totimestamp=" + toTs
      }).then(function(data) {
        var chartData = [];
        data.forEach(function(elem) {
          //var color = elem.sensorKind == 'temperature' ? '#A4C4E8' : elem.sensorKind == 'humidity' ? '#FCDAB0' : '#336600';
          //var color = elem.sensorKind == 'temperature' ? '#A4C4E8' : elem.sensorKind == 'temperature' ? '#A4C4E8' : elem.sensorKind == 'humidity' ? '#FCDAB0' : '#336600';

          var color = elem.sensorName == 'soil' ? '#886d5c' : elem.sensorKind == 'temperature' ? '#A4C4E8' : elem.sensorKind == 'humidity' ? '#FCDAB0' : '#336600';
          console.log(elem.sensorName)
          chartData.push({key: (elem.sensorKind +" " +elem.sensorName), area: true, color: color, values: elem.values});
        });
        drawChart(chartData);
      });
    }

    function getLatestSensordata() {
      $.ajax({
        url: soapServiceLatestDataUrl
      }).then(function(data) {
        $('#dynamictable').empty();
        $('#dynamictable').append('<table></table>');
        var table = $('#dynamictable').children();
        table.append("<tr><th>Sensor Kind</th><th>Sensor Name</th><th>Value Time</th><th>Value</th></tr>");
        data.forEach(function(elem) {
          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>");
        });
      });
    }

    function drawChart(tempHumidData) {
      nv.addGraph(function() {
        // For other chart types see: https://nvd3.org/examples/index.html
        // API documentation: https://github.com/novus/nvd3/wiki/API-Documentation
        var chart = nv.models.lineChart()
          .margin({left: 100})
          .margin({bottom: 130})
          .useInteractiveGuideline(true)
          .transitionDuration(500)
          .showLegend(true);

        chart.xAxis
          .rotateLabels(-45)
          .tickFormat(function(d) {
            return chartDatetimeFormatter(new Date(d))
          });

        chart.yAxis
          .axisLabel('Temperature Â°F / Humidity %')
          .tickFormat(d3.format('.01f'));

        d3.select('#chart svg')
          .datum(tempHumidData)
          .call(chart);

        nv.utils.windowResize(function() { chart.update() });
        return chart;
      });
    }
  </script>
</head>
<body>
<h1>Worm Conditions</h1>

<div id='chart'>
  <svg style='height:500px'></svg>
</div>

<script>
  getHistoricalSensordata();
  getLatestSensordata();
</script>

<div class="ui-widget">
  <label for="fromdate">From</label>
  <input type="text" id="fromdate" name="fromdate">
  <label for="todate">To</label>
  <input type="text" id="todate" name="fromdate">
  <button id="refresh_historical_btn">Refresh Chart</button>
</div>

<br />
<div class="ui-widget">
  <div id="dynamictable"></div>
  <button id="refresh_latest_btn">Refresh Latest Values</button>
</div>

</body>
</html>