W5100 – CONTROLLING AN RGB LED VIA PWM WITH HTML

Expanding a little more of the content related to creating a Web Server using Arduino UNO together with Ethernet Shield W5100.
ORIGINAL POST
By Daniel Maderia
components
Hardware Components
W5100 ethernet shield
X 1
Arduino uno
X 1
Software Apps and online services
Arduino IDE
details

rgb.PNG

In this tutorial, we will expand a little more of the content related to creating a  Web Server  using Arduino UNO together with Ethernet Shield W5100 .  Previously, we learned to develop an interface using selection boxes, through which, it became possible to activate and deactivate relays (and consequently loads that could not be activated directly by Arduino UNO ). This time, we will demonstrate how to create an HTML interface to control the color of light emitted by an RGB LED using PWM .

It is important, for the full understanding of this tutorial, that the reader has read all the previous tutorials:

Also, if you want to learn more about how these types of LEDs work, check out our specific tutorial on using RGB LEDs .

Index View ]


Let’s go – Creating the HTML interface for handling the RGB LED via PWM

Required components

To develop this project, we will need the following components:

assembling the project

Hardware used.

programming

#include <SPI.h>
#include <Ethernet.h>
mac byte [] = { 0xDE , 0xAD , 0xBE , 0xEF , 0xFE , 0xED } ;
IPAddress ip ( 192, 168, 25, 16 ) ;
EthernetServer server ( 80 ) ;
void setup ()
{
Ethernet. begin ( mac, ip ) ;
server. begin () ;
pinMode ( 5,OUTPUT ) ;
pinMode ( 6,OUTPUT ) ;
pinMode ( 9,OUTPUT ) ;
// Serial.begin(9600);
}
void loop ()
{
String req_str;
EthernetClient client = server. available () ;
if ( client )
{
req_str = “” ;
boolean currentLineIsBlank = true ;
while ( client. Connected ())
{
if ( client. available ())
{
char c = client. read () ;
req_str += c;
if ( c == ‘n’ && currentLineIsBlank )
{
int pwm_range_5 = 0;
int pwm_range_6 = 0;
int pwm_range_9 = 0;
client. println ( “HTTP/1.1 200 OK” ) ;
client. println ( “Content-Type: text/html” ) ;
client. println ( “Connection: close” ) ;
client. println () ;
client. println ( “<!DOCTYPE html>” ) ;
client. println ( “<html lang=”en”>” ) ;
client. println ( “<head>” ) ;
client. println ( “<meta charset= “UTF-8″/>” ) ;
client. println ( “<title>RGB Silicon Life</title>” ) ;
client. println ( “</head>” ) ;
client. println ( “<body>” ) ;
client. println ( “<h1>RGB leds activation</h1>” ) ;
client. println ( “<hr/>” ) ;
client. println ( “<h2>RGB LED Components</h2>” ) ;
if ( req_str. startsWith ( “POST” ))
{
String POST_content = “” ;
for ( int i=0;i < 26;i++ )
{
c = customer. read () ;
content_POST += c;
}
pwm_range_5 = content_POST. substring (( POST_content . indexOf ( “PWM5” ) + 5 ) , ( POST_content . indexOf ( “PWM6” ) – 1 )) . toInt () ;
pwm_range_6 = content_POST. substring (( POST_content . indexOf ( “PWM6” ) + 5 ) , ( POST_content . indexOf ( “PWM9” ) – 1 )) . toInt () ;
pwm_range_9 = content_POST. substring (( POST_content . indexOf ( “PWM9” ) + 5 ) , ( POST_content . indexOf ( “PWM9” ) + 8 )) . toInt () ;
analogWrite ( 5,pwm_range_5 ) ;
analogWrite ( 6,pwm_range_6 ) ;
analogWrite ( 9,pwm_range_9 ) ;
content_POST = “” ;
}
client. println ( “<form action=”” method=”post”>” ) ;
client. println ( “<p>Port D5: ” + String ( pwm_range_5 ) + “</p>” ) ;
client. println ( “0 <input type=”range” value=”” + String ( pwm_range_5 ) + “”name=”PWM5″ min=”0″ max=”255” step= “1” onchange=”submit()”/> 255″ ) ;
client. println ( “<p>Port D6: ” + String ( pwm_range_6 ) + “</p>” ) ;
client. println ( “0 <input type=”range” value=”” + String ( pwm_range_6 ) + “”name=”PWM6″ min=”0″ max=”255” step= “1” onchange=”submit()”/> 255″ ) ;
client. println ( “<p>Port D9: ” + String ( pwm_range_9 ) + “</p>” ) ;
client. println ( “0 <input type=”range” value=”” + String ( pwm_range_9 ) + “”name=”PWM9″ min=”0″ max=”255” step= “1” onchange=”submit()”/> 255″ ) ;
client. println ( “</form>” ) ;
client. println ( “</body>” ) ;
client. println ( “</html>” ) ;
break ;
}
if ( c == ‘n’ )
{
currentLineIsBlank = true ;
}
else if ( c != ‘r’ )
{
currentLineIsBlank = false ;
}
}
}
delay ( 1 ) ;
client. stop () ;
}
}

