dumping arduino's eeprom to the browser

Using Arduino Project Guidance
#1

Hello to the web gurus I implementd the web server described in instructable, part 14 and it works fine. Now I'd like to add another button (as the ones toggling the leds) that will send to arduino a 'dump' request upon which arduino will send back 512 lines of the eeprom dump, each line containing 4 integers. This would allow me to see exceptions logged to eeprom w/o connecting a monitor (which resets the machine). I know how to add the 'please send dump' button and I can do client.write of the 4 integers followed by a cr/lf but I don't know how to prepare the browser page to accept the data and show it in decimal. Thanks in advance for your help

#2

guy_c: I know how to add the 'please send dump' button and I can do client.write of the 4 integers followed by a cr/lf but I don't know how to prepare the browser page to accept the data and show it in decimal.

Have the button link to a second URL on the Arduino. When the request for that page arrives, send an HTML header. Use client.print() in place of client.write() to add decimal numbers to the HTML. Add HTML tags among the data to format the HTML page as desired. Send the HTML footer. The browser will then display the HTML page which includes your decimal numbers. On the browser, hit the Back button to go back to the previous page (the one with the buttons).

#3

Thank you John, I think I understand: instead of sending xml, I send the formatted dump data. I'll try that and report here

#4

I did not succeed
In order not to reprogram the sd uselessly I only change the arduino code as follows

if one of the button - i choosed button 3- is pressed then instead of executing serveAjax(), I execute sendText() and that’s it.

Everything continues to work as usual when pressing all buttons but when pressing button 3 arduino does send the page but nothing gets printed on the browser

void sendTextPage(EthernetClient &client){
  Serial.println("sending text page\r\n");
  client.println("HTTP/1.1 200 OK");
  client.println("Content-Type: text/html");
  client.println("Connection: close");
  client.println();
                   // send web page
  client.println("<!DOCTYPE html>");
  client.println("<html>");
  client.println("<head>");
  client.println("<title>Eeprom dump</title>");
  client.println("</head>");
  client.println("<body>");
  client.println("<h1>this is a bla bla</h1>");
  client.println("</body>");
  client.println("</html>");
  Serial.println("text sent");
}
#5

1: Put in code to recognize that the browser is looking for the eeprom page and THEN call your function that returns the HTML for that page.

2: Open the eeprom page's URL with your browser to see that the server returns the right page. If that doesn't work, go back to step 1.

3: Put a link to the new page in the old page to make sure you can click on something in your old page to redirect to the new eeprom page.

4: Figure out how to get a form button to redirect to a page and have button 3 redirect to the eeprom page.

#6

Thanks

  1. here is the code
           if ((strstr(genBuf,"ajax_inputs")!=NULL)&&(strstr(genBuf,"LED3=1")==NULL)){spln("pure ajax");sendAjax(client);}
            else if ((strstr(genBuf,"ajax_inputs")!=NULL)&&(strstr(genBuf,"LED3=1")!=NULL)){spln("pseudo ajax");
                                       sendTextPage(client);}

note sp is Serial.print

  1. I do this (open the eeprom page) by pressing the browser’s LED3 button and the server
    discriminates ok this case as sendTextPage prints before and after sending the “textPage”. Again, here is sendTextPage
void sendTextPage(EthernetClient &client){
  Serial.println("sending text page\r\n");
  client.println("HTTP/1.1 200 OK");
  client.println("Content-Type: text/html");
  client.println("Connection: close");
  client.println();
                   // send web page
  client.println("<!DOCTYPE html>");
  client.println("<html>");
  client.println("<head>");
  client.println("<title>Eeprom dump</title>");
  client.println("</head>");
  client.println("<body>");
  client.println("<h1>this is a bla bla</h1>");
  client.println("</body>");
  client.println("</html>");
  Serial.println("text sent");
}

and here is the runtime printout on the monitor when LED3 is pressed

GET /ajax_inputs&LED3=1&nocache=907707.4335224949 HTTP/1.1
Host: 192.168.2.124
Connection: keep-alive
Authorization: Basic R3V5OmIwdEBuMXF1Ng==
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36
Accept: */*
Referer: http://192.168.2.124/
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en,fr;q=0.8,he;q=0.6,en-US;q=0.4

pseudo ajax
sending text page

text sent
15:27:26 client stopped

I expect to see the page with the buttons being replaced by a page with “this is a bla bla”

… and it does not work

as if the browser doesn’t gash of what’s arriving. It is stuck looking to receive xml and ignoring the rest

#7

I think i cannot use the page with the buttons as is. Ill need to add a link there. So i must recode the sd.

#8

I can direct to another server action by adding at the end of the page
Dump
and this does the trick but I’d prefer to have this action to be as the other actions, with a button.
Current buttons are

<button type="button" id="LED4" onclick="GetButton4();GetArduinoIO()">Night cleared</button>


<button type="button" id="LED5" onclick="GetButton5();GetArduinoIO()">Test cleared</button>


<button type="button" id="refresh" onclick="GetArduinoIO()">Refresh</button>

where GetButton flips the corresponding state and GetArduino sends new state and gets state returned by the server. e.g.

function GetButton5()
{
  if (LED5_state === 1) {
    LED5_state = 0;
    strLED5 = "&LED5=0";
  }
  else {
    LED5_state = 1;
    strLED5 = "&LED5=1";
  }
}

I can add another button

<button type="button" id="dump" onclick="getButton6()">Eeprom dump</button>

which then shows nicely on the page but I don’t know how to make the getButton6 function to simply “get” from the server with a distinctive “dump” text so that it returns the dump page

Thanks

#9

OK, got something that works and looks nice. Here it is for whoever wants to extend the “startingelectronics” web server tutorial
added button 6

<button type="button" id="Dump Eeprom" onclick="GetButton6()">Dump Eeprom</button>

with corresponding function

function GetButton6() {
    window.location.assign("dump.htm")
}

Many thanks to johnwasser

#10