<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="BeieliPi - Bienenstock-Monitoring">
    <meta name="author" content="Joerg Lehmann, nbit Informatik GmbH">
    <link rel="icon" href="/static/images/favicon.ico">
    <title>BeieliPi - Messkurve f&uuml;r {{ scale_alias }}</title>
    
    <link href="/static/dist/toolkit.min.css" rel="stylesheet">
    <link href="/static/css/customize.css" rel="stylesheet">

    <script type="text/javascript" src="/static/js/dygraph.js"></script>
    <script type="text/javascript" src="/static/js/smooth-plotter.js"></script>
    <link rel="stylesheet" src="/static/css/dygraph.css" />
    <style type="text/css">
    .dygraph-axis-label-x {
      font-size: 10px;
    }

    #mylabel {
      font-size: 12px;
    }
 
    * {
      font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
    }

    </style>
  </head>

  <body>
     <div class="container">
       <div class="text-center"><h1>{{ scale_alias }}</h1></div>
       <div id="graphdiv"></div>
% if interface_type == 'btscale':
       <div id="graphdivtemp"></div>
       <div id="graphdivhum"></div>
       <div id="graphdivaccu"></div>
% end
    </div>

     <script type="text/javascript">

        g = new Dygraph(
          document.getElementById("graphdiv"),
          "/data/{{ scale_uuid }}-{{ infotime }}.csv",
          { 
            title: '<b>Gewicht</b><div id="mylabel"></div>',
            titleHeight: 36,
            showRangeSelector: true, 
            rangeSelectorHeight: 40,
            drawPoints: true,
            pointSize: 2,
            labels: [ 'Timestamp', 'Gewicht in Gramm' ],
            labelsDiv: document.getElementById("mylabel"),
            plotter: smoothPlotter,
            axes: {
                 x: {
                      pixelsPerLabel: 90,
                      axisLabelWidth: 90,
                      axisLabelFormatter: function(d, gran) {
                        return new Date(d).toLocaleString('de-CH').slice(0, -3);
                      },
                      valueFormatter: function(ms) {
                        return new Date(ms).toLocaleString('de-CH').slice(0, -3);
                      }
                    }
                  }
          }
        );

        gt = new Dygraph(
          document.getElementById("graphdivtemp"),
          "/data/temp-{{ scale_uuid }}-{{ infotime }}.csv",
          { 
            title: '<b>Temparatur</b><div id="mylabel"></div>',
            titleHeight: 36,
            showRangeSelector: true, 
            rangeSelectorHeight: 40,
            drawPoints: true,
            pointSize: 2,
            labels: [ 'Timestamp', 'Temparatur in Grad Celsius' ],
            labelsDiv: document.getElementById("mylabel"),
            plotter: smoothPlotter,
            axes: {
                 x: {
                      pixelsPerLabel: 90,
                      axisLabelWidth: 90,
                      axisLabelFormatter: function(d, gran) {
                        return new Date(d).toLocaleString('de-CH').slice(0, -3);
                      },
                      valueFormatter: function(ms) {
                        return new Date(ms).toLocaleString('de-CH').slice(0, -3);
                      }
                    }
                  }
          }
        );

        gh = new Dygraph(
          document.getElementById("graphdivhum"),
          "/data/humidity-{{ scale_uuid }}-{{ infotime }}.csv",
          { 
            title: '<b>Luftfeuchtigkeit</b><div id="mylabel"></div>',
            titleHeight: 36,
            showRangeSelector: true, 
            rangeSelectorHeight: 40,
            drawPoints: true,
            pointSize: 2,
            labels: [ 'Timestamp', 'Luftfeuchtigkeit in Prozent' ],
            labelsDiv: document.getElementById("mylabel"),
            plotter: smoothPlotter,
            axes: {
                 x: {
                      pixelsPerLabel: 90,
                      axisLabelWidth: 90,
                      axisLabelFormatter: function(d, gran) {
                        return new Date(d).toLocaleString('de-CH').slice(0, -3);
                      },
                      valueFormatter: function(ms) {
                        return new Date(ms).toLocaleString('de-CH').slice(0, -3);
                      }
                    }
                  }
          }
        );

        ga = new Dygraph(
          document.getElementById("graphdivaccu"),
          "/data/accu-{{ scale_uuid }}-{{ infotime }}.csv",
          { 
            title: '<b>Batteriespannung</b><div id="mylabel"></div>',
            titleHeight: 36,
            showRangeSelector: true, 
            rangeSelectorHeight: 40,
            drawPoints: true,
            pointSize: 2,
            labels: [ 'Timestamp', 'Batteriespannung in Volt' ],
            labelsDiv: document.getElementById("mylabel"),
            plotter: smoothPlotter,
            axes: {
                 x: {
                      pixelsPerLabel: 90,
                      axisLabelWidth: 90,
                      axisLabelFormatter: function(d, gran) {
                        return new Date(d).toLocaleString('de-CH').slice(0, -3);
                      },
                      valueFormatter: function(ms) {
                        return new Date(ms).toLocaleString('de-CH').slice(0, -3);
                      }
                    }
                  }
          }
        );

        </script>

  </body>
</html>
