#Timeline

Timeline in UIToolbox shows TimelineTrack rows of TimelineItem spans and markers on a time ruler, with a playhead.

Video tutorial: Timeline. All videos: Video tutorials.

<tb:Timeline name="edit" duration="60" time-format="0.#'s'" style="height: 150px;">
    <tb:TimelineTrack label="Video">
        <tb:TimelineItem label="Intro" start="0" duration="8" />
        <tb:TimelineItem label="Scene A" start="8" duration="17" color="#3CB371" />
    </tb:TimelineTrack>
    <tb:TimelineTrack label="Events">
        <tb:TimelineItem label="Cut" start="8" />   <!-- no duration: a marker -->
    </tb:TimelineTrack>
</tb:Timeline>

var timeline = root.Q<Timeline>("edit");
timeline.GetTrack("Events").AddMarker("Fade", 25);
timeline.ItemReached += item => Debug.Log($"{item.Label} at {item.Start}");
timeline.SelectionChanged += range => Debug.Log(range);
timeline.Play();

• Drag in the ruler to move the playhead. Drag in a lane to select a range. A click on an empty lane clears both selections.
• A click on an item selects it. The tooltip shows "Label: start to end", or "Label: time" for a marker.
• In the UI Builder, a timeline without tracks shows two sample tracks in a dashed outline. The sample does not show in Play mode or in a build, and the UI Builder does not save it to the UXML file.
• With EditItems, a drag on the body of an item moves it, also to the track under the pointer. A drag on the 6-pixel edge of a span moves that edge; a span keeps at least one snap step. A marker has no edges. Escape during a drag puts the item back. Items can overlap.
• With EditItems, the pointer over the edge of a span shows a left-right arrow cursor. A runtime panel shows only texture cursors, so the timeline draws a 32-pixel arrow (Timeline.ResizeCursor). The cursor stays during the drag.
• The timeline takes focus. Left and Right (the arrow keys or the gamepad) move the playhead by one ruler tick. Home and End go to the ends. Space plays and pauses. Escape clears the selections.
• With focus, the wheel over the ruler or a lane zooms around the pointer. Shift+wheel and a horizontal wheel pan. A middle-button drag pans. A double-click in the ruler resets the view.
• Without focus, and over the track names, the wheel scrolls the tracks. The ruler lane ends before the vertical scroll bar, so it keeps the width of the track lanes.
• Set --tb-timeline-playhead, --tb-timeline-selection, --tb-timeline-grid and --tb-timeline-grid-major on .tb-timeline to change the playhead, the range fill, the grid lines and the grid lines of the major ticks.

#Days and hours

The time of a timeline is a number. To show a schedule, let one unit be one hour and give the ruler the steps of a clock.

<tb:Timeline name="week" duration="168" tick-steps="0.5,1,2,3,6,12,24" major-step="24" snap="0.5" edit-items="true" />

string[] days = { "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun" };
string day(float hours) => days[(int)(hours / 24) % 7];
string clock(float hours) => $"{(int)hours % 24:00}:{(int)(hours * 60) % 60:00}";

week.TimeFormatter = hours => $"{day(hours)} {clock(hours)}";               // tooltips: "Tue 14:30"
week.TickFormatter = hours => hours % 24 == 0 ? day(hours) : clock(hours);  // ruler: "Tue", "06:00", "12:00"
week.SetView(24, 48);   // show Tuesday

• tick-steps keeps the ticks on clock times. The ruler takes the smallest step that gives the ticks room: a day for the whole week, 3 hours for one day, less after a zoom. A range too long for the largest step takes a multiple of it.
• major-step="24" makes each midnight a major tick: a bold label, a tick of the full ruler height and a stronger grid line.
• snap="0.5" puts a dragged shift on a half hour.
• The Timeline demo of the examples (TimelineDemo.unity) shows a crew schedule made this way.

#Styling