Learn How to Design a Custom Shaped PCB With EasyEDA Online Tools

I've always wanted to design a custom PCB, and with online tools and cheap PCB prototyping it's never been easier than now! It's even possible to get the surface mount components assembled cheaply and easily in small volume to save the difficult soldering task! I've ordered 10x PCBs with assembly for less than US$50.
While PCBs serve an important function, the layout of the components is an important part of how it looks. I've rotated the components on the board to align with the points of the star.

This instructable will teach you:

• How to draw the custom PCB shape in InkScape (free, open source graphics tool)
• How to use EasyEDA circuit & PCB design tools (free and online, no install required!)
• How to import the SVG into EasyEDA for custom PCB shape and silk screen
• How to design a simple 'Arduino' programmable MCU design
• How to use JLCPCB surface mount assembly to get the boards made & assembled

Features of "The Star"

• Custom 5-point star shaped PCB
• Animated lighting - 10x LEDs per side, double sided
• arduino programmable ATMEGA328P microctroller
• 2x buttons for interactivity - you could make a simple game
• micro USB powered (option)
• Network multiple stars for bigger animations (option) with serial communications

UPDATED 02APR2020 after the boards were received.

See BOM (Bill of Materials) file and schematic PDF attached.

See full schematic attached.

Here's a link to the EasyEDA project from a later step - https://easyeda.com/neil.parris/thestar-instructa...

First let's design the shape of the PCB and any silk-screen art to go on the PCB.

1. Download and install inkscape
2. Create a new document
3. Use the rectangle tool to create a 100x100mm rectangle. JLCPCB offer cheaper PCBs under this size.
4. Use the polygon tool to create a star shape that fits within the rectangle
5. Add other details, e.g. small star graphics within the outline which is where I'll place the LEDs
   1. Start by adding the shapes for one point of the star, e.g. the top
   2. Add a rounded corner (for safety!) using a bezier curve
   3. Select all the shapes on this point and group them together
   4. We can then copy and rotate this group to the other points of the star
      1. "Edit -> Clone -> Create Tiled clones"
6. If you did round the corners, then we need to remove the points which are no longer required
   1. To do this, I manually drew the straight lines that connect the curves
   2. Then, remove the original star

Save 2 versions of this image

• A: silkscreen - Complete picture with all the details that will be used for the silk screen
• B: board outline - as above, but remove all the details in the centre leaving only the outline. This will define the shape of the PCB.

Save .DXF versions of both files

• file -> Save-as -> .dxf
• Use the detaults

Example inkscape .svg and .dxf files attached.

This step will create a new project on EasyEDA online tool and import the .dxf to set the shape of the PCB and silk screen. EasyEDA is a free online schematic and PCB editor. I chose this as it was easier than downloading and installing one of the many available tools. It seems to be great for my needs, and integrates well with JLCPCB for PCB prototypes and LCSC parts.

Create project and PCB

1. Visit https://easyeda.com/ and create a free account.
2. Create a new project in your workspace
   1. File save the schematic
3. Right click on the project name, and "New PCB"
   1. OK the defaults (100x100mm)
   2. Note - we can come back and edit the schematic later and add components
4. Import the board outline
   1. File -> import DXF
   2. Select the .dxf board outline file from inkscape
   3. Check that Layer is set to 'BoardOutLine'
   4. Click 'Import'
   5. Place it within the existing 100x100 rectangle
   6. Delete the rectangle, the new star shape is the BoardOutLine
   7. Check that it is on the pink BoardOutLine layer, if not, select it and change the layer in the panel on the top right
5. Import the silk screen image
   1. File -> import DXF
   2. Select the .dxf silkscreen file from inkscape
   3. Check that Layer is set to 'TopSilkLayer'
   4. Click 'Import'
   5. Place it on top of the board outline (zoom in with mouse wheel for accuracy)
6. Check the results by previewing the 3D preview
   1. Click the 'camera' icon and '3d view'

Next step - add components :)

Now that we have a custom shape, we can start adding components.

You could simply place components direct in the PCB editor, but it's better to add them into the schematic view then hit 'Update PCB' to add them to the PCB.

