SignAndSaveJS: Difference between revisions

ScripTouch Sign and Save JS
Developer(s)	Scriptel Corporation
Lastest release	1.0
Operating system	Windows 7 - 10 using most browsers, macOS 10.7+ using most browsers, Ubuntu Linux 14.04+ using most browsers, CentOS 7+ using most browsers
Website	Corporate Web page

Latest revision as of 15:26, 10 June 2020

Scriptel SignAndSaveJS is a small web component that can be injected into your web application that will let you easily capture signature and transfer them to your web application to be stored. The output is both json and png. The developer / designer picks which they want to use in the implementation.

SignAndSaveJS supports signature pad, touchscreen, mouse, and stylus input for the signature. With SignAndSaveJS, a developer can capture through an HTML form, without needing to know JavaScript. SignAndSaveJS also provide a robust API for programmatic usage.

If you are interested in this product for your independent software solution, please contact our Sales Department at +1 (877) 848‑6824 or by email at sales@scriptel.com.

Getting Started

There are essentially two different ways you can integrate SignAndSaveJS into your application: as a form element or as a part of your application.

Using the control as a form element is simpler and if you're already working with HTML forms will slip right into your workflow. Check out the "Using SignAndSaveJS with a Form Element" tutorial to use this approach.

If you want more control or if you have more complicated needs than simply submitting the signature as part of a form check out "Using SignAndSaveJS with your Application".

Browser Support

Browser	Minimum Version	Release Date
Google Chrome	18.0	2012-03-28
Microsoft Internet Explorer	11.0	2013-10-17
Microsoft Edge	12.0	2015-03-30
Mozilla Firefox	14.0	2012-06-26
Apple Safari (Desktop)	6.0	2012-07-25
Apple Safari (Mobile)	6.1	2012-09-19

Using SignAndSaveJS with a Form Element

In this approach to integration SignAndSaveJS is simply a form component like any other HTML form element. This method doesn't require any JavaScript to integrate and if you're already using forms to manage your submissions to your web application this approach will seamlessly fit into your application.

Start with the following HTML document representing a typical HTML form:

<!DOCTYPE html>
<html>
  <head>
    <title>Scriptel SignAndSaveJS Example</title>
  </head>
  <body>
  <form action="example.php" method="post">
    Name: <input name="name" type="text" /><br />
    <input type="submit" value="Submit">
  </form>
  </body>
</html>

With this script on the server side (example.php) that simply prints anything posted as text:

<?php
  header("Content-type: text/plain");
  print_r($_POST);
?>

To add SignAndSaveJS to your form you insert a script and style tag into the <head> to include SignAndSaveJS in your application like so:

  <link type="text/css" href="scriptel-websign.css" rel="stylesheet" />
  <script type="application/javascript" src="scriptel-websign.js"></script>

Then simply add a div to your form with the "scriptel_websign" class:

  <div class="scriptel_websign"></div>

That's it! If you load the page after adding the tags you'll see the SignAndSaveJS control sitting between the name field and the submit button.

If you sign the form and press the accept button and then hit submit you'll see that you have two new POST attributes: scriptel_websign_raster and scriptel_websign_json. The former contains a data url encoded PNG that contains the image of the captured signature. The latter is the raw data that was captured by SignAndSaveJS.

Using SignAndSaveJS with your Application

Scriptel SignAndSaveJS supports a wide range of customization options that let you control how signatures get captured and what your users are allowed to do with the control. These controls are exposed through data-* attributes that can be assigned to the anchor node you insert into your form. For example:

<div class="scriptel_websign"
  data-background-color="white"
  data-foreground-color="black">
</div>

In this example the form control would initialize with the background color as white and the background color as black.

List of Customization Attributes

This is a complete list of data attributes you can add to your control to customize how it looks and operates.

