blog post

Source Code

An android like pattern lock interface for your hybrid app or website. Pattern Lock is a light weight plugin to simulate android like pattern lock mechanism for you hybrid app or for a website. It's easy to configure and style so you can have different type of pattern lock according to your need. Is also provide some methods to use this plugin securely.
<link href="patternLock.css"  rel="stylesheet" type="text/css" />
<script src="jquery.js"></script>
<script src="patternLock.js"></script>

<script>
	
$(document).ready(function(){

var lock = new PatternLock("#patternContainer");
//

// Draw Pattern;
var drawPatternCode='';
var lock = new PatternLock('#patternContainer',{
    onDraw:function(pattern){
        //do something with pattern
        console.log(pattern)
        drawPatternCode=pattern;
    }
});  

var Drawlock=new PatternLock('#patternHolder',{
    onDraw:function(pattern){
        //do something with pattern
        console.log(pattern)
        if(drawPatternCode==pattern)
        {
        	alert("success")
        	Drawlock.reset();
        }else
        {
        	//alert("failed")
        	Drawlock.error(); 
        }
    }
});

setInterval(function(){
$("#time").html(GetTime('12'));
},1000)

$("#time").html(GetTime('12'));
$("#week").html(GetWeekName());
$("#date").html(GetDate());

//console.log(GetTime('12'),GetTime('24'),GetWeekName(),GetDate())



	});


function GetTime(formate)	
{
var getTime='';
var date = new Date();

if(formate=='12'){
var hours = date.getHours() > 12 ? date.getHours() - 12 : date.getHours();
var am_pm = date.getHours() >= 12 ? "PM" : "AM";
hours = hours < 10 ? "0" + hours : hours;
var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
getTime = hours + ":" + minutes + " " + am_pm;
//getTime = hours + ":" + minutes + ":"+seconds+" "+ am_pm;
}
 if(formate=='24')
{
var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
var am_pm = date.getHours() >= 12 ? "PM" : "AM";
var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
getTime = hours + ":" + minutes + " " + am_pm;
}
return getTime;
}


function GetWeekName()
{
	var d=new Date()
    var weekday=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday",
                "Friday","Saturday")
    return weekday[d.getDay()];
}


function GetDate()
{
var months = new Array(12);
months[0] = "January";
months[1] = "February";
months[2] = "March";
months[3] = "April";
months[4] = "May";
months[5] = "June";
months[6] = "July";
months[7] = "August";
months[8] = "September";
months[9] = "October";
months[10] = "November";
months[11] = "December";

var current_date = new Date();
month_value = current_date.getMonth();
day_value = current_date.getDate();
year_value = current_date.getFullYear();

if(day_value<10)
day_value='0'+day_value;

return day_value + " " +months[month_value] + ", " + year_value;
}

</script>

<style>body{text-align: center;}
html{background: url("pattern.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;"}
</style>
</head>

<body>

<div id="time" style="font-size: 44px;"></div>
<div id="week" style="font-size: 35px;"></div>
<div id="date" style="font-size: 28px;"></div>

<table style="width:500px;margin:0px auto;">
<tr>
<td><h1>Draw Pattern</h1>

<div id="patternContainer" style="margin:20px auto;width:300px;height:100px;"></div></td>
<td><h1>Match Pattern</h1>

<div id="patternHolder" style="margin:20px auto;width:300px;height:100px;"></div></td>
</tr>
</table>

</body>

Pattern Lock is a light weight plugin
  • Share This Story


Pleas give your valuable comments to improve the contents.

about author

Atul kumar shukla


I'm Atul Kumar Shukla, working as a web developer.
Welcome to my Blog. This is my personal blog where i post my own questions and answers , articles about ASP.Net., SQL Server, HTML, CSS, Jquery and many more..

Visit Profile

Leave a comment

Name
E-mail
Url
Message

Get More Stuff
Subscribing to the TheOneblogs newsletter and get intersting stuff and updates to your email inbox.
Your Email

 

Style Switcher

Change Color

×! We use cookies to improve your user experience. More information