Arduino Ethernet Shield and external webserver

Hi everyone,

I’m trying to get the Ethernet shield to work as a client that can send data to an external web server.

What I’ve been looking for is Ethernet Shield (pde code) and HTML... to achieve the following

Measure a analogvalue X
Upload value X to external Web server

Seems simple but I’ve not been able to find an example that handles this topic.
Anyone have example code i can get started with?

I would appriciate any kind of help (:
Greetz Woody

Test code that connects to an external server.

//zoomkat 12-08-11
//simple client test
//for use with IDE 1.0
//open serial monitor and send an e to test
//for use with W5100 based ethernet shields
//note that the below bug fix may be required
// http://code.google.com/p/arduino/issues/detail?id=605 

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

byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; //physical mac address
byte ip[] = { 192, 168, 1, 102 }; // ip in lan assigned to arduino
//byte gateway[] = { 192, 168, 1, 1 }; // internet access via router
//byte subnet[] = { 255, 255, 255, 0 }; //subnet mask
byte myserver[] = { 208, 104, 2, 86 }; // zoomkat web page server IP address
EthernetClient client;
//////////////////////

void setup(){

  Ethernet.begin(mac, ip);
  //Ethernet.begin(mac, ip, subnet, gateway);
  Serial.begin(9600); 
  Serial.println("Better client test 12/01/11"); // so I can keep track of what is loaded
  Serial.println("Send an e in serial monitor to test"); // what to do to test
}

void loop(){
  // check for serial input
  if (Serial.available() > 0) //if something in serial buffer
  {
    byte inChar; // sets inChar as a byte
    inChar = Serial.read(); //gets byte from buffer
    if(inChar == 'e') // checks to see byte is an e
    {
      sendGET(); // call sendGET function below when byte is an e
    }
  }  
} 

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

void sendGET() //client function to send/receive GET request data.
{
  if (client.connect(myserver, 80)) {  //starts client connection, checks for connection
    Serial.println("connected");
    client.println("GET /~shb/arduino.txt HTTP/1.0"); //download text
    client.println(); //end of get request
  } 
  else {
    Serial.println("connection failed"); //error message if no client connect
    Serial.println();
  }

  while(client.connected() && !client.available()) delay(1); //waits for data
  while (client.connected() || client.available()) { //connected or data available
    char c = client.read(); //gets byte from ethernet buffer
    Serial.print(c); //prints byte to serial monitor 
  }

  Serial.println();
  Serial.println("disconnecting.");
  Serial.println("==================");
  Serial.println();
  client.stop(); //stop client

}

zoomkat:
Test code that connects to an external server.

//zoomkat 12-08-11

//simple client test
//for use with IDE 1.0
//open serial monitor and send an e to test
//for use with W5100 based ethernet shields
//note that the below bug fix may be required
// Google Code Archive - Long-term storage for Google Code Project Hosting.

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

byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; //physical mac address
byte ip[] = { 192, 168, 1, 102 }; // ip in lan assigned to arduino
//byte gateway[] = { 192, 168, 1, 1 }; // internet access via router
//byte subnet[] = { 255, 255, 255, 0 }; //subnet mask
byte myserver[] = { 208, 104, 2, 86 }; // zoomkat web page server IP address
EthernetClient client;
//////////////////////

void setup(){

Ethernet.begin(mac, ip);
  //Ethernet.begin(mac, ip, subnet, gateway);
  Serial.begin(9600);
  Serial.println("Better client test 12/01/11"); // so I can keep track of what is loaded
  Serial.println("Send an e in serial monitor to test"); // what to do to test
}

void loop(){
  // check for serial input
  if (Serial.available() > 0) //if something in serial buffer
  {
    byte inChar; // sets inChar as a byte
    inChar = Serial.read(); //gets byte from buffer
    if(inChar == 'e') // checks to see byte is an e
    {
      sendGET(); // call sendGET function below when byte is an e
    }
  } 
}

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

void sendGET() //client function to send/receive GET request data.
{
  if (client.connect(myserver, 80)) {  //starts client connection, checks for connection
    Serial.println("connected");
    client.println("GET /~shb/arduino.txt HTTP/1.0"); //download text
    client.println(); //end of get request
  }
  else {
    Serial.println("connection failed"); //error message if no client connect
    Serial.println();
  }

while(client.connected() && !client.available()) delay(1); //waits for data
  while (client.connected() || client.available()) { //connected or data available
    char c = client.read(); //gets byte from ethernet buffer
    Serial.print(c); //prints byte to serial monitor
  }

Serial.println();
  Serial.println("disconnecting.");
  Serial.println("==================");
  Serial.println();
  client.stop(); //stop client

}

I dont get it. I need the arduino to send an analog value to an external server. I only see you downloading a textfile?

but still thank you for the advice.

I dont get it. I need the arduino to send an analog value to an external server. I only see you downloading a textfile?

To send data from a client to a server, you attach a query_string (stuff after the ?) with the data to the get request, something like below. The server then acts upon the receipt of the data. You can start out testing your setup by just hard coding an analog value to the get request similar to the below.

http://zoomkat.no-ip.com:88/cgi-bin/echoo.bat?$00$80$A5$01$80$64

in otherwords to post something to the server you need some kind of script running on a server to read the value you send and store it on the server.

cjdelphi:
in otherwords to post something to the server you need some kind of script running on a server to read the value you send and store it on the server.

What kind of script will i need? do you have an example?

Greetz

I'd use PHP (however painful that is for me lol) - read all the variables passed

 <?php
   echo "Array vars
";
   print_r($_GET);
   exit(-1);
 ?>

Send your http get request (/GET with the variables) grab them from PHP, open up the database (with required username/password/access)

I have to do it with html and javascript. so i cant do anything with php :frowning:

Woody1994:
I have to do it with html and javascript. so i cant do anything with php :frowning:

What do you plan on doing with the data on the server? You will need some kind of server side script to read/process/save/etc the data (sent by the client) on the server.

SurferTim:

Woody1994:
I have to do it with html and javascript. so i cant do anything with php :frowning:

What do you plan on doing with the data on the server? You will need some kind of server side script to read/process/save/etc the data (sent by the client) on the server.

I'm planning on making a graph with it. I want to do some kind of dataloggin. I already have the code for the graph. I found it somewhere.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <script><endnote><head>
<script><endnote><head>
<script><endnote><head>
<script><endnote><head>
<script><endnote><head>
<script><endnote><head>
<script><endnote><head>
<script><endnote><head>
<script><endnote><head>
<script><endnote><head>
<script><endnote><head>
<script><endnote><head>
<script><endnote><head>
<script><endnote><head>
<script><endnote><head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<!--
/**
* o------------------------------------------------------------------------------o
* | This file is part of the RGraph package - you can learn more at: |
* | |
* | http://www.rgraph.net |
* | |
* | This package is licensed under the RGraph license. For all kinds of business |
* | purposes there is a small one-time licensing fee to pay and for non |
* | commercial purposes it is free to use. You can read the full license here: |
* | |
* | http://www.rgraph.net/LICENSE.txt |
* o------------------------------------------------------------------------------o
*/
-->
<title>An example of the Line chart</title>
<meta name="keywords"
content="rgraph html5 canvas example line charts">
<meta name="description"
content="An example of the type of Line chart that RGraph can produce">
<meta name="googlebot" content="NOODP">
<meta property="og:title"
content="RGraph: HTML5 Javascript charts library">
<meta property="og:description"
content="A charts library based on the HTML5 canvas tag">
<meta property="og:image"
content="http://www.rgraph.net/images/logo.png">
<link rel="stylesheet"
href="http://www.rgraph.net/css/website.css" type="text/css"
media="screen">
<link rel="icon" type="image/png"
href="http://www.rgraph.net/images/favicon.png">
<!-- Place this tag in your head or just before your close body tag -->
<script type="text/javascript"
src="https://apis.google.com/js/plusone.js"></script>
  <script src="http://www.rgraph.net/libraries/RGraph.common.core.js"></script>
  <script src="http://www.rgraph.net/libraries/RGraph.line.js"></script><!--[if lt IE 9]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
  <script>
window.onload = function ()
{
var line1 = new RGraph.Line('line1', [56,4,78,4,6,5,7,8,9,2,1,444,10,43,56,4,78,4,6,5,7,8,9,2,1,444,10,43,56,4,78,4,6,5,7,8,9,2,1,444,10,43,56,4,78,4,6,5,7,8,9,2,1,444,10,43]);
line1.Set('chart.background.grid', true);
line1.Set('chart.linewidth', 2);
line1.Set('chart.gutter.left', 135);
line1.Set('chart.hmargin', 5);
if (!document.all || RGraph.isIE9up()) {
line1.Set('chart.shadow', true);
}
line1.Set('chart.tickmarks', null);
line1.Set('chart.units.post', '°C');
line1.Set('chart.colors', ['red']);
line1.Set('chart.background.grid.autofit', true);
line1.Set('chart.background.grid.autofit.numhlines', 20);
line1.Set('chart.curvy', 1);
line1.Set('chart.curvy.factor', 0.25);
line1.Set('chart.labels',['1','2','3','4','5','6','7','8','9','10','11','12','13','1','2','3','4','5','6','7','8','9','10','11','12','13']);
line1.Set('chart.title','Arduino');
line1.Draw();
}
  </script>
  <script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-54706-2']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
  </script>
  <title></title>
</head>
<body>
<script>
if (RGraph.isOld()) {
document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b>

 Internet Explorer does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>');
}
</script>
<div>
<div style="text-align: center;"><canvas id="line1"
 width="600" height="250">[Please
wait...]</canvas>
</div>
</div>
</body>
</html>

now on line 60 you can see I need to put the measuring points (var line1 = new RGraph.Line('line1', [])).
So I want those to come from the Arduino.
Somehow i need to find a way to send the temperature to the webserver and store it in an array or something.
I think I want to do it with a query string, but i have no idea how. I've done some research but still

I hope it's not to confusing (:

Not confusing for me. :slight_smile:

You need a server side script to retrieve the variables sent by the client. There is no other option. If Windows use ASP. If Linux, use php or perl.

Keep HTML for static content.
That data you need to feed in that variable is not static, is dynamic, so you need a dynamic way of changing the values of that variable.

As another member said, you need some sort of server-side processing, like PHP or ASP, which generates the HTML when you refresh the page.

SurferTim:
Not confusing for me. :slight_smile:

You need a server side script to retrieve the variables sent by the client. There is no other option. If Windows use ASP. If Linux, use php or perl.

I have some free webspace from my provider but they do not support php.
and ASP is not free? so there really is no other solution?

Where is your Arduino connected?

Remember that when you load a page in your web browser, you are on the client side, and you will see what the server sends to you. So for you to see a graph, the server needs to know what values to put in your page.

If you have the Arduino connected to your PC, you must figure out a way of putting those values in server.

I give you an example, which will work if the update frequency is low.
Each time you read a value from analog pin, send it to your local PC, have some application that puts that new value in the HTML and then uploads it to the webserver by FTP.
This is a sequence, which can run in Loop (each 5 seconds, for example), but your webpage will always be static when you load it.

RicDias:
Where is your Arduino connected?

I dont get the question :stuck_out_tongue:

RicDias:
If you have the Arduino connected to your PC, you must figure out a way of putting those values in server.

I want to do this with the Ethernet Shield.
Isn't it possible for the EthernetShield to directly upload it to the webserver?

And you can auto refresh you webpage every 5 seconds, so it will look a bit dynamic not?

My question regarding where the arduino was connected, was for you to understand that hosting the webserver in the same machine where arduino is connected is completely different from connecting Arduino to your PC and running the webserver elsewhere.

In order to use directly with the Ethernet shield, I suggest you read about Pachube (http://community.pachube.com/about) and see if it fits your needs.

I have some free webspace from my provider but they do not support php.
and ASP is not free? so there really is no other solution?

I have IIS and ASP installed free on my Windoze XP box. No extra cost. I saved this in wwwroot as index.asp.

<html>
<body>
ASP TEST

<%
response.write("My first ASP script!")
%>
</body>
</html>

Use Start- Settings - Control Panel - Administrative Tools
You should see Internet Information Services there.

edit: You may need to go to "Add or Remove Programs" and install it first. Under "Add/Remove Windows Components".