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",
)Parameters
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"],
)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 colorsInit 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 we will usevideo_id = 350000 # set your video id hereGet 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)Last updated
Was this helpful?