Proposed Tibbit configuration
- 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.
GitHub Repository- 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
git clone https://github.com/tibbotech/tps-gpio-tutorials
cd tps-gpio-tutorials
npm install .
cd one-led
node server
server.jsComments 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 clientindex.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);
}
});
Comments