Devlog #2: More features!!!

Heyy there! Second devlog for this project! Since the last one, I’ve been working on turning my website from jsut a nice looking website into something that’s actually useful to track my reading.

First of all, I continued working on the home screen and added a section where you can track which ones of the books you’ve read. It has checkboxes for all the books, and I also added a counter element that shows how many out of seven you’ve completed.

I used localStorage so your choices are saved instead of being lost when you refresh the page. I also worked on the reading timer, which lets you start, pause, resume, reset and finish a reading session. They aren’t all separate buttons, the main button changes between start, pause and resume depending on what you’re doing, and reset and finish have their own buttons that appear only once you start the timer. When you finish a session, the time gets saved, and the timer resets so you can start another one.

There were quite a few errors/bugs along the way, but what can we do, that’s part of building stuff! I used ChatGPT to help me with parts of the JavaScript, especially with the reading timer and the book-tracking feature. It helped me understand how localStorage works and some functions about it and also helped me fix some bugs in my code. I also used it to help me understand what was going wrong when some of my features weren’t working as expected.

There’s still a lot left to do, mostly adding the other pages, and some more elements fo the home screen. I also want to make sure everything works as intended and that the website remembers your progress. Hopefully, I’ll have more to show you next! That’s it for now, see you on the next devlog!

Added back the API key dialog, so the app uses the user’s key, instead of leaking mine.

Devlog #1: Starting the build + adding elements!

Heyy there! This took a little more time that it should’ve, cause I’m new to web development. So, I started working on a new project, which basically is a Harry Potter Reading Companion website! I am a HUGEEE Harry Potter fan (have read the books AND seen the movies multiple times each)!!! However, I often find myself scrolling on my phone when I could be reading one of the books. That’s why I decided to build something that makes reading more fun, with a really magical Hogwarts/Harry-Potter aesthetic.

First, I built the house selection page using HTML. It was pretty basic at first, having just a title, the four houses, their descriptions, and an OK button to confirm your choice. Then I started working on the CSS, adding the Harry Potter font, Cinzel font for the headings, house colors, gradients (made with the help of Claude), rounded cards and shadows. What really changed the whole aesthetic was adding an Hogwarts(-inspired) background I made with Nano Banana, which imho made everything come together and turned out so great!

After that, I started building the main website/home screen. First of all, I created a side menu with “Home”, “Books”, “Stats”, “Achievements” and “Settings”. I also worked on little details like the borders, hover effects, and a decorative divider, which took a bit of tweaking to get right. Finally, I started adding actual features, beginning with a reading timer using javascript. It has start, pause and reset controls, styled with the selected house’s colours.

I also wanted to add “Hedwig’s Theme” as background music, but I’m a little intimidated to do it because of copyright, so I’m trying to find other ways to include it, without getting sued. If anyone has any ideas, I’d really appreciate it.

There’s still a lot to do, including the actual reading features, stats and achievements, but I’m happy with how the design is coming together. That’s it for now, see you in the next devlog!

Designed a case in Fusion360 and then soldered some components that just arrived.

Updated the github releases (both for Windows and MacOS), so the app runs straight out the box without needing the user to input their own api key. This was done upon request from the Shipwrights.

Devlog #10: Soldering and assembling the PCB - Part 2

Hey there! Today I continued with part 2 of soldering the components onto the PCB. First, I cut the TFT wires and resoldered them to make them shorter, since the previous ones were way too long and there was no way they would fit inside. I also soldered some female header pins onto the PCB and put the ESP32 in.

Other than that, I made the lockbox a bit taller so the electronics can fit more comfortably. I didn’t timelapse that, though, since it took very little time.
That’s basically all I did today. See you on the next devlog!

Devlog #7: Packaging the app and shipping!

Heyy there! Continuing from what I said on the next devlog, what I did today was finally turn ProjectGen into an actual app that people can download and run on their pc instead of just through VS code, as well as add some new features.

