Arduino Web Interface from second server

Hi All,

I have a question. I want to control my Arduino Uno + ethernet shield using a website not served by my Arduino. I want to make an 'universal' interface that I can use on my Android phone, iPad and PC's without installing anything on them. Using the web browers on these devices is the easiest way of doing this. I think. Furthermore (yes I have a lot of wishes :)) it has to be fast responding to clicks and/or mouseovers, etc. The amount of data I want to send is very small. (like in the examples from Zoomkat ?On, ?Off, etc.) Btw I am a kind of newbie (forgive me).

I used the sketches from Zoomkat (thanks Zoomkat): http://forum.arduino.cc/index.php?topic=137365.0

Works perfect! But what if I want to control my Arduino from for instance a Wordpress page? So I thought if I uses the Zoomkat code for the Server-Client code I can send data from any webpage in the world to my Arduino. http://forum.arduino.cc/index.php?topic=90210.0

So my questions:

  • Can my Arduino-server handle complex pages and still be responding fast?

  • I think if I add a Form to a complex website (external or localhost for instance) and let it send the data to my Arduino client. Wouldn't this will work faster? Is this correct?

  • Is this the best way of doing this? I experimented with the ArduinoWebsocket library but I can't get this to work. The Zoomkat sketches are far more basic and understandable for me. But if Websocket is the best way to go, I start digging into to this.

  • I also tried node.js and Noduino. It works fine but I can't find a way to use it without installing node.js on my iPad, Android phone, my Laptop, etc.

Please help me with my question. Thanks, thanks, thanks!

Jeroen

Using the web browers on these devices is the easiest way of doing this. I think.

Yes. Those are clients, though. They expect to communicate with a server. You appear not to want the Arduino to be a server. Why, I can't imagine.

Can my Arduino-server handle complex pages and still be responding fast?

That depends on what you mean by "handle", "complex", and "fast". Define handle, and quantify complex and fast.

I think if I add a Form to a complex website (external or localhost for instance) and let it send the data to my Arduino client. Wouldn't this will work faster? Is this correct?

You can't push data to a client. The client has to pull it. Your browser isn't a server.

Is this the best way of doing this?

It's not even a possible way, so it certainly can't be the best way.

•Can my Arduino-server handle complex pages and still be responding fast?

Yes, there are methods to make larger tcp/ip packets which reduce the amount of communication required to transfer a web page, reducing the page loading time.

•I think if I add a Form to a complex website (external or localhost for instance) and let it send the data to my Arduino client. Wouldn't this will work faster? Is this correct?

The client browser will send the form contents to the arduino server quickly. The overall "speed" depends on how much stuff the arduino has to send back to the client. If a new page has to be sent to the client, then it may take a longer time than just sending a short Ok or similar to the client.

•Is this the best way of doing this? I experimented with the ArduinoWebsocket library but I can't get this to work. The Zoomkat sketches are far more basic and understandable for me. But if Websocket is the best way to go, I start digging into to this.

I don't know anything about the web socket stuff, but http traffic can be fast if small amounts of data are being transferred.

•I also tried node.js and Noduino. It works fine but I can't find a way to use it without installing node.js on my iPad, Android phone, my Laptop, etc.

You can make large pages and serve them from the big commercial servers if desired, just sending the short embedded commands to the arduino IP address. The below html test page gets the files from my ISPs web server and the slider commands are sent to my arduino on my lan for testing (view the page source to see the lan IP address).

http://web.comporium.net/~shb/servoslider.htm

Thanks guys for you replies on my question!

@Zoomkat. I investigated your site (nice control!). Correct me if I am wrong but you use your Arduino to get data from your site. Right?

I want to post data to my Arduino. I want to use my web interface like a joystick to control my Arduino. So I thought a POST would be best.

Here’s my very basic code:

// Arduino Webserver Interface _02
// based on Arduino Webserver tutorial and Zoomkat's code

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

byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; //physical mac address
IPAddress ip(192,168,2,177); // ip in lan
IPAddress gateway(192,168,2,1); // internet access via router
IPAddress subnet(255,255,255,0); //subnet mask
EthernetServer server(80); //server port
EthernetClient client;
String readString; 

//////////////////////

