Electric Imp Breakout Hookup Guide
Example 2: Web Control (Request)
This time, we’ll not only be writing code for the imp, but the agent as well. This example code will show how to pass data from the imp to the agent, and how to write a simple web page to interact with the agent half of the code.
The circuit for this example is very simple: a common-cathode RGB LED is connected to the imp’s pins 1, 2, and 5 (red, green, and blue anodes respectively), and another basic red LED is connected to pin 9 of the imp. Don’t forget to add some current limiting resistors (in the range of 50-100Ω)!
The imp (Device) Code
Create a new model, as you did in the last example. We’ll call this one LED Web Control. Copy and paste the code below into the Device section of the IDE.
The key bit of new code in this example is the
agent.on function call. Run during the setup portion of the code, these function calls set up a handler function to be called whenever the agent sends a specific string to the imp. For example, the
agent.on("led", setLed); functions says that whenever a message tagged with an “led” string is received from the agent, call the
How do we send messages from the agent to the imp? Looks like it’s time to start using the other half of the IDE window…
The Agent Code
The agent is a piece of squirrel code living and running in the Electric Imp cloud. While the imp is managing all of its hardware pins, the agent can be off mingling with other servers and dealing with Internet traffic. There are built in functions which allow the imp to send data to the agent, and vice-versa.
In this example, we’ll set the agent up to listen for HTTP requests. Upon receiving a request, the agent will parse the query, and relay the important information back to the imp.
Copy and paste this code into the Agent half of your LED Web Control model:
Check out the comments in the code for a line-by-line dissection. Most of the code on the agent is an HTTP request handler (the
requestHandler(request, response) function). This function uses a series of
if statements to check for a specific request parameter key (like “led” or “rgb”). In those
if statements, the agent decides what to do with the parameter value (if anything) and sends a message to the imp using the
With both of those halves of code added to your model, and the circuit built, build and run the model. Time to test it out!
Testing the Model
After initially running the model, you shouldn’t see anything happen to your imp or the LEDs it’s connected to. To change that, we need to send an HTTP request to the agent.
First, we need to locate the URL of our agent, which is printed at the top of your Agent window. It’ll be something like
https://agent.electricimp.com/0123456789ABCDEF. Each imp gets its own, unique, agent URL.
How to locate the agent URL. Mine, for example, is https://agent.electricimp.com/UpyYpRLmBB7m.
We can send requests to the agent by adding URL query strings onto the agent URL. For example, type
https://agent.electricimp.com/qJx35x_LTITP?led=1 (make sure you replace my unique code with your own!) into your browser’s address bar and go. Notice anything happen on your imp circuit? The lonely red LED should have turned on! Look through the agent code to see what other parameters we can send.
We can even add multiple parameters to the same request, for example try going to
https://agent.electricimp.com/qJx35x_LTITP?led=1&rgb=%234080ff&timer=10 in your browser. This request turns on the LED, but it also sends an RGB string to control the RGB LED and it sets a timer to turn all LEDs off.
This is very cool, but typing these parameters into an address bar is a pain! Let’s write a simple HTML webpage to take a form input and do all of that for us!
The HTML Code
This is the last piece to the puzzle – a simple HTML page that takes a form input, and sends that information out to our Electric Imp agent.
Create a local file on your computer called impControl.html. Open it with a text editor, and paste the below code into it.:
Then save and open the file with your browser of choice. A simple web page like this should show up:
Make sure you type in the correct, unique code for your agent URL. Then play with the rest of the form inputs. The On/Off radio buttons turn the lonely red LED on or off. The RGB color selector sets the color of the RGB LED. The duration text box will turn all LEDs off after a set number of seconds. And the name textbox will print your name in your imp’s console. Try it out!
imp and Breakout Board being controlled by a phone’s browser.
imp002 being controlled by a phone’s browser.
The code should be pretty easy to pattern-match and modify. The agent checks for specific values (like “led” or “rgb”), which are set by the
name identifiers in the HTML form. To add, subtract, or modify those, simply add/remove/modify the form inputs, and add an
if statement to look for it in the agent.