Then, I used PyInstaller to package everything into a proper macOS .app, including the fonts and icon. The biggest problem I ran into was the dock icon not working for some reason. My actual ProjectGen icon would appear for half a second before default ttkbootstrap icon would take its place. After asking AI to help me find a solution, I ended up using PyObjC to keep re-applying my icon while the app is running, which sometimes works and sometimes just doesn’t, but I decided not to give it too much attention. Since, I am on mac, I couldn’t locally create the .exe file using pyinstaller, so I used Github Actions plus a script Chatgpt wrote to create it from there. Then I set up a windows vm in UTM, to check if the .exe file works properly. Thankfully it does, so that’s great! Other than that, there were some errosr with indentation and syntax, which I easily fixed.

Finally, I made a .gitignore, added requirements.txt, uploaded everything to GitHub, and uploaded the packaged .app as a github release so people can download and run ProjectGen without needing Python or VS Code installed. I used AI a lot in this step, because the icon issue was driving me insane and also to create help create the Windows app. That’s it for now, see you on the next devlog!

Devlog #9: Soldering and assembling the PCB

Hey there! The pcb arrived yesterday, so today I decided to solder the components I already had lying around. I did it in two sessions, but in the first one I had no internet connection and videoed the whole thing, but then found that Lapse doesn’t take prerecorded videos, so unfortunately that time won’t count (maybe I manage to work sth out with the Fraud Squad, we’ll see). Lesson to be learned I guess. I think I did a pretty good job, especially considering I’m a beginner at soldering. That it for now, see you on the next devlog!

Devlog #1: Making the schematic in KiCad!

Hey there! I’ve wanted to start this proeject in a while, so I decided to finally do it. Today, all I did was design the project schematic in KiCad to get a better idea of how I’m gonna wire everything on the perfboard. I used AI to help me make symbols for the missing components and some wiring debugging. That’s all for now, see you on the next devlog.

Devlog #6: Photo upload for the components + copy code button!

Hey there! Following up on what I said in the last devlog, what I did today what add a way to uplaod a photo of your components drawer instead of typing each componetn manually. There’s nwo an “or” and an “upload image” button right next to the components field, so the user can pick whichever way is more convenient for them. I used base64 to then encode the image and send it to the AI along with the rest of the prompt, along with some extra instructions.

When an image is picked, the components field just shows “Image uploaded” so the user can tell the AI will be looking at the photo instead of reading from the entry field, plus I added a red X button next to the upload button so the user can cancel it to pick another image or use txet instead. Other than that, I also added a “Copy code” button to the build guide’s code section, so you don’t have to manually select text out of the text box anymore to copy it.

Later, I found out that command=self._copy_code(code) doesn’t work the way it looks like it would, since the parentheses call the function immediately instead of waiting for a the button to be cliced. To solve that, I wrapped it in a lambda function so it only runs when the button’s actually pressed. I used AI to create the new prompt for the image upload and also to help me understand some errors the terminal was showing. That’s for now, see you on the next devlog!

Devlog #8: Updating the repo

Heyy! Not much to say today, I’m just writing this devlog so stuff doesn’t pile up. I uploaded all the new cad files to the github repo, as well as the code, becuase of some changes I had made. That’s all, see you next time!

Devlog #5: Build guide screen, project types, and caching!

Heyyy! I’ve been putting off writing this devlog, since there’s a lot off stuff I need to talk about. So, picking up from where I left off in devlog #4, since I said I’d give the build guide it’s own screen and fix the colors, that’s mostly what this devlog is about.

The build guide now renders as a seperate screen with seperate sections (Overview, Components, Wiring, Build Steps, Code), pulled from the AI call that returns structured json. I also fixed the fact that the build guide screen was using a blue theme instead of my olive green one, which was because I was using bootstyle="primary" that pulls from ttkbootstrap’s default theme instead of my custom styles.

I also added a project type dropdown in the beginning of the home screen, so the user can choose whether they want a hardware or a software project. Picking software, hides the budget field (since software projects are mostly free), and relabels the components field to programming language.

I fixed another annoying bug where clicking “Build this!” twice on the same project, re-called the AI every time, instead of using the old response. To fix tat, I added a small cache keyed my project name, so if it detects that the build button has already been pressed for the specific project, it displays the old instructions instead of creating new ones every time. I also fixed a small bug with the “Back to ideas” button and debugged some typos.

