My remote garage door opener

[rphgeek]

I was leaving for a vacation one morning and couldn’t remember if I left my garage door open or not. Fortunately, I was still in our neighborhood so I was able to make a quick turnaround to double check before I had to leave for the airport. After that, I wanted to build a remote garage door opener that I could use from my phone. I also didn’t want to have to pay a monthly fee for a service or rely on someone else’s website to accomplish the task. So I went on a hunt for a fairly simple, reasonably priced (around $100) way of building it myself….not quite that easy.

After many months of searching, I was able to piece together a few tidbits from other sites to make my own that was easy enough to build that a person like me (with little knowledge programming or building computers) could accomplish it. So I thought I’d share my project in hopes it’ll help someone else out there.

Here’s a video demonstration of what I built: http://www.youtube.com/watch?v=MmDmhGAl ... e=youtu.be

Requirements:
-Ability to monitor the status of the garage doors from anywhere using a computer or smartphone
-The website access has to be ID/password protected
-Live webcam feed to see the doors instead of relying simply on a magnetic switch
-Has to be easy enough for an idiot like me to build and program it


Hardware/Software:
Raspberry Pi Model B – I liked the RPi better than Arduino because it was more robust and easier to use

Edimax EW-7811Un Wireless nano adapter – I didn’t have an easy way of connecting it directly into my network so this was my best solution because it comes plug-and-play with RPi

A compatible webcam – I used a generic USB powered one I had laying around and it worked

Sainsmart relay – I used a 4 channel relay because I have 2-button wall controllers, but a 2-channel would work if you just want to open a close the doors remotely.

Solderless breadboard – I used a solderless one because I can’t solder very well

Breadboard jumper wires – Male to Female

ULN2003APG integrated circuit – From everything I read, it’s not a good idea to hook your RPi directly to the relay

DC powered USB hub – This is only temporary so we can plug a keyboard and mouse in to program the WiFi adapter.

Wire – I used 22G doorbell wire because it fit nicely into the breadboard

Dynanic DNS Account – This is used to view the webcam stream and webpage outside of your network. I used http://freedns.afraid.org/



INSTRUCTIONS:


First, we have to install the operating system:

1. Install Wheezy using Win32DiscImager
-This site has great instructions on how to do it: http://elinux.org/RPi_Easy_SD_Card_Setup
-Be sure to change the password and increase the partition size

Second, we have to install the web server we’ll be using to operate the remote:

1. Install Webiopi (http://webiopi.trouch.com/)

This website has great instructions on how to install webiopi, it is easy to follow and understand:
http://raspberrypihelp.net/tutorials/15 ... h-tutorial
This is a great video on learning about webiopi that helped me tremendously:
http://www.youtube.com/watch?v=6RaBz01pi4E

2. log into the Pi using something like PuTTy

3. change to the html directory:
cd /home/pi/WebIOPi-0.6.0/htdocs (or whatever version of WebIOPi you have)

4. create the web page:
sudo nano index.html
-create the web page how you want it to look and feel using the above video as a guide

5. change the config file to work the way we want it to
sudo nano /etc/webiopi/config
-change GPIO pins that you're using to start as “OUT”: this puts them in a state that allows it to run the relay
-change the port to whatever port you want to forward (ex: 8352)
-take off “#” for the path to look for the doc-root under [HTTP] and change it to” /home/pi/WebIOPi-0.6.0/htdocs” (or whatever version of WebIOPi you have). This will make webiopi look to your newly created web page to display.


Now we want to install the webcam:

1. Plug in webcam

2. Install MJPEG-stream
I got instructions from here: http://www.raspberrypi.org/phpBB3/viewt ... 38&t=19661
1 sudo aptitude install libv4l-0
2 ls /dev/video0
3 wget http://www.bobtech.ro/get?download=36:mjpg-streamer-rpi
4 mv get\?download\=36\:mjpg-streamer-rpi mjpg-streamer-rpi.tar.gz
5 tar -zxvf mjpg-streamer-rpi.tar.gz
6 cd mjpg-streamer
7 You may need to adjust the settings in order for the video to display properly
sudo nano mjpg-streamer.sh
-change resolution to 640 X 420
-change frame rate to 5
-change last thing to “true”
-change port if you want to

3. Go back into the web page index created earlier and embed the video feed into your page by adding this line of HTML:
<img src=http://example.com:8083/?action=stream” width=”640” height=”420”/>
*make sure the web address is of your DNS account and not just the ip address*



Next, we set up the RPi boot sequence

-Use the following lines to make sure mjpeg-stream and webiopi start up at boot

*for webiopi to start at boot:
-sudo update-rc.d webiopi defaults


*for mjpg-streamer to start at boot (from: http://web.archive.org/web/201311120259 ... ock.co.uk/):
-put “webcam” file (file creation shown website above) into /etc/init.d
-chmod 755 /etc/init.d/webcam
-sudo update-rc.d webcam defaults

*to change webiopi password
-sudo webiopi-passwd



Now we work on the hardware

1. Port forward the ports for MJPEG-stream and webiopi on your router

2. Wire up relay according to http://www.raspberrypi.org/phpBB3/viewt ... 63&t=35155

wiring.jpg (55.7 KiB) Viewed 72802 times

3. Wire relay to the garage door
-You can go straight from the relay to the wall remote if you only have a 1-button remote. I ended up buying spare wall remotes and soldering the relay wires into that so I could control the door or the lights.

Finally, go to your webpage on your computer or smartphone and enjoy!

-Now you can go to the ip address and port of you Pi or go to the web address you set up with your Dynamic DNS account and see your creation!

[Sentinelace]

I use apple devices and don't want to use my garage door openers. How do you wire directly to the garage door unit and bypass the remotes? Also, what do you put in between the relay and pi?

[simonmcc]

rphgeek: Nice project, thanks for sharing, I considered doing something like that myself.

I have two projects where I drive the relay board directly from the GPIO pins, and that seems to work fine for me.

Sentinelace: As for bypassing the remotes, there should be an instruction manual for your garage door opener, and it should tell you how you can wire the relay directly to the controller.

[rphgeek]

Sentinelace: Thanks for checking out my project. Between the Pi and the relay, I used a ULN2003APG integrated circuit I got off eBay for $2. Everything I read said it wasn't a good idea to wire the GPIO directly to the relay, I guess there's a potential to fry the Pi if you aren't careful. It worked like a champ for me so I didn't question it. As for wiring directly to the garage door opener, I only used the remotes in between because my opener has the ability to open the door or only turn the light on. If you only wanted to use it to open the door, you should be able to simply wire the relay directly to the terminals on the opener, just like you would the wall remotes.

Simonmcc: Thanks for the compliment! I'm glad you liked it. I just hoped that I could save someone else the time and energy it took me to build it.

**Sorry it took me so long to respond, I didn't have a chance to check the forum for a while.

[barnyard]

Hello, I'm getting everything together to tackle this project myself. Any chance I could get a copy of your index.html as a go-by?

[rphgeek]

Hi Barnyard!

Sure, I'd be happy to get you a copy. Unfortunately, I don't have access to it at the moment, but in about a week I will and I will get it to you then. I hope that's cool.

Thanks!

[barnyard]

Thanks rphgeek, That'll be fine!

[barnyard]

Well, I've got everything working but the camera. I'm not sure what port number goes in the "webcam" file, and in index.html. My camera is on 8080, but I use 10000 externally through ddns, and port forward with my router. I understand the hardware aspect pretty well, but I'm an html/pi noob! I can access the camera with my phone in the browser just fine, I'm just lost on what goes where to get it streaming to my pi's webserver. Any ideas?


*edit:
I'm thinking I may have to go a different route than you did for the camera. After reading some more, it looks like these instructions are for a usb cam connected to the pi. Mine is actually my old Nexus One running the ip webcam app. Everything else works great though, so thanks for the write-up!

[gregb79]

Hi is there any chance of getting a copy of your files for this project

thank you

[rphgeek]

To Barnyard: I'm also a noob so I hope that I can help you out. LOL! The webcam I'm using is a USB cam attached to the pi, but the line I have at the bottom of my html code should be able to use any video feed that the pi can access. I've tried to attach my index.html file a few different ways, but the message boards won't allow any of the extensions I was using (html, txt, etc) so I'm just going to post another reply with the code in it. That way you can just copy and paste it into notepad and save it as "index.html" Some of the code might not actually work like some of the background color, but since the final product worked for me, I left it in there since I figured it didn't harm anything. Hopefully it helps!!

[rphgeek]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content = "height = device-height, width = device-width, initial-scale=1.0, user-scalable = yes" />
<title>Garage Door Opener</title>
<script type="text/javascript" src="/webiopi.js"></script>
<script type="text/javascript">
webiopi().ready(function() {

var content, button;
content = $("#content");


button = webiopi().createSequenceButton("sos", "DOOR 1", 7, 1000, "10");
content.append(button); // append button to content div


button = webiopi().createSequenceButton("sos", "LIGHT 1", 8, 1000, "10");
content.append(button);


button = webiopi().createSequenceButton("sos", "DOOR 2", 24, 1000, "10");
content.append(button);


button = webiopi().createSequenceButton("sos", "LIGHT 2", 25, 1000, "10");
content.append(button);

webiopi().refreshGPIO(true);
});


</script>
<style type="text/css">
button {


-moz-box-shadow: 3px 5px 0px 0px #1564ad;
-webkit-box-shadow: 3px 5px 0px 0px #1564ad;
box-shadow: 3px 5px 0px 0px #1564ad;

background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5));
background:-moz-linear-gradient(top, #79bbff 5%, #378de5 100%);
background:-webkit-linear-gradient(top, #79bbff 5%, #378de5 100%);
background:-o-linear-gradient(top, #79bbff 5%, #378de5 100%);
background:-ms-linear-gradient(top, #79bbff 5%, #378de5 100%);
background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5',GradientType=0);

background-color:#79bbff;

-moz-border-radius:42px;
-webkit-border-radius:42px;
border-radius:42px;

border:2px solid #337bc4;

display:inline;
color:#ffffff;
font-family:arial;
font-size:17px;
font-weight:bold;
padding:10px 21px;
text-decoration:none;
width: 124px;
height: 47px;
margin: 20px 20px 20px 20px;

text-shadow:0px 1px 0px #528ecc;

}
Button:hover {

background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff));
background:-moz-linear-gradient(top, #378de5 5%, #79bbff 100%);
background:-webkit-linear-gradient(top, #378de5 5%, #79bbff 100%);
background:-o-linear-gradient(top, #378de5 5%, #79bbff 100%);
background:-ms-linear-gradient(top, #378de5 5%, #79bbff 100%);
background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff',GradientType=0);

background-color:#378de5;
}
Button:active {
position:relative;
top:1px;
}
gpio7.LOW {
background-color: White;
}

gpio7.HIGH {
background-color: Red;
}

</style>

</head>
<body>
<div id="content" align="center"></div>

<CENTER><img src="http://YOUR_EXTERNAL_VIDEO_FEED/?action=stream" width="352" height="288"/></CENTER>

</body>
</html>

[door_bell]

Hi!

Awesome tutorial, I'm going to try and replicate what you have done - it's perfect for what I need.

I have one question though!

I see you are using GPIO pins 14,15,18 and 23 but don't see where they were assigned to the buttons in your webpage - where was that done and how?

This is literally my first project so go easy, although the rest of it is understood perfectly well - a well written guide!

Thanks

[rphgeek]

Hi door_bell,

Thanks for the kind words! This is actually my first project as well using the raspberry pi so I'm very glad to here that it's being useful to someone. As for the GPIO pins, the schematic that I included in the tutorial was actually taken from the forum that I linked to show how you should use the ULN2003 Integrated circuit to avoid any damage to your Pi. I actually used the GPIO pins 7, 8, 24 and 25 when I put my project together. You can see those referenced in the html in the lines defining the button sequence ("sos", "LIGHT 1", 8, 1000, "10"). I hope this helps!!

[mjavier]

First and foremost, thank you for the excellent tutorial/guide, this has been my introduction to the raspberry pi and little programming world, as my first project. If you call your self and idiot as you mentioned in the beginning I wonder where I stand, haha! Far behind you!
I followed your guide to the T, however I have encounter an issue with the relay, I got a 2 channel, but when I start the service and go to the web interface, which by the way is awesome too, I like the blue buttons, I get the relays ON and HIGH all the time. when I click the buttons I get them off momentarily and then they go back to ON and HIGH. I read somewhere that I need to initialize the pins as OUT and HIGH, but my question is, where do I do that? I found on the video you suggested for the weiopi setup and config that I need to add: webiopi().setFunction(7,"out"); almost at the beginning of the code for he index.html, is that correct? Or do I need to state it somewhere else? The video also mentions /etc/webiopi/config.

Any help will be appreciated.

My setup is just one door but my plan is to use the second relay channel for the ligh. I also got a raspberry pi camera. If you are interested, I will shoot you some pics once I finish with it.

Thanks again!

[rphgeek]

mjavier: Thank you so much for the kind words! I really do appreciate it! I was hoping others would like the project as much as I did making it.

As for your relay, I ran into the exact same problem that you did and also tried to fix it inside the html like it showed in the video, but I found the easiest way was to adjust the config file to start the proper GPIO pins in the "OUT" position. Here's how to do that:

-use the command "sudo nano /etc/webiopi/config"
-the very first field should be labeled [GPIO]
-in this field I put the following lines:
7 = OUT
8 = OUT
24 = OUT
25 = OUT

This made sure that the relay started in the low position and didn't click to high unless I had the GPIO do it for me.

Let me know if this helps!

[mjavier]

Wow! that was a fast response, I thank you for that. I originally tried:

7 = OUT 1
8 = OUT 1
(I'm just using 7 and 8 only)
I changed to:

7 = OUT
8 = OUT

As you suggested.

I do get the relays to start on low but when I click on the buttons to test them they energize the relay and they stay like that, they won't go back to low, stay energized, any ideas?

As far as my pin configuration raspberry to relay:
2 5v - VCC
6 Gnd - Gnd
24 or GPIO8 - IN2
26 or GPIO7 - IN1

This is what my webiopi config show in the GPIO section:

[GPIO]
# Initialize following GPIOs with given function and optional value
# This is used during WebIOPi start process
#21 = IN
#23 = OUT 0
#24 = OUT 1
#25 = OUT 1
7 = OUT
8 = OUT

Thanks again.

-Miguel

This is my index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content = "height = device-height, width = device-width, initial-scale=1.0, user-scalable = yes" />
<title>Garage Door Opener</title>
<script type="text/javascript" src="/webiopi.js"></script>
<script type="text/javascript">
webiopi().ready(function() {

var content, button;
content = $("#content");


button = webiopi().createSequenceButton("sos", "DOOR", 7, 1000, "10");
content.append(button); // append button to content div


button = webiopi().createSequenceButton("sos", "LIGHT", 8, 1000, "10");
content.append(button);

webiopi().refreshGPIO(true);
});


</script>
<style type="text/css">
button {


-moz-box-shadow: 3px 5px 0px 0px #1564ad;
-webkit-box-shadow: 3px 5px 0px 0px #1564ad;
box-shadow: 3px 5px 0px 0px #1564ad;

background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5));
background:-moz-linear-gradient(top, #79bbff 5%, #378de5 100%);
background:-webkit-linear-gradient(top, #79bbff 5%, #378de5 100%);
background:-o-linear-gradient(top, #79bbff 5%, #378de5 100%);
background:-ms-linear-gradient(top, #79bbff 5%, #378de5 100%);
background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5',GradientType=0);

background-color:#79bbff;

-moz-border-radius:42px;
-webkit-border-radius:42px;
border-radius:42px;

border:2px solid #337bc4;

display:inline;
color:#ffffff;
font-family:arial;
font-size:17px;
font-weight:bold;
padding:10px 21px;
text-decoration:none;
width: 124px;
height: 47px;
margin: 20px 20px 20px 20px;

text-shadow:0px 1px 0px #528ecc;

}
Button:hover {

background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff));
background:-moz-linear-gradient(top, #378de5 5%, #79bbff 100%);
background:-webkit-linear-gradient(top, #378de5 5%, #79bbff 100%);
background:-o-linear-gradient(top, #378de5 5%, #79bbff 100%);
background:-ms-linear-gradient(top, #378de5 5%, #79bbff 100%);
background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff',GradientType=0);

background-color:#378de5;
}
Button:active {
position:relative;
top:1px;
}
gpio7.LOW {
background-color: White;
}

gpio7.HIGH {
background-color: Red;
}

</style>

</head>
<body>
<div id="content" align="center"></div>

<CENTER><img src="http://YOUR_EXTERNAL_VIDEO_FEED/?action=stream" width="352" height="288"/></CENTER>

</body>
</html>

[rphgeek]

Hi Miguel!
What I would try doing first is adding a new plain button in the html just to test the GPIO to turn on and off the relay like this:

button = webiopi().createSequenceButton(8, "LIGHT");
content.append(button);

-hitting it once should turn the relay on, hitting it again should turn it off. If that doesn't work, I would probably be inclined to start from scratch (I know, not exactly the most efficient way of doing things, but it should be a lot quicker the second time around, as it was for me when I started from scratch a few times. lol!) and using the original webpage that comes preinstalled with webiopi (http://code.google.com/p/webiopi/wiki/INSTALL) to try to set the relay on and off that way. If that still doesn't work, I would have to think the issues lies in the wiring and not the html code.

Let me know if changing the html code works and we can travel down that path. If not, we'll look into your wiring scheme.

Thanks!
Zak

[mjavier]

Zak, I'm happy to report on this project. After spending sometime reviewing the html code, finally zero'd down to the sequence button portion of the code, the 'sos' button shows the instruction for the GPIO, duration and sequence (8, 1000, "10") turns out that I just needed to change the "10" to "01" as this is the sequence that tell the relay what to do (I think). That was it, After that it worked like a charm. I'm currently using a raspberry pi camera, this camera does not have a wide view angle but it does what I needed and it does it well.

Tried to add some pics but they are too big.

Thanks man!

[rphgeek]

Miguel,

That's awesome! I'm glad to hear it was just the code and not something more difficult. I feel the same way about the usb camera. Mine is just an old one I found in my closet. The angle isn't wide and the detail isn't perfect, but it does exactly what I need it to do. I'm bummed that I didn't get to see your pics, but happy to hear that you got it up and running.

Nice job!!

Zak

[mjavier]

Zak,

I have created a link to so you can see at least what the project looks like https://www.dropbox.com/s/misee9ltlqcex ... .57.11.jpg and https://www.dropbox.com/s/xffweo70eqbce ... 52edtd.jpg

I wanted to know if you are experiencing any issues with mjpg-streamer raspistill, mine for some reason stops after some time, at first I thought it was the -t 9999999 argument but according to the documentation that means indefinite, sometimes it will stop after a day or two, this is what is running:

raspistill --nopreview -w 640 -h 480 -q 50 -o /tmp/stream/pic.jpg -tl 100 -t 9999999 -th 0:0:0 &

And:

LD_LIBRARY_PATH=/usr/local/lib mjpg_streamer -i "input_file.so -f /tmp/stream -n pic.jpg" -o "output_http.so -w /usr/local/www" &

Thanks!

[rphgeek]

Thanks for the pics! Nice set up! I looks like it was professionally installed!

As for your camera, from what I was reading, the raspistill is more for still images rather than a video stream. It looks like a good solution is to have the camera run in a timelapse format to get the video streaming to work properly. There's a topic on it here:

http://www.raspberrypi.org/phpBB3/viewtopic.php?t=45178

Let me know if this helps!

Zak

[mmmm-pi]

I'm doing the same project and quite enjoying it. My issue is that when the Pi boots, the GPIO pins go low and that my relays go high. I can turn them on and off with webiopi code easily enough, but it's a real problem if the relay (a cheap SDR 2-relay board) goes "high" immediately.
It looks like the only difference between my circuit design and yours is the IC. From the video it looks like we have a similar relay board. Is the IC the reason why your relays don't switch on as soon as your Pi starts?

Thanks

[mmmm-pi]

Sorry, my last post wasn't very clear.
I figured out the issue. I had to modift my /etc/webiopi/config file and put a zero on the end of the pin statement like this:
9 = OUT 0
Now when my PI boots and I call the webiopi page the relay does not trigger.

Hope that helps someone out there.

[008027]

Hi ! guys I bought the pi i've been playing with it I wanted to build a garage door opener .when i try to run the command after installing webiopi
sudo update-rc.d webiopi default it returns an error insscrv: warning: script 'mathkernel' missing LSB tags and overrides
I don't have much knowledge about linux commands please help me solve this thanks !

[rgviewer]

I am having problems seeing video outside of my network. I got everything else working great. I can open/close door and turn on/off light from both inside and outside of network. I can see video while only on my home network. I think my problem lies with either my index.html or with mjpg-streamer.sh or even my ports on my router not set correctly.
My pi is at 192.168.1.193:8000
my dynds is rgxxxxxx.dynds.org
My port for my cam in on 8080 (set in mjpg-streamer.sh)

In my index.html I have tried:


<CENTER><img src="http://192.168.1.193:8080/?action=stream" width="352" height="288"/></CENTER>
(this setting lets me see video but only on my home network)

<CENTER><img src="http://rgxxxxx.dynds.org:8080/?action=stream" width="352" height="288"/></CENTER>
(can't see video inside or outside of network)

<CENTER><img src="http://rgxxxxx.dynds.org:8081/?action=stream" width="352" height="288"/></CENTER>
(can't see video inside or outside of network, 8081 is port forwarded in router from port 8080)

Anyone have any idea what I am missing?

Thnaks