Controlling Brightness of LED Through Web Interface

Arduino UNO

LED (generic)

We have seen numerous examples of <a href="https://circuitdigest.com/tags/led-blinking">Blinking an LED using different Microcontrollers</a> and different programming languages. Today, we will use a very popular JavaScript framework  Node.js to control the LED connected to Arduino Uno. We will also use Node.js to control the brightness of LED from a webpage using Arduino. By few tweaks and using ESP8266, this can be converted into an <a href="http://circuitdigest.com/internet-of-things-iot-projects">IoT project</a> where the LED can be controlled from anywhere.<h3 >What is Node.js?</h3>The Node.js is a widely used JavaScript-based framework built on Google Chrome’s JavaScript V8 Engine and applied in developing I/O intensive web applications such as single-page applications, video streaming sites etc.We have done an informative tutorial previously on <a href="https://circuitdigest.com/microcontroller-projects/programming-raspberry-pi-with-nodejs-to-blink-led">Getting started with Node.js and Raspberry Pi to control an LED</a>. In this tutorial, we will follow the similar approach i.e. the LED will be controlled using two methods such as:<ul ><li >Simple LED blink by writing a JavaScript code in the Node.js framework. </li></ul><ul ><li >LED Brightness Control Using Node.js framework and a web interface from any browser: The Arduino UNO will act as a webserver and HTML web page will be hosted on a PC or Laptop.</li></ul>Software:<ul ><li >Arduino IDE: For uploading sketch to Arduino UNO Board.</li></ul><ul ><li >Firmata: It is a protocol for communicating with different microcontrollers from software on a computer, smartphone, etc. The Firmata firmware can be loaded in any microcontroller board (like Arduino, Teensy) and is able to talk to any laptop, PC or smartphone. Firmata Library comes with Arduino IDE, so no need to download from anywhere. We have done a tutorial on <a href="https://circuitdigest.com/microcontroller-projects/controlling-arduino-with-raspberry-pi-using-pyfirmata">controlling Arduino with Raspberry Pi using pyFirmata</a>.</li></ul><ul ><li >Johnny-Five: Johnny-Five is the JavaScript Based Robotics and IoT platform used to write codes in JavaScript and Used to make a bridge between the Arduino Boards and Computer. Johnny-Five have been tested with a variety of Arduino-compatible Boards such as Arduino UNO, NANO, Promini, etc. In this tutorial, the Johnny-Five library has to be downloaded in order to use all its features. The installation guide will be explained later-on in this tutorial. </li></ul><h3 >Setting Up Node.js Framework</h3>Before starting the coding and development, the Node.js has to be downloaded and set up. For downloading the Node.js environment just follow simple steps.Step 1:-<a href="https://nodejs.org/">Download the.exe file of Node.js</a> from its official website.Step 2:- Run the.exe and follow the given instructions in the installer.Step 3:- Restart your computer as it is recommended in the Node.js Document and also to use all the features of Node.jsStep 4:- To check if the node has been installed, open Command Prompt and type Node –vStep 5:- The Node.js version will be displayed indicating the Node.js is installed.<h3 >Installing Johnny-Five Library</h3>Now after downloading the Node.js, create a new Folder named “LED_Control” in Documents to keep all the project files in one place. Every project file will be kept in the “LED_Control” folder. Now download the Johnny-Five Library in the “LED_Control” folder.  To download, follow steps below:Step 1:- Open Command PromptStep 2:- Go to “LED_Control” Folder by following ‘cd’ command.Step 3:- Run the Command ‘npm install johnny-five’Step 4:- This will install all dependencies of Johnny-Five.Step 5:- Also install necessary libraries used in this tutorial for controlling brightness of LED. There are three libraries used here:<ul ><li >express: HTTP server wrapper</li></ul><ul ><li >socket.io: WebSockets library</li></ul><ul ><li >serialport: Serial port wrapper</li></ul>Step 5:- Run the below commands one by one to install these three libraries.<pre ><code >npm install express npm install socket.io npm install serialport </code></pre>As told earlier the project is divided in two parts:<ul ><li >Firstly, Arduino Blinking LED with Node.js</li></ul><ul ><li >Secondly, Controlling LED Brightness from web interface using Arduino and Node.js.</li></ul><h3 >Blinking LED with Arduino and Node.js</h3>To blink LED, the Arduino has to be Set up to communicate with Computer.Setting up Arduino UNO for Blinking LED: In order to make Arduino UNO accept command from Laptop to Control LED, the Firmata firmware has to be loaded in to the Arduino UNO. To load the Firmata Firmware, just follow these simple steps:<ul ><li >Connect the Arduino UNO using USB cable</li></ul><ul ><li >Open Arduino IDE and select Arduino UNO board (If using other board then select respective one) from Tools.</li></ul><ul ><li >Select the Respective COM port of connected Arduino UNO</li></ul><ul ><li >Now find the Firmata Sketch using Menu -> File -> Examples -> Firmata -> StandardFirmata. </li></ul><ul ><li >Upload the “StandardFirmata” sketch by going to File -> Upload.</li></ul>This will load the Firmata Sketch onto Arduino UNO and now the Arduino UNO is ready to accept any command from computer. Writing Node.js program for Blinking LED:To write a Node.js program open any text editor (Notepad, Notepad++, etc.) and paste the ‘blink_led’ code attached at the end of this tutorial and save it with an extension of ‘.js’ i.e. (blink_led.js) in the “LED_Control” folder created before. We will discuss important steps in blink_led.js code file.Initially define the Pin of microcontroller where led is connected. In this example, the LED is connected to Pin 5 of Arduino UNO. The ‘var’ in Node.js represents variable declaration.<pre ><code >var led_pin=5; </code></pre>The johnny-five module needs to be included and the board needs to be selected. The modules in Node.js are libraries. The function ‘require()’ will access the module.<pre ><code >var johnny_five=require("johnny-five"); var arduino_board=new johnny_five.Board(); </code></pre>The console.log statement is similar to print statement and it will print message. And the LED pin is set to output mode and the defined delay is given to blink led.<pre ><code >console.log("LED has Started Blinking!"); var led = new johnny_five.Led(led_pin); led.blink(100); </code></pre>Now to run the program follow steps below:<ul ><li >Open Command Prompt</li></ul><ul ><li >Locate “LED_Control” folder by following ‘cd’ command</li></ul><ul ><li >Run ‘Node led_blink.js’ command. If successfully executed it will show "LED has Started Blinking!" as shown in the image below. </li></ul><ul ><li >The led will start blinking in the Arduino UNO Pin 5.</li></ul><ul ><li >And this finishes the first part of our tutorial i.e. Blinking LED with Node.js</li></ul><h3 >Controlling LED Brightness using Arduino and Node.js Webserver</h3>Similar to Blinking an LED with Node.js, this section will also have some parts i.e. Setting up Arduino UNO, Setting up Web Interface and Writing a Node.js program.Setting up Arduino UNO to control Brightness of LED: To set up the Arduino UNO, simply upload the sketch “arduino_control.ino” into Arduino UNO board and that’s it. This will set up the Arduino Board. You can <a href="https://circuitdigest.com/sites/default/files/Arduino-with-nodejs.zip">download the complete code with HTML files from here</a>. The “arduino_control.ino” code has following important steps involved.Initially the baud rate is set at 9600.<pre ><code >Serial.begin(9600); </code></pre>The serial port always looks for incoming byte and the byte is written to Pin 5 which is a PWM Pin.<pre ><code >while(!Serial.available()); analogWrite(5, Serial.read()); </code></pre>That’s it. This will set the Arduino to latch the byte to <a href="https://circuitdigest.com/tutorial/what-is-pwm-pulse-width-modulation">PWM</a> pin and will change the brightness of LED.Setting up Web Interface: To control the brightness of led using web interface, one small piece of HTML code is written to have an interface in the Browser. To have interface follow simple steps below:<ul ><li >Create a new folder named “public” inside the “LED_Control” folder created before.</li></ul><ul ><li >Now download the “index.html” and “style.css” files and move both files inside the “public” folder created in first step above. <a href="https://circuitdigest.com/sites/default/files/Arduino-with-nodejs.zip">Files can be downloaded from here.</a></li></ul>This will create a slider on webpage to control the brightness of LED using Node.js and Arduino.Controlling an LED from webpage is interesting to learn and it can done with other microcontroller by creating a webserver and host the webpage on webserver. Check all the <a href="https://circuitdigest.com/tags/webserver">webserver related projects here</a>.Writing Node.js program to control Brightness of LED:Next step would be writing the “brightness_control.js” sketch using Node.js and executing the code. The execution of the code will be bit similar to the Blinking an LED with Node.js.To write a Node.js program open any text editor (Notepad, Notepad++, etc.) and paste the ‘brightness_control” code attached at the end of this tutorial and save it with an extension of ‘.js’ i.e. (brightness_control.js) in the “LED_Control” folder created before. You can also <a href="https://circuitdigest.com/sites/default/files/Arduino-with-nodejs.zip">download the code from here</a>.Similar to Blink Led Node.js program, this section will also use modules (library). Include the ‘express’, ‘http’ and ‘serial port’ module.<pre ><code >var express = require('express'); app = express(); server = require('http').createServer(app); io = require('socket.io').listen(server); var SerialPort = require("serialport")//.SerialPort </code></pre>Now set the COM port and baudrate. Note that in windows, it will always be COM with extension of number (COM6, COM4, COM24 etc.), so set below as required after ‘/’. Also set buadrate.<pre ><code >var serialPort = new SerialPort("/COM4", { baudRate: 9600 }); </code></pre>Start to listen the server at port 8080.<pre ><code >server.listen(8080); </code></pre>Set the brightness at 0 initially. Then latch the brightness data to IO with sockets module, which is a websocket module. The data will receive by Web Interface using socket protocol.<pre ><code >io.sockets.on('connection', function (socket) { socket.on('led', function (data) { brightness = data.value; var buf = new Buffer(1); buf.writeUInt8(brightness, 0); serialPort.write(buf); </code></pre> Now emit the LED brightness value got from socket to LED pin.<pre ><code >io.sockets.emit('led', {value: brightness}); }); socket.emit('led', {value: brightness}); }); </code></pre>Now just to debug, add a print statement at the end. Console.log is a print statement in Node.js.<pre ><code >console.log("Web Server Started go to 'http://localhost:8080' in your Browser."); </code></pre>Now to run the program by following the steps below:<ul ><li >Open Command Prompt</li></ul><ul ><li >Locate “LED_Control” folder by following ‘cd’ command</li></ul><ul ><li >Run ‘Node brightness_control.js’ command. If successfully executed it will show "Web Server Started go to "<a href="http://localhost:8080/">http://localhost:8080</a>" in your Browser." just below the command. </li></ul><ul ><li >Now go to your browser and type “localhost:8080” in the url.</li></ul><ul ><li >To change the brightness just move the slider from 0-255 values.</li></ul>The complete code and working video of both section is attached below. Also if you have any doubt or suggestion then you can reach us through <a href="https://circuitdigest.com/forums">forum</a> or comment below. All the <a href="https://circuitdigest.com/sites/default/files/Arduino-with-nodejs.zip">code files can also be downloaded from here.</a>Code<a href="https://circuitdigest.com/sites/default/files/Arduino-with-nodejs.zip">Download all the codes from here.</a>Part 1 - Node.js Code for LED Blinking:var led_pin=5;var johnny_five=require("johnny-five"); var arduino_board=new johnny_five.Board(); arduino_board.on("ready", function() {     console.log("LED has Started Blinking!");     var led = new johnny_five.Led(led_pin);     led.blink(100);  });Part 2 -a- Arduino code for controlling Brightness of LED:void setup(){  Serial.begin(9600);}void loop(){  while(!Serial.available());  //wait until a byte was received  analogWrite(5, Serial.read());//output received byte}Part 2 -b - Node.js Code for Controlling Brightness of LED:var express = require('express');app = express();server = require('http').createServer(app);io = require('socket.io').listen(server); var SerialPort = require("serialport")//.SerialPortvar serialPort = new SerialPort("/COM4", { baudRate: 9600 }); server.listen(8080);app.use(express.static('public'));              var brightness = 0; io.sockets.on('connection', function (socket) {        socket.on('led', function (data) {                brightness = data.value;                 var buf = new Buffer(1);                buf.writeUInt8(brightness, 0);                serialPort.write(buf);                 io.sockets.emit('led', {value: brightness});           });         socket.emit('led', {value: brightness});}); console.log("Web Server Started go to '<a href="http://localhost:8080/">http://localhost:8080</a>' in your Browser.");Video<div class="se-component se-video-container __se__float-none" contenteditable="false" style="width: 100%;"><figure style="width: 100%; height: 56.25%; padding-bottom: 56.25%; margin: 0px;"><iframe frameborder="0" allowfullscreen="" src="https://www.youtube.com/embed/6OM6cman-6A" data-proportion="true" data-percentage="100%,56.25%" data-size="100%,56.25%" data-align="none" style="width: 100%; height: 100%;" data-index="0" data-file-size="0" data-origin="100%,56.25%"></iframe></figure></div>

Controlling Brightness of LED Through Web Interface

A simple project to use Node.js with Arduino Uno and control an LED's brightness by simply moving a slider.