Next time, I’m thinking of letting users upload a photo of their components drawer and having the AI think of ideas using those components. That’s it for now, see you on the next devlog!

Devlog #7: Designing the PCB

Hey guys! I know I previously said I wasn’t gonna be using a pcb for this project, mainly because the shape is pretty complex and I thought it was gonna be way out of budget, but in the end I decided to give in. First I offseted the inside of the electronics compartment by -0.5 mm and exported it as a .dxf file. Then I imported it into KiCad in the edge cuts layer, so the pcb could be that size and shape. Then I routed the pcb and ran through the DRC a couple times to solve some errors there were with the edge. That’s it for now, see you on the next devlog!

Devlog #6: Testing buttons and buzzer

Heyyyyy!! Today was mostly testing. I pulled out a small breadboard and wired the buttons, tft and buzzer. Then I navigated through the UI to make sure the the buttons and buzzer functioned properly when switching screens and clicking buttons. That all, see you on the next devlog!

Devlog #5: Getting the TFT working

Hey there!!! I finally got the tft display working!!! At first I couldn’t get it to work because the tft_eSPI library I was using didn’t support my ESP32-C6-DevKitC-1, so I switched to LovyanGFX which uses all the same functions as tft_eSPI and just needs some basic configuration, which I did with the help of Claude. I’m super excited to put it all together, see you next time!

Devlog #4: Moving to ttkbootstrap + adding a “Build this!“button

Heyyyy! I was gonna write this devlog yesterday, but it was getting kinda late, so I decided to do it toady.

So here’s what’s new: First of all, I switched the app over from plain tkinter widgets to ttkbootstrap, to basically just make things easier. Before, the “Generate ideas!” button was just a label pretending to be a button, with custom hover colors and click bindings, because MacOS (my operating system) was applying an ugly outdated gray/silverish button with no styling, and I wasn’t able to change it.

The switch was relatively smooth, since for most commands, I just had to change the prefix from tk. to tb. Only problem was that these new widgets don’t take bg=/fg= like my previous ones did, so I had to define named styled in the beginning instead. I also added a difficulty field in the beginning, so the user can control the difficulty level of the project ideas, and also a progress bar along with the cycling messages, so the user actually knows when the Ai is thinking.

I also gave each card a “Build this! button, which once pressed, sends another prompt to the ai asking for a full guide, including components, wiring, build instructions, and code if needed. I ran into some errors along the way, mostly typos, which I debugged with the help of Ai.

Next time I’ll give the build guide it’s own screen instead of sitting underneath the entry fields, and make the colors of the app consistent between all the screens. That’s it for now, see you on the next devlog!

Devlog #4: Designing supports for the solenoid

Heyy! All I did today was add some blocks to hold the solenoid lock in place and make the hole actually proportional to the plunger’s dimentions. That’s all for now, see you next time!

Devlog #3: Displaying each idea in it’s own dedicated card

Hey there! Today, I switched from dumping all he project ideas the AI gave me into one big ScrolledText box, since just a wall of text with no specific layout or format isn’t excactly great UX.

The main thing I changed, was swapping the text box with a scrollable list of widgets (boxes), with each widget having its own colored background, border, a Label for the project name, one for the description and the extra components and lastly one for the time and cost to make.

Since tkinter frames don’t scroll by default, I had to create a seperate canvas with a scrollbar bound to it and the cards embedded inside it. Because cards are real widgets now instead of just plain text you can use .delete(), when the user clicked the button again to regenerate ideas, it also had to clean up the previous cards before drawing the new ones, since otherwise all the ideas would just pile up one after the other.

I ran into quite some bugs along the way, such as small syntax errors and typos, which I used AI to help me debug.

Next time I’ll probably add some buttons for each card, such as a “copy idea” or a “build this one” button. That’s it for now, see you on the next devlog!

Devlog #3: Making the schematic in KiCad

Heyyy! Not much to say today. I hopped into KiCad and designed a schematic for my project. I won’t be using a pcb, since the shape in abnormal and will probably be more expensive to produce and wires just make more sense for my project. That’s it for today. Next up: assembly. See you on the net devlog.