ccb 0.0.1

data/lib/ccb/builder/templates/project/folder/frameworks/cocos2d-html5/extensions/gui/control-extension/CCControlColourPicker.js

@@ -0,0 +1,187 @@
+/**
+ *
+ * Copyright (c) 2008-2010 Ricardo Quesada
+ * Copyright (c) 2011-2012 cocos2d-x.org
+ * Copyright (c) 2013-2014 Chukong Technologies Inc.
+ *
+ * Copyright 2012 Stewart Hamilton-Arrandale.
+ * http://creativewax.co.uk
+ *
+ * Modified by Yannick Loriot.
+ * http://yannickloriot.com
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE. *
+ *
+ */
+
+/**
+ * ControlColourPicker: color picker ui component.
+ * @class
+ * @extends cc.Control
+ *
+ * @property {cc.Sprite}  background   - <@readonly> The background sprite
+ */
+cc.ControlColourPicker = cc.Control.extend(/** @lends cc.ControlColourPicker# */{
+    _hsv:null,
+    _colourPicker:null,
+    _huePicker:null,
+
+    _background:null,
+    _className:"ControlColourPicker",
+    ctor:function () {
+        cc.Control.prototype.ctor.call(this);
+        this.init();
+    },
+    hueSliderValueChanged:function (sender, controlEvent) {
+        this._hsv.h = sender.getHue();
+
+        // Update the value
+        var rgb = cc.ControlUtils.RGBfromHSV(this._hsv);
+        cc.Control.prototype.setColor.call(this,cc.color(0 | (rgb.r * 255), 0 | (rgb.g * 255), 0 | (rgb.b * 255)));
+
+        // Send CCControl callback
+        this.sendActionsForControlEvents(cc.CONTROL_EVENT_VALUECHANGED);
+        this._updateControlPicker();
+    },
+
+    colourSliderValueChanged:function (sender, controlEvent) {
+        this._hsv.s = sender.getSaturation();
+        this._hsv.v = sender.getBrightness();
+
+
+        // Update the value
+        var rgb = cc.ControlUtils.RGBfromHSV(this._hsv);
+        cc.Control.prototype.setColor.call(this,cc.color(0 | (rgb.r * 255), 0 | (rgb.g * 255), 0 | (rgb.b * 255)));
+
+        // Send CCControl callback
+        this.sendActionsForControlEvents(cc.CONTROL_EVENT_VALUECHANGED);
+    },
+
+    setColor:function (color) {
+        cc.Control.prototype.setColor.call(this,color);
+        //this._colorValue = color;
+        var rgba = new cc.RGBA();
+        rgba.r = color.r / 255.0;
+        rgba.g = color.g / 255.0;
+        rgba.b = color.b / 255.0;
+        rgba.a = 1.0;
+
+        this._hsv = cc.ControlUtils.HSVfromRGB(rgba);
+        this._updateHueAndControlPicker();
+    },
+
+    getBackground:function () {
+        return this._background;
+    },
+
+    init:function () {
+        if (cc.Control.prototype.init.call(this)) {
+            // Cache the sprites
+            cc.spriteFrameCache.addSpriteFrames(res.CCControlColourPickerSpriteSheet_plist);
+
+            // Create the sprite batch node
+            var spriteSheet = new cc.SpriteBatchNode(res.CCControlColourPickerSpriteSheet_png);
+            this.addChild(spriteSheet);
+
+          /*// MIPMAP
+            //TODO WebGL code
+            var params = [gl.LINEAR_MIPMAP_NEAREST, gl.LINEAR, gl.REPEAT, gl.CLAMP_TO_EDGE];
+            spriteSheet.getTexture().setAliasTexParameters();
+            spriteSheet.getTexture().setTexParameters(params);
+            spriteSheet.getTexture().generateMipmap();*/
+
+            // Init default color
+            this._hsv = new cc.HSV(0, 0, 0);
+
+            // Add image
+            this._background = cc.ControlUtils.addSpriteToTargetWithPosAndAnchor("menuColourPanelBackground.png", spriteSheet, cc.p(0,0), cc.p(0.5, 0.5));
+
+            var backgroundPointZero = cc.pSub(this._background.getPosition(),
+                cc.p(this._background.getContentSize().width / 2, this._background.getContentSize().height / 2));
+
+            // Setup panels . currently hard-coded...
+            var hueShift = 8;
+            var colourShift = 28;
+
+            this._huePicker = new cc.ControlHuePicker(spriteSheet, cc.p(backgroundPointZero.x + hueShift, backgroundPointZero.y + hueShift));
+            this._colourPicker = new cc.ControlSaturationBrightnessPicker(spriteSheet, cc.p(backgroundPointZero.x + colourShift, backgroundPointZero.y + colourShift));
+
+            // Setup events
+            this._huePicker.addTargetWithActionForControlEvents(this, this.hueSliderValueChanged, cc.CONTROL_EVENT_VALUECHANGED);
+            this._colourPicker.addTargetWithActionForControlEvents(this, this.colourSliderValueChanged, cc.CONTROL_EVENT_VALUECHANGED);
+
+            // Set defaults
+            this._updateHueAndControlPicker();
+            this.addChild(this._huePicker);
+            this.addChild(this._colourPicker);
+
+            // Set content size
+            this.setContentSize(this._background.getContentSize());
+            return true;
+        }
+        else
+            return false;
+    },
+
+    _updateControlPicker:function () {
+        this._huePicker.setHue(this._hsv.h);
+        this._colourPicker.updateWithHSV(this._hsv);
+    },
+
+    _updateHueAndControlPicker:function () {
+        this._huePicker.setHue(this._hsv.h);
+        this._colourPicker.updateWithHSV(this._hsv);
+        this._colourPicker.updateDraggerWithHSV(this._hsv);
+    },
+    setEnabled:function (enabled) {
+        cc.Control.prototype.setEnabled.call(this, enabled);
+        if (this._huePicker != null) {
+            this._huePicker.setEnabled(enabled);
+        }
+        if (this._colourPicker) {
+            this._colourPicker.setEnabled(enabled);
+        }
+    },
+    onTouchBegan:function () {
+        //ignore all touches, handled by children
+        return false;
+    }
+});
+
+var _p = cc.ControlColourPicker.prototype;
+
+// Extended properties
+/** @expose */
+_p.background;
+cc.defineGetterSetter(_p, "background", _p.getBackground);
+
+_p = null;
+
+/**
+ * @deprecated
+ * @returns {ControlColourPicker}
+ */
+cc.ControlColourPicker.create = function () {
+    return new cc.ControlColourPicker();
+};
+
+// compatible with NPM
+var res = res || {};
+res.CCControlColourPickerSpriteSheet_plist = res.CCControlColourPickerSpriteSheet_plist || "res/extensions/CCControlColourPickerSpriteSheet.plist";
+res.CCControlColourPickerSpriteSheet_png = res.CCControlColourPickerSpriteSheet_png || "res/extensions/CCControlColourPickerSpriteSheet.png";

