Circuity

Ive made a little diagram presenting the project saving, loading and browse tab functions – those are in the works as far as frontend is concerned. The backend endpoints are ready!

Hello again!

Thank you for the comment! Im happy that someone is actually reading those!

The strategy described in the previous devlog (about getComponentJSON and spawnComponentFromJSON) worked! Now, when saving, Im recuring on all the components in the design and calling their getComponentJSON() function, which is the same (and is described in the interface, so no repeated code) for most components and also takes the custom properties into consideration! I will still need to do something with the {-1, -1} pins…

Now its the time for the popup!

little update

Im kinda too lazy to make the save system, so I keep getting distracted by implementing the least important and most useless features, like power indicators on wires visible on the picture below. It looks way better on dark mode and for now I set it as an opt-in setting. I wonder if someone is actually reading this so if you are, please leave a comment under this devlog or in the voting, that would make me really happy!

Ive wrote in my very first devlog that I want to make my apps easily scalable and modifiable, but that got a little complicated lately when I introduced components with custom properties like the buzzer. My previous idea of a saving system was mapping properties of every component that would make it reproducible, but with custom components that are in specific components thats not sufficient, so Ill have to think of a new one. Im thinking that every component can have like a getComponentJSON function and sth like spawnComponentFromJSON?

New component!

In response to your vote comments I will want to add a few more components – this is the first one (probably the easiest to make) – the buzzer. When connected to a power source it emits a constant sound at a given frequency.

Hellloooooo

After reading your comments from previous voting, I added snapping!

I also added a lot of optimisation tactics for the design page, like reducing repeated lookups (turns out it eats A LOT of memory when using ng signals which I didn’t know), reducing hot-path overload and guarding some performance-heavy functions. I got a little distracted in the end trying to get the bootstrap5 tooltips to work but Im not even sure if I need them.

See ya! (couldnt find the happy version)

I added a dark mode using DarkReader as a library. It kinda broke the website so Im marking it as experimental and leaving it for now.

More backend upgrades and more learning about the backend and SQL! This is the ‘manage admins’ tab in the admin panel, and the login works now!!!

Of course, you will never see that in the end product, so I should probably focus more on adding new features to the app…

Making the login! As you can see from the commit, there is a new /admin page (not listed on the menu) that works only when you have the correct adminToken. You can try to crack the system and log in!

Ive made the AdamDuda1/circuity-backend public so you can see what I do . Here is a little flow chart of what I want to do with the admin auth. And no, I still want to make the site login-free for the users.

Today Ive coded a andmin page (accessible only through/admin, no login yet, so I won’t deploy). I never focused (in my previous projects) on the features for admins and managing dbs for example (I always did it manually, I guess, and I know that’s a very bad practise), and even if only I will ever use this panel, im kinda prowd of it and feel my projects are getting more and more production-ready!

Woah, change of plans

kind of…

Previously, I was using a free plan of supabase for my backend but I decided it would be a better idea to build my own backend. Was it? I don’t know. In fact, I don’t even exactly know where to host it. I have a raspberry pi zero 2 but im not sure if its going to handle 2x backend with sqlite + a web server (because I already have one service running on it). We’ll see!

Hey! I had a little break from this project to work on szkopul-utils, my second project. I shipped it so I now (as its waiting to get voted cuz ft seems lwk dead rn) have some time to work on this project. Since the previous devlog (I also wanted the well cooked message to stay on top for some time ) I enchanced the tutorial (screen 1) and made a template for the save UI. I am going to work on that now but

I also listened to your feedback on the previous ship. I am very grateful for all the votes and messages, and Im going to make use of your suggestions to make my app even more enjoyable and usable so. Two ppl wrote about a grid or a snapping system – I added this to my TODO – and one person suggested a really interesting concept – to make a game out of it. I really like that idea and I will think on how to implement it in my project in a nice way. See you next time!

Move improvements!

In this build:

• Fixed the tutorial (the texts still need polishing and I will probably add a few pages to explain everything)
• Added a info card (on mobile devices) that the app works better on desktops
• Implemented RLS in the db

I’m still waiting for payout for the previous ship (it will probably be like 3 cookies, but I cant reship until I get them – its lagged cuz of the voting system upgrade). The only thing left now to do it to fix the saving and make the ‘browse’ and publishing pages. After that Im ready to ship the final version!

Adding a tutorial!

In the meantime, I also:

• Fixed the menu functionality and styling issues
• Learned more about Supabase security row and how to use it (I will need it for the browse tab that is still cooking)
• Worked a bit on saving to local storage

Devlog!

Today (and yesterday) I rewrote the whole root component for it to have a proper routes support and added an expandable menu component (I was too lazy to write my own, so Im just using a styled <details> tag).

