Introduction: Electric Imp Garage Door Opener

By

I've lost count of the number of times we have set off on a trip only to have to turn back to check to see if we remembered to close the garage door. This ‘ible shows you how to connect the Electric Imp to your garage door opener, how to control your garage door from your iPhone and how to check the status of the door from anywhere. Every time the door is opened or closed a sensor is triggered, and a text is sent to a predefined group of phones so that you are always "in the know" as to door status. Commercially available options abound but this solution is easy enough to hack together yourself for small $ outlay.

Even though I’ve used an iPhone for this ‘ible, you could use any smartphone, tablet or other computing device with an Internet connection. As a bonus feature, you can cache the HTML App on your iPhone so that it appears and runs just like a real App Store app, without needing to jump through app distribution hoops or Apple Developer program registration. The smartphone has become an indispensable attachment - most people will never leave home without it, and most people I know can no longer conduct a conversation without checking their phones repeatedly. Tighter integration would require surgery but that is some way out in the future. The net result is that you always have a garage door opener on your person.

The Electric Imp is a fantastic device that enables WiFi control of anything and everything. With a small amount of effort, you can control anything you want with your smartphone, web browser or other Internet enabled device.

To complete this project, we will assemble electronics, write firmware, and develop an HTML App for controlling the garage door. This project interfaces to your existing electric garage door opener via the pushbutton switch that you normally use to open the door. If you have a manual garage door, you are out of luck on the automation side, but will still learn a bit about the Imp, and about creating an HTML App for your phone. After completion of the project, you will be able to use either the pushbutton switch or your smartphone to open the door – all existing garage door opener functionality is maintained.
I do get that opening the garage door from your phone is hardly novel. Someone has most likely cobbled together a steam punk version from scrap parts discovered in a dumpster in some far away country! However, this is my version that answers Imp related questions that appear frequently on forums like “how do I control my imp from a web browser”, or “how do I add a relay to my imp” or “how do I create an html app for my phone?” or “how do I get data from the Imp back to my phone” etc.



Step 1: Operational Secrets

The standard garage door opener button completes a circuit which signals your garage door motor to start opening or closing the door depending on the previous action. If the previous action was to close the door, the next button press will be to open the door and vice versa. The circuitry we add is wired in parallel to the manual pushbutton switch so that either a relay controlled by the circuit or a push of the button will activate the door opener.

With the Electric Imp solution, a tap of the iPhone screen in the Sesame App sends a message via HTTP Post (using either the wireless network or cellphone network) to the Imp Servers with the unique ID of your specific Electric Imp module.


The Imp Server finds the IP address of the Electric Imp being addressed and forwards the message on to your Electric Imp via the internet and wireless router. On the Electric Imp, your Agent code receives the message and forwards it on to your firmware via the "device.send" API function. Finally, your firmware interprets the message according to your functional requirements. In our case, the HTTP message results in closure of the relay contacts connected to PIN 7 of the circuit. Billions of dollars of networking infrastructure are being leveraged to communicate a simple switch contact closure. And it is fast. Occasionally there may be a second or 2 of latency, but for the most part it is pretty quick.

The connectivity is seamless thanks to the magic of the smartphone. When your phone is within WiFi range of your router, you will connect via your router to the Electric Imp Cloud Server, which sends the message on to the Imp through your WiFi router. The message goes from Phone->Router->Imp Server->Router->Imp. When you are out of WiFi range (or turn WiFi on your phone off), the message goes via the cellular network to the Electric Imp Cloud Server, which then sends the message on to the Imp through your WiFI router, or in other words: Phone->Cell Network->Imp Server->Router->Imp.


Step 2: Parts 'n Tools


Now that I have now sketched the scene, the rest of this 'ible concerns the circuit construction, and firmware/software development and installation. You will need the following components and tools to build the electronics

The firmware and software have been updated and are available from Step 6.

If you want to build your own, this is what you will need:

Step 3: Constructing the Electronics

The Electric Imp is a fantastic device (may have said that a number of times already but it’s true!) that provides most of the functionality for the solution. The Imp looks like an SD card and slots into an SD card slot on a carrier board. The carrier board provides the ID for the imp which is critical for the communication channel back to the Imp Server. A good overview of the Imp is available here: http://electricimp.com/docs/gettingstarted/

When you buy a new Imp, the Imp will need to be commissioned. This is done using a smartphone app that “blinks” the configuration information of your wireless network into the Electric Imp’s non-volatile memory. The detail instructions are available on the Imp Web Site here: http://electricimp.com/docs/gettingstarted/1-blinkup/

The circuit is constructed by following the wiring diagram provided. I used Vero board but you can use anything that you like.


Step 4: Sensor Switch Brackets and Wiring

The sensor switch brackets are hand bent strips of aluminum about 0.060" thick. The sensors are mounted to the track where the carriage will activate them in the open and closed door positions.

