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