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.

• Kings of england
• List of British monarchs
• List of Parliaments of England
• List of Parliaments of Great Britain
• List of Parliaments of the United Kingdom
• Duration of English Parliaments before 1660
• Duration of English, British and United Kingdom Parliaments from 1660
• List of British Governments
• Witenagemot
• Curia Regis
• Parliament of England
• The Protectorate
• Parliament of England
• Parliament of Great Britain
• Parliament of the United Kingdom