Parts editing: breadboard view does not render properly

Hi, I’'ve made MQ-2 gas sensor module svg for breadboard view using Inkscape. Some days ago, when I tried to load svg for the new part in Parts editor (File->Load image for view…), it did render properly svg file but, when I tried to save the part, it turned to be shown badly in Fritzing fzz project. Now, when I try to load svg in Parts editor, svg file is already shown badly into Parts editor itself :open_mouth:

Here is the correct svg:
mq2

Here is as svg becomes after exported fzpz part from fritzing (and as it appears into Fritzing main window): https://ibb.co/VtxWgrH

I don’t know why this issue happens. Any ideas?

Bad svg:
svg.breadboard.MQ-2 Gas sensor_5cab8c7409bf00f4892dbd21feeb6aa4_4_breadboard

At a guess it is the linear gradients. Fritzing I don’t think supports them. The bad svg: is a jpg image not an svg so I can’t compare what got exported from Fritzing, but is likely missing the linear gradients.

I expect the linear gradient is missing in the svg from Fritzing.

Peter

Anyway, oddly, some days ago I loaded svg file into Fritzing Parts editor (File->Load image for view…) and linear gradient was shown properly :roll_eyes:

The png picture which I posted is just as svg file appears in Fritzing breadboard view :wink:

So, does Fritzing support just only solid color parts? How should I fix the view in order to make things better (should I change color of external circle to silver in place of linear gradient?)?

