Skip to content
This repository has been archived by the owner on Jan 3, 2020. It is now read-only.

mendixlabs/signature

Repository files navigation

Build Status Dependency Status Dev Dependency Status codecov badge

Signature

A signature pad for capturing signatures.
The widget implements bezier curves and velocity for the smooth drawing of the signature.

Features

  • Record signature in a mendix database
  • Customizable pen color and pen size
  • Toggle attribute to delete signature and reset the canvas

Configuration

Add the widget to a dataview.

Demo project

https://signature101.mxapps.io

Usage

  • Add an entity to the domain model which should inherit from Mendix System.image

  • Create a page with a data view, and place the widget inside

  • Optional, add the Has signature attribute to the entity, to toggle in order to clear the canvas.
    Canvas

  • Under the pen tab, you can customize your own pen size by choosing the different pen types, the pen color.
    Pen

  • Run the application

  • After signing on the canvas the Has signature attribute is toggled to show that the canvas has a signature, you can toggle to no in order to clear the signature Data source

  • When the form is submitted, that can be triggered by start of a microflow or a save, the signature is captured and stored as an image.

  • To view the result, a image viewer widget could be used

Notion / Limitations

  • The widget behaves similar as the file upload widget: The trigger to save the image is caused by a from submit, which happen on before a start of a microflow or on save. To store the signature image in the object the Mendix platform forces a commit if the object is new. That behavior might have influence on a Cancel action. So a rollback in a microflow will not rollback the creation of the signature object. And the rollback will not fall back to the previous signature.

  • Previous signatures can not be edited: When the signature is captured and stored as an image, the widget could not be used on a new/other page for editing the existing widget. The widget will display an empty canvas and when the signature is saved it will overwrite the previous image.

  • Resized signature is captured Please note if the canvas is resized, the strokes outside the visible canvas are not shown, but they are stored.

Properties

  • Pen | color - HTML color code of the pen.
  • Show background grid - When set to yes, a grid is shown in the background of the writable area.
  • Cell width - The width of a grid cell in (px).
  • Cell height - The height of a grid cell in (px).
  • Line color - HTML color code of the grid lines
  • Line width - Width of grid line border in pixels
  • Under the common tab, custom CSS Style properties can be set for responsive design, when width and height are a percentage. For example:
    • min-width: 200px;
    • max-width: 600px;
    • min-height: 200px;
    • max-height: 600px;

Compatibility

The widget is usable and works smoothly in Google chrome, Internet explorer.

Development

See here