About the Application
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
Installation and Configuration
git clone https://github.com/tibbotech/tps-gpio-tutorials cd tps-gpio-tutorials npm install . cd one-led
node server
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"); });
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>
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); } });