Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jawache/smile-to-unlock
Want to give away free content on your site? How about asking for a smile in return 😁
https://github.com/jawache/smile-to-unlock
stenciljs webcomponents
Last synced: about 1 month ago
JSON representation
Want to give away free content on your site? How about asking for a smile in return 😁
- Host: GitHub
- URL: https://github.com/jawache/smile-to-unlock
- Owner: jawache
- License: mit
- Created: 2017-10-01T21:00:17.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2021-07-05T19:38:20.000Z (over 3 years ago)
- Last Synced: 2024-06-11T17:27:34.737Z (6 months ago)
- Topics: stenciljs, webcomponents
- Language: TypeScript
- Homepage: https://smiletounlock.com
- Size: 140 KB
- Stars: 110
- Watchers: 1
- Forks: 9
- Open Issues: 6
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
- awesome-stenciljs - Smile To Unlock(Unique) - api-stu) to figure out how happy the person is. (List of Awesome Components Made using StencilJS / Individual Components)
README
# Smile To Unlock
Want to give away free content on your site? How about asking for a smile in return 😁
## Demo
[](https://www.youtube.com/watch?v=PYuzAE2K5aE)
You can also see it working on plunker here: https://plnkr.co/edit/MuZp7aHedI5LawAjgfJS?p=preview
## What is it?
Smile To Unlock is a Web Component built using the [StencilJS](https://stenciljs.com) compiler, so is framework agnostic, can be used in an Angular, Vue, React or even in a vanilla web application.
Smile To Unlock captures an image from the users camera and uses the [Azure Cognitive Services Emotive API](http://bit.ly/emotive-api-stu) to figure out how happy the person is.
- NOTE: On the FREE tier you get 30,000 API requests a month.
## Getting Started
1. Include `smiletounlock.js` in your HTML file
- via a script tag (quickest)
```html
```
- or via a node module
```bash
npm install smile-to-unlock --save
```
Then add a script tag to your HTML like so:
```bash
Add the code to show the free content here <--
locker.end(); // End the locker so the camera is shutdown
})
```
## Using the helper hider
As a shortcut if you just have a video or part of the page you want to hide from the user unless they smile you can use the helper `<smile-to-unlock-hider></smile-to-unlock-hider>` component.
1. Place the hider inside the component you want to hide.
NOTE: The element you want to hide should have the style `position: relative;`
```html
<div class="this-is-what-want-to-hide" style="position: relative;">
<!-- This will add a black overlay to any content with some text and a button to start the smiling process -->
<smile-to-unlock-hider></smile-to-unlock-hider>
<!-- This is the actual unlocker component -->
<smile-to-unlock api-key="<YOUR_API_KEY_HERE>"></smile-to-unlock>
</div>
```
2. Then make sure to add this code at the end of your html file somewhere:
- This code shows the hider overlay over the content you want to hide (so the user can't see it or click on any buttons if it's a video).
```js
(function() {
var hider = document.querySelector('smile-to-unlock-hider');
var locker = document.querySelector('smile-to-unlock');
// This event is called when the user has clicked Smile To Unlock
hider.addEventListener("readyToSmile", function (ev) {
// Starts the locker full screen
locker.start();
// This event is sent when the user has smiled
locker.addEventListener("userSmiled", function (ev) {
console.log(ev.detail.score);
// Hide the hider so we show the content
hider.hide();
// End the locker so the camera is shutdown
locker.end();
})
})
})();
```
## Working on Smile To Unlock
To setup run:
```bash
npm install
npm start
```
To view the build, start an HTTP server inside of the `/www` directory.
To watch for file changes during develop, run:
```bash
npm run dev
```
To build the app for production, run:
```bash
npm run build
```