aboutsummaryrefslogtreecommitdiff
path: root/js/components/colorbar.reel/colorbar.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/components/colorbar.reel/colorbar.js')
-rwxr-xr-xjs/components/colorbar.reel/colorbar.js236
1 files changed, 118 insertions, 118 deletions
diff --git a/js/components/colorbar.reel/colorbar.js b/js/components/colorbar.reel/colorbar.js
index 4f3577d9..808ada4e 100755
--- a/js/components/colorbar.reel/colorbar.js
+++ b/js/components/colorbar.reel/colorbar.js
@@ -30,152 +30,152 @@ POSSIBILITY OF SUCH DAMAGE.
30 30
31//////////////////////////////////////////////////////////////////////// 31////////////////////////////////////////////////////////////////////////
32// 32//
33var Montage = require("montage/core/core").Montage, 33var Montage = require("montage/core/core").Montage,
34 Component = require("montage/ui/component").Component; 34 Component = require("montage/ui/component").Component;
35//////////////////////////////////////////////////////////////////////// 35////////////////////////////////////////////////////////////////////////
36//Exporting as ColorBar 36//Exporting as ColorBar
37exports.ColorBar = Montage.create(Component, { 37exports.ColorBar = Montage.create(Component, {
38 //////////////////////////////////////////////////////////////////// 38 ////////////////////////////////////////////////////////////////////
39 //No reel needed since it's just a bar component 39 //No reel needed since it's just a bar component
40 hasTemplate: { 40 hasTemplate: {
41 value: true 41 value: true
42 }, 42 },
43 //////////////////////////////////////////////////////////////////// 43 ////////////////////////////////////////////////////////////////////
44 //Width of spectrum (not including b/w buttons) 44 //Width of spectrum (not including b/w buttons)
45 _colorBarSpectrumWidth: { 45 _colorBarSpectrumWidth: {
46 value: null 46 value: null
47 }, 47 },
48 //////////////////////////////////////////////////////////////////// 48 ////////////////////////////////////////////////////////////////////
49 //Width of spectrum steps (used to calculate size of B/W buttons) 49 //Width of spectrum steps (used to calculate size of B/W buttons)
50 _colorBarSpectrumWidthSteps: { 50 _colorBarSpectrumWidthSteps: {
51 value: 10 51 value: 10
52 }, 52 },
53 //////////////////////////////////////////////////////////////////// 53 ////////////////////////////////////////////////////////////////////
54 //Default value 54 //Default value
55 _value: { 55 _value: {
56 value: {h: 0, s: 0, v: 0} 56 value: {h: 0, s: 0, v: 0}
57 }, 57 },
58 //////////////////////////////////////////////////////////////////// 58 ////////////////////////////////////////////////////////////////////
59 //HSV Value selected from bar 59 //HSV Value selected from bar
60 value: { 60 value: {
61 get: function() {return this._value;}, 61 get: function() {return this._value;},
62 set: function(value) { 62 set: function(value) {
63 if (value) { 63 if (value) {
64 //Checking for limits (Max and Min HSV values) 64 //Checking for limits (Max and Min HSV values)
65 if (value.h > Math.PI*2) { 65 if (value.h > Math.PI*2) {
66 value.h = Math.PI*2; 66 value.h = Math.PI*2;
67 } else if (value.h < 0) { 67 } else if (value.h < 0) {
68 value.h = 0; 68 value.h = 0;
69 } 69 }
70 // 70 //
71 if (value.s > 1) { 71 if (value.s > 1) {
72 value.s = 1; 72 value.s = 1;
73 } else if (value.s < 0) { 73 } else if (value.s < 0) {
74 value.s = 0; 74 value.s = 0;
75 } 75 }
76 // 76 //
77 if (value.v > 1) { 77 if (value.v > 1) {
78 value.v = 1; 78 value.v = 1;
79 } else if (value.v < 0) { 79 } else if (value.v < 0) {
80 value.v = 0; 80 value.v = 0;
81 } 81 }
82 //Setting value 82 //Setting value
83 this._value = value; 83 this._value = value;
84 // 84 //
85 if (!this._isMouseDown) { 85 if (!this._isMouseDown) {
86 this._dispatchActionEvent('change', true); 86 this._dispatchActionEvent('change', true);
87 } 87 }
88 } 88 }
89 } 89 }
90 }, 90 },
91 //////////////////////////////////////////////////////////////////// 91 ////////////////////////////////////////////////////////////////////
92 // 92 //
93 prepareForDraw: { 93 prepareForDraw: {
94 value: function() { 94 value: function() {
95 //Nothing 95 //Nothing
96 } 96 }
97 }, 97 },
98 //////////////////////////////////////////////////////////////////// 98 ////////////////////////////////////////////////////////////////////
99 //Setting up and drawing canvas to object 99 //Setting up and drawing canvas to object
100 willDraw: { 100 willDraw: {
101 value: function() { 101 value: function() {
102 //Setting the width and height of the canvas to match container 102 //Setting the width and height of the canvas to match container
103 this.element.width = parseInt(window.getComputedStyle(this.element, null).width); 103 this.element.width = parseInt(window.getComputedStyle(this.element, null).width);
104 this.element.height = parseInt(window.getComputedStyle(this.element, null).height); 104 this.element.height = parseInt(window.getComputedStyle(this.element, null).height);
105 } 105 }
106 }, 106 },
107 //////////////////////////////////////////////////////////////////// 107 ////////////////////////////////////////////////////////////////////
108 // 108 //
109 draw: { 109 draw: {
110 value: function () { 110 value: function () {
111 //Local variables 111 //Local variables
112 var cb_canvas = this.element, cb_ctx, cb_grdnt, cb_slc, cb_gwidth, PI = Math.PI, i; 112 var cb_canvas = this.element, cb_ctx, cb_grdnt, cb_slc, cb_gwidth, PI = Math.PI, i;
113 //calculating width of spectrum (remainder is used for B/W buttons) 113 //calculating width of spectrum (remainder is used for B/W buttons)
114 cb_gwidth = Math.round(cb_canvas.width - cb_canvas.width/this._colorBarSpectrumWidthSteps); 114 cb_gwidth = Math.round(cb_canvas.width - cb_canvas.width/this._colorBarSpectrumWidthSteps);
115 //Context and Gradient 115 //Context and Gradient
116 cb_ctx = cb_canvas.getContext('2d'); 116 cb_ctx = cb_canvas.getContext('2d');
117 cb_grdnt = cb_ctx.createLinearGradient(0, cb_canvas.height, cb_gwidth, cb_canvas.height); 117 cb_grdnt = cb_ctx.createLinearGradient(0, cb_canvas.height, cb_gwidth, cb_canvas.height);
118 //////////////////////////////////////////////////////// 118 ////////////////////////////////////////////////////////
119 //Looping through set intervals (Creating spectrum) 119 //Looping through set intervals (Creating spectrum)
120 for (i=0; i<60; i++) { 120 for (i=0; i<60; i++) {
121 //Calculating slice number 121 //Calculating slice number
122 cb_slc = Math.round(255*i/60); 122 cb_slc = Math.round(255*i/60);
123 //Creating gradient slices (6 colors in color theory) 123 //Creating gradient slices (6 colors in color theory)
124 cb_grdnt.addColorStop(i/360, 'rgb(255, '+cb_slc+', 0)'); 124 cb_grdnt.addColorStop(i/360, 'rgb(255, '+cb_slc+', 0)');
125 cb_grdnt.addColorStop((i+60)/360, 'rgb('+(255-cb_slc)+', 255, 0)'); 125 cb_grdnt.addColorStop((i+60)/360, 'rgb('+(255-cb_slc)+', 255, 0)');
126 cb_grdnt.addColorStop((i+120)/360, 'rgb(0, 255, '+cb_slc+')'); 126 cb_grdnt.addColorStop((i+120)/360, 'rgb(0, 255, '+cb_slc+')');
127 cb_grdnt.addColorStop((i+180)/360, 'rgb(0, '+(255-cb_slc)+', 255)'); 127 cb_grdnt.addColorStop((i+180)/360, 'rgb(0, '+(255-cb_slc)+', 255)');
128 cb_grdnt.addColorStop((i+240)/360, 'rgb('+cb_slc+', 0, 255)'); 128 cb_grdnt.addColorStop((i+240)/360, 'rgb('+cb_slc+', 0, 255)');
129 cb_grdnt.addColorStop((i+300)/360, 'rgb(255, 0,'+(255-cb_slc)+')'); 129 cb_grdnt.addColorStop((i+300)/360, 'rgb(255, 0,'+(255-cb_slc)+')');
130 } 130 }
131 //Adding Color Bar to the canvas (Gradients) 131 //Adding Color Bar to the canvas (Gradients)
132 cb_ctx.fillStyle = cb_grdnt; 132 cb_ctx.fillStyle = cb_grdnt;
133 cb_ctx.fillRect(0, 0, cb_gwidth, cb_canvas.height); 133 cb_ctx.fillRect(0, 0, cb_gwidth, cb_canvas.height);
134 //////////////////////////////////////////////////////// 134 ////////////////////////////////////////////////////////
135 //White Gradient overlay to simulate L 135 //White Gradient overlay to simulate L
136 cb_grdnt = cb_ctx.createLinearGradient(0, 0, 0, cb_canvas.height); 136 cb_grdnt = cb_ctx.createLinearGradient(0, 0, 0, cb_canvas.height);
137 cb_grdnt.addColorStop(0.0, 'rgba(255, 255, 255, 1)'); 137 cb_grdnt.addColorStop(0.0, 'rgba(255, 255, 255, 1)');
138 cb_grdnt.addColorStop(0.5, 'rgba(255, 255, 255, 0)'); 138 cb_grdnt.addColorStop(0.5, 'rgba(255, 255, 255, 0)');
139 cb_ctx.fillStyle = cb_grdnt; 139 cb_ctx.fillStyle = cb_grdnt;
140 cb_ctx.fillRect(0, 0, cb_gwidth, cb_canvas.height); 140 cb_ctx.fillRect(0, 0, cb_gwidth, cb_canvas.height);
141 //Black Gradient overlay to simulate S 141 //Black Gradient overlay to simulate S
142 cb_grdnt = cb_ctx.createLinearGradient(0,0,0,cb_canvas.height); 142 cb_grdnt = cb_ctx.createLinearGradient(0,0,0,cb_canvas.height);
143 cb_grdnt.addColorStop(0.5, 'rgba(0, 0, 0, 0)'); 143 cb_grdnt.addColorStop(0.5, 'rgba(0, 0, 0, 0)');
144 cb_grdnt.addColorStop(1.0, 'rgba(0, 0, 0, 1)'); 144 cb_grdnt.addColorStop(1.0, 'rgba(0, 0, 0, 1)');
145 cb_ctx.fillStyle = cb_grdnt; 145 cb_ctx.fillStyle = cb_grdnt;
146 cb_ctx.fillRect(0, 0, cb_gwidth, cb_canvas.height); 146 cb_ctx.fillRect(0, 0, cb_gwidth, cb_canvas.height);
147 //Black "button" 147 //Black "button"
148 cb_ctx.fillStyle = "#000"; 148 cb_ctx.fillStyle = "#000";
149 cb_ctx.fillRect(cb_gwidth, cb_canvas.height/2, cb_gwidth, cb_canvas.height/2); 149 cb_ctx.fillRect(cb_gwidth, cb_canvas.height/2, cb_gwidth, cb_canvas.height/2);
150 //Black line divider 150 //Black line divider
151 cb_ctx.fillStyle = "#000"; 151 cb_ctx.fillStyle = "#000";
152 cb_ctx.fillRect(cb_gwidth-1, 0, cb_gwidth+1, cb_canvas.height); 152 cb_ctx.fillRect(cb_gwidth-1, 0, cb_gwidth+1, cb_canvas.height);
153 //White "button" 153 //White "button"
154 cb_ctx.fillStyle = "#FFF"; 154 cb_ctx.fillStyle = "#FFF";
155 cb_ctx.fillRect(cb_gwidth, 0, cb_gwidth, cb_canvas.height/2); 155 cb_ctx.fillRect(cb_gwidth, 0, cb_gwidth, cb_canvas.height/2);
156 //Saving 156 //Saving
157 cb_ctx.restore(); 157 cb_ctx.restore();
158 cb_ctx.save(); 158 cb_ctx.save();
159 //Cleaning up 159 //Cleaning up
160 cb_canvas = cb_ctx = cb_grdnt = cb_slc = cb_gwidth = PI = i = null; 160 cb_canvas = cb_ctx = cb_grdnt = cb_slc = cb_gwidth = PI = i = null;
161 } 161 }
162 }, 162 },