Hello everyone! I'm newbie here!
I created a webserver on a arduino for my project on robotic car. At first I don't have any problems occurring on running the webserver but when i try to edit the button styles and it's positioning the webserver won't load "The webpage taking too long to load". Their is no problem when I try to run it on a simple button code without the styles and positioning but when I copied it to my arduino server, it won't load. I'm guessing I just fail to add something or my codes were have something excessive used of symbols. If anyone could help me on button positioning and styles...
Below is the html code of my webserver
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() < 100) {
//store characters to string
readString += c;
//Serial.print(c);
}
//if HTTP request has ended
if (c == '\n') {
Serial.println(readString); //print to serial monitor for debuging
client.println("HTTP/1.1 200 OK"); //send new page
client.println("Content-Type: text/html");
client.println();
client.println("<HTML>");
client.println("<BODY style='background-color:black'>");
client.println("<font style='color:green'>");
client.println("<font style='font-family:electric toaster'>");
client.println("<center>");
client.println("<H1 style='font-size:400%;'>Design Project (DP)</H1>");
client.println("<p style='font-size:150%'>Surveillance Robotic Car</p>");
client.println("
");
client.println("
");
client.println("
");
client.println("<strong>");
client.println("<div style='position:absolute; top:360px; left:466px; font-size:125%; font-family:robotastic;'>Live Video Feed and Sound</div>
");
client.println("</strong>");
client.println("<iframe src='http://192.168.0.100' width='420' height='300' seamless scrolling='yes'></iframe>");
client.println("</center>");
client.println("<strong>");
client.println("<div style='position:absolute; top:360px; left:76px; font-size:125%; font-family:robotastic;'>Controls for the</div>");
client.println("div style='position:absolute; top:378px; left:126px; font-size:125%; font-family:robotastic;'>Robotic Car</div>");
client.println("</strong>");
client.println("<a href=\"/?buttonmotorforward\"\"><button style='font-size:170%;background-color:darkgray; color:green; border-radius:50px; position:absolute; top:430px; left:166px;'>Forward</button></a>");
client.println("<a href=\"/?buttonmotorleft\"\"><button style='font-size:170%; background-color:darkgray; color:green;border-radius:50px; position:absolute; top:530px; left:15px;'>Turn Left</button></a>");
client.println("<a href=\"/?buttonmotorstop\"\"><button style='font-size:170%; background-color:darkgray; color:green;border-radius:50px; position:absolute; top:530px; left:188px;'>Stop</button></a>");
client.println("<a href=\"/?buttonmotorright\"\"><button style='font-size:170%; background-color:darkgray; color:green;border-radius:50px; position:absolute; top:530px; left:300px;'>Turn Right</button></a>");
client.println("<a href=\"/?buttonmotorbackward\"\"><button style='font-size:170%; background-color:darkgray; color:green; border-radius:50px; position:absolute; top:630px; left:156px;'>Backward</button></a>");
client.println("<a href=\"/?buttonledon\"\"><button style='font-size:100%; background-color:darkgray; color:green;border-radius:50px; position:absolute; top:640px; left:16px;'>TurnON Lights</button></a>");
client.println("<a href=\"/?buttonledoff\"\"><button style='font-size:100%; background-color:darkgray; color:green;border-radius:50px; position:absolute; top:640px; left:310px;'>TurnOff Lights</button></a>");
client.println("</BODY>");
client.println("</HTML>");
delay(1);
//stopping client
client.stop();
//controls the Arduino if you press the buttons
if (readString.indexOf("?buttonledon") >0){
digitalWrite(led1, HIGH);
}
if (readString.indexOf("?buttonledoff") >0){
digitalWrite(led1, LOW);
}
if (readString.indexOf("?buttonmotorforward") >0){
digitalWrite(led2, LOW); //tell the led to turn on when car turn forward
}
if (readString.indexOf("?buttonmotorstop") >0){
digitalWrite(led2, HIGH); //tell the led to turn on when car stop
}
if (readString.indexOf("?buttonmotorleft") >0){
digitalWrite(led2, LOW); //tell the led to turn off when car turn left
}
if (readString.indexOf("?buttonmotorright") >0){
digitalWrite(led2, LOW); //tell the led to turn off when car turn right
}
if (readString.indexOf("?buttonmotorbackward") >0){
digitalWrite(led2, LOW); //tell the led to turn off when car turn backward
}
if (readString.indexOf("?buttonmotorforward") >0){ //tell car to turn forward
//for(pos = 0; pos <=180; pos += 3) // goes from 0 degrees to 180 degrees
{ // in steps of 1 degree
servoleft.write(180); // tell the left servo to go left position
delay(15); // waits 15ms for the servo to reach the position
servoright.write(0); // tell the right servo to go to right position
delay(15);
}
}
if (readString.indexOf("?buttonmotorbackward") >0){ //tell car to turn backward
//for(pos = 180; pos>=0; pos-=3) // goes from 180 degrees to 0 degrees
{
servoleft.write(0); // tell the left servo to go right position
delay(15); // waits 15ms for the servo to reach the position
servoright.write(180); // tell the right servo to go to left position
delay(15);
}
}
if (readString.indexOf("?buttonmotorstop") >0){ //tell the car to stop
//for(pos = 180; pos>=0; pos-=3) // goes from 180 degrees to 0 degrees
{
servoleft.write(90); // tell the left servo to go to no movement position
delay(15); // waits 15ms for the servo to reach the position
servoright.write(90); // tell the right servo to go to no movement position
delay(15);
}
}
if (readString.indexOf("?buttonmotorleft") >0){ //tell the car to turn left
//for(pos = 0; pos <=180; pos += 3) // goes from 0 degrees to 180 degrees
{ // in steps of 1 degree
servoleft.write(90); // tell the left servo to go left position
delay(15); // waits 15ms for the servo to reach the position
servoright.write(0); // tell the right servo to go to no movement position
delay(15);
}
}
if (readString.indexOf("?buttonmotorright") >0){ //tell the car to turn right
//for(pos = 0; pos <=180; pos += 3) // goes from 0 degrees to 180 degrees
{ // in steps of 1 degree
servoleft.write(180); // tell the left servo to go left position
delay(15); // waits 15ms for the servo to reach the position
servoright.write(90); // tell the right servo to go to no movement position
delay(15);
}
}
//clearing string for next read
readString="";
}
}
}
}
}
You're my savior