Part 4: The Web Interface
Well, now I need a nifty web interface to control the opener. A few guidelines for the design:
- Must not be ugly (plain Jane is OK)
- Must not accidentally trigger the opener
- Should provide visual clues
- Should notify me upon activation
- Should fit an iPhone
So, with a little tinkering, I came up with the following interface (as seen on an iPhone):
Eventually, this will be a widget on a larger home automation project I want to build (someday!!). So, this is clean and simple and will fit nicely in my future project.
Here is the code behind it:
<?php
define(SERVER, "grendel");
define(DEST, "192.168.xxx.107");
define(PORT, "2000");
define(DOORTIME, 15);
define(CONTACT, "xxxxxxxxxx@vtext.com");
function wiflyExecute($commands) {
$script = 'log_user 0; spawn telnet '.DEST.' '.PORT.'; expect -exact "*HELLO*"; send -- "\$\$\$\r"; expect -exact "CMD\r"; '.$commands.'; expect -exact "> "; send_user $expect_out(buffer)"; send -- "close\r"; expect eof;';
exec("/usr/bin/expect -c'".$script."'", $stdout);
return($stdout);
}
$doorState = wiflyExecute('send -- "show io\r";');
$doorState = ((hexdec($doorState[4]) & hexdec("0x4000")) == 0 ? "closed" : "open");
if (isset($_POST["control"]) && $_POST["control"] == "activate") {$status = ($doorState == "closed" ? "Opening" : "Closing");
wiflyExecute('send -- "set sys output 0x0080 0x0080\r"; sleep .5; send -- "set sys output 0x0000 0x0080\r";');
header('Location: http://'.SERVER.'/garage.php?status='.$status);
mail(CONTACT, 'Garage: '.$status, date('l jS \of F Y h:i:s A'));
} else {
print("<html><head>\n");
print("<meta name='viewport' content='width=device-width; initial-scale=1.0; maximum-scale=1.0;'>\n");
if (isset($_GET["status"])) print("<meta http-equiv='refresh' content='".DOORTIME.";url=http://".SERVER."/garage.php'>\n");
print("</head><body>\n");
print("<form action=garage.php method=POST>\n");
print("<input type=hidden name=control value=activate>\n");
print("<table align=center border=0 cellpadding=5 style='border-collapse:collapse;'>\n");
print("<tr><td align=center><img src='garage-closed.png'></td>\n");
print(" <td align=center><img src='garage-".$doorState.".png'></td></tr>\n");
print("<tr><td align=center><input type=button value='Open / Close' style='font-size:14pt;width:170px;height:35px;' disabled></td>\n");
print(" <td align=center><input type=submit value='Open / Close' style='font-size:14pt;width:170px;height:35px;'></td></tr>\n");
if (isset($_GET["status"])) print("<tr><td colspan=2 align=center>Door is ".$_GET["status"].".</td></tr>\n");
print("</table>\n</form>\n");
print("</body></html>\n");
}
?>
Some of the text does not display properly, so click here to open the code as a text file in a new window/tab.
Here are the graphics I used on my page (care of Visio and about 5 minutes of effort — yeah, it shows):
Now, the reason I did it this way… When you click on the “Open/Close” button, it reopens the page but upon reopening, it issues the command to the WiFly then a redirect. This will prevent the page from being refreshed accidentally. I also put in a small “Opening” message along with a meta refresh set to the time it takes the door to open/close fully (mine takes 13 seconds, so I used 15). I also set it up to email a text message to my personal phone. Just a little insurance/reminder when my gadget is being used.
With a little clicking and moving the magnet close to the magnetic switch, I determined that everything on the web interface was working according to design. Time to wrap this up in a nice package and get it mounted.
[...] from d’innovative wanted a way to control his garage door remotely. Have a look at his Wifi Garage Door Opener Project Build for some inspiration when you are ready to build yours. If you are looking for some other options [...]
I just came across your project and found it very interesting. I am web developer and I was bored at work, so I made an animated version of the garage door using just html, css and javascript. Here it is in case you are interested: http://dl.dropbox.com/u/14066240/garage.html.
Love it!!! I think I’ll integrate this into my web page on my home server. thnx
[...] two switches for my garage door, I need to them to use on my web site. The original posting by Tod had images for open and closed. I wanted to add a half-open image and also wanted to create a [...]
Tod,
Excellent write up!
Have you ventured to expanding this to handle a second bay? I thought I could do so by using another 24mA GPIO to drive a second relay. Such as GPIO8 and then another smaller one to read the additional reed switch for the second door; maybe GPIO1. Thoughts?
I have not yet — my second bay is used pretty much for storage because my SUV doesn’t fit “comfortably”…
But you can see that the page is designed for 2 bays and the wifly will support it as well. let me know if you need any help setting up the second bay. also love to see your results when you’re done!
I’ll be sure to take some pictures when completed. I am running into one issue…I’m using GPIO8 to drive the second bay door and everything operates smoothly unless the power gets cycled in which the door opens. So, maybe the default state of GPIO8 is high on power up? All my attempts to set the default state to low on power up have failed. I’m using set sys output 0×000 0×0100 after power up to set the pin to low but cannot save the config. Any words of wisdom would be greatly appreciated! I’ve also tried set sys mask 0x21f0 and then again set sys output 0×0000 0×0100 then save but then on reboot the door still opens. Help!
Hi,
Thanks for this great write-up! I am a beginner at home electronics and wanted to try out this project. One thing that was not clear to me was where the TCL/expect code ran? Reading the WiFly manuals, I don’t think this runs on the module. So I am guessing that you have a home server that is always running that sends those commands to the WiFly? Thanks in advance for the clarification.
Yes. I run them on an ubuntu server. The php code can be cut/paste verbatim with minor changes to the server, port, door opening time, wifly ip address, email address and source email address as outlined in the DEFINE statements.
Good luck with your project!!