Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Resizing or Redrawing the knob #342

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

Resizing or Redrawing the knob #342

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
13c91df
Textual unit (%, $ ...), glow fx
Nov 11, 2013
15b8252
inner color
Nov 11, 2013
95e3e7c
glow
Nov 11, 2013
c3080b8
Update README.md
aterrien Nov 13, 2013
dbab177
Merge from master
aterrien Nov 18, 2013
0b984a6
Merge from master
aterrien Nov 19, 2013
c82b51f
Revert fix regression since #140
aterrien Nov 19, 2013
b192365
Merge from master
aterrien Nov 20, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,10 +49,13 @@ UI :
* displayInput : default=true | false=hide input.
* displayPrevious : default=false | true=displays the previous value with transparency.
* fgColor : foreground color.
* innerColor : inner color.
* inputColor : input value (number) color.
* font : font family.
* fontWeight : font weight.
* bgColor : background color.
* glow : glow effect value.
* unit : textual unit (%, ms, $).

Hooks
-------
Expand Down
51 changes: 42 additions & 9 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,11 @@
// "tron" case
if(this.$.data('skin') == 'tron') {

var a = this.angle(this.cv) // Angle
, sa = this.startAngle // Previous start angle
, sat = this.startAngle // Start angle
, ea // Previous end angle
, eat = sat + a // End angle
var a = this.angle(this.cv) // Angle
, sa = this.startAngle // Previous start angle
, sat = this.startAngle // Start angle
, ea // Previous end angle
, eat = sat + a // End angle
, r = 1;

this.g.lineWidth = this.lineWidth;
Expand Down Expand Up @@ -60,8 +60,7 @@

return false;
}
},
change: function (val) { console.log("Change: " + val) }
}
});

// Example of infinite knob, iPod click wheel
Expand Down Expand Up @@ -134,12 +133,13 @@ <h1>jQuery Knob</h1>
<input class="knob" data-width="150" data-cursor=true data-fgColor="#222222" data-thickness=.3 value="29">
</div>
<div class="demo" >
<p>&#215; Display previous value</p>
<p>&#215; Display previous value / unit</p>
<pre>
data-displayPrevious=true
data-min="-100"
data-unit="%"
</pre>
<input class="knob" data-width="200" data-min="-100" data-displayPrevious=true value="44">
<input class="knob" data-unit="%" data-width="200" data-min="-100" data-displayPrevious=true value="44">
</div>
<div style="clear:both"></div>
<div class="demo">
Expand Down Expand Up @@ -170,6 +170,39 @@ <h1>jQuery Knob</h1>
<input class="knob" data-min="-15000" data-displayPrevious=true data-max="15000" data-step="1000" value="-11000">
</div>
<div style="clear:both"></div>
<div style="text-align: center">
<p style="font-size: 20px">&#215; Glow effect</p>
</div>
<div style="background-color: #222; height: 340px">
<div class="demo" style="background-color:#222; color:#FFF;">
<pre>
data-glow=10
data-displayPrevious=true
data-linecap="round"
data-thickness=".1"
</pre>
<input class="knob" data-glow=10 data-displayPrevious=true data-linecap="round" data-width="150" data-angleOffset="180" data-bgColor="#333333" data-fgColor="#ffec03" data-thickness=".1" value="9">
</div>
<div class="demo" style="background-color:#222; color:#FFF;">
<pre>
data-glow=10
data-linecap="round"
data-thickness=".05"

</pre>
<input class="knob" data-glow=10 data-linecap="round" data-width="150" data-angleOffset="180" data-bgColor="#333333" data-fgColor="#C0ffff" data-thickness=".05" value="70">
</div>
<div class="demo" style="background-color:#222; color:#FFF;">
<pre>
data-glow=10
data-linecap="round"
data-fgColor="chartreuse"
data-thickness=".1"
</pre>
<input class="knob" data-glow=10 data-linecap="round" data-width="150" data-angleOffset="180" data-bgColor="#333333" data-fgColor="chartreuse" data-thickness=".1" value="35">
</div>
</div>
<div style="clear:both"></div>
<div style="text-align: center">
<p style="font-size: 20px">&#215; Overloaded 'draw' method</p>
</div>
Expand Down
Loading