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
Ratchet,
ChocolateChip-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
http://tinkerer.us/Elec-Imp-Relay/. 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 120V
AC 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