pixeli
- 6 Devlogs
- 50 Total hours
A typescript-first, lightweight, and flexible command-line tool and library for merging multiple images into clean, customizable grid layouts.
A typescript-first, lightweight, and flexible command-line tool and library for merging multiple images into clean, customizable grid layouts.
Final devlog… forever (turning 19 tomorrow, so this is the last devlog :D) I finally released the beta!!! We got the GUI running (only for grid merge so far) but it works! I added state management inside of local storage so changes dont keep disappearing, and I also added the export button functionality! Have fun!
LADIES AND GENTLEMEN, GUESS WHAT TIME IT IS. (devlog time
)
First of all, I added a summary and continue section in the sidebar on the right to provide a more “guided” user experience I guess you could say. :>
Then, I also, changed the left sidebar to make things simpler; there will only be a single page for all merges now. :D
And the rest? I’ve just been adding fields in the merge page for all the different settings the user can mess around with (there’s a LOT). Once I finish with that, I’ll be actually rendering the final product to the user so they can see what they get once they export!
DEVLOG!
Okay SO. Image selection is now complete: users can choose which images they want to proceed with. I also added shift-clicking, so users can select multiple images more easily (see the video!).
Next: Responsiveness ✨ I made the main sidebar responsive so far, so the layout of the page seems to be working fine, at least up until around the sm/md breakpoints. I’ll also have to handle making the secondary sidebar responsive in mobile screens.
Finally: Light mode and dark mode! FINALLY, I added a button to toggle between the two, should be much easier to design either theme now :>
Next step is to add a bar on the bottom of the screen which helps guide the user’s next step. Then we can start with the merge pages!
NEW DEVLOG!
Alright ladies and gentlemen, I’ve made a layout for the images, where the user can choose either a compact layout or a normal (slot-like) layout. I’m using animejs for the smooth, snappy animations, in case anyone out there was curious :>
Now, I need to allow the user to select which images they want, then, I’d also like to add some sort of utility bar on the top/bottom.
Then, I’ll use those images to make the merge pages! wish me luck :> 
OKAY. Some progress (and some setbacks :>)
So I’ve worked on the uploaded design, as well as the backend that was meant to write the file to the /tmp directory. The problem I needed to solve was to figure out a way to store the files on the backend that didn’t involve writing duplicates to the user’s disk.
This is a very difficult task, because I can’t get file paths from the input field in the frontend, only the filename and file content (and some other unrelated details). 
Solution? Implement a different system that DOESN’T involve file uploads :D
If I just use the directory im in when the user runs the command to start the loopback GUI, I can define a “project scope” in a sense, where I only try to use images in that directory. This way, it’s up to the user to choose which folder they want to use as their project. :>
So now I need to refactor BOTH my design and backend to support this HA. Awesome 
Okay so: I’m back. :>
I’ve started working on a project I’ve been meaning to do for a while, called “Pixeli”, a CLI for merging images together! I actually already made this project before, and now I’m adding a GUI to it.
Currently, I’m working on the file upload and rendering mechanisms. :D Will also be doing dark mode :0