Tibbo > Linux Ecosystem > Node.JS API > LED Control From the Web Browser

LED Control From the Web Browser

About the Application

This is the simplest application enabling the control of a GPIO line through a web browser: a click on a rectangle will toggle the line HIGH/LOW. You can use this app to control an LED Tibbit, a relay Tibbit, or some other "output" Tibbit of your choosing.
This app uses a popular socket.io library to facilitate a continuous connection between the TPS and the browser, as well as the AngularJS V1.x.x front-end framework that simplifies the development of single-page applications.

Click the rectangle to see how the web interface works

Proposed Tibbit configuration (click to enlarge)

What you need

Hardware

1 x Linux TPS3 (LTPS3) board, optionally in a TPB3 enclosure
1 x Tibbit #10 (power supply)
1 x Tibbit #18 (power jack)
1 x Tibbit #00-3 (2 direct I/O lines with 5V and ground)*
1 x Tibbit #39_2 (large red LED)*

*Feel free to replace these with other output Tibbits

Onboard Software

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

Node.js Application

Express and socket.io are used to support the web interface functionality
The code for LED manipulation, web interface connectivity, and the HTTP server providing web client files is in the server.js file
Web client files are served from the /public folder

Configuration and Installation

Define the required configuration in the LTPS Web Interface
Login to the LTPP3 board from the SSH client
Install NPM and other tools as needed
Install the app:

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);
        }
    });