<!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>