The switches are wired to the sensor inputs of the circuit. When a switch is closed, the input line is pulled to ground. The firmware detects this as a zero or active sensor. So, if the door is closed the "Closed" sensor input line is pulled low, and the "Open" sensor is pulled high. The reverse is true when the door is open.

The circuit is powered via USB using an iPhone USB charger that plugs into the AC located near the garage door opener. The circuit is hung from a zip tie.... not very elegant but it works! 

Step 5: Firmware

The firmware for the Electric Imp lives on the Imp Servers in the cloud. When your imp powers up, it connects back to the mother ship and requests firmware. The mother ship downloads the firmware configured for your Imp.

7 December 2013 Update
Please not that the Planner is now obsolete. Electric Imp has replaced the planner with Agents. I have attached new agent and new HTML code to this page that will work with the new Agents. Please use the miHomeGarageAgents.Zip file attached to this step. To get an overview of how to work with the new IDE and Agent basics, please watch this video:

Electric Imp Agents

The firmware and other files for this application are attached to this step.

Attachments

Step 6: Status Feedback Via SMS


SMS Service is provided by https://www.sendhub.com/developer/

This was a great free service - you used to get 500 free texts per month and the API is well documented. But this has recently (2014) been reduced to 100 free texts per month which is marginal for the typical garage door. They have done a great job describing the interface and how to get started so I will not repeat that here. There is only one tricky bit, so for the most part just follow their docs! http://apidocs.sendhub.com/GettingStarted.html

UPDATE: 9/13/2014 - SendHub appears to have re-instated the 500 text limit for new free accounts, although my account shows a limit of 100. Others have received notification from sendhub that their free accounts are about to expire. However, Twitter is a useful alternative for messaging. I have added an attachment to this step that details how to set up Twitter (ConfigTwitterApps.pdf). It's 100% free and messages are unlimited.


The tricky bit is finding your group ID for SMS. Once you have followed all their instructions, there's another step to retrieving your group ID. You need to navigate to the following URL in your Web Browser using your Cell Number that you registered with SendHub and the API key they assigned to you

https://api.sendhub.com/v1/groups/?username=YourCellNumber&api_key=YourAPIKey


Send hub will return a bunch of stuff that looks like this. Your group ID is in bold below where I have 888888888888

{"meta": {"limit": 20, "next": null, "offset": 0, "previous": null, "total_count": 1}, "objects": [{"date_created": "2013-12-19T23:48:41.811793", "date_modified": "2013-12-20T04:28:15.277988", "deleted": false, "id": "888888888888", "id_str": "888888888888", "is_shared": true, "name": "mmmm", "parent_id": null, "parent_user_id": null, "permissions": "write", "resource_uri": "/v1/groups/888888888888/", "share_invite_count": 0, "size": 1, "slug": "mmm", "text_to_subscribe": true, "ttjResponse": "You are now subscribed."}]}


Now, make sure you use this group ID in the line in your agent code file that looks like this

local json = "{\"groups\": [\"888888888888\" ], \"text\": \"Sesame Door : "+a_currentDoorState+"\"}";

