Embroidermodder / libembroidery

Library for reading/writing/manipulating machine and design embroidery files
https://www.libembroidery.org
zlib License
45 stars 13 forks source link

Import SVG from Inkscape... #136

Open jedie opened 10 years ago

jedie commented 10 years ago

I tried to import some simple SVG file from Inkscape. But it get only a empty scene. I also tried DXF without success...

redteam316 commented 10 years ago

SVG isn't working 100% yet. I'm guessing your SVG only contains paths. DXF is also being reworked currently. Can you send the SVG file and I will use it when testing. If you run libembroidery-convert with no files passed in you will get output that gives a basic overview of the working formats.

jedie commented 10 years ago

My idea was to create a SVG in the ready-to-use Inkscape. Import it into Embroidermodder and create a .pes file for the machine. Is this possible? Or is Embroidermodder2 not ready, yet?

redteam316 commented 10 years ago

It's still in an alpha state so depending on the format you want to use, your mileage may vary. As far as being able to bring in SVG from Inkscape, this is possible, just not with SVG paths quite yet. You currently will need to convert your paths to polylines in Inkscape and then do ./libembroidery-convert input.svg output.pes or bring it into Embroidermodder 2 that and then resave. I'll push some more commits soon pertaining to paths and try to knock it out since I have been working on improving libembroidery lately.

Here is a minimal SVG file from the official specs that I test with that demonstrates polylines working but not paths quite yet:

<?xml version="1.0"?>
<svg width="5cm" height="4cm" viewBox="0 0 500 400"
     xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny">
  <title>Example cubic01- cubic Bezier commands in path data</title>
  <desc>Picture showing a simple example of path data
        using both a "C" and an "S" command,
        along with annotations showing the control points
        and end points</desc>

  <rect fill="none" stroke="blue" stroke-width="1" x="1" y="1" width="498" height="398" />

  <polyline fill="none" stroke="#888888" stroke-width="2" points="100,200 100,100" />
  <polyline fill="none" stroke="#888888" stroke-width="2" points="250,100 250,200" />
  <polyline fill="none" stroke="#888888" stroke-width="2" points="250,200 250,300" />
  <polyline fill="none" stroke="#888888" stroke-width="2" points="400,300 400,200" />
  <path fill="none" stroke="red" stroke-width="5" d="M100,200 C100,100 250,100 250,200
                                       S400,300 400,200" />
  <circle fill="none" stroke="#888888" stroke-width="2" cx="100" cy="200" r="10" />
  <circle fill="none" stroke="#888888" stroke-width="2" cx="250" cy="200" r="10" />
  <circle fill="none" stroke="#888888" stroke-width="2" cx="400" cy="200" r="10" />
  <circle fill="#888888" stroke="none" cx="100" cy="100" r="10" />
  <circle fill="#888888" stroke="none" cx="250" cy="100" r="10" />
  <circle fill="#888888" stroke="none" cx="400" cy="300" r="10" />
  <circle fill="none" stroke="blue" stroke-width="4" cx="250" cy="300" r="9" />
  <text font-size="22" font-family="Verdana" x="25" y="70">M100,200 C100,100 250,100 250,200</text>
  <text font-size="22" font-family="Verdana" x="325" y="350"
        text-anchor="middle">S400,300 400,200</text>
</svg>
jedie commented 10 years ago

I tried your SVG data. I can open it in Inkscape. But not in Embroidermodder2. It's crashed while loading with a Segmentation fault.

Last line on console are:

...
ATTRIBUTE:
y
VALUE:
"350"
ATTRIBUTE:
text-anchor
VALUE:
"middle"
OBJECT SUMMARY:
circle 100,000000 200,000000 10,000000
circle 250,000000 200,000000 10,000000
circle 400,000000 200,000000 10,000000
circle 100,000000 100,000000 10,000000
circle 250,000000 100,000000 10,000000
circle 400,000000 300,000000 10,000000
circle 250,000000 300,000000 9,000000
polyline 4
polyline 13
polyline 5
polyline 8
rect 1,000000 1,000000 498,000000 398,000000
activeView()
BaseObject Constructor()
CircleObject Constructor()
Segmentation fault

converter also crash with "Segmentation fault":

