Print
Go Down
Pages: 1 [2]

Topic: Automatic reading of arduino values WEBSERVER (Read 13993 times) previous topic - next topic

billroy

#15
Jan 21, 2013, 04:58 pm
For the animation you will need to add some javascript to the web page to change the size of the colored-in part of the tank.  You could draw the tank with fancy SVG graphics using the Raphael.js graphics library.  You could kludge up something simpler like changing the height of an HTML DIV element to match the water level.  For that you might use the jQuery javascript library.  Or you might find a third-party control library that has a tank gauge you like.  Any way you cut it, it's javascript work.

For the refresh, the javascript running in your web page needs to make a periodic AJAX request to the Arduino for the updated data.  jQuery has a nice ajax interface to make such requests with; you'll need to add code to your arduino sketch to handle the ajax calls and return just the data instead of the whole page.

-br

blastboot

#16
Jan 21, 2013, 07:28 pm Last Edit: Jan 21, 2013, 07:35 pm by blastboot Reason: 1
Thanks for the answer. I've just self-learning arduino and never had a touch with Java/jQuery/AJAX. I've been reading some info about how usefull this languages are to almost real time refresh without refreshing the whole page. The thing is that i need an input or some example related to this project that i'm working for me to understand (and see) what are you talking about. If you could please "show me the way", i will be very thanked. I began learning arduino and a little html this month.  :smiley-red:

This is an simple example with java that probably can work in my project, but i need to know how to change the seconds with the ultrasonic sensor values. This exemple increases the height of water.gif every second.

Code: [Select]
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
var myVar=setInterval(function(){myTimer()},1000);
var dynamic_height = 5;
function myTimer()
{
var theImg = document.getElementById("water");
var d = new Date();
dynamic_height = 5 + (d.getSeconds()*3);
theImg.height = dynamic_height;
}
function myStopFunction()
{
clearInterval(myVar);
}
</script>

<body>
<center>
<b>THIS IS THE TITLE</b>
<div style="position:relative; width:360; height:336">
<div style="position:absolute; top:0; left:0"><center><img name="tank" id="tank" src="tank.gif" width="360" height="336"></center></div>
<div style="position:absolute; bottom:6; left:22"><center><input type="image" name="water" id="water" src="water.gif" width="236" height="5">
</center></div>
</div>
</body></html>

zoomkat

#17
Jan 22, 2013, 03:07 am
No frills analog pin data display.

Code: [Select]

// zoomkat's meta refresh data iframe test page 12/24/12
// use http://192.168.1.102:84 in your brouser for main page
// http://192.168.1.102:84/data static data page
// http://192.168.1.102:84/datastart meta refresh data page
// for use with W5100 based ethernet shields
// set the refresh rate to 0 for fastest update
// use STOP for single data updates

#include <SPI.h>
#include <Ethernet.h>

byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; //physical mac address
byte ip[] = { 192, 168, 1, 102 }; // arduino ip in lan
byte gateway[] = { 192, 168, 1, 1 }; // internet access via router
byte subnet[] = { 255, 255, 255, 0 }; //subnet mask
EthernetServer server(84); //server port
unsigned long int x=0; //set refresh counter to 0
String readString;

//////////////////////

void setup(){
  Serial.begin(9600);
    // disable SD SPI if memory card in the uSD slot
  pinMode(4,OUTPUT);
  digitalWrite(4,HIGH);

  Ethernet.begin(mac, ip, gateway, gateway, subnet);
  server.begin();
  Serial.println("meta refresh data frame test"); // so I can keep track of what is loaded
}

