element14 Community
element14 Community
    Register Log In
  • Site
  • Search
  • Log In Register
  • Members
    Members
    • Benefits of Membership
    • Achievement Levels
    • Members Area
    • Personal Blogs
    • Feedback and Support
    • What's New on element14
  • Learn
    Learn
    • Learning Center
    • eBooks
    • STEM Academy
    • Webinars, Training and Events
    • Learning Groups
  • Technologies
    Technologies
    • 3D Printing
    • Experts & Guidance
    • FPGA
    • Industrial Automation
    • Internet of Things
    • Power & Energy
    • Sensors
    • Technology Groups
  • Challenges & Projects
    Challenges & Projects
    • Design Challenges
    • element14 presents
    • Project14
    • Arduino Projects
    • Raspberry Pi Projects
    • Project Groups
  • Products
    Products
    • Arduino
    • Dev Tools
    • Manufacturers
    • Raspberry Pi
    • RoadTests & Reviews
    • Avnet Boards Community
    • Product Groups
  • Store
    Store
    • Visit Your Store
    • 'Choose another store...'
      • Europe
      •  Austria (German)
      •  Belgium (Dutch, French)
      •  Bulgaria (Bulgarian)
      •  Czech Republic (Czech)
      •  Denmark (Danish)
      •  Estonia (Estonian)
      •  Finland (Finnish)
      •  France (French)
      •  Germany (German)
      •  Hungary (Hungarian)
      •  Ireland
      •  Israel
      •  Italy (Italian)
      •  Latvia (Latvian)
      •  
      •  Lithuania (Lithuanian)
      •  Netherlands (Dutch)
      •  Norway (Norwegian)
      •  Poland (Polish)
      •  Portugal (Portuguese)
      •  Romania (Romanian)
      •  Russia (Russian)
      •  Slovakia (Slovak)
      •  Slovenia (Slovenian)
      •  Spain (Spanish)
      •  Sweden (Swedish)
      •  Switzerland(German, French)
      •  Turkey (Turkish)
      •  United Kingdom
      • Asia Pacific
      •  Australia
      •  China
      •  Hong Kong
      •  India
      •  Korea (Korean)
      •  Malaysia
      •  New Zealand
      •  Philippines
      •  Singapore
      •  Taiwan
      •  Thailand (Thai)
      • Americas
      •  Brazil (Portuguese)
      •  Canada
      •  Mexico (Spanish)
      •  United States
      Can't find the country/region you're looking for? Visit our export site or find a local distributor.
  • Translate
  • Profile
Personal Blogs
  • Members
  • More
Personal Blogs
Legacy Personal Blogs LED Control From the Web Browser
  • Blog
  • Documents
  • Mentions
  • Sub-Groups
  • Tags
  • More
  • Cancel
  • New
Blog Post Actions
  • Subscribe by email
  • More
  • Cancel
  • Share
  • Subscribe by email
  • More
  • Cancel
Group Actions
  • Group RSS
  • More
  • Cancel
Engagement
  • Author Author: dmitry_slepov
  • Date Created: 21 Jan 2017 12:50 PM Date Created
  • Views 414 views
  • Likes 1 like
  • Comments 0 comments
  • ltpp3
  • led
  • nodejs
  • tibbo
Related
Recommended

LED Control From the Web Browser

dmitry_slepov
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                                                                                                                                                       

image

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

  • Sign in to reply
element14 Community

element14 is the first online community specifically for engineers. Connect with your peers and get expert answers to your questions.

  • Members
  • Learn
  • Technologies
  • Challenges & Projects
  • Products
  • Store
  • About Us
  • Feedback & Support
  • FAQs
  • Terms of Use
  • Privacy Policy
  • Legal and Copyright Notices
  • Sitemap
  • Cookies

An Avnet Company © 2023 Premier Farnell Limited. All Rights Reserved.

Premier Farnell Ltd, registered in England and Wales (no 00876412), registered office: Farnell House, Forge Lane, Leeds LS12 2NE.

ICP 备案号 10220084.

Follow element14

  • X
  • Facebook
  • linkedin
  • YouTube