Arduino webserver + more buttons (Moderator edit)

HI I’M NOT A GOOD PROGRAMMER AND I NEED SOME HELP REGARDING ADDING BUTTONS TO MY HTML(ASSIGNING PIN TO EACH ONE) AND IMPLEMENTING A WEB SERVER WITH BASE64. I HAVE BOTH CODES IN DIFFERENT .ino BECAUSE I DON’T KNOW HOW TO COMBINE THEM AND WORK LEDS AT THE SAME TIME. ANY HELP IS APPRECIATED. THANK YOU. IF YOU NEED ANY CODES OR ANY LIBRARIES PLEASE DONT HESITATE TO ASK ME.

THIS IS MY CODE FOR SWITCHING ON AND OFF LEDS (I WANT TO ASSIGN MORE PINS TO MORE BUTTONS LED2,LED3,LED4 ETC.)

#include <SPI.h>
#include <Ethernet.h>
#include <WebServer.h>


byte mac[] = { 0x00, 0x09, 0x34, 0x15, 0x18, 0xEA }; //physical mac address
byte ip[] = { 192, 168, 10, 2 };                  // ip in lan
byte gateway[] = { 192, 168, 10, 3 };                  // internet access via router
byte subnet[] = { 255, 255, 255, 0 };  //subnet mask
                                      
byte sampledata=50;            //some sample data - outputs 2 (ascii = 50 DEC)             
int ledPin1 = 2;  // LED pin 1
int ledPin2 = 3;  // LED pin 2
int ledPin3 = 4;  // LED pin 3
int ledPin4 = 5;  // LED pin 4
int ledPin5 = 6;  // LED pin 5

EthernetServer server(80);

String readString = String(30); //string for fetching data from address

boolean LEDON1 = false; //LED status flag
boolean LEDON2 = false;
boolean LEDON3 = false;
boolean LEDON4 = false;
boolean LEDON5 = false;


