Open and close your garage door over the Internet

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.

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:

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.

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.