JavaFX Pattern Lock Demo("Unofficial")
This is a project that i decided to do while traveling to Mombasa on a train ,that's almost a day of coding.At first i didn't have any idea what to code and i thought of creating an Android lock pattern in javafx.
It wasn't easy as i thought ,the circular nodes are two circles in a Stackpane (KeyPads) with Shadow effect,the line its a Polyline.MouseEvents are onMouseMoved and onMouseClicked this where i tried working with MouseDragEvents but couldn't make it work.still researching .
Adding the keypads,the KeyPad class constructor has the x and y layout and keypad name.
int k=0;
for(int x=40;x<200;x+=60){
for(int y=40;y<200;y+=60){
KeyPad key_pad=new KeyPad(x,y,"c"+k);
key_pad.addListener(line);
key_pad_panel.getChildren().addAll(key_pad);
k++;
}
}
The keypads are Children of the StackPane and the StackPane is a Child of an AnchorPane,every keypad has a name/key set by calling setUserData();i.e keypad.setUserData("c0");
To check if the pattern is a match i add getUserData().toString() in an ObservableList onMouseMoved which will add too much points,but in the correct order.To work around this i created a List of distinct keys in the right order
List<String> pattern=new ArrayList<>();
pattern=password.stream().distinct().collect(toList());
If invalid pattern the AnchorPane move upwards 10px and back to its initial position with use of the TranslateTransition giving it a bounce like effect.
Download the src here
Video Demo
It wasn't easy as i thought ,the circular nodes are two circles in a Stackpane (KeyPads) with Shadow effect,the line its a Polyline.MouseEvents are onMouseMoved and onMouseClicked this where i tried working with MouseDragEvents but couldn't make it work.still researching .
Adding the keypads,the KeyPad class constructor has the x and y layout and keypad name.
int k=0;
for(int x=40;x<200;x+=60){
for(int y=40;y<200;y+=60){
KeyPad key_pad=new KeyPad(x,y,"c"+k);
key_pad.addListener(line);
key_pad_panel.getChildren().addAll(key_pad);
k++;
}
}
The keypads are Children of the StackPane and the StackPane is a Child of an AnchorPane,every keypad has a name/key set by calling setUserData();i.e keypad.setUserData("c0");
To check if the pattern is a match i add getUserData().toString() in an ObservableList onMouseMoved which will add too much points,but in the correct order.To work around this i created a List of distinct keys in the right order
List<String> pattern=new ArrayList<>();
pattern=password.stream().distinct().collect(toList());
If invalid pattern the AnchorPane move upwards 10px and back to its initial position with use of the TranslateTransition giving it a bounce like effect.
Download the src here
Video Demo
Comments
Post a Comment