Skip to content

Commit ca548d6

Browse files
rbtdevrbtdev
committed
Use image for dial
1 parent 8e699a7 commit ca548d6

3 files changed

Lines changed: 41 additions & 93 deletions

File tree

‎images/knob.png‎

78.9 KB
Loading

‎index.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -25,25 +25,25 @@
2525
<div id = "speedControls" style = "float:left; text-align: center">
2626
<div style = "float:left">
2727
<div id = "masterSpeed"></div>
28-
<div style = "margin-top: -20px">Master Speed</div>
28+
<div style = "margin-top: -10px">Master Speed</div>
2929
</div>
3030
<div style = "float:left">
3131
<div id = "arm2Speed"></div>
32-
<div style = "margin-top: -20px">Arm 2 Speed</div>
32+
<div style = "margin-top: -10px">Arm 2 Speed</div>
3333
</div>
3434
<div style = "float:left">
3535
<div id = "arm3Speed"></div>
36-
<div style = "margin-top: -20px">Arm 3 Speed</div>
36+
<div style = "margin-top: -10px">Arm 3 Speed</div>
3737
</div>
3838
<div>
3939
<div id = "lengthControls" style = "float:left">
4040
<div style = "float:left">
4141
<div id = "arm2Length"></div>
42-
<div style = "margin-top: -20px">Arm 2 Length</div>
42+
<div style = "margin-top: -10px">Arm 2 Length</div>
4343
</div>
4444
<div style = "float:left">
4545
<div id = "arm3Length"></div>
46-
<div style = "margin-top: -20px">Arm 3 Length</div>
46+
<div style = "margin-top: -10px">Arm 3 Length</div>
4747
</div>
4848
<div>
4949
<div id = "options" style = "margin-left: 40px; margin-top: 30px; float:left">
@@ -72,7 +72,7 @@
7272
</div>
7373
</body>
7474
<script>
75-
var dialSize = 175;
75+
var dialSize = 150;
7676
var masterSpeed = new RotaryDial("Drawing Speed","masterSpeed", "speedDial", 1, 500, 0, dialSize, Spirograph.dialChanging.bind(Spirograph),null);
7777
var arm2Speed = new RotaryDial("Arm 2 Speed","arm2Speed","arm2SpeedDial",-40, 40, 0, dialSize, Spirograph.dialChanging.bind(Spirograph),null);
7878
var arm3Speed = new RotaryDial("Arm 3 Speed", "arm3Speed","arm3SpeedDial", -40, 40, 0, dialSize, Spirograph.dialChanging.bind(Spirograph),null);

‎javascript/RotaryDial.js‎

Lines changed: 35 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,12 @@
22

33
function RotaryDial(title,parent,name, min,max, step, size, onChanging, onChanged)
44
{
5-
this.create(title, parent, name, min, max, step, size, onChanging, onChanged);
6-
5+
var _this = this;
6+
this.dialImage = new Image();
7+
this.dialImage.onload = function () {
8+
_this.create(title, parent, name, min, max, step, size, onChanging, onChanged);
9+
}
10+
this.dialImage.src = "./images/knob.png";
711
};
812

913
RotaryDial.prototype.create = function(title,parent,name,min, max, step,size,onChanging, onChanged) {
@@ -13,9 +17,11 @@ RotaryDial.prototype.create = function(title,parent,name,min, max, step,size,onC
1317
this.maximum = max;
1418
this.size = size;
1519
this.digits = step;
20+
this.rotation = 0;
1621
this.parentDiv = document.getElementById(parent);
1722
this.doChanging = onChanging;
1823
this.doChanged = onChanged;
24+
1925
this.initialized = false;
2026
this.initCanvas();
2127
};
@@ -84,96 +90,38 @@ RotaryDial.prototype.initCanvas = function () {
8490
this.setBounds(-100, 100, -100, 100, 1);
8591
this.rotationStop = false;
8692
this.grabPoint = this.circlePoint(this.position);
87-
this.drawDial({x:0, y:0}, 100);
93+
this.grabRadius = (100);
94+
95+
this.drawDial({x:0, y:0});
8896
}
8997
};
9098