data-lock-to-aspect	Boolean	true	Whether or not to enforce a particular aspect ratio with this form control.
data-aspect-ratio-width	Number	108	The horizontal component of the aspect ratio to enforce if data-lock-to-aspect is true.
data-aspect-ratio-height	Number	29	The vertical component of the aspect ratio to enforce if data-lock-to-aspect is true.
data-allow-custom-colors	Boolean	true	Whether or not to let the user pick any color or force them to use the predefined list of colors.
data-allow-color-change	Boolean	true	Whether or not to let the user change colors at all.
data-background-color	CSS Color	rgba(0, 0, 0, 0)	The starting background color of the control.
data-foreground-color	CSS Color	black	The starting foreground color of the control.
data-allow-line-thickness	Boolean	true	Whether or not to allow users to change the line thickness.
data-line-thickness-range-min	Number	1	The minimum line thickness to allow.
data-line-thickness-range-max	Number	20	The maximum line thickness to allow.
data-line-thickness-range-step	Number	1	The amount of granularity allowed between the minimum and maximum thicknesses.
data-line-thickness	Number	2	The starting line thickness.
data-allow-pen-styles	Boolean	true	Whether or not to allow users to change pen styles.
data-pen-style	String	plain	The starting pen style. Can choose between: plain, inkwell, chisel.
data-click-to-sign-message	String	Click to Activate	The message that will be displayed when the control isn't activated.
data-click-to-sign-font	String	40px Helvetica	The font and size the click to sign message will be displayed in.
data-click-to-sign-background-color	CSS Color	rgba(0, 0, 0, 0.3)	The foreground color of the click to sign message.
data-click-to-sign-foreground-color	CSS Color	rgba(0, 0, 0, 0.5)	The background color of the click to sign message.
data-show-signature-line	Boolean	true	Whether or not to show the signature line at the bottom of the signature control.
data-signature-line-color	CSS Color	black	The color the signature line should be drawn with.
data-allow-touch-signing	Boolean	true	Whether or not to allow touch or stylus signing.
data-allow-mouse-signing	Boolean	true	Whether or not to allow mouse signing.
data-allow-omniscript-signing	Boolean	true	Whether or not to allow OmniScript signing.
data-allow-easyscript-signing	Boolean	true	Whether or not to allow EasyScript signing.
data-form-output-raster	Boolean	true	Whether or not to include the raster in the POST data. By default called 'scriptel_websign_raster'. See data-form-output-prefix to change the prefix.
data-form-output-raster-type	Mime Type	image/png	The mime type of the raster format. Safe options include: image/png, image/jpeg, image/bmp. Others may work but will be browser dependant.
data-form-output-raster-width	Number	600	The width of the output raster to produce.
data-form-output-raster-height	Number	160	The height of the output raster to produce.
data-form-output-json	Boolean	true	Whether or not to include JSON data in the POST data. By default called 'scriptel_websign_json'. See data-form-output-prefix to change the prefix.
data-form-output-crop	Boolean	false	Whether or not to crop the signature such that the signature stays in aspect, but fills all available space in the output raster.
data-form-output-prefix	String	scriptel_websign_	The prefix to use for form controls. Useful if you want to include multiple signatures in one form.
data-form-auto-accept	Boolean	true	Whether or not we should accept partial signatures when the parent form is submitted.

Example Template Element

Here's a template element you can use to customize your control:

<div class="scriptel_websign"
	 data-aspect-ratio-width="108"
	 data-aspect-ratio-height="29"
	 data-lock-to-aspect="true"
	 data-allow-custom-colors="true"
	 data-allow-color-change="true"
	 data-background-color="rgba(0, 0, 0, 0)"
	 data-foreground-color="black"
	 data-allow-line-thickness="true"
	 data-line-thickness-range-min="2"
	 data-line-thickness-range-max="20"
	 data-line-thickness-range-step="1"
	 data-line-thickness="2"
	 data-allow-pen-styles="true"
	 data-pen-style="plain"
	 data-click-to-sign-message="Click to Activate"
	 data-click-to-sign-font="40px Helvetica"
	 data-click-to-sign-background-color="rgba(0, 0, 0, 0.3)"
	 data-click-to-sign-foreground-color="rgba(0, 0, 0, 0.5)"
	 data-show-signature-line="true"
	 data-signature-line-color="black"
	 data-allow-touch-signing="true"
	 data-allow-mouse-signing="true"
	 data-allow-omniscript-signing="true"
	 data-allow-easyscript-signing="true"
	 data-form-output-raster="true"
	 data-form-output-raster-type="image/png"
	 data-form-output-raster-width="600"
	 data-form-output-raster-height="160"
	 data-form-output-json="true"
	 data-form-output-prefix="scriptel_websign_"
	 data-form-output-crop="false"
	 data-form-auto-accept="true">
</div>