SignAndSaveJS

From Scriptel Wiki
Jump to navigation Jump to search
ScripTouch Sign and Save JS
192px
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

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>