Go Down

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


Update to compile with Arduino 1.6.4 / 1.6.5.
Read this to understand the modifications


In my last post I uploaded a sketch that I use with the ENC28J60 ethernet controller. If you want to use with the WIZ5100 controller (the Arduino official one), just change the line #include <UIPEthernet.h> to #include <Ethernet.h>.


I was able to compile in installed IDE (Not stand alone file) ver 1.0.5-r2, using UIPEthernet library.
successfully compiled EthernetSetup1_1 , will be adding more options like selct DHCP and STATIC.
There is a bug in MAC address field. Eg mac: 00:02:8A:FE:0F , leading zeros are omited.
Any one has a fix ?

One more issue I am running into:
After I add some html code in
Code: [Select]
prog_char htmla0 and
Code: [Select]
prog_char htmla1  it does not save first two digits of mac address.




Hi, It has been a long time since I visited this forum (very long)

Nice to see people kept working on the code.

Leading zero's is a problem indeed, "posting" a zero = to posting nothing. To be honest, I don't have a clue on how to fix it.


to reset the Arduino from Software i use this


So now everytime i press submit it resets the Arduino if there where some changes in the settings.

Edit: At the moment it only works with ip changes, not with Mac changes


Hi I am also using the basic front end of this project for my own..
I made a few discoveries...

Instead of going mad with using progmem to store the HTML, you can use Macro F

Code: [Select]

client.println(F("HTTP/1.1 200 OK")); //send new page
client.println(F("Content-Type: text/html"));
client.println(F("Connection: close"));  // the connection will be closed after completion of the response

really neatens things up for you ...

Also I was wondering about this soft restart...

I was thinking you could call up a line of assembler that would basically do a direct jump to the program start vector...


Im really pleased with mine so far, in the end mine is a long way from where I started with the code on here, it uses some nice simple CSS, JS and DOM


hello everyone,

in addition to this project I want to form this project to setup server address
which is I want to post sensor data to. but I could not manage to change  an store in eeprom web server information which is stored as default string value.  anybody can help me to solve this issue..

thanks for help..


I saw something on-line about how to do this, I shall try and find the link for it...


Need help...
Anyone has modified the code for another server entry i.e.
MAC,IP,GW,MASK,SERVER1 on to the webpage.
I tried but the the submit is having some issue-the previous data displays after submitting new!
As I don't know html coding I tried tweaking JO3RI first post code.


For Server use this:

byte mac[] = {0xDE, 0xAD, 0xBE, 0xAA, 0xFE, 0xAE }; //assign arduino mac address  
byte ip[] = {192, 168, 0, 177 }; // ip in lan assigned to arduino                
byte gateway[] = {192, 168, 0, 1 }; // internet access via router              
byte subnet[] = {255, 255, 255, 0 }; //subnet mask                              
byte serverName[] = { 192, 168, 0, 101 }; // (IP)  web page server IP address  
byte dnsserver[] = {192,168,0,1};        //-------------------
EthernetServer server(80); //server port arduino server will use

// This is the HTML code all chopped up. The best way to do this is, is by typing
// your HTML code in an editor, counting your characters and divide them by 8.
// you can chop your HTML on every place, but not on the \" parts. So remember,
// you have to use \" instead of simple " within the HTML, or it will not work.

const char htmlx0[] PROGMEM = "<html><title>Arduino Ethernet Setup Page</title><body marginwidth=\"0\" marginheight=\"0\" ";
const char htmlx1[] PROGMEM = "leftmargin=\"0\" style=\"margin: 0; padding: 0;\"><table bgcolor=\"#999999\" border";
const char htmlx2[] PROGMEM = "=\"0\" width=\"100%\" cellpadding=\"1\" style=\"font-family:Verdana;color:#fff";
const char htmlx3[] PROGMEM = "fff;font-size:12px;\"><tr><td>&nbsp Arduino Ethernet Setup Page</td></tr></table><br>";
PROGMEM const char* const string_table0[] = {htmlx0, htmlx1, htmlx2, htmlx3};

