Comments (78)
@tbfleming my SVG parser curently support all basics shapes (line, polyline, polygone, rect, circle, arc, ellipse), all paths commands, group, viewBox, defs and use.
from laserweb4.
Just created the repo for the ES6 rewrite as NMP module : https://github.com/lautr3k/lw.svg-parser
from laserweb4.
from laserweb4.
@tbfleming Just finished, when you have time, look at it
https://github.com/lautr3k/lw.svg-parser
from laserweb4.
Need to port my SVG parser to ES6.
from laserweb4.
"A": May be another OSX issue:
"CUTLETRAS" and "color boxes": No path objects. Current parser only handles groups and paths.
@lautr3k does your parser handle non-path objects?
from laserweb4.
@cojarbi Check Settings -> File Settings -> SVG PX PER INCH. It should have defaulted to 96, but if the defaults didn't initialize properly (e.g. empty or 0) then it may mess up the parser.
from laserweb4.
@tbfleming Settings are on the default 96
from laserweb4.
@tbfleming I can not find any more you said the format for the paths...
path1 = [
[x,y,x,y,x,y], // Shape or Line
[x,y,x,y,x,y] // Hole if shape
... // Hole...
]
path2 = [
[[x,y],[x,y],[x,y]], // Shape or Line
[[x,y],[x,y],[x,y]] // Hole if shape
... // Hole...
]
I think path1 ?
from laserweb4.
path1. It can be a mix of open and closed subpaths and the outer order doesn't matter. e.g. this is valid:
path1 = [
[x,y,x,y,x,y,...], // Open path
[x,y,x,y,x,y,...], // Closed path for a hole
[x,y,x,y,x,y,...], // Open path
[x,y,x,y,x,y,...], // Closed path for a hole
[x,y,x,y,x,y,...], // Closed path for outer shape #1
[x,y,x,y,x,y,...], // Closed path for a hole
[x,y,x,y,x,y,...], // Closed path for outer shape #2
[x,y,x,y,x,y,...], // Open path
[x,y,x,y,x,y,...], // Closed path for a hole
...
]
from laserweb4.
It uses this for fill and stroke color: [r, g, b, a]
from laserweb4.
I'm attaching a path stress test. This path object mixes up open and closed paths.
from laserweb4.
Hum... In my head a path can not contain another path. The only case is to define the shape holes. Otherwise it is a group of paths. I would like to be able to select only one shape at a time.
from laserweb4.
SVG path objects allow it. It's up to the user to decide when they create them.
from laserweb4.
If SVG didn't support it, then path union operations would sometimes be invalid.
from laserweb4.
Yes but if my parser gives you each item separately in a group, is not it better? Anyway that's how it works.
from laserweb4.
I hate the placement of that stupid close button :)
from laserweb4.
Me too !!!
from laserweb4.
That would be fine, as long as it doesn't mess up complicated cases. I'll see if I can construct a case that may give grief when breaking up.
from laserweb4.
The existing parser handles this case, but poly2tri hits a limitation. I just pushed a workaround which skips filling the inside when poly2tri barfs. I may have to dump poly2tri for another library.
Here's what it should look like:
Here's what it actually looks like because of the poly2tri issue:
- Right way to break it up: turn it into a 7-point path and a 5-point path.
- Wrong way: two triangles.
from laserweb4.
This test also exposed a bug in CAM that I'll track down.
What it does (wrong):
What it should do (jscut output):
from laserweb4.
Ok, I understand. My parser interprets it as two triangles. I will work on that.
from laserweb4.
The CAM bugs for Path Stress 2 are now fixed.
from laserweb4.
Be aware that there's a really nasty numeric stability problem finding intersections within paths. Known algorithms that solve it are complex. Don't try the obvious algebraic equations; they backfire badly with certain border cases. Use Clipper instead.
from laserweb4.
Un***kBelieveable.
from laserweb4.
from laserweb4.
@lautr3k es6 promises! nice!
from laserweb4.
It's now integrated.
from laserweb4.
+1 Jorge's comment
from laserweb4.
Let spoil the happiness, a bit...
error: TypeError: Cannot read property 'replace' of undefined at TagParser._normalizeTagAttr (http://localhost:8080/index.js:132578:40) at http://localhost:8080/index.js:132546:32 at Array.some (native) at TagParser._parseTagAttrs (http://localhost:8080/index.js:132540:40) at TagParser.parse (http://localhost:8080/index.js:132493:19) at Parser._parseElement (http://localhost:8080/index.js:131925:29) at http://localhost:8080/index.js:131868:39 at Parser.parse (http://localhost:8080/index.js:131861:21) at http://localhost:8080/index.js:131855:41
from laserweb4.
Did you npm run installdev
? If so, you might need to wipe node_modules and rerun it.
from laserweb4.
Never mind installdev
. I just reproduced it.
from laserweb4.
I'll hold off pushing to https://laserweb.github.io/LaserWeb4/dist/
from laserweb4.
test_ls3_paths.svg also fails at https://lautr3k.github.io/lw.svg-parser/dist/example/
from laserweb4.
It was running on the previous parser.
from laserweb4.
Fixed with skarab42/lw.svg-parser@a6562f5 due to trailing ";" on style attribute.
from laserweb4.
Updated. test_ls3_paths.svg exposes another issue. I use viewBox to transform the coordinates I get from Tag.paths. lw.svg-parser scrambles the viewBox values when these are present:
width="100%"
height="100%"
Please don't modify the viewBox values in lw.svg-parser; if you adjust the viewBox it then it will mess up the transform on my end.
from laserweb4.
If you want the document ViewBox use parser.document.viewBox
instead of tag.attr.viewBox
;) Sorry not yet documented.
from laserweb4.
After the main <svg>
tag was parsed you can access this two properties on the parser instance :
parser.editor // Editor info { name, version, fingerprint }
parser.document // Document info { width, height, viewBox }
// where viewBox is { x, y, width, height }
https://github.com/LaserWeb/lw.svg-parser/blob/master/src/parser.js#L14-L15
from laserweb4.
Plus from the Tag object you get two main functions :
tag.getPaths()
return an array of Path objects (all contours + holes)
tag.getShapes()
return an array of ExPolygons objects from Clipper.js (filled shapes)
Eg.: With your path.stress.2.svg
tag.getPaths()
return two triangles (3p/3p) and tag.getShapes()
two polygons (6p/4p).
from laserweb4.
Published on NPM ;) npm install lw.svg-parser
from laserweb4.
from laserweb4.
Updated the lw.svg-parser
module to v0.2.0 not a big change juste splitted code in smaller modules :
lw.svg-curves
and lw.svg-path
. https://www.npmjs.com/~skarab
from laserweb4.
What happened to paths? Yesterday the coordinates were in px; today I'm not sure what they are. They don't match px or mm.
from laserweb4.
I did not touch anything at this level, I just split the code into several modules.
from laserweb4.
@tbfleming please try to install from NPM npm install lw.svg-parser --save
simpler for maintenance ;)
from laserweb4.
@lautr3k It broke when I switched to the NPM package (coordinates messed up), so I didn't commit that.
from laserweb4.
@tbfleming I think it was already like that before, but you have not seen it. I just saw it on a document with width/height set to 100%. Other documents with a fixed size seems correct... Can you confirm?
from laserweb4.
Confirmed. It now uses the NPM package.
from laserweb4.
More generally it crashes on relatives units. I'll try to fix it tomorrow.
from laserweb4.
Finally done right now (em and %). Package updated ;)
Test file : https://www.w3.org/TR/2011/REC-SVG11-20110816/images/coords/Units.svg
Demo : https://lautr3k.github.io/lw.svg-parser/dist/example/
from laserweb4.
Confirmed fixed.
from laserweb4.
@lautr3k Could you preserve image tags? You don't need to do any processing, the xlink:href="data:..."
attribute matches the format I use to store images.
from laserweb4.
@tbfleming you can access original element via tag.element
from laserweb4.
@lautr3k it says skips them:
from laserweb4.
Haaaa ok, understood, yes of course !
from laserweb4.
Next year, promised I take English lessons.
from laserweb4.
Done <image>
and <text>
tags ;)
from laserweb4.
Image integrated:
from laserweb4.
Totally killer. Better workflow impossible
from laserweb4.
This rocks. Aside from the "laser diameter" not being a tool setting that gets auto populated from machine settings this is a highly workable work flow. Not much room for improvement on the usability side.
from laserweb4.
from laserweb4.
@lautr3k I assume beamSize controls the distance between lines. Does it control anything else?
@jorgerobles There may be cases where you want the line distance to be less than the laser diameter; it may produce interesting effects.
from laserweb4.
@lautr3k I assume beamSize controls the distance between lines. Does it control anything else?
The beamSize
need to be renamed toolDiameter
to be right. It does not handle only the space between the lines, but also the offset (toolRadius) of start /end of line to stay in the shape. And add a lineOffset
or toolOffset
parameter to add a voluntary gap betwen lines without touching the size of the tool.
from laserweb4.
New feature in the lab, I just changed the S by a Z, I work on multiple passes.
from laserweb4.
Would it be possible to add the possibility of opening a gcode file in lw4? I would like to take advantage of the simulator :)
from laserweb4.
from laserweb4.
Add invertColor setting, need to upgrade to [email protected]
.
from laserweb4.
from laserweb4.
I have an SVG render gremlin. The parser skipped one path
in my file and line
does not render on screen at all. The path
under shapes show up when selected but not the line
items.'
EDIT: Seems the parser doesn't like path 2's formatting.
Source files:
Example issues:
DevConsole Dump:
from laserweb4.
Some trouble spots with this file, besides the parse error above:
- Based on viewbox + width + height it looks like it's 1,000 px per inch, which is very odd.
- It uses style tags, which we don't support. Since we see no fill or outline, we assign a fill. That doesn't help the open shapes.
- I just reproduced this bug with an SVG from Inkscape: the selection mechanism fails to highlight single lines and paths with only 2 points.
from laserweb4.
I have solved the missing R
in my SVG. The parser does not like the letters grouped with the numbers in the paths. 0 z m 22
displays the letter while 0zm22
throws the error. That's a bit odd since the 98c0
grouping works just fine. The parser may have an issue dealing with more than one letter grouping.
My viewbox is messed up as CorelDraw's export has a precision
value and it rounds the internal values and is used to multiply the viewbox. I will need to look into its proper setting. Using internal styling
removes the embedded css and properly displays all the lines, polylines, etc. I can select everything except single line and paths with 2 points.
from laserweb4.
It creates a bitmap for hit testing. It uses similar code to paint both the selection and the hit test bitmap.
from laserweb4.
I fixed the line and 2-point path issues.
from laserweb4.
I'll fix the parser tomorrow.
from laserweb4.
I can confirm 2 point path and line issues are solved. Thanks!
from laserweb4.
Fixed in [email protected]
from laserweb4.
updated
from laserweb4.
Related Issues (20)
- Missing Installation Instructions HOT 8
- Windows frontend cannot connect to Raspberry Pi server HOT 3
- program freezes on gcode generation HOT 34
- Allow gcode comments in (parenthesis) since some controllers error on semicolon comments
- Features request HOT 10
- Features request HOT 2
- Clipped (cropped) Inkscape SVG files do not maintain the clipping in LW4 HOT 2
- Problems on firefox with popup/setState HOT 16
- Feature Request: Hatches
- Jerky motion due to too many instructions HOT 3
- Changes to frontend not reflected HOT 7
- Y axi is opposite HOT 5
- Where do I get the frontend for Linux HOT 8
- No supported Firmware Detected on Linux AppImage HOT 3
- Cut internal first HOT 1
- laser test button HOT 9
- Laserweb 4 and Mac OS Sonoma HOT 1
- laser starting point HOT 2
- Can I choose a language? HOT 1
- how to tell laser to cut inside or outside the line in laser web HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from laserweb4.