My name is Kris and i have been using arduino for the last 1 year which I fell in love with instantaneously.
I have a diploma in Industrial Electronics applied in automation which makes this little device just perfect for experiments and prototypes.
As far as coding, I am self taught in .NET, C / C++, JAVA, HTML and PHP.
Recently I decided that I had to make a tool for myself which very briefly I will explain what it does.
Basically its' purpose will be to remove and install BGA chips, kinda Reflow machine where after I preset the parameters such as Time / temp and rate or, loaded from an SD card, the top heater will begin its work accordingly as per the readings from my IR Temp sensors directed on the top and bottom of the PCB under work.
After long nights I made it work but just to make it just right and easy to use I decided that apart the 20x4 LCD I am using, this machine needs a proper UI or better, a Web application, hosted on a local server and when connected to my arduino through an ethernet shield (in which I am still new too) a set of 3 parameters (Top temp, Bottom Temp and Time) will be transferred to this web app to display as a graph.
From what I read JSON does just that but I can't quite get my head around as far as how can I get arduino to send data from JSON to my web app with a JQUERY script so that I can display my values graphically. Please note that the web server will not hosted by Arduino but a local PC.
So my question is, how can Arduino 'talk' to a web app with JSON ? What structures do I need ?
I can't quite get my head around as far as how can I get arduino to send data from JSON to my web app
Because you are not understand how the process works. JSON is a data format. Talking about sending data from JSON anywhere is like talking about sending data from Spanish to somewhere. Nonsense.
The Arduino can send data in Spanish, or in JSON format, anywhere.
That the data is in JSON format when a script is run that generates JSON output is irrelevant.
What structures do I need ?
A tower of Babble?
The real question is what data does the web app expect, in what format?
kcardona:
I see, the web app will use json to parse data from the parameters and display them using a java script to make a graph
That doesn't tell us anything about the format of the data. The names of the fields, the type of the data in the field, etc. should all be clearly defined. Constructing a JSON string containing three pieces of data should be simple.
the web app will be used mainly to display a graph in real time as Temperature vs Time, the web app will return nothing apart from a boolean state TRUE or FALSE from a virtual Emergency Button.
Please help me out as I can't quite understand what you want from me
Basically I don't want Arduino to do the hard work when it comes to displaying a graph there will be a Linux server doing that. Arduino will process all the inputs and outputs and with regards the interface, it will send as i said 2 temperature parameters and time in seconds.
I appreciate alot for your patience with me
Now what I don't know is,
how can I send data over the network from arduino to the web app ?
from the server side, how can I make the web app receive and understand the data presented to it
the only example I saw simliar to my needs ( the only one I understood a bit) was this Arduino Web Server Read Switch but the data in this example is send manualy (written in the browser address bar)
kcardona:
I am self taught in .NET, C / C++, JAVA, HTML and PHP.
kcardona:
So my question is, how can Arduino 'talk' to a web app with JSON?
You can send data directly to a Linux machine by plugging the Arduino in via USB, making the Arduino Serial.print("data=value,"); and then grabbing that data in Linux using a PHP serial port plugin, or JAVA serial port plugin (Google it). You read the raw text sent from the Arduino like this into your server application. At that point: You can save it to a database and use a normal RESTful web app to access the data, or use a web SPA (single page application) to pull data to the page, or get more exotic and use something like socket.io for streaming page updates.
JSON is how you could structure your Serial.print() statements to make it easy for your server application to pick up the data. But honestly since you only want to send 3 values you could probably just separate them with a comma and hard-code what index they are passed across in. Then parse the values coming across the serial connection into PHP or JAVA and (at this point) turn them into JSON, and serve that to a front-end RESTful application.
Here is how the data flows:
Arduino-->Serial Output-->PHP/JAVA Serial Input-->PHP/JAVA Web Server-->RESTful JSON-->Web App
To do this, you would code up a (very) simple webserver on the arduino. The webserver would accept a GET request from a client, and respond. Now, if the web page is not having to send stuff to the arduino, then it's pretty easy. In JQuery, you'd do a GET request with zero-length content. Your arduino would receive something like this:
GET /current-status HTTP/1.1
Content-Length: 0
Another-header: some stuff
Another-header: some more stuff
--- BLANK LINE ---
(zero bytes of content)
and would respond with something like
200 OK
Content-Length: (the length of your JSON packet)
Content-Type: application/json
--- BLANK LINE ---
{ top: 100.0, bottom: 50.4, time: 12345 }
So in this situation, the arduino simply needs to read and discard the lines until it gets a blank one (assuming all goes well).
If you use a fixed format for the json - pad out all the numbers to a known width - then you can precompute the content-length, so you can stuff the entire response header in a string in PROGMEM, dump it to the socket, and then produce the JSON output.
Your only problem then is writing some javascript to poll the ardunino, accept the result, and display a graph. I'm a bit of a fan of AngularJS for this kind of thing.
