Animation of water in cylinder with jquery based on mySQL variables - php

Question

I need to create an animation of the water-level in a tank, based on MySQL Variables, which I get every 5 seconds from a database.
The value is from 1 to 100, and it means %, so the goal is, that depending on the % value the water moves smoothly up or down.
So far I have this:
script to check every 5000ms the value from database :
$(document).ready(function () {setInterval(function() {$.get("http://www.h2o-info.com/betapage/script_water_detail.php", function (result) {$('#water_detail').html(result);});}, 5000); });
and show the result in a div:
<div id="water_detail"></div>
script_water_detail.php :
<?php
// Connect to MySQL
$link = mysql_connect( 'xxx', 'xxx', 'xxx' );
if ( !$link ) {
die( 'Could not connect: ' . mysql_error() );
}
// Select the data base
$db = mysql_select_db( 'xxx', $link );
if ( !$db ) {
die ( 'Error selecting database \'xxx\' : ' . mysql_error() );
}
$query = mysql_query("select V_00 from SensorLog where S_ID = 1 ORDER BY ID DESC LIMIT 1;");
while ($row = mysql_fetch_array($query))
{
?>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#water_detailed").css({
height:'<?php echo round ($row['V_00'], 0); ?>px'})
});
</script>
<?php
if($row['V_00']<='0'){
print "<div class='water_fill_1'>";
echo round ($row['V_00'], 0);
"</div>";
}
elseif ($row['V_00']<='2'){
print "<div class='water_fill_5'>";
echo round ($row['V_00'], 0);
"</div>";
}else{
print "<div id='water_detailed'></div>";
}
} // End while loop
?>
the css properties :
#water_detailed {
background: #e2f4ff; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2UyZjRmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ3JSIgc3RvcC1jb2xvcj0iI2ExZGJmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMGIwZmMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #e2f4ff 0%, #a1dbff 47%, #00b0fc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2f4ff), color-stop(47%,#a1dbff), color-stop(100%,#00b0fc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e2f4ff 0%,#a1dbff 47%,#00b0fc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e2f4ff 0%,#a1dbff 47%,#00b0fc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e2f4ff 0%,#a1dbff 47%,#00b0fc 100%); /* IE10+ */
background: linear-gradient(to bottom, #e2f4ff 0%,#a1dbff 47%,#00b0fc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2f4ff', endColorstr='#00b0fc',GradientType=0 ); /* IE6-8 */
width: 280px;
height:0;
float:right;
color: #fff;
text-align: center;
vertical-align: middle;
line-height: 200px;
font-size: 20px;
}
#water_detail {
width: 280px;
margin: -275px 100px 0 0;
float: right;
}
So far I have the following result:
Betalink
How you can see, it doesn't work properly, how I said first, it should on the first page load smoothly "fill" from bottom to top regarding the actual value and then change up or down, depending on the values of the database.
Perhaps someone has any suggestions.

Answer 1

Imho the easiest solution would be to have a white div and put a blue child div into it, which has it's margin-top value from your database percentage
(Plus the parent div has to have it's overflow set to hidden, not showing the hidden water part).
Have a look at this jsfiddle to see it in action.
Code
HTML:
<div id="water_detail">
<div id="water_level"></div>
<div>
CSS:
#water_detail { height:200px; background:white; overflow:hidden; width:250px; }
#water_level { height:200px; background:blue; margin-top:200px;/*initially*/ }
Javascript:
$(document).ready(function () {
setInterval(function() {
$.get("http://www.h2o-info.com/betapage/script_water_detail.php", function (result) {
//$('#water_detail').html(result);
$('#water_level').animate({'margin-top' : (200-result*2)+'px'});
});
},5000);
});
The (200-result*2) is only due to the div being "twice the height" of your max value (100% = 200px). Possibly a more "accurate" way would be to write: div_width - (result/100 * div_width)
(In this case a level of 0% results in margin-top:200px, 50% in margin-top:100px, etc.)
How to make it look nicer
Set a static image as the childs background, instead of just a single color
Even better: Take an animated gif that moves the way water does
Working Example
See this jsfiddle for an example of a water level animation (with random water levels).
Solution, Specific To OP
$(document).ready(function () {
setInterval(function() {
$.get("http://www.h2o-info.com/betapage/script_water_detail.php", function (result) {
$('#water_level').animate( {'margin-top' : (200-result*2)+'px' } );
});
},2000);
});
This gets the water level every 2 seconds! Change the last 2000 to what you prefer, it is just the interval (to apply the script) in milliseconds.

Answer 2

Try using jQuery.animate() to make it appear that the water is filling up.
Use a blue <div> which is under (ie: covered by) a grey <div>. For this example, lets set both <div> height to 100 px. Hence reducing the grey <div> height would uncover more of the blue <div>.
Next, parse the output from PHP and on success, run $("#grey_div").animate( {"height": 100 - parseInt(result_from_php)} );

Answer 3

You are echoing so much inside script_water_detail.php.
You should just echo the % of water in this script using which you can animate the water level inside the jQuery function.
The animation shouldn't be the hard part, it is simply increasing the height of the #water_detailed div.
So basically, I think the problem will disappear once the structure is corrected.
Forgive me for not providing any code, but if you need anymore help, then I might code it and give you but I think it won't be needed.