Note - to take advantage of the PCB assembly services offered by JLCPCB ( https://jlcpcb.com/smt-assembly ), it's important to use components from a specific list that they have.

• Download the XLS parts list
  • Currently - https://jlcpcb.com/componentSearch/uploadComponen...
  • Which is linked from: https://jlcpcb.com/smt-assembly

Parts choice:

• base
  • The cheapest option is to use parts from their 'base' list as these are already loaded onto their pick and place machines.
• extend
  • There are additional 'extended' parts but there's an incremental cost for each one. e.g. the LEDs and ATMEG328P I use in this project are both extended, however all of the discrete resistors, capacitors and the ceramic resonator are standard parts.
• other - manually added to the board later
  • I chose to add the USB connector, push buttons and programming header manually.

The attached image is a screenshot of the subset of parts I've used in the project. I added a column "MyProject" to help me filter down to the components I care about. I chose mostly 0805 footprints to make soldering easier. The crystal/ceramic resonator may be difficult to solder by hand.

The LCSC part number, e.g. C14877, can be used directly in the schematic (and PCB) editor.

Summary of BOM

• C84258. - cool white LED, very bright (even with 2x LEDs sharing a 150R resistor on 5v) and nice diffuser built it
• C7171 - 10uF decoupling cap x2
• C17444 - 12K resistor for RESET pin pull-up x1
• C17471 - 150R resistor in series with LEDs x10
• C21120 - 220nF decoupling cap x2
• C13738 - 16MHz ceramic resonator with integrated caps
• C14877 - ATMEGA328P MCU

At the heart of this design is an ATMEGA328P which is used in many Arduinos including Uno, Nano and Pro Mini. This means it's possible to use the Arduino IDE for writing the code and programming the board.

I've designed this board to use a minimal component count to reduce cost and keep the board simple but still allow it to be programmed through the ISP 'In System Programming' header as though it's an Arduino Nano.

Understand the pinout

See the pinout diagram attached from https://github.com/MCUdude/MiniCore to see how the physical pins of the MCU map to arduino pin names. e.g. physical MCU pin 1, (top left) is also arduino pin 3 (labelled D3 on an nano), controlled by PD3 inside the MCU. From an arduino IDE point of view you only need to know the arduino pin '3'.

Minimum components to mimic a nano:

• The ATMEGA328P
• Decoupling capacitors to smooth the power supply
• ISP 'In System Programming' header instead of USB programming
  • 6-pin header which can be programmed from another arduino with ISP programmer image
  • Note - USB/serial programming is not possible without a USB to serial converter
• See https://www.arduino.cc/en/tutorial/arduinoISPOpti...
• 16MHz ceramic resonator
  • This is required if you're mimicking a Nano as these are always 5V and 16MHz external resonator
  • Note most 3 or 4 pin resonators do not need the separate capacitors that a crystal requires

Alternative, even more minimal component set with MiniCore

If you don't want, or don't have the crystal or resonator then you can use the internal 8MHz osciallator within the ATMEGA328P. You need to load a different bootloader to enable this, e.g. the MiniCore bootloader, see GitHub for more info.

• https://github.com/MCUdude/MiniCore

Now start adding the components:

• Right click "place component"
• In the search box enter the part number from the spreadsheet / LCSC e.g. C14877 for the ATMEGA328P-AU
• Place it on the schematic
• Repeat for the other components - caps, resistors, LEDs
  • one of each component initially, then copy and paste them around the design as required

One neat feature of EasyEDA online editor is the ability to make changes to the schematic then update the PCB.

• In the schematic editor, hit file save
• Then, the "Update PCB" button in the tool bar
  • A window pops up to tell you what's changed
  • 'Apply changes'
• The new components are now placed in the bottom right corner
• Move them to where you want them
  • hit space to rotate 90 degrees
  • use mouse wheel to zoom
• Notice the 'rat lines' which show where the components need to connect
  • use component rotation to make the wiring easy
• To place components on the underside, click a component and in the top right corner change TopLayer to Bottom Layer

Now wire up the components as indicated by the ratlines

• Use the 'track' button in the tool bar
• Click one component, then the next
• Use vias to connect between layers
• Add a ground plane across the whole top-layer to automatically connect all the ground pins
  • Use the 'copper area' button to draw a rectangle that covers the whole board. The tool will automatically fill the correct area and connect to the GND net by default
  • Add another plane on the bottom layer for VCC
• Open up the 3D view to check your progress

I chose to keep the routing very direct and neat. I looked at the PCB layout to choose which pin of the MCU to connect to each LED to simplify the routing and make it part of the design process.

It's easy to switch back to the schematic viewer and add a net name to the pin, e.g. U1 pin 23 connects to net LED4. Put the same net label on the LED, update the PCB and route the track.

** Here's a link to the project on the EasyEDA website:

https://easyeda.com/neil.parris/thestar-instructab...

Keep adding LEDs, buttons, etc.

You can custom rotate each component, e.g. for a 5 point star, each point is 72 degrees apart. To get the correct angles for the LEDs and other components type 72 into the rotation box, and hit space to rotate 90 degrees at a time until you get the result you're looking for. Sometimes you need other angles related to 72, e.g. 90 - 72 = 18. Or 2x 18 = 36. With 18/36/72 and the 90 degree rotations you can align to all the major axes of the star.

See attached PDF of the full schematic [note this is a slightly different design to the earlier screen shots but same principles]

Once you've completed the design, reviewed it and checked there are no mistakes, go ahead and generate the Gerber files. It will prompt you to perform Design Rule Checks (DRCs). Check there's no errors and save the Gerber files for manufacture, or open JLCPCB directly from the editor.

If you want to use the SMD manufacture services then also save the BOM (bill of materials) and pick and place file (this tell the machines where to place your components)

Go through the order process and double check the orientation of any polarised components like LEDs, capacitors, resonators and the MCU itself!

For 10 boards assembled (without the USB & programming header) I had a cost of around GBP£35 shipped, (approx USD$45 depending on exchange rate).

Watch for update email and track your board and build through the JLCPCB website.

While waiting for the boards to arrive, it's time to start writing the software :)

I've placed an Arduino Nano on a breadboard and wired the LEDs in the same place, and same connections to mimic the PCB. It should then be possible to load this same software directly on the PCB, though with an ISP programmer Arduino.

The code uses arrays to make the programming simpler. I've also imported the "FastLED.h" library as it has some useful helper functions like sin8()

Here's some highlights:

This array maps the Arduino pins to the LED1 up to 10. LED1 is connected to the equivalent of Arduino A2, and LED10 connected to D4

• // create an array of the physical pin names connected to LED1, LED2 etc. to LED10
• const byte ledpins[] = {A2, A3, A1, A0, 9, 10, 6, 5, 3, 4};

The main loop is a simple software PWM routine which checks 'pwm_now' against the current 'led_brightness' value.

This is currently test code to experiment with a few lighting patterns.

Enjoy the un-boxing and admire your very own custom PCB :)

