Simile Timeline

From TNG Wiki
Jump to: navigation, search
Ambox notice.png Simile Timeline changes in TNG V9 include
  • An additional table field was added to accommodate an event title
  • The upper and lower portions of the Simile Timeline have been switched
  • The upper and lower portions of the Simile Timeline are now synchronized with each other.
  • Marriages and the birth of children now appear on the Simile Timeline.
  • Life events appear on the Simile Timeline.
  • Different colored dots are used to differentiate the type of event on the timeline.
TNG 9.0


Major changes were made to the Simile Timeline in TNG V9

  • 88 Timeline: A separate field has been added for the Event Title (helps with the Simile timeline).
  • 89 Timeline: Enhancements have been made to the Simile timeline (individual and family events added for first person, sections now synchonized).


Note that before upgrading to TNG V9, you should back up your Timeline Events database from TNG V8 (tng_timelineevents.bak) and save a copy of it in case of a problem with the updated table structure.

Using the Simile Timeline

The Simile timeline portion of the timeline has two components:

  • an upper section showing months also called the timeline month band, and
  • a lower portion showing years, also called the timeline year band.

Note that in TNG V8, the timeline month band was shown below the timeline year band.

A small vertical strip in the center of the lower (years) section is lighter in color and represents the time spanned by the entire months section.

Navigation

The two sections are synchronized and move together. To navigate quickly through the timeline, click and hold in the years section and drag the chart left or right. For tighter fine control, do the same action in the months section. You can also use the keyboard to navigate. To do this, the cursor focus needs to be in the Simile timeline (a single click on the timeline will do this). The arrow keys will provide fine control while the 'Page Up' and 'Page Down' keys will quickly move through the timeline.

Simile Timeline Key

Features

Events on the timeline are differentiated using colored dots as follows:

  • Dull-blue-circle.pngPurple - major life events (birth, marriage, birth of children)
  • Green-circle.png Green - custom life events (occupation, census, etc.)
  • Red-circle.png Red - timeline events (Events added through the admin menu as global timeline events). Global timeline events that have both a beginning and an end date will be represented by a bar rather than a dot.

Clicking on an event will open a bubble that shows additional information about that particular event.

Below the Simile timeline is a simple timeline bar with lines, numbers representing the timeline events and years to give context. Below the simple timeline is a list of the global timeline events included in the timeline.

Toggle Lines

Clicking on "Toggle Lines" will remove the lines and leave the numbers and years. Clicking "Toggle Lines" again will restore the lines. Clicking on a year will center the Simile timeline around that year. Clicking on a number will move the page down to the corresponding global timeline event in the event list.

Add People

There are a couple of ways to add people to the Simile timeline. By clicking the "Add People" button, you can search for and add people to the Simile timeline. If you are viewing a timeline for one person, then navigate to another person and view their timeline, both people will appear in the timeline. This will continue as you view more people's timeline pages.

When more than one person appears on a timeline, a box below the word "Delete" will appear for each person other than the person whose timeline is being viewed. To remove people from a timeline, simply check the appropriate boxes and click the Refresh button.

When more than one person appears on the Simile timeline, only global timeline events and the timeline for the included people will appear. Life events such as marriages and children and custom events such as occupation, census, etc. will not appears.

Event Title Field

In versions of TNG prior to TNG V9, the text entered into the the event description field appeared in the event detail and the event title. The Simile Timeline uses code from the Simile Timeline project. Where this caused problems was in the rendering of HTML. If a timeline event was created with HTML, the raw text appeared in the event title field of the pop-open bubble and it appeared as properly rendered HTML in the event detail portion.

Below are screenshots that show the difference between TNG 9 and previous versions when adding a new Timeline Event. This setting can be found under Admin >> Timeline Events >> Add New.

TNG V8 and prior

TNG version: 8.1.3

Timeline event settings in TNG version 8 TNG V8 Add New Timeline Event


TNG V9

TNG version: 9.0

Timeline event settings in TNG version 9 TNG V9 Add New Timeline Event

Event Description Field

This field appears in the body of the pop-up bubble on the Simile timeline and in the list of timeline events below the timeline. Placing HTML tags within the body text gives a means for adding images, links, styling, etc. The screenshots below show the pop-up bubble and the same event in the list of timeline events.

TNG V9 Add New Timeline Event
...
TNG V9 Add New Timeline Event

Simile Timeline Settings

