Go Down

Topic: JSON WEB SERVER html (Read 7 times) previous topic - next topic

zoomkat

Quote
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.
Consider the daffodil. And while you're doing that, I'll be over here, looking through your stuff.   8)

PeterH


Quote
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.
I only provide help via the forum - please do not contact me for private consultancy.

zoomkat

Quote
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.

http://arduino.cc/en/Tutorial/WebServer
Consider the daffodil. And while you're doing that, I'll be over here, looking through your stuff.   8)

PaulS

Quote
The Arduino isn't a good platform for serving out rich HTML documents, style sheets, scripts and all that.

It's perfectly capable of referring to style sheets, scripts, etc. that are stored elsewhere, and letting the browser fetch all the right files.

pawqar


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...
<!DOCTYPE html>
<html>
<head>
<script>
  function loadJson(fioNumber)  {
        var json = {
  name: "fio1",
  variables: {
     address: "0x01",
     temperature: "24",
     humidity: "85",
          asynchronus: "0",
          sleepCycle: "20"
      }}
;
alert(json);
        document.getElementById("temperature").innerHTML = json.variables.temperature;
        document.getElementById("humidity").innerHTML    = json.variables.humidity;
        document.getElementById("address").innerHTML     = json.variables.address;
        document.getElementById("sleepCycle").innerHTML  = json.variables.sleepCycle;
        document.getElementById("asynchronus").innerHTML = json.variables.asynchronus;
        document.getElementById("name").innerHTML        = json.name;
      };
</script>
</head>
<title>Servidor Web Arduino</title>
<body>

<FORM>
<p><INPUT TYPE=BUTTON OnClick="loadJson(1);" VALUE=FIO1></p>
<ul>
<li>name:         <a id="name">[/url] </li>
<li> temperature: <a id="temperature">[/url]</li>
<li>humidity:     <a id="humidity">[/url]</li>
<li>address:      <a id="address">[/url]</li>
<li>sleepCycle:   <a id="sleepCycle">[/url]</li>
<li>asynchronus:  <a id="asynchronus">[/url]</li>
</FORM>

</body>
</html>

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

fio1 (as a button)

name: undefined
temperature: undefined
humidity: undefined
address: undefined
sleepCycle: undefined
asynchronus: undefined

undefined┬┐? I searched through the web but... I am lost.
Could it be that the it is not response?
Did I send a bad response?

void sendGetResponse(int fioNumber, Client client) {
  client.println("HTTP/1.1 200 OK");
  client.println("Content-Type: text/plain");
  client.println("Connection: close");
  client.println(" ");
  char filename[8];
  sprintf (filename, "F%d.jsn", fioNumber);
  filePrint(filename, client);
  client.flush(); 
}

I directly write the jsonfile  (client.print ...)

Thank you for your time, I really appreciate it.

greetings!

Go Up