putting it to work

RGB led activation interface via pwm
HTML interface for activating the RGB led.

understanding in depth

software

Before we start with the explanation of the code, we would like to emphasize that we will only present the details of the topics not covered in the previous tutorials, as this way it will be easier to focus on the parts referring to the updates made to the already existing program, therefore, if If you have any questions about any part of the program that is not explained at this time, we suggest that you access our aforementioned materials.

– Defining the prerequisites for the code to work

Initially, we must include two libraries in the code so that it could work correctly. The SPI.h library  ,  responsible for the communication of the shield modules with the  Arduino UNO  using the SPI  protocol  and the Ethernet.h  library  ,  which acts by enabling the connection of the set, at first, with a local network.

After including the mentioned libraries, we must define a  MAC address  (remember that this can be anything, as long as it is unique in your local network) and an  IP address  (this must be a valid and available address within your local network ). In addition, we must create the object that will be responsible for representing the  Web Server  in the code (here, we call this  server ) and relate it to port 80.

#include <SPI.h>
#include <Ethernet.h>
mac byte [] = { 0xDE , 0xAD , 0xBE , 0xEF , 0xFE , 0xED } ;
IPAddress ip ( 192, 168, 25, 16 ) ;
EthernetServer server ( 80 ) ;

– Defining initial settings

Within the setup() function , we must determine the operating mode of the digital pins that will be used (these will play the role of digital outputs) . In addition, we start the connection with the local network through the Ethernet.begin()  function  (passing as parameter the  MAC  and  IP addresses  defined previously) and we also start the  Web Server  through the sentence  server.begin()  (remember that  server  is the object created to represent the  Web Server  in code).

void setup ()
{
Ethernet. begin ( mac, ip ) ;
server. begin () ;
pinMode ( 5,OUTPUT ) ;
pinMode ( 6,OUTPUT ) ;
pinMode ( 9,OUTPUT ) ;
}

– Understanding browser requests

In previous tutorials, we highlighted the basic operating mechanism of codes aimed at creating Web Servers, which starts through a standard procedure, which in turn, consists of using a variable to obtain character by character of the request made by the browser until this is completely received by  Arduino UNO , so that only from this point does the process of creating the page begin.

In our last tutorial, we presented how the GET method works, however, in this material we will make use of the POST method. Like the GET method, the POST method also serves to send information from forms to our Web Server. The first step to carry out this procedure in the declaration of a local variable, of type String (this will serve to store the request made by the browser).

