index.html

<html>
<style>
<body style="background-colour:lightyellow;">
h1 {colour:blue}
</style>


<div style="text-align:center">
<h1> Internet Controlled Vehicle </h1>
<br><br>
<iframe src="http://192.168.1.110:9000/javascript_simple.html" frameborder="0" align="left" width="300" height="250" align="middle" scrolling="no"></iframe>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
	body {
	    text-align: center;
	}
	#g1,
	#g2 {
	    width: 200px;
	    height: 160px;
	    display: inline-block;
	    margin: 1em;
	}
</style>
</head>
    <h1>DHT22 Sensor Data </h1>
    <div id="g1"></div>
    <div id="g2"></div>
    <hr>
	<h3> Last Sensors Reading: {{ time }} ==> <a href="/"class="button">REFRESH</a></h3>
	<hr>

    <script src="var/www/Sensors_Database/dhtWebServer/static/raphael-2.1.4.min.js"></script>
    <script src="var/www/Sensors_Database/dhtWebServer/static/justgage.js"></script>
    <script>
	var g1, g2;
	document.addEventListener("DOMContentLoaded", function(event) {
	    g1 = new JustGage({
		id: "g1",
		value: {{temp}},
		valueFontColor: "yellow",
		min: -10,
		max: 50,
		title: "Temperature",
		label: "Celcius"
	});
	    g2 = new JustGage({
		id: "g2",
		value: {{hum}},
		valueFontColor: "yellow",
		min: 0,
		max: 100,
		title: "Humidity",
		label: "%"
	});
      });
    </script>


<br><br>
<button style="height: 75px; width:75px" onmousedown="forward()" onmouseup="stop()" ><img style="height: 65px"src="/html/forwardbutton.png"><br><br>Forward</button>
<img hspace="20">
<br><br><br>
<button style="height: 75px; width:75px" onmousedown="turnleft()" onmouseup="stop()"><img style="height: 65px"src="/html/leftbutton.png"><br><br>Left</button>
<img hspace="20" style="padding-right: 30px">
<button style="height: 75px; width:75px" onmousedown="turnright()" onmouseup="stop()"><img style="height: 65px"src="/html/rightbutton.png"><br><br>Right</button>
<img hspace="20" style="padding-left: 30px">
<br><br><br>
<button style="height: 75px; width:75px" onmousedown="reverse()" onmouseup="stop()"><img style="height: 65px"src="/html/reversebutton.png"><br><br>Reverse</button>
<img  hspace="20">


<br><br><br>
</span>

<br><br>
<script Language="Javascript">


var xmlhttp;
xmlhttp=new XMLHttpRequest();


function forward()
{
xmlhttp.open("GET","cgi-bin/forward.cgi", true);
xmlhttp.send();
}

function stop()
{
xmlhttp.open("GET","cgi-bin/stop.cgi", true);
xmlhttp.send();
}

function reverse()
{
xmlhttp.open("GET","cgi-bin/reverse.cgi", true);
xmlhttp.send();
}

function turnleft()
{
xmlhttp.open("GET","cgi-bin/turnleft.cgi", true);
xmlhttp.send();
}

function turnright()
{
xmlhttp.open("GET","cgi-bin/turnright.cgi", true);
xmlhttp.send();
}

</script>
</body>
</html>