nodemcu-httpserver/http/garage_door_control.html
Marcos adde150009 Overhaul garage door example (#93)
* script for controlling garage that is aware of door states

* Overhaul garage door example

Hardware now calls for reed relay in order to be able to tell the state
of the switch. This way, we can have distinct open/close operations
that error if the door is already in that state. Allows for potential
better integration with home automation systems.

* Prepare for push to GitHub

* Restore defaults

* Make HTTP auth realm match zeroconf networking name
2017-07-01 15:18:11 -05:00

85 lines
2.7 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="garage_door_control.css">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<meta charset="UTF-8">
<title>Garage Remote</title>
</head>
<script>
var xmlHttp = null;
function pushTheButton(door)
{
var url = "/garage_door.lua?action=toggle&door=" + door;
xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = processRequest;
xmlHttp.open("GET", url, true);
xmlHttp.send( null );
}
function processRequest()
{
if(xmlHttp.readyState == 0)
{
document.getElementById("label").innerHTML = 'Initalizing...';
document.getElementById("label").className = "initalizing";
}
else if(xmlHttp.readyState == 1)
{
document.getElementById("label").innerHTML = 'Server connection established.';
document.getElementById("label").className = "connection";
}
else if(xmlHttp.readyState == 2)
{
document.getElementById("label").innerHTML = 'Request received.';
document.getElementById("label").className = "received";
}
else if(xmlHttp.readyState == 3)
{
document.getElementById("label").innerHTML = 'Processing request.';
document.getElementById("label").className = "processing";
}
else if(xmlHttp.readyState == 4)
{
if(xmlHttp.status == 200)
{
document.getElementById("label").innerHTML = xmlHttp.responseText;
document.getElementById("label").className = "ok";
sleep(300);
document.getElementById("label").className = "start";
}
else if(xmlHttp.status == 400)
{
document.getElementById("label").innerHTML = 'Bad request.';
document.getElementById("label").className = "bad";
}
}
}
function sleep(milliseconds){
var start = new Date().getTime();
for (var i = 0; i < 1e7; i++)
{
if ((new Date().getTime() - start) > milliseconds)
{
break;
}
}
}
</script>
<body bgcolor="#777777">
<div id="remote">
<div id="label" class="start"></div>
<a href="#" onclick="pushTheButton(1);" class="button button-1">
<span>I</span>
</a>
<a href="#" onclick="pushTheButton(2); " class="button button-2">
<span>II</span>
</a>
<div id="spacer"></div>
</div>
</body>
</html>