@momsfriendlydevco/angular-ui-scribble

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

Demo.

Installation

NOTE: This module requires signature_pad

• Grab the NPM

npm install --save @momsfriendlydevco/angular-ui-scribble

• Install the required script + CSS somewhere in your build chain or include it in a HTML header:

<script src="/libs/angular-ui-scribble/dist/votetally.min.js"/>
<link href="/libs/angular-ui-scribble/dist/angular-ui-scribble.min.css" rel="stylesheet" type="text/css"/>

• Include the router in your main angular.module() call:

var app = angular.module('app', ['angular-ui-scribble'])

• Use somewhere in your template:

<ui-scribble editable="true" callback="someFunction(image)"></ui-scribble>

A demo is also available. To use this follow the instructions in the demo directory.

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