The screenshots below show the parameters modified by each setting. They also show settings that may be useful.
More detailed explanations are provided below. TNG V9 Simile Timeline Settings

The Simile Timeline is made up of two timeline bands:

  • Year band represented by number 4 in the image below
  • Month band represented by number 7 in the image below, which is displayed below the year band in TNG V8 and above the Year band in TNG V9

TNG V9 Simile Timeline Settings

1. Starting chart width

This is the width in pixels of the small bar timeline below the Simile timeline. The Simile timeline resizes based on the size and resolution of the viewing screen. This is the only parameter that can also be modified by a site visitor. Depending on the resolution of the monitor that is used to view the timeline, a larger or smaller chart width may be appropriate. If the timeline width exceeds the width and resolution of the screen used to view the timeline, scroll bars will need to be used to view the entire timeline.

2. Enable Simile timeline

To use the Simile timeline, select 'Yes'. If this option is set to 'No', only the small timeline bar will be displayed with lines hyperlinked to the corresponding timeline event.

3. Chart height

This setting determines the total height in pixels of the timeline chart. If the chart height is set too large, there will be wasted empty space at the bottom of the chart. If it is set too small, events will fall off of the chart and won't be visible.

4. Vertical percentage for years

This setting determines the vertical percentage of the timeline chart that represents the lower, or 'years' portion of the timeline chart. This setting plus the Vertical percetage for months should add up to 100. Going above 100% will push part of the chart outside the visible bounds of the chart. Conversely, if these two settings total less than 100%, the two sections will not fill the bounds of the chart and you will end up with a third blank section at the bottom (if the chart height is not sufficient, events that fall off the chart will overlap this blank section). Setting the vertical percentage for years to zero will eliminate the 'year' portion of the Simile timeline. Likewise, setting 'vertical percentage to months' to zero will eliminate the 'months' portion of the Simile timeline.

5. Pixels between years

This setting determines the number of pixels between years in the lower portion of the Simile timeline. The width of the Simile timeline divided by this setting determines how many years are spanned by the lower portion of the Simile timeline. The screen resolution along with the template used determine the full width of the Simile timeline, so some judgement and calculation should be used to determine the best setting to use here. For example, if a screen has a resolution of 1440 x 900 and TNG is using template 7, which uses a side menu, you end up with a Simile timeline that is pretty close to 1200 pixels wide. If the 'pixels between years' is set to 15 on in this case, the lower portion of the Simile timeline will encompass 80 years. If everything is the same, but template 8 (which does not use a side menu) is used, the lower portion of the Simile timeline will encompass about 93 years (1440 minus a few pixels for padding divided by 15).

6. Years between year markers

This setting determines the interval between markers on the Simile timeline. For example, if this is set to 10, there will be a line and the year every decade (i.e. 1870, 1880, 1890, etc.). If this setting is too small, the markers will be too close to read the years.

7. Vertical percentage for months

This setting determines the vertical percentage of the timeline chart that represents the upper, or 'months' portion of the timeline chart. This setting plus the Vertical percentage for years should add up to 100. Going above 100% will push part of the chart outside the visible bounds of the chart. Conversely, if these two settings total less than 100%, the two sections will not fill the bounds of the chart and you will end up with a third blank section at the bottom (if the chart height is not sufficient, events that fall off the chart will overlap this blank section). Setting the vertical percentage for years to zero will eliminate the 'year' portion of the Simile timeline. Likewise, setting 'vertical percentage to months' to zero will eliminate the 'months' portion of the Simile timeline.

8. Pixels between months

Similar to setting #5 above, this setting determines the number of pixels between months in the upper portion of the Simile timeline. The width of the Simile timeline divided by this setting determines how many months are spanned by the upper portion of the Simile timeline. The screen resolution along with the template used determine the full width of the Simile timeline, so some judgement and calculation should be used to determine the best setting to use here. For example, if a screen has a resolution of 1440 x 900 and TNG is using template 7, which uses a side menu, you end up with a Simile timeline that is pretty close to 1200 pixels wide. If the 'pixels between months' is set to 20 on in this case, the upper portion of the Simile timeline will encompass about 60 months or 5 years.

9. Events to include

This setting determines whether to include all timeline events in the Simile timeline or only those events that fall within the person's lifetime. If the option is chosen to only show those events that fall within a person's lifespan, more events will appear on the Simile timeline by adding more people to the timeline.