Till Nagel


Animated Time Range Slider

by Till Nagel.

A customizable interactive range slider with animation capabilities.

Two customized range sliders, top one for hours, and bottom one for weekdays

With this widget for Processing you can

  • Let users select and adjust time ranges
  • Handle animation
  • Adapt the visual style
  • Handle interactions via a simple event method.

Download TimeRangeSlider for Processing, or TimeRangeSlider for a Java IDE.
You can also fork or download the project at our git repository.

Users can drag the slider to change the selected time range, or move the handles to adjust the size of the range. Thus, they not only can move a point in time around (as in a movie player), or a fixed time period (as in many data visualization interfaces), but also seamlessly adapt the time range itself. The widget also provides some animation functionality, which can be employed by the application programmatically, or interactively by the user. On every change of the time range an event is fired so the application can connect the interface with some temporal data.

Range sliders are an old concept, yet I haven’t found a good extendable one for Processing / Java. I created this UI widget for a multitouch visualization of public transport data (Live Singapore!), where users could select time ranges to compare, or watch changes over the day. Some of my students asked me about it, so I extended it a bit, and made it customizable. Be aware, that this is not a library, still rough, and just provided as-is.

Usage & Settings

The TimeRangeSlider can be used for any time spans and any time units, and its functionality and visual style can be modified according to your needs. Various properties can be set which affects the behavior (e.g. the speed of the animation) or the display (e.g. whether to show marks).

Let’s start by simply creating a TimeRangeSlider.

TimeRangeSlider timeRangeSlider;

void setup() {
	size(800, 600);
	DateTime start = new DateTime(2011, 04, 11, 10, 0, 0);
	DateTime end = new DateTime(2011, 04, 11, 22, 0, 0);
	timeRangeSlider = new TimeRangeSlider(this, 100, 100, 300, 16,
		start, end, 60 * 60);
}

void draw() {
	background(255);
	timeRangeSlider.draw();
}

In the constructor, we set the position (here: 100, 100) and dimension (300, 16) of the widget, specify start and end date, and a time interval (60 * 60 seconds, i.e. 1 hour). The time interval sets the initial value of the time range in seconds. While the other intervals are all set to the same value by default, you can set them independently:

  • The tickInterval defines the smallest possible time period for interaction, which is used as well for the little marks where users can drag the handles to.
  • The animationInterval defines the step width of the animation interval, i.e. which time point should be shown as next frame.

The TimeRangeSlider uses the Joda Time library, a great Java library to handle dates and times.

Using the time range

To use the current time range, whether changed by user interaction or by the animation, create a timeUpdated method with two parameters. Now you can use the dateTimes to update your data.

void timeUpdated(DateTime startDateTime, DateTime endDateTime) {
  println("timeUpdated to " + startDateTime.toString("hh:mm") +
    " - " + endDateTime.toString("hh:mm"));
}

Interaction & Animation

If you are forwarding keyboard interactions, the TimeRangeSlider handles starting and stopping the animation (by pressing the Space key), and stepping through the time (by pressing Left and Right keys).

void keyPressed() {
	timeRangeSlider.onKeyPressed(key, keyCode);
}

void mouseMoved() {
	timeRangeSlider.onMoved(mouseX, mouseY);
}

void mouseDragged() {
	timeRangeSlider.onDragged(mouseX, mouseY,
		pmouseX, pmouseY);
}

For finer adjusted animation functionality, you can use the following control methods: play(), pause(), playOrPause(), nextAnimationStep(), previousAnimationStep(), nextInterval(), previousInterval(). For instance, if you want to create a play button, take a look at the example StyledTimeRangeSliderTestApp.

All time range properties can be set programmatically too. For instance, repeatedly increasing the end time results in a steadily growing time range (see comment below). Take a look at the examples to see sliders with various settings.

Visual Style

The widget runs out of the box with a default style. It’s rather bland, so I’d suggest creating your own design, if you are going to offer that slider to end-users. For that, either change the code of the TimeRangeSlider, or extend it by writing your own subclass. In the latter case, all interface elements such as the timeline, the handles, and the labels can be adapted by overriding their display methods.

Default style

Style based on Blaubarry UI Kit by Mikael Eldenberg.

Note, that this is not a GUI library where the full look & feel can be set via methods. While there are some methods to switch interface functionality (such as showTicks(true)), there are no layout or visual style methods (such as setLabelFont(“Helvetica”)). Extending the class gives you the possibility to do that and much more, and allows a fine-grained adaptation.

Other

Histogram

The slider can be combined with a histogram or other simple data display techniques appropriate for continuous or sequential data.

Time range slider with histogram (detail) in a geo-visualization

Multitouch

Range sliders are an interesting choice for multitouch interfaces. Users can drag both handles at the same time, and instantly see the changes in a visualization.
Take a look at the MultitouchTimeRangeSliderTestApp (only in the Java distribution), or leave a comment for an example.

Radial Range Slider

See also the Radial Range Slider for handling circular times, such as hours of the day.

Non-temporal data

Note, that this TimeRangeSlider widget was made for temporal data with many of the methods specifically written to simplify common tasks, such as animation or time comparison. Feel free to use the code as basis for a range slider handling other continuous or sequential data sets.

