Cirkuit

Devlog #27: Some optimization, code cleanup, and brand new readme!

That’s the last devlog for this project before I ship!

Devlog #26: I’ve done many small improvements, such as:

• ability to move annotations
• undo/redo buttons
• custom favicon

Next step: SHIP!

Devlog #25: UI/UX improvements!

I improved the component selection outline. Now the outline is around the whole selected group of pixels, instead of around each individual pixel.

You can also now delete selected components by pressing Del on your keyboard.

And I added a little preview showing the pixel currently targeted by the cursor.

Next steps: keep working on the UI/UX, and ship!

Devlog #24: New feature (kinda): the camera position and zoom are now stored in the project file, and loaded when you open the project.

That means you can setup any point of view in your project, and the viewport will be right where you left it when you open it again!

I also fixed a bunch of UI inconsistencies:

• the hover label position is now responsive to the workspace sidebar (before, it was getting hidden behind it)
• unified border colors
• fixed the phone workspace responsiveness
• made the sidebar on the right a little bit smaller

I also continued working on the 7-segment display, but ran into some issues since wires can’t cross each other. So I thought about having circuits on two different layers. What do you think about this?

Next steps: I’ll probably polish the UX a little bit more, and then ship the project. But I’m planning to keep working on it!

Devlog #23: New feature: Undo/Redo!
You can now undo and redo things you’ve done in the editor. This works with both components and annotations.

I had to implement a project history system. Basically, every time an action modifies the project, the previous project state is added to the past history stack. When you undo, the latest state from past becomes the current state, while the previous current state is moved to the future stack. When you redo, the next state from future becomes the current state and the previous current state is moved back to past. Yeah it’s messy 😂

I’m also still working on the 7-segment decoder. I switched to a 3-bit one, I’ll probably include it in the demo.

Next steps: mostly UI and code improvements, and then I’ll probably ship it. I’ll keep working on it!

Devlog #22: New feature: selection and copy/paste!

You just have to press “S” and drag your mouse/pad while holding the left click. You can then copy, paste, or move the selected pixels around.

Probably the most difficult feature I’ve worked on so far. I had to get some help from ChatGPT :’)

I think this will be my last devlog before shipping, since one of my other projects has been pending for 18 days now, so yeah… I’ll still keep working on this project though!

Devlog #21: Some UI/UX improvements and started working on selection!

I’m currently working on the selection system. It works like this: Press S, then while holding it, drag the selection area with the left click. Once selected, you can copy, paste or move the selected block of pixels.

It’s not committed yet! It still requires some work.

Next steps: finish the selection feature, then add the clock. I also want to improve the UX as much as possible.

Devlog #20: demo project and UI/UX update!
I added a demo project with a basic light/switch circuit, an OR and XOR gate, and a few annotations.

I also (and mostly) removed the old “Quick start” section. It was becoming kinda useless since pretty much everything was already covered by the demo project. So I replaced it with a little intro to the project, along with a table of the shortcuts.
I also added a little decoration to the bottom-left corner of the sidebar. I think it looks pretty dope!

Next steps: copy/paste and selection, THEN add a clock.

Devlog #19: A little code cleanup!

I refactored the App.tsx file because it was handling too many different things. Now each hook has its own dedicated file. Small refactor, but definitely a needed one!

Next steps: add a demo project, improve the UI/UX and laptop pad support, add copy/paste and selection, and finally add a clock (eventually, at this point 😂)

Devlog #18: You can save your work now!
There are now two buttons in the bottom-left corner: Open and Save.
Your projects are downloaded as .cirkuit files.

This part was actually quite challenging, mostly because of the file format validation and all the tests around it.

Next steps: clean up the code, cleanup the UI (it feels a bit messy right now), add a demo project, add copy/paste and selection, and add a clock

Devlog #17: New feature: Annotations!
You can now add labels, lines and rectangles to your circuits!
I developed this feature so I can better explain what’s going on in the demo project when I’ll ship this project. But you can also use it to explain your craziest circuits!

Next step: upload/download projects.

Devlog #16: Annotation feature (WIP)
It’s not finished yet, but I’m currently working on a new annotation feature. Why? Because I’ll need it to explain the circuits in the demo!

I’m adding this before the project download/upload system, because otherwise I’d have to refactor quite a bit of the system later.

Also, I’m starting to build a 4-bit 7-segment decoder in Cirkuit! (I started with the two easier segments lmao)

