Gerber Viewer

Gerber Viewer

40 devlogs
50h 40m
Created by GB114

A really ambitious project. I don't know if I will be able to do it.

Repository

Timeline

Now layers are different colored.

Update attachment

Added error handling for certain types of gerber versions since the variables aren't the same.

Update attachment
Rei Rei about 11 hours ago

What’s next? what’s left?

Finally, the shape renders. (have to fix the rotation but it is just that)

Update attachment
Rei Rei about 11 hours ago

maybe ya r weird bcz ya see the world like the gerber viewer :hehepepe:

Successfully migrated the getLayer logic. :yay:

Update attachment
Rei Rei about 11 hours ago

looks tidy 0w0

Earned sticker

I didn't know that I had ~40 lines of code commented out so I was trying to figure out the logic from scratch. Glad that I have found that quickly. I also fixed the parser with the new logic.:yay:

Update attachment
Rei Rei about 11 hours ago

:partyblobcat: :cool-:

GB114 GB114 about 13 hours ago

My first sticker from sticker lode :ultrafast-parrot:

GB114
GB114
1h 22m 1 day ago

In the process of trying to transfer the logic to the new one on the old parser and renderer. I still am getting errors.

Update attachment
GB114 GB114 about 13 hours ago

It really does

Rei Rei 1 day ago

well console.log helps :pf:

GB114
GB114
2h 36m 3 days ago

Added functionality to render the side of the PCB you want.

Rei Rei 2 days ago

cool :DDD

It generates an SVG that just looks like the PCB (with colors and stuff). I'll use this for other part of the project but since I need all of the layers to be visible within the viewport, I'll use the plotResult from this library and modify my renderer for it to not become obsolete and this plotResult has more accurate shape representation. (Idk what I'm saying)

Update attachment
GB114 GB114 22 days ago

Thanks

Rei Rei 22 days ago

I didn’t fully understand but keep going hehehe :D

I've decided to abandon my custom renderer and work with a library (@tracespace/core which is working now?). But this library doesn't output an SVG so I may have to write a function to convert it into an SVG.

Update attachment
GB114 GB114 25 days ago
For now. I don’t know how this library would generate the layers.
Rei Rei about 1 month ago
Good luck OwO

I've tried so many things but none of them worked. (╥‸╥) I guess I'm going to have to ignore it for now.

Update attachment
Rei Rei about 1 month ago
yeah take a rest and focus on something else OwO

The problem seems to be arising from misinterpretation of commands.

Update attachment
GB114 GB114 about 1 month ago
(•\—/•)
Rei Rei about 1 month ago
Okay then solve it OwO

Turns out I don't have to handle the viewBox manipulation myself. (I really need to learn how to read documentations)

Rei Rei about 1 month ago
At least you read them OwO
GB114 GB114 about 1 month ago
I now can get back to my roundRect issues. (; - ; )

Another issue with rounRects :heavysob:.

Update attachment
Rei Rei about 1 month ago
It looks like a spider hehehe

Read (V2) the documentation for the svg-pan-zoom library and tested each arguments and the method to access those arguments.

Update attachment
Rei Rei about 1 month ago
I’m too lazy to read the documentation for the Sudoku-core library so good job :D

Finally, I have fixed macroShape generation. Now I can draw perfect rounded rectangles :)

Update attachment
GB114 GB114 about 1 month ago
:D
Rei Rei about 1 month ago
Grats :D

Here is an image to summarize the previous images:

Update attachment
GB114 GB114 about 1 month ago
Rounded corner rectangle
Rei Rei about 1 month ago
Looks cool but what’s this? OwO

I think I have found the problem with this. I'm now trying to fix it.

Update attachment
Rei Rei about 1 month ago
Good bro fix things hehe OwO

Fixed it. (After bit of back-tracing) Seems like the website is back again. If the image of the previous devlog doesn't load, it is basically this but all of the lines disappeared.

Update attachment
Rei Rei about 1 month ago
yeah it doesnt
GB114 GB114 about 1 month ago
well the images didn’t load

I think I broke the renderer while trying to restructure the logic.

Update attachment

Panning and zooming now works. It still needs configuration though.

After thinking of making my own intractable SVG, I decided to use libraries. I'm now going to try this one.

Update attachment
Rei Rei about 1 month ago
Why do you need a library to zoom?

I'm currently trying to fix this issue with my renderer. (Macro primitives aren't being drawn on the correct offset) colored for better visualization. My renderer still renders in black.

