Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube
JC Mouse Bolivia
Index / Proyectos / Crea patrón de desbloqueo para tus app java

Crea patrón de desbloqueo para tus app java

Autor jc mouse martes, marzo 8, 2016

El patrón de desbloqueo es una medida de seguridad que tienen algunos teléfonos inteligentes para evitar el acceso al dispositivo por parte de personas extrañas, este patrón consiste por lo general en una matriz 3×3 de círculos o puntos los cuales se unen con el dedo para formar el “patrón de desbloqueo“, si el patrón es correcto, se tiene acceso al dispositivo móvil, caso contrario este continuara boqueado.

Pues bien, esta manera de evitar el acceso de personas no autorizadas a un dispositivo móvil puede extrapolarse a una aplicación de escritorio e incluso porque no, a una aplicación web.

Herramientas

  • Netbeans 8.x
  • java 8

Tiempo: 20 minutos

Nivel: Intermedio – Avanzado

Paso 1. Análisis y diseño

Este sistema de bloqueo esta formado por un panel con una matriz 3×3  de figuras circulares que permiten dibujar el patrón de desbloqueo.

matrix

Cada uno de estas figuras tiene asignado un valor que debe ser único, en nuestro ejemplo valores del 1 al 9, son estos valores los que forman el patrón de desbloqueo. Cuando el usuario arrastra el dedo entre cada uno de estas figuras, internamente se va formando un código, es decir, en la imagen de abajo podemos advertir que según el movimiento que se le de al sistema, se forma un código “125895“, el código de desbloqueo del ejemplo de este post.

android bolivia

Cada elemento de la matriz es un objeto de 80×80 pixeles el cual esta conformado por un circulo externo y un circulo más pequeño en su centro, las medidas y coordenadas de cada objeto se pueden ver a continuación

circulo de confianza

Paso 2. El Proyecto

Crea un nuevo proyecto java con nombre “Unlock Pattern“, agrega la siguiente estructura:

unlock netbeans

El proyecto contiene 2 paquetes :

  • demo: Aquí colocarías tu programa principal que seria visible una vez se complete el patrón de desbloqueo.
  • unlockpattern: Como su nombre indica este paquete contendrá las clases del sistema de bloqueo

El paquete unlockpattern esta formado por las siguientes clases:

  • FigurePattern: Es la figura circular que forma la matriz 3×3
  • UnlockJFrame: El JFrame principal donde se muestra todo el sistema
  • UnlockPanel: Un JPanel donde pintar las figuras circulares e implementar los eventos del ratón para pintar el patrón de desbloqueo.

Adicionalmente hacemos uso de una imagen, no es necesaria ya que podíamos pintar su contenido directamente con java2d pero a veces la flojera nos gana 🙂 la imagen que utilizaremos esta en formato PNG de 290×93 pixeles, la imagen es la siguiente:

access denied

Paso 3. FigurePattern

Como dijimos más arriba esta clase nos pintara un par de figuras circulares a modo de botón en nuestro sistema de desbloqueo, las medidas de esta figura se indican en el paso 1, el código de la clase es:

package net.jc_mouse.unlockpattern;
import java.awt.BasicStroke;
import java.awt.Color;
import java.awt.Graphics2D;
import java.awt.Point;
import java.awt.Rectangle;
import java.awt.geom.Ellipse2D;
/**
 * @web https://www.jc-mouse.net/
 * @author Mouse
 */
public class FigurePattern {
    //identificador/valor de objeto (NO debe repetirse)
    private int key;
    //coordenadas
    private int x               =   0;
    private int y               =   0;  
    //bandera 
    private boolean selected    =   false;
    //area sensible a eventos del raton
    private Rectangle area      =   new Rectangle();
    
    /**Constructor de clase */
    public FigurePattern(){}
    
    /**
     * Constructor de clase
     * @param k clave de celda
     * @param x coordenada X de objeto
     * @param y coordenada Y de objeto
     */
    public FigurePattern(int k, int x, int y){
        this.key = k;
        this.x = x;
        this.y = y;
        //area interna del circulo
        area.setBounds(x+10, y+10 , 60, 60);
    }
    
    public void draw(Graphics2D g2){
        //fondo
        g2.setColor( new Color(0,0,0) );
        g2.fill( new Ellipse2D.Double(x+10, y+10 , 60, 60 ) );
        //borde exterior
        g2.setStroke(new BasicStroke( 4 ));        
        g2.setColor( (selected)?new Color(0,204,0):new Color(153,153,153) );        
        g2.draw( new Ellipse2D.Double(x+10, y+10 , 60, 60 ) );                
        //circulo interno
        g2.setColor( new Color(255,255,255) );
        g2.fill( new Ellipse2D.Double(x+30, y+30 , 20, 20 ) );        
    }

    public int getKey() {
        return key;
    }

    public void setKey(int key) {
        this.key = key;
    }
    
    public boolean isSelected() {
        return selected;
    }

    public void setSelected(boolean selected) {
        this.selected = selected;
    }

    public Rectangle getArea() {
        return area;
    }

    public void setArea(Rectangle area) {
        this.area = area;
    }
    