9199
RotaryDial.prototype.setStep = function (step) {
92100
this.digits = step;
93101
};
94102

95-
RotaryDial.prototype.drawDial = function (center, radius) {
96-
// console.log("DrawDial: rotation = " + this.grabPoint.rotation);
97-
this.gMoving.clearRect(0,0,this.canvasWidth,this.canvasHeight);
103+
RotaryDial.prototype.drawDial = function (center) {
104+
98105
var lcenter = this.toLocal(center);
99-
this.gMoving.beginPath();
100-
var startArc = (Math.PI*2) - this.minPosition;
101-
var endArc = (Math.PI*2) - this.maxPosition
106+
var context = this.gMoving;
107+
var x = lcenter.x;
108+
var y = lcenter.y;
109+
var width = this.size;
110+
var height = this.size;
111+
var rotation = -this.rotation+(Math.PI/2);
102112

103-
// Dial Nob and Groove
104-
var grooveWidth = 7
105-
this.gMoving.arc(lcenter.x, lcenter.y, this.scale*radius*.75, startArc, endArc, false);
106-
this.gMoving.strokeStyle = "rgb(120,120,120)";
107-
this.gMoving.lineWidth = 5;
108-
//this.gMoving.fillStyle = "rgb(120,120,120)";
109-
this.gMoving.stroke();
110-
111-
this.gMoving.beginPath();
112-
this.gMoving.arc(lcenter.x, lcenter.y, this.scale*radius*.75 +5, 0, Math.PI*2, false);
113-
this.gMoving.strokeStyle = "rgb(120,120,120)";
114-
this.gMoving.lineWidth = .5;
115-
this.gMoving.stroke();
116-
117-
this.gMoving.beginPath();
118-
this.gMoving.lineWidth = 1;
119-
this.gMoving.strokeStyle = "rgb(50,50,50)";
120-
this.gMoving.arc(lcenter.x, lcenter.y, this.scale*radius*.75 ,0, Math.PI*2, false);
121-
this.gMoving.fillStyle = "rgb(220,220,220)";
122-
this.gMoving.fill();
123-
this.gMoving.stroke();
124-
125-
// Grab Button and radial line
126-
this.gMoving.beginPath();
127-
var grabCenter = this.toLocal(this.grabPoint);
128-
this.gMoving.beginPath();
129-
this.gMoving.moveTo (this.toLocal({x:0,y:0}).x, this.toLocal({x:0,y:0}).y);
130-
this.gMoving.lineTo (grabCenter.x , grabCenter.y);
131-
this.gMoving.lineWidth = 1;
132-
this.strokeStyle = "black";
133-
this.gMoving.stroke();
134-
this.gMoving.beginPath();
135-
var nobRadius = (radius/4)
136-
this.grabRadius = (radius/4);
137-
this.gMoving.arc(grabCenter.x, grabCenter.y, Math.min(Math.max(this.scale*nobRadius,10),30), Math.PI*2, false);
138-
if (this.dialGrabbed) {
139-
this.gMoving.fillStyle = "rgb(120,195,255)";
140-
}
141-
else {
142-
this.gMoving.fillStyle = "rgb(200,200,200)";
143-
}
144-
this.gMoving.fill();
145-
this.gMoving.stroke();
146-
147-
// Cap
148-
this.gMoving.beginPath();
149-
this.gMoving.lineWidth = 1;
150-
this.gMoving.strokeStyle = "rgb(50,50,50)";
151-
this.gMoving.arc(lcenter.x, lcenter.y, this.scale*radius*.125 ,0, Math.PI*2, false);
152-
this.gMoving.fillStyle = "rgb(50,50,50)";
153-
this.gMoving.fill();
154-
this.gMoving.stroke();
155-
156-
// text
157-
this.gMoving.font="12px Arial";
158-
this.gMoving.fillStyle = "black";
159-
var text ="" + this.value;
160-
var metrics = this.gMoving.measureText(text);
161-
var offset = metrics.width/2;
162-
this.gMoving.fillText(text, lcenter.x-offset, lcenter.y+0.2*this.height);
163-
164-
// this.gMoving.fillStyle = "white";
165-
// this.gMoving.font = "" + Math.round(this.size)/10 + "px Arial";
166-
// text = this.title;
167-
// metrics = this.gMoving.measureText(text);
168-
// offset = metrics.width/2;
169-
// this.gMoving.fillText(text, lcenter.x-offset, this.height-10);
113+
context.translate(x, y);
114+
context.rotate(rotation);
115+
context.drawImage(this.dialImage, -width / 2, -height / 2, width, height);
116+
context.rotate(-rotation);
117+
context.translate(-x, -y);
170118
};
171119

172120

173121
RotaryDial.prototype.canvasClick = function (oevent) {
174122
// console.log ("Canvas Clicked at (" + event.offsetX + "," + event.offsetY + ")");
175123
this.dialGrabbed = false;
176-
this.drawDial({x:0, y:0}, 100);
124+
this.drawDial({x:0, y:0});
177125
if (this.doChanged != null) this.doChanged(this);
178126
};
179127

@@ -193,7 +141,7 @@ RotaryDial.prototype.mouseMove= function(x,y) {
193141
if (this.grabDial(this.mouseDown)) {
194142
// console.log("Grabbing dial...");
195143
this.grabPoint = this.moveGrabPoint(this.mouseDown);
196-
this.drawDial({x:0, y:0}, 100);
144+
this.drawDial({x:0, y:0});
197145
}
198146
};
199147

@@ -202,7 +150,7 @@ RotaryDial.prototype.canvasTouchDrag = function (event) {
202150
var dx = this.mouseDown.x - event.changedTouches[0].pageX+this.canvasMoving.offsetLeft;
203151
var dy = this.mouseDown.y - event.changedTouches[0].pageY+this.canvasMoving.offsetTop;
204152
this.moveDial(-dx,-dy);
205-
this.drawDial({x:0, y:0}, 100);
153+
this.drawDial({x:0, y:0});
206154
}
207155
event.preventDefault();
208156
};
@@ -212,27 +160,27 @@ RotaryDial.prototype.canvasMouseDrag = function (event) {
212160
var dx = this.mouseDown.x - event.pageX+this.canvasMoving.offsetLeft;
213161
var dy = this.mouseDown.y - event.pageY+this.canvasMoving.offsetTop;
214162
this.moveDial(-dx,-dy);
215-
this.drawDial({x:0, y:0}, 100);
163+
this.drawDial({x:0, y:0});
216164
}
217165
};
218166