const char htmla0[] PROGMEM = "<script>function hex2num (s_hex) {eval(\"var n_num=0X\" + s_hex);return n_num;}";
const char htmla1[] PROGMEM = "</script><table><form><input type=\"hidden\" name=\"SBM\" value=\"1\"><tr><td>MAC:";
const char htmla2[] PROGMEM = "<input id=\"T1\" type=\"text\" size=\"2\" maxlength=\"2\" name=\"DT1\" value=\"";
const char htmla3[] PROGMEM = "\">.<input id=\"T3\" type=\"text\" size=\"2\" maxlength=\"2\" name=\"DT2\" value=\"";
const char htmla4[] PROGMEM = "\">.<input id=\"T5\" type=\"text\" size=\"2\" maxlength=\"2\" name=\"DT3\" value=\"";
const char htmla5[] PROGMEM = "\">.<input id=\"T7\" type=\"text\" size=\"2\" maxlength=\"2\" name=\"DT4\" value=\"";
const char htmla6[] PROGMEM = "\">.<input id=\"T9\" type=\"text\" size=\"2\" maxlength=\"2\" name=\"DT5\" value=\"";
const char htmla7[] PROGMEM = "\">.<input id=\"T11\" type=\"text\" size=\"2\" maxlength=\"2\" name=\"DT6\" value=\"";
PROGMEM const char* const string_table1[] = {htmla0, htmla1, htmla2, htmla3, htmla4, htmla5, htmla6, htmla7};

const char htmlb0[] PROGMEM = "\"><input id=\"T2\" type=\"hidden\" name=\"DT1\"><input id=\"T4\" type=\"hidden\" name=\"DT2";
const char htmlb1[] PROGMEM = "\"><input id=\"T6\" type=\"hidden\" name=\"DT3\"><input id=\"T8\" type=\"hidden\" name=\"DT4";
const char htmlb2[] PROGMEM = "\"><input id=\"T10\" type=\"hidden\" name=\"DT5\"><input id=\"T12\" type=\"hidden\" name=\"D";
const char htmlb3[] PROGMEM = "T6\"></td></tr><tr><td>IP: <input type=\"text\" size=\"3\" maxlength=\"3\" name=\"DT7\" value=\"";
const char htmlb4[] PROGMEM = "\">.<input type=\"text\" size=\"3\" maxlength=\"3\" name=\"DT8\" value=\"";
const char htmlb5[] PROGMEM = "\">.<input type=\"text\" size=\"3\" maxlength=\"3\" name=\"DT9\" value=\"";
const char htmlb6[] PROGMEM = "\">.<input type=\"text\" size=\"3\" maxlength=\"3\" name=\"DT10\" value=\"";
PROGMEM const char* const string_table2[] = {htmlb0, htmlb1, htmlb2, htmlb3, htmlb4, htmlb5, htmlb6};

const char htmlc0[] PROGMEM = "\"></td></tr><tr><td>MASK: <input type=\"text\" size=\"3\" maxlength=\"3\" name=\"DT11\" value=\"";
const char htmlc1[] PROGMEM = "\">.<input type=\"text\" size=\"3\" maxlength=\"3\" name=\"DT12\" value=\"";
const char htmlc2[] PROGMEM = "\">.<input type=\"text\" size=\"3\" maxlength=\"3\" name=\"DT13\" value=\"";
const char htmlc3[] PROGMEM = "\">.<input type=\"text\" size=\"3\" maxlength=\"3\" name=\"DT14\" value=\"";
PROGMEM const char* const string_table3[] = {htmlc0, htmlc1, htmlc2, htmlc3};

