https://github.com/momsfriendlydevco/angular-ui-scribble
Simple drawing widget to collect signatures, drawings or scrawls on a plain background or input from a webcam
https://github.com/momsfriendlydevco/angular-ui-scribble
angular angular-ui angularjs
Last synced: 2 months ago
JSON representation
Simple drawing widget to collect signatures, drawings or scrawls on a plain background or input from a webcam
- Host: GitHub
- URL: https://github.com/momsfriendlydevco/angular-ui-scribble
- Owner: MomsFriendlyDevCo
- License: mit
- Created: 2017-03-20T03:45:59.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2020-08-25T07:39:37.000Z (over 5 years ago)
- Last Synced: 2025-03-25T12:50:53.277Z (9 months ago)
- Topics: angular, angular-ui, angularjs
- Language: JavaScript
- Homepage: https://momsfriendlydevco.github.io/angular-ui-scribble/
- Size: 519 KB
- Stars: 0
- Watchers: 6
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
angular-ui-scribble
===================
Simple drawing widget to collect signatures, drawings or scrawls on a plain background or input from a webcam.
Can be used for:
* Signature collection
* Annotated drawings
* Simple scribbles
[Demo](https://momsfriendlydevco.github.io/angular-ui-scribble)
[Demo](https://momsfriendlydevco.github.io/angular-ui-scribble).
Installation
------------
NOTE: This module requires [signature_pad](https://github.com/szimek/signature_pad)
1. Grab the NPM
```shell
npm install --save @momsfriendlydevco/angular-ui-scribble
```
2. Install the required script + CSS somewhere in your build chain or include it in a HTML header:
```html
```
3. Include the router in your main `angular.module()` call:
```javascript
var app = angular.module('app', ['angular-ui-scribble'])
```
4. Use somewhere in your template:
```html
```
A demo is also available. To use this [follow the instructions in the demo directory](./demo/README.md).
Directive
=========
The UI widget is a AngularJS directive which supports the following options:
| Option | Type | Default | Description |
|------------------|------------|--------------------|----------------------------------------------------------------------------------------------------------------|
| `callback` | `function` | `none` | The function to accept the completed drawing. The callback must contain either keyword `dataURI` or `blob` somewhere which will be replaced with the DataURI of the encoded image and the raw binary blob. e.g. `myCallback(dataURI)` to recieve the dataURI and `myCallback(blob)` to get the Blob object |
| `editable` | `boolean` | `false` | If false the first scribble the user makes will be used, if true the user has access to some editing tools before submission |
| `colors` | `array` | *Pastel colors* | An array of colors to select from |
| `sizes` | `array` | `[1,2,3,4,5]` | An array of pen sizes to select from |
| `buttons` | `Object` | `{}` | Which buttons should be displayed in the UI. See below for each individual option |
| `buttons.camera` | `boolean` | `true` | Display the camera capture button if the platform supports it |
| `buttons.colors` | `boolean` | `true` | Display the color selection buttons |
| `buttons.clear` | `boolean` | `true` | Display the clear input button |
| `buttons.eraser` | `boolean` | `true` | Display the eraser tool |
| `buttons.sizes` | `boolean` | `true` | Display the pen size selection buttons |
| `width` | `number` | `400` | The width of the widget |
| `height` | `number` | `200` | The height of the widget |