Print
Go Down
Pages: [1] 2 3 4

Topic: Network settings web page FORM using EEPROM to save submit [DONE] (Read 60741 times) previous topic - next topic

JO3RI

Mar 11, 2011, 09:09 pm Last Edit: Aug 19, 2011, 02:29 pm by JO3RI Reason: 1
Finished the project, you can check it out on my project page: http://www.jo3ri.be/arduino/arduino-projects/network-settings-web-page-form-using-eeprom-to-save-submit.

and here you have a picture:



Quote
Before you get drawling, I'm not that far yet. But what I want to accomplish is a little webserver with a page to change your IP, MAC, STATIC or DHCP and save it, don't know how yet, but I'll will get there  :*

So far I have been able to make the webpage:



and here you have the code so far:

Code: [Select]
/*
This a a demo webpage trying to reproduce the arduino website look
You will need the arduino ethernet shield

made by JO3RI www.JO3RI.be/arduino
*/

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

// This is the hardware address of the Arduino on your network.
// You won't need to change this. Learn more here.
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };

// This is the tcp/ip address of the Arduino on your network.
// You will access the Arduino by typing it in a web browser like
// this: http://192.168.1.177 Learn more here.
// You might want to change this to be the same as your computer's
// IP address except for the last number. Learn more here.
byte ip[] = { 192, 168, 14, 85};

// Create a server named webserver listening on port 80 (http). You
// don't want to change the port number. Learn more about ports or
// the server class.
Server webserver(80);

// Functions that are run once when the Arduino is started
void setup()
{

// Bring the Arduino on the network using the MAC and IP we
//specified before. Learn more about Ethernet.begin().
Ethernet.begin(mac, ip);
// Start a server on the port we specified before. Learn more
// about server.begin().
webserver.begin();

}

// Repeat these functions as long as the Arduino is powered on
void loop()
{

// Create a client named webclient listening for connections to the
// server. Learn more about Client or server.available()
Client webclient = webserver.available();

// If someone connects to the server...
if (webclient) {

// Create a variable to hold whether or not we have received a blank
// line from the web browser
boolean current_line_is_blank = true;

// Run the following code as long as the client remains connected
// Learn more about client.connected()
while (webclient.connected()) {

// If the client has sent us some data...
// Learn more about client.available()
if (webclient.available()) {

// Keep the last letter of whatever they sent us
// Learn more about client.read()
char c = webclient.read();

// If we've gotten to the end of the line (received a newline
// character) and the line is blank, the http request has ended,
// so we can send a reply
if (c == 'n' && current_line_is_blank) {

// Send a basic HTTP response header (the blank line at the end
// is required). Learn more about client.println()
webclient.println("HTTP/1.1 200 OK");
webclient.println("Content-Type: text/html");
webclient.println();

// Now send whatever html you want to appear on the web page
webclient.println("<html><body marginwidth\"0\" marginheight=\"0\" topmargin=\"0\" leftmargin=\"0\" style=\"margin: 0; padding: 0;\">");
webclient.println("<table bgcolor=\"#999999\" border=\"0\" width=\"100%\" cellpadding=\"1\">");
webclient.println("<tr><td><font color=\"white\" size=\"2\" face=\"Verdana\">&nbsp Arduino Ethernet Shield setup page</font></td></tr></table><br>");
webclient.println("<table border=\"0\" width=\"100%\"><tr><td width=110px>&nbsp</td><td width=200px><style>pre {font-size:8pt; letter-spacing:2px; line-height:8pt; font-weight:bold;}</style>");
webclient.println("<pre><font color=\"#00979d\">");
webclient.println("    ###      ###   TM");
webclient.println("  ##   ##  ##   ##  ");
webclient.println(" ##     ####  #  ## ");
webclient.println(" #  ###  ##  ### ## ");
webclient.println(" ##     ####  #  ## ");
webclient.println("  ##   ##  ##   ##  ");
webclient.println("   #####    #####   ");
webclient.println("</font></pre></td><td>&nbsp</td></tr><tr><td width=110px>&nbsp</td>");
webclient.println("<td width=200px><font color=\"#00979d\" size=\"6\" face=\"Verdana\"><strong> ARDUINO</strong></font></td><td>&nbsp</td></tr></table><br>");
webclient.println("<table bgcolor=\"#00979d\" border=\"0\" width=\"100%\" cellpadding=\"3\"><tr><td width=105px></td>");
webclient.println("<td width=120px><font color=\"white\" size=\"2\" face=\"Verdana\">Network info</font></td><td width=120px>");
webclient.println("<font color=\"white\" size=\"2\" face=\"Verdana\">Network setup</font></td><td></td></tr></table></body></html>");

break;

}

// If we received a new line character from the client ...
if (c == 'n') {

// Track that the line is blank
current_line_is_blank = true;

// If we don't receive a new line character and don't receive an r
} else if (c != 'r') {

// Track that we we got some data
current_line_is_blank = false;

}

}

}

// Give the client some time to receive the page
// Learn more about delay()
delay(1);

// Close the connection to the client now that we are finished
// Learn more about client.stop()
webclient.stop();

}

}

I still have to clean up the code so it might use less Binary sketch size: 6522 bytes

JO3RI

