SD-Karte (Html Code): Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
Keine Bearbeitungszusammenfassung |
Keine Bearbeitungszusammenfassung |
||
Zeile 1: | Zeile 1: | ||
<pre> | <pre> | ||
<!DOCTYPE html> | <!DOCTYPE html> | ||
<html> | <html> | ||
Zeile 162: | Zeile 160: | ||
</body> | </body> | ||
</html> | </html> | ||
</pre> | </pre> |
Version vom 15. Januar 2014, 12:40 Uhr
<!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>