Go Down

Topic: Ethernet: Web page pulling info from arduino without reloading? (Read 5 times) previous topic - next topic

zoomkat

Simple iframe page obtaining info from my arduino (I'll leave the arduino on line for a while). To test, copy the code, paste in notepad, save on desktop as arduino.htm, then double click. You will probably get a warning about running a web page from the desktop, just click allow. This down loads the meta refresh page from my arduino and displays it in the frame box. The BOOM! shows how data input to the box can be easily switched to another source. Click the arduino/boom selections over the box to switch input.

Code: [Select]

<HTML>
<HEAD>
<TITLE>Zoomkat's arduino test</TITLE>
</HEAD>
Zoomkat's arduino meta refresh test 9/13/11
<BR>


<BR>
Get data from arduino:
<BR>

|<a href="http://zoomkat.no-ip.com:84/" target="DataBox" title="'SSC-32

version'">Arduino</a>|


<a href="http://www.yourhtmlsource.com/examples/inlineframes3.html" target="DataBox"

title="'Someone set us up the bomb'">BOOM!</a>|
<BR>

<iframe src="http://zoomkat.no-ip.com:84/" width="30%" height="200" name="DataBox">
</iframe>
<BR>

</HTML>
Consider the daffodil. And while you're doing that, I'll be over here, looking through your stuff.   8)

spumanti


... I just know that AJAX is in heavy use on the WWW to do exactly what you're describing...


Aahhh, yes.
searched around a bit, and found some interesting jQuery script, that will do what we are looking for.
I hope it will be a lot smoother than the old iFrame approach, which I also find a bit clunky!  ;)

Although my approach is a bit different.
I would not host the webpage on the arduino, and redirect to a php page on a server. Rather, I would create a php page on my server, and have it fetch the live values from the arduino.
That way, I assume to keep it as light as possible on the arduino side, and will be able to make all the fancy stuff happening server-side.

With the above approach, I managed to hack together something that seems to work:
index.php
Code: [Select]
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$("#responsecontainer").load("response.php");
   var refreshId = setInterval(function() {
      $("#responsecontainer").load('response.php?randval='+ Math.random());
   }, 5000);
   $.ajaxSetup({ cache: false });
});
</script>
</head>
<body>

<div id="responsecontainer">
</div>
</body>


response.php
Code: [Select]
<?php
$remote 
fopen("http://api.thingspeak.com/channels/9/field/1/last.txt?append=%20%C2%B0C""r");
fpassthru($remote);
?>


From this page:
http://www.brightcherry.co.uk/scribbles/2009/02/26/jquery-auto-refresh-div-every-x-seconds/

And modified it, so it will take a value from an external webpage, and show it:
http://tycoontalk.freelancer.com/php-forum/9065-using-php-embed-one-webpage-into.html


I have a little test running on my webserver (privately hosted, so may be a bit slow):
http://keis.dyndns.dk/jq/
In my test, I fetch the latest value every 5 seconds from the ThingSpeak 'Dynamic Light Level' chart on the ThingSpeak.com front page.



Some more links i looked through:
http://en.kioskea.net/faq/1449-php-5-using-an-external-url-with-the-function-include
http://www.9lessons.info/2009/07/auto-load-refresh-every-10-seconds-with.html

justjed


searched around a bit, and found some interesting jQuery script, that will do what we are looking for.
I hope it will be a lot smoother than the old iFrame approach, which I also find a bit clunky!  ;)

Although my approach is a bit different.
I would not host the webpage on the arduino, and redirect to a php page on a server. Rather, I would create a php page on my server, and have it fetch the live values from the arduino.
That way, I assume to keep it as light as possible on the arduino side, and will be able to make all the fancy stuff happening server-side.


That is how I would approach it. Of course, I've been running Apache on my home box for years, so it's not a big thing for me.
... it is poor civic hygiene to install technologies that could someday
facilitate a police state. -- Bruce Schneier

zoomkat

Quote
searched around a bit, and found some interesting jQuery script, that will do what we are looking for.
I hope it will be a lot smoother than the old iFrame approach, which I also find a bit clunky!


The old iframe probably can operate solely from an arduino with an ethernet shield. The new fancy approach appears to involve external servers running on PCs or better and a third party site to get a java component. Getting complicated.   ;)
Consider the daffodil. And while you're doing that, I'll be over here, looking through your stuff.   8)

justjed


The old iframe probably can operate solely from an arduino with an ethernet shield. The new fancy approach appears to involve external servers running on PCs or better and a third party site to get a java component. Getting complicated.   ;)


AJAX uses JavaScript. I suppose on the server side, there is some packaged up JSP stuff to speak XML, but for simple stuff, or even complex stuff, you could use PHP, or Perl, or even Haskell if you wanted. jQuery, IIRC, isn't specifically an AJAX thing, though I haven't looked for a while, so I wouldn't be surprised if that's been added. However, the idea of AJAX could be implemented for simpler operations without bringing in a bunch of pre-packaged libraries. The main thing jQuery brings is a set of methods for reading and operating on items in the DOM at the browser. (And probably lots of other stuff too. I just know about it -- haven't tried to use it.)
... it is poor civic hygiene to install technologies that could someday
facilitate a police state. -- Bruce Schneier

Go Up