data/lib/ccb/builder/templates/project/folder/frameworks/cocos2d-html5/extensions/gui/control-extension/CCControlHuePicker.js

@@ -0,0 +1,218 @@
+/**
+ *
+ * Copyright (c) 2008-2010 Ricardo Quesada
+ * Copyright (c) 2011-2012 cocos2d-x.org
+ * Copyright (c) 2013-2014 Chukong Technologies Inc.
+ *
+ * Copyright 2012 Stewart Hamilton-Arrandale.
+ * http://creativewax.co.uk
+ *
+ * Modified by Yannick Loriot.
+ * http://yannickloriot.com
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ *
+ *
+ * converted to Javascript / cocos2d-x by Angus C
+ */
+
+/**
+ * ControlHuePicker: HUE picker ui component.
+ * @class
+ * @extends cc.Control
+ *
+ * @property {Number}       hue         - The hue value
+ * @property {Number}       huePercent  - The hue value in percentage
+ * @property {cc.Sprite}    background  - <@readonly> The background sprite
+ * @property {cc.Sprite}    slider      - <@readonly> The slider sprite
+ * @property {cc.Point}     startPos    - <@readonly> The start position of the picker
+ */
+cc.ControlHuePicker = cc.Control.extend(/** @lends cc.ControlHuePicker# */{
+    _hue:0,
+    _huePercentage:0,
+    _background:null,
+    _slider:null,
+    _startPos:null,
+    _className:"ControlHuePicker",
+
+    /**
+     * The constructor of cc.ControlHuePicker
+     * @param {cc.Node} target
+     * @param {cc.Point} pos position
+     */
+    ctor:function(target, pos) {
+        cc.Control.prototype.ctor.call(this);
+        pos && this.initWithTargetAndPos(target, pos);
+    },
+
+    //maunally put in the setters
+    getHue:function () {
+        return this._hue;
+    },
+    setHue:function (hueValue) {
+        this._hue = hueValue;
+        this.setHuePercentage(this._hue / 360.0);
+    },
+
+    getHuePercentage:function () {
+        return this._huePercentage;
+    },
+    setHuePercentage:function (hueValueInPercent) {
+        this._huePercentage = hueValueInPercent;
+        this._hue = this._huePercentage * 360.0;
+
+        // Clamp the position of the icon within the circle
+        var backgroundBox = this._background.getBoundingBox();
+
+        // Get the center point of the background image
+        var centerX = this._startPos.x + backgroundBox.width * 0.5;
+        var centerY = this._startPos.y + backgroundBox.height * 0.5;
+
+        // Work out the limit to the distance of the picker when moving around the hue bar
+        var limit = backgroundBox.width * 0.5 - 15.0;
+
+        // Update angle
+        var angleDeg = this._huePercentage * 360.0 - 180.0;
+        var angle = cc.degreesToRadians(angleDeg);
+
+        // Set new position of the slider
+        var x = centerX + limit * Math.cos(angle);
+        var y = centerY + limit * Math.sin(angle);
+        this._slider.setPosition(x, y);
+    },
+
+    setEnabled:function (enabled) {
+        cc.Control.prototype.setEnabled.call(this, enabled);
+        if (this._slider) {
+            this._slider.setOpacity(enabled ? 255 : 128);
+        }
+    },
+
+    getBackground:function () {
+        return this._background;
+    },
+    getSlider:function () {
+        return this._slider;
+    },
+    getStartPos:function () {
+        return this._startPos;
+    },
+
+    initWithTargetAndPos:function (target, pos) {
+        if (cc.Control.prototype.init.call(this)) {
+            // Add background and slider sprites
+            this._background = cc.ControlUtils.addSpriteToTargetWithPosAndAnchor("huePickerBackground.png", target, pos, cc.p(0.0, 0.0));
+            this._slider = cc.ControlUtils.addSpriteToTargetWithPosAndAnchor("colourPicker.png", target, pos, cc.p(0.5, 0.5));
+
+            this._slider.setPosition(pos.x, pos.y + this._background.getBoundingBox().height * 0.5);
+            this._startPos = pos;
+
+            // Sets the default value
+            this._hue = 0.0;
+            this._huePercentage = 0.0;
+            return true;
+        } else
+            return false;
+    },
+
+    _updateSliderPosition:function (location) {
+        // Clamp the position of the icon within the circle
+        var backgroundBox = this._background.getBoundingBox();
+
+        // Get the center point of the background image
+        var centerX = this._startPos.x + backgroundBox.width * 0.5;
+        var centerY = this._startPos.y + backgroundBox.height * 0.5;
+
+        // Work out the distance difference between the location and center
+        var dx = location.x - centerX;
+        var dy = location.y - centerY;
+
+        // Update angle by using the direction of the location
+        var angle = Math.atan2(dy, dx);
+        var angleDeg = cc.radiansToDegrees(angle) + 180.0;
+
+        // use the position / slider width to determin the percentage the dragger is at
+        this.setHue(angleDeg);
+
+        // send CCControl callback
+        this.sendActionsForControlEvents(cc.CONTROL_EVENT_VALUECHANGED);
+    },
+    _checkSliderPosition:function (location) {
+        // compute the distance between the current location and the center
+        var distance = Math.sqrt(Math.pow(location.x + 10, 2) + Math.pow(location.y, 2));
+
+        // check that the touch location is within the circle
+        if (80 > distance && distance > 59)        {
+            this._updateSliderPosition(location);
+            return true;
+        }
+        return false;
+    },
+
+    onTouchBegan:function (touch, event) {
+        if (!this.isEnabled() || !this.isVisible())        {
+            return false;
+        }
+        var touchLocation = this.getTouchLocation(touch);
+
+        // Check the touch position on the slider
+        return this._checkSliderPosition(touchLocation);
+    },
+    onTouchMoved:function (touch, event) {
+        // Get the touch location
+        var touchLocation = this.getTouchLocation(touch);
+
+        //small modification: this allows changing of the colour, even if the touch leaves the bounding area
+        //this._updateSliderPosition(touchLocation);
+        //this.sendActionsForControlEvents(cc.CONTROL_EVENT_VALUECHANGED);
+        // Check the touch position on the slider
+        this._checkSliderPosition(touchLocation);
+    }
+});
+
+var _p = cc.ControlHuePicker.prototype;
+
+// Extended properties
+/** @expose */
+_p.hue;
+cc.defineGetterSetter(_p, "hue", _p.getHue, _p.setHue);
+/** @expose */
+_p.huePercent;
+cc.defineGetterSetter(_p, "huePercent", _p.getHuePercentage, _p.setHuePercentage);
+/** @expose */
+_p.background;
+cc.defineGetterSetter(_p, "background", _p.getBackground);
+/** @expose */
+_p.slider;
+cc.defineGetterSetter(_p, "slider", _p.getSlider);
+/** @expose */
+_p.startPos;
+cc.defineGetterSetter(_p, "startPos", _p.getStartPos);
+
+_p = null;
+
+/**
+ * @deprecated
+ * @param target
+ * @param pos
+ * @returns {ControlHuePicker}
+ */
+cc.ControlHuePicker.create = function (target, pos) {
+    return new cc.ControlHuePicker(target, pos);
+};

