Perfboard Designer in Html Canvas

If you’re an electronics hobbyist like me, you might have faced a common problem. After designing a circuit and testing it on a breadboard, you want a more reliable way to store it. That’s where perfboards come in. They provide a budget-friendly option for creating robust circuits.

Perfboards have holes where you can place your components and then solder the connections between them. Simple circuits are easy to handle, but things get tricky with complex circuits and limited space.

Ensuring the right connections becomes crucial, and doing it on the go can lead to a messy outcome or running out of space. While there are programs available for designing PCB / perfboards, they aren’t beginner-friendly. I tried a few, but they didn’t cater to hobbyists who simply wanted to design prefboards.

Then I came across Tinkercad, a more beginner-friendly designer. However, being a programmer with basic HTML canvas knowledge, I thought of creating my own solution. How hard could it be, right?

For my initial prototype, I started with plain HTML and JavaScript. As the project grew more complex, I switched to using Vite and TypeScript. If the project continues to expand, I may consider migrating to a more advanced framework like React or Vue.js. But for now, my focus is on creating a usable canvas.

Hey ChatGPT, can you help me?

I reached out to ChatGPT to help me with the starting point. With a few iterations, it provided a decent starting code that saved me about 4 hours. However, as things got more complicated, the prompt became challenging, and I decided to stick with the code I had. I refactored and continued the development myself.

I introduced fixes and new features, such as hover effects and expanding the dot grid based on user input. But as the plain HTML and JavaScript code grew messy and hard to read, I decided to rewrite it in TypeScript and separate the functionalities. Using Vite, I built my TypeScript code and refactored it, resulting in simpler and more flexible code.

Current Features:

In just one weekend, I aimed to create a usable minimum viable product (MVP) and implemented the following features:

• Resize the dot grid
• Dots
  • Add color
  • Add descriptions / delete
  • Move dot
  • Select dot
  • Hover dot – add effect, shows the whole description
• Lines
  • Add color
  • Connect two dots
  • Delete lines
  • Select lines
  • Hover effect
• Save the project as an image
• Save the project to a file for sharing or future use
• Save and load projects from local storage
• ICs (show pin number and description) *incomplete
• Reset the project
• Undo / redo changes
• Keyboard shortcuts

Check out the GitHub codebase or the live demo

Solving a Problem:

Choosing the right project to start can be challenging. The best learning project is one that solves your own problems. It’s more enjoyable and satisfying to work on something that interests you and addresses your needs.

Future Plans:

• Create a more user-friendly tools menu
• Finish the IC feature
• Add a component creator
• Migrate to React or Vue

Contributing:

I’m not particularly skilled with CSS, so if you’d like to contribute (e.g. to the tools menu design), your help would be greatly appreciated.

In a future post, I may delve into the underlying math and solutions. Thank you for reading, have a great day! ❤️