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 cc.ControlSaturationBrightnessPicker = cc.Control.extend({ 34 _saturation:0, 35 _brightness:0, 36 37 _background:null, 38 _overlay:null, 39 _shadow:null, 40 _slider:null, 41 _startPos:null, 42 43 _boxPos:0, 44 _boxSize:0, 45 46 getSaturation:function () { 47 return this._saturation; 48 }, 49 getBrightness:function () { 50 return this._brightness; 51 }, 52 53 //not sure if these need to be there actually. I suppose someone might want to access the sprite? 54 getBackground:function () { 55 return this._background; 56 }, 57 getOverlay:function () { 58 return this._brightness; 59 }, 60 getShadow:function () { 61 return this._shadow; 62 }, 63 getSlider:function () { 64 return this._slider; 65 }, 66 getStartPos:function () { 67 return this._startPos; 68 }, 69 70 initWithTargetAndPos:function (target, pos) { 71 if (cc.Control.prototype.init.call(this)) { 72 this.setTouchEnabled(true); 73 // Add background and slider sprites 74 this._background = cc.ControlUtils.addSpriteToTargetWithPosAndAnchor("colourPickerBackground.png", target, pos, cc.p(0.0, 0.0)); 75 this._overlay = cc.ControlUtils.addSpriteToTargetWithPosAndAnchor("colourPickerOverlay.png", target, pos, cc.p(0.0, 0.0)); 76 this._shadow = cc.ControlUtils.addSpriteToTargetWithPosAndAnchor("colourPickerShadow.png", target, pos, cc.p(0.0, 0.0)); 77 this._slider = cc.ControlUtils.addSpriteToTargetWithPosAndAnchor("colourPicker.png", target, pos, cc.p(0.5, 0.5)); 78 79 this._startPos = pos; // starting position of the colour picker 80 this._boxPos = 35; // starting position of the virtual box area for picking a colour 81 this._boxSize = this._background.getContentSize().width / 2; // the size (width and height) of the virtual box for picking a colour from 82 return true; 83 } else 84 return false; 85 }, 86 87 setEnabled:function (enabled) { 88 cc.Control.prototype.setEnabled.call(this, enabled); 89 if (this._slider) { 90 this._slider.setOpacity(enabled ? 255 : 128); 91 } 92 }, 93 94 updateWithHSV:function (hsv) { 95 var hsvTemp = new cc.HSV(); 96 hsvTemp.s = 1; 97 hsvTemp.h = hsv.h; 98 hsvTemp.v = 1; 99 100 var rgb = cc.ControlUtils.RGBfromHSV(hsvTemp); 101 this._background.setColor(cc.c3(0 | (rgb.r * 255), 0 | (rgb.g * 255), 0 | (rgb.b * 255))); 102 }, 103 updateDraggerWithHSV:function (hsv) { 104 // Set the position of the slider to the correct saturation and brightness 105 var pos = cc.p(this._startPos.x + this._boxPos + (this._boxSize * (1 - hsv.s)), 106 this._startPos.y + this._boxPos + (this._boxSize * hsv.v)); 107 108 // update 109 this._updateSliderPosition(pos); 110 }, 111 112 _updateSliderPosition:function (sliderPosition) { 113 // Clamp the position of the icon within the circle 114 115 // Get the center point of the bkgd image 116 var centerX = this._startPos.x + this._background.getBoundingBox().width * 0.5; 117 var centerY = this._startPos.y + this._background.getBoundingBox().height * 0.5; 118 119 // Work out the distance difference between the location and center 120 var dx = sliderPosition.x - centerX; 121 var dy = sliderPosition.y - centerY; 122 var dist = Math.sqrt(dx * dx + dy * dy); 123 124 // Update angle by using the direction of the location 125 var angle = Math.atan2(dy, dx); 126 127 // Set the limit to the slider movement within the colour picker 128 var limit = this._background.getBoundingBox().width * 0.5; 129 130 // Check distance doesn't exceed the bounds of the circle 131 if (dist > limit) { 132 sliderPosition.x = centerX + limit * Math.cos(angle); 133 sliderPosition.y = centerY + limit * Math.sin(angle); 134 } 135 136 // Set the position of the dragger 137 this._slider.setPosition(sliderPosition); 138 139 140 // Clamp the position within the virtual box for colour selection 141 if (sliderPosition.x < this._startPos.x + this._boxPos) 142 sliderPosition.x = this._startPos.x + this._boxPos; 143 else if (sliderPosition.x > this._startPos.x + this._boxPos + this._boxSize - 1) 144 sliderPosition.x = this._startPos.x + this._boxPos + this._boxSize - 1; 145 if (sliderPosition.y < this._startPos.y + this._boxPos) 146 sliderPosition.y = this._startPos.y + this._boxPos; 147 else if (sliderPosition.y > this._startPos.y + this._boxPos + this._boxSize) 148 sliderPosition.y = this._startPos.y + this._boxPos + this._boxSize; 149 150 // Use the position / slider width to determin the percentage the dragger is at 151 this._saturation = 1.0 - Math.abs((this._startPos.x + this._boxPos - sliderPosition.x) / this._boxSize); 152 this._brightness = Math.abs((this._startPos.y + this._boxPos - sliderPosition.y) / this._boxSize); 153 }, 154 155 _checkSliderPosition:function (location) { 156 // Clamp the position of the icon within the circle 157 // get the center point of the bkgd image 158 var centerX = this._startPos.x + this._background.getBoundingBox().width * 0.5; 159 var centerY = this._startPos.y + this._background.getBoundingBox().height * 0.5; 160 161 // work out the distance difference between the location and center 162 var dx = location.x - centerX; 163 var dy = location.y - centerY; 164 var dist = Math.sqrt(dx * dx + dy * dy); 165 166 // check that the touch location is within the bounding rectangle before sending updates 167 if (dist <= this._background.getBoundingBox().width * 0.5) { 168 this._updateSliderPosition(location); 169 this.sendActionsForControlEvents(cc.CONTROL_EVENT_VALUECHANGED); 170 return true; 171 } 172 return false; 173 }, 174 175 onTouchBegan:function (touch, event) { 176 if (!this.isEnabled() || !this.isVisible()) { 177 return false; 178 } 179 // Get the touch location 180 var touchLocation = this.getTouchLocation(touch); 181 182 // Check the touch position on the slider 183 return this._checkSliderPosition(touchLocation); 184 }, 185 186 onTouchMoved:function (touch, event) { 187 // Get the touch location 188 var touchLocation = this.getTouchLocation(touch); 189 190 //small modification: this allows changing of the colour, even if the touch leaves the bounding area 191 //this._updateSliderPosition(touchLocation); 192 //this.sendActionsForControlEvents(cc.CONTROL_EVENT_VALUECHANGED); 193 // Check the touch position on the slider 194 this._checkSliderPosition(touchLocation); 195 } 196 }); 197 198 cc.ControlSaturationBrightnessPicker.create = function (target, pos) { 199 var pRet = new cc.ControlSaturationBrightnessPicker(); 200 pRet.initWithTargetAndPos(target, pos); 201 return pRet; 202 };