void loop(){
  EthernetClient client = server.available();
  if (client) {
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
         if (readString.length() < 100) {
          readString += c;
         }
        //check if HTTP request has ended
        if (c == '\n') {

          //check get atring received
          Serial.println(readString);

          //output HTML data header
          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type: text/html");
          client.println();

          //generate data page
          if(readString.indexOf("data") >0) {  //checks for "data" page
            x=x+1; //page upload counter
            client.print("<HTML><HEAD>");
            //meta-refresh page every 1 seconds if "datastart" page
            if(readString.indexOf("datastart") >0) client.print("<meta http-equiv='refresh' content='1'>");
            client.print("<title>Zoomkat's meta-refresh test</title></head><BODY><br>");
            client.print("page refresh number ");
            client.print(x); //current refresh count
            client.print("<br><br>");
              //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.print("<br>");
             }
            client.print("</BODY></HTML>");
           }
          //generate main page with iframe
          else
          {
            client.print("<HTML><HEAD><TITLE>Zoomkat's frame refresh test</TITLE></HEAD>");
            client.print("Zoomkat's Arduino frame meta refresh test 12/24/12");
            client.print("<BR><BR>Arduino analog input data frame:<BR>");
            client.print("&nbsp;&nbsp;&nbsp;&nbsp;<a href='http://192.168.1.102:84/datastart' target='DataBox' title=''yy''>META-REFRESH</a>");
            client.print("&nbsp;&nbsp;&nbsp;&nbsp;<a href='http://192.168.1.102:84/data' target='DataBox' title=''xx''>SINGLE-STOP</a><BR>");
            client.print("<iframe src='http://192.168.1.102:84/data' width='35%' height='250' name='DataBox'>");
            client.print("</iframe><BR></HTML>");
          }
          delay(1);
          //stopping client
          client.stop();
          //clearing string for next read
          readString="";
        }
      }
    }
  }
}

Google forum search: Use Google Search box in upper right side of this page.
Why I like my 2005 Rio Yellow Honda S2000  https://www.youtube.com/watch?v=pWjMvrkUqX0

billroy

#18
Jan 22, 2013, 01:53 pm
That Javascript (not Java) example is a good start for the animation.  Now if you can arrange to set the variable "dynamic_height" using data from the Arduino you'll have all the pieces you need for a solution.

Look for a simple AJAX example that makes a request to a web server for a single piece of data.  In your case, you want the water level reading.  You need to add code in the Javascript page to make the AJAX request to the Arduino, and then take the return value and apply it to dynamic_height in the animation code.  You'll also need to add code to the Arduino sketch to return just the height value.


-br

rockwallaby

#19
Jan 22, 2013, 02:13 pm Last Edit: Jan 22, 2013, 02:20 pm by rockwallaby Reason: 1
For a really nice example take a look at this thread from llukkari,
Thread http://arduino.cc/forum/index.php/topic,129122.0.html
In particular, his demo for the weather station could be a good example for you to look further at.
It uses jQuery mobile library, so this example will work on a range of screen resolutions, smart-phones to desktops.
I used this initially, but am now moving to using the Bootstrap.js library which has some other niceties.

He has in my opinion really put together some well structured and fancy code.
I have used quite a bit what llukkari has done with my project and have learnt a lot, and still learning.

For some information on what Bill is talking about in terms of data exchange such as using json which is very effective and easy to understand, please read what llukkari has written here http://www.cs.helsinki.fi/u/ljlukkar/iot/

This I believe will give you some more insight into having data updated from a web server to your web browser in a neat way.

Using the Webduino library, I have found that so much of the code is there and I can just call the functions.
This makes for easier and neater code in your Arduino.
On the client side, the same thing with using a MVC (Model View Controller) also helps make for neater javascript (Not Java, that is a different beast).

You should be able to view some of my code by going to my site and pulling it apart, not by using page source, as it's pretty well all done in javascript and injected into the html body section.

Hope this help a little more.

Blastboot, I sent you a pm.
I would like to have a bit more time to write you an example, but just on the time poor side at present, with trying to make progress with my own site.

Kind regards,
Paul

blastboot

#20
Jan 22, 2013, 06:17 pm Last Edit: Jan 22, 2013, 06:19 pm by blastboot Reason: 1
zoomkat, billroy and rockwallaby many thanks for your advices! I will try to build the code and test it and then i will give a feedback with my doubts (or conclusion  XD ).