    /**
     * retorna el punto medio de la figura
     * @return Point
     */
    public Point getCenterPoint(){
        Point p = new Point( x+40, y+40);
        return p;
    }
    
    /**
     * Metodo statico que determina su un punto se encuentra dentro un area rectangular
     * @param r rectangle
     * @param p point
     * @return boolean
     */
    public static boolean insideArea(Rectangle r,Point p) {            
        return r.contains(p);            
    }
    
}//end:FigurePattern

Paso 4.  UnlockPanel

Esta clase que desciende de un JPanel sera donde se pinte la matriz con las 9 figuras circulares, así mismo implementa métodos para que el usuario pueda arrastrando el cursor del mouse dibujar el patrón de desbloqueo .

El método checkUnlockPattern()  se encarga de verificar si el patrón introducido por el usuario es correcto,de ser cierto, abrirá un nuevo JFrame (tu aplicación) que en nuestro ejemplo se encuentra en el paquete “demo” y se llama “AppDemoJFrame“, caso contrario, de ser un patrón incorrecto, muestra un mensaje de error “Access denied”.

package net.jc_mouse.unlockpattern;
import java.awt.BasicStroke;
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Image;
import java.awt.Point;
import java.awt.RenderingHints;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import java.awt.event.MouseMotionListener;
import java.awt.geom.Rectangle2D;
import java.util.ArrayList;
import javax.swing.ImageIcon;
import javax.swing.JFrame;
import javax.swing.JPanel;
import net.jc_mouse.demo.AppDemoJFrame;
/**
 * @web https://www.jc-mouse.net/
 * @author Mouse
 */
public class UnlockPanel extends JPanel implements MouseListener,MouseMotionListener {
        
    private JFrame parent;
    private String myKey="125895";//patron de desbloqueo
    //array para las 9 figuras que forman la matriz
    private ArrayList<FigurePattern> figurePatternArr = new ArrayList();
    //array para las figuras que conforman el patron desbloqueo
    private ArrayList<FigurePattern> pattern= new ArrayList();
    //String para guardar el patron generado por el usuario
    private String password = "";
    //para mostrar imagen de "acceso denegado"
    private final Image image = new ImageIcon(getClass().getResource("/net/jc_mouse/unlockpattern/access_denied.png")).getImage();
    private boolean showError=false;
    
    /**
     * Constructor de clas
     * @param parent JFrame que contiene el JPanel
     */
    public UnlockPanel(JFrame parent){                
        this.parent = parent;
        //se agregan 9 circulos al contenedor
        figurePatternArr.add(new FigurePattern(1,0,0));
        figurePatternArr.add(new FigurePattern(2,80,0));
        figurePatternArr.add(new FigurePattern(3,160,0));
        
        figurePatternArr.add(new FigurePattern(4,0,80));
        figurePatternArr.add(new FigurePattern(5,80,80));
        figurePatternArr.add(new FigurePattern(6,160,80));
        
        figurePatternArr.add(new FigurePattern(7,0,160));
        figurePatternArr.add(new FigurePattern(8,80,160));
        figurePatternArr.add(new FigurePattern(9,160,160));
        
        //Eventos del raton        
        UnlockPanel.this.addMouseListener( UnlockPanel.this );        
        UnlockPanel.this.addMouseMotionListener( UnlockPanel.this);        
    }
    
   @Override
    public void paintComponent(Graphics g){    
        Graphics2D g2 =(Graphics2D) g;
        g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,RenderingHints.VALUE_ANTIALIAS_ON);            
        g2.setColor( new Color(0,0,0) );
        g2.fill(new Rectangle2D.Double(0,0,getWidth(),getHeight()));  
        
        //dibuja las lineas del patron de desbloqueo entre los circulos
        Point point = null;
        for(FigurePattern figurePattern: pattern){
            g2.setStroke( new BasicStroke( 20 ) );
            g2.setColor( new Color(204,204,204) );
            if(point!=null)
                g2.drawLine(point.x, point.y, figurePattern.getCenterPoint().x, figurePattern.getCenterPoint().y);  
             point = figurePattern.getCenterPoint();            
        }
        
        //dibuja los circulos para los patrones de desbloqueo       
        if(figurePatternArr!=null)
            figurePatternArr.stream().forEach((b) -> {
                b.draw(g2);
        });  
        
