- How to Adjust X and Y Axis Scale in Arduino Serial Plotter (No Extra Software Needed)Posted 2 months ago
- Elettronici Entusiasti: Inspiring Makers at Maker Faire Rome 2024Posted 2 months ago
- makeITcircular 2024 content launched – Part of Maker Faire Rome 2024Posted 5 months ago
- Application For Maker Faire Rome 2024: Deadline June 20thPosted 6 months ago
- Building a 3D Digital Clock with ArduinoPosted 11 months ago
- Creating a controller for Minecraft with realistic body movements using ArduinoPosted 12 months ago
- Snowflake with ArduinoPosted 12 months ago
- Holographic Christmas TreePosted 1 year ago
- Segstick: Build Your Own Self-Balancing Vehicle in Just 2 Days with ArduinoPosted 1 year ago
- ZSWatch: An Open-Source Smartwatch Project Based on the Zephyr Operating SystemPosted 1 year ago
LED Control From the Web Browser
Web site:
http://tibbo.com/linux/nodejs/led-control-from-browser.htmlProject Summary:
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.
Full Project:
What you need
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); } });