SD-Karte (Html Code): Unterschied zwischen den Versionen

Aktuelle Version vom 5. Februar 2014, 19:14 Uhr

<!--
***************************************************************************************************
*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>
SD-Karte (Html Code): Unterschied zwischen den Versionen

Aktuelle Version vom 5. Februar 2014, 19:14 Uhr

Navigationsmenü

Suche