Next steps: continue working on the annotation system, then implement project download/upload.

Devlog #15: I added a little guide!
The goal of this small guide is to explain a few things that might not be obvious to new users.
You can close and reopen it whenever you want, so it doesn’t get in the way while you’re playing.

It’s still available on the GitHub page if you want to give it a try!

Next step: add a minimal circuit loading system (so I can add a default demo circuit), and THEN I’ll add the clock 😂😭

Devlog #14: New component: AND gate!
Now the two main gates are available (NOT & AND), so you can basically build anything with them!
In the screenshot below, I built a working XOR logic gate, both in a large and a condensed version.

A few changes since last time, apart from the new component:
The old NOT gate wasn’t working properly because the circuit actually handles 3 states (low, floating, high), while the NOT component only supported low and high. So now, “floating” is considered as “low”.

Also, there’s no longer real-time simulation, sadly. I had some issues with the logic gates: if you built them the wrong way, it could crash the entire webpage. So now you have to click on “Run simulation” to see the magic happen.
It’s a bit less cool than real-time simulation, but at least it doesn’t nuke the whole page anymore lol.

Next steps: UI/UX improvements, clock, and 1-bit memory later on

Devlog #13: New component: NOT gate!
This component returns the opposite signal you give it: low becomes high, high becomes low.

I also improved the UI/UX. There’s now a new label in the bottom-left corner of the page that shows which component you’re hovering over with your mouse, and what its current state is. For example: “Wire | Low”, “Switch | Open”.

I also fixed the pixel rendering, because before there were some really thin lines between them. And now the sidebar is responsive!

Next steps: code cleanup, AND gate, clock

Devlog #12: Wire states are now visually apparent! In the example below, on the first circuit, the first segment is high because it is powered by the source, while the second segment (connected to the lamp) is floating because the switch is open.
I’ve also fixed a whole bunch of UI issues.
You can try out this project on my GitHub page!
Next step (for real this time): adding a NOT gate (the clock will come later)

Devlog #11: I did some UI improvements, but before I commit, I’d like to have your opinion for the light component; which glow do you prefere?

Devlog #10: I added some tooltips so it’s easier to understand for you guys!
Next steps: Start writting an actual documentation, add new components

Devlog #9: New component: Switch
This new component come with a new “simulation” mode, where you can interact with the components.
Next step: add small tooltips to the sidebar elements, add new components (clock, memory…)
It’s deployed so you can try it (see the project page)! I’d love to get some feedbacks.

Devlog #8: UI update!
Changes:

• checkerboard background texture instead of the old grid
• custom selector on the component palette
• pixel art icons

Next step: new components (switch, clock, memory…)

Devlog #7: Now power and light can be connected from all sides! Also, since the old arrows are no longer necessary (at least for these components), I improved the UX by displaying the actual component icon instead. The icons on the circuit are also hidden by default now, and only appear when you hover over them.
Oh and there’s an eraser now.
I also deployed the website: nafo44.github.io/Cirkuit/

Next step: add new components (switch, clock, logic gates, memory)

Devlog #6: I wired up the simulation engine to the UI! It’s working really well, even tho there’s only 3 components right now (source, wire, light). I added arrows so you can easily rotate the components. I want this project to be really intuitive, so if you guys have some ideas to simplify this, I’m all ears!
Next step: let a source and light to power/be powered through all sides, add new components (switch, clock, memory)

Devlog #5: Now the component placement UI side is wired to our circuit layout! It probably don’t make much sens for you right now. Next step: modify visually the component grid according to the simulation.

Devlog #4: The other half of the engine is done! It can now compute components state (low, high, floating, conflict) based on the connections between each other. Next step: wiring the engine to the UI.

Devlog #3: I’ve finished half of the engine of my website, made to let you create circuits using pixel art. It wasn’t easy!
I came up with a simplified netlist algorithm, to represent how a component (pixel) is oriented, how many are wired, to what, and through which side of the pixel. Components states aren’t handled yet, but that’s what I’m going to work on next.

Devlog #2: I improved the UI, added mouse wheel support (to zoom and move the map). Now it’s time to work on the actual engine.

Devlog #1: Hi! I just started making a website where you will be able to create circuits… with pixel art!
The idea is to add different pixels: wire (gray), power (green), light (yellow), logic gates (AND, OR, …), memory (simple true/false state storage).
I want to keep this as simple as possible to use.