Open and close your garage door over the Internet

ioBridge’s I/O web gateways including the IO-204, IO-201, or Gamma may be used with a third-party universal garage door remote and a third-party Internet camera to open and close garage doors over the Internet.

This tutorial shows you one way to do this following a step-by-step guide and without writing any code. This project assumes that you are familiar with the basic functionality of your ioBridge web gateway and that you have already set up your account and linked your web gateway.

Project Components

Step 1 – Connect your ioBridge web gateway to the Universal Remote

The first step is to program your Universal Remote to open and close your garage doors using the manufacturers instructions. This typically involves pushing buttons on your garage door and on your remote to associate the two devices. Once this is done and working open up the Universal Remote and connect your ioBridge web gateway. This is done by removing the Remote PCB from its case and by using ioBridge relay outputs as switches that perform the same function as the push-button switches on the printed circuit board.

Note that this is the trickiest part of this project as it requires some soldering skill.

Color-coded wire from a stripped Ethernet cable was used but any similar wire will do. The relay boards were connected to channels 3 and 4 but any two unused channels could have been used.

Step 2 – Create Open/Close Widgets for your Dashboard

Now that the wiring is all done we can focus on the web dashboard. The next step is to simulate pushing buttons on the Remote clicker. This can be done by pulsing the digital outputs connected to the relays. Follow the steps to create a 2 second “Digital Output Pulse” widget for each of the channels (3 and 4 in this case). Your resulting widget should look like this:

 

Step 3 – Configure your IP camera and create a camera widget

Like many IP cameras the FOSCAM requires a fair bit of configuration including adjusting you firewall settings for port forwarding and using dynamic dns. Follow the manufacturer’s instructions to connect your IP camera to your network.

Once your camera is configured and mounted and you can view it over the Internet you can then embed it in your dashboard using an html widget.

HTML App Head Code:

CSS and JavaScript to be included in the HTML Head:

<style type="text/css">
</style>

<script type="text/javascript">
var videoFrameCount = 2;
var refreshRate = 250;

	    function load_video()
            {
             setTimeout("reload_image()",refreshRate);
            }
            function reload_image()
            {
                var xx = new Image();
                xx.src = "http://YOURURL:YOURPORT/snapshot.cgi?user=YOURUSER&pwd=YOURPASSWORD&next_url="+videoFrameCount;
                document.getElementById("imgDisplay").src = xx.src;
                videoFrameCount++;

            }
            function video_error()
            {

                setTimeout("reload_image()",refreshRate);   

            }
            function video_error_clear()
            {
                setTimeout("reload_image()",refreshRate);
            }

</script>

HTML App Body Code: HTML to be displayed in the HTML Body

<img name="imgDisplay" width="320" height="240" id="imgDisplay" onerror="video_error()" onload="load_video()" src="http://YOURURL:YOURPORT/snapshot.cgi?user=YOURUSER&pwd=YOURPASSWORD&next_url=1">

Where YOURURL is the url of your dynamic dns service, YOURPORT is the port number that you chose to use in setting up your camera, and YOURUSER and YOURPASSWORD is the guest access user name and password for your IP camera.

Step 4 – Place the widgets on your dashboard and control your garage doors

Place your widgets on your dashboard if you have not done so already. Your dashboard should look something like this:

You can also view your dashboard on your mobile device:

Click the buttons on your dashboard and watch your doors open and close in real-time.

Note that one can also use the free iPhone or Android app rather than the web interface described above.

click to chat