New Parts Editor released

Hello Fritzing Fans,

We have decided to release the new Parts Editor in two phases. The first phase, included in the latest release (0.7.9), is already easier to use  and more powerful than the old Parts Editor, but you still have to do a lot of preliminary work using an SVG editor like Inkscape, Illustrator, or CorelDRAW. In the next phase we hope to eliminate much of the need to use these programs.

How to start

The new approach is very different from that of the old Parts Editor, and explaining that difference is the purpose of this document. The first big change is that you cannot create a new part from scratch–you must begin with a part that already exists. So the best thing to do is to find a part that is pretty close to what you eventually want. If your part is really different from anything else, then just to try to match the number of connectors. For example, if your part needs 39 pins, then start with a generic IC part, change it to a SIP (single inline package) and give it 39 pins. Though finding a part to begin with may seem like a burden, it will save you effort as you go through the process.

You can open the new parts editor by right-clicking a part in a sketch and choosing the ‘Edit’ option; choosing ‘Edit’ from the Part menu; right clicking a part in the Parts Bin and choosing the ‘Edit’ option; or using the Parts Bin drop down menu.

Six views

The new Parts Editor no longer tries to display everything in a single view.  Instead, it works like the sketch window which has multiple tabs with only one tab visible at a time.  In the new Parts Editor there are six tabs: Breadboard view, Schematic view, PCB view, Icon view, Metadata view, and Connectors view. As you might expect, the first four views are for the part images; the Metadata view is where you enter the part’s title, author, and other properties; and the Connectors view is for editing connector metadata, and for adding or removing connectors. For the latter, you just type in the number of connectors you want.

Loading new images

To load the SVGs for your part, switch to the appropriate view, and use File > Load image for view. As before, you can load SVGs in all views and gEDA .fp files and KICAD .mod files in PCB view only. To create an SVG for any view, you must use an external SVG editor (Inkscape, Illustrator, CorelDRAW, or a text editor) to layout the elements that will be used as connectors. The SVG example below uses <circle> elements for connectors.

Loading PNG or JPG images directly is possible, but since these become SVG images with only a single element, there is no way to place individual connectors. We also  discourage the use of PNG and JPG because these are raster-based rather than vector-based, so they don’t look good when scaled. If you still prefer to use PNG or JPG, we recommend that for now you open them in an external SVG editor and add connector elements there (see below for more about ‘connector elements’). Save the result as an SVG, and use that in the Parts Editor.  In phase 2 you will be able to add connector elements directly in the Parts Editor.

Since you have already begun with a part, it may be that you will only have to load a single image for a particular view–you do not have to replace all the images in the original part.

It is still necessary to prepare SVGs for PCB view by grouping elements in layers: copper0, silkscreen, copper1, etc. (Layering will be handled in the phase 2 parts editor.) The best way to understand the layers is to open up one of the core pcb svg files, For example have a look at the file crystal_hc49U.svg. Silkscreen layer has four while lines, the two copper layers share a pair of circles as connector elements.

<?xml version="1.0" encoding="UTF-8"?>
<svg baseProfile="tiny" height="0.20306in" version="1.2" viewBox="0 0 46684 20306" width="0.46684in" xmlns="http://www.w3.org/2000/svg">
    <desc>Fritzing footprint SVG</desc>
    <g id="silkscreen">
        <line stroke="white" stroke-width="1000" x1="1000" x2="45684" y1="1000" y2="1000"/>
        <line stroke="white" stroke-width="1000" x1="45684" x2="45684" y1="1000" y2="19306"/>
        <line stroke="white" stroke-width="1000" x1="45684" x2="1000" y1="19306" y2="19306"/>
        <line stroke="white" stroke-width="1000" x1="1000" x2="1000" y1="19306" y2="1000"/>
    </g>
    <g id="copper1"><g id="copper0">
        <circle cx="13736" cy="10153" fill="none" id="connector0pin" r="2750" stroke="rgb(255, 191, 0)" stroke-width="2000"/>
        <circle cx="32948" cy="10153" fill="none" id="connector1pin" r="2750" stroke="rgb(255, 191, 0)" stroke-width="2000"/>
    </g></g>
</svg>

Sometimes you will want to reuse the breadboard image as your icon image. There is a shortcut for this under File > Reuse breadboard image. You can also find the options: File > Reuse schematic image, and File > Reuse PCB image.

For certain parts–like a breadboard–there is only one view image. For technical reasons, you have to tell the Parts Editor this is what you want.  Use View > Make only this view visible from the current view (one of Breadboard, Schematic, or PCB) to make the part invisible in the other two views.

Undo, save, show in folder

