build a html5 server on Aduino to get cell phone gyroscope data

hi
I want to use iphone or other android phone or iPad or other mobile device to control arduino.
now I want to use ethernet shield connect to a router(use the arduino to build the server), then I can use these device to send data to Arduino.I don't want to use a computer to build the server.

1.is there any good tutorial to build html5 server in anduino so that I can get cell phone gyroscope data?
2.the example file in Arduino called "Webserver" , is that a html5 server?

Sorry, I am not familiar with html5, need help~~

Sorry, I am not familiar with html5, need help~~

You're going to need to learn HTML5, first. Putting HTML5 text on the Arduino-as-server is no problem. Having the browser render the HTML5 code may, or may not, be a problem.

2.the example file in Arduino called "Webserver" , is that a html5 server?

It's a server. What it serves is irrelevant.

why you think it "may or may not be a problem"?? sorry i dont understand, why the browser will be a problem? Safri and other popular browsers are supporting html5.

What feature in HTML5 do you believe you need for this project? How are you planning on getting the cell phone gyro data to the server?

SurferTim:
What feature in HTML5 do you believe you need for this project? How are you planning on getting the cell phone gyro data to the server?

html5 support me to get gyroscope data from iPhone or iPad ~~

And what about html5? Besides the Arduino, I have an HTML5 server, and I am not getting your gyro data either.

It appears the iPad uses a client JavaScript/CSS API to access the gyro data. That should not be a problem. Send it the JavaScript API code and you should be good to go.

edit: Here is server code that shows how to embed JavaScript in your html doc.
http://playground.arduino.cc/Code/WebServerST

SurferTim:
And what about html5? Besides the Arduino, I have an HTML5 server, and I am not getting your gyro data either.

It appears the iPad uses a client JavaScript/CSS API to access the gyro data. That should not be a problem. Send it the JavaScript API code and you should be good to go.

edit: Here is server code that shows how to embed JavaScript in your html doc.
Arduino Playground - HomePage

hello
now, I can get the gyro data, it will appear on my browser,
here is my arduino code:

/*--------------------------------------------------------------
  Program:      eth_websrv_SD

  Description:  Arduino web server that serves up a basic web
                page. The web page is stored on the SD card.
  
  Hardware:     Arduino Uno and official Arduino Ethernet
                shield. Should work with other Arduinos and
                compatible Ethernet shields.
                2Gb micro SD card formatted FAT16
                
  Software:     Developed using Arduino 1.0.3 software
                Should be compatible with Arduino 1.0 +
                SD card contains web page called index.htm
  
  References:   - WebServer example by David A. Mellis and 
                  modified by Tom Igoe
                - SD card examples by David A. Mellis and
                  Tom Igoe
                - Ethernet library documentation:
                  http://arduino.cc/en/Reference/Ethernet
                - SD Card library documentation:
                  http://arduino.cc/en/Reference/SD

  Date:         10 January 2013
 
  Author:       W.A. Smith, http://startingelectronics.com
--------------------------------------------------------------*/

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

// MAC address from Ethernet shield sticker under board
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192,168, 1, 177); // IP address, may need to change depending on network
EthernetServer server(80);  // create a server at port 80


String HTTP_req;            // stores the HTTP request

File webFile;

void setup()
{
    Ethernet.begin(mac, ip);  // initialize Ethernet device
    server.begin();           // start to listen for clients
    Serial.begin(115200);       // for debugging
    
    // initialize SD card
    Serial.println("Initializing SD card...");
    if (!SD.begin(4)) {
        Serial.println("ERROR - SD card initialization failed!");
        return;    // init failed
    }
    Serial.println("SUCCESS - SD card initialized.");
    // check for index.htm file
    if (!SD.exists("index.htm")) {
        Serial.println("ERROR - Can't find index.htm file!");
        return;  // can't find index file
    }
    Serial.println("SUCCESS - Found index.htm file.");
}

