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  * ControlHuePicker: HUE picker ui component.
 35  * @class
 36  * @extends cc.Control
 37  *
 38  * @property {Number}       hue         - The hue value
 39  * @property {Number}       huePercent  - The hue value in percentage
 40  * @property {cc.Sprite}    background  - <@readonly> The background sprite
 41  * @property {cc.Sprite}    slider      - <@readonly> The slider sprite
 42  * @property {cc.Point}     startPos    - <@readonly> The start position of the picker
 43  */
 44 cc.ControlHuePicker = cc.Control.extend(/** @lends cc.ControlHuePicker# */{
 45     _hue:0,
 46     _huePercentage:0,
 47     _background:null,
 48     _slider:null,
 49     _startPos:null,
 50     _className:"ControlHuePicker",
 51 
 52     //maunally put in the setters
 53     getHue:function () {
 54         return this._hue;
 55     },
 56     setHue:function (hueValue) {
 57         this._hue = hueValue;
 58         this.setHuePercentage(this._hue / 360.0);
 59     },
 60 
 61     getHuePercentage:function () {
 62         return this._huePercentage;
 63     },
 64     setHuePercentage:function (hueValueInPercent) {
 65         this._huePercentage = hueValueInPercent;
 66         this._hue = this._huePercentage * 360.0;
 67 
 68         // Clamp the position of the icon within the circle
 69         var backgroundBox = this._background.getBoundingBox();
 70 
 71         // Get the center point of the background image
 72         var centerX = this._startPos.x + backgroundBox.width * 0.5;
 73         var centerY = this._startPos.y + backgroundBox.height * 0.5;
 74 
 75         // Work out the limit to the distance of the picker when moving around the hue bar
 76         var limit = backgroundBox.width * 0.5 - 15.0;
 77 
 78         // Update angle
 79         var angleDeg = this._huePercentage * 360.0 - 180.0;
 80         var angle = cc.DEGREES_TO_RADIANS(angleDeg);
 81 
 82         // Set new position of the slider
 83         var x = centerX + limit * Math.cos(angle);
 84         var y = centerY + limit * Math.sin(angle);
 85         this._slider.setPosition(x, y);
 86     },
 87 
 88     setEnabled:function (enabled) {
 89         cc.Control.prototype.setEnabled.call(this, enabled);
 90         if (this._slider) {
 91             this._slider.setOpacity(enabled ? 255 : 128);
 92         }
 93     },
 94 
 95     getBackground:function () {
 96         return this._background;
 97     },
 98     getSlider:function () {
 99         return this._slider;
100     },
101     getStartPos:function () {
102         return this._startPos;
103     },
104 
105     initWithTargetAndPos:function (target, pos) {
106         if (cc.Control.prototype.init.call(this)) {
107             // Add background and slider sprites
108             this._background = cc.ControlUtils.addSpriteToTargetWithPosAndAnchor("huePickerBackground.png", target, pos, cc.p(0.0, 0.0));
109             this._slider = cc.ControlUtils.addSpriteToTargetWithPosAndAnchor("colourPicker.png", target, pos, cc.p(0.5, 0.5));
110 
111             this._slider.setPosition(pos.x, pos.y + this._background.getBoundingBox().height * 0.5);
112             this._startPos = pos;
113 
114             // Sets the default value
115             this._hue = 0.0;
116             this._huePercentage = 0.0;
117             return true;
118         } else
119             return false;
120     },
121 
122     _updateSliderPosition:function (location) {
123         // Clamp the position of the icon within the circle
124         var backgroundBox = this._background.getBoundingBox();
125 
126         // Get the center point of the background image
127         var centerX = this._startPos.x + backgroundBox.width * 0.5;
128         var centerY = this._startPos.y + backgroundBox.height * 0.5;
129 
130         // Work out the distance difference between the location and center
131         var dx = location.x - centerX;
132         var dy = location.y - centerY;
133 
134         // Update angle by using the direction of the location
135         var angle = Math.atan2(dy, dx);
136         var angleDeg = cc.RADIANS_TO_DEGREES(angle) + 180.0;
137 
138         // use the position / slider width to determin the percentage the dragger is at
139         this.setHue(angleDeg);
140 
141         // send CCControl callback
142         this.sendActionsForControlEvents(cc.CONTROL_EVENT_VALUECHANGED);
143     },
144     _checkSliderPosition:function (location) {
145         // compute the distance between the current location and the center
146         var distance = Math.sqrt(Math.pow(location.x + 10, 2) + Math.pow(location.y, 2));
147 
148         // check that the touch location is within the circle
149         if (80 > distance && distance > 59)        {
150             this._updateSliderPosition(location);
151             return true;
152         }
153         return false;
154     },
155 
156     onTouchBegan:function (touch, event) {
157         if (!this.isEnabled() || !this.isVisible())        {
158             return false;
159         }
160         var touchLocation = this.getTouchLocation(touch);
161 
162         // Check the touch position on the slider
163         return this._checkSliderPosition(touchLocation);
164     },
165     onTouchMoved:function (touch, event) {
166         // Get the touch location
167         var touchLocation = this.getTouchLocation(touch);
168 
169         //small modification: this allows changing of the colour, even if the touch leaves the bounding area
170         //this._updateSliderPosition(touchLocation);
171         //this.sendActionsForControlEvents(cc.CONTROL_EVENT_VALUECHANGED);
172         // Check the touch position on the slider
173         this._checkSliderPosition(touchLocation);
174     }
175 });
176 
177 window._p = cc.ControlHuePicker.prototype;
178 
179 // Extended properties
180 /** @expose */
181 _p.hue;
182 cc.defineGetterSetter(_p, "hue", _p.getHue, _p.setHue);
183 /** @expose */
184 _p.huePercent;
185 cc.defineGetterSetter(_p, "huePercent", _p.getHuePercentage, _p.setHuePercentage);
186 /** @expose */
187 _p.background;
188 cc.defineGetterSetter(_p, "background", _p.getBackground);
189 /** @expose */
190 _p.slider;
191 cc.defineGetterSetter(_p, "slider", _p.getSlider);
192 /** @expose */
193 _p.startPos;
194 cc.defineGetterSetter(_p, "startPos", _p.getStartPos);
195 
196 delete window._p;
197 
198 cc.ControlHuePicker.create = function (target, pos) {
199     var pRet = new cc.ControlHuePicker();
200     pRet.initWithTargetAndPos(target, pos);
201     return pRet;
202 };