Skip to content

Commit

Permalink
tron like skin :)
Browse files Browse the repository at this point in the history
  • Loading branch information
@aterrien
aterrien committed Feb 26, 2012
1 parent 7a4f59c commit fb42a26
Show file tree
Hide file tree
Showing 2 changed files with 96 additions and 25 deletions.
70 changes: 58 additions & 12 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,67 +6,113 @@
<script src="js/jquery.knob-1.0.1.js"></script>
<script>
$(function() {
$(".knob").knob(
$(".knob").knob();
/*$(".knob").knob(
{
'change':function(e){console.log(e);}
'change':function(e){
console.log(e);
}
}
);
)
.val(79)
;*/
});
</script>
</head>
<body>
<div style="float:left;width:100%;font-family:Georgia;font-size:70px;font-weight:bold;color:#87CEEB;letter-spacing:-5px">
Knob demo
</div>
<div style="float:left;width:320px">
<div style="float:left;width:320px;height:300px;background-color:#222;color:#FFF;padding:20px">
<pre>
data-width="75"
data-fgColor="#fff"
data-skin="tron"
</pre>
<input class="knob" data-width="75" data-fgColor="#ffec03" data-skin="tron" data-cursor=true value="75">
</div>
<div style="float:left;width:320px;height:300px;background-color:#222;color:#FFF;padding:20px">
<pre>
data-width="150"
data-fgColor="#fff"
data-skin="tron"
data-thickness=".2"
</pre>
<input class="knob" data-width="150" data-fgColor="#ffec03" data-skin="tron" data-thickness=".2" value="75">
</div>
<div style="float:left;width:320px;height:300px;background-color:#222;color:#FFF;padding:20px">
<pre>
data-width="150"
data-fgColor="#fff"
data-skin="tron"
data-thickness=".1"
</pre>
<input class="knob" data-width="150" data-fgColor="#C0ffff" data-skin="tron" data-thickness=".1" value="35">
</div>
<div style="float:left;width:320px;height:300px;padding:20px">
<pre>
data-width="100"
data-displayInput=false
</pre>
<input class="knob" data-width="100" data-displayInput=false value="35">
</div>
<div style="float:left;width:320px">
<div style="float:left;width:320px;height:300px;padding:20px">
<pre>
data-cursor=true
data-skin="tron"
</pre>
<input class="knob" data-cursor=true value="35">
<input class="knob" data-cursor=true data-skin="tron" value="35">
</div>
<div style="float:left;width:320px">
<div style="float:left;width:320px;height:300px;padding:20px">
<pre>
data-width="250"
data-min="-100"
</pre>
<input class="knob"data-width="250" data-min="-100" value="44">
</div>
<div style="float:left;width:320px">
<div style="float:left;width:320px;height:300px;padding:20px">
<pre>
data-thickness=".4"
data-fgColor="chartreuse"
data-readOnly=true
</pre>
<input class="knob" data-fgColor="chartreuse" data-thickness=".4" data-readOnly=true value="22">
</div>
<div style="float:left;width:320px">
<div style="float:left;width:320px;height:300px;padding:20px">
<pre>
data-width="300"
data-cursor=true
</pre>
<input class="knob" data-width="300" data-cursor=true value="29">
</div>
<div style="float:left;width:320px">
<div style="float:left;width:320px;height:300px;padding:20px">
<pre>
data-width="200"
</pre>
<input type="button" onclick="$('.knob-dyn').knob();" value="knobify!">
<input type="text" class="knob-dyn" data-width="200" value="56">
</div>
<div style="float:left;width:320px">
<div style="float:left;width:320px;height:300px;padding:20px">
<pre>
data-width="50"
</pre>
<input type="button" onclick="$('.knob-dyn2').knob();" value="knobify!">
<input type="text" class="knob-dyn2" data-width="50" value="56">
</div>
<div style="border: 0 none; position: absolute; right: 0; top: 0;"><a href="https://github.com/aterrien" target="_blank"><img src="../i/github-ribbon.png" style="border: 0 none;"></a></div>
<div style="border: 0 none; position: absolute; right: 0; top: 0;"><a href="https://github.com/aterrien" target="_blank"><img src="http://anthonyterrien.com/i/github-ribbon.png" style="border: 0 none;"></a></div>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-3008949-6']);
_gaq.push(['_trackPageview']);
</script>
<script type="text/javascript">
(function() {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
})();
</script>
</body>
</html>
51 changes: 38 additions & 13 deletions js/jquery.knob-1.0.1.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ $(function() {
,'fgColor' : $this.data('fgcolor') || '#87CEEB' //#222222'
,'bgColor' : $this.data('bgcolor') || '#EEEEEE'
,'readOnly' : $this.data('readonly')
,'skin' : $this.data('skin') || 'default'
,'draw' :
/**
* @param int a angle
Expand All @@ -60,16 +61,29 @@ $(function() {
ctx.arc( r, r, r-lw, sa, ea, false);
ctx.stroke();

ctx.beginPath();
ctx.strokeStyle = opt.bgColor;
ctx.arc(
r, r, r-lw ,sa
,(v==opt.min && !opt.cursor)
? sa+0.0001
: ea
, true
);
ctx.stroke();
switch(opt.skin){

case 'default' :
ctx.beginPath();
ctx.strokeStyle = opt.bgColor;
ctx.arc(
r, r, r-lw ,sa
,(v==opt.min && !opt.cursor)
? sa+0.0001
: ea
, true
);
ctx.stroke();
break;

case 'tron' :
ctx.lineWidth = 2;
ctx.beginPath();
ctx.strokeStyle = opt.fgColor;
ctx.arc( r, r, r-lw+1+lw*2/3, 0, 2*Math.PI, false);
ctx.stroke();
break;
}
}
,'change' :
/**
Expand All @@ -79,8 +93,9 @@ $(function() {
,'release' :
/**
* @param int v Current value
* @param jQuery ipt Input
*/
function(v) {}
function(v,ipt) {}
}
,gopt
);
Expand All @@ -104,7 +119,7 @@ $(function() {
,'font-family' : 'Arial'
,'font-weight' : 'bold'
,'text-align' : 'center'
,'color' : 'lightgrey'
,'color' : opt.fgColor
,'padding' : '0px'
,'-webkit-appearance': 'none'
}
Expand All @@ -117,13 +132,23 @@ $(function() {
);

k = new Knob( c, opt );
k.onRelease = opt.release;
k.onRelease = function(v) {
opt.release(v,$this);
};
k.val( parseInt($this.val()) || 0 );
k.onChange = function(v) {
$this.val(v);
opt.change(v);
};

// bind change on input
$this.bind(
'change'
,function( e ) {
k.val( $this.val() );
}
);

if( !opt.readOnly ){
c.bind(
"mousedown touchstart"
Expand Down

0 comments on commit fb42a26

Please sign in to comment.