<!--
***************************************************************************************************
*Diese Html-Seite dient der Darstellung der Temperatur und des Ein-/Aus-Schalten der Grillreglung.*
******************Sie stellt die verbindung zwischen Android-App und Arduino dar.******************
******Die Seite wurde von Kathrin Liedmann, Benedikt Schulte und Dominik Rebein im Rahmen des******
**************Elektrotechnik Fachpraktikums an Hochschule Hamm-Lippstadt entwickelt.***************
******************Die Grundstruktur stammt von der Seite http://www.fluuux.de.*********************
***************************************************************************************************
-->
<!DOCTYPE html> <!-- Festlegen des Dokumententyps -->
<html>
<head>
<title>Grillsteuerung</title> <!-- Beschriftung der HTML Seite -->
<style>
h1{margin:0px;padding:0px;text-align:center;} /* Struktur der Überschrift */
h2 { margin-bottom:5px; }
body{ /* Farbverlauf der Website bei Aus-Status */
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{ /* Farbverlauf der Website bei An-Status */
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%;} /* Prozentuale Angabe der Höhe der Website */
.colbars{
float:right;
width:5px;
height:50%;
clear:right;
margin:0px 10px 0px 0px;
}
#temperature{ /* Position der Ausgabe "Temperatur:" */
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{ /* Element durch das die Buttons unten positioniert werden */
position:absolute;
bottom:0px;
width:100%;
height:60px;
}
#buttoncontainer button{ /* Aussehen der eigentlichen Buttons */
width:50%;
margin:0px;
height:100%;
}
#result{ /* Positionierung der Grillstatusanzeige */
margin-top:20px;
text-align:center;
}
</style>
<script type="text/javascript">
function ajax(method, url, data, callback, errorCallback) /* Definition eines Browserunabhängigen AJAX-Aufrufs */
{
var async = true;
var xmlHttpRequest = false;
if (window.XMLHttpRequest){
/* Fall 1: Firefox, Chrome, Safari, Opera etc */
xmlHttpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) {
/* Fall 2: Internet Explorer */
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
if(xmlHttpRequest != false)
{
/* Parameter für das Requestobjekt setzen */
xmlHttpRequest.open(method, url, async);
xmlHttpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttpRequest.onreadystatechange = function() {
/* Funktion, die aufgerufen wird, wenn eine Antwort vom Server kommt */
if(xmlHttpRequest.status == 200){ //Erfolgsfall
if (xmlHttpRequest.readyState == 4)
{
/*Wenn eine Funktion für den Erfolgsfall angegeben wurde, diese Aufrufen mit der Antwort vom Server */
if(callback != null && typeof(callback) == "function"){
callback(JSON.parse(xmlHttpRequest.responseText));
}
}
}else{
/*Wenn eine Funktion für den Fehlerfall angegeben wurde, diese Aufrufen mit der Antwort vom Server */
if(errorCallback != null && typeof(errorCallback) == "function"){
errorCallback(xmlHttpRequest);
}
}
}
/* Den Request ausgeführen */
xmlHttpRequest.send(data);
}
else
{
alert("Please use browser with Ajax support!");
}
}
function grillstatus(){ /* Anfrage an den Server, um den aktuellen Status abzurufen */
ajax(
"GET",
"http://192.168.0.88/?action=status",
"",
function(data){
console.log(data); /* Debug-Ausgabe in die Browserkonsole schreiben */
document.getElementById('temperature').innerHTML = (data.temperature) + "° C"; /* Temperaturwert in das HTML Element mit der ID temperature senden */
if(data.grillstatus == "an"){
document.body.className = "on";
}else{
document.body.className = "";
}
},function(err){
console.log(err); /* Im Fehlerfall Ausgabe in Browserlog schreiben */
});
}
window.onload = function(){ /* Diese Operationen werden ausgeführt, sobald die Seite inklusive aller Scripte geladen worden ist, damit ist sichergestellt, dass alle div-Bereiche und Buttons verfügbar sind.*/
document.getElementById('switchgrillon').onclick = function(){ /* Hier wird eine Aktion an den Anschalten-Button gebunden, sobald geklickt wird, wird die angegebene Funktion ausgeführt */
ajax("POST", 'http://192.168.0.88/?action=switchgrillon', "action=switchgrillon", /* AJAX Anfrage an den Server mit dem Befehl "switchgrillon" */
function(){ /* Diese Funktion wird im Erfolgsfall aufgerufen, (Server sendet Status 200/OK zurück ) */
document.getElementById('result').innerHTML = "Angeschaltet";
document.body.className = "on";
grillstatus();
resetResult();
},
function(){ /* Diese Funktion wird im Fehlerfall aufgerufen, (Server antwortet nicht oder sendet einen Status ungleich 200/OK zurück ) */
console.log('error');
});
}
document.getElementById('switchgrilloff').onclick = function(){ /* Analog zu Switchgrillon */
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(); /* grillstatus() wird einmalig beim start aufgerufen */
window.setInterval(grillstatus, 5000); /* grillstatus() wird alle 5 Sekunden einmal aufgerufen */
function resetResult(){ /* Statusmeldung ("Angeschaltet" / "Ausgeschaltet") soll nach einer Sekunde wieder verschwinden */
window.setTimeout(function(){
document.getElementById('result').innerHTML = "";
},1000);
}
}
</script>
</head>
<body>
<h1>Grill-App</h1>
<div id="temperature"></div> <!-- HTML Element in das die Temperatur geschrieben wird -->
<div id="result"></div> <!-- HTML Element in das die Statusmeldung geschrieben wird -->
<div id="buttoncontainer">
<button id="switchgrillon" />Einschalten</button><button id="switchgrilloff" />Ausschalten</button>
</div>
</body>
</html>