Remote Triggering of Relays with HTML

learn how to create an application in which you will be able to create an interface, which in turn, will be presented in your internet browser, so that you can trigger relays.
ORIGINAL POST
By Daniel Maderia
components
Hardware Components
W5100 ethernet shield
X 1
Arduino uno rev3
X 1
Relay module
X 1
Software Apps and online services
Arduino IDE
details

relay html.PNG

In this tutorial you will learn how to create an application in which you will be able to create an interface, which in turn, will be presented in your internet browser, so that you can trigger relays.

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

Index View ]


Let’s go – Developing the remote relay actuation system with HTML

Required components

assembling the project

Shield Ethernet W5100 - HTML Remote Relay Trigger System
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 ( 2,OUTPUT ) ;
pinMode ( 3,OUTPUT ) ;
pinMode ( 4,OUTPUT ) ;
pinMode ( 5,OUTPUT ) ;
digitalWrite ( 2,HIGH ) ;
digitalWrite ( 3,HIGH ) ;
digitalWrite ( 4,HIGH ) ;
digitalWrite ( 5,HIGH ) ;
}
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 )
{
unsigned int start_position = req_str. indexOf ( “GET” ) + 4;
unsigned int end_position = req_str. indexOf ( “HTTP/” ) – 1;
String parameter = req_str. substring ( start_position,end_position ) ;
if ( parameter != “/favicon.ico” )
{
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>Triggering relays</title>” ) ;
client. println ( “</head>” ) ;
client. println ( “<body>” ) ;
client. println ( “<h1>Relay drive system V.1</h1>” ) ;
client. println ( “<hr/>” ) ;
client. println ( “<h2>Digital ports</h2>” ) ;
// client.println(“<p>Port D2:</p>”);
client. println ( “<form method=”get”>” ) ;
createform ( client, parameter ) ;
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 () ;
}
}
void createform ( EthernetClient client_aux, String parameter_aux )
{
for ( int i = 0; i < 2; i++ )
{
client_aux. println ( “Port D” + String ( i ) + “:” ) ;
client_aux. println ( “<input type=”checkbox” name=”D” + String ( i ) + “” value=”1″ onclick=”submit()” disabled>PIN NOT USED (DISABLED )</br>” ) ;
}
for ( int i = 2; i < 6; i++ )
{
client_aux. println ( ” D port ” + String ( i ) + ” ( Relay ” + String ( i – 1 ) + ” ) : ” ) ;
if ( aux_parameter. indexOf ( “D” + String ( i ) + “=1” ) > -1 )
{
client_aux. println ( “<input type=”checkbox” name=”D” + String ( i ) + “” value=”1″ onclick=”submit()” checked> ON</br> ” ) ;
digitalWrite ( i,LOW ) ;
}
else
{
client_aux. println ( “<input type=”checkbox” name=”D” + String ( i ) + “” value=”1″ onclick=”submit()”> OFF</br>” ) ;
digitalWrite ( i,HIGH ) ;
}
}
for ( int i = 6; i < 10; i++ )
{
client_aux. println ( “Port D” + String ( i ) + “:” ) ;
client_aux. println ( “<input type=”checkbox” name=”D” + String ( i ) + “” value=”1″ onclick=”submit()” disabled>PIN NOT USED (DISABLED )</br>” ) ;
}
for ( int i = 10; i < 14; i++ )
{
client_aux. println ( “Port D” + String ( i ) + “:” ) ;
client_aux. println ( “<input type=”checkbox” name=”D” + String ( i ) + “” value=”1″ onclick=”submit()” disabled>IN USE BY ETHERNET SHIELD W5100 (DISABLED)</br>” ) ;
}
}

putting it to work

Shield Ethernet W5100 - HTML Remote Relay Trigger System
Relay drive system with HTML

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.

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>Triggering relays</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>Relay drive system V.1</h1>” ) ;
client. println ( “<hr/>” ) ;
client. println ( “<h2>Digital ports</h2>” ) ;
.
.
.

Then, we add the form and explain that the method that will be used to send data in the request made by the browser will be GET. Between the <form> and </form> tags , we create a function called criaformulario() , which will be responsible for creating the command interface in the browser page.

client. println ( “<form method=”get”>” ) ;
createform ( client, parameter ) ;
client. println ( “</form>” ) ;

Finally, see the code responsible for creating the command interface, in full.

– Form creation function

As we said before, the function criaformulario() will be responsible for creating the command interface that we will use. This function is divided into three blocks, so that the first of them is responsible for creating the checkboxes referring to digital ports 0 and 1. Note that in the instruction for creating the checkboxes (whose operation has already been presented in our tutorials) there is the word disabled , which will make the checkbox not clickable (precisely because we are not using these pins).

for ( int i = 0; i < 2; i++ )
{
client_aux. println ( “Port D” + String ( i ) + “:” ) ;
client_aux. println ( “<input type=”checkbox” name=”D” + String ( i ) + “” value=”1″ onclick=”submit()” disabled>PIN NOT USED (DISABLED )</br>” ) ;
}

The second block concerns the creation of checkboxes for activating the 4 relays in the module used. Note that the structure used is the same as the previous one, however, we use the indexOf()  function to find out if there is any element of type “ /?D_=1 “  (request parameter when any checkbox is selected). If so, the checkbox is created and marked, if not, it is just created, but without being selected. Consequently, we also activate the relay (with logic level 0) or not (with logic level 1), through the digitalWrite() function .

for ( int i = 2; i < 6; i++ )
{
client_aux. println ( ” D port ” + String ( i ) + ” ( Relay ” + String ( i – 1 ) + ” ) : ” ) ;
if ( aux_parameter. indexOf ( “D” + String ( i ) + “=1” ) > -1 )
{
client_aux. println ( “<input type=”checkbox” name=”D” + String ( i ) + “” value=”1″ onclick=”submit()” checked> ON</br> ” ) ;
digitalWrite ( i,LOW ) ;
}
else
{
client_aux. println ( “<input type=”checkbox” name=”D” + String ( i ) + “” value=”1″ onclick=”submit()”> OFF</br>” ) ;
digitalWrite ( i,HIGH ) ;
}
}

The third and fourth blocks are similar to the first, however, in the fourth for repeating structure, we just changed the text to signal that pins 10 to 13 are being used by the Shield Ethernet W5100.

for ( int i = 6; i < 10; i++ )
{
client_aux. println ( “Port D” + String ( i ) + “:” ) ;
client_aux. println ( “<input type=”checkbox” name=”D” + String ( i ) + “” value=”1″ onclick=”submit()” disabled>PIN NOT USED (DISABLED )</br>” ) ;
}
for ( int i = 10; i < 14; i++ )
{
client_aux. println ( “Port D” + String ( i ) + “:” ) ;
client_aux. println ( “<input type=”checkbox” name=”D” + String ( i ) + “” value=”1″ onclick=”submit()” disabled>IN USE BY ETHERNET SHIELD W5100 (DISABLED)</br>” ) ;
}
}

Final considerations

In this tutorial, we demonstrate how you can go about creating a relay 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