JavaFx Custom Volume Knob Node

Having read Mastering javaFx 8 control book and reading the Medusa library source from hansolo , i decided to put my hands on what i have learned so far and i choose a Volume knob as my first custom node,

KnobFx

I decided to create the node by extending  the Control class this where we define the model of the node like tickMarkColor,Value ,backgroundColor properties.To style this properties i used StyleableProperty<T>.

code sample

ObjectProperty markerColor; 

StyleableObjectProperty markerColor; //styleable by css

To avoid boilerplate code i used the guigarage JavaFX CssHelper library to make the controls styleable . Property css name i gave are:


 -fx-knob-marker-color

 -fx-knob-fill
 -fx-knob-stroke
 -fx-knob-tick-mark-color

 Next was extend the SkinBase<T> and here is the visual layout of the node here i haven't taken care of re sizing,but added a listener to the valueProperty to redraw if the value changes
 like so

   getSkinnable().valueProperty().addListener(e -> {
             getChildren().clear();
             //redraw             
         });

Not much too talk about all is in the code at GitHub

An example of applying styling  by a css file

.knob { 
 -fx-knob-marker-color:grey;
 -fx-knob-fill:green; 
 -fx-knob-stroke:black;
 -fx-knob-tick-mark-color:yellow;
}
 scene.getStylesheets().add(this.getClass().getResource("/resources/style.css").toExternalForm());

Knobfx Css

Knob knob=new Knob();
Timeline tl=new Timeline();
KeyValue key_value = new KeyValue(knob.valueProperty(), 50, Interpolator.LINEAR);
KeyFrame key_frame= new KeyFrame(Duration.seconds(90), key_value);
tl.getKeyFrames().setAll(key_frame);
tl.play();