void setup(){
//start Ethernet
  Ethernet.begin(mac, ip, subnet);
//Set pin 4 to output
  pinMode(ledPin1, OUTPUT); 
  pinMode(ledPin2, OUTPUT); 
  pinMode(ledPin3, OUTPUT);
  pinMode(ledPin4, OUTPUT);
  pinMode(ledPin5, OUTPUT);
//enable serial datada print  
  Serial.begin(9600);
}
void loop(){
// Create a client connection
EthernetClient client = server.available();
  if (client) {
    while (client.connected()) {
   if (client.available()) {
    char c = client.read();
    //read char by char HTTP request
    if (readString.length() < 30) 
      {
        //store characters to string 
        //-----readString.append(c);
          readString.concat(c);
      }  
        //output chars to serial port
        Serial.print(c);
        //if HTTP request has ended
        if (c == '\n') {
          //lets check if LED should be lighted
 //------------LED 1
           if (readString.substring(6,11) == "L1=ON")
           {
             digitalWrite(ledPin1, HIGH);    // set the LED on
             LEDON1 = true;
           }
             else if (readString.substring(6,12) == "L1=OFF")
            {
             digitalWrite(ledPin1, LOW);    // set the LED OFF
             LEDON1 = false;             
            }
//------------LED 2
           if (readString.substring(6,11) == "L2=ON")
           {
             digitalWrite(ledPin2, HIGH);    // set the LED on
             LEDON1 = true;
           }
             else if (readString.substring(6,12) == "L2=OFF")
            {
             digitalWrite(ledPin2, LOW);    // set the LED OFF
             LEDON1 = false;             
            }  
 
          // now output HTML data starting with standart header
          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type: text/html");
          client.println();
          //set background to yellow
          client.print("<body style=background-color:yellow>"); 
          client.println("<h1>LED control</h1>");
          client.println("<font color='black'>");
          client.println("
");

//--------LED 1 CONTROLL--------
          client.println("<form method=get name=LED><input type=submit name=L1 value=ON>  LED 1<form>");      
          client.println("<form method=get name=LED><input type=submit name=L1 value=OFF  ><form>");
            if (LEDON1)
            { 
             client.print("<font color='green' size='3'> ON");
            } 
            else 
            { 
             client.print("<font color='red' size = '3'> OFF");
            }
            client.println("<font color='black' 
");
            
          client.println("<form method=get name=LED2><input type=submit name=L2 value=ON>  LED 2<form>");      
          client.println("<form method=get name=LED2><input type=submit name=L2 value=OFF  ><form>");
          
            if (LEDON2)
            { 
             client.print("<font color='green' size='3'> ON");
            } 
            else 
            { 
             client.print("<font color='red' size = '3'> OFF");
            }
            client.println("<font color='black' 
");
            
            
           
          client.println("</body></html>");
          //clearing string for next read
          readString="";
          //stopping client
          client.stop();
            }
          }
        }
      }
    }

Moderator edit: Made title less shouty (someone else can fix the post - hint, OP) and added CODE TAGS.

HI I’M NOT A GOOD PROGRAMMER

You’ll need to get over it.

THIS IS MY CODE FOR SWITCHING ON AND OFF LEDS (I WANT TO ASSIGN MORE PINS TO MORE BUTTONS LED2,LED3,LED4 ETC.)

So? You don’t need our permission. Go right ahead.

Some hints, though. Every needs a , not another .

All the buttons can be on the same form. You don’t need a separate form for each button.

When I see your code, I think you may soon get into problems, because the long client.println strings will cause your Arduino to run out of RAM. I have faced that long time ago, when I needed to print quite huge html page. You will not see any error messages, so this error is like a “quiet beast” and may cause you a lot of dreamless nights :slight_smile:

You will notice it, when the html server will start to behave erratically, output weird characters, or the html page will be incomplete.

To avoid that, you should instead of:

client.println(" LED 2");

use this:

client.println F(" LED 2");

The “F” causes to store the text in flash memory, so you can print really huge html pages, if needed. Please note, that it can be used for static text only, no variables.

Thnx for the tips and but i dont know how to assign pins to my buttons :~

For example this is LED1

if (readString.substring(6,11) == “L1=ON”)

//------------LED 2
if (readString.substring(6,11) == “L2=ON”)<-- what do i have to input so the pin 3 will work led 2
{
digitalWrite(ledPin2, HIGH); // set the LED on
LEDON2 = true;
}
else if (readString.substring(6,12) == “L2=OFF”)
{
digitalWrite(ledPin2, LOW); // set the LED OFF
LEDON2 = false;
}

and also how can i implement base64 to this project?

Thanks a lot

For example this is LED1

if (readString.substring(6,11) == “L1=ON”)

No. That is the code that decides that LED1 should be turned on. The code that follows actually makes that happen. Surely, you can recognize a simple digitalWrite() statement, can’t you? And, know what it does?

if (readString.substring(6,11) == “L2=ON”)<-- what do i have to input so the pin 3 will work led 2
{
digitalWrite(ledPin2, HIGH); // set the LED on

Assign ledPin2 the value of 3.

Yes i understand thank you very much . Can i implement a base 64 http basic authentication to this project? if yes how? i have a seperate ino with working authentication but dont know how to combine it with this project. Please help! :~

Can i implement a base 64 http basic authentication to this project?

If you are asking for permission, then, yes, you are allowed to.

i have a seperate ino with working authentication but dont know how to combine it with this project.

Without seeing that code, and knowing what you want to do in the third program, we can't help you, either.

#define WEBDUINO_AUTH_REALM "Weduino Authentication Example"

#include <Arduino.h>
#include <SPI.h>
#include <Ethernet.h>
#include <WebServer.h>




static uint8_t mac[] = { 
  0x00, 0x09, 0x34, 0x15, 0x18, 0xEA };

static uint8_t ip[] = { 
  192, 168, 10, 2 };


String readString;  
boolean tog1 = 0; //rf1 on
boolean tog2 = 1; //rf2 off

//-----------------------------------------------------------------------

/* This creates an instance of the webserver.  By specifying a prefix
 * of "", all pages will be at the root of the server. */
#define PREFIX ""
WebServer webserver(PREFIX, 80);

void defaultCmd(WebServer &server, WebServer::ConnectionType type, char *, bool)
{
  server.httpSuccess();
  if (type != WebServer::HEAD)
  {
    P(helloMsg) = "<h1>First entry page -Hello George!</h1><a href=\"private.html\">ACCESS ADMIN CONTROL page</a>";
    server.printP(helloMsg);
  }
}

void privateCmd(WebServer &server, WebServer::ConnectionType type, char *, bool)
{
  /* if the user has requested this page using the following credentials
   * username = home
   * password = security
   * display a page saying "Hello User"
   *
   * the credentials have to be concatenated with a colon like
   * username:password
   * and encoded using Base64 - this should be done outside of your Arduino
   * to be easy on your resources
   *
   * in other words: "dXNlcjp1c2Vy" is the Base64 representation of "admin:joe"
   *
   * if you need to change the username/password dynamically please search
   * the web for a Base64 library */
  if (server.checkCredentials("aG9tZTpzZWN1cml0eQ=="))
  {
    server.httpSuccess();
    
    if (type != WebServer::HEAD)
    {
      Serial.println(readString);
  

// HTML FORM  BUTTONS TO TURN ON / OFF  ITEM

      P(background) = "<body style=background-color:BLACK>"; //set background to BLACK
      P(helloMsg) = "<center><font color=’green’> <h1>HOME - INTERNET -- CONTROL </h1></font></center>";
      P(FORMOPEN) = "<form  method=get name=togl>";
      P(button1) = "<center><button name=tog1 value=1 type=submit style=font-weight:bold;color:GREEN;height:70px;width:145px>ON LED</button>";
      P(button2) = "<button name=tog2 value=0 type=submit style=font-weight:bold;color:red;height:70px;width:145px>OFF LED</button>";
      P(FORMCLOSE) = "</form>"; 
      
      // DISPLAY layout - print items to web page:

      server.printP(background);

      server.printP(helloMsg);
      server.printP(FORMOPEN);
      server.printP(button1);
      server.printP(button2);
      server.printP(FORMCLOSE);
      
     
    }
  }

  else
  {
    // send a 401 error back causing the web browser to prompt the user for credentials 
    server.httpUnauthorized();
  }
}


void setup()
{
  Ethernet.begin(mac, ip);
  webserver.setDefaultCommand(&defaultCmd);
  webserver.addCommand("index.html", &defaultCmd); // FIRST PAGE
  webserver.addCommand("private.html", &privateCmd); // ADMIN CONTROL - REQUIRES ACCESS
  webserver.begin();
  
}
  

void loop()
{
    
    char buff[64];
       int len = 64;
/* process incoming connections one at a time forever */
       webserver.processConnection(buff, &len);

}

So, you have a program that performs some authentication, and one that doesn't. You want to combine the ideas from those two improperly posted programs to do something that you can not put into words. And, you want us to help. Personally, I think I'll have to pass. Good luck, though.

No problem thnx anyway. Plus i dont know how to post codes. I just wanted to for you to show me how to combine them not write it for me. And i dont believe you can do it. I cant because im not a programmer.
Thnx anyway

s1nringleader:

#define WEBDUINO_AUTH_REALM "Weduino Authentication Example"

#include <Arduino.h>
#include <SPI.h>
#include <Ethernet.h>
#include <WebServer.h>

static uint8_t mac = {
  0x00, 0x09, 0x34, 0x15, 0x18, 0xEA };

static uint8_t ip = {
  192, 168, 10, 2 };

String readString; 
boolean tog1 = 0; //rf1 on
boolean tog2 = 1; //rf2 off

//-----------------------------------------------------------------------

/* This creates an instance of the webserver.  By specifying a prefix

  • of “”, all pages will be at the root of the server. */
    #define PREFIX “”
    WebServer webserver(PREFIX, 80);

void defaultCmd(WebServer &server, WebServer::ConnectionType type, char *, bool)
{
  server.httpSuccess();
  if (type != WebServer::HEAD)
  {
    P(helloMsg) = “

First entry page -Hello George!

<a href=“private.html”>ACCESS ADMIN CONTROL page”;
    server.printP(helloMsg);
  }
}

void privateCmd(WebServer &server, WebServer::ConnectionType type, char , bool)
{
  /
if the user has requested this page using the following credentials
  * username = home
  * password = security
  * display a page saying “Hello User”
  *
  * the credentials have to be concatenated with a colon like
  * username:password
  * and encoded using Base64 - this should be done outside of your Arduino
  * to be easy on your resources
  *
  * in other words: “dXNlcjp1c2Vy” is the Base64 representation of “admin:joe”
  *
  * if you need to change the username/password dynamically please search
  * the web for a Base64 library */
  if (server.checkCredentials(“aG9tZTpzZWN1cml0eQ==”))
  {
    server.httpSuccess();
   
    if (type != WebServer::HEAD)
    {
      Serial.println(readString);

// HTML FORM  BUTTONS TO TURN ON / OFF  ITEM

P(background) = “”; //set background to BLACK
      P(helloMsg) = "

HOME - INTERNET – CONTROL

";
      P(FORMOPEN) = “”;
      P(button1) = “ON LED”;
      P(button2) = “OFF LED”;
      P(FORMCLOSE) = “”;
     
      // DISPLAY layout - print items to web page:

server.printP(background);

server.printP(helloMsg);
      server.printP(FORMOPEN);
      server.printP(button1);
      server.printP(button2);
      server.printP(FORMCLOSE);
     
   
    }
  }

else
  {
    // send a 401 error back causing the web browser to prompt the user for credentials
    server.httpUnauthorized();
  }
}

void setup()
{
  Ethernet.begin(mac, ip);
  webserver.setDefaultCommand(&defaultCmd);
  webserver.addCommand(“index.html”, &defaultCmd); // FIRST PAGE
  webserver.addCommand(“private.html”, &privateCmd); // ADMIN CONTROL - REQUIRES ACCESS
  webserver.begin();
 
}

void loop()
{
   
    char buff[64];
      int len = 64;
/* process incoming connections one at a time forever */
      webserver.processConnection(buff, &len);
}

I created an account to thank you for this. I couldn’t for the life of me get a code to work. I read this added one little F … Voila’. I never would have figured this out on my own. THANKS!!!

pavelp:
When I see your code, I think you may soon get into problems, because the long client.println strings will cause your Arduino to run out of RAM. I have faced that long time ago, when I needed to print quite huge html page. You will not see any error messages, so this error is like a “quiet beast” and may cause you a lot of dreamless nights :slight_smile:

You will notice it, when the html server will start to behave erratically, output weird characters, or the html page will be incomplete.

To avoid that, you should instead of:

client.println(" LED 2");

use this:

client.println F(" LED 2");

The “F” causes to store the text in flash memory, so you can print really huge html pages, if needed. Please note, that it can be used for static text only, no variables.