Creating Custom Parts in Fritzing

Step 2: Breadboard view

All graphics in Fritzing is vector-based and stored in the SVG format – Scalable Vector Graphics. Usually, a picture in a computer is represented by an array of pixels. After all, even the screen you are reading this article on is made out of loads of pixels. This approach to storing graphical information is called raster graphics. It’s great for digitally storing things like photos, but there’s a major catch – you can never get details smaller than one pixel. You can zoom in on the image, but all you will get are bigger pixels – not finer details. Of course, there are graphical programs and filters you can use to mitigate this issue, but there’s no “zoom and enhance” button that will magically “add” more details to the picture.

Vector graphics, on the other hand, deals with objects, not pixels. When you create a rectangle in a raster graphics editor (e.g. in the all-time classic Microsoft Paint), you change the color of some pixels. In vector graphics editor, you create a rectangle object. It has properties like color; it can be moved, stretched, turned or otherwise edited. When you zoom in on the vector rectangle object you never lose precision. Then, when you are finished with the vector graphics, you export them to bitmap – a raster image. Here’s the big advantage: you can define the resolution of that bitmap. It can be as big or as small as you want!

In this guide, I will be using Inkscape for all the vector graphics. It’s free and very easy to use. Plus, it comes in with built-in tutorials! The following image shows what the main window looks like. There’s the toolbar on the left, snapping options on the right, setting of your current tool on the top, and some basic colors for you to pick from on the bottom.

Figure 4. The main window

First, we need to enable grid, which will make placing objects a little bit easier for us. Go to “File” menu and click “Document Properties” (or use the keyboard shortcut Ctrl+Shift+D). A new window will pop up. Go to the third tab (“Grids”). Select “Rectangular grid” and click the button “New”.

Figure 5. Document Properties window

A blue grid will appear in the main window, we can change the grid size by changing parameters “Spacing X”, “Spacing Y” and “Units”. Since we will be dealing with dimensions in millimeters or inches, I suggest setting the grid size to 0.1 mm or 0.01 in. We can of course change the grid size at any time, depending on what sort of component are we dealing with.

We’re now ready to create the first vector object! Usually, I start by creating a rectangle that defines the outer dimensions of our part. In the main window, select the rectangle tool and create a new rectangle by clicking and dragging. It doesn’t matter how big it is or what color it has; we will set all those later.

Figure 6. The new rectangle

Go to the menu “Object” and click the option “Fill and Stroke” (keyboard shortcut Ctrl+Shift+F). First, we need to disable stroke, so go the tab “Stroke paint” and select “No paint“ (the big X). Next, we want to change the color of the rectangle to match the color of the breakout board. The board has very dark grey color and we can set it in the “Fill” tab, I chose the color #141414.

Now we need to fix the dimensions of the rectangle. Select it and in the top bar, change its width and height to match the outer dimensions of your part. The ML8511 breakout board is 20.0 mm x 20.0 mm, so I will enter those dimensions. Next, it’s a good idea to remove all the empty canvas around the square so we don’t have to worry about it. Open the window “Document Properties” again, and in the first tab “Page” press the button “Resize page to drawing or selection”. The page is now exactly as big as the square!

Figure 7. The page resized to match the square board

The square will be the base for all the components, just like a bit of PCB in real life. First, we have to add the two mounting holes. Create two white circles that have the same diameter as the mounting holes on the real part. To create a circle, select the Circle/Ellipse tool and create an ellipse. Then, just like we did we the rectangle, change its color to white (so that we can see it against the dark grey background of the board) and set its width and height (3.3 mm x 3.3 mm in my case). Place the two circles where you want to create the mounting holes.

Figure 8. Preparing the mounting holes

Now comes the really cool vector stuff – select all the objects on the page (the grey square and the two white circles) and go to menu “Path”. Click the option “Object to Path”. Now, instead of having objects of different type – rectangle and circles – all of our objects have the same type: path. Paths are objects that can be manipulated in a way the original objects can’t be. For example, you can change a rectangle into a hexagon by turning it into a path and adding two more points to the sides! You can also perform mathematical operations on paths; you can add two paths together to unite them into one. We are going to use one of those operations to “drill” holes into the grey square. Select all the objects, go back to the “Path” menu, click the option “Exclusion” and voila, the places where the white circles were just a second ago now became two holes!

Figure 9. Creating the mounting holes

The most critical component is the connector. As you can see on the photo of the real breakout board, the pin header points under the board, and I’m going to reflect that in the design. Instead of drawing the pins, I’m going to draw their top covered in solder. First, I’m going to create a light grey (#C1C1C1) square for the VDD pin and a light grey circle for the three others. The square is 2.0 mm x 2.0 mm and the circle is 2.0 mm in diameter. I will also add a small darker circle to the center of both pins, so that the wires in Fritzing have well-defined area to connect.

Figure 10. The base for the connector pins

To move an object to the center of a different object, we will use another feature: “Align and Distribute” in the “Object” menu (Ctrl+Shift+A). Select the first object (e.g. the light grey square) and then the second one (the small dark grey circle). Now, in the “Align and Distribute” window, set “Relative to” to “First selected” and click “Center on vertical axis” and “Center on horizontal axis”. This will move the small circle exactly to the center of the light grey square.

Figure 11. The top view of the connector pins

To make manipulation with the finished pin a little bit easier, you can group the square and the center circle together by selecting both of them by Shift-clicking and pressing Ctrl+G. Next up, copy and paste the round pin two times. Align all of them vertically, and change their pitch to the standard 0.1 in. The easiest way to do that is to change the grid size to 0.1 in and use the grid snapping. Once you have all that, group the four pins together and our connector is finished. All that’s left to do is to place it onto the dark grey breakout board.

Figure 12. The board with the finished connector

After this is done, all the critical components are in place and what’s left to do now is to add in the fine details to make the Fritzing part look just like the real part. The amount of detail you put in is entirely up to you. I added the two capacitors, the resistor, and the actual sensor chip. Dimensions of the resistor and capacitor are standardized and dimensions of the sensor chip can be found in its datasheet.

Figure 13. The breakout board with all the components

Next step is to add in the text and markings. At the time of writing, Fritzing only supports OCR A or Droid Sans fonts and will convert any other fonts to one of those, so I used Droid Sans font size 4.5 for all the texts. Finally, select everything by Ctrl+A and group it all together (Ctrl+G). Save the graphic as a new SVG file. You can see the result in the following picture. I’d say it looks pretty close to the real part!

Figure 14. The real ML8511 sensor to the left and the finished breadboard view graphic to the right

And here are the other two sensors: BH145NUC color sensor and BD7411G Hall sensor. The steps to create these two graphics were pretty much the same as with ML8511A – there’s just different number of pins; 3 for BD7411G (because it’s a digital sensor) and 5 for BH1745NUC (this one uses the I2C bus). Fortunately, the position of all the critical elements (the connector and the mounting holes) is the same for all the sensors in the kit.

I’m not a graphical designer, but I’d say all of the sensors look pretty close to their real-life counterparts!

Figure 15. BH1745NUC sensor to the left and the graphic to the right

Figure 16. BD7411G sensor to the left and the graphic to the right

Good news – this was the most difficult part! Next up is something much easier – creating the graphic for the schematic view.