1 /**
  2  *
  3  * Copyright (c) 2010-2012 cocos2d-x.org
  4  *
  5  * Copyright 2012 Stewart Hamilton-Arrandale.
  6  * http://creativewax.co.uk
  7  *
  8  * Modified by Yannick Loriot.
  9  * http://yannickloriot.com
 10  *
 11  * Permission is hereby granted, free of charge, to any person obtaining a copy
 12  * of this software and associated documentation files (the "Software"), to deal
 13  * in the Software without restriction, including without limitation the rights
 14  * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 15  * copies of the Software, and to permit persons to whom the Software is
 16  * furnished to do so, subject to the following conditions:
 17  *
 18  * The above copyright notice and this permission notice shall be included in
 19  * all copies or substantial portions of the Software.
 20  *
 21  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 22  * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 23  * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 24  * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 25  * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 26  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 27  * THE SOFTWARE.
 28  *
 29  *
 30  * converted to Javascript / cocos2d-x by Angus C
 31  */
 32 
 33 /**
 34  * ControlSaturationBrightnessPicker: Saturation brightness picker ui component.
 35  * @class
 36  * @extends cc.Control
 37  *
 38  * @property {Number}       saturation  - <@readonly> Saturation value of the picker
 39  * @property {Number}       brightness  - <@readonly> Brightness value of the picker
 40  * @property {cc.Sprite}    background  - <@readonly> The background sprite
 41  * @property {cc.Sprite}    overlay     - <@readonly> The overlay sprite
 42  * @property {cc.Sprite}    shadow      - <@readonly> The shadow sprite
 43  * @property {cc.Sprite}    slider      - <@readonly> The slider sprite
 44  * @property {cc.Point}     startPos    - <@readonly> The start position of the picker
 45  */
 46 cc.ControlSaturationBrightnessPicker = cc.Control.extend(/** @lends cc.ControlSaturationBrightnessPicker# */{
 47     _saturation:0,
 48     _brightness:0,
 49 
 50     _background:null,
 51     _overlay:null,
 52     _shadow:null,
 53     _slider:null,
 54     _startPos:null,
 55 
 56     _boxPos:0,
 57     _boxSize:0,
 58     _className:"ControlSaturationBrightnessPicker",
 59 
 60     getSaturation:function () {
 61         return this._saturation;
 62     },
 63     getBrightness:function () {
 64         return this._brightness;
 65     },
 66 
 67     //not sure if these need to be there actually. I suppose someone might want to access the sprite?
 68     getBackground:function () {
 69         return this._background;
 70     },
 71     getOverlay:function () {
 72         return this._brightness;
 73     },
 74     getShadow:function () {
 75         return this._shadow;
 76     },
 77     getSlider:function () {
 78         return this._slider;
 79     },
 80     getStartPos:function () {
 81         return this._startPos;
 82     },
 83 
 84     initWithTargetAndPos:function (target, pos) {
 85         if (cc.Control.prototype.init.call(this)) {
 86             // Add background and slider sprites
 87             this._background = cc.ControlUtils.addSpriteToTargetWithPosAndAnchor("colourPickerBackground.png", target, pos, cc.p(0.0, 0.0));
 88             this._overlay = cc.ControlUtils.addSpriteToTargetWithPosAndAnchor("colourPickerOverlay.png", target, pos, cc.p(0.0, 0.0));
 89             this._shadow = cc.ControlUtils.addSpriteToTargetWithPosAndAnchor("colourPickerShadow.png", target, pos, cc.p(0.0, 0.0));
 90             this._slider = cc.ControlUtils.addSpriteToTargetWithPosAndAnchor("colourPicker.png", target, pos, cc.p(0.5, 0.5));
 91 
 92             this._startPos = pos; // starting position of the colour picker
 93             this._boxPos = 35;    // starting position of the virtual box area for picking a colour
 94             this._boxSize = this._background.getContentSize().width / 2;    // the size (width and height) of the virtual box for picking a colour from
 95             return true;
 96         } else
 97             return false;
 98     },
 99 
100     setEnabled:function (enabled) {
101         cc.Control.prototype.setEnabled.call(this, enabled);
102         if (this._slider) {
103             this._slider.setOpacity(enabled ? 255 : 128);
104         }
105     },
106 
107     updateWithHSV:function (hsv) {
108         var hsvTemp = new cc.HSV();
109         hsvTemp.s = 1;
110         hsvTemp.h = hsv.h;
111         hsvTemp.v = 1;
112 
113         var rgb = cc.ControlUtils.RGBfromHSV(hsvTemp);
114         this._background.setColor(cc.color(0 | (rgb.r * 255), 0 | (rgb.g * 255), 0 | (rgb.b * 255)));
115     },
116     updateDraggerWithHSV:function (hsv) {
117         // Set the position of the slider to the correct saturation and brightness
118         var pos = cc.p(this._startPos.x + this._boxPos + (this._boxSize * (1 - hsv.s)),
119             this._startPos.y + this._boxPos + (this._boxSize * hsv.v));
120 
121         // update
122         this._updateSliderPosition(pos);
123     },
124 
125     _updateSliderPosition:function (sliderPosition) {
126         // Clamp the position of the icon within the circle
127 
128         // Get the center point of the bkgd image
129         var centerX = this._startPos.x + this._background.getBoundingBox().width * 0.5;
130         var centerY = this._startPos.y + this._background.getBoundingBox().height * 0.5;
131 
132         // Work out the distance difference between the location and center
133         var dx = sliderPosition.x - centerX;
134         var dy = sliderPosition.y - centerY;
135         var dist = Math.sqrt(dx * dx + dy * dy);
136 
137         // Update angle by using the direction of the location
138         var angle = Math.atan2(dy, dx);
139 
140         // Set the limit to the slider movement within the colour picker
141         var limit = this._background.getBoundingBox().width * 0.5;
142 
143         // Check distance doesn't exceed the bounds of the circle
144         if (dist > limit) {
145             sliderPosition.x = centerX + limit * Math.cos(angle);
146             sliderPosition.y = centerY + limit * Math.sin(angle);
147         }
148 
149         // Set the position of the dragger
150         this._slider.setPosition(sliderPosition);
151 
152 
153         // Clamp the position within the virtual box for colour selection
154         if (sliderPosition.x < this._startPos.x + this._boxPos)
155             sliderPosition.x = this._startPos.x + this._boxPos;
156         else if (sliderPosition.x > this._startPos.x + this._boxPos + this._boxSize - 1)
157             sliderPosition.x = this._startPos.x + this._boxPos + this._boxSize - 1;
158         if (sliderPosition.y < this._startPos.y + this._boxPos)
159             sliderPosition.y = this._startPos.y + this._boxPos;
160         else if (sliderPosition.y > this._startPos.y + this._boxPos + this._boxSize)
161             sliderPosition.y = this._startPos.y + this._boxPos + this._boxSize;
162 
163         // Use the position / slider width to determin the percentage the dragger is at
164         this._saturation = 1.0 - Math.abs((this._startPos.x + this._boxPos - sliderPosition.x) / this._boxSize);
165         this._brightness = Math.abs((this._startPos.y + this._boxPos - sliderPosition.y) / this._boxSize);
166     },
167 
168     _checkSliderPosition:function (location) {
169         // Clamp the position of the icon within the circle
170         // get the center point of the bkgd image
171         var centerX = this._startPos.x + this._background.getBoundingBox().width * 0.5;
172         var centerY = this._startPos.y + this._background.getBoundingBox().height * 0.5;
173 
174         // work out the distance difference between the location and center
175         var dx = location.x - centerX;
176         var dy = location.y - centerY;
177         var dist = Math.sqrt(dx * dx + dy * dy);
178 
179         // check that the touch location is within the bounding rectangle before sending updates
180         if (dist <= this._background.getBoundingBox().width * 0.5) {
181             this._updateSliderPosition(location);
182             this.sendActionsForControlEvents(cc.CONTROL_EVENT_VALUECHANGED);
183             return true;
184         }
185         return false;
186     },
187 
188     onTouchBegan:function (touch, event) {
189         if (!this.isEnabled() || !this.isVisible())        {
190             return false;
191         }
192         // Get the touch location
193         var touchLocation = this.getTouchLocation(touch);
194 
195         // Check the touch position on the slider
196         return this._checkSliderPosition(touchLocation);
197     },
198 
199     onTouchMoved:function (touch, event) {
200         // Get the touch location
201         var touchLocation = this.getTouchLocation(touch);
202 
203         //small modification: this allows changing of the colour, even if the touch leaves the bounding area
204         //this._updateSliderPosition(touchLocation);
205         //this.sendActionsForControlEvents(cc.CONTROL_EVENT_VALUECHANGED);
206         // Check the touch position on the slider
207         this._checkSliderPosition(touchLocation);
208     }
209 });
210 
211 window._p = cc.ControlSaturationBrightnessPicker.prototype;
212 
213 // Extended properties
214 /** @expose */
215 _p.saturation;
216 cc.defineGetterSetter(_p, "saturation", _p.getSaturation);
217 /** @expose */
218 _p.brightness;
219 cc.defineGetterSetter(_p, "brightness", _p.getBrightness);
220 /** @expose */
221 _p.background;
222 cc.defineGetterSetter(_p, "background", _p.getBackground);
223 /** @expose */
224 _p.overlay;
225 cc.defineGetterSetter(_p, "overlay", _p.getOverlay);
226 /** @expose */
227 _p.shadow;
228 cc.defineGetterSetter(_p, "shadow", _p.getShadow);
229 /** @expose */
230 _p.slider;
231 cc.defineGetterSetter(_p, "slider", _p.getSlider);
232 /** @expose */
233 _p.startPos;
234 cc.defineGetterSetter(_p, "startPos", _p.getStartPos);
235 
236 delete window._p;
237 
238 cc.ControlSaturationBrightnessPicker.create = function (target, pos) {
239     var pRet = new cc.ControlSaturationBrightnessPicker();
240     pRet.initWithTargetAndPos(target, pos);
241     return pRet;
242 };