Designing a custom timeline with mouse interaction

MarKS

I am building an application where i need to show a timeline view for video streams. I would like to annotate some gestures made in the video using mouse on the time line. To be more specific, as the one shown below:

Annotation 2020-04-17 175421.jpg

I would like to draw black lines (as shown in the image) using mouse, showing range/span of the gesture which can be re-sizable afterwards and the red seek bar which moves along the mouse drag as well. I am unable to start with a good idea as of how should i do it? QGraphicsView or QTableView? Any ideas or links would be very helpful.

mrjj

Hi
I would use a TreeView/widget for left side and QGraphicsView for the actual timeline since you get zoom / pan and
object selection for free.

Also, i would take inspiration from already made widgets.
https://github.com/rivenblades/Timeline

MarKS

@mrjj this is amazing. thank you for pointing me in right direction.

mrjj

@MarKS
Np :)
Note for the resizing of the Items in the GfxView, you can have a look at
http://www.davidwdrell.net/wordpress/?page_id=46
IMHO it gave a good starting point even if not perfect.

to make it compile add
QT += widgets
to the .pro file.

ps. download the zip. the code shown is broken due to html escaping.

MarKS

@mrjj i already have resizing handles implemented for QGraphicsItem i would try to add it to line on my QGraphicsScene. Thanks for pointing out though. I am just wondering how can i add row like features to the view and may be add a QHeaderView like in QTableView to the timeline showing numbers (in my case, frames)?

mrjj

@MarKS
Hi
Ok. so you know QGraphicsView already. that will be huge help.

Regarding the rows.
We could maybe use
https://doc.qt.io/qt-5/qgraphicsview.html#drawBackground
since the row is mostly a visual cue and not really interactive as such.
But when you draw the black lines, we want to stay inside a row so if its just
drawn in the background im not sure how easy it is to keep it inside but
if they have a fixed height then it might work.

For the Time position "ruler" i think i would make a custom widget to draw such ruler as im not sure
QHeaderView can be tweak that much.
Basically its like a ruler widget but with a sliding window/section.
Should not be that complicated to program.

MarKS

@mrjj Exactly! Thanks for the pointer to drawBackground(). Yes! Row would be just the visual cue (may be alternating light and dark colors as shown in the image) to the user but when a user clicks on that row, the line should propagate only in that row. I want my rows height to be fixed though.

I need to figure out how to make this ruler widget.

mrjj

@MarKS
Hi
yeah if user must click on the row to activate im not 100% sure we can fake it using drawBG as we then need to calculate which row that must be./from a global click) But it might work.

I need to figure out how to make this ruler widget.
https://kernelcoder.wordpress.com/tag/ruler-in-qgraphicsview/

Could be used as base. I didn't run it but it looks ok looking at code.

MarKS

@mrjj Yes! i found something similar here https://github.com/Qt-Widgets/IRuler. Should be a good starting point. Let me start writing some code and see how it shows up. If stuck, hopefully i can come back here to ask more questions. thank you for your help. If you come up with something more interesting please drop in here. That would be useful.

mrjj

@MarKS
Ah that looks nice and simply. I wonder if it can scroll.

Also just as a note.
https://www.shotcut.org/
https://github.com/mltframework/shotcut

MarKS

@mrjj Yah scrolling might be an issue. Maybe i resize the ruler widget based on the position of the scrollbar on QGraphicsView?
I have seen this Shotcut thing earlier, i would love something like that but they are using qml and .js to achieve that i suppose.

SGaist

Hi,

You might also want to check kdenlive.

MarKS

@SGaist this looks awesome as well. I am afraid, i don't know qml and no idea about c++ and qml interactions.