심재운 블로그

728x90
반응형

Vanilla JavaScript 에서 패턴 잠금 – PatternLockJS

 

 

웹 앱에서 비밀번호를 관리하기 위해 Android와 유사한 HTML5 캔버스 기반 패턴 잠금 인터페이스를 시뮬레이션하는 데 사용되는 바닐라 JavaScript 플러그인입니다.

 

 

 

HTML 페이지에 기본 JavaScript 파일을 포함 합니다.

 

<script src='PatternLock.js'></script>

 

패턴 잠금 인터페이스를 그릴 캔버스 요소를 만듭니다.

 

 

<canvas id='patternLock'></canvas>

 

 

PatternLockJS를 초기화하고 완료하세요.

 

 

const patternLock= new PatternLockJS({ el: '#patternLock' });

 

다음 옵션을 사용하여 패턴 잠금 인터페이스를 구성합니다.

 

 

const patternLock= new PatternLockJS({
      accent: '#1abc9c',
      primary: '#ffffff',
      bg: '#2c3e50',
      dimens: {
        line_width: 6,
        node_radius: 28,
        node_core: 8,
        node_ring: 1,
      }
});

 

노드 그리드를 생성합니다.

 

 

// rows: The number of horizontal nodes
// cols: The number of vertical nodes
patternLock.generateGrid(rows, cols)

 

이벤트 리스너 연결 및 프레임 루프 시작

 

 

patternLock.start()

 

패턴이 완료되면 콜백 함수를 실행합니다.

 

 

patternLock.onPatternComplete= nodes => {
  // Check if the pattern is right
};

 

 

html 현황

<div class='pattern-container'>

	<div class='title'>PatternLockJS Demo</div>
	<div class='subtitle'>Draw unlock pattern to generate a hash</div>

	<br />

	<canvas id='patternLock'></canvas>
	<div class='password'>
		Your password is: <input class='js-password' type='text' />
	</div>

</div>

<script src='./js/PatternLock.js'></script>
<script src='./js/script.js'></script>

 

script.js

((PatternLock) => {

	document.addEventListener('DOMContentLoaded', () => {

		const patternLock= new PatternLock({
			el: '#patternLock',
			dimens: { width: 300, height: 430 },
		});

		patternLock.setTheme({
			accent: '#1abc9c',
			dimens: {
				node_radius: 20,
			}
		});

		patternLock.generateGrid(3, 3);
		patternLock.start();



		const $password= document.querySelector('.js-password');

		patternLock.onPatternComplete= nodes => {

			const password= PatternLock.patternToWords(nodes);

			$password.value= PatternLock.hashCode(password);
		};
	});

})(window.PatternLock);

 

 

www.cssscript.com/demo/android-like-pattern-lock-vanilla-javascript/

 

PatternLockJS Demo

PatternLockJS Demo Draw unlock pattern to generate a hash Your password is:

www.cssscript.com

 

pattern-lock-js-master.zip
0.09MB

728x90
반응형

공유하기

facebook twitter kakaoTalk kakaostory naver band

본문과 관련 있는 내용으로 댓글을 남겨주시면 감사하겠습니다.

비밀글모드

  1. 일상에서 생각없이 사용하는 프로그램들인데
    이렇게 수식과 코드로 가득차 있는 것을 보면 신기합니다 ㅎ
    2020.11.27 21:54 신고
loading