void loop()
{
    EthernetClient client = server.available();  // try to get client

    if (client) {  // got client?
        boolean currentLineIsBlank = true;
        while (client.connected()) {
            if (client.available()) {   // client data available to read
                char c = client.read(); // read 1 byte (character) from client
                HTTP_req += c;  // save the HTTP request 1 char at a time
                // last line of client request is blank and ends with \n
                // respond to client only after last line received
                if (c == '\n' && currentLineIsBlank) {
                    // send a standard http response header
                    client.println("HTTP/1.1 200 OK");
                    client.println("Content-Type: text/html");
                    client.println("Connection: close");
                    client.println();
                    // send web page
                    webFile = SD.open("index4.htm");        // open web page file
                    if (webFile) {
                        while(webFile.available()) {
                            client.write(webFile.read()); // send web page to client
                        }
                        webFile.close();
                    }
                     // display received HTTP request on serial port
                    Serial.print(HTTP_req);
                    HTTP_req = "";            // finished with request, empty string
                    break;
                }
                // every line of text received from the client ends with \r\n
                if (c == '\n') {
                    // last character on line of received text
                    // starting new line with next character read
                    currentLineIsBlank = true;
                    
                } 
                else if (c != '\r') {
                    // a text character was received from client
                    currentLineIsBlank = false;
                }
            } // end if (client.available())
        } // end while (client.connected())
        delay(1);      // give the web browser time to receive the data
        client.stop(); // close the connection
    } // end if (client)
}

here is the html5 code

Peter Friese's Gyro Demo #no { display: none; }

@media screen {
html, body, div, span {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
}
body {
height: auto;
-webkit-text-size-adjust:none;
font-family:Helvetica, Arial, Verdana, sans-serif;
padding:0px;
overflow-x: hidden;
}

.outer {
background: rgba(123, 256, 245, 0.9);
padding: 0px;
min-height: 48px;

}

.box {
position: relative;
float: left;
width: 45%;
padding: 7px;
border: 1px solid rgba(255, 255, 255, 0.6);
background: rgba(178,215,255,0.75);
min-height: 160px;
}

.box2 {
position: relative;
float: left;
width: 45%;
padding: 7px;
border: 1px solid rgba(255, 255, 255, 0.6);
background: rgba(178,215,255,0.75);
}

.box span {
display: block;
}

span.head {
font-weight: bold;
}

}

Gyroscope
Your browser does not support Device Orientation and Motion API. Try this sample with iPhone, iPod or iPad with iOS 4.2+.

Arduino AJAX Switch Status

Switch state: Not requested...

the gyro data will show on my browser.but I can not pass this data to my arduino to use it quite unhappy~~

but I can not pass this data to my arduino to use it

Why can't you?

Where does your Arduino code give a rats ass about what the client requested?

I am quite new to arduino.....

I am quite new to arduino.....

So? If you are taking on a client/server project, you ought to understand client/server communications. You ought to understand what it means for a client to make a GET request. You ought to understand the information that the server responds with. You ought to understand what, in that response (html5 data)) causes the client to make another request to the server. You ought to understand that the server has to actually pay attention to what is requested, and not just blindly serve up the same page again.

yes, you are right. I should learn these first......
but with lucky, I made it work now except with very big delay......and I don't know why.....

PaulS:

I am quite new to arduino.....

You ought to understand what it means for a client to make a GET request.

Can you give me a example?

Can you give me a example?

Sure. What do you think happens when you click on a link in this forum? Like, when you want to read a thread? Pay some attention to how the address bar changes. The URL is a GET request, combined with a protocol (http:) and a server (//forum.arduino.cc). The rest is the GET request.

Each time you click a link, a request is made to the server. If the server served the same page each time you clicked a link, the forum wouldn't be very useful, would it? Instead, the server actually pays attention to what the client requested, and serves up the proper response, based on the GET request.

My preferred place to learn about client/server interaction, when using the http: protocol is:

Look at how a form submit button causes a new GET request. Notice that there is stuff appended onto the original URL. That stuff is what tells the server to do something. The server is NOT free to disregard that stuff (as you are doing).

PaulS:

Can you give me a example?

The rest is the GET request.

thanks so much, I write these code in html:

request.open("GET", "Yaw" + beta, true);
request.send(null);
setTimeout('GetSwitchState()', 50);

in my Arduino serial I can receive GET \Yaw60 HTTP...
so is this the method you calling "GET request."

Thanks for your help, I will check the tutorial.

in my Arduino serial I can receive GET \Yaw60 HTTP...
so is this the method you calling "GET request."

Yes.

it works,thanks.
But it is not so perfect.has some small lag(I am using servo motor). Last time I was using Xcode to send UDP data which is quite short to Arduino, is that possible to send UDP socket to Arduino?
And I searched on the internet with key words "Aduino websocket server", I found some library there, but none of them works with their own example file. so strange~~