Close
0%
0%

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
201 views
0 followers
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.

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

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

  • 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 https://github.com/tibbotech/tps-gpio-tutorials
    cd tps-gpio-tutorials
    npm install .
    cd one-led
  • 2
    Step 2
    • Launch the app:
    • node server
  • 3
    Step 3

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

View all 5 instructions

Enjoy this project?

Share

Discussions

Similar Projects

Does this project spark your interest?

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