<?php

include 'db_connect.php';

$con=OpenCon();
$sql ="set time_zone = '+01:00'";
mysqli_query($con, $sql);

$Today = new DateTime();
$now=date_format($Today,'H:i:s');
$Test='Départ';

$sql = "SELECT * FROM MinuteInfo WHERE F_NUMREC=1";
$row = mysqli_fetch_assoc(mysqli_query($con, $sql));

$TMaison = $row['F_TMAISON'];
$TGrange = $row['F_TGRANGE'];
$TExterieur = $row['F_TEXTERIEUR'];

	 	
$sql="SELECT F_NUMREC,F_LOCATION,F_TEMP,F_HUMIDITY,F_PRESSURE,F_DATE FROM climat WHERE F_LOCATION=1 ORDER BY F_NUMREC DESC LIMIT 25"; 
$result1=mysqli_query($con, $sql);

$sql="SELECT F_NUMREC,F_LOCATION,F_TEMP,F_HUMIDITY,F_PRESSURE,F_DATE FROM climat WHERE F_LOCATION=2 ORDER BY F_NUMREC DESC LIMIT 25"; 
$result2=mysqli_query($con, $sql);

$sql="SELECT F_NUMREC,F_LOCATION,F_TEMP,F_HUMIDITY,F_PRESSURE,F_DATE FROM climat WHERE F_LOCATION=9 ORDER BY F_NUMREC DESC LIMIT 25"; 
$result5=mysqli_query($con, $sql);


$sql="SELECT F_NUMREC,F_LOCATION,F_MINT,F_MAXT,F_DATE FROM minmax WHERE F_LOCATION=1 ORDER BY F_NUMREC DESC LIMIT 25"; 
$result3=mysqli_query($con, $sql);

$sql="SELECT F_NUMREC,F_LOCATION,F_MINT,F_MAXT,F_DATE FROM minmax WHERE F_LOCATION=2 ORDER BY F_NUMREC DESC LIMIT 25"; 
$result4=mysqli_query($con, $sql);

$sql="SELECT F_NUMREC,F_LOCATION,F_MINT,F_MAXT,F_DATE FROM minmax WHERE F_LOCATION=9 ORDER BY F_NUMREC DESC LIMIT 25"; 
$result6=mysqli_query($con, $sql);

CloseCon($con);

while ($data = mysqli_fetch_assoc($result1)){
    $sensor1_data[] = $data;
}
while ($data = mysqli_fetch_assoc($result2)){
    $sensor2_data[] = $data; 
}
while ($data = mysqli_fetch_assoc($result3)){
    $sensor3_data[] = $data;
}
while ($data = mysqli_fetch_assoc($result4)){
    $sensor4_data[] = $data; 
}
while ($data = mysqli_fetch_assoc($result5)){
    $sensor5_data[] = $data; 
}
while ($data = mysqli_fetch_assoc($result6)){
    $sensor6_data[] = $data; 
}

$readings_time1 = array_column($sensor1_data, 'F_DATE');
$readings_time2 = array_column($sensor2_data, 'F_DATE');
$readings_time3 = array_column($sensor3_data, 'F_DATE');
$readings_time4 = array_column($sensor4_data, 'F_DATE');
$readings_time5 = array_column($sensor5_data, 'F_DATE');
$readings_time6 = array_column($sensor6_data, 'F_DATE');


$value1 = json_encode(array_reverse(array_column($sensor1_data, 'F_TEMP')), JSON_NUMERIC_CHECK);
$value2 = json_encode(array_reverse(array_column($sensor1_data, 'F_HUMIDITY')), JSON_NUMERIC_CHECK);
$value3 = json_encode(array_reverse(array_column($sensor1_data, 'F_PRESSURE')), JSON_NUMERIC_CHECK);
$reading_time1 = json_encode(array_reverse($readings_time1), JSON_NUMERIC_CHECK);

$value4 = json_encode(array_reverse(array_column($sensor2_data, 'F_TEMP')), JSON_NUMERIC_CHECK);
$value5 = json_encode(array_reverse(array_column($sensor2_data, 'F_HUMIDITY')), JSON_NUMERIC_CHECK);
$value6 = json_encode(array_reverse(array_column($sensor2_data, 'F_PRESSURE')), JSON_NUMERIC_CHECK);
$reading_time2 = json_encode(array_reverse($readings_time2), JSON_NUMERIC_CHECK);

