Animation of water in cylinder with jquery based on mySQL variables

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

1. 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>.

2. Next, parse the output from PHP and on success, run $("#grey_div").animate( {"height": 100 - parseInt(result_from_php)} );