void loop ()
{
String req_str;
.
.
.

Then, we create the process in which this variable will be filled with the request characters.

if ( client. available ())
{
char c = client. read () ;
req_str += c;
.
.
.

According to the previous tutorial, we could learn that, in a GET request, the request parameter, that is, the element coming from the system’s user interaction with a form, is located in the first line of the request in question. However, in the case of a POST request, this same element is registered only at the end of it. So, what we are going to do here is just read the entire request (or until the apparent end, as if it were a GET request) and then we will force the program to read a few more characters from it (these will contain the request parameter).

The first step to be performed after reading the entire request is to initialize the variables that will contain the values ​​to be used in the generation of the PWM signal for each component.

if ( c == ‘n’ && currentLineIsBlank )
{
int pwm_range_5 = 0;
int pwm_range_6 = 0;
int pwm_range_9 = 0;
.
.
.

– Submitting the page header

After we have read the entire request, we must first send the default header to the browser.

client. println ( “HTTP/1.1 200 OK” ) ;
client. println ( “Content-Type: text/html” ) ;
client. println ( “Connection: close” ) ;
client. println () ;

– Developing our page

To start developing our page, we first use the sentence <!DOCTYPE html> to inform the browser that we are using version 5 of the HTML language.

client. println ( “<!DOCTYPE html>” ) ;

As we know, between the <head> and </head> tags , we make some settings relevant to the functioning of the page we are developing. The aforementioned settings correspond to the determination of the character set that should be used by the browser (to display accented characters) and the inclusion of a title in the browser’s page tab.

client. println ( “<head>” ) ;
client. println ( “<meta charset= “UTF-8″/>” ) ;
client. println ( “<title>RGB Silicon Life</title>” ) ;
client. println ( “</head>” ) ;

In the body of the page, we start by writing some titles using the <h1>  and < h2 > header tags  .

client. println ( “<body>” ) ;
client. println ( “<h1>RGB leds activation</h1>” ) ;
client. println ( “<hr/>” ) ;
client. println ( “<h2>RGB LED Components</h2>” ) ;
.
.
.

Then, we use the startsWith() function to check if the request that arrived is of type POST (this function checks if the first word of the content stored in the variable req_str is the POST text fragment). After verifying that the request is indeed of type POST, we declare a variable of type string and store in it 26 characters (existing after the apparent completion of the request). These 26 characters are just the POST request parameter , so it will look like this: PWM5=xyz&PWM6=xyz&PWM9=xyz.

if ( req_str. startsWith ( “POST” ))
{
String POST_content = “” ;
for ( int i=0;i < 26;i++ )
{
c = customer. read () ;
content_POST += c;
}

Afterwards, we fill the pwm_range5/6/9 variables with the existing values ​​in the content_POST variable. This process consists of breaking the entire string into several pieces and associating each one of them with the respective variable, which in turn, will be used in the generation of the PWM signal. (The explanation of how the functions used work can be found in our previous tutorials)

pwm_range_5 = content_POST. substring (( POST_content . indexOf ( “PWM5” ) + 5 ) , ( POST_content . indexOf ( “PWM6” ) – 1 )) . toInt () ;
pwm_range_6 = content_POST. substring (( POST_content . indexOf ( “PWM6” ) + 5 ) , ( POST_content . indexOf ( “PWM9” ) – 1 )) . toInt () ;
pwm_range_9 = content_POST. substring (( POST_content . indexOf ( “PWM9” ) + 5 ) , ( POST_content . indexOf ( “PWM9” ) + 8 )) . toInt () ;

Finally, we generate the PWM signals and clear the variable content_POST.

analogWrite ( 5,pwm_range_5 ) ;
analogWrite ( 6,pwm_range_6 ) ;
analogWrite ( 9,pwm_range_9 ) ;
content_POST = “” ;

– Creating the form

At this point, we added the form and explained that the method that will be used to send data in the request made by the browser will be POST. Between the <form> and </form> tags , we will create the ranges, that is, the elements that will be used in the command interface on the browser page.

client. println ( “<form action=”” method=”post”>” ) ;
client. println ( “<p>Blue Component: ” + String ( pwm_range_5 ) + “</p>” ) ;
client. println ( “0 <input type=”range” value=”” + String ( pwm_range_5 ) + “”name=”PWM5″ min=”0″ max=”255” step= “1” onchange=”submit()”/> 255″ ) ;
client. println ( “<p>Green Component: ” + String ( pwm_range_6 ) + “</p>” ) ;
client. println ( “0 <input type=”range” value=”” + String ( pwm_range_6 ) + “”name=”PWM6″ min=”0″ max=”255” step= “1” onchange=”submit()”/> 255″ ) ;
client. println ( “<p>Red Component: ” + String ( pwm_range_9 ) + “</p>” ) ;
client. println ( “0 <input type=”range” value=”” + String ( pwm_range_9 ) + “”name=”PWM9″ min=”0″ max=”255” step= “1” onchange=”submit()”/> 255″ ) ;
client. println ( “</form>” ) ;

Ranges must be included in the code via the <input> tag (as well as checkboxes). In this tag we use some attributes, these are:

  • type: Determines the type of input element
  • value: Value where the cursor should stay
  • name: Name associated with the element
  • min/max: Extreme values ​​of the scale
  • step: step

Final considerations

In this tutorial, we demonstrate how you can go about creating an RGB LED drive system to be used  through a web browser. For this, we use an  Arduino UNO  together with an  Ethernet Shield W5100.

COMMENTS

Please Login to comment
  Subscribe  
Notify of