Knob.js: Javascript Library for Multitouch Virtual Knobs
Knob.js makes it easy to include multitouch virtual knobs in your web app. It does the heavy lifting for things like:
- Minimum/maximum angle & value constraints.
- Figuring out the position and angle of the indicator dot.
- Doing the math for displaying custom rendered knobs using image sprites.
Knob.js is a purely logical component – rather than drawing or moving things around, it only crunches the numbers and gives back positions and angles. This means that you can render your virtual knobs using CSS, <canvas>,<svg> or however you like.
Download knob.js from here.
Complete Example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<HTML> <HEAD> <TITLE>Crunchify - jQuery Knob Example</TITLE> <style type="text/css"> body { background-image: url('https://cdn.crunchify.com/wp-content/uploads/2013/03/Crunchify.bg_.300.png'); } </style> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="https://cdn.crunchify.com/wp-content/uploads/code/knob.js"></script> <script> function knobfunction(value1){ $('.dial') .val(value1) .trigger('change'); } $(document).ready( function() { setInterval(function() { var randomnumber = Math.round(Math.random() * 100); knobfunction(randomnumber); }, 3000); }); </script> </HEAD> <BODY> <br> <div id="show" align="center"></div> <div align="center"> <input type="text" class="dial"> <br><br> <div style="font-family: verdana; padding: 10px; border-radius: 10px; border: 3px solid #EE872A; width: 50%; font-size: 12px;"> jQuery Knob Example by <a href='https://crunchify.com'>Crunchify</a>. Click <a href='https://crunchify.com/category/java-tutorials/'>here</a> for all Java, Spring MVC, Web Development examples.<br> </div> </div> <script> $(".dial").knob({ 'change' : function (v) { console.log(v); } }); </script> </BODY> </HTML> |
resource: Knob.js