{"id":17225197,"url":"https://github.com/tympanix/pattern-lock-js","last_synced_at":"2025-04-09T15:05:42.792Z","repository":{"id":39616985,"uuid":"99596086","full_name":"tympanix/pattern-lock-js","owner":"tympanix","description":"An android inspired pattern lock in scalable vector graphics and pure javascript","archived":false,"fork":false,"pushed_at":"2024-03-05T18:19:10.000Z","size":157,"stargazers_count":138,"open_issues_count":8,"forks_count":31,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-09T15:05:37.706Z","etag":null,"topics":["android","authentication","javascript","pattern-lock","smartphone","svg","tablet","touch","web"],"latest_commit_sha":null,"homepage":"https://tympanix.github.io/pattern-lock-js/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tympanix.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-08-07T16:05:19.000Z","updated_at":"2025-04-03T21:44:43.000Z","dependencies_parsed_at":"2024-12-04T17:35:52.567Z","dependency_job_id":"14de2196-6f33-43d0-ba8e-4ae4ee498d85","html_url":"https://github.com/tympanix/pattern-lock-js","commit_stats":{"total_commits":35,"total_committers":2,"mean_commits":17.5,"dds":0.02857142857142858,"last_synced_commit":"95d40ac58f56beb11b96d403c10c9349d8372c4d"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tympanix%2Fpattern-lock-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tympanix%2Fpattern-lock-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tympanix%2Fpattern-lock-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tympanix%2Fpattern-lock-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tympanix","download_url":"https://codeload.github.com/tympanix/pattern-lock-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248055284,"owners_count":21040157,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","authentication","javascript","pattern-lock","smartphone","svg","tablet","touch","web"],"created_at":"2024-10-15T04:12:58.763Z","updated_at":"2025-04-09T15:05:42.775Z","avatar_url":"https://github.com/tympanix.png","language":"JavaScript","readme":"# pattern-lock-js\nA passcode mechanism built with scalable vector graphics (SVG) and javascript for modern web application with mobile and tablet support\n\n## [Demo](https://tympanix.github.io/pattern-lock-js/)\n\n## Install\nInstall using npm:\n```\nnpm i pattern-lock-js --save\n```\n\n... or install using yarn:\n```\nyarn add pattern-lock-js\n```\n\n## Getting started\nImport dependecies:\n```html\n\u003cscript src=\"jquery.js\" charset=\"utf-8\"\u003e\u003c/script\u003e\n```\nImport the module:\n```html\n\u003clink rel=\"stylesheet\" href=\"patternlock.min.css\"\u003e\n\u003cscript src=\"patternlock.min.js\" charset=\"utf-8\"\u003e\u003c/script\u003e\n```\n\nDesign your desired svg pattern (or use the default one below). Your svg graphics must as a minimum have the `patternlock` class and three groups `\u003cg\u003e` with the classes `lock-actives`, `lock-lines` and `lock-dots`\n```html\n\u003csvg class=\"patternlock\" id=\"lock\" viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\"\u003e\n    \u003cg class=\"lock-actives\"\u003e\u003c/g\u003e\n    \u003cg class=\"lock-lines\"\u003e\u003c/g\u003e\n    \u003cg class=\"lock-dots\"\u003e\n        \u003ccircle cx=\"20\" cy=\"20\" r=\"2\"/\u003e\n        \u003ccircle cx=\"50\" cy=\"20\" r=\"2\"/\u003e\n        \u003ccircle cx=\"80\" cy=\"20\" r=\"2\"/\u003e\n\n        \u003ccircle cx=\"20\" cy=\"50\" r=\"2\"/\u003e\n        \u003ccircle cx=\"50\" cy=\"50\" r=\"2\"/\u003e\n        \u003ccircle cx=\"80\" cy=\"50\" r=\"2\"/\u003e\n\n        \u003ccircle cx=\"20\" cy=\"80\" r=\"2\"/\u003e\n        \u003ccircle cx=\"50\" cy=\"80\" r=\"2\"/\u003e\n        \u003ccircle cx=\"80\" cy=\"80\" r=\"2\"/\u003e\n    \u003c/g\u003e\n\u003c/svg\u003e\n```\nInitialise the component\n```javascript\nvar lock = new PatternLock(\"#lock\", {\n  onPattern: function(pattern) {\n    // Context is the pattern lock instance\n    console.log(pattern)\n   }\n});\n```\n\n## Options\nThe returned object from `new PatternLock(...)` has the following utility functions:\n* **`clear()`** Clears the current pattern\n* **`success()`** Validates the pattern as correct\n* **`error()`** Validates the pattern as incorrect\n* **`getPattern()`** Returnes the currently active pattern or `NaN`\n\nThe pattern lock constructor accepts a second argument - an object literal with the following properties:\n\n* **`onPattern: function`** Called when a pattern is drawn with the pattern as argument. Returning true/false validates/invalidates the pattern - the same as calling `success()` and `error()`. The context is set to the pattern lock instance itself.\n* **`vibrate: boolean`** Defines if there should be vibrations while using the PatternLock (if available). Default: `true`\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftympanix%2Fpattern-lock-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftympanix%2Fpattern-lock-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftympanix%2Fpattern-lock-js/lists"}