jquery gauges knob animated
based on http://jsfiddle.net/cvQED/84/
HTML
<script src="http://anthonyterrien.com/js/jquery.knob.js"></script>
<div style="width:500px;height:410px;margin:auto;">
<div style="position:relative;margin:auto;">
<div style="position:absolute;top:0px;left:50px;border-radius: 10000px;">
<input id=knobformatbitrate type="text" value="0" class="dial animated">
</div>
<div style="position:absolute;top:20px;left:70px;border-radius: 10000px;">
<input id=knobreadbitrate type="text" value="75" class="dial animated">
</div>
<div style="position:absolute;top:80px;left:130px;border-radius: 10000px;">
<input id=knobstorebitrate type="text" value="75" class="dial">
</div>
</div>
</div>
CSS
canvas {
border-radius: 10000px;
}
JavaScript
$("#knobstorebitrate").knob({
'thickness':".45",
'width': "240",
'height': "240",
'min':0,
'max':6000,
'fgColor':"#47afff",
'bgColor':"#040404",
'angleOffset':-150,
'angleArc':300,
'displayInput':false,
'change' : function (value) {
knobstorebitrate = Math.round(value);
$("#knobstorebitrate").trigger("change");
}
});
$("#knobreadbitrate").knob({
'thickness':".28",
'width': "360",
'height': "360",
'min':0,
'max':6000,
'fgColor':"#53b353",
'bgColor':"#040404",
'angleOffset':-150,
'angleArc':300,
'displayInput':false,
'change' : function (value) {
knobreadbitrate = Math.round(value);
$("#knobreadbitrate").trigger("change");
}
});
$("#knobformatbitrate").knob({
'thickness':".05",
'width': "400",
'height': "400",
'min':0,
'max':6000,
'fgColor':"red",
'bgColor':"#040404",
'angleOffset':-150,
'angleArc':300,
'displayInput':false,
'change' : function (value) {
knobformatbitrate = Math.round(value);
$("#knobformatbitrate").trigger("change");
},
});