Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/phenax/pattern-lock-js
Pattern lock library for the web using canvas
https://github.com/phenax/pattern-lock-js
canvas html5 javascript
Last synced: about 2 hours ago
JSON representation
Pattern lock library for the web using canvas
- Host: GitHub
- URL: https://github.com/phenax/pattern-lock-js
- Owner: phenax
- License: apache-2.0
- Created: 2017-03-28T13:24:38.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-07-17T08:57:55.000Z (over 1 year ago)
- Last Synced: 2024-07-08T08:56:25.186Z (4 months ago)
- Topics: canvas, html5, javascript
- Language: JavaScript
- Homepage: https://phenax.github.io/pattern-lock-js/
- Size: 401 KB
- Stars: 64
- Watchers: 6
- Forks: 19
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# PatternLockJS
A pattern lock library for the web. [Demo](https://phenax.github.io/pattern-lock-js/)
### Installation
Install the library with
```bash
yarn add @phenax/pattern-lock-js
```
Import the library with
```js
import PatternLock from '@phenax/pattern-lock-js';
```
### Get started
```javascript
const lock = PatternLock({
$canvas: document.querySelector('#patternLock'),
width: 300,
height: 430,
grid: [ 3, 3 ],
});
```
### Customize the theme
```javascript
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
```javascript
lock.setThemeState('success'); // Switch state to successful
lock.setThemeState('customState'); // Switch to your custom state
```
### You can even change the grid size dynamically
```javascript
lock.setGrid(4, 4); // 4x4 grid instead of the default 3x3
```
### Callback for when the pattern is complete
```javascript
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
```javascript
// 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'));
```
### Destroy to enable scrolling on touch
```
lock.destroy();
```