diff options
Diffstat (limited to 'js/components/colorwheel.reel')
-rw-r--r-- | js/components/colorwheel.reel/colorwheel.html | 50 | ||||
-rw-r--r-- | js/components/colorwheel.reel/colorwheel.js | 536 | ||||
-rw-r--r-- | js/components/colorwheel.reel/compass_app_log.txt | 3 | ||||
-rwxr-xr-x | js/components/colorwheel.reel/config.rb | 9 | ||||
-rw-r--r-- | js/components/colorwheel.reel/css/colorwheel.css | 18 | ||||
-rwxr-xr-x | js/components/colorwheel.reel/css/colorwheel.scss | 17 |
6 files changed, 633 insertions, 0 deletions
diff --git a/js/components/colorwheel.reel/colorwheel.html b/js/components/colorwheel.reel/colorwheel.html new file mode 100644 index 00000000..0374e6a3 --- /dev/null +++ b/js/components/colorwheel.reel/colorwheel.html | |||
@@ -0,0 +1,50 @@ | |||
1 | <!DOCTYPE html> | ||
2 | <!-- | ||
3 | <copyright> | ||
4 | This file contains proprietary software owned by Motorola Mobility, Inc. | ||
5 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder. | ||
6 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
7 | </copyright> | ||
8 | --> | ||
9 | <html lang="en"> | ||
10 | <head> | ||
11 | |||
12 | <meta http-equiv="content-type" content="text/html; charset=utf-8" /> | ||
13 | |||
14 | <link rel="stylesheet" type="text/css" href="css/colorwheel.css"> | ||
15 | |||
16 | <script type="text/m-objects"> | ||
17 | { | ||
18 | "$rootObject": U("m-obj://colorwheel/uuid?mId=js/components/colorwheel", { | ||
19 | "element": E("#colorwheel") | ||
20 | }) | ||
21 | } | ||
22 | </script> | ||
23 | |||
24 | <script type="text/montage-serialization"> | ||
25 | { | ||
26 | "owner": { | ||
27 | "module": "js/components/colorwheel.reel", | ||
28 | "name": "ColorWheel", | ||
29 | "properties": { | ||
30 | "element": {"#": "colorwheel"} | ||
31 | |||
32 | } | ||
33 | } | ||
34 | } | ||
35 | </script> | ||
36 | |||
37 | </head> | ||
38 | |||
39 | <body> | ||
40 | |||
41 | <div id="colorwheel" class="colorwheel"> | ||
42 | <canvas></canvas> | ||
43 | <canvas></canvas> | ||
44 | <canvas></canvas> | ||
45 | <canvas></canvas> | ||
46 | </div> | ||
47 | |||
48 | </body> | ||
49 | |||
50 | </html> \ No newline at end of file | ||
diff --git a/js/components/colorwheel.reel/colorwheel.js b/js/components/colorwheel.reel/colorwheel.js new file mode 100644 index 00000000..343422e2 --- /dev/null +++ b/js/components/colorwheel.reel/colorwheel.js | |||
@@ -0,0 +1,536 @@ | |||
1 | /* <copyright> | ||
2 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
3 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
5 | </copyright> */ | ||
6 | |||
7 | //////////////////////////////////////////////////////////////////////// | ||
8 | // | ||
9 | var Montage = require("montage/core/core").Montage, | ||
10 | Component = require("montage/ui/component").Component; | ||
11 | //////////////////////////////////////////////////////////////////////// | ||
12 | // | ||
13 | exports.ColorWheel = Montage.create(Component, { | ||
14 | //////////////////////////////////////////////////////////////////// | ||
15 | // | ||
16 | hasTemplate: { | ||
17 | enumerable: false, | ||
18 | value: true | ||
19 | }, | ||
20 | //////////////////////////////////////////////////////////////////// | ||
21 | //Value of wheel in HSV (360, 100, 100) | ||
22 | _value: { | ||
23 | enumerable: false, | ||
24 | value: {h: 0, s: 0, v: 0} | ||
25 | }, | ||
26 | //////////////////////////////////////////////////////////////////// | ||
27 | //Value of wheel in HSV (360, 100, 100) | ||
28 | value: { | ||
29 | enumerable: false, | ||
30 | get: function() { | ||
31 | return this._value; | ||
32 | }, | ||
33 | set: function(value) { | ||
34 | this._value = value; | ||
35 | if (this._wheelData) { | ||
36 | if (value && !value.wasSetByCode) { | ||
37 | this.wheelSelectorAngle(value.h/this.element._component.math.TAU*360); | ||
38 | this.drawSwatchColor(value.h/this.element._component.math.TAU*360); | ||
39 | this.drawSwatchSelector(value.s*100, value.v*100); | ||
40 | } | ||
41 | if (!this._isMouseDown) { | ||
42 | this._dispatchEvent('change', true); | ||
43 | } | ||
44 | } | ||
45 | } | ||
46 | }, | ||
47 | //////////////////////////////////////////////////////////////////// | ||
48 | //Stroke size of wheel | ||
49 | _strokeWidth: { | ||
50 | enumerable: false, | ||
51 | value: 2 | ||
52 | }, | ||
53 | //////////////////////////////////////////////////////////////////// | ||
54 | //Size must be set in digits and interpreted as pixel | ||
55 | strokeWidth: { | ||
56 | enumerable: false, | ||
57 | get: function() { | ||
58 | return this._strokeWidth; | ||
59 | }, | ||
60 | set: function(value) { | ||
61 | this._strokeWidth = value; | ||
62 | } | ||
63 | }, | ||
64 | //////////////////////////////////////////////////////////////////// | ||
65 | //Stroke color of wheel | ||
66 | _strokeColor: { | ||
67 | enumerable: false, | ||
68 | value: 'rgb(255, 255, 255)' | ||
69 | }, | ||
70 | //////////////////////////////////////////////////////////////////// | ||
71 | //Stroke only apply to wheel rim | ||
72 | strokeColor: { | ||
73 | enumerable: false, | ||
74 | get: function() { | ||
75 | return this._strokeColor; | ||
76 | }, | ||
77 | set: function(value) { | ||
78 | this._strokeColor = value; | ||
79 | } | ||
80 | }, | ||
81 | //////////////////////////////////////////////////////////////////// | ||
82 | //Width of the rim | ||
83 | _rimWidth: { | ||
84 | enumerable: false, | ||
85 | value: 2 | ||
86 | }, | ||
87 | //////////////////////////////////////////////////////////////////// | ||
88 | //Width must be set using digits interpreted as pixel | ||
89 | rimWidth: { | ||
90 | enumerable: false, | ||
91 | get: function() { | ||
92 | return this._rimWidth; | ||
93 | }, | ||
94 | set: function(value) { | ||
95 | this._rimWidth = value; | ||
96 | } | ||
97 | }, | ||
98 | //////////////////////////////////////////////////////////////////// | ||
99 | // | ||
100 | prepareForDraw: { | ||
101 | enumerable: false, | ||
102 | value: function() { | ||
103 | // | ||
104 | this.element._component = {wheel: {}, swatch: {}, wheel_select: {}, swatch_select: {}, math: {}}; | ||
105 | // | ||
106 | this.element._component.math.PI = Math.PI, | ||
107 | this.element._component.math.TAU = Math.PI*2, | ||
108 | this.element._component.math.RADIANS = Math.PI/180; | ||
109 | } | ||
110 | }, | ||
111 | //////////////////////////////////////////////////////////////////// | ||
112 | // | ||
113 | willDraw: { | ||
114 | enumerable: false, | ||
115 | value: function() { | ||
116 | // | ||
117 | this.element.style.opacity = 0; | ||
118 | // | ||
119 | var cnvs = this.element.getElementsByTagName('canvas'); | ||
120 | // | ||
121 | this.element._component.wheel.canvas = cnvs[0]; | ||
122 | this.element._component.swatch.canvas = cnvs[1]; | ||
123 | this.element._component.wheel_select.canvas = cnvs[3]; | ||
124 | this.element._component.swatch_select.canvas = cnvs[2]; | ||
125 | // | ||
126 | this.element._component.wheel.context = this.element._component.wheel.canvas.getContext("2d"); | ||
127 | this.element._component.swatch.context = this.element._component.swatch.canvas.getContext("2d"); | ||
128 | this.element._component.wheel_select.context = this.element._component.wheel_select.canvas.getContext("2d"); | ||
129 | this.element._component.swatch_select.context = this.element._component.swatch_select.canvas.getContext("2d"); | ||
130 | } | ||
131 | }, | ||
132 | //////////////////////////////////////////////////////////////////// | ||
133 | // | ||
134 | draw: { | ||
135 | enumerable: false, | ||
136 | value: function() { | ||
137 | // | ||
138 | var slice, i, whlctx = this.element._component.wheel.context, math = this.element._component.math, | ||
139 | whlcvs = this.element._component.wheel.canvas, swhcvs = this.element._component.swatch.canvas, | ||
140 | wslcvs = this.element._component.wheel_select.canvas, swscvs = this.element._component.swatch_select.canvas; | ||
141 | //Determing radius by smallest factor of width or height | ||
142 | if (this.element.offsetWidth > this.element.offsetHeight) { | ||
143 | math.diameter = this.element.offsetWidth; | ||
144 | } else { | ||
145 | math.diameter = this.element.offsetHeight; | ||
146 | } | ||
147 | //Setting the radius from diameter | ||
148 | math.radius = math.diameter/2; | ||
149 | //Inner radius of wheel | ||
150 | math.innerRadius = math.radius - this.rimWidth; | ||
151 | //Setting the widths and heights to match the container's | ||
152 | whlcvs.width = whlcvs.height = wslcvs.width = wslcvs.height = swscvs.width = swscvs.height = math.diameter; | ||
153 | // | ||
154 | math.swatchLength = Math.floor((math.radius - this.rimWidth - this.strokeWidth*4) * Math.sin(45 * math.RADIANS) * 2); | ||
155 | math.swatchPosition = Math.round(math.radius - (math.swatchLength/2))+this.strokeWidth* Math.sin(45 * math.RADIANS); | ||
156 | // | ||
157 | //swhcvs.width = swhcvs.height = math.swatchLength; //TODO: Figure out why this breaks on WINDOWS ONLY | ||
158 | swhcvs.style.top = swhcvs.style.left = math.swatchPosition+'px'; | ||
159 | //Clearing wheel for redraw | ||
160 | whlctx.clearRect(0, 0, math.diameter, math.diameter); | ||
161 | //////////////////////////////////////////////////////////////// | ||
162 | //Drawing color wheel circle | ||
163 | whlctx.save(); | ||