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
how can I load custom content pulling from mysql database and have it refresh every few seconds. is there a way I can load a specific file like content.php
Hi Penwell. Absolutely yes. You just need to write JDBC connector codebase for your Database and replace random value in above program.
Thanks mate for sharing this great trick. Very usefull. 🙂 You really saved my life today. hahahaha
You are welcome Gede. Happy coding and keep coming 🙂