[javafxset~master:35] RadialColorPicker

[Nailman@kenai.com]

Project:    javafxset
Repository: master
Revision:   35
Author:     Nailman
Date:       2010-04-14 10:46:34 UTC
Link:       

Log Message:
------------
RadialColorPicker


Revisions:
----------
35


Modified Paths:
---------------
JavaFXSet/src/javafxset/paint/Configuration.fx
JavaFXSet
JavaFXSet/nbproject/private/private.properties


Added Paths:
------------
JavaFXSet/src/javafxset/paint/RadialColorPicker.fx
JavaFXSet/src/javafxset/paint/FXRadialColorPicker.fx


Diffs:
------
Index: JavaFXSet/nbproject/private/private.properties
===================================================================
--- JavaFXSet/nbproject/private/private.properties      (revision 34)
+++ JavaFXSet/nbproject/private/private.properties      (revision 35)
@@ -1,2 +1,2 @@
 jaxws.endorsed.dir=C:\\Program Files\\NetBeans 
6.7.1\\java2\\modules\\ext\\jaxws21\\api
-user.properties.file=C:\\Documents and 
Settings\\andromeda\\.netbeans\\6.7\\build.properties
+user.properties.file=C:\\Documents and 
Settings\\Nail\\.netbeans\\6.8\\build.properties
Index: JavaFXSet/src/javafxset/paint/Configuration.fx
===================================================================
--- JavaFXSet/src/javafxset/paint/Configuration.fx      (revision 34)
+++ JavaFXSet/src/javafxset/paint/Configuration.fx      (revision 35)
@@ -22,6 +22,10 @@
             name: "Picker"
             className: "javafxset.paint.FXColorPicker"
         },
+        Sample{
+            name: "Radial Picker"
+            className: "javafxset.paint.FXRadialColorPicker"
+        },
     ]
 }
 
