aboutsummaryrefslogtreecommitdiff
path: root/js/components/colorbar.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/components/colorbar.reel')
-rwxr-xr-xjs/components/colorbar.reel/colorbar.html48
-rwxr-xr-xjs/components/colorbar.reel/colorbar.js236
-rwxr-xr-xjs/components/colorbar.reel/css/colorbar.scss2
3 files changed, 143 insertions, 143 deletions
diff --git a/js/components/colorbar.reel/colorbar.html b/js/components/colorbar.reel/colorbar.html
index e61cc2f2..e353d860 100755
--- a/js/components/colorbar.reel/colorbar.html
+++ b/js/components/colorbar.reel/colorbar.html
@@ -1,4 +1,4 @@
1<!DOCTYPE html> 1<!doctype html>
2<!-- 2<!--
3<copyright> 3<copyright>
4Copyright (c) 2012, Motorola Mobility, Inc 4Copyright (c) 2012, Motorola Mobility, Inc
@@ -31,28 +31,28 @@ POSSIBILITY OF SUCH DAMAGE.
31</copyright> 31</copyright>
32--> 32-->
33<html> 33<html>
34 <head> 34 <head>
35 35
36 <link rel="stylesheet" type="text/css" href="css/colorbar.css"> 36 <link rel="stylesheet" type="text/css" href="css/colorbar.css">
37 37
38 <script type="text/montage-serialization"> 38 <script type="text/montage-serialization">
39 { 39 {
40 "owner": { 40 "owner": {
41 "prototype": "js/components/colorbar.reel[ColorBar]", 41 "prototype": "js/components/colorbar.reel[ColorBar]",
42 "properties": { 42 "properties": {
43 "element": {"#": "colorbar"} 43 "element": {"#": "colorbar"}
44 44
45 } 45 }
46 } 46 }
47 } 47 }
48 </script> 48 </script>
49 49
50 </head> 50 </head>
51 51
52 <body> 52 <body>
53 53
54 <canvas data-montage-id="colorbar" class="colorbar"></canvas> 54 <canvas data-montage-id="colorbar" class="colorbar"></canvas>
55 55
56 </body> 56 </body>
57 57
58</html> 58</html>
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)