        //muestra error 
        if(showError){
            g2.drawImage(image, (getWidth()-220)/2, (getHeight()-93)/2, 220, 93, null);         
        }        
    }

    @Override
    public void mouseClicked(MouseEvent e) {}

    @Override
    public void mousePressed(MouseEvent e) {}

    @Override
    public void mouseReleased(MouseEvent e) {      
        checkUnlockPattern();
    }

    @Override
    public void mouseEntered(MouseEvent e) {}

    @Override
    public void mouseExited(MouseEvent e) {}

    @Override
    public void mouseDragged(MouseEvent e) {
        //cuando se arrastra el cursor del mouse
        figurePatternArr.stream().filter((p) -> ( 
            FigurePattern.insideArea(p.getArea(),e.getPoint()) )).forEach((p) -> {
            if(this.pattern.isEmpty()){//Si esta vacio se añade objeto
                pattern.add(p);//añade a array
                p.setSelected(true);//cambia color
                password +=p.getKey();//concatena valor de figura
            }else{//Si ya existen objetos en el array
                //se comprueba que objeto nuevo no se repita con el ultimo añadido
                if(pattern.get(pattern.size()-1).getKey() != p.getKey()){
                    pattern.add(p);//añade a array
                    p.setSelected(true);//cambia color
                    password +=p.getKey(); //concatena valor de figura
                }
            }
        });
        repaint();
    }

    @Override
    public void mouseMoved(MouseEvent e) { showError=false; repaint();}
    
    /**
     * metodo para comprobar que patron de desbloqueo es correcto
     * de ser asi -> abre nuevo formulario
     * caso contrario -> muestra mensaje de error
     */
    public void checkUnlockPattern(){
        if(password.equals(myKey)){//si patron de desbloqueo es correcto
            parent.setVisible(false);//se oculta 
            //se muestra aplicacion cliente
            AppDemoJFrame app = new AppDemoJFrame();
            app.setVisible(true);
        }else{            
            showError=true;
        }
        pattern.clear();//limpia movimientos antiguos
        password="";//resetea password
        //reinicia valor para objetos
        figurePatternArr.stream().forEach((b) -> {
            b.setSelected(false);
        });
        repaint();
    }
    
}//end

Paso 5. UnlockJFrame

Para terminar el tutorial, el panel creado en el paso 4, debemos añadirlo a un JFrame para poder ejecutarlo, la clase queda de la siguiente forma:

package net.jc_mouse.unlockpattern;
import java.awt.Dimension;
import java.awt.EventQueue;
import javax.swing.JFrame;
import javax.swing.WindowConstants;
/**
 * @web https://www.jc-mouse.net/
 * @author Mouse
 */
public class UnlockJFrame extends JFrame {

    private UnlockPanel unlockPanel;

    /**Constructor de clase*/
    public UnlockJFrame(){
        initComponents();
        UnlockJFrame.this.setLocationRelativeTo(null);
    }
    
    private void initComponents() {        
        setTitle("Unlock Pattern");
        setResizable(false);
        setSize(new Dimension(246,280));
        setPreferredSize(new Dimension(246,280));
        unlockPanel = new UnlockPanel(this);
        setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);        
        getContentPane().add(unlockPanel);
        pack();
    }
    
    public static void main(String args[]){
        EventQueue.invokeLater(() -> {
            new UnlockJFrame().setVisible(true);
        });
    }
    
}

Ejecutamos y probamos, no olvides el patrón de desbloqueo es “125895

desbloqueo android

Código fuente: <<enlace pobre>>

enjoy!!!

Tags

Si te ha gustado podrías compartirlo o dejar un comentario. ¡Muchas gracias!
Autor: JC Mouse

Yo soy yo :) JC Mouse, Soy orgullosamente boliviano soy fundador y CEO de la web jc-Mouse.net uno de las pocas web en emprendimiento y tecnología en Bolivia.

Toda la información que encuentres en este sitio es y sera completamente gratis siempre, puedes copiar, descargar y re-publicar si así lo deseas en otros blogs o sitios web, solo te pido a cambio que dejes una referencia a esta web. Esto nos ayuda a crecer y seguir aportando. Bye

Enjoy! :)

También Te Podría Interesar

Resolución de pantalla con LibGDX

Resolución de pantalla con LibGDX

En este tutorial, veremos un poco más de lo que son las texturas en libGDX y dos maneras de añadirlas a nuestros juegos,...

Introducción a PHP con Netbeans

Introducción a PHP con Netbeans

NetBeans es un entorno de desarrollo integrado libre, hecho principalmente para el lenguaje de programación Java. Sin em...

Servicio Web SOAP en Java

Servicio Web SOAP en Java

En este post vamos a construir un Servicio Web bajo el protocolo SOAP (Simple Object Access Protocol) el cual básicament...

Hola Mundo con Firebase

Hola Mundo con Firebase

Firebase es la plataforma para el desarrollo de aplicaciones web y aplicaciones móviles de Google el cual se centra en e...

Código Único de Factura en C Sharp

Código Único de Factura en C Sharp

En este post implementamos el “Código Único de Factura” según la documentación otorgada por Impuestos Bolivi...

Ecuación de segundo grado

Ecuación de segundo grado

Problema: Implemente el código necesario en Kotlin para resolver una ecuación de segundo grado de números reales: Soluci...

Comparte lo que sabes

Categorias

Últimas entradas

MyBatis es un framework de persistencia Java que se encarga de mapear sentencias SQL y procedimientos almacenados a part...

Webcam Capture es un API  que permite usar una cámara web incorporada o externa directamente desde código Java utilizand...

im4java es una interfaz pura de Java para la línea de comandos de ImageMagick. La interfaz de la línea de comandos de IM...

En un post anterior conocimos una herramienta Open Source con un conjunto de herramientas para el trabajo con imágenes e...

Herramientas

Generador de Enlaces a Whatsapp