FX

package effectsplayground.control;

import javafx.scene.*;
import javafx.scene.paint.*;
import javafx.scene.shape.*;
import javafx.scene.transform.*;
import javafx.stage.*;

/**
 * @author campbell
 */

public class Knob extends CustomNode {

    public var value = 0.0;
    public var minimum = 0.0;
    public var maximum = 1.0;

    public var minAngle = -180.0;
    public var maxAngle =    0.0;

    public var width = 25;
    
    // the value adjusted to the range [0,1]
    var adjValue = bind (value - minimum) / (maximum - minimum);
    var origValue = 0.0;

    override protected function create() : Node {
        Group {
            cursor: Cursor.HAND
            content: [
                Circle {
                    radius: bind width/2
                    fill: LinearGradient {
                        startX: 0
                        startY: 0
                        endX: 0
                        endY: 1
                        stops: [
                            Stop { offset: 0.0 color: Color.rgb(172, 172, 172) },
                            Stop { offset: 0.5 color: Color.rgb(115, 115, 115) },
                            Stop { offset: 1.0 color: Color.rgb(130, 130, 130) },
                        ]
                    }
                    stroke: LinearGradient {
                        startX: 0
                        startY: 0
                        endX: 0
                        endY: 1
                        stops: [
                            Stop { offset: 0.0 color: Color.rgb( 69,  69,  69) },
                            Stop { offset: 1.0 color: Color.rgb(224, 224, 224) },
                        ]
                    }
                    strokeWidth: 2
                },
                Circle {
                    centerX: 0.5
                    centerY: 0.5
                    radius: 5
                },
                Line {
                    transforms: Rotate { angle: bind maxAngle - (adjValue * (maxAngle-minAngle)) }
                    endX: bind width/2 + 2
                    endY: 0
                    stroke: Color.WHITE
                    strokeWidth: 2.5
                },
                Line {
                    transforms: Rotate { angle: bind maxAngle - (adjValue * (maxAngle-minAngle)) }
                    endX: bind width/2 + 2
                    endY: 0
                    stroke: LinearGradient {
                        startX: 0
                        startY: 0
                        endX: 0
                        endY: 1
                        stops: [
                            Stop { offset: 0.0 color: Color.rgb( 40,  40,  40) },
                            Stop { offset: 1.0 color: Color.rgb(102, 102, 102) },
                        ]
                    }
                }
            ]
            onMousePressed: function(e) {
                origValue = adjValue;
            }
            onMouseDragged: function(e) {
                var v = origValue + (e.dragX / width);
                if (v < 0) {
                    v = 0;
                } else if (v > 1) {
                    v = 1;
                }
                value = minimum + (v * (maximum-minimum));
            }
        }
    }
}

function run() {
Stage {
    width: 300
    height: 100
    scene: Scene {
        content: [
            Knob {
                translateX: 20
                translateY: 20
                minimum: 0
                maximum: 180
                value: 45
            }
        ]
    }
}
}