Gerber Viewer Used AI

Cleaned up my node_module folder. (had to look up how to reset it)

Currently working on my info (about) page to tell the user about my project and to provide example gerber files they could use.

Done the final styling (even though it isn't the final final style since this isn't where I want to stop) I want to expand this project beyond just being a gerber viewer to a website that will allow you to share links to your gerber, make it 3d, add components ...

Added functionality to control elements.
-- Reset button resets the view.
-- Zoom in/out do what they say.
-- Added logarithmic slider.

Finally, my tooltips work. (Mine is the one above the input field)

Positioned my controls to the perfect spot ig and tried to make the slider responsive.

I DID NOT KNOW you were able to do that.

I have finally got the zoom controls layout working like I intended.

This is the general layout I came up with.

Trying to find the areas where I can interact with the svg-pan-zoom area. (Also changed the naming of the layers)

Experimenting with styling the layer list. Have to finish styling all of it before sep 30th.

Nvm, I just had to research a bit for the responsiveness part but styling isn't solved yet ;-;

Styling and responsiveness is difficult ;-;

Working an a layer panel where you can edit the visibility properties of the layers.

Add supported file types.

I have made it so that the view resets only when you are going from front or layers tab to back layer your view gets reset. Otherwise, it stays the same. Should I continue with this?

This is now less cursed ig.

Just experimenting with my gerber viewer. (Making sure that I can render all the layers then hide/unhide the required layers to save resources and make my gerber viewer performant)

Now layers are different colored.

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

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

Successfully migrated the getLayer logic. :yay:

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:

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

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

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)

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.

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

The problem seems to be arising from misinterpretation of commands.

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

Another issue with rounRects :heavysob:.

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

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

Here is an image to summarize the previous images:

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

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.

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

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.

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.

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)

Now it is looking more like it.

Still fighting with the gerber format and parser.

My gerber viewer now works (kind of).

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.

Time for debugging my drawing scripts.

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.

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.

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

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.)

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

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

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. :

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

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.

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

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.

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.