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");
},
});
$('.dial').parent('div').children('canvas').mousemove(function(event) {
$.each($('.dial').parent('div').children('canvas'), function(key, value) {
var canvas = value;
var context = canvas.getContext('2d');
var position = getElementPosition(canvas);
var x = event.pageX - position.x;
var y = event.pageY - position.y;
var color = context.getImageData(x, y, 1, 1).data;
if(color[0] == 0 && color[1] == 0 && color[2] == 0) {
$(canvas).parent('div').parent('div').css('z-index', '1');
}else {
$(canvas).parent('div').parent('div').css('z-index', '2');
testi();
}
});
});
function getElementPosition(element) {
var currentLeft = 0;
var currentTop = 0;
if(element.offsetParent)...