circular-sliders-rails 0.2.0 → 0.3.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +46 -16
- data/lib/circular/sliders/rails/version.rb +1 -1
- data/vendor/assets/images/circular-sliders-rails.png +0 -0
- data/vendor/assets/javascripts/circular-sliders.js +74 -16
- metadata +2 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 5d2ca67677ccbe354fcac5885dee5fca5346667d0cd6b8e2111c693bd5213e27
|
4
|
+
data.tar.gz: '0784bed3107129b71d227679698dbd5fbf934cdbfb0f22b17c24b6c48eed850b'
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 0d5c77f3804c770b9748d3c09ac80c08a85e736d197a51ac864aaeddf4579bc2a295c1052c85fcdd76648bef8b8fe6aced27154b50adde702d3df52c58886db1
|
7
|
+
data.tar.gz: e1fc7dc6849520ce1e03c7427e7184a9e26a1fdabffd45621f5f37b25e2ec4a10b036b2a302fae3d2616cd85de2f1db6e52ad9a89410ab8b8e3f8965c87d172e
|
data/README.md
CHANGED
@@ -26,45 +26,62 @@ Include in your application.js file:
|
|
26
26
|
|
27
27
|
Create a canvas element in the view where you would like the sliders to go:
|
28
28
|
|
29
|
-
<canvas id="sliders" width="
|
29
|
+
<canvas id="sliders" width="1200" height="300" style="border:1px solid;"></canvas>
|
30
30
|
|
31
31
|
Use jQuery to add circular sliders to the canvas area. Pass slider settings as objects in an array. Create multiple sliders or just a single slider.
|
32
32
|
|
33
33
|
<script>
|
34
34
|
$('#sliders').sliders([
|
35
|
+
{
|
36
|
+
name: "Age",
|
37
|
+
centerX: 175,
|
38
|
+
minValue: 18,
|
39
|
+
maxValue: 66,
|
40
|
+
step: 1,
|
41
|
+
units: "years",
|
42
|
+
color: "#FF7F50",
|
43
|
+
textColor: "#FF7F50"
|
44
|
+
},
|
45
|
+
{
|
46
|
+
name: "Daily activity",
|
47
|
+
units: "miles",
|
48
|
+
minValue: 0,
|
49
|
+
maxValue: 25,
|
50
|
+
step: 1,
|
51
|
+
color: "#FF7F50",
|
52
|
+
textColor: "#FF7F50"
|
53
|
+
},
|
35
54
|
{
|
36
55
|
name: "Height",
|
37
56
|
color: "#FFDEAD",
|
38
|
-
|
39
|
-
|
57
|
+
type: "Height",
|
58
|
+
centerX: 375,
|
40
59
|
minValue: 0,
|
41
60
|
maxValue: 250,
|
42
|
-
step:
|
61
|
+
step: 2,
|
43
62
|
units: "cm",
|
44
|
-
radius:
|
45
|
-
lineDashLength: 5,
|
46
|
-
lineDashSpacing: 5,
|
47
|
-
lineWidth: 5,
|
63
|
+
radius: 100,
|
48
64
|
strokeColor: "#D3D3D3",
|
49
65
|
},
|
50
66
|
{
|
51
67
|
name: "Weight",
|
52
68
|
color: "#A52A2A",
|
69
|
+
type: "Weight",
|
53
70
|
minValue: 0,
|
54
71
|
maxValue: 150,
|
72
|
+
radius: 100,
|
73
|
+
centerX: 600,
|
55
74
|
step: 5,
|
56
75
|
units: "kg",
|
57
|
-
lineDashLength: 5,
|
58
|
-
lineDashSpacing: 10,
|
59
76
|
lineWidth: 10,
|
60
77
|
strokeColor: "#D3D3D3",
|
61
78
|
},
|
62
79
|
{
|
63
80
|
name: "Waist size",
|
64
|
-
centerX: 400,
|
65
|
-
centerY: 150,
|
66
81
|
color: "#A0522D",
|
67
|
-
|
82
|
+
type: "Waist",
|
83
|
+
centerX: 825,
|
84
|
+
radius: 100,
|
68
85
|
minValue: 0,
|
69
86
|
maxValue: 50,
|
70
87
|
lineWidth: 10,
|
@@ -74,9 +91,20 @@ Use jQuery to add circular sliders to the canvas area. Pass slider settings as o
|
|
74
91
|
},
|
75
92
|
{
|
76
93
|
name: "Shoe size",
|
94
|
+
type: "Shoe",
|
95
|
+
centerX: 1050,
|
96
|
+
radius: 100,
|
97
|
+
lineWidth: 10,
|
77
98
|
minValue: 10,
|
78
99
|
maxValue: 60,
|
79
|
-
step: 1
|
100
|
+
step: 1,
|
101
|
+
textColor: "#0000FF"
|
102
|
+
},
|
103
|
+
{
|
104
|
+
name: "Desired price",
|
105
|
+
priceUnits: "£",
|
106
|
+
textColor: "#0000FF",
|
107
|
+
step: 5,
|
80
108
|
}
|
81
109
|
]);
|
82
110
|
</script>
|
@@ -86,6 +114,7 @@ Slider settings:
|
|
86
114
|
| Name | Type | Default | Description |
|
87
115
|
| --------------- | ------ | ----------------------------------- | ------------------------------------------------------ |
|
88
116
|
| name | String | Slider n | Name your slider |
|
117
|
+
| type | String | Plain | Pick between various types for interesting graphics at the center of the slider: 'Height', 'Weight', 'Shoe', 'Waist', and more to come! |
|
89
118
|
| centerX | Float | Center of canvas or previous slider | Specify the x value for the center of the slider |
|
90
119
|
| centerY | Float | Center of canvas or previous slider | Specify the y value for the center of the slider |
|
91
120
|
| color | String | "#0000FF" | Specify the color of the arc fill |
|
@@ -93,7 +122,8 @@ Slider settings:
|
|
93
122
|
| maxValue | Float | 100 | The maximum value of your slider |
|
94
123
|
| step | Float | 10 | The amount the value is incremented |
|
95
124
|
| units | String | "" | The units your value is displayed in |
|
96
|
-
|
|
125
|
+
| priceUnits | String | "" | Adds price ('$', '€', '£' ...) before value |
|
126
|
+
| radius | Float | 40 or (previous slider radius + previous slider lineWidth + 5) | The radius of your slider |
|
97
127
|
| lineWidth | Float | 5 | The slider and arc width |
|
98
128
|
| strokeColor | String | "#D3D3D3" | The color of the dashes on the slider |
|
99
129
|
| ballColor | String | "#000000" | The color of the slider ball |
|
@@ -103,7 +133,7 @@ Retrieve values of individual sliders by calling:
|
|
103
133
|
|
104
134
|
$('#sliders').data('slider_name');
|
105
135
|
|
106
|
-
You should see something like this:
|
136
|
+
You should see something like this (with the above options):
|
107
137
|
|
108
138
|
![Circular sliders](/vendor/assets/images/circular-sliders-rails.png)
|
109
139
|
|
Binary file
|
@@ -17,32 +17,31 @@
|
|
17
17
|
canvas = this[0];
|
18
18
|
ctx = canvas.getContext("2d");
|
19
19
|
setOffset();
|
20
|
-
// maybe refactor and make centerX and centerY one variable [centerX, centerY]
|
21
|
-
var slidersCenterX = canvas.width / 2;
|
22
|
-
var slidersCenterY = canvas.height / 2;
|
23
|
-
// maybe refactor, add container option if there are multiple containers, could allow multiple containers / canvases in the future
|
24
20
|
var defaults = {
|
25
21
|
name: "Slider",
|
26
|
-
|
27
|
-
|
22
|
+
type: "Plain",
|
23
|
+
centerX: canvas.width / 2,
|
24
|
+
centerY: canvas.height / 2,
|
28
25
|
color: "#0000FF",
|
29
26
|
minValue: 0,
|
30
27
|
maxValue: 100,
|
31
28
|
step: 10,
|
32
29
|
units: "",
|
30
|
+
priceUnits: "",
|
33
31
|
radius: 40,
|
34
32
|
lineWidth: 5,
|
35
33
|
strokeColor: "#D3D3D3",
|
36
34
|
ballColor: "#000000",
|
37
35
|
textColor: "#000000"
|
38
36
|
}
|
37
|
+
// maybe refactor, add container option if there are multiple containers, could allow multiple containers / canvases in the future
|
39
38
|
for (var i = 0; i < slidersOptions.length; i++) {
|
40
39
|
defaults.name = "Slider " + (i + 1);
|
41
40
|
// maybe refactor, want previous centerX, centerY, and lineWidth and 10 pixels spacing between sliders
|
42
41
|
if (i > 0) {
|
43
42
|
defaults.centerX = sliders[i-1].centerX;
|
44
43
|
defaults.centerY = sliders[i-1].centerY;
|
45
|
-
defaults.radius = sliders[i-1].radius + sliders[i-1].lineWidth +
|
44
|
+
defaults.radius = sliders[i-1].radius + sliders[i-1].lineWidth + 5;
|
46
45
|
}
|
47
46
|
var sliderSettings = $.extend( {}, defaults, slidersOptions[i] )
|
48
47
|
sliders.push(new Slider (sliderSettings));
|
@@ -59,6 +58,7 @@
|
|
59
58
|
|
60
59
|
function Slider(settings) {
|
61
60
|
this.name = settings.name;
|
61
|
+
this.type = settings.type;
|
62
62
|
this.centerX = settings.centerX;
|
63
63
|
this.centerY = settings.centerY;
|
64
64
|
this.color = settings.color;
|
@@ -66,6 +66,7 @@
|
|
66
66
|
this.maxValue = settings.maxValue;
|
67
67
|
this.step = settings.step;
|
68
68
|
this.units = settings.units;
|
69
|
+
this.priceUnits = settings.priceUnits;
|
69
70
|
this.radius = settings.radius;
|
70
71
|
this.lineWidth = settings.lineWidth;
|
71
72
|
this.strokeColor = settings.strokeColor;
|
@@ -96,17 +97,72 @@
|
|
96
97
|
}
|
97
98
|
|
98
99
|
function drawSlider(slider) {
|
99
|
-
ctx.beginPath();
|
100
|
-
ctx.arc(slider.centerX, slider.centerY, slider.radius, 0, Math.PI*2, false);
|
101
100
|
ctx.lineWidth = slider.lineWidth;
|
102
101
|
ctx.strokeStyle = slider.strokeColor;
|
103
102
|
var sliderCircumference = 2 * Math.PI * slider.radius;
|
104
|
-
// maybe refactor, I like 2/3 and 1/3 for now
|
103
|
+
// maybe refactor, I like 2/3 and 1/3 for now, maybe move this to #Slider so don't have to calculate every time
|
105
104
|
var sliderLineDashLength = (2 / 3) * (sliderCircumference / (slider.range / slider.step));
|
106
105
|
var sliderLineDashSpacing = (1 / 3) * (sliderCircumference / (slider.range / slider.step));
|
107
106
|
ctx.setLineDash([sliderLineDashLength, sliderLineDashSpacing]);
|
107
|
+
ctx.beginPath();
|
108
|
+
ctx.arc(slider.centerX, slider.centerY, slider.radius, 0, Math.PI*2, false);
|
108
109
|
ctx.stroke();
|
109
110
|
ctx.closePath();
|
111
|
+
if (slider.type != "Plain") {
|
112
|
+
ctx.setLineDash([10, 0]);
|
113
|
+
ctx.beginPath();
|
114
|
+
ctx.lineWidth = 5;
|
115
|
+
// maybe add scale (and restore): ctx.scale(1.05, 1.05), ctx.restore()
|
116
|
+
if (slider.type == "Shoe") {
|
117
|
+
ctx.moveTo(slider.centerX - 0.8 * slider.radius, slider.centerY - 0.5 * slider.radius);
|
118
|
+
ctx.arc(slider.centerX - 0.5 * slider.radius, slider.centerY - 0.5 * slider.radius, slider.radius * 0.3, Math.PI, 0, true);
|
119
|
+
ctx.lineTo(slider.centerX + 0.6 * slider.radius, slider.centerY - 0.1 * slider.radius);
|
120
|
+
ctx.arc(slider.centerX + 0.7 * slider.radius, slider.centerY + 0.1 * slider.radius, slider.radius * 0.2, -(Math.PI / 2), Math.PI / 2, false);
|
121
|
+
ctx.lineTo(slider.centerX - 0.8 * slider.radius, slider.centerY + 0.3 * slider.radius);
|
122
|
+
ctx.lineTo(slider.centerX - 0.8 * slider.radius, slider.centerY - 0.5 * slider.radius);
|
123
|
+
} else if (slider.type == "Waist") {
|
124
|
+
// refactor, wanted to eyeball it without using math, also maybe move up
|
125
|
+
ctx.moveTo(slider.centerX - 0.5 * slider.radius, slider.centerY + 0.05 * slider.radius);
|
126
|
+
ctx.arc(slider.centerX, slider.centerY - 0.8 * slider.radius, slider.radius, Math.PI * (2/3), Math.PI * (1/3), true);
|
127
|
+
ctx.lineTo(slider.centerX + 0.2 * slider.radius, slider.centerY + 0.9 * slider.radius);
|
128
|
+
// need moveTo here and below because otherwise there is a sharp v bend
|
129
|
+
ctx.moveTo(slider.centerX + 0.2 * slider.radius, slider.centerY + 0.9 * slider.radius);
|
130
|
+
ctx.arc(slider.centerX + 0.1 * slider.radius, slider.centerY + 0.9 * slider.radius, slider.radius * 0.1, 0, Math.PI, true);
|
131
|
+
ctx.lineTo(slider.centerX, slider.centerY + 0.4 * slider.radius);
|
132
|
+
ctx.arc(slider.centerX - 0.1 * slider.radius, slider.centerY + 0.9 * slider.radius, slider.radius * 0.1, 0, Math.PI, true);
|
133
|
+
ctx.moveTo(slider.centerX - 0.2 * slider.radius, slider.centerY + 0.9 * slider.radius);
|
134
|
+
ctx.lineTo(slider.centerX - 0.5 * slider.radius, slider.centerY + 0.05 * slider.radius);
|
135
|
+
} else if (slider.type == "Height") {
|
136
|
+
ctx.arc(slider.centerX, slider.centerY - 0.6 * slider.radius, slider.radius * 0.2, 0, Math.PI*2, false);
|
137
|
+
ctx.moveTo(slider.centerX + 0.08 * slider.radius, slider.centerY - 0.32 * slider.radius);
|
138
|
+
ctx.arc(slider.centerX, slider.centerY - 0.3 * slider.radius, slider.radius * 0.08, 0, Math.PI*2, false);
|
139
|
+
ctx.moveTo(slider.centerX + 0.05 * slider.radius, slider.centerY - 0.25 * slider.radius);
|
140
|
+
// maybe refactor and add arms, here and in weight: ctx.lineTo(slider.centerX + 0.25 * slider.radius, slider.centerY - 0.1 * slider.radius);
|
141
|
+
ctx.lineTo(slider.centerX + 0.05 * slider.radius, slider.centerY + 0.1 * slider.radius);
|
142
|
+
ctx.arc(slider.centerX, slider.centerY + 0.2 * slider.radius, slider.radius * 0.1, -(Math.PI / 3), Math.PI / 3, false);
|
143
|
+
ctx.lineTo(slider.centerX + 0.05 * slider.radius, slider.centerY + 0.8 * slider.radius);
|
144
|
+
ctx.lineTo(slider.centerX - 0.2 * slider.radius, slider.centerY + 0.8 * slider.radius);
|
145
|
+
ctx.arc(slider.centerX - 0.15 * slider.radius, slider.centerY + 0.8 * slider.radius, slider.radius * 0.05, Math.PI, -(Math.PI / 2), false);
|
146
|
+
ctx.lineTo(slider.centerX - 0.05 * slider.radius, slider.centerY + 0.75 * slider.radius);
|
147
|
+
ctx.lineTo(slider.centerX - 0.05 * slider.radius, slider.centerY - 0.25 * slider.radius);
|
148
|
+
} else if (slider.type == "Weight") {
|
149
|
+
ctx.arc(slider.centerX, slider.centerY - 0.6 * slider.radius, slider.radius * 0.2, 0, Math.PI*2, false);
|
150
|
+
ctx.moveTo(slider.centerX + 0.08 * slider.radius, slider.centerY - 0.32 * slider.radius);
|
151
|
+
ctx.arc(slider.centerX, slider.centerY - 0.3 * slider.radius, slider.radius * 0.08, 0, Math.PI*2, false);
|
152
|
+
ctx.moveTo(slider.centerX + 0.05 * slider.radius, slider.centerY - 0.25 * slider.radius);
|
153
|
+
ctx.lineTo(slider.centerX + 0.05 * slider.radius, slider.centerY + 0.1 * slider.radius);
|
154
|
+
ctx.arc(slider.centerX, slider.centerY + 0.2 * slider.radius, slider.radius * 0.1, -(Math.PI / 3), Math.PI / 3, false);
|
155
|
+
ctx.lineTo(slider.centerX + 0.05 * slider.radius, slider.centerY + 0.8 * slider.radius);
|
156
|
+
ctx.lineTo(slider.centerX - 0.2 * slider.radius, slider.centerY + 0.8 * slider.radius);
|
157
|
+
ctx.arc(slider.centerX - 0.15 * slider.radius, slider.centerY + 0.8 * slider.radius, slider.radius * 0.05, Math.PI, -(Math.PI / 2), false);
|
158
|
+
ctx.lineTo(slider.centerX - 0.05 * slider.radius, slider.centerY + 0.75 * slider.radius);
|
159
|
+
ctx.lineTo(slider.centerX - 0.05 * slider.radius, slider.centerY + 0.15 * slider.radius);
|
160
|
+
ctx.arc(slider.centerX - 0.05 * slider.radius, slider.centerY, slider.radius * 0.15, Math.PI / 2, -(Math.PI / 2), false);
|
161
|
+
ctx.lineTo(slider.centerX - 0.05 * slider.radius, slider.centerY - 0.25 * slider.radius);
|
162
|
+
}
|
163
|
+
ctx.stroke();
|
164
|
+
ctx.closePath();
|
165
|
+
}
|
110
166
|
}
|
111
167
|
|
112
168
|
function drawBall(slider) {
|
@@ -139,7 +195,7 @@
|
|
139
195
|
// maybe refactor and make this editable
|
140
196
|
ctx.font = "12px Arial";
|
141
197
|
ctx.fillStyle = slider.textColor;
|
142
|
-
ctx.fillText(slider.name + ": " + slider.value + " " + slider.units, 10, 20*(count+1));
|
198
|
+
ctx.fillText(slider.name + ": " + slider.priceUnits + slider.value + " " + slider.units, 10, 20*(count+1));
|
143
199
|
}
|
144
200
|
|
145
201
|
function moveBall (mouseX, mouseY, slider) {
|
@@ -161,9 +217,7 @@
|
|
161
217
|
e.preventDefault();
|
162
218
|
isMouseDown = true;
|
163
219
|
setOffset();
|
164
|
-
|
165
|
-
var mouseX = parseInt(e.clientX - offset[0] + $(window).scrollLeft());
|
166
|
-
var mouseY = parseInt(e.clientY - offset[1] + $(window).scrollTop());
|
220
|
+
var [mouseX, mouseY] = setMouse(e);
|
167
221
|
for (var i = 0; i < sliders.length; i++) {
|
168
222
|
if (onBall(mouseX, mouseY, sliders[i])) {
|
169
223
|
selectedSlider = sliders[i];
|
@@ -182,8 +236,7 @@
|
|
182
236
|
}
|
183
237
|
e.preventDefault();
|
184
238
|
setOffset();
|
185
|
-
var mouseX =
|
186
|
-
var mouseY = parseInt(e.clientY - offset[1] + $(window).scrollTop());
|
239
|
+
var [mouseX, mouseY] = setMouse(e);
|
187
240
|
moveBall(mouseX, mouseY, selectedSlider);
|
188
241
|
}
|
189
242
|
|
@@ -203,4 +256,9 @@
|
|
203
256
|
offset = [canvas.offsetLeft, canvas.offsetTop];
|
204
257
|
}
|
205
258
|
|
259
|
+
function setMouse(e) {
|
260
|
+
// $(window).scrollLeft() and $(window).scrollTop() to account for page scrolling
|
261
|
+
return [parseInt(e.clientX - offset[0] + $(window).scrollLeft()), parseInt(e.clientY - offset[1] + $(window).scrollTop())];
|
262
|
+
}
|
263
|
+
|
206
264
|
}( jQuery ));
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: circular-sliders-rails
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.
|
4
|
+
version: 0.3.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Sebastian Peterlin
|
8
8
|
autorequire:
|
9
9
|
bindir: exe
|
10
10
|
cert_chain: []
|
11
|
-
date: 2018-05-
|
11
|
+
date: 2018-05-27 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: bundler
|