LinuxQuestions.org
Visit Jeremy's Blog.
Go Back   LinuxQuestions.org > Blogs > Dmitry_Slepov
User Name
Password

Notices


Rate this Entry

LED Control From the Web Browser

Posted 01-21-2017 at 07:37 AM by Dmitry_Slepov
Tags arm, linux, nodejs, tibbo

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
  • Define the configuration in the LTPS Web Interface
  • Login to the LTPP3 board from the SSH client
  • Install NPM and other tools as required
  • Install the app:

Code:
git clone https://github.com/tibbotech/tps-gpio-tutorials
cd tps-gpio-tutorials
npm install .
cd one-led
  • Launch the app:
Code:
node server
server.js
Comments in the code explain how it works
Code:
// 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:

Code:
<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:
Code:
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);
        }
    });
Posted in Uncategorized
Views 904 Comments 0
« Prev     Main     Next »
Total Comments 0

Comments

 

  



All times are GMT -5. The time now is 06:19 PM.

Main Menu
Advertisement
Advertisement
My LQ
Write for LQ
LinuxQuestions.org is looking for people interested in writing Editorials, Articles, Reviews, and more. If you'd like to contribute content, let us know.
Main Menu
Syndicate
RSS1  Latest Threads
RSS1  LQ News
Twitter: @linuxquestions
Open Source Consulting | Domain Registration