void setup(){

  pinMode(4, OUTPUT);
 pinMode(5, OUTPUT);  //pin selected to control
  Ethernet.begin(mac, ip, subnet, gateway); 
  server.begin();
  Serial.begin(9600); 
}

void loop(){
  // check for serial input
  if (Serial.available() > 0) 
  {
    byte inChar;
    inChar = Serial.read();
    if(inChar == 'g')
    {
      Serial.println("Disconnect");
      // code to disconnect
    }
  }  
  
  
EthernetClient client = server.available();
   if (client) {
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        
        Serial.println("Reading");

        //read char by char HTTP request
        if (readString.length() < 100) {

          //store characters to string 
          readString += c; 
          //Serial.print(c);
        } 

        //if HTTP request has ended
        if (c == '\n') {

          ///////////////
          Serial.println(readString); //print to serial monitor for debuging 

            //now output HTML data header
          if(readString.indexOf('?') >=0) { //don't send new page
            client.println("HTTP/1.1 204 Zoomkat");
            client.println();
            client.println();  
          }
          else {
            
            client.println("HTTP/1.1 200 OK"); //send new page
            client.println("Content-Type: text/html");
            client.println();

            client.println("<HTML>");
            client.println("<HEAD>");
            client.println("<TITLE>Arduino Server Interface</TITLE>");
            client.println("</HEAD>");
            client.println("<BODY>");

            client.println("<H1>Arduino Server Interface</H1>");

            client.println("<a href=\"/?1on\" target=\"inlineframe\">ON</a>"); 
            client.println("<a href=\"/?1off\" target=\"inlineframe\">OFF</a>"); 

            //client.println("<IFRAME name=inlineframe src=\"res://D:/WINDOWS/dnserror.htm\" width=1 height=1\">");
            client.println("<IFRAME name=inlineframe style=\"display:none\" >");          
            client.println("</IFRAME>");

            client.println("</BODY>");
            client.println("</HTML>");
          }
           Serial.println("okay");
          delay(1);
          //stopping client
          

          ///////////////////// control arduino pin
          if(readString.indexOf("1on") >0)//checks for on
          {
            digitalWrite(4, HIGH);    // set pin 4 high
            Serial.println("Led On");
          }
          if(readString.indexOf("1off") >0)//checks for off
          {
            digitalWrite(4, LOW);    // set pin 4 low
            Serial.println("Led Off");
          }
            if(readString.indexOf("2on") >0)//checks for on
          {
            digitalWrite(5, HIGH);    // set pin 4 high
            Serial.println("Led On");
          }
          if(readString.indexOf("2off") >0)//checks for off
          {
            digitalWrite(5, LOW);    // set pin 4 low
            Serial.println("Led Off");
          }
          
          //clearing string for next read
          readString="";
          client.stop();

        }
      }
    }
  }
  
}

HTML code:

<!DOCTYPE html>
<html>
	<head>
	<title> Arduino Webserver Test</title>
	
	
	</head>
<body>
<script>

function proceed (turn) {
    var form = document.createElement('form');
    form.setAttribute('method', 'post');
    form.setAttribute('action', turn);
    form.style.display = 'hidden';
    document.body.appendChild(form)
    form.submit();
}

</script>

<h1>LED</h1>
<p> Click to switch LED on and OFF.</p>
<div id="container">
<center>
<button class="Button_main" type="button" onMousedown="proceed('http://192.168.2.177/?1on')" onMouseup="proceed('http://192.168.2.177/?1off')">FWD</button> 
<button class="Button_main" type="button" onMousedown="proceed('http://192.168.2.177/?2on')" onMouseup="proceed('http://192.168.2.177/?2off')">REV</button> 



<button style="border:5px solid #dd3333; color:#dd3333;" class="Button_main" type="button" onMousedown="proceed('http://192.168.2.177/?1on');">ON</button> 
<button style="border:5px solid #dd3333; color:#dd3333;" class="Button_main" type="button" onMousedown="proceed('http://192.168.2.177/?1off');">OFF</button> 
</center>
</div>	
</body>

</html>

It works fast. The only problem now is that some web browsers redirect me to the 192.168.2.177?/1on adress and don’t stick to the website. Strange that some do redirect me and some don’t. Haven’t figured this out. I found some info on sites using an Ajax-POST. I’ll start looking there.

Again guys, thanks PaulS and Zoomkat for your time and usefull information!!