I want to show in a web page the values of my sensors.
The below is a more conventional and possibly easier method to display values in a web page.
// arduino IDE 1.0
// for W5100 ethernet shield
// the IP address will be dependent on your local network/router
// port 80 is default for HTTP, but can be changed as needed
// use IP address like http://192.168.1.102:84 in your brouser
// or http://zoomkat.no-ip.com:84 with dynamic IP service
// use the \ slash to escape the " in the html
// meta refresh set for 2 seconds
#include <SPI.h>
#include <Ethernet.h>
int x=0; //set refresh counter to 0
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192,168,1,102); // ip in lan
EthernetServer server(84); //server is using port 84
void setup()
{
// start the server
Ethernet.begin(mac, ip);
server.begin();
}
void loop()
{
// listen for incoming clients
EthernetClient client = server.available();
if (client) {
while (client.connected()) {
if (client.available()) {
char c = client.read();
// see if HTTP request has ended with blank line
if (c == '\n') {
// send a standard http response header
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println();
//meta-refresh page every 2 seconds
x=x+1;
client.println("<HTML>");
client.print("<HEAD>");
client.print("<meta http-equiv=\"refresh\" content=\"2\">");
client.print("<TITLE />Zoomkat's meta-refresh test</title>");
client.print("</head>");
client.println("<BODY>");
client.print("Zoomkat's meta-refresh test IDE 1.0");
client.println("
");
client.print("page refresh number ");
client.println(x); //current refresh count
client.println("
");
client.println("
");
client.print("Zoomkat's arduino analog input values:");
client.println("
");
client.println("
");
// output the value of each analog input pin
for (int analogChannel = 0; analogChannel < 6; analogChannel++) {
client.print("analog input ");
client.print(analogChannel);
client.print(" is ");
client.print(analogRead(analogChannel));
client.println("
");
}
break;
client.println("</BODY>");
client.println("</HTML>");
}
}
}
// give the web browser time to receive the data
delay(1);
// close the connection:
client.stop();
}
}
zoomkat:
The below is a more conventional and possibly easier method to display values in a web page.
Yeah, but that way the Arduino has to generate the whole page and whatever resources it needs to display.
The AJAX route originally proposed is a far more elegant solution. The Arduino only has to provide the data, and the rest of the page comes from somewhere else. It also means you can update the data without doing page turnarounds and just works better all round.
Yeah, but that way the Arduino has to generate the whole page and whatever resources it needs to display.
If you actually do some testing, my code can generate the bare minimum data from the arduino that your project will need, probably less from what I see in the posted JSON stuff.
The AJAX route originally proposed is a far more elegant solution. The Arduino only has to provide the data, and the rest of the page comes from somewhere else. It also means you can update the data without doing page turnarounds and just works better all round.
More elegant? You can do pretty much what you describe with simple HTML. Doesn't AJAX require a folder on a server with supporting files the browser has to download for it to work? I made some web page sliders one time to control servos and I think it was an AJAX setup.
Simple iframe html that keeps input to the web page in a box. To test, copy the code, paste in notepad, save on the desktop as test.htm. Bouble click the test.htm file (OK/yes the warnings about running the page from the desktop) to open it in your browser. You can then toggle between the two inputs to the iframe box without refreshing the main page.
<HTML>
<HEAD>
<TITLE>Zoomkat's arduino test</TITLE>
</HEAD>
Zoomkat's arduino frame test 9/13/11
Get data from arduino:
|<a href="http://web.comporium.net/~shb/arduino.txt" target="DataBox" title="'arduino test'">Arduino</a>|
<a href="http://web.comporium.net/~shb/pix/slider1.jpg" target="DataBox"
title="'Show a pix'">PIX!</a>|
<iframe src="http://web.comporium.net/~shb/arduino.txt" width="30%" height="200" name="DataBox">
</iframe>
</HTML>
zoomkat:
More elegant? You can do pretty much what you describe with simple HTML. Doesn't AJAX require a folder on a server with supporting files the browser has to download for it to work? I made some web page sliders one time to control servos and I think it was an AJAX setup.
Well, that depends if you want the web page to consist of a few lines of text in the default style, or to provide a visually attractive interactive user interface. By treating the Arduino as a source of data pulled into the page as required, and keeping the bulk of the page elsewhere, you are free to use all the ordinary web site authoring tools and techniques, style sheets, scripts, graphics and so on. If you want to host it locally, it would make sense to implement it as an HTML Application. But there's nothing to stop you hosting it on a web site somewhere else if you want it to be accessible remotely.
If you want to host it locally, it would make sense to implement it as an HTML Application.
How else would your arduino provide data for your JSON/AJAX web page other than thru serving up the data via the http process? I've seen arduino code for telnet and udp but that would seem to be very complicated and unpractical in a web setup. One can make whiz-bang (and totally annoying) web pages using files/images stored on a big web server, but this really does not have anything to do with the arduino itself serving basic data to be displayed within the page.
If you want to host it locally, it would make sense to implement it as an HTML Application.
How else would your arduino provide data for your JSON/AJAX web page other than thru serving up the data via the http process? I've seen arduino code for telnet and udp but that would seem to be very complicated and unpractical in a web setup. One can make whiz-bang (and totally annoying) web pages using files/images stored on a big web server, but this really does not have anything to do with the arduino itself serving basic data to be displayed within the page.
I think we're talking at cross purposes.
In your example, the Arduino publishes some HTML which is displayed in the browser. This means that either what is displayed is formatted very crudely, or your Arduino has to serve out a rich HTML page and whatever resources it needs to render properly. The Arduino isn't a good platform for serving out rich HTML documents, style sheets, scripts and all that. All you really want from the Arduino is the data itself, whether encoded in XML, JSON, CSV or whatever. For an AJAX application, JSON is a perfectly sensible way to encode the data.
Implementing this as an AJAX application that gets data from the Arduino simply gives you a better solution than serving your whole page from the Arduino.
Implementing this as an AJAX application that gets data from the Arduino simply gives you a better solution than serving your whole page from the Arduino.
I never said anything about serving a "whole page" from the arduino, just the desired data. Below is link for getting the minimum no frills basic data from the arduino. The AJAX, html, or other methods of the display page construction would be up to the page developer and what they think will best suite the end viewer.
PeterH:
As I understand it, you have a local web page that provides all the decorative stuff and just executes an HTTP request to the Arduino to retrieve some data. The page then processes the results and uses that to populate the page.
The basic approach seems OK. I haven't look at the detail of your JSON handling, but your JSON fragment is incorrect: the field names should not be quoted.
I suggest you get that sorted out by hard-coding your JSON string in the page and then use your existing logic to exec it into a variable; then you can print out whatever fields of that variable interest you.
Hi Peter,
thank you for your answer. You understood it quite well. I correted the json file, thanks. And I did as you said, separately, I write html web server. And It worked, but...
Servidor Web Arduino
name:
temperature:
humidity:
address:
sleepCycle:
asynchronus:
but...when I post on the card ... well... on browser, I open the console that show the code ... (in chrome F12) and it said that it couldn´t find temperature (which is part of variables...) well I simplified the structure... { name = "fio1, temperature="34"... etc} ... but Is it json? xD Anyway, if I enter the IP address of my arduino it shows
That should pop up a message dialog saying json=[Object object], and json.name=[fio1], or something similar.
If not, then check for script errors when it runs.
Hi PeterH,
I already did it on the example, and it shows " object Object" and it works:
PeterH:
This test code is intended to go in a HTML document on your PC, not involving the Arduino at all.
You should see a message dialog showing you the value of json and json.name. Do you see both of them? Does json.name show the correct value "fio1"?
Hi PeterH,
... Yes,sorry, my english it is no so good, well I pasted the code example I used it on my PC and it worked. But, my question was about the arduino... As you see I deleted the open(get... etc, status, ... and I simply write the json strutcture. It worked, an alert window appeared saying "object Object" and filling the gaps, name: fio1, temperature: 32 etc. That means that the example worked, the example I pasted on the post. So, with that, I added the status, get, etc... but the alert window shows nothing and the gaps are filled with "undefined" but if I use the json structure { name: fio1, temperature: 34...} If I use {name: fio1, variables: { temperature: "32", humidity: "86"... etc}} it says something as unable to get temperature ...
hola buenos días seria bueno tener el código de tu pagina web y la del arduino, estoy tratando de realizar algo parecido pero con webduino me ayudas gracias.