The next big difference from the old Parts Editor is that undo is always available, even after loading view images. Furthermore, you can save your changes at any point and keep working–the new Parts Editor is less like a dialog and more like a full document window.

If you start with a core part (i.e. a part from the Fritzing distro), saving is equivalent to “Save As”. A new part will be created in your local storage area (explained below) and added to the “My Parts” Bin. If you are editing a custom part that was in a sketch, the part will be updated whenever you save (core parts are not updated). If you want the new part to display in the My Parts Bin the next time you run Fritzing, remember to save the bin (use the drop down menu at the upper left of the bin). If you start editing from a part in the My Parts Bin you have a choice between Save (which will overwrite the part), and Save As (which will create a new part and add it to the My Parts Bin).

On Windows the local storage folder is something like C:\Users\[username]\AppData\Roaming\Fritzing\parts\user\, and SVGs are stored in C:\Users\[username]\AppData\Roaming\Fritzing\parts\svg\user\. On Linux and Mac this would be ~/.config/Fritzing/parts/user/ and ~/.config/Fritzing/parts/svg/user/.

To find the SVG image for the current view on the desktop, choose File > Show in Folder. On Mac and Windows this will open a folder on your desktop with the SVG file selected. Under Linux you get the folder but no file selection (if anyone has advice about how to get selection to work, we would be grateful).

Associating a connector with its SVG counterpart

The next task will be to associate each connector with its counterpart in the SVG for each view. This is handled very differently from before. For an example, I am going to use images from a part created by Shunichi Yamamoto (who graciously gave us permission to include them in this tutorial, and who also helped beta test the new Parts Editor).

The new part will have 39 pins, so we begin with a Generic IC part and drag it into an empty sketch. There we use the Inspector to change it a to SIP and give it 39 pins. Then we open that in the new Parts Editor with a right-click.

starting up

Next we load the new breadboard image using File > Load image for view.  In the Tools widget at the upper right, you see a list of connectors. Choose one to make it the current or active connector. If it has already been associated with an SVG element, that element will display a marquee highlight. Since we are just starting out, we will choose pin1 which is not currently associated with any SVG element.

pin1

To create the actual association click the “Select graphic” button over in the Connectors widget. This basically puts you in a “mode” that lasts until the next time you mouse down. If you want to escape the mode, click anywhere outside the part or use the escape key. You can only make the association when you are in this mode (this keeps you from accidentally associating a connector to a graphic when you didn’t intend to).

In the mode, move your mouse over the SVG. As you do so, different SVG elements will highlight. It is often the case that any given mouse location can refer to multiple SVG elements (or groups of elements). Use the mouse wheel to highlight other elements above or beneath the currently highlighted one (in the z-order). If you are already on the bottom layer then the next wheel “downward” will make the element flash white; a similar white flash will occur if you are already at the top layer and wheel “upward”. In other words, the flash signifies you can’t move any further in the z-order in that direction.

Here are three highlights from the same mouse position, using the mouse wheel:

highlight1
highlight2
highlight3

The first highlight is the one we want so we mouse down when the wheel gets us back to that small rectangle. Now the element has a marquee to show that it is the current pin, and you also see the terminal point as a crosshair which defaults to the center. The terminal point is the place where a wire attaches to the connector.

assoc1

After associating pin2 and pin3 we have:

pin3

Adjusting terminal points

In PCB and Breadboard view the terminal point is usually the center of the connector so you don’t have to do any thing else.  But in schematic view the terminal point is usually near the end of the connector. So let’s go to schematic view.  We start with the original SVG image. Note how the connectors are already showing their anchor points. Pin3 is the current connector.

schematic

Now we load the new schematic image and start associating pins.

schematic2

Here is what the Connectors widget looks like with pin3 as the current connector:

tools1

Notice that since we have selected graphics for three of the connectors, those connectors are checked in the connector list.

You can use the buttons or spinners to adjust the terminal point. Here is a close up after hitting the W button, and clicking the X spinner twice (look at the pin marked ‘AN2’):

schematic3

You can also drag the terminal point directly by mousing down on it when its SVG element is highlighted.

Setting internal connections

An internal connection is when a two or more connectors in a part are already connected, for example the GND connectors on the Arduino UNO. You can specify and edit internal connections by clicking on the “Set internal connections” checkbox in the Connectors widget–it’s beneath the connectors list (you can see it in the image of the Connectors widget, above). Since we are talking about the Arduino UNO, here is what it looks like when Set internal connections is checked:

bus1

The green lines represent the internal connections. To remove an internal connection, right-click the line and choose “Remove internal connection”. To add a new connection, just drag a line out from one connector to another.

Known limitations