const char htmld0[] PROGMEM = "\"></td></tr><tr><td>GW: <input type=\"text\" size=\"3\" maxlength=\"3\" name=\"DT15\" value=\"";
const char htmld1[] PROGMEM = "\">.<input type=\"text\" size=\"3\" maxlength=\"3\" name=\"DT16\" value=\"";
const char htmld2[] PROGMEM = "\">.<input type=\"text\" size=\"3\" maxlength=\"3\" name=\"DT17\" value=\"";
const char htmld3[] PROGMEM = "\">.<input type=\"text\" size=\"3\" maxlength=\"3\" name=\"DT18\" value=\"";
PROGMEM const char* const string_table4[] = {htmld0, htmld1, htmld2, htmld3};

const char htmle0[] PROGMEM = "\"></td></tr><tr><td>Server: <input type=\"text\" size=\"3\" maxlength=\"3\" name=\"DT19\" value=\"";
const char htmle1[] PROGMEM = "\">.<input type=\"text\" size=\"3\" maxlength=\"3\" name=\"DT20\" value=\"";
const char htmle2[] PROGMEM = "\">.<input type=\"text\" size=\"3\" maxlength=\"3\" name=\"DT21\" value=\"";
const char htmle3[] PROGMEM = "\">.<input type=\"text\" size=\"3\" maxlength=\"3\" name=\"DT22\" value=\"";
const char htmle4[] PROGMEM = "\"></td></tr><tr><td><br></td></tr><tr><td><input id=\"button\"type=\"submit\" value=\"SUBMIT\" ";
const char htmle5[] PROGMEM = "></td></tr></form></table></body></html>";
PROGMEM const char* const string_table5[] = {htmle0, htmle1, htmle2, htmle3, htmle4, htmle5};

const char htmlf0[] PROGMEM = "Onclick=\"document.getElementById('T2').value ";
const char htmlf1[] PROGMEM = "= hex2num(document.getElementById('T1').value);";
const char htmlf2[] PROGMEM = "document.getElementById('T4').value = hex2num(document.getElementById('T3').value);";
const char htmlf3[] PROGMEM = "document.getElementById('T6').value = hex2num(document.getElementById('T5').value);";
const char htmlf4[] PROGMEM = "document.getElementById('T8').value = hex2num(document.getElementById('T7').value);";
const char htmlf5[] PROGMEM = "document.getElementById('T10').value = hex2num(document.getElementById('T9').value);";
const char htmlf6[] PROGMEM = "document.getElementById('T12').value = hex2num(document.getElementById('T11').value);\"";
const char htmlf7[] PROGMEM = "\"></td></tr><tr><td><br></td></tr><tr><td><input id=\"button\"type=\"button\" onmousedown=location.href=\"/index.html\"  value=\"HOME\" ";
PROGMEM const char* const string_table6[] = {htmlf0, htmlf1, htmlf2, htmlf3, htmlf4, htmlf5, htmlf6, htmlf7};

const byte ID = 0x92; //used to identify if valid data in EEPROM the "know" bit,
// if this is written in EEPROM the sketch has ran before
// We use this, so that the very first time you'll run this sketch it will use
// the values written above.
// defining which EEPROM address we are using for what data


void setup(){

ShieldSetup (); //Setup the Ethernet shield
// Ethernet.begin(mac,ip,gateway,gateway,subnet);
// Ethernet.setRetransmissionTimeout(50);  // set the Ethernet controller's timeout to 50 ms
//Serial.println("server/client 1.0 test 7/03/12"); // keep track of what is loaded
//Serial.println("Send an g in serial monitor to test client"); // what to do to test client
Serial.print("local IP is  ");
Serial.print("local MAC is  ");
Serial.print("remote server's IP is  ");
Serial.print("the gateway is  ");
Serial.print("the subnet is  ");
Serial.print("local server Port is  ");



has there been any further development with this ? or a new library exists ? looking for a setup page which such as this with ability to setup static or dhcp and server address stored in eeprom and compilable on 1.8+ as these example need lots of tweaks....got the first examples from JO3RI (is it a ham call ??) working but would like to have the dhcp & server address option but he seems to have abandoned the code


Thanks' JO3RI for share your knowledge you are a unique.
and thanks' all, that is big work.
I need to help, I want to create the same project but using the ESP8266 NodeMCU what is the difference in the code?? 

Go Up