LED Control From the Web Browser

This is a simple application which enables the control of a GPIO line via a web browser.

Similar projects worth following
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 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.

Node.js Application

  • 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

GitHub Repository

Name: tps-gpio-tutorials

Repository page:

Clone URL:

Updated At: Mon Oct 10 2016

  • 1 × Linux TPS3 (LTPS3) board
  • 1 × TBP3 enclosure Optionally
  • 1 × Tibbit #18 (power jack)
  • 1 × Tibbit #10 (power supply)
  • 1 × Tibbit #39_2 (large red LED)*

View all 7 components

  • 1
    Step 1

    Installation and Configuration

    git clone
    cd tps-gpio-tutorials
    npm install .
    cd one-led
  • 2
    Step 2
    • Launch the app:
    • node server
  • 3
    Step 3


    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('')(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"){
    // 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...
            //.. 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

View all 5 instructions

Enjoy this project?



Similar Projects

Does this project spark your interest?

Become a member to follow this project and never miss any updates