Pages: [1] 2   Go Down
Author Topic: Network settings web page FORM using EEPROM to save submit [DONE]  (Read 14796 times)
0 Members and 1 Guest are viewing this topic.
Hamme, Belgium
Offline Offline
Sr. Member
****
Karma: 4
Posts: 386
View Profile
WWW
 Bigger Bigger  Smaller Smaller  Reset Reset

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  smiley-kiss

So far I have been able to make the webpage:



and here you have the code so far:

Code:
/*
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
« Last Edit: August 19, 2011, 07:29:10 am by JO3RI » Logged


Hamme, Belgium
Offline Offline
Sr. Member
****
Karma: 4
Posts: 386
View Profile
WWW
 Bigger Bigger  Smaller Smaller  Reset Reset

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.

Logged


Hamme, Belgium
Offline Offline
Sr. Member
****
Karma: 4
Posts: 386
View Profile
WWW
 Bigger Bigger  Smaller Smaller  Reset Reset

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.
Logged


Hamme, Belgium
Offline Offline
Sr. Member
****
Karma: 4
Posts: 386
View Profile
WWW
 Bigger Bigger  Smaller Smaller  Reset Reset

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.

Logged


Offline Offline
Newbie
*
Karma: 0
Posts: 31
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

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.
Logged

Hamme, Belgium
Offline Offline
Sr. Member
****
Karma: 4
Posts: 386
View Profile
WWW
 Bigger Bigger  Smaller Smaller  Reset Reset

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)


* network_page8.pde (15.41 KB - downloaded 222 times.)
Logged


Offline Offline
Newbie
*
Karma: 0
Posts: 31
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

Looks very promising.
Logged

Hamme, Belgium
Offline Offline
Sr. Member
****
Karma: 4
Posts: 386
View Profile
WWW
 Bigger Bigger  Smaller Smaller  Reset Reset

@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.
Logged


Offline Offline
Newbie
*
Karma: 0
Posts: 31
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

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:
#define maxLengthWEB 100
String inString = String(maxLengthWEB);

Code:
  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:
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:
        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);       
Logged

Hamme, Belgium
Offline Offline
Sr. Member
****
Karma: 4
Posts: 386
View Profile
WWW
 Bigger Bigger  Smaller Smaller  Reset Reset

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. smiley-cool
Logged


Offline Offline
Newbie
*
Karma: 0
Posts: 31
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

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.
Logged

Brazil
Offline Offline
Jr. Member
**
Karma: 0
Posts: 68
Xano
View Profile
WWW
 Bigger Bigger  Smaller Smaller  Reset Reset

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 smiley-wink

Anyway, good luck!
Logged

Hamme, Belgium
Offline Offline
Sr. Member
****
Karma: 4
Posts: 386
View Profile
WWW
 Bigger Bigger  Smaller Smaller  Reset Reset

Hi, all. Our newborn son Siebe is now 6 days old and doing well. Time to get back to Arduino.  smiley-grin

@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:
#define maxLengthWEB 100
String inString = String(maxLengthWEB);
Logged


Offline Offline
Newbie
*
Karma: 0
Posts: 7
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

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.   smiley
Logged

Hamme, Belgium
Offline Offline
Sr. Member
****
Karma: 4
Posts: 386
View Profile
WWW
 Bigger Bigger  Smaller Smaller  Reset Reset

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
Logged


Pages: [1] 2   Go Up
Jump to: