Signature Widget Resize Scale

[JereMiami]

Suppose you want to resize a signature created from one signature widget to display in a smaller/larger signature widget. How would you do that? What am I missing here?

Code: Select all

   put the pathdata of widget "Signature1" into p
   ---how do I resize p to fit the rect of "Signature 2"--
   set the pathData of widget "Signature2" to p
   

[Klaus]

Looks like resizing, even the SAME widget, is not supported.

[stam]

You *can* set the pathData, so i'd imagine with some clever transform this my be feasible? but doing the math will be a pain...

[richmond62]

I wonder if you can export a signature as an SVG file?

[stam]

I wonder if you can export a signature as an SVG file?

Don't have much time to check now, but the pathData is an array with 3 keys for each point: color, path and width.
You can export the path to an svg widget and it is then resizeable, but my quick hack below only produces the thinnest outline of the path - it's so thin it's barely visible, but it's definitely in the SVG widget and resizeable:

Code: Select all

on mouseUp
     local tPath, tArray
     put the pathData of widget "signature" into tArray
     repeat for each element tElement in tArray
          put tElement["path"] & space after tPath
     end repeat
     delete the last char of tPath
     set the iconPath of widget "svg" to tPath
end mouseUp

I'm not particularly knowledgable on SVG paths, but if there is some way to include the width in the iconPath of the SVG widget, then it should be very doable...

S.

[JereMiami]

Stam,

Same thing here. Very faint in the svg with that code. Here is code from the old lesson. Anyone have any luck with the code from this lesson?

Code: Select all

function svgFileData pSignature
  local tPathData

  put the pathData of pSignature into tPathData

  local tSVG
  put "<svg xmlns=" & quote & "http://www.w3.org/2000/svg" & 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

[bn]

Same thing here. Very faint in the svg with that code. Here is code from the old lesson. Anyone have any luck with the code from this lesson?

I assume that you want to import the svg - file to a drawing.

I changed the svg-header to one I lifted from an export from Affinity, because Affinity could read your original data but drawingSVGCompile choked on it.
It is in the field of the stack. I change width and height to 200 200 in that header. It is the width and height of the signature widget in that stack.
Have a look at this stack.

convertSignature to SVG Image.livecode.zip

(1.77 KiB) Downloaded 779 times

Kind regards
Bernd

[JereMiami]

Bernd,

Impressive. Nice job.

[stam]

I changed the svg-header to one I lifted from an export from Affinity, because Affinity could read your original data but drawingSVGCompile choked on it.
It is in the field of the stack. I change width and height to 200 200 in that header. It is the width and height of the signature widget in that stack.
Have a look at this stack.

Amazing, thanks Bernd!
pretty simple to automatically replace the viewBox rect with the dimensions of the current signature...

Does drawingSVGCompile always need this header and a viewBox size then?

If that's the case is it worth asking for an enhancement request so the up-to-date header is automatically inserted and the dimensions of the source can be taken as parameters?

S.

[bn]

Stam,
I do not know what exactly drawingSVGCompile did not like in the original header of the lesson.
I just noticed that the lesson header worked when selecting the file in Finder an hitting space (Mac) and opening it in Affinity. And that drawingSVGCompile did import with the exported Affinity header.
Headers in SVG (and SVG data) are a pain because of the many variants.
I do know that drawingSVGCompile uses the viewBox to scale the drawing.

Mark Waddingham did an amazing job to come up with the drawing library.

Kind regards
Bernd

[JereMiami]

Is it possible to get this to work on mobile?

I noticed that I get to the last line of code containing drawingSvgCompile and it fails because XML is not an extension for mobile. Any workaround?

[bobcole]

from Bernd:
I do not know what exactly drawingSVGCompile did not like in the original header of the lesson.

Bernd's sample stack contains the xml header from the Affinity app; it works well.
I tried to skinny down that xml and came up with this minimal header:

Code: Select all

<?xml version="1.0"?>
<svg viewBox="0 0 280 91">

Taking out either the xml version or the svg viewBox causes the conversion to fail.
Attached is my stack which uses Bernd's logic.Thanks, Bernd.
Bob

Signature to Image.livecode.zip

(27.4 KiB) Downloaded 765 times

[bn]

Is it possible to get this to work on mobile?

I noticed that I get to the last line of code containing drawingSvgCompile and it fails because XML is not an extension for mobile. Any workaround?

You would have to include com.livecode.library.drawing in the standalone builder.

com.livecode.library.drawing needs the xml external. It has instructions for the Standalone builder to include it when building a standalone.

This is untested but should work since the xml external is according to the dictionary "mac, windows, linux, ios, android"

I do not know enough about building standalones for mobile, maybe someone in the know could chime in.

Kind regards
Bernd

[bn]

I tried to skinny down that xml and came up with this minimal header:

Code: Select all

<?xml version="1.0"?>
<svg viewBox="0 0 280 91">

Taking out either the xml version or the svg viewBox causes the conversion to fail.
Attached is my stack which uses Bernd's logic.Thanks, Bernd.
Bob

Thank you Bob for figuring this out.

Kind regards
Bernd

[JereMiami]

It totally worked.

For those developing for mobile, include the "drawing" extension (in addition to the "signature" extension), and all will be as it should be for that last line of code including the drawingSvgCompile function.

Excellent work and thanks so much again!!!