Industrial JS

Simple Tank example control by input

by aflynt

HTML

<link rel="stylesheet" href="http://valdez42.github.io/industrial-js/css/industrial.css">
<script src="http://valdez42.github.io/industrial-js/js/industrial.js"></script>
<h1>Water Level 2 - Using Industrial.js</h1>

<span id="display"></span>

<div class="industrial tank size two"> <span class="ticks" data-amount="4" data-scale-freq="1"></span>

    <div class="space"></div>
    <div class="meter safe"></div>
</div>
<label>Set point:
    <input type="text" id="set_point" value="30" size="4">
</label>

<h3>Culture</h3>
	  							 	 <div class="industrial thermometer size one">
			                            <span class="ticks" data-amount="10"></span>
			                            <div class="space"></div>
			                            <div class="meter warning"></div>
			                        </div>

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto);
 h1, input, html {
    font-family:'Roboto', sans-serif;
}
label {
    margin: 7px;
}

JavaScript

$(document).ready(function () {
    var l = 0;
    $("#set_point").keyup(function () {
        l = $("#set_point").val();
        $("#display").html('Nivel: ' + l);
        $(".industrial.tank").each(function () {
            $(this).industrial(l);
        });
    });
});