Thursday, August 21, 2014

electric imp-Controlled 120VAC Relay Switcher Software Update

     About half a year ago I published a post about my electric imp-Controlled 120VAC Relay Switcher project. I used it very often to start making coffee in the morning while I was still in bed. Since I was still using iWebKit for the web app, I searched around for a framework that was visually in the style of iOS7. There are so many available frameworks around like RatchetChocolateChip-UI, and Onsen UI and I tested many of them but none gave me everything I wanted. I finally found Google's Web Starter Kit and it was perfect for me. I could easily extend it with JavaScript, it had a responsive design, and the gulp tool for automatically refreshing all pages on all devices on a file change helped me quickly debug errors. While I was changing the UI, I also added a timer function to the code.

     I updated my old GitHub project, Elec-Imp-Relay, to include my new code for the web app and electric imp files. The main index.html page is very basic and uses Google's Web Starter Kit as the basis. Lines 9-13 allow the web app to be added to the iPhone Home Screen as an app and includes the link to the image I created from a coffee cup and the electric imp logo. Line 13 includes a link to the project because I am hosting the web app from GitHub pages and I need to specify the location of this particular icon. I used Google's style sheets for the app with slight modifications and they include code for all the possible functions. I may go in later and remove the UI elements I don't use to decrease the load times. Line 22 calls two JavaScript functions when the page is loaded. linkDecode() reads the URL parameters and calls the specified functions in the electric imp agent file via a httpGet(). agentURLalert() checks the URL for the agentURL parameter which is required to determine which electric imp to send the data to. Since this webpage is hosted publicly, I think this is the easiest way for people to add their own agent URL without it also being public. If this is not present, an error is shown in the body. Inside the <body> is the code for the header and the buttons. When a button is pressed, the addOrUpdateUrlParam() function is called which reloads the page and adds or updates the specified URL parameter. Finally at line 49, the  link-fix.js file is used to always make new pages load in the same window. If this is not present, when a new page is loaded in the iPhone web app, the app will close and the new link will open in Safari.

"Coffee Imp" app, index.html, on, off, 4 cups

     The electric imp code is very similar to before. agent.nut reads the URL parameters sent to it from the httpGet() on the webpage and then sends data to functions in device.nut. toggleRelay() and setRelay() are unchanged from before. setTimer() is a new function that turns on the relay and then uses the imp.wakeup() method to wait for a specified amount of time before turning it off. This function also reconfigures the button to turn off the relay and cancel the timer if it is pressed. This new code allows me to specify the number of cups of coffee I want to brew on the website, and turn that into a time to keep the relay on in the code.

     You can view this website yourself at If you load this, you will get an error about the agentURL not being present. You can add ?agentURL=xxxxxxxxxxxx to the end of the link to suppress this error. Of course, none of the buttons will do anything unless you add the agent.nut and device.nut files to your own imp in the IDE and use your own agentURL in the address field.

Missing agent URL error

     I also changed the hardware from my last post. Perry Chamberlain mentioned in this comment that  I was switching the wrong 120VAC wire with the relay. I thought that I checked this but I must have got mixed up when I was wiring the circuit. I changed the wires around as shown in the below photo. Thanks Perry!

Switching black (hot), not white (neutral) with the relay

The whole circuit (since I had it out of its case)

A quick video demonstrating app launch and turning off the power

No comments:

Post a Comment