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 CustomKnob 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 = 40;

    // 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
            transforms: Rotate { pivotX: 0 pivotY: 0 angle: bind maxAngle - (adjValue * (maxAngle-minAngle)) }
            content: [
                Circle {
                    radius: bind width*0.3
                    fill: RadialGradient {
                        centerX: 0.5
                        centerY: 0.5
                        radius: 0.5
                        stops: [
                            Stop { offset: 0.0 color: Color.rgb( 56, 119, 162) },
                            Stop { offset: 1.0 color: Color.rgb(  8,   8,   8) },
                        ]
                    }
                },
                Arc {
                    radiusX: bind width/2
                    radiusY: bind width/2
                    startAngle: 90
                    length: 186
                    fill: null
                    stroke: LinearGradient {
                        startX: 0.0
                        startY: 0.0
                        endX:   0.0
                        endY:   1.0
                        stops: [
                            Stop { offset: 0.0 color: Color.rgb(110, 110, 110, 0.2) },
                            Stop { offset: 1.0 color: Color.rgb(110, 110, 110, 1.0) },
                        ]
                    }
                    strokeWidth: 3
                    strokeDashArray: [1, 7]
                },
                Arc {
                    radiusX: bind width/2
                    radiusY: bind width/2
                    startAngle: -85
                    length: 85
                    fill: null
                    stroke: Color.rgb(110, 110, 110)
                    strokeWidth: 3
                },
                Polygon {
                    var x = bind width/2;
                    points: [x-4, 0, x+5.5, 0, x+0.5, -5.5]
                    fill: Color.rgb(110, 110, 110)
                    stroke: null
                }
            ]
            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: 200
    height: 200
    scene: Scene {
        content: [
            CustomKnob {
                minimum:    0.0
                maximum:  360.0
                value:      0.0
                minAngle:   0.0
                maxAngle: 360.0
                translateX: 40
                translateY: 40
            }
        ]
    }
}
}