LiveCode for FM

How do I draw SVG paths to an image?

The SVG Path widget in LiveCode draws SVG paths into a widget canvas. It can also draw a named path from the SVG Icon Library.

It is helpful to be able to display different images in FileMaker depending on the current state of a record. For example, displaying an open lock to users that have higher levels of access. This lesson will create a function that dynamically generates images from SVG paths which can be easily used in calculated container fields.

Creating the function

Open the LiveCode for FM solution and click on the `Functions` button.

Click on the `+` icon (1) and name the new function `DrawSVGPath`. Enter a description (2) and copy the script below to the script editor.

This script creates a stack and an SVG path widget, then sets the path, width, height and color for the path to be drawn in. It then exports a snapshot of the widget to return as a PNG image.

if there is no stack "DrawSVGPathTemporary" then
   create invisible stack "DrawSVGPathTemporary"
   set the defaultStack to "DrawSVGPathTemporary"
   create widget "SVG" as "com.livecode.widget.svgpath"
else
   set the defaultStack to "DrawSVGPathTemporary"
end if

if fmParam(1) is among the lines of iconNames() then
   set the iconPresetName of widget "SVG" to fmParam(1)
else
   set the iconPath of widget "SVG" to fmParam(1)
end if

if fmParam(2) is an integer then
   set the width of widget "SVG" to fmParam(2)
end if

if fmParam(3) is an integer then
   set the height of widget "SVG" to fmParam(3)
end if

if fmParam(4) is a color then
   set the foregroundColor of widget "SVG" to fmParam(4)
end if

put "binary" into tData["type"]
put "PNGf" into tData["main"]
put "svg.png" into tData["filename"]
put the width of widget "SVG" into tData["width"]
put the height of widget "SVG" into tData["height"]
export snapshot from widget "SVG" to tData["value"]["PNGf"] as PNG

return tData

Click to copy

Click the 'Save' button to save the function and then click the 'Close' button to close the Workspace and return to FileMaker.

Testing

Open an existing solution or create a new solution by selecting `File > New Solution...` from the menubar then choose `File > Manage > Database...` from the menubar to open the `Manage Database` dialog.