Signature

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

Features

Add the widget to a dataview.

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.
Under the pen tab, you can customize your own pen size by choosing the different pen types, the pen color.
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
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

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.

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;

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