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:
- Shield Ethernet W5100 – Creating a Web Server with Arduino
- Shield Ethernet W5100 – Monitoring Sensors with a Web Server
- Shield Ethernet W5100 – Controlling Outputs via Web Server
- Shield Ethernet W5100 – Remote Triggering of Relays with HTML
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
To develop this project, we will need the following components:
- 1 x Arduino Board UNO Rev 3
- 1 x Shield Ethernet Wiznet W5100
- 1 x Common Cathode RGB LED
- 3 x 330Ω resistors
- 1 x Protoboard
assembling the project
putting it to work
understanding in depth
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.
– 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).
– 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).
Then, we create the process in which this variable will be filled with the request characters.
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.
– Submitting the page header
After we have read the entire request, we must first send the default header to the browser.
– 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.
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.
In the body of the page, we start by writing some titles using the <h1> and < h2 > header tags .
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.
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)
Finally, we generate the PWM signals and clear the variable 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.
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
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.