data/lib/ccb/builder/templates/project/folder/frameworks/cocos2d-html5/extensions/gui/control-extension/CCControlPotentiometer.js

@@ -0,0 +1,300 @@
+/**
+ * Copyright (c) 2008-2010 Ricardo Quesada
+ * Copyright (c) 2011-2012 cocos2d-x.org
+ * Copyright (c) 2013-2014 Chukong Technologies Inc.
+ *
+ * http://www.cocos2d-x.org
+ *
+ * Copyright 2012 Yannick Loriot. All rights reserved.
+ * http://yannickloriot.com
+ * 
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ * 
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ *
+ */
+
+/**
+ * CCControlPotentiometer: Potentiometer control for Cocos2D.
+ * @class
+ * @extends cc.Control
+ *
+ * @property {Number}           value           - The current value of the potentionmeter
+ * @property {Number}           minValue        - The minimum value of the potentionmeter
+ * @property {Number}           maxValue        - The maximum value of the potentionmeter
+ * @property {cc.ProgressTimer} progressTimer   - The progress timer of the potentionmeter
+ * @property {cc.Sprite}        thumbSprite     - The thumb sprite of the potentionmeter
+ * @property {cc.Point}         prevLocation    - The previous location of the potentionmeter
+ */
+cc.ControlPotentiometer = cc.Control.extend(/** @lends cc.ControlPotentiometer# */{
+    _thumbSprite:null,
+    _progressTimer:null,
+    _previousLocation:null,
+    /** Contains the receiver’s current value. */
+    _value:0,
+    /** Contains the minimum value of the receiver.
+     * The default value of this property is 0.0. */
+    _minimumValue:0,
+    /** Contains the maximum value of the receiver.
+     * The default value of this property is 1.0. */
+    _maximumValue:1,
+    _className:"ControlPotentiometer",
+
+    ctor:function (backgroundFile, progressFile, thumbFile) {
+        cc.Control.prototype.ctor.call(this);
+        if (thumbFile != undefined) {
+            // Prepare track for potentiometer
+            var backgroundSprite = new cc.Sprite(backgroundFile);
+
+            // Prepare thumb for potentiometer
+            var thumbSprite = new cc.Sprite(thumbFile);
+
+            // Prepare progress for potentiometer
+            var progressTimer = new cc.ProgressTimer(new cc.Sprite(progressFile));
+            this.initWithTrackSprite_ProgressTimer_ThumbSprite(backgroundSprite, progressTimer, thumbSprite);
+        }
+    },
+
+    /**
+     *
+     * @param {cc.Sprite} trackSprite
+     * @param {cc.ProgressTimer}  progressTimer
+     * @param {cc.Sprite}  thumbSprite
+     * @return {Boolean}
+     */
+    initWithTrackSprite_ProgressTimer_ThumbSprite:function (trackSprite, progressTimer, thumbSprite) {
+        if (this.init()) {
+            this.setProgressTimer(progressTimer);
+            this.setThumbSprite(thumbSprite);
+            this._thumbSprite.setPosition(progressTimer.getPosition());
+
+            this.addChild(thumbSprite, 2);
+            this.addChild(progressTimer, 1);
+            this.addChild(trackSprite);
+
+            this.setContentSize(trackSprite.getContentSize());
+
+            // Init default values
+            this._minimumValue = 0.0;
+            this._maximumValue = 1.0;
+            this.setValue(this._minimumValue);
+            return true;
+        }
+        return false;
+    },
+
+    setEnabled:function (enabled) {
+        this.setEnabled(enabled);
+        if (this._thumbSprite != NULL) {
+            this._thumbSprite.setOpacity((enabled) ? 255 : 128);
+        }
+    },
+
+    setValue:function (value) {
+        // set new value with sentinel
+        if (value < this._minimumValue) {
+            value = this._minimumValue;
+        }
+
+        if (value > this._maximumValue) {
+            value = this._maximumValue;
+        }
+
+        this._value = value;
+
+        // Update thumb and progress position for new value
+        var percent = (value - this._minimumValue) / (this._maximumValue - this._minimumValue);
+        this._progressTimer.setPercentage(percent * 100.0);
+        this._thumbSprite.setRotation(percent * 360.0);
+
+        this.sendActionsForControlEvents(cc.CONTROL_EVENT_VALUECHANGED);
+    },
+
+    getValue:function () {
+        return this._value;
+    },
+
+    setMinimumValue:function (minimumValue) {
+        this._minimumValue = minimumValue;
+
+        if (this._minimumValue >= this._maximumValue) {
+            this._maximumValue = this._minimumValue + 1.0;
+        }
+
+        this.setValue(this._maximumValue);
+    },
+
+    getMinimumValue:function () {
+        return this._minimumValue;
+    },
+
+    setMaximumValue:function (maximumValue) {
+        this._maximumValue = maximumValue;
+
+        if (this._maximumValue <= this._minimumValue) {
+            this._minimumValue = this._maximumValue - 1.0;
+        }
+
+        this.setValue(this._minimumValue);
+    },
+
+    getMaximumValue:function () {
+        return this._maximumValue;
+    },
+
+    isTouchInside:function (touch) {
+        var touchLocation = this.getTouchLocation(touch);
+
+        var distance = this.distanceBetweenPointAndPoint(this._progressTimer.getPosition(), touchLocation);
+
+        return distance < Math.min(this.getContentSize().width / 2, this.getContentSize().height / 2);
+    },
+
+    onTouchBegan:function (touch, event) {
+        if (!this.isTouchInside(touch) || !this.isEnabled() || !this.isVisible()) {
+            return false;
+        }
+
+        this._previousLocation = this.getTouchLocation(touch);
+
+        this.potentiometerBegan(this._previousLocation);
+
+        return true;
+    },
+
+    onTouchMoved:function (touch, event) {
+        var location = this.getTouchLocation(touch);
+
+        this.potentiometerMoved(location);
+    },
+
+    onTouchEnded:function (touch, event) {
+        this.potentiometerEnded(cc.p(0, 0));
+    },
+
+    /**
+     * the distance between the point1 and point2
+     * @param {cc.Point} point1
+     * @param {cc.Point}  point2
+     * @return {Number}
+     */
+    distanceBetweenPointAndPoint:function (point1, point2) {
+        var dx = point1.x - point2.x;
+        var dy = point1.y - point2.y;
+        return Math.sqrt(dx * dx + dy * dy);
+    },
+
+    /**
+     * the angle in degree between line1 and line2.
+     * @param {cc.Point}  beginLineA
+     * @param {cc.Point}  endLineA
+     * @param {cc.Point}  beginLineB
+     * @param {cc.Point}  endLineB
+     * @return {Number}
+     */
+    angleInDegreesBetweenLineFromPoint_toPoint_toLineFromPoint_toPoint:function (beginLineA, endLineA, beginLineB, endLineB) {
+        var a = endLineA.x - beginLineA.x;
+        var b = endLineA.y - beginLineA.y;
+        var c = endLineB.x - beginLineB.x;
+        var d = endLineB.y - beginLineB.y;
+
+        var atanA = Math.atan2(a, b);
+        var atanB = Math.atan2(c, d);
+
+        // convert radiants to degrees
+        return (atanA - atanB) * 180 / Math.PI;
+    },
+
+    potentiometerBegan:function (location) {
+        this.setSelected(true);
+        this.getThumbSprite().setColor(cc.color.GRAY);
+    },
+
+    potentiometerMoved:function (location) {
+        var angle = this.angleInDegreesBetweenLineFromPoint_toPoint_toLineFromPoint_toPoint(this._progressTimer.getPosition(), location, this._progressTimer.getPosition(), this._previousLocation);
+
+        // fix value, if the 12 o'clock position is between location and previousLocation
+        if (angle > 180) {
+            angle -= 360;
+        }
+        else if (angle < -180) {
+            angle += 360;
+        }
+
+        this.setValue(this._value + angle / 360.0 * (this._maximumValue - this._minimumValue));
+
+        this._previousLocation = location;
+    },
+
+    potentiometerEnded:function (location) {
+        this.getThumbSprite().setColor(cc.color.WHITE);
+        this.setSelected(false);
+    },
+    setThumbSprite:function (sprite) {
+        this._thumbSprite = sprite;
+    },
+    getThumbSprite:function () {
+        return this._thumbSprite;
+    },
+    setProgressTimer:function (sprite) {
+        this._progressTimer = sprite;
+    },
+    getProgressTimer:function () {
+        return this._progressTimer;
+    },
+    setPreviousLocation:function (point) {
+        this._previousLocation = point;
+    },
+    getPreviousLocation:function () {
+        return this._previousLocation;
+    }
+});
+
+var _p = cc.ControlPotentiometer.prototype;
+
+// Extended properties
+/** @expose */
+_p.value;
+cc.defineGetterSetter(_p, "value", _p.getValue, _p.setValue);
+/** @expose */
+_p.minValue;
+cc.defineGetterSetter(_p, "minValue", _p.getMinimumValue, _p.setMinimumValue);
+/** @expose */
+_p.maxValue;
+cc.defineGetterSetter(_p, "maxValue", _p.getMaximumValue, _p.setMaximumValue);
+/** @expose */
+_p.progressTimer;
+cc.defineGetterSetter(_p, "progressTimer", _p.getProgressTimer, _p.setProgressTimer);
+/** @expose */
+_p.thumbSprite;
+cc.defineGetterSetter(_p, "thumbSprite", _p.getThumbSprite, _p.setThumbSprite);
+/** @expose */
+_p.prevLocation;
+cc.defineGetterSetter(_p, "prevLocation", _p.getPreviousLocation, _p.setPreviousLocation);
+
+_p = null;
+
+/**
+ * @deprecated
+ * @param backgroundFile
+ * @param progressFile
+ * @param thumbFile
+ * @returns {ControlPotentiometer}
+ */
+cc.ControlPotentiometer.create = function (backgroundFile, progressFile, thumbFile) {
+    return new cc.ControlPotentiometer(backgroundFile, progressFile, thumbFile);
+};