The following feature are due in phase two:

  • adding holes
  • mixing THT and SMD connectors–for now you must start with an SMD part to create a new SMD part, and start with a through-hole part to create a new through-hole part.
  • control over SVG element layering
  • direct manipulation of SVG elements
  • setting up parts with bendable legs.


Bye for now

That’s pretty much the phase one story. We hope you like what you’ve seen. Stay tuned for phase two.

Cheers,

— The Fritzing Team

33 thoughts on “New Parts Editor released

  1. There’s a bug in the PCB image import. If the document is in mm units in Inkscape, the import will be scaled improperly. BB and Schema import work properly with mm-defined SVG.

    Also, is there a reason why tags have to be nested together ?
    For me any other way of naming the copper layer results in “there is no copper layer defined”-error

      1. Sorry, missed this comment. The nested tags requirement will be relaxed in a future release. Adding the mm issue to the issue tracke–though would it be possible for you to email the svg to info .at. fritzing .dot. org?

        Thanks.

        – j

  2. I am trying to create a custom part with little luck. I tried to follow part editor help but you do not identify the files loaded so I can not replicate this exercise.
    Can you please post this infor and perhaps a link to the needed files.

    Thanks

    1. This is a fair comment, and we will rewrite the help to include a workable example including files. That being said, I think you could put together a working example on your own by using two Fritzing parts with the same number of pins (or nearly so) and try creating a new part by using a breadboard image from one part, and keeping the other images the same.

    1. Sorry, I am not sure what wires you are talking about. Can you post an image someplace–or send an email to info .at. fritzing .dot. org?

      Thanks.

  3. I’m currently trying to set up the connections in the schematic and I am trying to do something like the Arduino Uno on pin MOSI/PWM D11 where there are 2 pins on one connection where the pins share an internal connection. However I can’t get it to work Fritzing will only let me put one pin.

    1. Hi Zane.

      You can only have one connection per pin (per graphical element). The way this is handled in Fritzing schematic view is that there are actually multiple graphical elements on top of each other, so you only see the topmost. Then, in one of the other parts editor views (breadboard or pcb) where each pin is separately visible, use the “show internal connections” checkbox to make the internal connection.

      Most of the Core Arduino parts work this way, having multiple GND pins.

      Hope that helps.

      – j

  4. Hi. I have created a custom breadboard part in illustrator and saved the SVG file. I am attempting to follow these instructions for importing the part, but the “File>Load image for view ” does not exist in my File menu.

    In fact, several of the commands listed above under “File>…” do not exist under my “File” dropdown menu .I am using a Mac OS 10.7.5.
    Do you have any advice?

    1. Hi Linda,
      Maybe you are looking at the Fritzing main window’s menu instead of the parts editor’s menu? That could explain the difference.
      Ciao,
      André

      1. Yes, that was it. Thank you.

        I am now able to load the new image into the Breadboard view and the icon. I see that my ability to alter the other views (such as the PCB) depends on my choice of original “device”, or that I need to make brand new images in SVG files that are unique to the device that I’m interested in.

        I see the comment below mine and agree, that it would be useful for a kind of library like this. (Also, I realize that all that you’re doing is open source, so perhaps I should get in there and make that library myself!).

        Thank you for all this great work and for sharing with everyone.

  5. One thing that would *really* help newbies like myself is a “library” of standard IC packages. Just like the 8-pin DIP “IC” in the core catalog. Reading the source for that, it looks like someone who is familiar with Fritzing could easily whip up a python generator script for *all* dip packages (and at the same time, all other popular standard ones too).
    Or better yet, package such a python file with the software.
    I guess I might do it myself at some point as writing a dedicated component description for would teach me the required parts of the internal file formats, so the extra effort needed for such a script sounds (to my inexperienced mind) small. But first, I need to find time to understand the format. And *that* is going to take time, as I have never used Fritzing before, and cannot start using it yet, as it lacks that particular package I have in my next design 🙂

    1. I think much of what you request already exists–check out the Generic IC part, which, using the Inspector, allows you to choose packages, set pin counts (for DIPs and SIPs), etc. You might also check out Pin Headers.

    1. My guess is that the text elements inside the SVG contain a font-size with “px” units which Fritzing is attempting to compensate for. Make a copy of your schematic SVG, open it in a text editor, and remove any “px” units, then try loading that image instead.

      That being said, if you are simply creating a custom DIP part, there is no need to use the Parts Editor. You can simply use a Generic IC, then set the number of pins using the Inspector. There is also an option to change the chip label and the pin labels.

      1. Thanks Jonathan, I didn’t realize I had the option of customizing a generic IC. That will do just fine for me 🙂

  6. Hello,

    Could someone please explain the real way of using the “Inspector”???

    I would like to use a 16 pin DIP IC. However, this does not exist in the standard core parts bin. Based on replies to previous comments here, I selected the 8 pin DIP IC (which is listed as Generic IC in the families property) and tried to use the Inspector to modify the pin count to 16. However, all options are ‘greyed’ out. In other words, nothing can be selected and/or modified. Is there another IC which is considered a generic IC that can actually be modified?

    Also, how can a ZIP IC package be added? This is a non-standard IC package and I do not believe modifying any existing SIP or DIP would be able to create a ZIP IC package.

    Since ICs are so common, it would be very beneficial if there could be a standard IC parts bin of most sizes and package styles.

    Cheers,

    Ian

    1. Hi Ian.

      You can’t modify the part when it’s still in the parts bin. Drag it into your sketch, and the various controls available in the Inspector will be enabled.

      – j

  7. Hmm, this tutorial wasn’t clear to me… I’m stuck on file>load image for view… Then what? When I did that I was directed to …Fritzing>parts>svg>user>breadboard where I basically had just 4 cryptically named svg’s to choose from… The selection seemed awfully random, but when I opened one I recognized it as a part I have opened before in one of my “play” sketches. It was not the image I wanted so I undid the action. What is worst though, is that when I went back to look at one of the other three, there was five svg’s in the folder… I opened another one at random as I didn’t remember the numeric name of the one I had previously looked at, and it was another part image I recognized from before, but didn’t want. So I undid again. When I went back the third time there was six svg files in the folder… What the hell?! They keep multiplying and I don’t know which one is which because they are all named like this: “prefix0000_5e54ee3483d57803fc1688154f0aa377_10_breadboard.svg”

    1. Oh… I see… Those are temporary svg’s… I can place my own svg’s in that folder then probably…

  8. I generally like the workflow, except there is a problem – you cannot tell from the GUI where (as in, an absolute file path) is a custom part saved; along with where are the schematic, breadboard, PCB .svg’s saved. Example: I work on a custom part, then save it as new without changing the old metadata first (so now I have two parts with same name and icon showing in the Parts), then I think “oh no” and I change the metadata and do a new Save As (meaning the duplicate is still there). Then Fritzing crashes on me, I restart, realize the new parts are still in Parts, but do **not** show in My Parts – and so right-click+ “Remove Part” is greyed out, so I cannot remove the duplicate! Then I see in ~/.config/Fritzing/parts/svg/user/schematic/ I have prefix0000_2f4d5771766ef72960ef38d6d177a2aa_0_schematic.svg and prefix0000_2f4d5771766ef72960ef38d6d177a2aa_1_schematic.svg, but I cannot tell which is which! So if one could observe in the GUI the location of the part and components, then I could delete files manually even if Fritzing crashes on me. So, I hope a facility to show the paths to the custom parts will be considered…

  9. Is it necessary to add custom SVG files to ANY of the 6 views of your part (in editor mode), when you want to print (the custom part) it as part of PCB design…. Can I skip adding ‘custom images’ (SVG files) to the ‘edited part’?… I assume you can and that it doesn’t effect the actual printing of the PCB board… or does it?

  10. I seem to be having a problem with the editor. All I want to do is be able to change the color code and value of a part, in this case a resistor. I would think this should be an easy thing to do as the part is pretty much the same and uses the same graphics. It looks like the layers are there, but they can’t be changed. Making a new part for every resistor or part that looks the same kind of makes it hard to get the work done. Even a pull down menu with a list of say different values for the resistor to choose from would make this much easier to use.

  11. Hello-

    I have recently downloaded Fritzing 0.9.2b.64 and need to make some custom parts. I downloaded and installed the Droid fonts from your website, but when I load an image using your Droid Sans font the editor gives me a warning that it only accepts OCRA and Droid fonts and it will change my font accordingly. Then the text I’ve added gets altered in an unreadable manner. Since I’m using your own files, I’m not sure what else I can do to troubleshoot this issue.

  12. I am having an error trying to load a new schematic image. I have my SVG file saved in the Documents/Fritzing folder and when I try to load it I get back the following:

    “Error reading file /var/folders/99/8ns58fdd3flb0sfx6m6qq64c0000gn/T/fritzing_pe_e95e894acf41cda1dea856f54e471a00/prefix0000_e95e894acf41cda1dea856f54e471a00_1.fzp; unable to create renderer for svg /Users/User/Documents/Fritzing/parts/svg/user/schematic/prefix0000……”

    Does anyone know what this means and how I can fix it?

Leave a Reply

Your email address will not be published. Required fields are marked *