Storyteller- Playback

Playback Control	Event Info	Developer(s)
	Relevant Event count: 0/191 Total Event count: 0/191 Event type: Details: Timestamp:

Play/Pause

The button starts and pauses a playback. You can hit the space bar to toggle this from the keyboard. You can also use the slider to go to any point in the playback.

The and buttons move the playback one step at a time for fine grained control of a playback. You can use left arrow and right arrow keys to control this from the keyboard.

The moves the playback to the beginning and the buttons move the playback to the next comment (or the end if there are none). You can use shift + left arrow and shift + right arrow keys to control this from the keyboard.

You can use ctrl + shift + left arrow and ctrl + shift + right arrow keys to move to the beginning and end of the playback. All comments will be skipped.

Playback speed

Current speed: 100 ms in between events

There is a user defined amount of time in between each coding event. You can adjust this amount of time by using this control.

You can hit shift + up arrow to speed up and shift + down arrow to slow down the playback from the keyboard.

Pause playback for all comments

When a comment is encountered the playback will be paused so the user can see it and the current state of the code. By default, the playback will pause for all comments.

You can hit shift + p to toggle whether to pause for comments from the keyboard.

Show all cuts and pastes in blocks

Cuts, pastes, and group tabbing affect many different code characters at once. These operations can be slow to watch. By default, entire groups of characters that were cut, pasted, or tabbed will be shown in a single step to improve watchability. If you'd like to animate each individual character, use this control.

You can hit shift + b to toggle whether to show cuts/pastes in blocks from the keyboard.

Highlight recent changes

To make it easier to see what changes have been made since the last pause point, new inserts and deletes are highlighted. The highlights are removed each time you resume a playback by hitting .

You can hit shift + h to toggle whether to highlight new events from the keyboard.

To clear all recent changes without resuming the playback use this control. You can hit shift + c to clear the changes from the keyboard.

Download playback to your filesystem

Save the current playback to your file system in a file. This file can be uploaded in the future to replay the exact same playback.

Upload a previous playback

Select a previously downloaded playback file to replay it. The current playback information will be lost.

Increase/decrease the font size:

Change the size of the text on the screen.

shift + alt + up arrow and shift + alt + down arrow will change the size of the text.

Options

shift o opens this options window. esc closes it.

Saving the state of a playback will cause a zip file to be downloaded. You can unzip and open it with a Storyteller supported editor. This has the contents of the code where the playback was paused so that you can build from that point in the playback. The file also has some history (code and comments from the current playback) that will be displayed in future playbacks.

There are three options when saving the state of a playback:

No History Beyond Pause Point

With this type of save, all the code and comments up to the pause point are recorded but none after. In the download there will be no code or comments past the pause point in the playback.

This is the best option if you'd like to forget everything after the pause point.

Minimal History

With this type of save, only the code on the screen is added to the download. Any code that was added and then deleted will not be a part of the download's history.

This is the best option if you'd like to completely forget all the past history except for what is on the screen.

Full History with Future Events Undone

With this type of save, all of the history of the playback is recorded in the download, even after the point where the playback was paused. However, all events after the pause point are undone by adding the inverse of those events.

For example, if there is a create file followed by three inserts after the point in the playback where the user paused, then three deletes and a delete file will be added to the list of events to roll back the starting state of the new download to the pause point.

All comments and history are available to see in playbacks from that project but the starting point for future development is the pause point in the playback. This is the best option if you want a deep history of all the changes in your code.

This filter allows you to see coding activity during different periods of time. Below is a list of all time spans that, if code was written in that time frame, it will be animated. Any code written outside of these time spans will not be animated but it will still be shown among the rest of the code.

You can use the timestamp of the current event to make your filters. This is useful to skip unintersting parts of the development process.

By default, a time span with the entire history is provided. You can add multiple time spans and remove them as needed.

Selected time span filters
	Start Time	End Time
×	Fri, 02/09/18, 02:57:56 AM	Tue, 05/27/25, 04:54:43 PM

Start time:

End time:

This filter allows you to animate the code written by certain developer(s).

All selected developers' code will be animated. The code from developers who were not selected is still shown but it is not animated in the playback.

This is useful for focusing on the contribution of one or more developers.

Alan Turing (aturing@mail.com)

This filter allows you to animate the code written in certain files.

Only the code in the selected files will be animated and displayed. The code in the other files will be shown but will not be animated. This is useful for focusing on one or more files.

Files and folders that were added and then deleted will be available for selection.

+merge-example

-quotes.txt

Hide deleted files and directories

This filter allows you to select some code and have it be animated in a playback. Only the selected text on the screen will be played back.

It will show all the code that ever touched the selected code. This is useful for finding out the full history of a block of code (like a method).

Playback the Selected Text on the Screen
use only the selected text and no other filters
use the selected text and the other filters (time, dev group, file)

Pen Color

Pen size

●

History

Browse for an image

Add an image

Comment Image