Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

LED Control From the Web Browser

DZone's Guide to

LED Control From the Web Browser

What's IoT without an Internet browser? In this example, set up an LED control to be used through your browser, giving you another avenue to operate it.

· IoT Zone
Free Resource

Address your IoT software testing needs – improve quality, security, safety, and compliance across the development lifecycle.

This is a simple application that enables the control of a GPIO line via a web browser. To toggle the line HIGH/LOW, click on a rectangle. This app can be used to control a relay Tibbit, an LED Tibbit, or some other "output" Tibbit.

The app utilizes a popular socket.io library to facilitate a connection without interruption between the TPS and the browser, as well as the AngularJS V1.x.x front-end framework that makes the development of single-page applications simple.

What You Need

Hardware

*Feel free to replace the Tibbits with other output ones

Proposed Tibbit configuration

Onboard Software

  • Node.js V6.x.x (pre-installed during production)

GitHub Repository

Node.js Application

  • Socket.io and Express and are used to support the web interface functionality.

  • The code for web interface connectivity, LED manipulation, and the HTTP server providing web client files is located in the server.js file.

  • Web client files are served from the /public folder.

Installation and Configuration

git clone https://github.com/tibbotech/tps-gpio-tutorials
cd tps-gpio-tutorials
npm install .
cd one-led
  • Launch the app:

node server

Server.js

Comments in the code explain how it works:

// Requires HTTP as WebSocket server modules
const express = require("express");
const app = express();
const http = require('http').Server(app);
const io = require('socket.io')(http);
const gpio = require("@tibbo-tps/gpio");

// Serves static assets from the 'public' folder
app.use("/", express.static('public'));

const led = gpio.init("S15A");

if(led.getDirection() === "input"){
    led.setDirection('output');
    led.setValue(1);
}

// Listens to the incoming WebSocket connection
var clients = io.on('connection', function(socket){
    // When the connection is established
    console.log('USER CONNECTED');

    // Reads I/O line state..
    // ..and broadcasts it to all the connected clients
    var value = led.getValue();

    clients.emit('tps:state:changed', value);

    // When any of the connected clients require a change of the line state
    socket.on('web:state:changed', function(value){
        // Changes the line state...
        led.setValue(value);

        //.. and broadcasts it to all the clients
        clients.emit('tps:state:changed', value);
    });

    socket.on('disconnect', function(){
        console.log('USER DISCONNECTED');
    });
});

// Runs HTTP server on :3000 port
http.listen(3000,function(){
    console.log("LISTENING");
});

Web Client

Index.html

Comments in the code explain how it works:

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.8/socket.io.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
        <script type="text/javascript" src="client.js"></script>
        <link href="main.css" rel="stylesheet" type="text/css"/>
    </head>
    <body ng-app="leds"> <!-- The ng-app directive bootstraps your Angular application -->

    <!-- The ng-controller directive attaches controller to a view -->
    <!-- The ng-hide directive hides DOM element depending on the 'locked' varibale -->
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="110px" height="110px" xml:space="preserve"
                ng-controller="ledsController"
                ng-hide="locked">

                <!-- The ng-class directive changes class of the DOM element depending on the 'state' variable -->
        <!-- The ng-click directive evokes the function on click by DOM element -->
                <g transform="translate(5,5)" class="led-icon">
                    <rect width="100" height="100" class="frame"></rect>
                    <rect x="10" y="10" width="80" height="80"
                        class="led"
                        ng-class="(state ? 'on' : 'off')"
                        ng-click="switch()">
                    </rect>
                </g>
            </svg>
    </body>
</html>

Client.js

Comments in the code explain how it works:

angular.module('leds', [])
    .controller('ledsController', function($scope) {
        var socket = io(); //

        $scope.locked = true; // Disables the view by default

        socket.on('connect', function () { // On connection established
            $scope.locked = false; // Enables the view
            $scope.$apply(); // Re-renders the view
        });

        socket.on('disconnect', function () { // Hides everything on disconnect
            $scope.locked = true;
            $scope.$apply();
        });

        socket.on('tps:state:changed', function (value) { // Catches the 'tps:state:changed' event
            $scope.state = value == 0;
            $scope.$apply();
        });

        $scope.switch = function() { // Sends the inversed value of the 'state' variable
            console.log($scope.state ? 1 : 0);
            socket.emit('web:state:changed', $scope.state ? 1 : 0);
        }
    });


Accelerate the delivery of high-quality software in the connected IoT era through an integrated analysis, testing, security, and analytics platform

Topics:
iot projects ,iot ,led ,tutorial ,angularjs

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}