With the SMD assembly I had all the important components soldered on one-side to give me a working device.

Optional - solder additional components:

• Micro-USB connector for power (not programming)
• Push buttons - to make it interactive
• LEDs on reverse side - make it double sided!

This is the fun bit. Loading the Arduino bootloader and the code onto the PCB!

A couple of days after first writing this instructable the boards arrived! 10x boards, all fantastically well made, and the components soldered neatly, and all working perfectly.

Wire up a spare Arduino as an ArduinoISP programmer

I use an Arduino Nano on a small breadboard wired up as an ArduioISP programmer. This means it connects from the IDE over USB, to nano, which then connects to the target device through the 6-pin programming connector.

The pinout is the same as a nano IP connector, basically just MISO/MOSI/RST/SCK/5V/GND

See this link for more details: https://www.arduino.cc/en/tutorial/arduinoISP

1 - MISO

2 - +5V

3 - SCK

4 - MOSI

5 - RST => driven from Pin 10 of the Arduino nano

6 - GND

Load the ArduinoISP sketch onto the programmer

• Examples -> 11.ArduinoISP -> ArduinoISP
• Note - when uploading this image to the programmer, the capacitor between pins RST and GND needs to be removed. Put this back before you use the programmer.

Upload the the bootloaded and code to the target board

• Connect the programmer to the target with the 6-pin connector
  • You can just hold a 6x pin header to the PCB without soldering by holding it at an angle so it makes good contact
• If you have the 16MHz ceramic resonator on the board, and you're happy to map the pinout to match the arduino nano, then simply program the board like an Arduino nano but with the following settings:
  • Board: "Arduino Nano"
  • Processor: "ATmega328P"
  • Programmer: "Arduino as ISP"
• Upload the bootloader
  • This sets the fuses in the MCU to enable the 16MHz external crystal or resonator. If you don't have this then use an alternative bootloader, e.g. minicore https://github.com/MCUdude/MiniCore
• Upload your code
  • Important - because we're downloading the code with the programmer you need to hit SHIFT when you press the UPLOAD (=>) button. This changes the programming from the normal 'upload' over serial port, to instead use 'upload with programmer' into the ISP pins.

If the above was successful then you should now have lots of flashing LEDs! :

I hope you've found this instructable useful. I've spent many hours experimenting with these tools to make interesting PCBs and have found the on-line tools very convenient.

This particular design is relatively simple in terms of circuit, but interesting in terms of physical layout. It would also make a good decoration for the holiday season!