21 comments on ‘Animated Time Range Slider’

  1. jkofmsk says:

    Just what I was looking for :)

    Thanks for sharing!

  2. lahunt says:

    This is fantastic, thanks so much for this.

    In your article you state ‘repeatedly increasing the end time results in a steadily growing time range’. Could you please point me to which method or properties I could modify in the processing code in order to do this? I’m thinking a second play/pause button that grows the time range…

    • Till Nagel says:

      You’ll need to extend the TimeRangeSlider and add a method for this, e.g.

      public void increaseRange() {
      aggregationIntervalSeconds += tickIntervalSeconds;
      updateAnimationStep();
      }

      Now, you could call that for instance in your keyPressed method, such as:

      void keyPressed() {
      if (key == 'i') {
      timeRangeSlider.increaseRange();
      }
      timeRangeSlider.onKeyPressed(key, keyCode);
      }

      Hope that helps!

  3. lahunt says:

    that does indeed help a lot, thanks very much!

  4. Tomás says:

    Hi, thank’s so much, is just what i needed.
    Just a question, is it posible to implement two pitchs in one slide bar. I mean if is it posible start at 10 am and stop to 11 am; and again, start 16pm and finish 17pm.
    I was really looking for this solution, but if it’s not, there is not problem, it is closely what i need.

    • Till Nagel says:

      Tomás, this is currently not possible. But if you are extending it to add this functionality, I’d be happy to hear about it and link to your code.

      For an easier (and probably less viable) solution, you could simply use two TimeRangeSliders, one atop the other, initialize them with different ranges, and make both listen to mouse events. But of course, you would need to manually take care of overlappings.

  5. Ella Chu says:

    Hi,
    I am intersted in the Animated Time Range Slider.Then I want to know whether I can only through the Java the language to use the Slider or not.
    Can I use the Slider in JavaScript language ? Can I embed the Slider in My html page ?

    • Till Nagel says:

      I provide the Animated Time Range Slider only in Java/Processing, so for now it can not be embedded in a HTML page.

      Having said that, it should be possible to port it to JavaScript. The tricky part will be the date and time functions, as I am using the Java library Joda time.

  6. timmy says:

    Hi,

    I am trying to use the time range slider to render some data based on their time stamps. I am unable to link the time slider with the data. Can you please give me some idea about how to do it.

  7. codeine says:

    Hi Till,
    Thanks for the awesome slider. I had several questions:
    1) I’m working with a dataset that has millisecond scale time increments. What would be the best way to implement this? I’m planning on going through your code and overwriting any methods that call “plusSeconds”/”minusSeconds” with the respective jodatime milliseconds incrementing methods, but I wanted to get your take on it to see if there’s additional stuff I need to do.
    2) I’m looking to have this particular slider have just one point that moves across, instead of an range. once again, i’m planning on just going through the code and overwriting methods that require a range, but i was wondering if you might know of a better way to do this.
    3) could you provide some example code for the histogram addition? i personally need my slider to have a time series line graph on top of it, but if you point me in the right direction i’m sure i could figure it out.

    thanks again for the awesome code!

    • Till Nagel says:

      Thanks for the nice feedback. Regarding your points:

      1) Yes, that’s how I would do it. Everything else should work as DateTime is capable of handling milliseconds. Of course, you’d need to adapt the display too.

      2) At the moment, the TimeRangeSlider actually only can handle ranges. So, yes, you’d need to change that too.

      3) It should be straight-forward, really. I just put the histogram behind the slider, and adapted the bars transparency based on the current selected time range.

      And overall, I’d love to see your 1) and 2) changes as a git fork. Would be great for others to learn from.

      • codeine says:

        Hi Till,

        So i ended up completing that modified slider with the millisecond increments and the single scroller instead of the range. i forked your repository but im not sure if i did it correctly. if you could help me sort it out so it looks clean i would appreciate it!

  8. Shrey says:

    Hi Till,

    Thanks for the awesome slider and the unfolding library. I used it for my prototype for my poster at VAST 2013.

    Thanks alot

    - Shrey

    • Till Nagel says:

      Yes, I remember seeing the slider in your Fast Forward presentation, but did not find you again in the Poster session at the conference.

      In any case, glad to hear it was useful to you.

  9. Sérgio Sousa says:

    Hi,

    I’ve tried your code and enjoyed it a lot.

    I have a different request that I haven’t found: basically, I need the range time (enTime) to be dynamic, simulating a real time clock. Is it possible to set dynamically a new end time and redraw the slider?

    Thanks in advance.

    • Till Nagel says:

      Do you want to set the current time range or the overall time range?

      You can set the former by calling setCurrentRange(newStartDateTime, newEndDateTime). I also just added the two methods setCurrentStartDateTime and setCurrentEndDateTime in the github repository for convenience.

  10. Sérgio Sousa says:

    Hi,

    I would like to change the overall timerange (outside limits) to use it as a “time player”, where you can scroll for past and / or future of the current time window.

    I’ll take a look to your changes.

    Many thanks!

Leave a Reply