Automatic reading of arduino values WEBSERVER

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 :sweat_smile:

Many tanks!!

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:

<!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:

<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

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

OK! Thanks for the advice. I'll try to learn more about jQuery. I'ww report when i've got something.... THANKS (again!)