zoomkat i've been working on iframe and that is a very good and easy solution! I want to learn the two ways of doing this, so i'will do with iframe and other with javascript/AJAX like billroy and rockwallaby sugested!

I have more time during the weekeds then during the week (because of my job), so i maybe take a little bit time to feedback, but i will be working on it  :smiley-sweat:

Many tanks!!

blastboot

#21
Jan 28, 2013, 02:52 pm Last Edit: Jan 28, 2013, 02:54 pm by blastboot Reason: 1
Hello! I've been trying to proceed with this project but i'm stucked in 2 parts:

1st- I' ve made an div for water.jpg  with the height sended by arduino with this changed every time the sensor reads (with sensor value), and it worked fine, but i could make it refresh only this div. I even put meta refresh tag inside the div, but the whole page keeps refreshing.

2nd- I was learning about AJAX and try to make a test connection with arduino, but maybe i've been missing something. At this time another thing that i can't understand is that if this connection code keeps "playing" forever or just one time. The code is above:

Code: [Select]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript" type="text/javascript">

function ajaxInit() {
   if (window.XMLHttpRequest) { // Mozilla, Safari,...
       ajax = new XMLHttpRequest();
       if (ajax.overrideMimeType) {
           ajax.overrideMimeType('text/xml');
       }
   }
   else if (window.ActiveXObject) { // IE
       try {
           ajax = new ActiveXObject("Msxml2.XMLHTTP");
       }
       catch (e) {
           try {
               ajax = new ActiveXObject("Microsoft.XMLHTTP");
           }
           catch (e) {
alert("O browser não suporta AJAX! Impossível satisfazer pedido.");
return false;
}

       }
   }
   return ajax;
}

function AguaTanque()
{
url = "http://196.168.0.3:80/?req=";
ajax = ajaxInit();
if(ajax) {
   ajax.open("GET", "url", true);
   ajax.send(null);
   ajax.onreadystatechange = function() {
   if(ajax.readyState == 4) {
           
               alert(ajax.responseText);
                   }
   }
}
}

</script>
</head>

<body>

</body>
</html>

I'm testing connection to try to put this together with this code:

Code: [Select]
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
var myVar=setInterval(function(){myTimer()},1000);
var dynamic_height = 5;
function myTimer()
{
var theImg = document.getElementById("img2");
var d = new Date();
dynamic_height = 5 + (d.getSeconds()*3);
theImg.height = dynamic_height;
}
function myStopFunction()
{
clearInterval(myVar);
}
</script>

<body>
<center>
<b>THIS IS THE TITLE</b>
<div style="position:relative; width:360; height:336">
<div style="position:absolute; top:0; left:0"><center><img name="img1" id="img1" src="1.gif" width="360" height="336"></center></div>
<div style="position:absolute; bottom:6; left:22"><center><input type="image" name="img2" id="img2" src="2.gif" width="236" height="5">
</center></div>
</div>
</body></html>

Changing the way this code change the height of img2.jpg/water.jpg (every 1 second) with the ajax code given to change img2.jpg/water.jpg with sensor readings.

Thanks for your help

billroy

#22
Jan 28, 2013, 03:24 pm
Good for you for doing all the legwork.  I can offer a few thoughts.

Your Ajax code is based on very old examples and you'd be well advised to learn a bit about jQuery (http://jquery.com) and in particular its Ajax handling ($.post and $.get), which will make your Ajax code much simpler.  Here is a tutorial:
http://viralpatel.net/blogs/jquery-ajax-tutorial-example-ajax-jquery-development/

Once you are able to get responses back from the Arduino via the ajax $.post or $.get, you will then be able to finish the plumbing by setting the height of the image, directly, in your ajax response handling code, instead of in the timer you've currently got coded.

You will find life is much better while debugging if you learn how to use the Javascript error console in your browser.  Otherwise you won't have a clue when things are failing silently in the dark...


-br

blastboot

#23
Jan 28, 2013, 03:29 pm
OK! Thanks for the advice. I'll try to learn more about jQuery. I'ww report when i've got something....  THANKS (again!)
Print
Go Up
Pages: 1 [2]