Go Down

Topic: dynamic html and having a NAS php tunneling to the Arduino (Read 3401 times) previous topic - next topic


Apr 11, 2011, 11:08 am Last Edit: Apr 13, 2011, 07:29 am by BoomTakZaag Reason: 1
Dear Arduino forum members,

for starters; i dont know for sure if the php/nas part has really much to do with the Arduino and/or it's Ethernet shield, but still i hope you guys can help me out on this one.
I recently bought the Arduino together with the Ethernet shield and started playing with; love the thing: easy to work with and it doesn't leave a wire mesh and solder residue.

My main goal to start up with is to make an Arduino host a small, simple HTML page with some control and feedback. The only thing it really has to do is to control some led's and display the state of them.

As a starter i didn't build up the code from scratch but used some code from http://kevinhaw.com/RoboSapienServer.php , actually the only thing i altered was the specific code to his robot, in order to fit my own requirements.

The first problem is that the Arduino can only extract strings from the URL itself. In other words; the only way to get data out of HTML forms is to use the method GET.
The problem with this is that i cannot use META content refreshers without tinkering the state of the led's. The Arduino thinks that i pushed a button on the website.
One thing that was kind of succesfull was to META refresh and redirect to the root file [IP]/ , but this way the first time it refreshes, the Arduino still thinks i pushed the previous Html button.

The second problem that i encountered was that the Arduino is only able to host simple HTML files; this way a secure login is impossible.
One way i tried to evade this problem was to have my NAS running a php login script and then have it tunneling to the Arduino, while still running $_session checks. The only problem is, how do i tunnel or have the  NAS getting and displaying the Arduino's HTML output?
As you have probably discovered by now, i am just a simple amateur trying to get some this thing to work; i do have quite some experience with C(++) but i am a real no go on PHP.

I hope you guys could shed some light on one or two of my problems,  thanks very much in advance!

BoomTakZaag from Holland

Arduino code: (remember: most of the ethernet related code i am not the author of!)
Code: [Select]

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

byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
byte ip[] = { 192, 168, 1, 150 };

// Server for web requests
Server server(80);

// Define field name in the submitted form

// String for HTTP request variables
char pcHttpReqRsCmd[20] = {'\0'};

volatile int UCMD = -1;  // A robosapien command sent over the URL of a webpage HTTP request

#define LEDRED    0x80
#define LEDGREEN  0x81
#define BUZZER    0x82

int eLEDRED = 2;
boolean LEDREDstat = false;
int eLEDGREEN = 3;
boolean LEDGREENstat = false;
int eBUZZER = 4;
boolean BUZZERstat = false;