$value7 = json_encode(array_reverse(array_column($sensor3_data, 'F_MINT')), JSON_NUMERIC_CHECK);
$value8 = json_encode(array_reverse(array_column($sensor3_data, 'F_MAXT')), JSON_NUMERIC_CHECK);
$reading_time3 = json_encode(array_reverse($readings_time3), JSON_NUMERIC_CHECK);

$value9 = json_encode(array_reverse(array_column($sensor4_data, 'F_MINT')), JSON_NUMERIC_CHECK);
$value10 = json_encode(array_reverse(array_column($sensor4_data, 'F_MAXT')), JSON_NUMERIC_CHECK);
$reading_time4 = json_encode(array_reverse($readings_time4), JSON_NUMERIC_CHECK);

$value11 = json_encode(array_reverse(array_column($sensor5_data, 'F_TEMP')), JSON_NUMERIC_CHECK);
$reading_time5 = json_encode(array_reverse($readings_time5), JSON_NUMERIC_CHECK);

$value12 = json_encode(array_reverse(array_column($sensor6_data, 'F_MINT')), JSON_NUMERIC_CHECK);
$value13 = json_encode(array_reverse(array_column($sensor6_data, 'F_MAXT')), JSON_NUMERIC_CHECK);
$reading_time6 = json_encode(array_reverse($readings_time6), JSON_NUMERIC_CHECK);


mysqli_free_result($result1);
mysqli_free_result($result2);
mysqli_free_result($result3);
mysqli_free_result($result4);
mysqli_free_result($result5);
mysqli_free_result($result6);

?>

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://code.highcharts.com/highcharts.js"></script>
  <link rel="stylesheet" type="text/css" href="ToggleSwitch.css">
 <link rel="stylesheet" type="text/css" href="dark.css">
  <link rel="stylesheet" type="text/css" href="JogDial.css">
        
  <link rel="icon" href="SiteLogo.png">
 <link rel="apple-touch-icon-precomposed" href="/SiteLogo120.png" type="image/png" sizes="120x120"> 

<!--<link rel="shortcut icon" type="image/png" href="SiteLogo.png">-->

<script type = "text/javascript"> 

function checkStatus(){
    if (<?php echo $AlarmStatus ?>==1){
    document.getElementById("ckAlarm").checked = true;
    } else {
    document.getElementById("ckAlarm").checked = false;
    }
} 

</script>

</head>

 <style>
         
    body {
      min-width: 310px;
    	max-width: 1280px;
    	height: 500px;
      margin: 0 auto;
    }
    
    h2 {
      font-family: Arial;
      font-size: 2.5rem;
      text-align: center;
    }
    
    p {
      font-family: Arial;     
      text-align: center;
      color: black;
    }
    
  
    form {
      text-align: center;
      font-size: 2.5rem;
    }

    input[type=button], input[type=submit], input[type=range] {
      background-color: #009578;
      border: none;
      color: white;
      padding: 16px 32px;
      text-decoration: none;
      margin: 4px 2px;
      cursor: pointer;
    }
    
    input[type=submit] {
      width: 100px ;    
      height: 40px;
    }
      
  </style>

  <body>
<!--          
    <div class="day">Jour (initial)</div>
