Skip to main content
Version: 4.x

Timeline tool

Reveal allows for applying styles to nodes based on date property and can be viewed as a playable entity where node styles are applied to different nodes which can be used to showcase progress of the model construction. The API is influenced by the node styling API and it's recommended to read up on this documentation before reading this document.

note

The test data used in the documentation site is for testing and to show the capabilities of the tool. The examples shown is therefore might not be a ideal model construction progression.

Timeline​

The timeline tool provides ability to apply styles by date. It works by creating a set of "keyframes" for provided dates. Each keyframe has a set of associated styled node collections.

Creating keyframes​

To create a Keyframe, use createKeyframe(date: Date)

  • date - Date reference for the keyframe
const keyframe = timeline.createKeyframe(new Date('2021-10-05'));

Add styled node collections to keyframes​

Tool provides feature to add nodes & styles to a Keyframe or number of Keyframes or to all of the Keyframes. For more information on assigning styles please refer CAD Styling.

const nodes = new AssetNodeCollection(sdk, model);
keyframe.assignStyledNodeCollection(nodes, { renderGhosted: false, color: new THREE.Color(0.6, 0.8, 0.45) });

Remove styled node collections from keyframes​

Styled node collections can be removed from keyframes. unassignStyledNodeCollection(nodeCollection: NodeCollection)

  • nodeCollection - Node set to be removed from keyframes.
keyframe.unassignStyledNodeCollection(nodes);

Play timelines​

We use play(startDate: Date, endDate: Date, durationInMilliSeconds: number)

  • startDate - Keyframe date to start the playback of the timeline keyframes.
  • endDate - Keyframe date to stop the playback of the timeline keyframes.
  • durationInMilliSeconds - Number of milli-seconds for the full playback of keyframes.

Note that the dates doesn't need to match the keyframe dates - the playback will be performed on a "virtual" timeline that is linear in time and update the styling whenever a new keyframe is activated. Only one keyframe will be active at any given time, i.e. the model will only have styling from one keyframe active at any time.

Live Editor

Stop timeline playback​

timeline.stop();

Pause timeline​

timeline.pause();

Resume timeline​

timeline.resume();

Get Keyframe by Date​

getKeyframeByDate(date: Date)

  • date - Date of the Keyframe which needs retrived.
const keyframe = timeline.getKeyframeByDate(new Date('2021-10-06'));

Reacting to date changes while in playback mode​

While in the play state, the tool emits events which will be helpful for the users to calculate the progression of the playback of the timeline. The tool provides a TimelineDateUpdateDelegate event which can be subscribed to received below data.

  • date - Virtual date which can be used to calculate progression.
  • activeKeyframe - Current active Keyframe in the playback.
  • startDate - Virtual date to start the playback of the timeline.
  • endDate - Virtual date to stop the playback of the timeline.
note

If we have subscribed to dateChanged event and if there are no active Keyframe during Timeline playback, than activeKeyframe data will be undefined value.

// import { TimelineDateUpdateDelegate } from '@cognite/reveal';

timeline.subscribe('dateChanged', (data) => {
  const date = data.date;
  const keyframe = data.activeKeyframe;
  const startDate = data.startDate;
  const endDate = data.endDate;
});

To unsubscribe from TimelineDateUpdateDelegate event

timeline.unsubscribe('dateChanged', (data) => {});

Removing Keyframe​

By Date​

To remove any Keyframe, use removeKeyframeByDate(date: Date)

  • date - Date of the Keyframe which needs to be removed from the Timeline.
timeline.removeKeyframeByDate(new Date('2021-10-07'));

By Keyframe​

To remove any Keyframe, use removeKeyframe(keyframe: Keyframe)

  • keyframe - Keyframe to be removed from the Timeline.
timeline.removeKeyframe(keyframeMechNodes);

Keyframes in Timeline​

Gets all Keyframes in the Timeline

const allKeyframes = timeline.getAllKeyframes();