Using the Signature Widget

The signature widget is a canvas for freehand drawing, that can be used for capturing signatures. The path data can then be exported.

Creating a Signature Widget

A signature widget can be created by dragging it out from the

Tools Palette, where it appears with the following icon:

Alternatively it can be created in script using:

create widget as "com.livecode.widget.signature"

Using the Signature Widget

Once the signature has been drawn on the widget, the data can be  exported using the pathData property. This is a numerically keyed  array consisting of the individual pieces of path data that make up the  drawn path.

Each path info element contains three keys:

  • path - SVG path instructions
  • color - the color to paint the path with
  • width - the line width of the path

The following code can be used to export the pathData array to SVG file format:

function svgFileData pSignature
  local tPathData

  put the pathData of pSignature into tPathData

  local tSVG
  put "<svg xmlns=" & quote & "" & quote & ">" & return into tSVG

   repeat for each element tElement in tPathData
      put "<path d=" & quote & tElement["path"] & quote after tSVG
      put " stroke=" & quote & "rgb(" & item 1 to 3 of tElement["color"] & ")" & quote after tSVG
		put " stroke-opacity=" & quote & round(item 4 of tElement["color"] / 255) & quote after tSVG
		put " stroke-width=" & quote & tElement["width"] & quote after tSVG
		put "/>" & return after tSVG
	end repeat
	put "</svg>" after tSVG
	return tSVG
end svgFileData

The pathData can also be used to manipulate the appearance of the signature. For example, to thicken the line data, the following handler could be used:

command thickenSignature pSignature, pFactor
   local tPathData
	put the pathData of pSignature into tPathData
	repeat for each key tKey in tPathData
		  multiply tPathData[tKey]["width"] by pFactor
	end repeat
	set the pathData of pSignature to tPathData
end thickenSignature

The results of applying this to a signature with factors of 1.5 and 0.5 can be seen below:

Similarly, colours can be applied.

The signature widget can be exported as an image using the export snapshot or import snapshot command.

export snapshot from rect (the rect of widget "signature") of widget "signature" to file (specialFolderPath("desktop") & "/signature.png") as PNG

Clearing the Signature

To clear the signature widget set the pathData to empty.

set the pathData of widget "signature" to empty
Click to copy

Signture Widget Properties

Name Summary Syntax
The width of the border to draw
get the borderWidth of widget
set the borderWidth of widget to pixels
opaque Whether the background of the widget is filled
get the opaque of widget
set the opaque of widget to {true | false}
pathData The path data used to draw the widget
get the pathData of widget
set the pathData of widget to array



How can I clear the content of the signature widget?

Matthias Rebbe

The information is stored in the pathData,
set the pathData of widget "signature" to empty

would delete the content of the widget.

Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.