JavaFX Metallic LoginForm

I usually browse through dribbble for inspiration and i was inspired by a login form that had a metallic look and feel.I decided to create my own with css and a couple of transitions,sounds and effects,just started still work on it ,maybe add popups,animate the screws

Login form default look
I have hardcoded the username for demonstration if verification fails this how the Interface looks


Effects used are :-
                           Glow
                            DropShadow
                            Lighting
                            DisplacementMap

Transition only fadeTransition thinking of adding RotateTransition for the screws.

In the TextField a sound is played on keyTyped

something like
 name_textfield.setOnKeyTyped(new EventHandler<KeyEvent>(){

            @Override
            public void handle(KeyEvent event) {
       
              sound= new AudioClip("file:click.mp3");
              sound.setCycleCount(1);
              sound.play();
               
            }
           
        });

The yellow dropshadow

        dropShadow = new DropShadow();
        dropShadow.setRadius(5.0);
        dropShadow.setOffsetX(3.0);
        dropShadow.setOffsetY(3.0);
        dropShadow.setColor(Color.YELLOW);

If verification fails change the color of the dropShadow and start our FadeTransition
of the RadioActive icon and play the caution sound.

        dropShadow.setColor(Color.RED);

         FadeTransition ft = new FadeTransition(Duration.millis(500), radioActiveIcon);
         ft.setFromValue(1.0);
         ft.setToValue(0.0);
         ft.setCycleCount(Timeline.INDEFINITE);
         ft.setAutoReverse(true);
         ft.play();

         sound= new AudioClip("file:caution.mp3");
         sound.setCycleCount(Timeline.INDEFINITE);
         sound.play();
   
On clicking the  icon stop set to default

    radioActiveIcon.setOnMouseClicked(new EventHandler<MouseEvent>(){

            @Override
            public void handle(MouseEvent event) {
             
                ft.stop();
                sound.stop();
                root.getChildren().remove(radioActiveIcon);
                dropShadow.setColor(Color.YELLOW);
            }
           
        });

The displacementMap effect

     FloatMap floatMap = new FloatMap();
     floatMap.setWidth(400);
     floatMap.setHeight(50);

        for (int i = 0; i < width; i++) {
            double v = (Math.sin(i / 20.0 * Math.PI) - 0.5) / 40.0;
            for (int j = 0; j < height; j++) {
                floatMap.setSamples(i, j, 0.0f, (float) v);
            }
        }

        DisplacementMap displacementMap = new DisplacementMap();
        displacementMap.setMapData(floatMap);
        title_label.setEffect(displacementMap);

 Video Demo

     







Comments

Popular Posts