Draw Signature
Last updated
Last updated
A user can use this widget to draw a signature (or basically anything else) on a canvas. The widget generates an image and stores it in a datafield<file>. All other widget properties have default values and may be left blank.
Properties
Output
Datafield, File
Store the output image in this datafield.
Image extension (png/jpg)
text, Expression
Changes the output file extension. By default this value is set to "png". Allowed values are "png" and "jpg". Note that JPG does not support transparancy. JPG can be used to create smaller files compared to PNG. Use the 'Background color' property to add a custom background color.
Image name
text, expression
Changes the output file name. By default this value is: "image".
Display clear-button
boolean
Allows the user to clear the canvas by showing a clear button. By default this value is true.
Behavior
Maintain aspect ratio
Boolean
Maintain the aspect ratio of 'width' and 'height' when the width changes because of responsive design.
Appearance
Background color
Text, Expression
Changes the background color of the output image. By default this value is set to "white". This value is a CSS (hexadecimal) color code or keyword. Hexadecimal values require a leading number sign (#). RGB(A) colors are also allowed. Examples: "#366dbf", "#ff0000", "rgba(0,0,0,0.5)", "black" or "red".
Border color
Text, Expression
Changes the border color of the signature widget. The border is not included in the output image. This value is a CSS (hexadecimal) color code or keyword. Hexadecimal values require a leading number sign (#). RGB(A) colors are also allowed. Examples: "#366dbf", "#ff0000", "rgba(0,0,0,0.5)", "black" or "red".
Clear-button context
dropdown, Bootstrap context
Changes the context of the clear button using bootstrap color contexts, such as "success" and "danger".
Clear-button size
Dropdown
The clear button can either be: extra small, small, normal or large.
Clear-button text
Text, Expression
Changes the text on the clear button. By default this value is set to "Clear".
Clear-button full widt
Boolean
When true: this property makes sure that the clear button has the same width as the canvas. By default this value is false.
Height
Number, Expression
The height of the canvas in pixels. The default value is 300. The height may change on smaller screens when 'Maintain aspect ratio ' is true. Otherwise the height will remain the same on all devices.
Width
Number, Expression
The width of the canvas in pixels. The default value is 600. Note that the width will never be larger than the width of its container. Therefore, the canvas width may be smaller on devices with smaller screens.
Minimal stroke width
Number, Expression
This widget simulates 'pen presure' by changing stroke width. By default the minimal stroke width is 0.5, allowing thin lines when drawing fast.
Maximum stroke width
Number, Expression
Defines the maximum stroke width of the signature. By default the maximum stroke width is 2.5, 5 times thicker than the minimum stroke width.
Stroke color
Text, Expression
By default a user can draw a black signature. Use this property to change the pen color. This value is a CSS (hexadecimal) color code or keyword. Hexadecimal values require a leading number sign (#). RGB(A) colors are also allowed. Examples: "#366dbf", "#ff0000", "rgba(0,0,0,0.5)", "black" or "red".
