Potrace (Bitmap to vector)

[ghost]

We had Potrace.js in LW3

Users miss this feature in LW4.

Sure we could say - "do your tracing in Inkscape" ...

[jorgerobles]

@openhardwarecoza I see more useful render vector as bitmap. There are packages (commercial or free) equal or superior to potrace.

[cojarbi]

LW is all grown up but what will make it popular is its easy of use and "solution provider"

If that is taking a bitmap and converting it to raster just to add some edge marking around the bitmap i say, go for it.

I would go as far as letting the user add some basic shaped like squares to cut out an image for example

[jorgerobles]

LW is all grown up but what will make it popular is its easy of use and "solution provider"

I've seen tall castles crumble to ground by the weight of their flags. -- :smile: (sounds like a chinese proverb?)

If that is taking a bitmap and converting it to raster just to add some edge marking around the bitmap i say, go for it.

@cojarbi It would overcome also some performance issues. Too tight vectors consumes more power than a bitmap

[cprezzi]

I think before we add bitmap tracing, we should extend image manipulation (brighness, contrast...) to have a (real time) preview. ;) For a good tracing result, the user should at least be able to optimize the picture in brightness & contrast before the tracing is started.

[jorgerobles]

@tbfleming get realtime raster filter output is feasible but some background needed:

• Supposing there is a way (exists indeed) to get the data back after r2g filters (https://github.com/lautr3k/lw.raster-to-gcode/issues/5), where should be the best place to execute the filter processing?

  • Early capture: Instance r2g into raster operation, capturing dispatch, passing to a thunk action that dispatches image change with transforms, keeping 2 image dataUrl at the store. (Also, capturing dispatch could be done using a redux store observer what seems black magic to me, but will be a key feature to extensibility and plugins)

  • Late capture: Lets instance r2g on drawDocuments method, and pipe the filtered data to workspace, keeping only 1 image dataUrl on redux.

  • None of above: Using a floating preview of the image when is selected and is in currentOperation. Uses canvasFilters to resemble image and apply filters. :+1:

[jorgerobles]

@openhardwarecoza speaking of Potrace, what would be the flow? Will be a new type of operation, or work as a tool on selected bitmaps? The former could be a natural way to do, the later needs some heavy UI.

I'm ok to implement as long users are aware of their drawbacks: I've got some background on vector design and know quality vector shapes needs tweaking (reordering, simplification, etc.), and stray points could wreak havoc on Gcode generation and playing (that segment setting...).

[cojarbi]

Maybe adding some basic tools to adjust contrast and similar would help?

How would the operation type work: I select the file, choose Trace and then it creates another instance of the file in the tree and removes the operation?

[jorgerobles]

Work in progress https://github.com/LaserWeb/LaserWeb4/tree/image_editor

@tbfleming applying transform2d of traced image makes the traced vector go far away. What I'm missing?

[jorgerobles]

@tbfleming I've managed to put the traced on 0,0 with transforms, but cannot figure how to translate to doc origin :|

[tbfleming]

@jorgerobles : These variables and fields in loadSvg live in SVG space, not in WPos space: parentMat, combinedMat, point.x, point.y, x, and y. transform2d lives in WPos space.

The push in this code converts to WPos space:

for (let point of path.points) {
    let x = (combinedMat[0] * point.x + combinedMat[2] * point.y) / pxPerInch * 25.4 + combinedMat[4];
    let y = (combinedMat[1] * point.x + combinedMat[3] * point.y) / pxPerInch * 25.4 + combinedMat[5];
    p.push(viewBoxDeltaX + x, viewBoxDeltaY - y);
}

You need to apply transform2d to the converted point; don't pass it in as parentMat.

[jorgerobles]

Any suggestion before closing?