192 Comments

  1. Les

    Hello
    I could use some help. I was good up till the end. Switch works and I can trigger the relay, but on the webpage all I get is a Grey screen with “Door Status” on the top, no buttons or doge meme. I can see all the files moved to the folder/usr/share/webiopi/htdocs. Would really like to get this working properly.
    Greatly appreciated for your time and effort.

    Reply

    • Les,

      Do you have javascript enabled in your web browser? The page is heavily dependent on javascript, so double-check that and reply back.

      Reply
      • Jay

        Chris,

        I am having the same problem as Les. I get a gray screen with “Door Status” at the top. That is all. I have tried Chrome, IE, Firefox, and mobile browsers. They all do the same thing.

        Reply
      • Larisa

        The Raspberry Pi is without a doubt sheitomng truly innovative. I have heard about these micro-computers used in several projects and experiments. It may not be the specs but its the size and compact components that is mind blowing. I believe that will not only continue to capture everyday customers but people who want to take this to the next stage by tinkering with it to perform other tasks. Just as you mentioned with Google’s Project Loon. This will be a stepping stone for many other things soon to come.

        Reply

    • Alright, I pulled the garage.html from my current working setup and uploaded it for you guys:
      http://www.driscocity.com/rpi/garagenew.html

      Make sure you’re running that file from your Pi, not from my site (driscocity.com).

      Upload that to your Pi and give it a shot. If you still don’t get anything, post back and we can try another solution. Also, are you both using the same GPIO pins as stated in the write up?

      Reply
      • Jay

        I am using the same GPIO7 for the relay, but I haven’t even hooked up the input switch yet. Is the HTML dependent on the switch being connected. I just figured it would report as open.

        Reply
      • Marulam

        HelloI copied your files into my Apache 2 dir, /var/www/html/CPUStatusI atpmetted to follow your instructions with visudo and addedwww-data ALL=(ALL) NOPASSWD: ALLat the bottom.When i browse to index.php I see a background image but nothing else.There is probably some permission or something I have missed. Can you point me in the right direction?The page looks really nifty.John

        Reply
  2. Jay

    I figured out your problem. In your HTML you are referencing the wibiopi java script as the wrong default name.

    Your code says this.

    It should say this.

    Also, do you need to us the pull up resistors? You can use another pin that has an internal pull up resistor to 3.3v like GPIO2 or GPIO3.

    Reply
  3. Jay

    Sorry the code did show.

    You file name:
    webiopimin.js

    Default file name:
    webiopi.js

    Reply

    • Jay,

      Thanks for pointing that out – forgot I had run the javascript files through a minimizer to reduce page size. I’ve updated the original garage.html file in the howto to point to the original webiopi.js file.

      Sorry for the headache!

      Reply
  4. Chris

    Awesome explanation. How do you get back into the created html to edit or add something to the web app?

    Reply

    • Chris,

      I use FileZilla FTP Client to connect via SFTP to the Pi. You use the same SSH username and password when connecting. You’d navigate to /usr/share/webiopi/htdocs in FileZilla, download the garage.html file to your computer, edit it, and then upload it again. If you get a permission denied when trying to overwrite the file, you’ll probably want to log into the pi via root instead (you’ll need to set the password first, let me know if you need help with that).

      Reply
      • Chris

        Great! I was able to pull the file from my Pi using Filezilla. I’m just playing around with it and trying to understand everything that’s going on. My first project with a Pi and has really been a fun learning experience. I haven’t tried putting it back in yet, but will let you know if I run into problems. I probably won’t even put a new file back in though.

        One quick question, is there any issue with a having the Pi running in a garage when it’s a 100 degrees outside or is it able to handle a hot garage?

        Reply

        • Can’t say I’ve run into any problems in my garage thus far on 90+ degree days. I put a small heatsink on the Raspberry Pi’s CPU like this one to help keep the CPU running a little cooler.

          Reply
  5. Walter Ahlgrim

    I like your project.
    I would like to see a few bells and whistles before I build one.

    I am not a software guy how difficult would each be to add?

    1 A log of the last 5 door opening and or closings with time and date displayed on the phone.

    2 A log of the last 100 door opening and or closings with time and date.

    3 I want to get a text or Email any time the door is open more than XX number minutes.

    4 I want a alarm bell to for XX number seconds if the door is open more than XX number minutes between XX:XX time and XX:XX time. All the X numbers should be user adjustable.

    Walt

    Reply

    • Hi Walter,

      I think you could probably accomplish what you’re looking for, but you’d probably have to write some python scripts and integrate that with WebIOPi (or maybe some other software). Unfortunately, this is not something I’ve tried to tackle so I’m honestly not sure what direction to point you.

      Reply
      • Dave

        Logging Garage door opens and closes.

        Create file /usr/bin/garage_status, with following code:

        ————————————————————
        #! /bin/sh
        # Loop the whole script
        date >> /var/log/garage.log
        date >> /usr/share/webiopi/htdocs/garage.log
        echo “Garage Door Status started” >> /var/log/garage.log
        echo “Garage Door Status started” >> /usr/share/webiopi/htdocs/garage.log

        echo “21” > /sys/class/gpio/export
        while true

        do
        STATE_PRV=`cat /usr/bin/garage_state`
        #echo “PRV” $STATE_PRV
        STATE_CUR=`cat /sys/class/gpio/gpio21/value`
        #echo “CUR” $STATE_CUR
        if [ “$STATE_PRV” = “$STATE_CUR” ]
        then
        sleep 10
        else
        date >> /var/log/garage.log
        echo “Garage Door State changed to” $STATE_CUR >> /var/log/garage.log
        echo ” 1=Open, 0=Closed” >> /var/log/garage.log
        STR1=`date +%x-%X`
        echo $STR1 “state” $STATE_CUR “1=Op,0=Cl” >> /usr/share/webiopi/htdocs/garage.
        log
        echo $STATE_CUR > /usr/bin/garage_state
        fi
        date
        done
        ————————————————————–

        I used GPIO 21 for magnetic switch to monitor door open/closed. Change script in 2 places if you
        use a different port.

        Make this script executable:
        chmod 777 /usr/bin/garage_status

        Run this script
        /usr/bin/garage_status

        This script sends door open/close info to /var/log/garage.log & /usr/share/webiopi/htdocs/garage.log

        In /etc/rc.local, add the following line just above “exit 0”, to have garage_status startup on bootup.
        /usr/bin/garage_status > /dev/null 2>&1 &

        You should be able to browse to http://192.168.0.240:8000/garage.log to see log on phone.

        Reply
  6. Re

    Hello, why is GPIO7 IN? not out
    to art is not controlled by relays and do not know why.

    Reply
  7. Re

    rebooting raspberry, and relay not work, i need to go to change the header gpio- gpio7 change in> out, click gpio7 , came back running relay , but does not work and restart rasberry. What I’m doing wrong?

    Reply
    • Evan

      I am getting the same issue when you reboot the pi. The relay stops working and even going to the GPIO Header debug page is not triggering the relay anymore.

      Reply
  8. Remka

    hello, restarted the raspberry, the relay does not work, restart the Rasberry, return to change the GPIO GPIO header in 7 out hit GPIO, the program works. What I’m doing wrong? or where a mistake? Can you help?

    Reply
  9. George

    Thank you for the excellent and clear instructions. I was able to set this up with a few modifications; would like to add one more feature. I have a second relay on pin 18 gpio 24. Looking for assistance on adding html code to place a button at the bottom of the current interface (beneath the yes no buttons) to show the relay status and activate the relay to turn the light on/off? Any help is appreciated.

    Reply

    • Hi George,

      I’m not sure if you’d be able to determine the relay status from webiopi, since you’re just sending a signal to it for the toggle action. I could be wrong, of course, but I can’t think of a way to do it.

      Reply
  10. Peter

    Is it possible to add camera functionality to the webinterface like if I dont trust the switch and would like to see with the camera if the door is open or closed ?

    Reply
  11. Peter

    I’ve followed your guide and everything works except the “Door Status” bar. It goes from Closed to Open to Closed and keeps doing that without me doing anything.

    Any ideas what’s wrong ?

    Reply
    • Peter

      Nevermind my last post. It was a cable issue and it’s fixed.

      If only someone is good at programming so I can insert having my raspberry pi camera implemented as well !

      Reply
  12. Bill

    Great tutorial. Everything worked. Only thing I didn’t use was the USB to serial TTL adapter ( I don’t know why you used it).
    The only changes i am going to make is to replace dog picture with the live feed from Motion since the PI was in the garage as a security camera. And i want to put a Crack button to have the door open one foot in the spring for fresh air.

    Again good job on tutorial.

    Reply


  13. Jeff

    Thanks for the tutorial – I just finished installing my garage door opener today! I put the Pi and relay in a small weather-resistant case, which they fit in with only a bit of modification required. Like the poster above, I didn’t use the TTL adapter, but had no difficulties downloading and configuring software using a wireless network connection and PuTTY. I also configured my router to reserve the IP of my Pi rather than mess with the Pi’s network config to get a static IP. BTW, the dog pic is cute, but how can I modify the HTML file to use another pic, if I should choose to do so?

    Reply

    • Hi Jeff,

      Glad the tutorial was beneficial!

      If you want to change the dog face, there are a few places I reference it. I’m sorry if this explanation is overly wordy, but I want to explain the image process. The first place you’ll want to look is at line 104 of the garage.html file. You’ll see this line:

      background: #808080 url(‘doge-static.png’) no-repeat center bottom;

      This line is for the dog face before the button is pressed. You could just change the doge-static.png to whatever image you want, just make sure the filename is inside the single parenthesis. Also, if the image is not in the same folder as your html file, you’ll need to reference the correct path. Alternatively, if you didn’t want a picture at all, just delete everything after the #808080 up to the semicolon.

      When the button is pressed and you select ‘Yes’ to the open/close confirmation, there is a second image file that loads in place of the above picture. This is at line 44, which reads:

      document.getElementById(‘button’).style.background = “#808080 url(‘/doge-action.png’) no-repeat center bottom”;

      Again, if you want to change this second image, you would just replace the filename with whatever image you want. A few lines down from line 44, you’ll see this line:

      setTimeout(dogeNormal, 3000);

      This calls a javascript function after 3 seconds at line 69, which should read:

      document.getElementById(‘button’).style.background = “#808080 url(‘/doge-static.png’) no-repeat center bottom”;

      This is the last place the picture is referenced. All it’s doing is going back to the original image after the ‘animated’ frame.

      I uploaded a file with no image at http://www.driscocity.com/rpi/garage-noimage.html if that helps at all. I commented all the lines out so you can see the difference between the 2 files.

      Hope this helps, and sorry if I ramble a bit. It’s late and I should sleep.

      Reply
  14. Mike

    Will phone cable work instead of ethernet cable for the magnet connection?

    Reply

    • I would certainly think so. I think I’ve heard of people using regular doorbell wire for the sensor connection.

      Reply
  15. Jackson

    I have 2 garage doors. I’m sure I can hook one relay to one door and the other to door number 2. My question is: What would it take to have two buttons on the page and two status notations on the page?

    Reply

    • Hi Jackson,

      It shouldn’t take much more than some extra HTML and JavaScript to handle the added GPIO pins. I actually made a demo page for a friend of mine that has 2 garage doors:

      2 doors

      If you told me what GPIO pins you would be using for the relay and magnetic switch I could modify the HTML file and upload it, or you can click here to download (right-click and save as) tinker with the file that I used.

      Reply
      • Bogdan

        Hello,

        I have the same question and I have the relay connected to GPIO 23 and 24. I dont have the magnet switch yet, but hope to get them soon. Is it possible for you to write the code and html for 2 garage door for me please? Also is it possible to connect the two switches without the resistors and what GPIO pins can i use?

        Thank you

        Reply

      • I downloaded your file for two doors. Only the right one works on my system. I have a RPi 2. Can you change the doors to use GPIO2 and 3 for me. The switch(s) can stay the same.

        Thanks alot!

        Reply
  16. Keir

    Hi, I liked your blog a lot, it’s inspired me to buy a relay and connect it to my Pi, I got the satisfying click and the LED on the modlue so thought I was well on my way.
    But I came across some confusion on the GPIO circuitry about which pins can be used and dug a bit deeper. It seems that the 2nd, smaller 3 pin connector on the relay board has a jumper which connects the VCC on the 5v relay activation circuit to the VCC on logic circuit. If I’ve understood correctly it means that the GPIO pins are getting fed 5v and not 3.3v.
    Most other examples of using these relay boards have connections like yours, so I guess there’s been no damage, but wondered if my understanding is correct?

    Reply
  17. Pierantonio

    Hello Chris!
    Thanks for this project, i love it!
    I have a problem, i had follow every step of this guide but i don’t know why my relay didn’t work.
    With the webiopi gpio-header when i press the gpio 7 in out mode it works perfectly!
    What’s wrong? could you help me please?
    I have a raspbian with last webiopi, i tried to change gpio pins in garage.html for try but nothing..
    thanks
    Pierantonio

    Reply

    • Hi Pierantonio,

      Sorry for my late reply – did you ever get this working, or is it still not working properly?

      Reply
  18. Josh

    Chris,
    Thank you for taking the time to write this guide. I was able to get everything setup without too many issues. I added a second sensor to detect the status of a back door in the garage and was able to figure out how to add a status button to the HTML, but am stuck on the CSS. My second button works, but is partially hidden behind the main Garage Door button. I need to move the Garage Door button and confirmation prompt down to allow space for the new button, but can’t figure out the CSS. Any help or guidance on this would be appreciated.

    Thanks,
    Josh

    GPIO18 = Relay
    GPIO23 = Garage Door Sensor
    GPIO22 = Rear Door Sensor

    body{font-family:Arial,Helvetica,Sans-Serif;padding:0px;margin:0px;background:#CCCCCC;}#content{width:300px;height:250px;}button{display:block;margin:10px 10px;margin-left:auto;margin-right:auto;padding:0px;width:300px;height:50px;font-size:24pt;font-weight:bold;color:black;border-radius:10px!important;}button#button{height:250px!important;background:#808080 url(‘doge-static.png’) no-repeat center bottom;border-radius:10px!important;cursor:pointer!important;}#gpio22.LOW{color:#FFFFFF!important;}#gpio22.HIGH{color:#FFFFFF!important;}#gpio23.LOW{color:#FFFFFF!important;}#gpio23.HIGH{color:#FFFFFF!important;}#header{margin-left:auto;margin-right:auto;margin-top:0px!important;padding-top:0px!important;}#confirmText{margin-left:auto;margin-right:auto;padding:0px;margin-top:0px;visibility:hidden;width:300px;}h2{text-align:center;margin-top:0px!important;margin-bottom:10px!important;}#confirmBox{height:60px;width:300px;margin-left:auto;margin-right:auto;position:relative;visibility:hidden;}#yes{background-color:green;float:left;}#no{background-color:red;float:right;}.confirmButton{border:3px solid #000000;border-radius:10px;cursor:pointer;height:50px;width:130px;font-size:24pt;font-weight:bold;text-align:center;line-height:50px;}#openCloseButton{width:300px;height:60px;}

    Reply
  19. Tony Thompson

    Hi Chris, brilliant tutorial,

    just a couple of questions, I am trying to move all the buttons on the web page so they are all aligned along the top of the page to look something like the following ( with are you sure in smaller font) and yes no still hidden until OPEN / ClOSE pressed

    DOOR STATUS OPEN / ClOSE YES are you sure NO

    I have had partial success but cannot get them all aligned at the top of the page, is there something you could do to assist or point me in the right direction ? I have played with all the css stuff at the bottom of the code and can’t get it aligned, is it something webiopi is doing ?

    many thanks for your help

    Tony

    ( I can mail you my page if needed)

    Reply
  20. Andrew

    Thanks for the tutorial, easy to follow and I got it to work on the first shot. I am starting to modify some of the .html file, so that i can implement two buttons.

    What is this “CloudFlare” reference in the code?

    Appreciate your time in putting this tutorial together.

    Reply

    • Hi Andrew,

      Glad the tutorial worked well for you!

      CloudFlare is a CDN my host uses to help with speed and security of the site. If you’re trying to view http://www.driscocity.com/rpi/garage.html directly in your web browser you’ll probably get some CloudFlare code in there, but if you use wget from the command line to download the file then the CloudFlare code should not show up.

      Reply
      • Andrew

        Awesome thanks for the response!

        I am very new to CSS, is there a technique to edit that portion of the code? I am finding it difficult to follow with all the syntax on one line.

        Thanks again!

        Reply
        • Andrew

          Nevermind that last question, i ended up reading up more about CSS at W3 school. Made an external .css file for easier editing.

          Reply
  21. mark

    thank you for the tutorial very neat I’ve got everything connected and when I access the website at 8000 all of the blocks are grey with no in and out on them so I’m not able to control the GPIO circuits. any help would be appreciated. when I use your wiring diagram the LED lights on the two channel relay do not come on but when I use another persons wiring diagram with 4 wires the LED lights come on but I still have no GPIO blocks with any text in them

    Reply

    • Hi Mark,

      It sounds like maybe you have javascript disabled in your browser. Can you try a different browser, or make sure you have javascript enabled?

      Reply
      • Hash

        I have the same problem with the B+, I’ve tried different browsers but nothing seems to work.

        Reply
  22. peppe

    Hi, great tut! Unfortunately I’ve the same problem as Pierantonio. I checked every step twice and did the whole tutorial 5 times hoping I did something wrong and tried both versions Webiopi 0.7.0 and 0.7.1 without success. Could you please help me out?

    Reply
  23. Darin

    Thanks for this tutorial, it works great.

    I added some features. I wrote a python script that watches the sensor. When it detects the door is open, it emails you after 10 minutes and after 50 minutes of being open. It also closes the door automatically after 60 minutes. (You could, of course implement either feature separately, and tweak the specifics.) I’d be happy to share the script if you let me know how best to post it.

    One thing I’m trying to add is a feature where the RPi reads the status of the beam sensor at the bottom of the door (the one that stops the door from closing when something’s in the way). I’d then re-write the script above to close the door after 60 minutes of no activity crossing the door — that way if I want the door open for a long time because I’m working in the yard, it won’t close on me. I tried to set that up, but I got some errors. I connected one terminal of the sensor to a new GPIO pin, and the other to ground (shared with the relay). Do you (or does anyone who reads your site) have any suggestions?

    Thanks again.

    Reply
      • Michael Chang

        Hi Chris,

        Have you got Darin’s reply on sharing the Python script to auto close the garage / sending txt after certain amount of time?

        I followed your excellent tutorial and got the Pi3 and switch to work with the relay. Also tried the switch at my desk by playing with them. I can get the garage door web page to change status when pulling the switch receiver apart or make them close. Next step is physically mount them into the garage.

        Thanks,
        Michael

        Reply
    • Neil

      Hi Darin,

      I would very much appreciate it if you could share your script for sending emails, etc (nmacle01 AT gmail DOT com).

      I, too, have tried to read the status of the IR Beam Sensor to be able to determine if it’s safe to close the door remotely or programmatically after a set amount of time. If you still have those two wires connected to your Pi, I would recommend removing them. I can only assume it’s the same on most garage door openers (GDO), but those IR Beam sensors are powered (5V-12V) so you certainly don’t want 5V (or maybe even 12V, depending on your GDO model) running into your GPIO Input Pin that’s only rated for 3.3V!

      On my Genie Excelerator GDO, pins 3 and 4 send out 12V signal to the Safe-T-Beam Sensors. When the receiver detects the beam (no obstructions) it somehow modulates the 12V signal which the GDO picks up and knows there’s no obstruction, allowing the door to close. And when the receiver doesn’t see the IR beam (there’s an obstruction) there’s no modulation in the signal and the GDO knows the signal is the same as what it’s outputting, so there must be an obstruction, and it doesn’t allow the door to close. I tried opening the beam transmitter and receiver to see if I could “piggy-back” on some internal switch or relay or something, but had no luck. If you, or anyone else, figures it out, please let me know!! 🙂 This video explains how this works: https://www.youtube.com/watch?v=GbmufXgpl14

      If you’re interested in any scripts or maybe my wiring diagram I’d be happy to share…

      Thanks,

      Neil

      Reply
  24. Derek

    Chris
    Many thanks for the tutorial.
    My first project with a raspberry pi.
    It works a treat and I am well chuffed.
    I would like an extra sensor to check on whether the back door to the garage is open or shut.
    But I have not got a clue when it comes to editing html.
    I did download Kompozer to see if I could have a go at adding another sensor.
    But the preview shows everything all over the place, and not how it looks for real.
    So, I am unable to get any further.
    A bit of a nerve I know but I am wondering whether Josh might be willing to share his html for an extra sensor.
    Regards Derek

    Reply
      • Suresh

        Hi Chris,
        Great tutorial. I know nothing about programming and I don’t qualify as an idiot. I found your tutorial and am trying to follow your steps. I have the same problem with the WebIOPi-0.7.0.tar.gz. It downloads without any problem but your try to unzip, it gives the following error.

        gzip: stdin: not in gzip format
        tar: Child returned status 1
        tar: Error is not recoverable: exiting now

        Can you please help?

        Reply
        • Suresh

          By the way, I checked file format using file filename.tar.gz and it returns a HTML document, ASCII text

          Reply
  25. Jason

    I’m having trouble with the relays. With only three wires, it’s pretty simple! But I cannot get the relay to trigger. I have reviewed all of the connections and updated the Java, but it still does not trigger the relay. I am looking for some advice on where to start troubleshooting….

    Reply
  26. Jason

    Yes, the red light is on as soon as I apply power. Well, it’s pinkish, really.
    Jason

    Reply
    • Jason

      I started playing around with it this morning. I can get it to work on GPIO2 on the Raspberry, but not on 7 as the instructions state. Is this a configuration issue in the PI?

      Reply
  27. Sam

    Wonderful tutorial. Appreciate your initiative. Easy to follow for someone with very little computer or software background. But I have run into a problem with the WebIOPi. The GPIO header is greyed out. I don’t see any IN or OUT. Maybe the problem could be because I am using the Pi 2 (new model). Can you correct me if I am wrong? Will this tutorial work for the new version as well? TIA.

    Reply
    • Bogdan

      hi sam

      follow this steps

      1.python/native/cpuinfo.c,change “BCM2708” to “BCM2709”;
      2.python/native/gpio.c, change “#define BCM2708_PERI_BASE 0x20000000” to “#define BCM2708_PERI_BASE 0x3f000000”;
      3.run setup.sh again.

      Reply
  28. Jason

    Hi Chris, I have it all up and running, the Pi is installed in the house, the relay is wired to the door button by the back door (snaked through the wall so it is not visible), and the magnet sensor is tucked away at the top of the door (again, all wires are inside walls) and it all works great!

    Thanks a bunch for the parts list and the tutorial!

    I would like to have it send an e-mail when the status changes, do you have any advise or instructions on this?
    Thanks,
    Jason

    Reply
    • Sam

      Hi Jason,
      I have the same as you had earlier. Red light on the relay lights up but no trigger. Can you share how you solved the issue?
      TIA

      Reply
      • jason

        I moved the sensor from gpio7 to gpio2 and then changed the 7 to 2 in all three places in the html.

        Reply
        • Sam

          Apologize for the delayed response. Changing to GPIO2 didn’t help either. I am actually just trying to check if the relay works using a LED. The red light on the relay lights up and I hear a click but the LED does not light up. Not sure if I am doing something wrong with the connections or if I have a bad relay. Thanks for help anyway.

          Reply
  29. Bogdan

    Hello,

    I have two garage doors and I have the relay connected to GPIO 23 and 24. I dont have the magnet switch yet, but hope to get them soon. Is it possible for you to write the code and html for 2 garage door for me please? Also is it possible to connect the two switches without the resistors and what GPIO pins can i use?

    Thank you

    Reply
  30. Gavino

    Im stuck at the part where you set up the webiopi and connect the wires to the relay… the GPIO status isnt showing on the website… not even sure if thats the right terminology but the outer boxes where it should say IN or OUT are just blank… also the buttons with the numbers 1-26 dont toggle when i click them, they just become a lighter color while i click them….. im a total noob btw if it wasnt already obvious

    Reply
    • Sam

      I had a similar problem because I used the pi2. Once the webiIOPi is modified as mentioned above the issue was solved.

      Reply
    • Gavino

      Yup, ended up ordering a RPi 1 B+ and it worked flawlessly. Webiopi isnt compatible with pi2 as it is now.

      Reply
  31. Gavino

    Btw i did check earlier comments and javascript IS enabled

    Reply

  32. thorsvind

    Hi ! Thank you for this guide, but I’m stuck at the last step. I see the gpio headers on m browser, I can turn 26 in into 26 out and then when I press the number 26 itself my relay clicks, no problem with that. But as soon as I try clicking the “garage door” button using the garage.html, it just turns the 26 out into 26 in again and then nothing happens, no click on the relay.
    Is there something I did wrong ? Thank you for any kind of help.

    Reply

    • Are you using the new Pi? My relay lights up and I hear a click but I do not get a trigger. Maybe the code does not work with the new pi.

      Reply

  33. Anyone had luck setting this up with the new Raspberry pi 2?

    Reply
    • Bucko

      Yes – use the instructions from Bogdan above. Worked perfectly on my Pi 2 after making those changes.

      Reply
    • Bucko

      I have successfully used the Pi 2. Follow Bogdan’s instructions above for setting up webiopi to work on the Pi 2. I customized the html for my application, but it works like a charm.

      Reply
  34. Todd

    Yes – use the instructions from Bogdan above. Works perfectly fine for me on a Pi2.

    Reply

    • Thanks Bucko/Todd for confirming. I used Bogdan’s instructions to setup the webiopi. I have not connected the pi to the garage door opener but want to test it with an LED. I have connected an LED to the relay switch. When I click on the button, I see a red light on the relay and hear click but the LED does not light up? Am I doing something wrong?

      Reply
      • Todd

        Sounds like you’ve gotten webiopi working, especially if you can hear the relay switching and the relay’s LED is illuminating. Are you sure you’ve connected the LED properly (pulled up through a resistor to 5V with the relay contacts closing to GND on the bottom of the LED)?

        Reply

        • Thanks Todd. I think that was the problem. I guess my connection to the LED was not right as you suggest. I connected directly to the garage door opener and it worked. All this while I thought the relay was not working. Thanks a lot.

          Reply
  35. Rick

    Hey thanks a LOT for this, this is something that I have been doing for a while now, just didn’t know how.I got it all configured, and working with ease, except WIFI, I have an open network that is locked down to MAC addresses, and I can’t for the life of me, get it to connect. I am just going to use a CAT5 and run it out there.

    Unless you have any ideas.

    I haven’t got it connected to the door yet, but everything works with the multimeter,and online (using dyndns, and port forwarding)

    Again, thanks!!

    Reply
  36. Rick

    Ok, need some help got it all up and running, and connected to my door, however I guess I bought a normally closed switch, when my door is opens closed, when it closed it says it’s open, is there anyway I can fix this within the HTML or do I need to buy a new switch.

    Reply
  37. Rick

    Ok, I got the open/closed switch within the HTML file, but now when it says CLOSED it is the orange button, I want it to be orange with it is open, can you help?

    Thanks

    Reply
  38. Avnish

    Chris,
    Thanks for the excellent tutorial. I am using the 2 door garage html file you have provided and implemented it on a raspberry pi2. Everything is working fine however I needed some help from you on html coding. I want to put a camera feed below all the buttons therefore I wanted to move the yes/no confirmation buttons on the top where the door status buttons are located. Basically, door status buttons should show normally on the top but when someone clicks on the left or right door buttons the door status buttons should disappear and replaced by the yes/no buttons. When someone makes a selection of either the yes/no should disappear and replaced back with the door status buttons. Reason I want to do is to have space for the camera feed without scrolling up or down on my phone. I would really appreciate your help in this regard. Thanks

    Reply
  39. Chris Daley

    Thanks for the great info, I have rigged up two garages based on this, but had a question as to how the actual resisters were determined. I also had a question about the relay.

    For example, GPIO17 for the magetic switch can supply 0v or 3.3V. You also have the hook up to the 3.3V power supply. How did you know to use those specific resisters for both of them, and how does GPIO17 interpet the data from the magentic switch?

    Also, the relay has its own 5v power supply, I get that, the GPIO pin to power it just throws power to the relay and nothing else?

    Thank you for the clarification.

    Reply
  40. Jim

    Went to Radio Shack to pick up some resistors and they wanted to know how many watts? I’m new to this and don’t have a clue what to use. Can you help? I have everything wired just not to the opener at this point. All looks good so far. Looking forward to getting it all up and running. Great How-To.

    Reply
  41. Chris Daley

    just get the mentioned above resisters 10K and 1K. Thats all you need to know to make it work. Or order 100 on ebay for a penny apiece from china.

    Reply
    • Jim

      Told the guy I wanted 1K and 10K and he said he needed to know what wattage… This is my first wiring project and I am not that familiar with resisitors and such.

      Thanks!

      Reply
      • Chris Daley

        From my notebook of equations…

        Amps= volts
        ohms

        Amps=3.3 volts
        1,000 ohms (1K resister)

        Amps=.0033 amps

        Move on the the other equation

        Watts=Voltage X Amps
        Watts=3.3v X .0033 AMPS

        Watts=.01089. This is just a guess, I havnt used the math in quite some time.

        Reply
        • Chris Daley

          sorry the formatting doesnt work on this comment box
          amps=volts/ohms

          Reply
  42. Chris Turner

    Just a quick question. Everytime i want to trigger this program, I get asked for the webiopi username and password. Fine for me, but I would like to be able to set this up in the phones of various family members without having to get them to remember yet another login. Is there any way to bypass this?

    Reply
    • Bogdan

      I have tried to do the same but I don’t think there’s a way without disabling the password lock on webio. You can change the login credentials to easy one(ex. User:a Pass:a).
      Let me know if you find a way.

      Reply
  43. Jason

    I was awakened at 2:08am yesterday morning to my cell phone receiving a txt that Garage Door had just closed. I looked outside in time to see the local police department pulling out of the driveway. After reviewing the cameras on the front yard, driveway, and inside the garage, I saw the office pull up, get out, walk into the garage, hit the button and then run and jump over the safety beam.

    I was very pleased with all of this, but it got me thinking… what if it wasn’t the office that walked into the garage?

    I immediately found a use for the second relay on the two relay board that was attached to my PI. There is now an LED peaking through the crown molding in my bedroom above the door. If the LED is on, the door is open. If the LED is off, the door is closed.

    Now when my son forgets to close the door, and I forget to check the door at bedtime, I won’t be able to sleep if that LED is on.

    This is the LED I used: https://www.superbrightleds.com/moreinfo/surface-mount-smd/little-dot-smd-led-accent-light/639/

    Reply

  44. This has been one Great project – I’ve made it to the end and all is working great except (just had to be one problem) when the door is open the app says “closed” and when the door is closed it says “open”. I guess I could live with this but it is such a great project I hate to leave it at that stage. I’m sure I’ve crossed a wire or placed a file in the wrong dir.. btw I’ve tried powering off the pi and opening the door etc and this didn’t help. I also disengaged the switch at the garage door and the relay…The software is smarter than I am… Out of options at this point. A little hint would be greatly appreciated…

    Reply
    • Rick

      You have a normally closed switch, you need a normally open switch

      Reply

      • Thank you Rick. Message received and I will correct the situation.

        Reply

  45. Anyone have issues with the pi dropping wifi? My pi is in the garage and wifi goes to sleep after some time of inactivity. I searched around for solutions but none helped. just wondering if any one here had the same problem and if they have a fix.

    Reply
    • Chris Daley

      There isnt a problem with Wifi going into a sleep mode. BUT if I lose connection for any reason I have to restart the pi to connect again. I would try moving your wireless access point or setting up a wireless access point closer to your garage.

      Best of luck.

      Reply

      • Hi Chris, thanks for your reply. Wireless signal does not seem to the issue in my case. I even placed the pi next to the router. It always seems to lose connection overnight. I dont see the blue light blinking in the morning.

        Reply
        • Chris Daley

          Could be one of two things that I know of. The first which I have run into several times is that the power adapter isnt putting out enough power to run everything. I tried using a 1 amp power adapter and the pi would start, but as soon as I hooked anything to it it would freeze or restart. I use 1.5 amp or 2.0 amp power adapters now. You can see what the amperage rating is on the adapter itself.

          FYI 500ma=0.5 amps
          700ma=0.7 amps and so on.

          The other option is possibly a defect in your card, this is a possibility, but I would check your adapter first.

          Good Luck.

          Reply
  46. Rick

    Jason, would it be possible to use the html file that is the “stock” one, and make it for me to work, so that I can download it? I am having a lot of difficulty getting this to work.

    Reply
  47. [email protected]

    I did this project almost successfully. Only thing that doesn’t work is when the garage is closed, the status on the page flashes b/w closed/open/closed. When the garage is open, it stays OPEN steady. Any insight someone can provide to me to fix this would be greatly appreciated.

    Reply

  48. Hey, great post! I was struggling to get the reading on the GPIO pins. I thought there was something on the code that was not working. You know what it was? I skipped the step of installing WebIOPi because I already had it installed. After 1 day of tweeking the code I noticed that the version used here was 0.7 and I had installed the 0.5 version. I updated WebIOPI and… voilà!!! Everything worked like a charm!

    Reply
  49. David S.

    Thank you Chris Driscoll for this excellent tutorial! It worked great for me without any issues.

    Here are two suggestions. But first make a copy of the garage.html file using the following command:

    sudo cp /usr/share/webiopi/htdocs/garage.html /usr/share/webiopi/htdocs/garage.html.backup

    In the garage.html file after the statement use your favorite editor to add the following line to specify the icon that is to be used when the webpage is installed to the homescreen as an app:

    If we are using Chrome then the homescreen app will appear as regular Chrome bookmark. Add the following line afterward in the garage.html file to make this a homescreen installed app instead:

    Lastly restart the service with the following command:

    sudo service webiopi restart

    Reply
  50. David S.

    Let me try again. It seems the use of less-than and greater-than characters prevented comments from appearing as intended.

    Thank you Chris Driscoll for this excellent tutorial! It worked great for me without any issues.

    Here are two suggestions. But first make a copy of the garage.html file using the following command:

    sudo cp /usr/share/webiopi/htdocs/garage.html /usr/share/webiopi/htdocs/garage.html.backup

    In the garage.html file after the “title” statement add the following line to specify the icon that is to be used when the webpage is installed to the homescreen as an app, and surround the statement with less-than and greater-than characters commonly seen in HTML files:

    link rel=”icon” sizes=”192×192″ href=”/doge-static.png”

    If we are using Chrome then the homescreen app will appear as regular Chrome bookmark. Add the following line afterward in the garage.html file to make this a homescreen installed app instead, and again and surround this statement with less-than and greater-than characters:

    meta name=”mobile-web-app-capable” content=”yes”

    Lastly restart the service with the following command:

    sudo service webiopi restart

    Reply
  51. David S.

    The information I shared was primarily for Android cell phones with the Chrome browser. How about Apple cell phones with the Safari browser? It can be done too. But first make a copy of the garage.html file.

    Add the following line in the garage.html file to make this a homescreen installed app with a nice icon instead of a Safari bookmark. Surround these statements with less-than and greater-than characters:

    link rel=”apple-touch-startup-image” href=”/doge-static.png”
    link rel=”apple-touch-icon” href=”/doge-static.png”
    meta name=”apple-mobile-web-app-capable” content=”yes”

    Restart the webiopi service.

    All done!

    Reply
  52. Joe

    Hello,

    A great project!
    Everything works for me but I am using a 2 wire reed switch so I am confused how to connect the 2 wires from the switch to my raspberry pi. I am guessing I would need to change the html code as well if the GPIO pins are changed. Can somebody please help.

    Many thanks.

    Joseph

    Reply
  53. Joe

    The sensor works for me. Everything is wired up as per the instructions and I can hear the relay click but my garage door won’t open at all. I never had this problem, it is only after connecting the reed switch that I have encountered this problem. https://www.dropbox.com/s/cxw5ajz1iuqoskl/GarageDoorRelayControl.png – this link shows the wires going from the terminals in my garage opener to the relay’s NO and Common ports.

    Any ideas what I am doing wrong here? Any help is greatly appreciated.

    Reply
  54. Mike

    Thanks for the tutorial. Got everything set up within an hour or two. Doesn’t appear your still responding to these comments it I’ll give it a shot anyway. I’ve noticed that when my garage door is operating, the relay is clicking non stop — on/off repeatedly until the door stops. Is this normal? Will it eventually burn out the relay? Thanks.

    Reply

    • Hi Mike,

      No, that’s not normal, and I can’t imagine it’s good for the relay. Did you ever get this resolved?

      Reply

  55. wanted to leave my part to this project, if you use an iPhone you can add .png files and the following code inside the head of the html file

    there are webpages that will take a image file and turn them into the correct png files for free.

    Then when you add the link to your home screen you will get an icon instead of a picture of the webpage.

    Reply

    • it won’t take the code, all you need to do is add the at the beginning and end of the info below

      link rel=”apple-touch-icon” href=”Icon-60.png”
      link rel=”apple-touch-icon” sizes=”76×76″ href=”Icon-72.png”
      link rel=”apple-touch-icon” sizes=”120×120″ href=”[email protected]
      link rel=”apple-touch-icon” sizes=”152×152″ href=”[email protected]

      Reply
  56. Geoff L

    Hi Chris,
    Thanks for the excellent article. I had two issues that took a while to solve… hopefully my experience can help others. Firstly my wifi worked only occasionally – I replaced the wifi USB dongle that I had bought with the Pi with an old one I had lying around and that fixed that problem. Secondly, I found I could ping to an IP address but not to a website – I added this to the ‘interfaces’ file and that problem was solved:
    dns-nameservers 192.168.0.1 8.8.8.8
    (this sets the dns to Google’s dns)

    Reply
  57. David H

    I downloaded your 2 garage door html. Buttons appear to work great. However my Open/Closed status buttons are black no fonts shown. Your html points to url(‘closed.png’) and url (‘open.png). Where are these png’s located?

    Reply
  58. Georrge

    In same directory as other files. I have the twin doors working just fine with 2 Hormann movers. Far cheaper and cleverer than the company alterative. Thank you!

    Reply
  59. Ray

    This works without issue on a Pi 2 (latest model) – just make sure to do the WebIOPi hack if you’re using WebIOPi, and use the first 26 pins…found that out through lots of frustration and reading.

    Reply
    • Jinkzy

      Where do i find the WebIOPi hack?

      Reply
  60. ZAQ!xsw2

    Hi, Jinkzy. It’s not so much a patch as modifying a couple of files. Check out the following link and look for a post by ‘konglingboy’ halfway down the page: https://www.raspberrypi.org/forums/viewtopic.php?f=63&t=98981

    The issue that I had was seeing gray boxes where the pin numbers should’ve been when viewing WebIOPi’s Web interface. This mod fixed that problem, but you’ll still see only 26 pins. That was enough for me, though. Mod those two files, run ‘setup.sh’ again, use only the first 26 pins, and you should be good to go.

    Reply
  61. floris

    Hi Chris,

    Thanks for the post, I used parts of it to build my electric gate opener (bit different). Now one question: can we add automatic authentication for WEBIOPI? I don’t wanna submit the UN and PW each time I open the website in my RPi….Any ideas?

    Reply
    • Angel Negron

      Delete file or delete contents of “passwd”

      $ cd /home/pi
      $ sudo nano /etc/webiopi/passwd

      Reply

  62. Hi,

    I am having a time of it here. I have used the Dual door script for several weeks. I wanted to add some temp sensors. I cannot get them to work. I setup a new Pi sd card with Raspi-Wheezy and installed WebioPi 0.7.1 and got the temp senso to work. Great! I copied all the garagedoor files from the working system and put them in the new system and all I get is the buttons in grey and they do not work. They don’t react. My original working configuration I changed the HTdocs location in the webiopi config file. Does java need to be installed? The OPen/closed buttons are grey without any text and the open buttons overlap the status buttons. What have I done or not done?
    Thanks

    Reply

  63. Hello. I followed the guide and most of comments, but am having an issue with my pi1B. I changed the GPIOs to 1 and 2 as I have them wired, but the buttons do nothing after asking to confirm? I’d also like to remove the status (I did in the garage.html by //’ing the lines), as I am not using those GPIOs for this project and possibly naively believe that is slowing down loading of the interface. Also if I haven’t already overdone my welcome, I would like to add USB webcam streaming to the page. 🙂 I appreciate any help you can offer.

    Reply

    • Edit: my webcam does work, I tested with fswebcam. Just need a way to “stream” to the web interface. Still madly googling how to fix my switches not working. Maybe this version of webiopi was not for the pi1? I can ” gpio write 2 1″ ” gpio write 2 0″ to turn the relay light on and off…?

      Reply

    • Ok. Got the relay working- the pinout map that I had doen’t match webiopi- so I switched to GPIOs 7 and 8 (like your original two door shows) and tested- worked! As a note for anyone who has this same issue- try the GPIOs at the bottom on the outside edge of the PiB+

      See this image for what I mean.
      http://imgur.com/TELUlM5

      Reply

      • Edit 3? Added the stream to the html file by ”

        But motion is unstable to say the least. It worked once until I toggled the door, then never came on again, regardless of reboot.

        Reply

        • Tinkering again, bought a 2′ extension for the raspi cam. Installed RPI Cam control and can see the stream. Now I just need to add the stream to the html…. wish me luck,

          Reply
  64. joel

    Can Anyone help.Im having a problem with the GUI part. I think I did copy the images but when I open up the browser it doesnt show the images.

    Reply
      • Nick

        Are you putting garage.html after it? So something like 192.168.0.69:8000/garage.html

        Reply
  65. Ben

    I just wanted to post here as a big ‘Thank You’ for putting this guide up. I used this guide liberally for the hardware setup. I did end up just writing my own web interface (since I’m using the Pi 2), and a Python script, but your guide was excellent. Thanks again! I learned a ton working on this.

    Reply
  66. Peter

    I have Pi 1 and just sourcing the parts, I notice raspbian debian wheezy is no longer available to download on their site, would RASPBIAN JESSIE work? If not then can somebody upload the image file so I can download it. Thanks

    Reply
      • Peter

        Perfect not sure why I couldn’t find it. Just ordering the stuff now and we shall see if I can make this work. Any recomendation on a usb camera? Would any of them work and is there a guide I can follow. BTW nice guide.

        Reply

        • Peter,

          Not sure about the USB camera. You might have to be careful about USB power draw from the Pi, making sure to have a beefy enough power adapter. There is a specific camera module for the Raspberry Pi, which might be a good option. I believe it attaches to the top of the Pi’s PCB via ribbon cable.

          Reply
  67. Peter

    Anybody know if 1/4 watts is good enough for the resistors? I did some research and the max power it can go through it without burning out the resister is 5v.

    Reply
  68. Peter

    Completed the project thanks to Chris for the guide. Just one little issue when I leave the stock wall mount garage remote in as well and when pressing the garage door button through the web interface the relay clicks all the time but sometimes the garage door won’t open. When I remove the stock garage door remote wire from the garage door system everything works perfect. I am assuming when both connected the signal from the relay switch is traveling to the stock garage door opener and not to the garage door system as both wires are connected to the same terminal connectors on the garage system. Anybody had this issue and if so what did they do to fix it, I have a craftsman die hard garage door opener.

    Reply
  69. Shawn

    Great stuff. Just got into Pi today for the first time. Got OS Jessie on SD card, got Pi up and running and now just trying to figure out how to get the rest on the Pi3.

    Reply
  70. Greg

    Great write up and support! Has anyone been able to tie in IFTTT or an android widget to open/close and show status? That would really make this great IMO.

    Reply
  71. Peter

    wondering if webiopi support https protocol? Haven’t found anything about it.

    Reply
  72. Hash

    I have a B+ pi and I can’t seem to get the WebIOPi interface to work, the buttons are greyed out there’s no “IN” or “OUT”, and the clicking the empty grey boxes does nothing. I’ve been trying to get it to work for the past 4 days but it’s harding finding help everyone seems to be trying to get it to work on the Pi2, but no-one seems to be using a Pi1B+. Any help is appreciated.

    Thanks,

    Reply
  73. juan ignacio

    hello. I’m a little dizzy , sorry.
    I need to work with two doors but without censors. what should I do ?

    your post is excellent congratulations!

    Reply
  74. Greg

    This is my first time doing anything with a raspberry pi, so I appreciate this site. I was able to get the garage door to open/close by viewing the pins on my phone, but I can’t get the “dog screen” interface to work, so as a result, I don’t have a way to see the door status. Is there a way I can see my sensor’s status without the “dog screen?”

    Reply

    • In my caae I renoved the edo icon. If you connected the door sensor correctly then when you open or closed the door the status on the homepage should change.

      Reply
  75. Jay

    I have a new chamberlain HD210 model that does not have a dry contact type wall button – confirmed by their reps. When I short the two wall wires the GDO does not respond but my previous craftsman used to. I had tried to install a Sonoff WiFi switch, but due to that reason it cannot work the GDO either. Basically no relays can get the GDO to respond and I my options are directed to their branded internet gateway. I know there are DIYers who have implemented self solutions with this types of wet contacts but I haven’t found one yet, I am at the end of my wits. My question first is, is there a way to implement this or a similar solution with a non dry contact type GDO?

    Reply

    • I had the same issue, what I end up doing is wiring it to an extra garage door remote and also hardwire the battery terminals so I can use the battery from the pi.

      Reply
  76. irving

    does anyone know how to make this work with amazons echo?

    Reply
  77. Scott

    Just got this working, first with a Pi 3 model B, then with a Pi Zero. I’m using a 4 channel relay to operate 2 doors using the 2door.html file. I’m trying to add buttons for the lights using the extra relays. I’m using GPIO 7 and 8 for the doors, 17 and 18 for the sensors (haven’t installed these yet) and I would like to use GPIO 9 and 11 for the lights ( I have them wired to the push button on my wall mounted door controller, so would use the same .5 second trigger). I’m not very good with php, so having trouble getting my light relays to work. Any chance you could add right and left light buttons to your 2door file? The tutorial was great and easy to follow. The Pi 3 required the fix by konglingboy that was referenced here. The Pi zero did not need the fix. Thanks for the great tutorial, and the extra help in the comments has been extremely helpful as well!

    Reply
  78. Votyok

    Can anyone help? Whenever I reboot my router I can’t anymore access the pi.

    Reply
    • Peter

      Are you setting a static IP address on the pi? Did your IP address change? Can you ping the pi?

      Reply
  79. Joel

    Yes static. Ip did not change. I havent tried pinging it.will try later, but most probably I cant.

    Reply

  80. If you are unable to ping the pi or ssh into the pi and you are sure the IP is correct then two things, the pi lost its routes, if you do a sudo route -n, that should display the routes, if its empty then that is your issue.

    Connect your pi to your TV or if you have a usb to serial as Chris stated in the guide to determine if the interface is up by typing ifconfig. If you are using wireless then it should display wlan0 and then the IP address, if you do not see a wlan0 with an IP then something is wrong with the configuration of your wireless SSID or password. Once in the pi try to ping google.com, if it response then that means the issue is on your router and not the pi.

    Second issue as stated, log into your router and ensure any settings that displays AP Isloated and WMM APSD is disabled, you will find this setting in the wireless section on the router. Once disabled you should be able to connect to your pi via ssh and ping it, note a reboot of the pi may be required after the change. Good Luck

    Reply
  81. Iron Granny

    Thanks for the write up and source code. Got this working in a couple hours with no real issues. Thank you

    Reply
  82. Peter

    I did this for myself and it works great however did this also for my brother and once the relay switch is connected to the garage door his car remotes for the garage don’t work at a far distance anymore. You will need to be right up to the door for them to work. I thought it was the wifi dongle but it’s not as soon as I remove the relay wires going to the garage door the remotes work perfectly. Any way I can fix the interference?

    Reply

  83. I think most people would agree with your article. I am going to bookmark this web site so I can come back and read more articles. Keep up the good work!

    Reply
    • Angel Negron

      I would disagree. Follow the link in the comments to patch/update WebIOPi to 0.7.1. Specifically, look for the instructions to patch by danjperron on Wed Jan 06, 2016 8:22 pm

      I am finishing this project right now, and I have it running on both my RPi3 and Zero.

      Reply
  84. DarkBeer

    Thanks for this thorough guide! Installed without issue today. Created my own images and named to doge-static.png and doge-action.png and overwrote the originals rather than modify the code. Has anyone added a way to run a loop and then auto-close the door if it has been left open after a specified period of time? Bonus points if there is a “hold open” button option that would not run that loop if desired.

    Reply

  85. Thanks for the tutorial. I’m familiar with the software side of things, but new to wiring. You mentioned cutting a jumper in half and stripping the insulation to connect it to the GPIO pin. How are you connecting that to the blue and blue/white ethernet cables? (per image 7, where you show the magnet sensor connecting to the Pi). For the connection to pin 14, and from each resistor to the Pi, are you tying the ethernet wire to a jumper cable using a wire nut? Thanks!

    Reply
    • Joe Cool

      Hey, Josh. Seems to me that a wire nut or electrical tape would work (or anything that insulates the bare wires and maintains good contact).

      Reply
  86. mexicali82

    looks like an android app

    Thanks for sharing

    Reply

Leave a Reply