Retired - Electric Imp Breakout Hookup Guide

Contributors: jimblom

Example 3: Web Response

In the previous example, we used a web page to send data to the imp. But what if you wanted to send data from the imp, back to a web page? This example shows how to use the imp to post a response to a web server.

The required materials for this example include everything from the last circuit, plus access to a web host with PHP installed. That part we'll leave up to you, our lovely reader. There are places around the world-wide-web which offer such services for free. You probably won't get a fancy domain, but you do get a private home on a shared web server.

Adding to the imp Code

There are actually only about three lines, on top of the code from the previous example, required to send data out to a server. Where before we used the InputPort class to bring data into the imp, this time we'll use the OutputPort class to send data out.

First, near the top of our code, we need to define an output port variable:

Then, to actually send something to the output, we need to call the set() function:

Lastly, we need to add our new output to the imp in the planner. This is done using the imp.configure() function:

See if you can spot those three lines of code in the full program below (copy/paste this as a new code in your imp planner):

language:javascript
/* Electric Imp Web-controlled LEDs with Response
    by: Jim Lindblom
    SparkFun Electronics
    date: July 16, 2013
    license: Beerware. Please use, reuse, and modify this code.
    If you find it useful, buy me a beer some day!

    This is a simple electric imp example, which shows how to interface
    the imp with a web page. This example code goes hand-in-hand with an
    HTML webpage. Check out this page for more information: 
    https://learn.sparkfun.com/tutorials/electric-imp-breakout-hookup-guide/example-2-web-control
    This will show how you can use html range, text, and radio form inputs
    to control turn LEDs on/off, PWM them, and set a timer to turn them off.

    After receiving input from the html page, the imp will produce a response
    on the OutputPort. This can be relayed to an HTTP Request vimp, which
    can post the data to a php script on a web server.

    Circuit:
    A common cathode RGB LED is connected to the imp's pins 1, 2, and 5.
    The red anode connects to 1 through a 47 Ohm resistor, green 2, and blue 5.
    The cathode of the LED connects to ground.
    Another simple, red LED is connected to the imp to imp pin 9, through
    another 47 Ohm resistor. The cathode of the LED is grounded.
*/

// This function just turns all LEDs off.
function ledsOff()
{
    hardware.pin1.write(0);
    hardware.pin2.write(0);
    hardware.pin5.write(0);
    hardware.pin9.write(0);
}

// Output port to send something
local output_suspect = OutputPort("Suspect", "string");

// This function is accessed every time an HTML POST is received. It will parse the post
// and turn the LEDs on/off accordingly.
// The InputPort class encapsulates incoming data from the server to the imp. In order to act on the data, 
// imp programs should derive a new class from InputPort and override the set() method.
// In order to use this function, an HTTP IN vimp must be connected to this
// imp's input in the planner.
class LedInput extends InputPort
{ 
    // Use received brightness in HTML to set the LED
    // the name "set" is required for this function
    function set(input)
    {
        // Get each of the form values and store them into a
        // variable. The name of these values "pin1", "pin2", "suspect", etc.
        // must be set exactly in the HTML page.
        local pin1Value = input.pin1;
        local pin2Value = input.pin2;
        local pin5Value = input.pin5;
        local pin9Value = input.pin9;
        local suspect = input.suspect;
        local duration = input.duration;

        // Next we'll PWM the RGB LEDs
        hardware.pin1.write(pin1Value);
        hardware.pin2.write(pin2Value);
        hardware.pin5.write(pin5Value);

        // Then turn the lone LED on or off, depending on the radio input
        if (pin9Value == "1")
            hardware.pin9.write(1);
        else
            hardware.pin9.write(0);

        // Print a message to the server log.
        server.log(suspect + " set the LED to " + pin9Value + " for " + duration + " seconds");

        output_suspect.set(suspect + " set the LED to " + pin9Value + " for " + duration + " seconds");

        // Finally, set a timer to eventually turn the LEDs off
        imp.wakeup(duration, ledsOff);  // Call ledsOff() in "duration" seconds
    }

}

// Setup stuff -- Runs when the imp starts up.
hardware.pin1.configure(PWM_OUT, 0.01, 0.0); // PWM 0.01 period, 0% on
hardware.pin2.configure(PWM_OUT, 0.01, 0.0); // PWM 0.01 period, 0% on
hardware.pin5.configure(PWM_OUT, 0.01, 0.0); // PWM 0.01 period, 0% on
hardware.pin9.configure(DIGITAL_OUT);   // Set as digital out
hardware.pin9.write(0); // Write low

// This sets up the info in the planner. This will name the imp
// "LED Web Controller", and give it an input. An HTTP IN vimp's output
// must be connected to the input of this imp.
imp.configure("LED Web Controller/Reporter", [ LedInput() ], [output_suspect]);

Servers and PHP Scripts

As embedded electronics engineers, this web "stuff" is the hard part for us. This is the part of the example where you need a web server with PHP installed. Somewhere on that server, make a new PHP file (we called ours "impIn.php"). Then copy/paste the below PHP script into it:

language:php
<?php
/* Electric Imp POST Example */

if(isset($_POST['value']))
{
    $fd = fopen('impdata.txt', 'a');

    if(flock($fd, LOCK_EX))
    {
        fwrite($fd, $_POST['value'] . " at " . gmdate('Y-m-d H:i:s') . "\n");

        fflush($fd);
        flock($fd, LOCK_UN);
    }

    fclose($fd);
} 

?>

You'll probably also have to CHMOD that file (and any folder it might live in), to allow the proper users to execute it (all FTP clients should have a means for setting this property).

Setting Up the Planner

One, last step! We need to add another virtual imp (vimp) block to our planner. This time, in addition to the "HTTP IN" block from the last step, we need to add an "HTTP REQUEST" block.

Once it's added, attach the output of the imp to the input of the "HTTP REQUEST" block (click the "+" on the blue imp block, and connect the arrow to "HTTP REQUEST"). Then click the request block's "slider" and paste the URL (e.g. http://www.yourdomain.com/impIn.php) of your new php script into the blank URL box.

That's it! Now pull the HTML page from the previous example back up. It should still control the LEDs connected to your imp, however now it'll log some info to a text file on your web server. Point your browser to the same folder that your PHP file lives in, but instead go to a new file named "impdata.txt" (e.g.: http://www.yourdomain.com/impdata.txt). This file should have a line of text in it; something like: Jim set the LED to 1 for 100 seconds at 2013-07-19 18:40:19. That was generated by our PHP script, and a new line will pop up every time you update the LEDs.

If the HTTP request is successful, the "HTTP REQUEST" block in your planner should show the number "200" inside it. If, instead, it's showing an error code, there are a few things you can check:

• If it's showing a 404 make sure you've entered the URL of your PHP script correctly.
• If you're getting an error 500, double, triple, quadruple-check that the permissions of the PHP file (and the folder it may be in) will allow you to execute it. (This was the biggest stumbling block for us.)