Timeline

Introduction

Timeline widget is used to display video timeline. It can be used to get current frame and display information about the frame or it's annotation.

Function signature

timeline = Timeline(
    frames_count=31,
    intervals=[[0, 6], [6, 11], [12, 15], [16, 17], [18, 19], [20, 31]],
    colors=["#DB7093", "#93db70", "#7093db", "#70dbb8", "#db8370", "#db70c9"],
    height="30px",
)

default

Parameters

Parameters	Type	Description
frames_count	int	Timeline frames count
intervals	List[List[int]]	Frame intervals
colors	List[str]	Intervals colors in hex color codes
height	str	Timeline height in px
pointer_color	str	Color of the pointer
tooltip_content	Widget	Content of the tooltip
widget_id	str	ID of the widget

frames_count

Timeline (video) frames count.

type: int

timeline = Timeline(
    frames_count=31,
    intervals=[[0, 6], [6, 11], [12, 15], [16, 17], [18, 19], [20, 31]],
    colors=["#DB7093", "#93db70", "#7093db", "#70dbb8", "#db8370", "#db70c9"],
)

frames_count

intervals

Set frame intervals. Each interval is a list of two integers: [start_frame, end_frame]. Intervals and color lists must be the same length.

type: List[List[int]]

timeline = Timeline(
    frames_count=31,
    intervals=[[0, 15], [16, 31]],
    colors=["#93db70", "#7093db"],
)

colors

Set interval colors in hex color codes. Intervals and color lists must be the same length.

type: List[str]

timeline = Timeline(
    frames_count=31,
    intervals=[[0, 31]],
    colors=["#4C0013"],
)

height

Set widget height in px.

type: str

default value: 30px

timeline = Timeline(
    frames_count=31,
    intervals=[[0, 6], [6, 11], [12, 15], [16, 17], [18, 19], [20, 31]],
    colors=["#DB7093", "#93db70", "#7093db", "#70dbb8", "#db8370", "#db70c9"],
    height="60px",
)

pointer_color

Color of the pointer. Set hex color code or None to use the default color.

type: str

default value: None

timeline = Timeline(
    frames_count=31,
    intervals=[[0, 6], [6, 11], [12, 15], [16, 17], [18, 19], [20, 31]],
    colors=["#DB7093", "#93db70", "#7093db", "#70dbb8", "#db8370", "#db70c9"],
    pointer_color="#FF0000", # red color
)

tooltip_content

Content of Tooltip.

type: Widget

default value: None

timeline = Timeline(
    frames_count=31,
    intervals=[[0, 6], [6, 11], [12, 15], [16, 17], [18, 19], [20, 31]],
    colors=["#DB7093", "#93db70", "#7093db", "#70dbb8", "#db8370", "#db70c9"],
    pointer_color="#FF0000", # red color
    tooltip_content=Text("Clickable Area", "text"),
)

widget_id

ID of the widget.

type: str

default value: None

Mini App Example

You can find this example in our Github repository:

supervisely-ecosystem/ui-widgets-demos/controls/008_timeline/src/main.py

Import libraries

import os
from random import randint
import supervisely as sly
from dotenv import load_dotenv
from supervisely.app.widgets import (
    Card,
    Container,
    Timeline,
    Text,
    InputNumber,
    VideoThumbnail,
)

Write a function for dividing the total number of frames by ranges

def divide_to_ranges(total, n):
    step = total // n
    ranges = []
    for i in range(n):
        start = i * step
        end = start + step - 1 if i < n - 1 else total - 1
        ranges.append([start, end])
    return ranges, len(ranges)

Write function generating random hex colors for each range

def generate_hex_colors(n):
    colors = []
    for _ in range(n):
        color = "#{:06x}".format(randint(0, 0xFFFFFF))
        colors.append(color)
    return colors

Init API client

First, we load environment variables with credentials and init API for communicating with Supervisely Instance:

load_dotenv("local.env")
load_dotenv(os.path.expanduser("~/supervisely.env"))

api = sly.Api()

Initialize Video ID we will use

video_id = 350000  # set your video id here

Get video info from server and prepare VideoThumbnail widget

video = api.video.get_info_by_id(video_id)
video_thumbnail = VideoThumbnail(video)

Get video intervals and colors from video frame count

video_intervals, intervals_n = divide_to_ranges(video.frames_count, 5)
intervals_colors = generate_hex_colors(intervals_n)

Initialize Timeline widget

timeline = Timeline(
    frames_count=video.frames_count,
    intervals=video_intervals,
    colors=intervals_colors,
    height="35px",
)

Create InputNumber widget for setting current frame

timeline_select_frame = InputNumber(value=1, min=0, max=video.frames_count, step=1)
timeline_text = Text("<span>Frame:</span>")

Create Timeline container

timeline_container = Container(
    widgets=[
        timeline,
        timeline_text,
        timeline_select_frame,
    ],
    direction="horizontal",
    fractions=[1, 0, 0],
    style="place-items: center;",
)

Create app layout

main_container = Container(widgets=[video_thumbnail, timeline_container])
layout = Card(title="Timeline", content=main_container)

Create app using layout

Create an app object with layout parameter.

app = sly.Application(layout=layout)

Add callbacks for changing the current frame

@timeline.click
def show_current_value(pointer):
    timeline_select_frame.value = pointer


@timeline_select_frame.value_changed
def set_timeline_pointer(frame):
    timeline.set_pointer(frame)