Update attachment
Rei Rei about 1 month ago
hey don’t fix this, it looks nice hehe :D add more files = more art?
GB114 GB114 about 1 month ago
This was supposed to be a rectangle with rounded corners. :heavy-sob:

After a lot of back and forth, the first thing my gerber viewer put together and displayed is a complete SVG render of my first PCB design. (IDK how to caption it/ still inverted though)

Update attachment
GB114 GB114 about 1 month ago
thanks
Rei Rei about 1 month ago
You won the fight, grats :D

Now it is looking more like it.

Update attachment
GB114 GB114 about 1 month ago
Nope
Rei Rei about 1 month ago
An IC / microcontroller, SMD resistors or capacitors, pin headers / connector pins, vias or test pads, mounting holes. is chatGPT right? OwO
GB114 GB114 about 1 month ago
Can you guess what the components are?

Still fighting with the gerber format and parser.

Update attachment
GB114 GB114 about 1 month ago
Nein
Rei Rei about 1 month ago
Keep fighting until the parser stands tall hehe

My gerber viewer now works (kind of).

Update attachment
Rei Rei about 1 month ago
looks cool and will look cooler with three.js OwO (i’m excited)

Ok, now the drawing functions work but there is still a problem though. The gerber file system uses precisions without decimals so this leads to there being huge numbers (look at the attributes of the shapes) making the shapes practically invisible.

Update attachment
GB114 GB114 about 1 month ago
¯\_(ツ)_/¯
Rei Rei about 1 month ago
And what will ya do abt it? OwO

Time for debugging my drawing scripts.

Update attachment
Rei Rei about 1 month ago
debugging is so fun and so painful (┬┬ v ┬┬)
GB114 GB114 about 1 month ago
I may have to check what is being passed to the function.

Modifying the library isn't an option for me now so I'm going for the easier solution. (Turning the changes into comments) This way I don't have to change how my parser handles file functions.

Update attachment

I have learned that there is a newer gerber specification called X3. I was using tracespaces parser that can only handle X2. I tried looking into it and finding methods to make them more compatible but it seems like X3 introduces a whole lot of new stuff. I will try to make it handle both.

Update attachment
GB114 GB114 about 1 month ago
¯\_(ツ)_/¯
Rei Rei about 1 month ago
bro that sounds rough 0m0 good luck OwO

I made another parser that takes the output from tracespace's parser and modifies it.
Now I have an added support for macroprimitive names :)

Update attachment

Added comments since the project is open source and all.
I am also working on the drawing functions.
(The function in the screenshot is one of my helper functions which I can tell you can read about.)

Update attachment
GB114 GB114 about 1 month ago
(O-O)
Rei Rei about 1 month ago
Curious to see how your drawing functions will turn out ( ̄w ̄)

I have found bugs in my code and it took the littlest amount of effort to fix them. (sarcasm)

Update attachment

I have added another function that handles rendering for each layers.
Changed some logic in the getLayers function.

Update attachment
GB114 GB114 about 1 month ago
Thanks
GB114 GB114 about 1 month ago
Thanks
Rei Rei about 1 month ago
Good work bro keep going :))

My plotter is coming together. It now successfully generates toolDefinition and toolMacros ,which I've put into a layer. The issue that I've had while working on this was how to address place holders. Because toolMacros are like functions and need parameters, they have place holders like $1, $2 ... to share those values. It was pretty fun trying to figure this out. :

Update attachment

Wrote a function to extract the data from the gerbers of every layers.

Update attachment

Sorry for th long houred devlog but I was trying to study the parsed gerber file the @tracespace/parser library generated. I was going to use the provided plotter and renderer methods but the implementation seemed rather difficult so I'm planning to write the plotter library my self (It is the getReady.js file, I didn't know what to name it lol). This approach really is great when I think of it since I want a customizable method to draw the layers and this seems to be a pretty good way to do it and learn while doing it.

Update attachment

Ughh, I keep getting this error message and now my project is sinking, what a day.

Update attachment

After some research, I have found the correct implementation of the @tracespace/parser library. It seems like it didn't actually require Node.js's buffer. I have implemented it into my parser code and now it parses the entire gerber data into an array.

Update attachment

Have been trying various libraries that provide gerber file parsing but most of them weren't browser compatible and required Node.js's buffer. So I asked AI to give me a simple parser that I could work with to make my gerber viewer. Here is what the parser that it gave me draws. I am not going to be using this parser and I will try to look for other options.

Update attachment
GB114 GB114 about 1 month ago
that’s my cat.
Rei Rei about 1 month ago
bro what’s this? ; u ;