219167

220168

221169
RotaryDial.prototype.moveGrabPoint = function (mousePoint) {
222-
var rotation = this.findAngle(this.toLocal({x:0,y:0}),mousePoint);
223-
var newGrabPoint = this.circlePoint(rotation);
170+
this.rotation = this.findAngle(this.toLocal({x:0,y:0}),mousePoint);
171+
var newGrabPoint = this.circlePoint(this.rotation);
224172
var movement = this.getMovement(this.grabPoint, newGrabPoint);
225-
var normalized = (this.minPosition - rotation + (Math.PI*2))%(Math.PI*2);
173+
var normalized = (this.minPosition - this.rotation + (Math.PI*2))%(Math.PI*2);
226174
if (normalized > this.dialRange) { // invalid range
227175
if (movement.direction == 1) {
228-
rotation = this.maxPosition;
176+
this.rotation = this.maxPosition;
229177
}
230178
else { // counterclockwise
231-
rotation = this.minPosition;
179+
this.rotation = this.minPosition;
232180
}
233-
newGrabPoint = this.circlePoint(rotation);
181+
newGrabPoint = this.circlePoint(this.rotation);
234182
}
235-
newGrabPoint.value = this.dialValue(rotation);
183+
newGrabPoint.value = this.dialValue(this.rotation);
236184
return newGrabPoint;
237185
};
238186

0 commit comments

Comments
 (0)