RasPiCommPlus Logo: Controlling LEDs from the browser

In this tutorial we will take a look at how we can use the WebApi to control LEDs from the browser. It is designed for use with the RasPiComm+, now available for preorder on Indiegogo!

Hardware Setup

We use a similiar hardware setup as the first tutorial, with the exception of the analog input module and potentiometer, which will be replaced by a html slider in this example.

Take a look at the following schematics:

Schematics

Setting up the WebApi

We will use the WebApi to control the gpios. Setting up the WebApi is covererd in Tutorial 2 Setup the WebApi.

Please follow this quick tutorial and come back when the WebApi is running.

Welcome back! :-)

Using the WebApi to configure the GPIOs

Open the WebApi in your browser

Now we will take a look at the WebApi, open the browser and go to:

http://[INSERT RASPBERRYPI IP HERE]:8080/

as shown in the following screenshot.

Screenshot WebApi
Hint: You can check the ip address of your raspberry pi by executing the ifconfig from your commandline.

Configure the GPIO

In the following few steps you will learn how you can set a gpio from the WebApi:

  1. Select the GPIO 55
  2. Export the GPIO
  3. Set the direction of the GPIO to output
  4. Set the GPIO value to high
  5. Check if the first LED on your breadboard lights up
  6. Notice how the corresponding get requests in the bottom part are adjusted

The configured GPIO should look as in the screenshot below:

Screenshot WebApi GPIOs

GPIO functions as GET requests

Every button (export, unexport, get direction, set direction, get value and set value) sends a corresponding GET request to the WebApi. The URL used in the GET request for each button is shown in the panel GPIO functions.

The parameters are updated from the values selected in the comboboxes above.

Create a simple Web Application

Overview

Now we will write a simple Web Application that uses GET requests to the WebApi to control the LEDs with a slider as shown in the following screenshot:

Screenshot of the simple web application

Write the Application

  1. Create a new html file and name it application.html
  2. Copy and paste the code below into the file
  3. Replace the IP-Address in the line
    var base_uri = "http://192.168.2.120:8080";
    with the IP Adress of your raspberry pi.
  4. Now open the application.html file in your favourite browser
    1. Click on Configure GPIOs
    2. Move the slider and see the LEDs lighting up
Content of application.html
        
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head title="Control LED Application">

    <script type="text/javascript">

      var base_uri = "http://192.168.2.120:8080";

      /* helper function that sends a get request to the supplied url and returns the response */
      function http_get(url) {
        var xmlHttp = null;
        xmlHttp = new XMLHttpRequest();
        xmlHttp.open("GET", url, true);
        xmlHttp.send(null);
        return xmlHttp.responseText;
      }

      /* initializes the specified gpio */
      function init_gpio(gpio) {

        /* first export the gpio */
        http_get(base_uri + '/gpio/export?gpio=' + gpio);

        /* then configure the gpio as an output */
        http_get(base_uri + '/gpio/direction/set?gpio=' + gpio + '&direction=out');
      }

      /* set the specified output at high */
      function set_output(gpio) {
        http_get(base_uri + '/gpio/value/set?gpio=' + gpio +'&value=1');
      }

      /* set the specified output to low */
      function clear_output(gpio) {
        http_get(base_uri + '/gpio/value/set?gpio=' + gpio + '&value=0');
      }

      /* initialize the gpios */
      function init_gpios() {
        var i;
        for (i = 0; i < 8; i++) {
          init_gpio(55 + i);
        }
      }

      var lastLedCount = -1;

      /* handle a value change */
      function set_led(value) {
        var i;

        /* compute the number of LEDs we want to light up */
        var ledCount = Math.floor(value / 500);

        /* update the label lValue */
        document.getElementById('lValue').innerHTML = value;

        /* update the label lLEDCounts */
        document.getElementById('lLEDCount').innerHTML = ledCount;

        if (lastLedCount !== ledCount) {
          /* update the leds */
          for (i = 0; i < 8; i++) {
            if (i < ledCount) {
              set_output(55 + i);
            } else {
              clear_output(55 + i);
            }
          }
        }
      }

    </script>

  </head>
<body>

  <h1>Simple Control LED WebApp</h1>
  <button onclick="init_gpios();">Configure GPIOs</button>

  <div>
    <input min="0" max="4096" type="range" value="0" onchange="set_led(this.value);" />
  </div>
  <div><label>Value: </label><label id="lValue">0</label></div>
  <div><label>LEDs: </label><label id="lLEDCount">0</label></div>

</body>
</html>

        
       

Conclusion

In this tutorial we've shown how the WebApi can be used in an interactive way to configure the GPIOs and test the hardware setup.

We've also seen how the WebApi can be accessed by GET requests which makes the features available using a browser.

We even build a small web application that demonstrates the use of WebApi in to control hardware.

Twitter Github Tumblr PInterest Youtube