LED Control From the Web Browser

dmitry_slepov

21 Jan 2017

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

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

*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:

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