...
rect 1.000000 1.000000 498.000000 398.000000
ERROR: format-pes.c writePes(), pattern contains no stitches
ERROR: libembroidery-convert-main.c main(), writing file test.pes was unsuccessful
*** Error in `/home/jens/workspace/Embroidermodder/libembroidery-convert/libembroidery-convert': free(): invalid pointer: 0x00000000017478d0 ***
Speicherzugriffsfehler

Then i created a own SVG with Inkscape. Only a bezie path and try to convert it. Last output is:

ATTRIBUTE:
id
VALUE:
"path3019"
inkscape:connector-curvature
"0"
ATTRIBUTE:
/
OBJECT SUMMARY:
ERROR: format-pes.c writePes(), pattern contains no stitches
ERROR: libembroidery-convert-main.c main(), writing file test2.pes was unsuccessful
redteam316 commented 10 years ago

I just pushed a few commits that revert the SVG crash and will allow the converter to output polylines as stitches. Pull in those changes and try again.

jedie commented 10 years ago

OK, crash is away. The test SVG from here can i now open.

My simple test SVG can i also open. But get a empty scene.

IMHO a simple howto would be great. e.g.: Write a text in Inkscape or direct in Embroidermodder2 and create a stitch file, ready to print. Is this possible in Embroidermodder2 in the current developer state?

I saw many html document files e.g. https://github.com/Embroidermodder/Embroidermodder.github.io/blob/master/doc-tutorial.html but the important one are empty :(

IMHO a good idea: Create a list of features that worked currently and missing features.

btw. whats with the kickstarter project? What's the timeline there?

redteam316 commented 10 years ago

The reason my SVG file works and that yours doesn't is because you need to convert the paths to polylines/polygons/lines within Inkscape before saving the SVG. Take a quick look at this, it's also referred to as flattening or simplifying of the curves. http://www.inkscapeforum.com/viewtopic.php?f=5&t=4308 and there are apparently several methods to do it.

Good to see you found the docs. They are a bit lacking at this point and I want to do videos to supplement the text that will go there since that would be better for beginners. Any third party tutorials or pull requests to the docs are certainly welcome. Until those are updated, I can tell you that the interface is very similar to AutoCAD or DraftSight and you can reference their docs/tutorials for a basic idea of how it works. There are several people that have already spoken to me that are familiar with how most CAD apps work and they required no docs whatsoever. Others like yourself who may not be familiar with CAD have also expressed a desire for designing in different applications and using Embroidermodder 2 just for fine tuning. I would like to provide a minimum amount of docs so that someone can easily get up to speed, it's just not the most important thing at the moment.

Various projects handle documentation differently. SDL is an example that comes to mind where the core developers solely focus on developing and leave docs and wiki up to the community and it works out well. Others projects do it differently. In my opinion, the approach SDL takes is the proper one, because unless you can step in and do the technical aspects, it still slows down development.

In it's current state, Embroidermodder 2 is suitable for creating designs and saving them as DST or PES(The 2 most common embroidery formats). Doing blackwork type of embroidery or quilting is what I would say it is best for currently. I have a manual satin command in my working copy that eventually will make it's way upstream and will improve design creation. The TODO list is a pretty good indication of what currently isn't working. I think it's best to get feedback from actual users so that I have a better idea on what they also consider an important feature.

The Kickstarter is still going to happen and I will make an update nailing down the date when I am absolutely positive I want to launch, that way it is clear to all interested when it will launch so that they can back it early on. There were a few obstacles that prevented launching when I wanted to previously and I have gotten some good feedback from several sources since that I want to address first to improve the chances of success. Also, I would like to be able to show a working demo on an Arduino since that is one of the rewards and adds a level of credibility that I think otherwise isn't clear. If the Kickstarter doesn't work out, development speed will be severely crippled as I cannot self-fund the project forever and will be forced to look elsewhere for revenue.

Since you asked, what is your opinion on the kickstarter?

redteam316 commented 10 years ago

Apparently Inkscape still saves the data as paths with both of the methods I mentioned earlier. Either there is a way to do this deeper within Inkscape or they just don't do it since it is easier not to convert the types when saving. I'll take a look into it some more but it's probably just quicker and easier for me to finish it up in our code. I'll post back here when it is working.

jedie commented 10 years ago

Thanks for the response.

IMHO it's a good idea to include the documentation into the web page. Because known will find them normally.

I didn't find the way to create "stitches" from a form. e.g.: Create a simple circle and say this circle should be filled with stitches. Or the example screens on http://embroidermodder.github.io/features.html e.g. the debian text. Seems to be a simple path of the letters with the meta information "wide stroked stitch"

If i understand you right, you will add the feature, that it isn't needed to convert SVG paths to polylines/polygons/lines?

Maybe we should move the discussion to http://sourceforge.net/p/embroidermodder/discussion/ ?

redteam316 commented 10 years ago

The discussion is fine here considering it started here. I'll tweak the main pages so the docs can be located easier for others later. The main reason they aren't linked in already is because they are still incomplete. If you wish to improve them, please send a pull request and I will review it.

The Embroidermodder 2 app doesn't have an easy way to fill quite yet, the satin command I mentioned previously will be an easy way to manually digitize text. Many people I have spoken to prefer manual over automatic since they have more control over the design to a certain extent and naturally comes before automatic stuff such as filling.

I'm currently working on improving the libembroidery backend because it is currently the source of almost any crash when opening/saving. I will be adding handling the SVG paths properly soon so you wont need to perform any Inkscape magic to get it to work. Inkscape should be able to do it though...

x2nie commented 10 years ago

Hi, Perhaps, this issue went to "blank scene" issue. Since the SVG issue has been solved. ? If so (like I faced too), then user need to double chek the settings: menu Setting->Settings then tab LineWidth, and make sure the both checkboxes ("Show LineWeight" + "RealRender") has been checked. Its a solution for me.

I hope it helps. :)

redteam316 commented 10 years ago

@x2nie, that may help @jedie identify what is importing, but I don't think it solves the issue. Inkscape seems to save most shapes as paths regardless of if they need to be or not. Anything that does not contain curves should be able to be saved as a polyline or polygon, yet Inkscape still doesn't do it(by default at least).

The SVG format in libembroidery isn't complete yet, SVG a very large specification. Inkscape happens to just be one of the most commonly used SVG editors with a noble goal of implementing the entire SVG spec(which AFAIK they haven't done yet either).

To be clear on what a 'path', a 'polygon' and a 'polyline' are, here are two files that are visually identical, yet only the polygon and polyline versions will import into Embroidermodder 2 currently:

Path Version (does not work, directly from the SVG spec 08_01.svg)

<?xml version="1.0"?>
<svg width="4cm" height="4cm" viewBox="0 0 400 400"
     xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny">
  <title>Example triangle01- simple example of a 'path'</title>
  <desc>A path that draws a triangle</desc>
  <rect x="1" y="1" width="398" height="398"
        fill="none" stroke="blue" />
  <path d="M 100 100 L 300 100 L 200 300 z"
        fill="red" stroke="blue" stroke-width="3" />
</svg>

Polygon Version (works, modified by me to show that they display visually identical)

<?xml version="1.0"?>
<svg width="4cm" height="4cm" viewBox="0 0 400 400"
     xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny">
  <title>Example triangle01- simple example that uses 'polygon' instead</title>
  <desc>A path that draws a triangle</desc>
  <rect x="1" y="1" width="398" height="398"
        fill="none" stroke="blue" />
  <polygon points="100,100 300,100 200,300"
           fill="red" stroke="blue" stroke-width="3" />
</svg>

Polyline Version (works, again edited by me, and still visually the same)

<?xml version="1.0"?>
<svg width="4cm" height="4cm" viewBox="0 0 400 400"
     xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny">
  <title>Example triangle01- simple example that uses 'polyline' instead</title>
  <desc>A path that draws a triangle</desc>
  <rect x="1" y="1" width="398" height="398"
        fill="none" stroke="blue" />
  <polyline points="100,100 300,100 200,300 100,100"
           fill="red" stroke="blue" stroke-width="3" />
</svg>

Until I can fully implement path importing properly, anyone wanting to use Inkscape will need to figure out how to make it save as polygons or polylines. Hopefully this clarifies the issue.

redteam316 commented 10 years ago

Updated my previous post showing even more examples.

X-Ryl669 commented 6 years ago

For information, you can do that like this (online in your browser): https://stackoverflow.com/questions/39402918/convert-path-from-svg-to-polyline

Or like this (online tool) https://betravis.github.io/shape-tools/path-to-polygon/ Using node: https://www.npmjs.com/package/svg-path-to-polygons In Java: https://takuro.ws/2014/03/18/convert-svg-path-data-to-svg-polygon-data/

This gist too: https://gist.github.com/Phrogz/845901/3fddefa45259963d675c6fe07781e992ec9052c7 In C++ (since you're using Qt) (last answer): https://stackoverflow.com/questions/9247564/convert-bezier-curve-to-polygonal-chain

Metallicow commented 6 years ago

@X-Ryl669 Thanks for the links. This is useful also for pythonistas. https://pypi.org/project/svgpathtools/

tatarize commented 5 years ago

It's also not horrible to note that the way inkscape calls extensions it usually just uses a bunch of commands setup in inkscape and then a link to a temporary svg it wrote. You could mix that with svgpathtools rather than inkex. Or if there's full fledged SVG loading, any program that could load an SVG could basically work as an inkscape extension, with very few file added into inkscape's extensions.

tatarize commented 2 years ago

I wrote a pretty interesting python loading routine with svgelements. Based, in part on svgpathtools ( https://github.com/meerk40t/svgelements ), but the entire routine is a pretty hefty bunch of code. It took me a couple months of work, and I still think I more or less did it wrong since I didn't correctly account for the DOM.

Also, codewise nanoSVG is a really solid and compatible ( https://github.com/memononen/nanosvg ) with C code, and would very likely be the best way forward. It's a pretty impressive library. It reads svgs and output quad bezier curves. Having done a lot of work with SVG I would say this is the easiest and likely best way forward. And the library itself is quite impressive.