Hi all,
My webserver runs on a Mega with an Ethernet shield + sd card.
It collects sensor data from around 20 remote sensors and posts the values on a webpage.
At first I had to refresh the browser to get the values updated. Later based on the example give in this tutorial, I 've used ajax in order to have the values updated without having to reload the page.
My question is how do you employ the same technique for 20 values instead of just one?
In order for the webpage layout to remain unspoiled, each of the 20 values has to be "re-printed" on a specific location on the page.
Do I need to make 20 different javascript functions, 20 GET requests and equal number of replies from the arduino each of which assigned to a unique html ID (etElementById) ? That would mean the ajax function must be called every so often for each of the 20 sensor values.
Or is there a better, more efficient way to do this?
Thanks for your support!
Update: Did three more sensor updates the same way as above and the arduino starts to get busy with all the increasing traffic. Surely there must be another way to do this...
Just to let you know you're not alone...
I was looking at AJAX on a MEGA1284 a year ago, and since it wasn't critical at the time, let it slide - but I'm interested to see where the thread goes.
It almost justifies someone (!) developing a helper class to encapsulate all the repeated functionality.
It almost justifies someone (!) developing a helper class to encapsulate all the repeated functionality.
Thats so true!
I think beeing able to adequately and efficiently post data on a website from sensors, status information and to also send commands via html buttons is the A to Z of home automation.
I have managed to send commands to my system with UDP using a freely available android application for UDP client but doing the same from a website is totally different.
Hopefully someone here has more experience on html to point us to the right direction..
I agree completely.
I want the interfaces to be generic, not bound to an 'app' on any platform,
Would it not just be a matter of modifying the Arduino GetSwitchState() function to read multiple buttons and send states?\
Based on the linked article, Something like
// send the state of the switch to the web browser
void GetSwitchState(EthernetClient cl)
{
if (digitalRead(3)) {
cl.println("Switch 3 state: ON");
}
else {
cl.println("Switch 3 state: OFF");
}
if (digitalRead(4)) {
cl.println("Switch 4 state: ON");
}
else {
cl.println("Switch 4 state: OFF");
}
}
Thanks for the input sterretje.However the problem is how to get the various states sent from the arduino printed at the right place on the webpage and not just one aftr the other as on the serial monitor.
Unfortunately, that example is creating variable html - easy.
AJAX magic is the 'asynchronous' part, that replaces refresh/get/post with dynamic data links to individual fields - not the whole page.
http://www.w3schools.com/ajax/ajax_intro.asp
Watcher:
Thanks for the input sterretje.However the problem is how to get the various states sent from the arduino printed at the right place on the webpage and not just one aftr the other as on the serial monitor.
So what have you written for the single input (and AJAX)?
lastchancename:
Unfortunately, that example is creating variable html - easy.
AJAX magic is the 'asynchronous' part, that replaces refresh/get/post with dynamic data links to individual fields - not the whole page.
http://www.w3schools.com/ajax/ajax_intro.asp
Sorry, I understood from OP that AJAX was what code on the linked page did.
I would tend to use JSON and AngularJS. The arduino would support a GET / to deliver the page. and a GET /json (etc) to supply just the values. The basic issue here is that you are going to want to do some javascript programming to make thing do what you want.
I think I put an example on the playground a while back - yup, found it.
Thanks from me - that looks quite interesting...
I'll play with it when I get a chance - serving the container html page and the JSON vars from the same arduino