void setup() {
 pinMode(eLEDRED, OUTPUT);
 pinMode(eBUZZER, OUTPUT);
 Ethernet.begin(mac, ip);
digitalWrite(eLEDGREEN, HIGH);
digitalWrite(eLEDRED, HIGH);
digitalWrite(eLEDGREEN, LOW);
digitalWrite(eLEDRED, LOW);
digitalWrite(eBUZZER, HIGH);
digitalWrite(eBUZZER, LOW);

void LookUp(){
 if (UCMD != -1) {
   if (UCMD == 0x80 && LEDREDstat == false) {
     digitalWrite(eLEDRED, HIGH);
     LEDREDstat = true;
   else if (UCMD == 0x80 && LEDREDstat == true) {
     digitalWrite(eLEDRED, LOW);
     LEDREDstat = false;
   if (UCMD == 0x81 && LEDGREENstat == false) {
     digitalWrite(eLEDGREEN, HIGH);
     LEDGREENstat = true;
   else if (UCMD == 0x81 && LEDGREENstat == true) {
     digitalWrite(eLEDGREEN, LOW);
     LEDGREENstat = false;
   if (UCMD == 0x82 && BUZZERstat == false) {
     digitalWrite(eBUZZER, HIGH);
     BUZZERstat = true;
   else if (UCMD == 0x82 && BUZZERstat == true) {
     digitalWrite(eBUZZER, LOW);
     BUZZERstat = false;
   UCMD = -1;

void HtmlHeader(Client client)
 client.println("HTTP/1.1 200 OK");
 client.println("Content-Type: text/html");
 client.println("  <TITLE>ARDUINO REMOTE CONTROL</TITLE>");//
//  client.println("  <META HTTP-EQUIV=\"refresh\" CONTENT=\"5\">");
 client.println("</HEAD><BODY bgcolor=\"#9bbad6\">");
void HtmlFooter(Client client)
void SubmitButton(Client &client, char *pcLabel, int iCmd)
 client.print("<form method=post action=\"/?");
 client.print(iCmd, HEX);
 client.print("\"><input type=submit value=\"");
 client.print("\" name=\"" SUBMIT_BUTTON_FIELDNAME "\">");
// Parse an HTTP request header one character at a time, seeking string variables
void ParseHttpHeader(Client &client)
 char c;
 // Skip through until we hit a question mark (first one)
 while((c = client.read()) != '?' && client.available())
   // Debug - print data

 // Are we here for a question mark or did we run out of data?
 if(client.available() > 2)
   char pcUrlNum[3], *pc;
   // We have enough data for a hex number - read it
   for(int i=0; i < 2; i++)
     // Read and dump data to debug port
     Serial.print(c = pcUrlNum[i] = client.read());
   // Null terminate string
   pcUrlNum[2] = '\0';
   // Get hex number
   UCMD = strtol(pcUrlNum, &pc, 0x10);  
 // Skip through and discard all remaining data
   // Debug - print data
   Serial.print(c = client.read());
// Web server loop  
void WebServerLoop()
 Client client = server.available();
 boolean bPendingHttpResponse = false; // True when we've received a whole HTTP request and need to output the webpage
 char c;  // For reading in HTTP request one character at a time

 if (client) {
   // Loop as long as there's a connection
   while (client.connected()) {
     // Do we have pending data (an HTTP request)?    
     if (client.available()) {
       // Indicate we need to respond to the HTTP request as soon as we're done processing it
       bPendingHttpResponse = true;
       // There's no data waiting to be read in on the client socket.  Do we have a pending HTTP request?
         // Yes, we have a pending request.  Clear the flag and then send the webpage to the client
         bPendingHttpResponse = false;
         // send a standard http response header and HTML header
         // Put out a text header
         client.println("<H1 ALIGN=CENTER><font color=""3E4B5C"">ARDUINO REMOTE CONTROL</H1>");          
         client.println("<table border cellspacing=5 cellpadding=70 ALIGN=CENTER><tr>");
         SubmitButton(client, "GREEN LED", LEDGREEN);          
         SubmitButton(client, "RED LED", LEDRED);
         SubmitButton(client, "BUZZER", BUZZER);
 //printing LED status
 client.println("<table border cellspacing=5 cellpadding=70 ALIGN=CENTER><tr>");
 client.print("<font size=""5""><font color=""3E4B5C"">GREEN LED status: ");
 if (LEDGREENstat == true) {
    Serial.print("green led on");
  else {
   Serial.println("green led off");
 client.print("<font size=""5"">RED LED status: ");
 if (LEDREDstat == true) {
    Serial.print("red led on");
  else {
   Serial.println("red led off");
 client.print("<font size=""5"">BUZZER status: ");
 if (BUZZERstat == true) {
    Serial.print("buzzer on");
  else {
   Serial.println("buzzer off");
        // send HTML footer
void loop(){

Jonathan Oxer

The first problem is that the Arduino can only extract strings from the URL itself. In other words; the only way to get data out of HTML forms is to use the method GET.

There are ways around that. Probably one of the easiest is to use the Webduino library, which implements the scaffolding you need for POST / GET processing etc.

Coming soon: "EtherTen", Uno-like board with built in Ethernet: www.freetronics.com/etherten


Make your Meta refresh look like this:

<meta http-equiv=refresh content=10;url=http://your.ip.here.xxx>

Putting in the specific IP or DNS of the site to refresh keeps it from resending the form data which solves one of your issues.  Basically it is a redirect to the original page.  It works in Mozilla and Safari.  I haven't tried it with any other browsers.  Admittedly, it is ugly, but it works.


The below page has code that might be of interest.

Google forum search: Use Google Search box in upper right side of this page.
Why I like my 2005 Rio Yellow Honda S2000  https://www.youtube.com/watch?v=pWjMvrkUqX0


Sorry for the late reaction, the recent time i have been busy for school.

@Jonathan Oxer thanks i'll look into that very soon! ill post the updates.
@rainjacks I already implemented the meta refresher, the problem with it is that is making connections unreliable and very slow.
@zoomkat Goldmine! Thank you very much!

Thanks very much for the feedback! I'll look into it and i'll post the updates!


Go Up