Adds a signature-drawing field to Active Scaffold forms and stores the captured strokes as JSON.

Description

ActiveScaffold Signature Pad adds the :signaturepad form UI. Users draw on an HTML canvas, and the bundled jQuery Signature Pad library writes the stroke coordinates to the column’s hidden form field. Stored signatures can also be regenerated in list and show views.

The gem requires Active Scaffold 3.4 or newer. It captures a handwritten mark; it does not provide identity verification, certificate-based signing, or other cryptographic digital-signature features.

Installation

Add the following line to your Gemfile:

gem 'active_scaffold_signaturepad'

Then run:

bundle install

Usage & Options

Enable the signature pad in your controller:

class AgreementsController < ApplicationController
  active_scaffold :agreement do |config|
    config.columns[:signature].form_ui = :signaturepad
    config.columns[:signature].options = {
      width: 150,                 # canvas width; default: 250
      height: 55,                 # canvas height; default: 100
      line_colour: 'transparent'  # use transparent to hide the guide line
    }
  end
end

width and height set the canvas dimensions. The options passed to the bundled Signature Pad library are line_colour, line_width, line_margin, line_top, bg_colour, pen_colour, pen_width, pen_cap, and error_message_draw.

See the jQuery Signature Pad options reference for details.

If error_message_draw is a symbol, it is translated through Active Scaffold’s as_ helper and must have a translation in the active_scaffold namespace. The default is :sign_document, for which English and Spanish translations are included.

Saving the signature

The form submits a JSON representation of the signature’s strokes, so the column should be able to store that JSON string. It is not submitted as an image. If an image is needed, convert the stored stroke data separately; this server-side conversion example is linked from the plugin README.

Support

For help, use the Active Scaffold discussion group or open an issue.

Get Plugin