After that, I created the ‘blog’ component and started work on a mechanism for fetching the posts (it will also be useful later for the ‘browse’ tab). This version is deployed on a ‘dev’ branch so it doesn’t interfere with the previous significant version until it’s fully ready,

I have an idea for another cool project, but I also want to finish this one – so here it is :).

Another update

Finally fixed a lot of bugs like the one I talked about 2 devlogs ago about deleting components (the fix is not exacly memory efficient but Im working on that).

I also added buttons for saving the design and a ‘more’ button to expand a menu. They dont work yet but Im working on that as well. Next step is adding the saving system (I already have some part of it) and exporting to a file.

I also had an idea to make a blog but also a ‘browse’ tab where people could publish their designs and explore others’ ideas. I would prefer to do it without a whole login system—I already connected my superdb, but we’ll see how it goes with the implementation.

Im continuing to improve the app!

I saw the comments of people who voted and reviewed my project, and some (not all) of you suggested in your comments that the UX is unclear or buggy. Im aiming to improve the experience and make the user flow more intuitive. Thanks for checking out my project! :)
I already removed one annoying bug (from 2 devlogs ago) when a component would become non-interactable. I’m continuing to update and add to my TODO list. The next thing Im going to work on (if I am not distracted) is the delete key detection and properly removing a component from the design. Meanwhile, here are the things Ive already done since the ship of version 1.0:

• Added the component properties – a panel on the top right when the simulation is turned off (screen 2) – you can edit properties like labels, x/y and colors
• Speaking of… Added colors :) (screen 3)
• Components now spawn in the center
• Fixed a bug where there would be a weird rendering issue while connecting a wire
• Refactored some files with the wrong indentation method

See you next time! :)

Today’s changelog:

• Added categories for the components in the palette (on the left) and the ‘favourites’ category (which doesnt really work yet because you cant add any component to it, but Im working on it).
• Fixed removing wires – you now can just grab a wire on a connected out and drop it on the vooooid.
• Added the XOR logic gate

While recording the video below I noticed a bug (you can see Im unable to connect the XOR gate if its added right after an other deleted gate with the same ID)😅 I dont know why that is happening exactly, but Im adding it to the TODO list.

Finally working!!!

The simulation mode now fully works and you can design your logic circuits! The image below is an example (working) implementation of an twobit adder.

Some more progress today

Those 6-7hrs of work went mostly into coding the core features of the app – you can now add components to the design and connect them with wires. The next goal is adding switches and LEDs and simulation.

Other things done for this devlog:

• Adding function templates for drawing selection indicators
• Learning the PWA package for future porting
• Updating readme
• Finally fixing the flipped Y axis
• Separating rendering thumbnails and world component

Detailed code changes in commit descriptions in my repo :)

Helloo

The biggest change today is the ability to move components in the design area. And yes - the app is still not usable, but I think it’s safe to say the progress is being made.
I added some visual improvements (please ignore the weird numbers and colors on the components for debugging from the lastest commit) and made some noticeable changes to the code structure like:

• added IDs to components,
• changed the component class template from interface to abstract to be able to create shared functions
• cleaned up the mess with the positive y axis in the code vs the interface

And some more changes (you can see in the commit history if you really want to). Note for future me tho – I need to commit more frequently and more logically so it is easier to review and rollback if needed.

Little update: I made some improvements to the UI base and added the actual logic gates. For now there are only logic gates and only 3, but I put some effort into making it easily scalable and modifiable. It took some time to organize the project files so I don’t get lost trying to add things and also on the drawing (I still can’t get it quite right). I used the js’s interface feature to create a ‘template’ for any electrical component and now I just add a file that implements that interface class whenever I want to add anything. Now when I have the three basic gates, next up is going to be connecting them, making a power source and some LED to display the outputs. And simulating the circuit, of course.

This is the first serious web application I’m working on, and I decided to use AngularJS. I didn’t exacly put much thought on the choice of the first JS framework, tbh, I just checked the 4 most popular, liked the appearance of the site, and found it was developed by Google. I watched an introduction tutorial on YouTube and liked the project structure so I started using it. I’m assuming that it is probably on the most optimal choice for this project, especially if I want to learn the basics (the code will probably be messy and whenever I learn something new I will see how bad the older code really is), but I’m sure it will be fine… (in the worst case I’ll just rewrite the typescript part)

The project will focus on creating simple circuits with logic gates and simple analog and digital components (switches, sensors, buttons, etc.) and more coming in the future if the project will work out.

I will now work on the basic wires, ANDs and ORs and I’ll see you in the next devlog when some significant changes occur in the project. :)