Page 1 of 1

How to attempt creating a timeline like in After Effects?

Posted: Fri May 24, 2019 8:10 am
by Midnightas
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.

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

Posted: Fri May 24, 2019 9:54 am
by doublemax
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.

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

Posted: Sun May 26, 2019 10:25 am
by Midnightas
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.

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

Posted: Sun May 26, 2019 6:47 pm
by Midnightas
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.

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

Posted: Sun May 26, 2019 7:54 pm
by doublemax
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.

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

Posted: Mon May 27, 2019 8:00 am
by Midnightas
Well, that's mostly a stylistic choice and isn't necessary, though it would look nice, thanks!