Upload the current part file (the .fzpz file, upload is 7th icon from the left in the reply menu) and I`ll have a look. It may be that Fritzing supports the linear gradient but parts editor does not, and thus you need to edit the files directly rather than use parts editor. Parts editor (which I rarely use!) I think deletes the definitions when it outputs parts.

Peter

MQ-2.fzpz (9.5 KB)

Now, when I load correct svg in Parts editor, it’s shown properly but, when I save that and I try to get an instance of this part in fritzing breadboard view, it’s shown badly again.

It appears to be something to do with parts editor. I downloaded your fzpz file and unzipped it to get

‘part.MQ-2 Gas sensor_d41ce08d82ad6a59be64df66daa2671c_2.fzp’

‘svg.breadboard.MQ-2 Gas sensor_d41ce08d82ad6a59be64df66daa2671c_2-orig_breadboard.svg’

‘svg.breadboard.MQ-2 Gas sensor_d41ce08d82ad6a59be64df66daa2671c_2_breadboard.svg’
‘svg.icon.MQ-2 Gas sensor_d41ce08d82ad6a59be64df66daa2671c_2_icon.svg’

‘svg.pcb.MQ-2 Gas sensor_d41ce08d82ad6a59be64df66daa2671c_2_pcb.svg’

‘svg.schematic.MQ-2 Gas sensor_d41ce08d82ad6a59be64df66daa2671c_2_schematic.svg’

which is the fzp file and the 4 svgs in fzpz format. Then I renamed

‘svg.breadboard.MQ-2 Gas sensor_d41ce08d82ad6a59be64df66daa2671c_2_breadboard.svg’

to

‘svg.breadboard.MQ-2 Gas sensor_d41ce08d82ad6a59be64df66daa2671c_2-orig_breadboard-orig.svg’

then copied your original svg in to

‘svg.breadboard.MQ-2 Gas sensor_d41ce08d82ad6a59be64df66daa2671c_2_breadboard.svg’

ran FritzingCheckPart.py against the files to clean up any lingering px in font-sizes and rezipped the part. Loading the new part works correctly in Fritzing indicating the problem is in parts editor export of the new part. The linear gradients appear to work in Fritzing but have export difficulties in parts editor. Note that FritzingCheckPart found a variety of things to complain about that I haven’t corrected here (the most important is no breadboard layerId which will prevent the part from exporting as an image!)

What I would do (which I normally do anyway!) is to ignore parts editor and edit the files directly that is likely the only way at present to keep the linear gradients working correctly. How I make parts (which is what I used here) is decribed in this tutorial set:

and here is the corrected part (I’ll poke at the differences between the two breadboard svgs and see if I can figure out what parts editor is deleting on export.)

MQ-2-fixed.fzpz (9.6 KB)

edit: the problem is indeed the linear gradient but I don’t know why. The left is your original svg the right is the breadboard from the fzpz file. Both have been ungrouped for easier visability, both are now identical (I edited the path on the breadboard svg in xml editor to be identical to the one in the working svg, but it still doen’t display correctly!) For some reason the linear gradient doesn’t get rendered but I don’t know why.

As far as I can see the gradient stuff is all the same in both svgs, just one works and the other doesn’t unless the layer1 is important to the linear gradient (I don’t know anything about linear gradiants!) as that seem to be the only obvious difference between the two svgs.

Peter

1 Like

It appears to be something to do with parts editor. I downloaded your fzpz file and unzipped it to get

‘part.MQ-2 Gas sensor_d41ce08d82ad6a59be64df66daa2671c_2.fzp’

‘svg.breadboard.MQ-2 Gas sensor_d41ce08d82ad6a59be64df66daa2671c_2-orig_breadboard.svg’

‘svg.breadboard.MQ-2 Gas sensor_d41ce08d82ad6a59be64df66daa2671c_2_breadboard.svg’
‘svg.icon.MQ-2 Gas sensor_d41ce08d82ad6a59be64df66daa2671c_2_icon.svg’

‘svg.pcb.MQ-2 Gas sensor_d41ce08d82ad6a59be64df66daa2671c_2_pcb.svg’

‘svg.schematic.MQ-2 Gas sensor_d41ce08d82ad6a59be64df66daa2671c_2_schematic.svg’

which is the fzp file and the 4 svgs in fzpz format.

Weird. my MQ-2.fzpz appears a bit different when unzipped, as shown by this archive screenshot:


In particular, svg.breadboard.MQ-2 Gas sensor_d41ce08d82ad6a59be64df66daa2671c_2-orig_breadboard.svg is missing :neutral_face:

Now, I’ve edited my original mq2.svg, using breadboard id and reorganizing sub-nodes in the following way:
xml_editor
and I get the following svg (that also fixes the disappeared four screw holes):
mq2

Next, I’ve made the same steps you did at first, editing the fzpz archive directly:

Then I renamed

‘svg.breadboard.MQ-2 Gas sensor_d41ce08d82ad6a59be64df66daa2671c_2_breadboard.svg’

to

‘svg.breadboard.MQ-2 Gas sensor_d41ce08d82ad6a59be64df66daa2671c_2-orig_breadboard-orig.svg’

then copied your original svg in to

‘svg.breadboard.MQ-2 Gas sensor_d41ce08d82ad6a59be64df66daa2671c_2_breadboard.svg’

Now, when I import fzpz part into Fritzing, linear gradient is shown properly (and the four screw holes too!). Unfortunately, when loaded in fritzing, the part doesn’t show ‘blur’ effect, unlike Inkscape where it is clearly shown. Here is the updated fzpz part:
MQ-2.fzpz (12.9 KB)

That is because I didn’t include it in the .fzpz file. It isn’t necessary for the part, only to keep the original svg around here.

That could well be because Fritzing (really QT which Fritzing is built on) only supports the svg tiny subset (I think with some extras.) I’ll have a look at your svg as opposed to mine and see if I can figure out why I couldn’t get the linear gradiant to work for me.

edit:

Found it! I somehow managed to delete some of the defs relating to the linear gradient which makes it not work any more.

with that back in place my svg now works as well.

Peter

I mean that svg.breadboard.MQ-2 Gas sensor_d41ce08d82ad6a59be64df66daa2671c_2-orig_breadboard.svg is missing in my original fzpz part :neutral_face:

I mean that blur effect is missing when I import fzpz in Fritzing even if I edit fzpz directly instead of using Parts editor :disappointed:
So, I thought a way to solve/workaround this issue could be merging the two circles paths to one path but path functions as Union, Difference, Intersection, Exclusion, Division, Cut Path and so on don’t give the expected result, even if I duplicate the internal circle :frowning_face:

Even if I create the node, I don’t know what attributes/values I’ve to add to that, so I can’t test this method :thinking:

Using Inkscape, I’ve opened the svg file I’ve posted in the first post of this thread but, looking at xml editor, I’ve not found the additional two lines shown in the following screenshot:


How did you find them? :face_with_spiral_eyes:

I’ve also watched another video and inspected the howto but I’ve found no clues about solving this issue. Any ideas? :thinking:

For me on Inkscape 1.1.2 they appear in both svgs in the defs section. This is the original svg in Inkscape 1.1.2:

I suspect there isn’t a solution, Fritzing doesn’t appear to support the svg feature you want.

Peter

I’ve made the parts using Inkscape 1.0.1 and I can try with a more updated version if needed (even if I suspect nothing will change). Btw, I’ve used the original svg of the first post, that I post again here beow:
mq2
I don’t understand: your new screenshot doesn’t show the two additional lines related to 1015-5 and 1013-0 anymore :face_with_spiral_eyes:

I don’t understand:

Found it! I somehow managed to delete some of the defs relating to the linear gradient which makes it not work any more.

Are you saying that Blur effect doesn’t work in fritzing for you too?
I’ve thought to workaround that merging internal circle and external circle in order to get just only one circle. Unfortunately, I’ve not figured out what Inkscape function I’ve to use to do that :thinking:

I would agree, likely nothing will change. I don’t think the issue is in Inkscape but rather in Fritzing.

You look to be correct, I got a wrong svg in the initial look. This is the breadboard svg from your .fzpz file. Note the linear gradient doesn’t render in Inkscape

This is your original svg where the linear gradient does render in Inkscape

the problem appears to be in the style definitions for path871, in the svg from your .fzpz file the filter:url(#filter1015-5) element is missing in both the style and in the inline xml. Presumably that is why the path doesn’t render. It seems Fritzing deleted that when it processed the svg to write to the .fzpz file and that causes path871 to not render (in both Fritzing and Inkscape!)

Yes, it appears to me that Fritzing (or more likely QT) can’t render the blur. This is the breadboard view in Fritzing of the corrected .fzpz file:

this is the same svg displayed in Inkscape. The blur appears in Inkscape but not in Fritzing, indicating to me that Fritzing does not support the blur function and there likely isn’t anything that can be done about that.

the blur is not appearing in Fritzing likely meaning it can’t render it.

Peter

I’ve managed to recreate the blur effect using radialGradient in place of GaussianBlur. Here is a screen from fritzing:

It works, anyway it’s not easy to do because it needs radialGradient with Fill and Stroke and it requires to use additional nodes when using gradient tool but it’s very difficult working with them in order to get the desired result :tired_face:

Well at least you got the desired result :slight_smile: , which is far better than I could do.

Peter