Jump to: navigation, search

Improve the Timeline Clips Color Palette

Project Overview

Why this project?

With the demands for user-friendly features in an application increasing each day, it was about time to give the timeline of Kdenlive a makeover.

The timeline is the component of Kdenlive where the user manipulates different clips. When working on a project that involves editing a lot of videos , audio, and images the timeline gets filled with a large number of clips of different types. All is fine and good as long as you remember whether a particular clip from the dozen other ones in the timeline is a video or an image. However, if that is not the case, you would find yourself in a rather confused state as all the clips in the timeline look alike!

This is where adding a color palette to the timeline comes in handy. The user would be able to differentiate between each clip type just by looking at the color of the clip in the timeline.

Implementaion details

The timeline makes use of the KColorScheme class, which provides access to the system color palette. The KColorScheme class has a ForegroundRole enumeration that describes the foreground color is selected from the given set of default colors. The colors in the timeline are handled by this enumeration.


Currently, the application has default colours only for audio and video clips, with all the clips except audio having the same colour. This project will assign different colours to each type of clip and also add a toggle ON/OFF for the Proxy as well as the Clip Effect.


Farid Abdelnour

Work Report

Week 1

  • Built Development Environment
  • Went through the source code
  • Understood how the colors are handled by the timeline components like the target button color.

Week 2

  • Figured out how to differentiate between different clip types while assigning colors to them.
  • Since, there already was a difference between the audio and video clips, I tried to understand how the application realised whether a clip is audio or not.
  • Found that definition.h contains the producer enumeration which lists all types of clips.
  • Added color to title clip

Week 3

Neutral color added to Image clip
  • Since the color assigned to the title clip was hardcoded, i.e. the color didn't change according to theme, I searched for different uses of QColor and KColorscheme classes that would rectify this.
  • Added neutral color of the ForegroundRole of KColorScheme class to image clip

Week 4

  • Worked on making the marker comment display by default.
  • Since the codebase is still new to me, a lot of time was spent trying to figure out how the comments are handled by the timeline.
  • With the help of Kdenlive developers, I found out that kdenlivesetting.kcfg deals with assigning default values to any component in the application.

Week 5

  • Understood how to combine different default colors of ForegroundRole to form a new color as done by the target button.
  • Assigned color to title clips by combining red and blue and for slideshows blue and orange were combined.
Tiitle clip after combining the default colors
Slideshow clip after combining colors of image and video clips

Week 6

  • All the changes were reviewed and merged to the master branch.
  • Started work on having visual confirmation whether the clip is proxy or not.

Work Completed

  • Violet Color added to title
  • Neutral color added to image
  • Brown color added to slideshow clips.
  • Marker comments displayed by default

The Road ahead

  • Displaying whether a clip has Proxy effect in the timeline
  • Displaying whether a clip has clip effect in the timeline
  • Adding option to let users choose their own color as per their convenience.

This page was last edited on 18 February 2020, at 02:07. Content is available under Creative Commons License SA 4.0 unless otherwise noted.