<div class="day light-scheme">
  Jour (modifié si utilisation d'un thème clair)
</div>
<div class="day dark-scheme">
  Jour (modifié si utilisation d'un thème sombre)
</div>
<br />

<div class="night">Nuit (initial)</div>
<div class="night light-scheme">
  Nuit (modifié si utilisation d'un thème clair)
</div>
<div class="night dark-scheme">
  Nuit (modifié si utilisation d'un thème sombre)
</div>
         
-->          
          
<!--  
    <h2>THERMOSTAT</h2>  
        <p> Programme  <?php echo $Desc ?></p>
        
        <p> <?php echo $TimeStart ?> - <?php echo $TimeStop ?></p>
        <p> <?php echo $Test ?></p>
        
 
         <form action="update_temp.php" method="get">
         
<div class="dial">
  <div id="jog_dial_one"></div>
  <div id="jog_dial_one_meter">
    <div id="jog_dial_one_meter_inner"></div>    
  </div>
</div>
  <p id="TestTemp"><?php echo $BaseTemp; ?></p>


        <div>
                <input type="hidden" id="TempValue" value="<?php echo $BaseTemp; ?>" size="4" style="font-size:16pt;" readonly name="TempAdj">

        </div>                    

             
            <div>
                    <input 
                    type="range"
                    value="<?php echo $BaseTemp; ?>" 
                    step="0.5"
                    min="10" 
                    max="25"
                    size="10"
                    onchange="updateTextInput(this.value);"
                    >
           </div>

           <div>
            <input type="submit" value="Envoyer">
           </div>
  
        </form>
       
    
-->
    
    <h2>METEO</h2>

    <p> Maison : <?php echo round($TMaison,1) ?>° &ensp; Grange : <?php echo round($TGrange,1) ?>° &ensp; Ext : <?php echo round($TExterieur,1) ?>°</p>
    
    <div id="chart-temperature1" class="container"></div>
    <div id="chart-tempminmax1" class="container"></div> 
    <div id="chart-humidity1" class="container"></div>
    
    <div id="chart-temperature9" class="container"></div>
    <div id="chart-tempminmax9" class="container"></div>         
    <div id="chart-pressure1" class="container"></div>       
    
    <div id="chart-temperature2" class="container"></div>
    <div id="chart-tempminmax2" class="container"></div>     
    <div id="chart-humidity2" class="container"></div>
   

<script>


var value1 = <?php echo $value1; ?>;
var value2 = <?php echo $value2; ?>;
var value3 = <?php echo $value3; ?>;
var reading_time1 = <?php echo $reading_time1; ?>;

var value4 = <?php echo $value4; ?>;
var value5 = <?php echo $value5; ?>;
var value6 = <?php echo $value6; ?>;
var reading_time2 = <?php echo $reading_time2; ?>;

var value7 = <?php echo $value7; ?>;
var value8 = <?php echo $value8; ?>;
var reading_time3 = <?php echo $reading_time3; ?>;

var value9 = <?php echo $value9; ?>;
var value10 = <?php echo $value10; ?>;
var reading_time4 = <?php echo $reading_time4; ?>;

var value11 = <?php echo $value11; ?>;
var reading_time5 = <?php echo $reading_time5; ?>;

var value12 = <?php echo $value12; ?>;
var value13 = <?php echo $value13; ?>;
var reading_time6 = <?php echo $reading_time6; ?>;


var chartT = new Highcharts.Chart({
  chart:{ renderTo : 'chart-temperature1' },
  title: { text: 'Température Maison' },
  series: [{
    showInLegend: false,
    data: value1
  }],
  plotOptions: {
    line: { animation: false,
      dataLabels: { enabled: true }
    },
    series: { color: '#059e8a' }
  },
  xAxis: { 
    type: 'datetime',
    categories: reading_time1
  },
  yAxis: {
    title: { text: 'Température (Celsius)' }
  },
  credits: { enabled: false }
});

var chartT = new Highcharts.Chart({
  chart:{ renderTo : 'chart-tempminmax1' },
  title: { text: 'T° Min-Max Maison' },
  series: [{
    showInLegend: false,
    name:'Min',
    color: '#33B7FF',
    data: value7
  },
  {
    showInLegend: false,
    name:'Max',
    color: '#E34234',
    data: value8
  }],
  plotOptions: {
    line: { animation: false,
      dataLabels: { enabled: true }
    },
//    series: { color: '#059e8a' }
  },
  xAxis: { 
    type: 'datetime',
    categories: reading_time3
  },
  yAxis: {
    title: { text: 'Température (Celsius)' }
  },
  credits: { enabled: false }
});

var chartT = new Highcharts.Chart({
  chart:{ renderTo : 'chart-temperature2' },
  title: { text: 'Température Grange' },
  series: [{
    showInLegend: false,
    data: value4
  }],
  plotOptions: {
    line: { animation: false,
      dataLabels: { enabled: true }
    },
    series: { color: '#059e8a' }
  },
  xAxis: { 
    type: 'datetime',
    categories: reading_time2
  },
  yAxis: {
    title: { text: 'Température (Celsius)' }
  },
  credits: { enabled: false }
});


var chartT = new Highcharts.Chart({
  chart:{ renderTo : 'chart-tempminmax2' },
  title: { text: 'T° Min-Max Grange' },
  series: [{
    showInLegend: false,
    name:'Min',
    color: '#33B7FF',
    data: value9
  },
  {
    showInLegend: false,
    name:'Max',
    color: '#E34234',    
    data: value10
  }],
  plotOptions: {
    line: { animation: false,
      dataLabels: { enabled: true }
    },
//    series: { color: '#059e8a' }
  },
  xAxis: { 
    type: 'datetime',
    categories: reading_time4
  },
  yAxis: {
    title: { text: 'Température (Celsius)' }
  },
  credits: { enabled: false }
});


var chartH = new Highcharts.Chart({
  chart:{ renderTo:'chart-humidity1' },
  title: { text: 'Humidité Maison' },
  series: [{
    showInLegend: false,
    data: value2
  }],
  plotOptions: {
    line: { animation: false,
      dataLabels: { enabled: true }
    }
  },
  xAxis: {
    type: 'datetime',
    //dateTimeLabelFormats: { second: '%H:%M:%S' },
    categories: reading_time1
  },
  yAxis: {
    title: { text: 'Humidité (%)' }
  },
  credits: { enabled: false }
});

var chartH = new Highcharts.Chart({
  chart:{ renderTo:'chart-humidity2' },
  title: { text: 'Humidité Grange' },
  series: [{
    showInLegend: false,
    data: value5
  }],
  plotOptions: {
    line: { animation: false,
      dataLabels: { enabled: true }
    }
  },
  xAxis: {
    type: 'datetime',
    //dateTimeLabelFormats: { second: '%H:%M:%S' },
    categories: reading_time2
  },
  yAxis: {
    title: { text: 'Humidité (%)' }
  },
  credits: { enabled: false }
});

var chartT = new Highcharts.Chart({
  chart:{ renderTo : 'chart-temperature9' },
  title: { text: 'Température Extérieure' },
  series: [{
    showInLegend: false,
    data: value11
  }],
  plotOptions: {
    line: { animation: false,
      dataLabels: { enabled: true }
    },
    series: { color: '#059e8a' }
  },
  xAxis: { 
    type: 'datetime',
    categories: reading_time5
  },
  yAxis: {
    title: { text: 'Température (Celsius)' }
  },
  credits: { enabled: false }
});

var chartT = new Highcharts.Chart({
  chart:{ renderTo : 'chart-tempminmax9' },
  title: { text: 'T° Min-Max Extérieur' },
  series: [{
    showInLegend: false,
    name:'Min',
    color: '#33B7FF',
    data: value12
  },
  {
    showInLegend: false,
    name:'Max',
    color: '#E34234',
    data: value13
  }],
  plotOptions: {
    line: { animation: false,
      dataLabels: { enabled: true }
    },
//    series: { color: '#059e8a' }
  },
  xAxis: { 
    type: 'datetime',
    categories: reading_time6
  },
  yAxis: {
    title: { text: 'Température (Celsius)' }
  },
  credits: { enabled: false }
});


var chartP = new Highcharts.Chart({
  chart:{ renderTo:'chart-pressure1' },
  title: { text: 'Pression Athmosphérique' },
  series: [{
    showInLegend: false,
    data: value6  
  }],
  plotOptions: {
    line: { animation: false,
      dataLabels: { enabled: true }
    },
    series: { color: '#18009c' }
  },
  xAxis: {
    type: 'datetime',
    categories: reading_time2
  },
  yAxis: {
    title: { text: 'Pression (hPa)' }
  },
  credits: { enabled: false }
});


/*
var TestTemp="<?php echo $BaseTemp; ?>";
function updateTextInput(val) {
          document.getElementById('TempValue').value=val; 
};
*/

/*
* JogDial.js - v 1.0
*
* Copyright (c) 2014 Sean Oh (ohsiwon@gmail.com)
* Licensed under the MIT license 
* Demo : http://www.ohsean.net/plugins/jogdial/
*/

(function (window, undefined) {
  'use strict';

  /*
  * Constructor
  * JogDial
  * @param  {HTMLElement}    element
  * @param  {Object}         options
  * return  {JogDial.Instance}
  */
  var JogDial = function (element, options) {
    return new JogDial.Instance(element, options || {});
  };

  /*
  * Set constant values and functions
  */
  function setConstants() {
    if (JogDial.Ready) {
      return;
    }

    // Constants     
    JogDial.Doc   = window.document;
    JogDial.ToRad   = Math.PI / 180;
    JogDial.ToDeg   = 180 / Math.PI;

    // Detect mouse event type
    JogDial.ModernEvent   = (JogDial.Doc.addEventListener) ? true : false;
    JogDial.MobileRegEx   = '/Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile|Kindle|NetFront|Silk-Accelerated|(hpw|web)OS|Fennec|Minimo|Opera M(obi|ini)|Blazer|Dolfin|Dolphin|Skyfire|Zune/';
    JogDial.MobileEvent   = ('ontouchstart' in window) && window.navigator.userAgent.match(JogDial.MobileRegEx);
    JogDial.PointerEvent  = (window.navigator.pointerEnabled || window.navigator.msPointerEnabled) ? true : false;

    // Predefined options
    JogDial.Defaults = {
      debug : false,
      touchMode : 'knob',  // knob | wheel 
      knobSize : '30%',
      wheelSize : '100%',
      zIndex : 9999,
      degreeStartAt : 200,
      minDegree : null,  // (null) infinity
      maxDegree : null   // (null) infinity
    };

    // Predefined rotation info
    JogDial.DegInfo = {      
      rotation: 0,
      quadrant: 1
    };

    // Predefined DOM events
    JogDial.DomEvent = {
      MOUSE_DOWN: 'mousedown',
      MOUSE_MOVE: 'mousemove',
      MOUSE_OUT: 'mouseout',
      MOUSE_UP: 'mouseup'
    };

    // Predefined custom events
    JogDial.CustomEvent = {
      MOUSE_DOWN: 'mousedown',
      MOUSE_MOVE: 'mousemove',
      MOUSE_UP: 'mouseup'
    };

    // Utilities
    JogDial.utils  = {
      extend : function (target, src) {
        for (var key in src) {
          target[key] = src[key];
        }
        return target;
      },

      //Return css styling
      getComputedStyle: function (el, prop) {
        if (window.getComputedStyle) { // W3C Standard
          return window.getComputedStyle(el).getPropertyValue(prop);
        }
        else if (el.currentStyle) { // IE7 and 8
          return el.currentStyle[prop];
        }
      },

      //Calculating x and y coordinates
      getCoordinates: function (e) {
        e = e || window.event;
        var target = e.target || e.srcElement,
          rect   = target.getBoundingClientRect(),
          _x   = ((JogDial.MobileEvent) ? e.targetTouches[0].clientX : e.clientX) - rect.left,
          _y   = ((JogDial.MobileEvent) ? e.targetTouches[0].clientY : e.clientY) - rect.top;
        return {x:_x,y:_y};
      },

      // Return the current quadrant.
      // Note: JogDial's Cartesian plane is flipped, hence it's returning reversed value.
      getQuadrant: function(x, y){
        if (x>0 && y>0) return 4;
        else if (x<0 && y>0) return 3;
        else if (x<0 && y<0) return 2;
        else if (x>=0 && y<0) return 1;
      },

      // Returne the sum of rotation value
      getRotation: function(self, quadrant, newDegree){
        var rotation, delta = 0, info = self.info;         
          if(quadrant == 1 && info.old.quadrant == 2){ //From 360 to 0
            delta = 360;
          }
          else if(quadrant == 2 && info.old.quadrant == 1){ //From 0 to 360
            delta = -360;
          }
        rotation = newDegree + delta - info.old.rotation + info.now.rotation;
        info.old.rotation = newDegree; // return 0 ~ 360
        info.old.quadrant = quadrant; // return 1 ~ 4
        return rotation;
      },     

      //Checking collision 
      checkBoxCollision: function (bound ,point) {
        return bound.x1 < point.x 
        && bound.x2 > point.x
        && bound.y1 < point.y
        && bound.y2 > point.y;
      },

      // AddEvent, cross-browser support (IE7+)
      addEvent: function (el, type, handler, capture) {
        type = type.split(' ');
        for(var i=0; i < type.length; i++) {
          if (el.addEventListener) {
            el.addEventListener(type[i], handler, capture);
          }
          else if (el.attachEvent) {
            el.attachEvent('on'+type[i], handler);
          }
        }
      },

      // RemoveEvent, cross-browser support (IE7+)
      removeEvent: function (el, type, handler) {
        type = type.split(' ');
        for(var i=0; i < type.length; i++) {
          if (el.addEventListener) {
            el.removeEventListener(type[i], handler);
          }
          else if (el.detachEvent) {
            el.detachEvent('on'+type[i], handler);
          }
        }
      },

      // triggerEvent, cross-browser support (IE7+)
      triggerEvent: function(el, type){
        var evt;
        if (JogDial.Doc.createEvent) { // W3C Standard
          evt = JogDial.Doc.createEvent("HTMLEvents");
          evt.initEvent(type, true, true);
          el.dispatchEvent(evt);
        }
        else { // IE7 and 8          
          evt = JogDial.Doc.createEventObject();
          evt.target = {};
          JogDial.utils.extend(evt.target, el);
          el.fireEvent('on' + type, evt);
        }
      },

      convertClockToUnit: function (n) {
        return n%360-90;
      },

      convertUnitToClock: function (n) {
        return (n >= -180 && n < -90 ) ? 450+n : 90+n;
      }
    };

    JogDial.Ready = true;
  };

  /*
  * Constructor
  * JogDial.Instance
  * @param  {HTMLElement}    element
  * @param  {Object}         options
  * return  {JogDial.Instance}
  */
  JogDial.Instance = function (el ,opt) {    
    // Prevent duplication
    if (el.getAttribute('_jogDial_')) {
      window.alert('Please Check your code:\njogDial can not be initialized twice in a same element.');
      return false;
    }
    
    // Set global contant values and functions
    setConstants();

    // Set this instance
    setInstance(this, el, opt);

    // Set stage
    setStage(this);

    // Set events
    setEvents(this);
    
    // Set angle
    angleTo(this, JogDial.utils.convertClockToUnit(this.opt.degreeStartAt));

    return this;
  };

  /*
  * Prototype inheritance
  */
  JogDial.Instance.prototype = {
    on: function onEvent(type, listener) {
      JogDial.utils.addEvent(this.knob, type, listener, false);
      return this;
    },
    off: function onEvent(type, listener) {
      JogDial.utils.removeEvent(this.knob, type, listener);
      return this;
    },
    trigger: function triggerEvent(type, data) {
      switch (type){
        case 'angle':
          angleTo(this, data);
          break;
        default:
          window.alert('Please Check your code:\njogDial does not have triggering event [' + type + ']');
          break;
      }
      return this;
    }
  };

  function setInstance(self, el, opt){
    self.base = el;
    self.base.setAttribute('_JogDial_', true);
    self.opt = JogDial.utils.extend(JogDial.utils.extend({}, JogDial.Defaults), opt);
    self.info = {} || self;
    self.info.now = JogDial.utils.extend({},JogDial.DegInfo);
    self.info.old = JogDial.utils.extend({},JogDial.DegInfo);
    self.info.snapshot = JogDial.utils.extend({},self.info);
    self.info.snapshot.direction = null;
  };

  function setStage(self) {
    /*
    * Create new elements
    * {HTMLElement}  JogDial.Instance.knob
    * {HTMLElement}  JogDial.Instance.wheel
    */
    var item   = {},
    BId      = self.base.getAttribute("id"),
    BW       = self.base.clientWidth,
    BH       = self.base.clientHeight,
    opt     = self.opt,
    K       = item.knob = document.createElement('div'),
    W       = item.wheel = document.createElement('div'),
    KS       = K.style,
    WS       = W.style,
    KRad, WRad, WMargnLT, WMargnTP;

    //Set position property as relative if it's not predefined in Stylesheet
    if (JogDial.utils.getComputedStyle(self.base, 'position') === 'static') {
      self.base.style.position = 'relative';      
    }

    //Append to base and extend {object} item
    self.base.appendChild(K);
    self.base.appendChild(W);
    JogDial.utils.extend(self, item);

    //Set global position and size
    KS.position = WS.position = 'absolute';
    KS.width = KS.height = opt.knobSize;
    WS.width = WS.height = opt.wheelSize;

    //Set radius value
    KRad = K.clientWidth/2;
    WRad = W.clientWidth/2;

    //Set knob properties
    K.setAttribute('id', BId + '_knob');
    KS.margin = -KRad + 'px 0 0 ' + -KRad + 'px';
    KS.zIndex = opt.zIndex;

    //Set wheel properties
    W.setAttribute('id', BId + '_wheel');

    WMargnLT = (BW-W.clientWidth)/2;
    WMargnTP = (BH-W.clientHeight)/2;

    WS.left = WS.top = 0;
    WS.margin = WMargnTP + 'px 0 0 ' + WMargnLT + 'px';
    WS.zIndex = opt.zIndex;

    //set radius and center point value
    self.radius = WRad - KRad;
    self.center = {x:WRad+WMargnLT, y:WRad+WMargnTP};

    //Set debug mode
    if (opt.debug) setDebug(self);
  };

  function setDebug(self) {    
    var KS = self.knob.style;
    var WS = self.wheel.style;
    KS.backgroundColor = '#00F';
    WS.backgroundColor = '#0F0';
    KS.opacity = WS.opacity = .4;
    KS.filter = WS.filter = 'progid:DXImageTransform.Microsoft.Alpha(Opacity=40)';

    //Fancy CSS3 for debug
    KS.webkitBorderRadius = WS.webkitBorderRadius = "50%";
    KS.borderRadius = WS.borderRadius = "50%";
  };

  function setEvents(self) {
    /*
    * Set events to control elements
    * {HTMLElement}  JogDial.Instance.knob
    * {HTMLElement}  JogDial.Instance.wheel
    */    

    //Detect event support type and override values
    if (JogDial.PointerEvent) { // Windows 8 touchscreen
      JogDial.utils.extend(JogDial.DomEvent,{
        MOUSE_DOWN: 'pointerdown MSPointerDown',
        MOUSE_MOVE: 'pointermove MSPointerMove',
        MOUSE_OUT: 'pointerout MSPointerOut',
        MOUSE_UP: 'pointerup pointercancel MSPointerUp MSPointerCancel'
      });
    }
    else if (JogDial.MobileEvent) { // Mobile standard
      JogDial.utils.extend(JogDial.DomEvent,{
        MOUSE_DOWN: 'touchstart',
        MOUSE_MOVE: 'touchmove',
        MOUSE_OUT: 'touchleave',
        MOUSE_UP: 'touchend'
      });
    }

    var opt = self.opt,
    info = self.info,
    K = self.knob,
    W = self.wheel;
    self.pressed = false;

    // Add events
    JogDial.utils.addEvent(W, JogDial.DomEvent.MOUSE_DOWN, mouseDownEvent, false);
    JogDial.utils.addEvent(W, JogDial.DomEvent.MOUSE_MOVE, mouseDragEvent, false);
    JogDial.utils.addEvent(W, JogDial.DomEvent.MOUSE_UP, mouseUpEvent, false);
    JogDial.utils.addEvent(W, JogDial.DomEvent.MOUSE_OUT, mouseUpEvent, false);

    // mouseDownEvent (MOUSE_DOWN)
    function mouseDownEvent(e) {
      switch (opt.touchMode) {
        case 'knob':
        default:
          self.pressed = JogDial.utils.checkBoxCollision({
            x1: K.offsetLeft - W.offsetLeft,
            y1: K.offsetTop - W.offsetTop,
            x2: K.offsetLeft - W.offsetLeft + K.clientWidth,
            y2:  K.offsetTop - W.offsetTop + K.clientHeight
            }, JogDial.utils.getCoordinates(e));
          break;
        case 'wheel':
          self.pressed = true;
          mouseDragEvent(e);
          break;
      }

      //Trigger down event
      if(self.pressed) JogDial.utils.triggerEvent(self.knob, JogDial.CustomEvent.MOUSE_DOWN);
    };

    // mouseDragEvent (MOUSE_MOVE)
    function mouseDragEvent(e) {
      if (self.pressed) {
        // Prevent default event
        (e.preventDefault) ? e.preventDefault() : e.returnValue = false; 
        
        // var info = self.info, opt = self.opt,
        var offset = JogDial.utils.getCoordinates(e),
        _x = offset.x -self.center.x + W.offsetLeft,
        _y = offset.y -self.center.y + W.offsetTop,
        radian = Math.atan2(_y, _x) * JogDial.ToDeg,
        quadrant = JogDial.utils.getQuadrant(_x, _y),
        degree = JogDial.utils.convertUnitToClock(radian),
        rotation;
        
        //Calculate the current rotation value based on pointer offset
        info.now.rotation = JogDial.utils.getRotation(self, (quadrant == undefined) ? info.old.quadrant : quadrant  , degree);
        rotation = info.now.rotation;//Math.ceil(info.now.rotation);
        
        if(opt.maxDegree != null && opt.maxDegree <= rotation){
          if(info.snapshot.direction == null){
            info.snapshot.direction = 'right';
            info.snapshot.now = JogDial.utils.extend({},info.now);
            info.snapshot.old = JogDial.utils.extend({},info.old);
          }
            rotation = opt.maxDegree;
            radian = JogDial.utils.convertClockToUnit(rotation);
            degree = JogDial.utils.convertUnitToClock(radian);
        }
        else if(opt.minDegree != null && opt.minDegree >= rotation){
          if(info.snapshot.direction == null){
            info.snapshot.direction = 'left';
            info.snapshot.now = JogDial.utils.extend({},info.now);
            info.snapshot.old = JogDial.utils.extend({},info.old);
          }
            rotation = opt.minDegree;
            radian = JogDial.utils.convertClockToUnit(rotation);
            degree = JogDial.utils.convertUnitToClock(radian);
        }
        else if(info.snapshot.direction != null){
          info.snapshot.direction = null;
        }

        // Update JogDial data information
        JogDial.utils.extend(self.knob, {
          rotation: rotation,
          degree: degree
        });
        
        // update angle
        angleTo(self, radian);     

        
        TestTemp=degree/10;
        TestTemp=TestTemp.toFixed(1);
        document.getElementById("TestTemp").innerHTML = TestTemp;
        document.getElementById('TempValue').value=TestTemp;
      }
    };

    // mouseDragEvent (MOUSE_UP, MOUSE_OUT)
    function mouseUpEvent() {
      if(self.pressed){
        self.pressed = false;        
        if(self.info.snapshot.direction != null){
          self.info.now = JogDial.utils.extend({},info.snapshot.now);
          self.info.old = JogDial.utils.extend({},info.snapshot.old);
          self.info.snapshot.direction = null;
        }

        // Trigger up event
        JogDial.utils.triggerEvent(self.knob, JogDial.CustomEvent.MOUSE_UP);
      }
    };
  };

  /*
  * Function
  * @param  {HTMLElement}    self
  * @param  {String}         radian
  */  
  function angleTo(self, radian) {
    radian *= JogDial.ToRad;
    self.knob.style.left = Math.cos(radian) * self.radius + self.center.x + 'px';
    self.knob.style.top = Math.sin(radian) * self.radius + self.center.y + 'px';
    
    
    if(self.knob.rotation == undefined){
       // Update JogDial data information
        JogDial.utils.extend(self.knob, {
          rotation: self.opt.degreeStartAt,
          degree: JogDial.utils.convertUnitToClock(radian)
        });
    }

    // Trigger move event
    JogDial.utils.triggerEvent(self.knob, JogDial.CustomEvent.MOUSE_MOVE);    
  };

  // UMD Wrapper pattern
  // Based on returnExports.js script from (https://github.com/umdjs/umd/blob/master/returnExports.js)
  if (typeof define === 'function' && define.amd) {
      // AMD. Register as an anonymous module.
      define(function() { return JogDial; });
  } else if (typeof exports === 'object') {
      // Node. Does not work with strict CommonJS, but
      // only CommonJS-like environments that support module.exports,
      // like Node.
      module.exports = JogDial;
  } else {
      // Browser globals
      window.JogDial = JogDial;
  }

})(window);

window.onload = function(){
  var bar = document.getElementById('jog_dial_one_meter_inner');  
	var dialOne = JogDial(document.getElementById('jog_dial_one'), 
                        {debug:false, wheelSize:'90%', knobSize:'100px', minDegree:0, maxDegree:360, degreeStartAt: 0})
		.on('mousemove', function(evt){      
      bar.style.width = Math.round((evt.target.rotation/360)*100) + '%';
		});
}


/*
{
  var checkbox = document.getElementById('alarme');
  if (checkbox.checked != true)
  {
    alert("! alarme désactivée !");
  }
}

*/


function dontGo(event) {
    event.preventDefault();
}

function submitAlarm(){
    document.getElementById("clickMe").addEventListener("CheckboxStateChange",dontGo);    
    if((document.getElementById('ckAlarm').checked === null)||(document.getElementById('ckAlarm').checked === undefined)){
        document.getElementById('AlarmState').value = 0;
        console.log('off');
        document.getElementById('AlarmForm').submit();
    }
    if(document.getElementById('ckAlarm').checked){
        document.getElementById('AlarmState').value = 1;
        console.log('off');
        document.getElementById('AlarmForm').submit();
    }else{
        document.getElementById('AlarmState').value = 0;
        console.log('off');
        document.getElementById('AlarmForm').submit();
    }
}

</script>
</body>
</html>