LED Control From the Web Browser

By
Dmitry Dvorkin
-
488

About the Application

  • This is a simple application which 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, a 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

Onboard Software

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

GitHub Repository

Name: tps-gpio-tutorials

Repository page: https://github.com/tibbotech/tps-gpio-tutorials

Clone URL: https://github.com/tibbotech/tps-gpio-tutorials.git

Updated At: Mon Oct 10 2016

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

 

RELATED ARTICLESMORE FROM AUTHOR