Help with Web Page Communicating with Arduino

I've been stalking this forum for about a year now but never posted anything, so let's try my luck :smiley:

I would like to make a web page that runs on computer in local network which can communicate with my Arduino via Ethernet shield to get sensor readings, set pins's high and low etc.

I used Arduino as web server but when I put the web page HTML on Arduino it uses much memory, and it loads slowly. So I would like to keep my Arduino program lightweight and have my PC to run all that shiny and colorful web page stuff.

Where do I start? Can anyone tell me how to make a web page that will send /GET and /POST requests (Or something else for which I don't know that exists :slight_smile: ) to Arduino and read it's response.

Thank you in advance.

Cheers

Where do I start?

At the beginning.

A "web page" is what a browser draws based on output from a server, in response to a GET request.

The browser can not communicate with the Arduino. Only the server can. (It does not matter that the client (browser) and server are on the same machine.)

So, how is the client going to tell the server to tell the Arduino something?

What does your "web page" look like?

Thank You for response

My as you say "web page" has few buttons which control Arduino pins and temperature readings which are processed by AJAX every few seconds. It works on principle when I press the button or when i move the slider and submit value it creates /SOMETHING in adress bar. Arduino then catches string and searches for specific string and makes corresponding operation.

So is there any way that I can make server running on a PC and when I press a button it will forward that request to Arduino's IP adress?

So is there any way that I can make server running on a PC and when I press a button it will forward that request to Arduino's IP adress?

Yes. Every time you interact with your web page, the browser makes GET requests. If the GET request involves something that the Arduino cares about the script on the server should tell the Arduino.

So do You have any example how to make that kind of page? I'm not quite sure if you understand me. I don't want Arduino to be server. I don't know how to make page runing on PC which will redirect GET requests to Arduino.

I don't know how to make page runing on PC which will redirect GET requests to Arduino.

The GET requests will not be redirected to the Arduino. The script that the browser calls will talk to the serial port that the Arduino is listening to.

I'm not quite sure if you understand me.

Well, I'm not quite sure you understand client/server roles and communication.

Post the script that runs on the server, that generates the "web page".

This is html which generates the page:

iHEAT

Arduino SWHEATCO (Smart Wood Heating Control)

Povucite slider za regulaciju

I don't want Arduino to be connected via serial connection. I want have following scenario:

  1. Create web page and serve it on a local computer.
  2. I want to connect with any PC or mobile device to web page and push the button to turn the led ON or OFF on arduino
  3. Web page sends data to arduino's IP adress
  4. Arduino recieves data via ethernet and makes corresponding operation
  5. Arduino sends sensor values to local server and data is updated on a webpage

Thank you

I want have following scenario:

  1. Create web page and serve it on a local computer.
  2. I want to connect with any PC or mobile device to web page and push the button to turn the led ON or OFF on arduino
  3. Web page sends data to arduino's IP adress
  4. Arduino recieves data via ethernet and makes corresponding operation
  5. Arduino sends sensor values to local server and data is updated on a webpage

So, do that. Since you keep tap dancing, and not posting any complete code (which would show what language is being used to generate that page), I can't help any more.

Here's the complete Arduino code

PROBA_AJAX_javascript_form.ino (6.55 KB)

neoguru:
Here's the complete Arduino code

But, you don't want the Arduino serving up the web page. So, that code is meaningless.

The point is I don't know how to create that page which will do what i wrote. That's why I'm asking you how to make one and is this even possible.

Cheers

The point is I don't know how to create that page which will do what i wrote.

That is not an Arduino question. How the resulting script, in whatever language you end up using to write the script might be. But, before you can ask an Arduino-related question, you need to decide what language you are going to use to write the script that serves up that page.

Can I use JavaScript for that task? Can you give me some reference to something similar where I can start?

Can I use JavaScript for that task?

You have my permission to try.

Can you give me some reference to something similar where I can start?

I'd be willing to bet that Mr. Google could.

neoguru,
With what I read from what you say, this would be my suggestion:

  • You have the Arduino handling all the I/O code as you would.
  • The Arduino communicates with a computer over TCP using a certain data protocol, which is not necessarily HTTP based.
  • The computer is setup as your HTTP server which listens to client connections, and serves up the web page as well as handling the ongoing AJAX calls from the client.
  • The computer setup as HTTP server continues to communicate with the Arduino, requesting data and sending data as needed.
  • The client runs a web app, based on javascript, to make ongoing requests to the HTTP server.

The data protocol between the Arduino and HTTP server can be any of a number of well defined and used protocols, and will be dependent on how you intend to configure that computer that will be an HTTP server. The HTTP server application needs to be able to connect to and work with the data that is being transferred back and forth to the Arduino.

Depending on your programming skills and also the platform on which the computer is running, you will either need to install ready made software or develop your own. Developing your own is not a trivial task, but again, depending on the size of your project, may be a suitable solution.

To give you an idea for an appropriate data protocol between Arduino and the computer, look at using Modbus, and in particular, Modbus TCP. There are a number of libraries you can use on the Arduino for Modbus either as RTU (serial) or TCP (Ethernet) and as slave and master.

Hope this gives you some ideas.


Paul

  1. Create web page and serve it on a local computer.
  2. I want to connect with any PC or mobile device to web page and push the button to turn the led ON or OFF on arduino
  3. Web page sends data to arduino's IP adress
  4. Arduino recieves data via ethernet and makes corresponding operation
  5. Arduino sends sensor values to local server and data is updated on a webpage

Well, there are some basic fundamentals to probably do what you want to do.

  1. You can do that but it will need to have full URLs to the arduino if the arduino is not serving the web page. Since the arduino is not serving the control page, you will probably need to make provisions for the browser to not try to update the current page. I do this by having the arduino send to the browser the status 204 code and include an Iframe bit bucket in the web page to handle what is sent back from the arduino. The bottom html code can make a web page on your desktop without actually being served from anywhere other than the desktop. The code shows the embedded URLs.

  2. The below server test code has very simple buttons for turning a pin on the arduino on/off from a web page opened in a browser.

  3. See the embedded URL in the web page.

  4. See the arduino server code.

  5. You can send GET commands to the arduino via clickable buttons or a web page "text box". To display returned data in a web page you can probably use a fancy ajax web page setup or a simple Iframe to display what is returned.

//zoomkat 04-10-15
//simple button GET with iframe code
//open serial monitor to see what the arduino receives
//use the ' instead of " in html ilnes 
//address will look like http://192.168.1.102:84/ when submited
//for use with W5100 based ethernet shields

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

byte mac[] = { 
  0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; //ethernet shield mac address
byte ip[] = { 
  192, 168, 1, 102 }; // arduino IP in lan
byte gateway[] = { 
  192, 168, 1, 1 }; // internet access via router
byte subnet[] = { 
  255, 255, 255, 0 }; //subnet mask
EthernetServer server(84); //server port

String readString; 

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

void setup(){

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

  //enable serial data print 
  Serial.begin(9600); 
  Serial.println("server test no-ip 04-10-15"); // so I can keep track of what is loaded
}

void loop(){
  // Create a client connection
  EthernetClient client = server.available();
  if (client) {
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();

        //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\r\n\r\n");
          }
          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 GET test page</TITLE>");
            client.println("</HEAD>");
            client.println("<BODY>");

            client.println("<H1>Zoomkat's simple Arduino button</H1>");
            client.println("Arduino served LAN: <a href='/?on1' target='inlineframe'>ON</a>"); 
            client.println("<a href='/?off' target='inlineframe'>OFF</a>

"); 

            client.println("Remote served LAN: <a href='http://192.168.1.102:84/?on1' target='inlineframe'>ON</a>"); 
            client.println("<a href='http://192.168.1.102:84/?off' target='inlineframe'>OFF</a>

"); 

            client.println("Remote served no-ip: <a href='http://zoomkat.no-ip.org:84/?on1' target='inlineframe'>ON</a>"); 
            client.println("<a href='http://zoomkat.no-ip.org:84/?off' target='inlineframe'>OFF</a>"); 

            client.println("<IFRAME name=inlineframe style='display:none'>");          
            client.println("</IFRAME>");

            client.println("</BODY>");
            client.println("</HTML>");
          }

          delay(1);
          //stopping client
          client.stop();

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

Copy and paste in notepad, save as test.htm on your desk top, then open with a browser.

<HTML>
<HEAD>
<TITLE>Arduino GET test page</TITLE>
</HEAD>
<BODY>
<H1>Zoomkat's simple Arduino button</H1>
Arduino served LAN: <a href='/?on1' target='inlineframe'>ON</a>
<a href='/?off' target='inlineframe'>OFF</a>


Remote served LAN: <a href='http://192.168.1.102:84/?on1' target='inlineframe'>ON</a>
<a href='http://192.168.1.102:84/?off' target='inlineframe'>OFF</a>


Remote served no-ip: <a href='http://zoomkat.no-ip.org:84/?on1' target='inlineframe'>ON</a>
<a href='http://zoomkat.no-ip.org:84/?off' target='inlineframe'>OFF</a>
<IFRAME name=inlineframe style='display:none'>
</IFRAME>
</BODY>
</HTML>

Thank You very much zoomkat, now I have idea of how it should be done. I will try to do something based on your example and if i get stuck I will ask you guys for help.