local req = http.post("https://api.sendhub.com/v1/messages/?username=5558889999&api_key=Your Key Goes here",



Attachments

Step 7: The HTML App – Configuration Details

The application that runs on the iPhone is a web page that is a combination of HTML, CSS and Javascript. To get the web page to appear to be a native iOS App, there are meta tags that are understood by the Safari browser that hide the navigation bar at the top of the display and the button bar at the bottom. To get the app to run without being loaded from a web server, you can cache the page on the phone. This means you can load the page from a temporary web server onto the phone, and then shut the web server down so that no one else can get access to the App. Once the page has been cached to your phone, Safari will no longer make HTTP requests for the page when it is re-opened and will load it directly from the local cache, and display it to look like a native app. The tags that control the display format are:
  • Viewport
​This defines how the Web page will be displayed and should be set as shown according to the Apple guidelines. You will need to make sure that your buttons and images are large enough because the user will not be able to zoom the page.
 
  • apple-mobile-web-app-capable
This tag makes the web page run in full screen mode. The browser navigation bars are hidden
 
  • apple-mobile-web-app-status-bar-style
Displays a black status bar at the top of the phone. Less obtrusive I guess.

 

This is the start of the HTML file with the meta tags defined
 
<html manifest="manifest.appcache">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />



Application Icon
To make an application icon, you need to create a 114x114 pixel png image. iOS will take care of rounding the corners and applying the “shine”. 



Cache
Finally to cache the app, you need a manifest file. Make sure that your web server serves up the manifest file with MIME type “text/cache-manifest” for this to work. For IIS Express, you edit the application.config file to add the file type. For other servers – your mileage may vary.
The HTML App will load with the last loaded version of the image and HTML files from cache. If network connectivity is available, the browser will check the status of the manifest file on the server. If the manifest file has changed, the new files will be loaded. This is useful during development when files are being updated – you can change the version number within the manifest file to force new files to be loaded and cached. However, sometimes you have to manually clear the cache to get new files to load. Just something that happens that you need to be aware of. I also found it easier during debugging to eliminate the manifest statement. Once the file is debugged, you can work with the cache version.
 
The manifest file has two sections – files that will be cached and files that will be loaded from the network. For this app, we cache all files and leave the NETWORK section empty.

CACHE MANIFEST

#version 3.3

CACHE:

index.html
images/hitchhikeguidetogalaxy0.png
images/hitchhikeguidetogalaxy1.png
images/hitchhikeguidetogalaxy2.png
images/hitchhikeguidetogalaxy3.png
images/garage_icon.png

NETWORK:

The version number is a trigger to the web browser to load new versions of the file.  I found a good blog entry that covers this at http://matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/ if you need more information about running HTML Apps on the iPhone.


Step 8: The HTML App – Walkthrough

The client app starts up by loading the 4 images used for animating the WiFi waves emanating from the robot (Marvin the paranoid android from Hitchhikers Guide to the Galaxy) when the robot is touched. You can get free artwork for non-commercial use here:
http://findicons.com/icon/45522/hitchhikeguidetogalaxy1_lock
http://www.iconarchive.com/show/hitchhikers-guide-icons-by-iconshock/Marvin-icon.html

I cobbled together images of Marvin with a WiFi icon. I cut the WiFi icon into three parts to animate the RF waves emanating from Marvin’s head. When the screen is touched in the area of the image, the JavaScript animation begins. The animation cycles through the 4 images with a 250ms delay between pictures to simulate the wireless sending of a message to the garage door. The cycle is repeated twice mainly because this avoids impatient family members from poking at the screen when there isn't immediate response on the part of the door. As mentioned before, latency can be about 2 seconds sometimes so the animation lets users think that communication is still in progress.

Communicating with the Electric Imp is done by sending a message to the Imp Agent URL specific to your Imp.
For the HTML App, we create an XMLHttpRequest object and then post the button ID to the Imp Agent for your garage door. Technically we could have a number of different button functions so sending the ID to the firmware would allow the firmware to make decisions based on the button that was sent. However, for this app we only have one button so the ID is a bit redundant but we have to send something! One issue I ran into was that iOS6 would cache the outgoing posts. The workaround is to make sure that the data you are posting changes every time. This was done by adding the time stamp to the string which ensured that each post was unique and thus not cached by iOS. Having outgoing calls cached makes no sense to me but it made sense to someone at Apple. There is a way to specifically request that the outgoing call not be cached but that did not work for this interface…. See the comments in the code.

xmlhttp.open("POST", "https://api.electricimp.com/v1/Your_Imp_Specfic_ID_Here", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// Sending a Date Time stamp prevents iOS6 from caching the query. If you set the cache-control header
// for this request, it does not work. Odd since it does work for the COSM query
xmlhttp.send("value=" + button.id + Date());


To get status of the door sensors, a query message is sent to the Imp Agent. You can check the status by pressing the button or pulling the screen down.

And that takes care of the HTML App. The next step will discuss loading the HTML App and making it appear to be a native iOS App.

Step 9: Configuring IIS Express and Loading the App Onto Your IPhone

All development was done using Visual Studio Express 2012 for Web which is free and downloadable from Microsoft here: http://www.microsoft.com/visualstudio/eng/downloads#d-express-web
Testing the HTML app automatically fires up IIS Express (Microsoft Web Server) in the background when you use your desktop browser (Chrome/Safari/IE etc) as your debug target. However, to test the HTML App on your phone, you need to make some changes to IIS Express to allow remote connections to it.

Configuring IIS Express for Remote Connections
The application.config XML file is located here: C:\Users\YourName\Documents\IISExpress\config
First thing to do is to set the mimeType for your cache-manifest. We use .appcache as the file extension. You can use any extension you want but .appcache seems common. The manifest MIME type is text/cache-manifest which tells the browser the type of file. Once the type is registered web server will include the MIME type in the response header each time the page is requested.
The second change to the file is to allow IIS Express to serve pages to remote connections. By default it will only bind ports to connections from “localhost” which is no good for remote testing with the iPhone. To change this behavior, you need to modify the site configuration settings for your Web Site by changing the bindingInformation atttribute from “localhost” to “*”,allowing IIS Express to bind to any IP address, not just “localhost”. Your port number will be different from the snippet shown below – that’s ok because it will be the port allocated by IIS Express on your machine. Your web “Site Name” will also be different. Mine is : “miHomeGarage”.

<site name="miHomeGarage" id="2005659527">
	<application path="/" applicationPool="Clr4IntegratedAppPool">
        <virtualDirectory path="/" physicalPath="C:\Users\midnight\WebSites\miHomeGarage" />
        <virtualDirectory path="/miHomeGarage" physicalPath="C:\Users\midnight\WebSites\miHomeGarage\miHomeGarage" />
        </application>
            <bindings>
               <binding protocol="http" bindingInformation="*:49292:" />
            </bindings>
</site>



Finally, run this as administrator from a command prompt to add Everyone to the access list for the port:

C:\Program Files\Microsoft SDKs\Windows Azure\.NET SDK\2012-10>netsh http add urlacl url=http://*:52917/ user=Everyone

Your port number will be different and will match the information displayed in the element in the application.config XML file.
I pulled this information together from many google searches. This site was the most helpful but I modified the approach slightly to allow any IP address binding because DHCP caused me some problems at some point.
http://johan.driessen.se/posts/Accessing-an-IIS-Express-site-from-a-remote-computer

This site will also come in handy:

https://gilesey.wordpress.com/2013/04/21/allowing-...

Loading the App onto the iPhone
All of this prep work is so that you can load the HTML App onto the iPhone. To load the app, start Visual Studio 2012 Express for Web which will start IIS Express (you can also start IIS Express form the command line but since I’m using the IDE editor, it’s easier to just use the IDE to start it up). The virtual path for the app is “/” so connecting to http://youripaddress:yourport/ will connect to the IIS Express root. I added a folder called Imp Garage and the page name is Index.html.

To load to the iPhone, open Safari and open URL http://youripaddress:yourport/ImpGarage/Index.htm...
Once the Web page is displayed, you need to save it to your desktop by clicking the “sharing” button in the middle of the bottom navigation bar. Press the “Add to Home Screen” button and select a title for displaying on the home screen. The Icon for the app will be added to the home screen when you press the Add button.

You are done. The App will now be launched from the Home Screen like a native iOS application.

Step 10: Action

With the app loaded, tapping the image will send a message to the Imp hardware (via the Imp Agent in the Imp Cloud) to activate the garage door relay. If the door is open, then the relay closure will cause the door to close. If the door is closed then relay closure will cause the door to open. If the door is moving and the image is pressed, the door will stop. Text messages will be sent to your phone with the status whenever a door sensor changes state. To manually check status, drag the screen down and release to initiate a query of the door status. This is useful when you want to check the door status remotely.

If someone opens the door from a Car remote or via the push button, you will get text messages alerting you of the status.

The end of another marathon write-up. The time spent writing the code and building the electronics is a small fraction of the time spent doing the documentation. The project itself can be knocked together easily in a day. Building the electronics will take about 3 hours (if you have all the stuff on hand!), installation of the brackets and sensor switches another 2 hours. Then all that's left to do is download the code, configure IIS and the Imp, and you will be off and running in another 2-3 hours. If you don't have any electronics or firmware/software experience, then expect to spend double the amount of time. Let me know if you have any questions!

Step 11: Feedback From Lfzguud

Instructables member lfzguud took on the challenge of building one of these himself. In doing so he learned a number of lessons along the way that might be useful for you. He also sent pictures of his completed unit which are shown in this step. Here are his lessons learned:

Lessons learned by lfzguud


The list of materials could also include:

A Microsoft web hosting (not web page) service subscription (such as 1and1) –OR- a windows XP Pro or 7 pro home server running a server (such apache server which is free)

A free subscription to sendhub

The direction of the diode (the tiniest component on here) DOES matter. Thankfully your pictures were nice and clear and the schematic as well.

If you can’t find the molex connectors, another option are board terminals from Radio Shack: http://www.radioshack.com/product/index.jsp?productId=2102861

In the first step of commissioning the Imp, it is imperative that you follow the instructions and do the “Hello World” set up. This fixes a bug in the imps. If you don’t do this – you might find it hard to get it to connect.

If the imp does not connect (i.e. weird blinking led sequences) be sure to check the list that shows what the blinks mean. Then, take a good hard look at the Imp forums.

I have a Dlink DIR-655 router. It turns out to get an imp connected to that router you must first un-check the “enable DNS relay” block in the router admin section. Took 3 hours to find that little tid-bit in the forums.

Client:

When you set up your SendHub account, you must MUST MUST read the GettingStarted document with regards to the api. On that page, about half-way down is a one line request that you put in your web browser’s address bar to get your group ID number. If you fail to do this step and don’t get the group number, the web server software won’t work.

Found this great site for setting up a home server. Works great – though now I have it and a year’s worth of pre-paid web hosting at 1 and 1 (oops!).

http://lifehacker.com/124212/geek-to-live--how-to-set-up-a-personal-home-web-server#3