Move HTML code to SD card - client.println("put this on the sd card");

I am working on a project that uses an arduino uno as a webserver (wich is protected with a username and password) that controls a relay with a html button. This works great but i want to add CSS and extend the project to multiple relays, but the arduino runs out of memory pretty fast. How can i move al the HTML code to a separate file on the sd card and ad CSS?

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

byte mac[] = { 
  0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192,168,0,32);

EthernetServer server(80);

String relay1State = "Off";
const int relay1 = 4;

char linebuf[80];
int charcount=0;

void setup() {

  pinMode(relay1, OUTPUT);
  digitalWrite(relay1, HIGH);
  
  Serial.begin(9600);
  Ethernet.begin(mac, ip);
  server.begin();
  Serial.print("server is at ");
  Serial.println(Ethernet.localIP());

}


void SendOKpage(EthernetClient &client)
{
          client.println("<!DOCTYPE HTML><html><head>");
          client.println("<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"><title>WebRelay</title>");
          client.println("</head><body>");                                                             
          client.println("<h2>Web Controller</h2>");
          
          client.println("<h3>Relay 1</h3>");
          client.println("<h4>Status: " + relay1State + "</h4>");       
              if(relay1State == "Off"){
          client.println("<a href=\"/relay1on\"><button>ON</button></a>");
               }
               else if(relay1State == "On"){
          client.println("<a href=\"/relay1off\"><button>OFF</button></a>");                                                                    
                }

          client.println("

<a href=\"/\">reload</a></h3>");
          client.println("</body></html>"); 
}


void SendAuthentificationpage(EthernetClient &client)
{
          client.println("HTTP/1.1 401 Authorization Required");
          client.println("WWW-Authenticate: Basic realm=\"Secure Area\"");
          client.println("Content-Type: text/html");
          client.println("Connnection: close");
          client.println();
          client.println("<!DOCTYPE HTML>");
          client.println("<HTML>  <HEAD>   <TITLE>Error</TITLE>");
          client.println(" </HEAD> <BODY><H1>401 Unauthorized.</H1></BODY> </HTML>");
}

boolean authentificated=false;

void loop() {
  EthernetClient client = server.available();
  if (client) {
    Serial.println("new client");
    memset(linebuf,0,sizeof(linebuf));
    charcount=0;
    authentificated=false;
    
    boolean currentLineIsBlank = true;
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        linebuf[charcount]=c;
        if (charcount<sizeof(linebuf)-1) charcount++;
        Serial.write(c);
       
        if (c == '\n' && currentLineIsBlank) {
          if (authentificated)
            SendOKpage(client);
          else
            SendAuthentificationpage(client);  
          break;
        }
        if (c == '\n') {

          if (strstr(linebuf,"GET /relay1off") > 0){
            digitalWrite(relay1, HIGH);
            relay1State = "Off";
          }
          else if (strstr(linebuf,"GET /relay1on") > 0){
            digitalWrite(relay1, LOW);
            relay1State = "On";
          }

        


          currentLineIsBlank = true;
          
          if (strstr(linebuf,"Authorization: Basic")>0 && strstr(linebuf,"dXNlcm5hbWU6cGFzc3dvcmQ=")>0)
            authentificated=true;
          memset(linebuf,0,sizeof(linebuf));
          charcount=0;

        } 
        else if (c != '\r') {

          currentLineIsBlank = false;
        }
      }
    }
    delay(1);
    client.stop();
    Serial.println("client disonnected");
  }
}

Make a buffer on the Arduino, load the text from the SD into the buffer, client.print() that variable. Repeat untill done :slight_smile:

How can i move al the HTML code to a separate file on the sd card and ad CSS?

I can't believe that Mr. Google went on vacation again, and left on one in charge.

You need to understand exactly what will happen if you add a link to a CSS file in your html BEFORE you do that.

WebServer in my project

@PaulS

PaulS:
I can't believe that Mr. Google went on vacation again, and left on one in charge.

You need to understand exactly what will happen if you add a link to a CSS file in your html BEFORE you do that.

Why does there always have to be someone on a forum, any forum by the way not jusy here, that says "just google it", clearly i have not found an awnser on google and that is why i decide to make a post. If you dont want to help me then just dont post anything. Is the point of the forum to ask a very complex question so that you can feel challanged?

Why does there always have to be someone on a forum, any forum by the way not jusy here, that says "just google it",

Because the answers are usually available, if you do some research and some thinking.

There are active threads on this forum, posted and replied to today, that have the code you are looking for.

Not that the code is even remotely difficult to write. The client wants something. That something might be a file on the SD card. If it is, open the file and, while there is data to read, read the data (not one character at a time...) and send the data to the client, then close the file.

Thanks, i will keep searching.