#1
Mar 13, 2011, 10:33 am
This time, I managed to get the logo in the website. I had to change it into base64, so I could put into the sketch itself. This is only as a show-off, because it eats memory, so in the later progress I'll probably ditch it.

JO3RI

#2
Mar 13, 2011, 12:58 pm
Thanks to bubulindo in my other post http://arduino.cc/forum/index.php/topic,55064.0.html I'm able to show the network information of the webserver. Only the word "static" is just html.



Oh, and I managed to show free and used SRAM. As you can see, not much left. next thing I'll do is putting things into Flash memory and probably I need to put configuration info into EEPROM memory. So that it survives reboot.

JO3RI

#3
Mar 15, 2011, 06:03 pm
This time I managed to get SRAM down to 493 by feeding the HTML from flash memory piece by piece to SRAM. This has it's consequences, Flash got over 8000 bytes. Next step is using EEPROM for config.

techadmin

#4
Mar 24, 2011, 05:20 pm
For any followers, this project is in collaboration with this one: http://arduino.cc/forum/index.php/topic,54324.0.html

If your sending your project to someone with no development experience, maybe your dad, or a potential client you've built a prototype for, or your using your Arduino in multiple locations (and not all have DHCP servers), then you just want to be able use the product out of the box on a network, like a home router, plug and play, this will be the solution.

JO3RI

#5
Mar 24, 2011, 09:00 pm
Ok so I already got this far. I have competed the HTML (using PROGMEM to put it into Flashmemory and a buffer to flow the HTML through strait to the webclient)

EEPROM is now being used to save your choices (put getting the info out of the POST doesn't work yet). The sketch starts with pre-sets and puts those into EEPROM, the second time the sketch is run it will know and automatically read out of EEPROM (hence the reset button to clear the "know" bit => not functional yet)

techadmin

#6
Mar 24, 2011, 09:13 pm
Looks very promising.

JO3RI

#7
Mar 25, 2011, 03:17 pm
@techadmin: I need your help on getting the information out of the form submission, you know: look for an ? read the what has been filled out.

techadmin

#8
Mar 25, 2011, 06:09 pm
I've been pretty tied up this week.  You'll need to copy that get url into a string or buffer when the html form is submitted then parse the text in the buffer.

I set mine up like this:

Code: [Select]

#define maxLengthWEB 100
String inString = String(maxLengthWEB);


Code: [Select]

  if (client) {
    boolean currentLineIsBlank = true;
    while (client.connected()) {     
      if (client.available()) {
        char c = client.read();
                                         
           if (inString.length() < maxLengthWEB) {   
                inString.concat(c);       
           }


After form:
Code: [Select]

String stringOne = inString;


Then use indexOf to extract the number between the & and = symbols.  This is from my code, should be able to modify to work with yours.

Code: [Select]

        int firstequaltemp = stringOne.indexOf('=');
        int secondequaltemp = stringOne.indexOf('=', firstequaltemp + 1); //firstequal + 1 means the second equal in the get string
       
        int firstandtemp = stringOne.indexOf('&');
        int secondandtemp = stringOne.indexOf('&', firstandtemp + 1);       

JO3RI

#9
Mar 27, 2011, 05:30 pm
OK, thanks. I'm busy too. Waiting for our third child to be born this week. That will give me some sleepless nights  :smiley-sleep: . But I'll continue the work for sure. 8)

techadmin

#10
Mar 27, 2011, 11:22 pm
Awesome man, congrats.  Yeah, my 2 year old is a hand full, I'll come to my computer and find chunks of code deleted, or added characters, (I make massive code revisions), she broke my N key off, pulls wires, etc, etc.

I have my code working finally, we'll be posting soon and looking at your code again, very nice structure.

xanok

#11
Mar 28, 2011, 01:35 am
Beautiful! xD

I imagine that your problem is the sizes of pages, right?
Ever consider storing the pages in SD Card?
Because that is what I plan to do when I receive my ethernet shield and SD shield ;)

Anyway, good luck!

JO3RI

#12
Apr 02, 2011, 02:21 pm
Hi, all. Our newborn son Siebe is now 6 days old and doing well. Time to get back to Arduino.  :D

@xanok: We know you can use SD, but we don't want to. My final goal is a library for Ethernet Setup. That would make it very easy for other projects to have a network one can easy set up. (more arduino's on the same network)

So It's time to dive into the

Code: [Select]
#define maxLengthWEB 100
String inString = String(maxLengthWEB);

rainjacks

#13
Apr 13, 2011, 05:39 pm
I'm looking into this as well.  I am especially interested in using the SD card instead of EEPROM.  That way you can create an ini file on the card from another computer that contains all of the settings.  Also, the HTML files can be served from the card freeing up that much more memory.

I've got serving html from an SD card working.  Now I am working on reading data from the card for ethernet settings and being able to save the settings back to the card.

If there is anyone who has already been down this road I'd rather not reinvent the wheel.   :)

JO3RI

#14
Aug 13, 2011, 10:12 am
I finally found out how to read the data out of the URL, so now I can finish this project. I'll dump all html code and restart with a very simple web page.

DHCP or STATIC
IP
MASK
HW
Print
Go Up
Pages: [1] 2 3 4