How to attempt creating a timeline like in After Effects?

Are you writing your own components and need help with how to set them up or have questions about the components you are deriving from ? Ask them here.
Post Reply
Midnightas
Knows some wx things
Knows some wx things
Posts: 33
Joined: Fri Feb 02, 2018 1:48 pm

How to attempt creating a timeline like in After Effects?

Post by Midnightas » Fri May 24, 2019 8:10 am

Image
Here's an image as some visuals are necessary for something as complicated as the above.
On the left we have a layer's "parameters", it's visibility, locked, solo, etc. On the right there is the layer's position and length or keyframes in the video.

Here's a couple things I can't seem to figure out:
  • Ideally you should be able to scroll through the timeline, vertically and horizontally, but on the left side it should only scroll vertically. I thought about making it 2 different components then, but making sure everything is lined up kinda seems like a hack.
  • A table as the component on the left would not work, as there are children of layers, as you can see where you can edit some values and keyframes that they don't seem to be lined up to the columns of the table, and the larger the depth the further they are to the right.
  • If a parent is moved up and down, the children should follow it. This also seems like a hack to do properly if it were a table.

User avatar
doublemax
Moderator
Moderator
Posts: 13881
Joined: Fri Apr 21, 2006 8:03 pm
Location: $FCE2

Re: How to attempt creating a timeline like in After Effects?

Post by doublemax » Fri May 24, 2019 9:54 am

I'm not 100% sure, but I think this could be done using wxDataViewCtrl, at least with the generic version. Either for just the left part, or even the whole control.

Version 1: wxDVC on the left, 100% custom-drawn wxScrolledWindow on the right
This would give you the option to scroll the whole thing vertically through the scrollbars on the wxDVC and the right part horizontally through the scrollbars on the scrolled window. Aligning the rows should be tricky, but possible. Disadvantage: The vertical scrollbar would be in the middle, between the two controls.

Eventually it might be possible to disable the wxDVCs scrollbar and use the vertical scrollbar from the scrolledwindow to scroll it.

Version2: The whole control is a wxDVC, with the right part being just one column with a custom renderer
Once again, the scrolling is the main problem here. I would disable the horizontal scrollbar in the wxDVC and add a separate wxScrollBar control below the right part to scroll the timeline.

In both cases, the header above the timeline would be another, separate control.
Use the source, Luke!

Midnightas
Knows some wx things
Knows some wx things
Posts: 33
Joined: Fri Feb 02, 2018 1:48 pm

Re: How to attempt creating a timeline like in After Effects?

Post by Midnightas » Sun May 26, 2019 10:25 am

Hmm, not sure if this can be completely made with wxDVC, as the keyframed values like "Position" and whatnot are aligned with the "Mode" column, but have a different type than "Mode" for parents.

Midnightas
Knows some wx things
Knows some wx things
Posts: 33
Joined: Fri Feb 02, 2018 1:48 pm

Re: How to attempt creating a timeline like in After Effects?

Post by Midnightas » Sun May 26, 2019 6:47 pm

An idea popped into my head, can I maybe use a custom renderer with a custom column type of something like "value"?
Depending on the item something else would be rendered, but "Mode" for layers is a simple blending mode option, which can be expressed as some number.

User avatar
doublemax
Moderator
Moderator
Posts: 13881
Joined: Fri Apr 21, 2006 8:03 pm
Location: $FCE2

Re: How to attempt creating a timeline like in After Effects?

Post by doublemax » Sun May 26, 2019 7:54 pm

Midnightas wrote:
Sun May 26, 2019 6:47 pm
An idea popped into my head, can I maybe use a custom renderer with a custom column type of something like "value"?
Depending on the item something else would be rendered, but "Mode" for layers is a simple blending mode option, which can be expressed as some number.
Sounds reasonable. However, i need to admit that i don't know wxDVC that well, i've never used it in any of my projects.

The biggest problem i see is the wxChoice in the "Shape 1" row, because it spans over 3 columns. I don't know how that could be done.
Use the source, Luke!

Midnightas
Knows some wx things
Knows some wx things
Posts: 33
Joined: Fri Feb 02, 2018 1:48 pm

Re: How to attempt creating a timeline like in After Effects?

Post by Midnightas » Mon May 27, 2019 8:00 am

Well, that's mostly a stylistic choice and isn't necessary, though it would look nice, thanks!

Post Reply