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 };