Attribute panel!

I now implemented an attribute panel on the side bar. It currently includes

• x & y position
• x & y scale
• rotation
• x & y pivot point
• enabling and disabling fill and stroke
• choosing colors using a color pop-up window (thanks to this library)
• Alpha spin boxes
• RGB spin boxes
• stroke width spin box

I started working on other attributes like joint types but didn’t finish yet. Other attributes will include opacity, gradients, patterns, line dash types, line cap types, etc. I want to move to animating ASAP because the event will end soon and I still didn’t ship :\

I impleneted a small diamond buttom to add a keyframe. The button only clicks and changes from a hollow diamond with white outline to a green diamond, but still no keyframe functionality. I made a list of all features I want before the end of the event and I think I messed up :P

[done] stroke & colour properties
[ ] FIX: canvas dimensions
[ ] linear animating
[ ] viewport controls
[ ] importing SVGs
[ ] exporting to a file
[ ] exporting to an mp4
[ ] Ctrl + C, V, Z, Y
[ ] keyframe interpolation and graph editor
[ ] Text object
[ ] Text object properties
[ ] Image object
[ ] Image object properties
[ ] importing other formats
[ ] complex SVG shapes
[ ] path manipulation

I think I have to do only the first 8 for now and do the rest after the end of the event.

Every time I say “this is the last time I work on this feature” is never the last time. It took me too long to rewrite the drawing logic and fix scaling bugs to lay the ground for animating. I will try to work on attribute panel next time, and then on animating, but I will eventually return to shape drawing because transformation no longer works with node edit tool. Bugs fixed include:

• any combination of scaling, rotation and transformation now works flawlessly (I hope)
• negative scaling
• scaling handles now follow mouse correctly

I also added a new icon to indicate pivot point, which I currently have no way of modifying until implementing the attribute panel or fixing the node edit tool. I learned some new git commands which I’m proud of, and I’m thinking of how could I implement a future-proof attribute panel (that will include objects other than paths in the future, so I have to make the attributes dynamic). Any suggestions will help :)

IDK what is with time tracking because the duplicate devlog was deleted and the time was added to this devlog. It has been a while :D. I took a break because I did not feel like coding. Here is a new devlog introducing bezier curves, scaling, and rotating.

You can drag while drawing a node using the bezier pen to make this node symmetric while adjusting the handle. Then you can release and continue drawing like normal. There should be another handle type called smooth that has the ability for the two handles to have different lengths. I still lack the ability to edit bezier handles (the control points) and still have to fix some problems with transformation. I want to get this done quickly so I could move on to actually animating and attributes.

Long since last time :)
Time tracking was broken and I couldn’t upload a devlog but it is fixed now (this is why you will see the previous 2 devlogs the same).
About the app. I added panning to the canvas using middle mouse click as it was broken before. Objects now could be moved and scaled using the new selection tool. You can also edit the individual nodes of an object using the node edit tool. You can select multiple nodes to move by holding shift to select, and releasing then moving them as you would normally do with one node.

It seems little but I spent multiple days debugging the same problems and it was a lot of screen time.

Behold the Bezier Pen that is not fully bezier yet!
I added the view port with the first functionality: drawing shapes using a pen. Currently it only makes straight line. Curves will be added in the future. You can snap to the first point to finish the shape and start another (not sure if I should start another or deactivate bezier). SVG functionality will be mainly inspired by the open-source software Inkscape.

I also said I need to move on from the timeline, but I couldn’t :)
Timeline controls now work. I also added the functionality to bound timeline to a specific part using two handles. Now there are left and right margins to the timeline to better show it. Also fixed some bugs :>.

Continued the work on the timeline. I made the time indicator moving, without code this time :). I can now drag the indicator and it snaps to the nearest frame. Also added a play button that moves the indicator at the specific frame rate of the program (that means I can later make the user change the intended frame rate). The timeline still needs implementation of layers, but it took me 3 days till now and I need to start working on the actual drawing and animation part. The next devlog will be about svg functionality.

I added a new class called Timeline. The timeline currently has only zoom functionality with a working time indicator. The indicator can move to any frame on the timeline, but only if I code it to do so :P. I wanted to make it draggable using mouse, but it turned out that there is no built-in click functionality in a custom QWidget; I have to implement one myself. The time of this devlog was mostly spent in debugging the layout :|. I’m very happy that I can make custom widgets this easy, compared to when I tried it in WxWidgets.

Spent a lot of time searching the internet for resources and watching tutorials more than I did coding. I’m happy that I learned new things, but still I struggled a lot to understand CMake and Qt. The problem with Qt is that all tutorials use the Qt Studio. It is a powerfull tool in fact, but I hate it. The software introduces a tool for designing a UI (the whole purpose of the Qt framework) graphically, but coming from a wxWidgets background, I want to code the UI, not doing it like a Figma project. It is possible to do what I want completely in a coding IDE (like VsCode), but I cannot find sufficient tutorials for it (any suggestions would be helpful). After some struggling, I got a window showing, and learned few things from the Qt website. It turned out to be very similar to wxWidgets; I jsut want to get used to the new naming system.

Why I moved from wxWidgets? It is very limited. It lacks transparency features; the UI has that ‘native’ look to your OS and a very basic, boring design. I was mostly motivated towards Qt when I knew about Audacity (a popular, free audio editing software) moving to Qt from WxWidgets. I then knew about other popular apps (like Davinci Resolve and Maya) are also built based on the Qt framework.

The aim of this project is to build a free, open-source desktop app that could be used to produce motion graphics videos, inspired by Adobe AfterEffects and Cavalry. The app will have the basic functionality at first, then I will add more complex ones based on my motion graphics background.