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:
<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