Index: JavaFXSet/src/javafxset/paint/FXRadialColorPicker.fx
===================================================================
--- JavaFXSet/src/javafxset/paint/FXRadialColorPicker.fx        (revision 0)
+++ JavaFXSet/src/javafxset/paint/FXRadialColorPicker.fx        (revision 35)
@@ -0,0 +1,61 @@
+package javafxset.paint;
+
+import javafx.stage.Stage;
+import javafx.scene.Scene;
+import javafx.scene.paint.Color;
+import javafx.scene.shape.Polygon;
+import javafx.util.Math;
+import javafx.scene.shape.Line;
+import javafx.scene.shape.StrokeLineCap;
+
+var picker: RadialColorPicker;
+
+Stage {
+    title: "RadialColorPicker"
+    scene: Scene {
+        width: 600
+        height: 600
+        content: [
+            picker = RadialColorPicker {
+                layoutX: 130.0,
+                layoutY: 150.0,
+                r: 100.0
+            }
+            Polygon {
+                points : [
+                    550 + 80.0*Math.cos(Math.toRadians(90.0)), 150 + 
80.0*Math.sin(Math.toRadians(90.0)),
+                    550 + 80.0*Math.cos(Math.toRadians(210.0)), 150 + 
80.0*Math.sin(Math.toRadians(210.0)),
+                    550 + 80.0*Math.cos(Math.toRadians(330.0)), 150 + 
80.0*Math.sin(Math.toRadians(330.0)),
+                ]
+                fill: bind Color.color(picker.red, picker.green, picker.blue)
+            }
+            Line {
+                startX: 550 + 85.0*Math.cos(Math.toRadians(90.0))
+                startY: 150 + 85.0*Math.sin(Math.toRadians(90.0))
+                endX: 550 + 85.0*Math.cos(Math.toRadians(210.0))
+                endY: 150 + 85.0*Math.sin(Math.toRadians(210.0))
+                strokeWidth: 10.0
+                stroke: bind Color.color(picker.red, 0.0, 0.0)
+                strokeLineCap: StrokeLineCap.ROUND
+            }
+            Line {
+                startX: 550 + 85.0*Math.cos(Math.toRadians(210.0))
+                startY: 150 + 85.0*Math.sin(Math.toRadians(210.0))
+                endX: 550 + 85.0*Math.cos(Math.toRadians(330.0))
+                endY: 150 + 85.0*Math.sin(Math.toRadians(330.0))
+                strokeWidth: 10.0
+                stroke: bind Color.color(0.0, picker.green, 0.0)
+                strokeLineCap: StrokeLineCap.ROUND
+            }
+            Line {
+                startX: 550 + 85.0*Math.cos(Math.toRadians(330.0))
+                startY: 150 + 85.0*Math.sin(Math.toRadians(330.0))
+                endX: 550 + 85.0*Math.cos(Math.toRadians(90.0))
+                endY: 150 + 85.0*Math.sin(Math.toRadians(90.0))
+                strokeWidth: 10.0
+                stroke: bind Color.color(0.0, 0.0, picker.blue)
+                strokeLineCap: StrokeLineCap.ROUND
+            }
+        ]
+    }
+}
Index: JavaFXSet/src/javafxset/paint/RadialColorPicker.fx
===================================================================
--- JavaFXSet/src/javafxset/paint/RadialColorPicker.fx  (revision 0)
+++ JavaFXSet/src/javafxset/paint/RadialColorPicker.fx  (revision 35)
@@ -0,0 +1,463 @@
+package javafxset.paint;
+
+import javafx.scene.CustomNode;
+import javafx.scene.Group;
+import javafx.scene.Node;
+import javafx.scene.shape.Polygon;
+import javafx.util.Math;
+import javafx.scene.paint.Color;
+import javafx.scene.input.MouseEvent;
+import javafx.scene.transform.Rotate;
+import javafx.scene.shape.Line;
+import javafx.scene.paint.Stop;
+import javafx.scene.shape.Circle;
+import javafx.scene.paint.RadialGradient;
+import javafx.scene.Cursor;
+import javafx.scene.shape.Rectangle;
+import javafx.scene.transform.Translate;
+import javafx.scene.paint.LinearGradient;
+import javafx.scene.control.TextBox;
+
+def N: Integer = 10;
+
+public class RadialColorPicker extends CustomNode {
+
+    public-init var r: Number = 128.0;
+    public-init var dr: Number = 16.0;
+    public-init var discretus: Integer = 360;
+    public-read var red: Number;
+    public-read var green: Number;
+    public-read var blue: Number;
+    var color: Color;
+    def pf: Number = 360.0 / discretus;
+    def DF: Number = pf / N;
+    var alpha: Number = 0.0;
+    var circle: Group;
+    var circleX: Number = 0.0;
+    var circleY: Number = 0.5 * r;
+    var oldX: Number;
+    var oldY: Number;
+    var R: Number = 1.0;
+    var G: Number = 0.0;
+    var B: Number = 0.0;
+    var redTon: TonIndicator;
+    var greenTon: TonIndicator;
+    var blueTon: TonIndicator;
+
+    public override function create(): Node {
+        var piece: Polygon[];
+        var i: Integer = 0;
+        var x: Number = dr + r;
+        var y: Number = dr + r;
+        x = 0.0;
+        y = 0.0;
+        while (i < discretus) {
+            var a: Number[];
+            var k: Integer = 0;
+            var fi: Number = pf * i;
+            var f: Number = 0;
+
+            var alpha: Number = -0.8;
+            while (f <= pf) {
+                f = f + DF;
+                a[k++] = x + r * Math.cos(Math.toRadians(f + fi + alpha));
+                a[k++] = y + r * Math.sin(Math.toRadians(f + fi + alpha));
+                alpha = -alpha;
+            }
+            while (f > 0) {
+                a[k++] = x + (dr + r) * Math.cos(Math.toRadians(f + fi + 
alpha));
+                a[k++] = y + (dr + r) * Math.sin(Math.toRadians(f + fi + 
alpha));
+                f = f - DF;
+                alpha = -alpha;
+            }
+            piece[i] = Polygon {
+                points: a
+                fill: getColor(fi);
+            }
+            i++;
+        }
+        redTon = TonIndicator {
+            height: r * 2.0
+            width: 16.0
+            layoutX: r + dr + 50.0
+            layoutY: -r + dr
+            ar: 1.0
+            colorPicker: this
+        };
+        greenTon = TonIndicator {
+            height: r * 2.0
+            width: 16.0
+            layoutX: r + dr + 100.0
+            layoutY: -r + dr
+            ag: 1.0
+            colorPicker: this
+        };
+        blueTon = TonIndicator {
+            height: r * 2.0
+            width: 16.0
+            layoutX: r + dr + 150.0
+            layoutY: -r + dr
+            ab: 1.0
+            colorPicker: this
+        };
+        updateCircle();
+        return Group {
+                    content: [
+                        Group {
+                            content: piece
+                            cache: true
+                            onMousePressed: function (e: MouseEvent): Void {
+                                alpha = Math.toDegrees(Math.atan2(e.y, e.x));
+                                updateCircle();
+                            }
+                            onMouseDragged: function (e: MouseEvent): Void {
+                                alpha = Math.toDegrees(Math.atan2(e.y, e.x));
+                                updateCircle()
+                            }
+                        }
+                        Group {
+                            transforms: Rotate {
+                                pivotX: 0.0, pivotY: 0.0, angle: bind alpha
+                            }
+                            content: [
+                                Line {
+                                    startX: r
+                                    startY: 0.0
+                                    endX: dr + r
+                                    endY: 0.0
+                                    strokeWidth: 2.5
+                                    stroke: Color.WHITE
+                                }
+                                Polygon {
+                                    points: [
+                                        r + dr,
+                                        0.0,
+                                        r + dr + 20.0,
+                                        9.0,
+                                        r + dr + 20.0,
+                                        -9.0
+                                    ]
+                                    fill: bind color
+                                }
+                            ]
+                        }
+                        Group {
+                            content: bind circle
+                        }
+                        redTon,
+                        greenTon,
+                        blueTon,
+                        Rectangle {
+                            x: -(r + dr), y: r + dr + 25.0
+                            width: r + dr + 100, height: 50
+                            stroke: Color.WHITE
+                            strokeWidth: 10.0
+                            fill: bind Color.color(red, green, blue)
+                        }
+                        Rectangle {
+                            x: 110, y: r + dr + 25.0
+                            width: r + dr + 100, height: 50
+                            stroke: Color.BLACK
+                            strokeWidth: 10.0
+                            fill: bind Color.color(red, green, blue)
+                        }
+                    ]
+                    onMousePressed: function (e: MouseEvent): Void {
+                        this.cursor = Cursor.CROSSHAIR
+                    }
+                    onMouseReleased: function (e: MouseEvent): Void {
+                        this.cursor = Cursor.DEFAULT
+                    }
+                }
+    }
+
+    function getColor(a: Number): Color {
+        R = getTon(a);
+        G = getTon(a + 120.0);
+        B = getTon(a - 120.0);
+        return Color.color(R, G, B);
+    }
+
+    function getTon(a: Number): Number {
+        var angel = getAngel(a);
+        var ton: Number;
+        if (angel > 30.0 and angel <= 150.0) {
+            ton = 1.0;
+        } else if (angel > 150.0 and angel <= 210.0) {
+            ton = (210 - angel) / 60.0;
+        } else if (angel > 210.0 and angel <= 330.0) {
+            ton = 0.0;
+        } else {
+            var q: Number;
+            if (angel > 30.0) {
+                q = angel - 330;
+            } else {
+                q = angel + 30.0;
+            }
+            ton = q / 60.0001;
+        }
+        return ton;
+    }
+
+    function getAngel(a: Number): Number {
+        var angel: Number = a;
+        while (angel < 0) {
+            angel = angel + 360.0;
+        }
+        while (angel > 360) {
+            angel = angel - 360.0;
+        }
+        return angel;
+    }
+
+    function updateCircle(): Void {
+        color = getColor(alpha);
+        circle = Group {
+            content: [
+                Circle {
+                    centerX: 0.0, centerY: 0.0
+                    radius: r
+                    fill: RadialGradient {
+                        proportional: false
+                        centerX: 0.0
+                        centerY: 0.0
+                        focusX: 0.0
+                        focusY: 0.0
+                        radius: r
+                        stops: [
+                            Stop {
+                                color: Color.WHITE
+                                offset: 0.0
+                            },
+                            Stop {
+                                color: color
+                                offset: 0.5
+                            },
+                            Stop {
+                                color: Color.BLACK
+                                offset: 1.0
+                            }
+                        ]
+                    }
+                    onMousePressed: function (e: MouseEvent): Void {
+                        circleX = e.x;
+                        circleY = e.y;
+                        oldX = circleX;
+                        oldY = circleY;
+                        updateColor();
+                    }
+                    onMouseReleased: function (e: MouseEvent): Void {
+                    }
+                    onMouseDragged: function (e: MouseEvent): Void {
+                        var x: Number = oldX + e.dragX;
+                        var y: Number = oldY + e.dragY;
+                        if (Math.sqrt(x * x + y * y) > r) {
+                            var alpha: Number = Math.atan2(e.y, e.x);
+                            x = r * Math.cos(alpha);
+                            y = r * Math.sin(alpha);
+                        }
+                        circleX = x;
+                        circleY = y;
+                        updateColor();
+                    }
+                }
+                Circle {
+                    centerX: bind circleX, centerY: bind circleY
+                    radius: 9.0
+                    stroke: color.BLACK
+                    strokeWidth: 2.0
+                    fill: null
+                }
+            ]
+        }
+        updateColor();
+    }
+
+    package function setTon(): Void {
+        R = redTon.r;
+        G = greenTon.g;
+        B = blueTon.b;
+        color = Color.color(R, G, B);
+        circle = Group {
+            content: [
+                Circle {
+                    centerX: 0.0, centerY: 0.0
+                    radius: r
+                    fill: RadialGradient {
+                        proportional: false
+                        centerX: 0.0
+                        centerY: 0.0
+                        focusX: 0.0
+                        focusY: 0.0
+                        radius: r
+                        stops: [
+                            Stop {
+                                color: Color.WHITE
+                                offset: 0.0
+                            },
+                            Stop {
+                                color: color
+                                offset: 0.5
+                            },
+                            Stop {
+                                color: Color.BLACK
+                                offset: 1.0
+                            }
+                        ]
+                    }
+                    onMousePressed: function (e: MouseEvent): Void {
+                        circleX = e.x;
+                        circleY = e.y;
+                        oldX = circleX;
+                        oldY = circleY;
+                        updateColor();
+                    }
+                    onMouseReleased: function (e: MouseEvent): Void {
+                    }
+                    onMouseDragged: function (e: MouseEvent): Void {
+                        var x: Number = oldX + e.dragX;
+                        var y: Number = oldY + e.dragY;
+                        if (Math.sqrt(x * x + y * y) > r) {
+                            var alpha: Number = Math.atan2(e.y, e.x);
+                            x = r * Math.cos(alpha);
+                            y = r * Math.sin(alpha);
+                        }
+                        circleX = x;
+                        circleY = y;
+                        updateColor();
+                    }
+                }
+                Circle {
+                    centerX: bind circleX, centerY: bind circleY
+                    radius: 9.0
+                    stroke: color.BLACK
+                    strokeWidth: 2.0
+                    fill: null
+                }
+            ]
+        }
+        var radius: Number = Math.sqrt(circleX * circleX + circleY * 
circleY);
+        var k: Number = radius / r;
+        if (k <= 0.5) {
+            k = 2.0 * k;
+            red = 1.0 - (1.0 - R) * k;
+            green = 1.0 - (1.0 - G) * k;
+            blue = 1.0 - (1.0 - B) * k;
+        } else {
+            k = 1.0001 - 2.0 * (k - 0.5);
+            red = k * R;
+            green = k * G;
+            blue = k * B;
+        }
+    }
+
+    function updateColor(): Void {
+        var radius: Number = Math.sqrt(circleX * circleX + circleY * 
circleY);
+        var k: Number = radius / r;
+        if (k <= 0.5) {
+            k = 2.0 * k;
+            red = 1.0 - (1.0 - R) * k;
+            green = 1.0 - (1.0 - G) * k;
+            blue = 1.0 - (1.0 - B) * k;
+        } else {
+            k = 1.0001 - 2.0 * (k - 0.5);
+            red = k * R;
+            green = k * G;
+            blue = k * B;
+        }
+        redTon.setColor(red, 0.0, 0.0);
+        greenTon.setColor(0.0, green, 0.0);
+        blueTon.setColor(0.0, 0.0, blue);
+    }
+
+}
+
+package class TonIndicator extends CustomNode {
+
+    public-init var height: Number = 100.0;
+    public-init var width: Number = 20.0;
+    public-init var ar: Number = 0.0;
+    public-init var ag: Number = 0.0;
+    public-init var ab: Number = 0.0;
+    public-init var colorPicker: RadialColorPicker;
+    public-read var r: Number = ar;
+    public-read var g: Number = ag;
+    public-read var b: Number = ab;
+    var y: Number = 0.0;
+    var color: Color;
+
+    public override function create(): Node {
+        color = Color.color(ar, ag, ab);
+        return Group {
+                    content: [
+                        TextBox {
+                            text: bind "{Math.round(255 * Math.sqrt(r * r + 
g * g + b * b))}"
+                            layoutX: -10
+                            layoutY: -30
+                            editable: false
+                            focusTraversable: false
+                            selectOnFocus: false
+                            columns: 2
+                        }
+                        Rectangle {
+                            x: 0.0, y: 0.0
+                            width: width, height: height
+                            fill: LinearGradient {
+                                startX: 0.0
+                                startY: 0.0
+                                endX: 0.0
+                                endY: 1.0
+                                stops: [
+                                    Stop {
+                                        color: color
+                                        offset: 0.0
+                                    },
+                                    Stop {
+                                        color: Color.BLACK
+                                        offset: 1.0
+                                    }
+                                ]
+                            }
+                            onMousePressed: function (e: MouseEvent): Void {
+                                y = e.y;
+                                var a: Number = 1.0 - y / height;
+                                r = a * ar;
+                                g = a * ag;
+                                b = a * ab;
+                                color = Color.color(r, g, b);
+                                colorPicker.setTon();
+                            }
+                            onMouseDragged: function (e: MouseEvent): Void {
+                                if (e.y <= height and e.y >= 0.0) {
+                                    y = e.y;
+                                    var a: Number = 1.0 - y / height;
+                                    r = a * ar;
+                                    g = a * ag;
+                                    b = a * ab;
+                                    color = Color.color(r, g, b);
+                                    colorPicker.setTon();
+                                }
+                            }
+                        }
+                        Polygon {
+                            transforms: Translate { x: 0, y: bind y }
+                            points: [
+                                width, 0.0,
+                                width + 20.0, 9.0,
+                                width + 20.0, -9.0
+                            ]
+                            fill: bind color
+                        }
+                    ]
+                };
+    }
+
+    package function setColor(r: Number, g: Number, b: Number): Void {
+        this.r = r;
+        this.g = g;
+        this.b = b;
+        y = height * (1.0 - Math.sqrt(r * r + g * g + b * b));
+        color = Color.color(r, g, b);
+    }
+
+}

Property changes on: JavaFXSet
___________________________________________________________________
Added: svn:ignore
   + build
dist