SD-Karte (Html Code)

Aus HSHL Mechatronik
Zur Navigation springen Zur Suche springen
<!DOCTYPE html>
<html>
<head>
  <title>Grillsteuerung</title>
  <style>
    h1{margin:0px;padding:0px;text-align:center;}
    h2 { margin-bottom:5px; }
    body{
      background:linear-gradient( 180deg, #ccc 0%,  white 100%);
	  background:-webkit-linear-gradient( 180deg, #ccc 0%,  white 100%);
	  background:-moz-linear-gradient( 180deg, #ccc 0%,  white 100%);
      height:100%;
      font-family:Arial;
      margin:0px;
      padding:0px;
    }
    body.on{
		background:linear-gradient( 180deg, rgb(255,255,60) 0%,  rgb(251,0,0) 100%);
		background:-webkit-linear-gradient( 180deg, rgb(255,255,60) 0%,  rgb(251,0,0) 100%);
		background:-moz-linear-gradient( 180deg, rgb(255,255,60) 0%,  rgb(251,0,0) 100%);
    }
    html{height:100%;}
    .colbars{
      float:right;
      width:5px;
      height:50%;
      clear:right;
      margin:0px 10px 0px 0px;
    }
    #temperature{
      position:absolute;
      left:50%;
      top:50%;
      width:160px;
      height:100px;
      margin-left:-80px;
      margin-top:-50px;
      text-align:center;
      font-size:60px;
      font-weight:bold;
    }
    #buttoncontainer{
      position:absolute;
      bottom:0px;
      width:100%;
      height:60px;
    }
    #buttoncontainer button{
      width:50%;
      margin:0px;
      height:100%;
    }
    #result{
      margin-top:20px;
      text-align:center;
    }
  </style>
  <script type="text/javascript">
function ajax(method, url, data, callback, errorCallback)
{
      var async = true;
      var xmlHttpRequest = false;
      if (window.XMLHttpRequest)
	  {
	  xmlHttpRequest = new XMLHttpRequest();
      }
      else if (window.ActiveXObject) {
	  xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
      }
      if(xmlHttpRequest != false)
      {
	      xmlHttpRequest.open(method, url, async);
	      xmlHttpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	      xmlHttpRequest.onreadystatechange = function()
	      {
		   if(xmlHttpRequest.status == 200){
		      if (xmlHttpRequest.readyState == 4)
		      {
			      if(callback != null && typeof(callback) == "function"){
				      callback(JSON.parse(xmlHttpRequest.responseText));
			      }
		      }
		    }else{
		          if(errorCallback != null && typeof(errorCallback) == "function"){
				      errorCallback(xmlHttpRequest);
			  }
		    }
	      }
	      xmlHttpRequest.send(data);
      }
      else
      {
	      alert("Please use browser with Ajax support.!");
      }
}

function grillstatus(){
    ajax(
      "GET",
      "http://192.168.0.88/?action=status",
      "",
      function(data){
	  console.log(data);
	  document.getElementById('temperature').innerHTML = (data.temperature) + "° C";

	  if(data.grillstatus == "an"){
	    document.body.className = "on";
	  }else{
	    document.body.className = "";
	  }


	},function(err){
	  console.log(err);
      });
}

window.onload = function(){

	document.getElementById('switchgrillon').onclick = function(){
	    ajax("POST", 'http://192.168.0.88/?action=switchgrillon', "action=switchgrillon", function(){
			document.getElementById('result').innerHTML = "Angeschaltet";
			document.body.className = "on";
			grillstatus();
			resetResult();
			},function(){
	      console.log('error');
	    });
	}

	document.getElementById('switchgrilloff').onclick = function(){
	    ajax("POST", 'http://192.168.0.88/?action=switchgrilloff', "action=switchgrilloff", function(){
			document.getElementById('result').innerHTML = "Ausgeschaltet";
			document.body.className = "";
			grillstatus();
			resetResult();
	    },function(){
	      console.log('error');
	    });
	}

	grillstatus();
	window.setInterval(grillstatus, 5000);
	function resetResult(){
		window.setTimeout(function(){
			document.getElementById('result').innerHTML = "";
		},1000);
	}
}
  </script>
</head>
<body>
	  <h1>Grill-App</h1>
	  <div id="temperature"></div>
	  <div id="result"></div>
	  <div id="buttoncontainer">
	    <button id="switchgrillon" />Einschalten</button><button id="switchgrilloff" />Ausschalten</button>
	  </div>
	</body>
</html>