Skip to content
Pattern lock library for the web using canvas
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
src
.babelrc
.eslintrc.json
.gitignore
LICENSE
README.md
index.html
index.js
package.json
webpack.config.js
yarn.lock

README.md

PatternLockJS

A pattern lock library for the web. Demo

npm (scoped) npm bundle size (minified + gzip) NpmLicense

Installation

Install the library with

yarn add @phenax/pattern-lock-js

Import the library with

import PatternLock from '@phenax/pattern-lock-js';

Get started

const lock = PatternLock({
    $canvas: document.querySelector('#patternLock'),
    width: 300,
    height: 430,
    grid: [ 3, 3 ],
});

Customize the theme

lock.setTheme('dark');
lock.setTheme('light');

// Or pass a custom theme

lock.setTheme({
    default: {
        colors: {
            accent: '#1abc9c',     // Accent color for node
            primary: '#ffffff',    // Primary node and line color
            bg: '#2c3e50',         // Canvas background color
        },
        dimens: {
            node_radius: 20,       // Radius of the outer ring of a node
            line_width: 6,         // Thickness of the line joining nodes
            node_core: 8,          // Radius of the inner circle of a node
            node_ring: 1,          // Outer ring thickness
        }
    },
    success: {
		colors: {
			accent: '#51e980',     // Green accent on successful match
		}
	},
	failure: {
		colors: {
			accent: '#e74c3c',     // Red accent on an unsuccessful match
		}
    },
    customState: {                 // Your custom state
        dimens: {
            node_radius: 25,       // Increases the node radius
        }
    },
});

Manually change the state

lock.setThemeState('success'); // Switch state to successful
lock.setThemeState('customState'); // Switch to your custom state

You can even change the grid size dynamically

lock.setGrid(4, 4); // 4x4 grid instead of the default 3x3

Callback for when the pattern is complete

lock.onComplete(({ hash }) => (myRealHash === hash) ? success() : failure());

Or you can use the matchHash helper to check if the hash matches your set of correct passwords

// If the pattern drawn is a Right L or a Diagonal L,
//    then turn the pattern green
//    else turn it red
lock.matchHash([ 'LTU2MTIyNjM0Ng==', 'MTk1OTMwNzY2NQ==' ])
    .onSuccess(() => lock.setThemeState('success'))
    .onFailure(() => lock.setThemeState('failure'));

You can’t perform that action at this time.