Please turn on JavaScript. To find out how to do this visit the WebWise JavaScript guide.

About Royal Timeline

Demonstrates

  • glow.anim
  • glow.tweens
  • glow.events
  • glow.widgets.Timetable
  • glow.widgets.Panel
  • glow.widgets.Slider

Overview

This is basically a glow.widgets.Timetable, but it has been enhanced with a few nice extras. In particular, it has a zoom control, which uses a glow.widgets.Slider, quick focus buttons that use a glow.anim.Animation and most parts of the Timetable are clickable, giving a glow.widgets.Panel with some more detail.

Building the Timetable

The Timetable itself is fairly conventional. The data is sourced from several large JSON style objects that are run through transformation functions before being placed into a lager Array to build the tracks option for the Timetable constructor.

There are actually five Tracks built into the Timetable, but the monarch and ministry Tracks only show at more detailed zoom levels.

The Zoom Control

A glow.widgets.Slider is used to povide the zoom control, but not as a form element. The zooming is handled purely by the Sllider's change event. The zoom level doesn't change linearly with the Slider position, to allow finer control at more detailed zoom levels, so a transform function is used to convert the Slider's value in to the number of years in view.

As well as altering the number of years in view, the zoom control has an extra feature of altering the amount of detail the Timetable shows. This is done in two ways.

Firstly there are to tracks ("Monarch" and "Ministry") of detailed information that are disabled unless the zoom level is detailed enough to make them legible. When they are enabled, the related overview Track (eg "House" in the case of "Monarch") is reduced in size to make room. This also means that the Track header template needs changing.

Secondly the scale and the banding interval are changed so that they are more appropriate for the zoom level.

The Quick Focus Buttons

Finally, there are the two Quick Focus buttons. These move the view range of the Timetable so that a given event is in view (as close to the view start as possible). Rather than do a straight jump, this is acheived with an animation.

To do this, a glow.anim.Animation is created and the "frame" event handler calls the Timetable's currentPosition method.

Summary

The key goals of this demonsatration are;

  • To show a Timetable widget, and demonstrate some of its flexibilty
  • To use a Slider widget outside a form context
  • To use an Animation that isn't simply altering a CSS value.
  • To use some of glows built in, but non-broswer, events.

Note About Data Accuracy

Since this is a demo of Glow's capabilities, no guarantee is made about the accuracy of the data, all of which was sourced from the following Wikipedia pages and some linked from them.

API Quick Reference

JavaScript is required to use the quick reference

Related links

BBC © 2014 The BBC is not responsible for the content of external sites. Read more.

This page is best viewed in an up-to-date web browser with style sheets (CSS) enabled. While you will be able to view the content of this page in your current browser, you will not be able to get the full visual experience. Please consider upgrading your browser software or enabling style sheets (CSS) if you are able to do so.