1. Overview
HuTime is a platform for visualizing and analyzing timelines and charts on a Web page. You can add new ideas to the view of your timeline or chart or develop a new Web application, through HuTime APIs.
2. Basic Structure
HuTime consists primarily of three types of containers, a panel collection, panel, and layer, and of an application root that provides control over these containers. Data, figures, text, images, and others are displayed on layers. You can also combine these layers together on a panel for use. A wide variety of classes are defined for layers depending on their purposes, such as displaying timelines, charts or scales.
| Type | Typical Class | Function |
|---|---|---|
| Application root | HuTime | Has one or more panel collections and provides control over how the entire application works. |
| Panel collection | HuTime.PanelCollection | Serves as a container that accommodates one or more panels and provides cooperation among panels. You specify the display mode for each panel collection. |
| Panel | HuTime.TilePanel | Serves as a container that accommodates one or more layers and displays them. |
| Layer | HuTime.Layer | Serves as a container that displays figures and text. Multiple types of layer classes are available depending on the functions, such as for timelines or for charts. |
3. HuTime's Coordinate System (TV Coordinates)
In addition to the XY coordinate system on the screen, HuTime has its own TV coordinate system. It can provide the horizontal display mode and vertical display mode by converting TV coordinates into XY coordinates.
t axis and v axis in horizontal display mode
(1) t Axis
The t axis serves as a basis for placing data, figures, text, images, and others and represents linear events, such as time or distance. The t coordinates can have real values falling within the range of numbers that can be handled in JavaScript. Part of the whole range is displayed in HuTime. However, if the number of digits exceeds the prescribed significant digit (usually 12 digits), you cannot change or zoom in or out the displayed range as you want. In addition, you can use the APIs to limit the range of values the t coordinate takes. Values of the t coordinate are used as coordinate values to display records, figures, and others on a layer. Also, non-real values, such as time and dates, are converted into real values somehow and used as t coordinate values.
The t axis is parallel to the x axis in horizontal display mode, and to the y axis in vertical display mode. Using the APIs, you can set the direction of the t axis to the forward or backward direction of the XY axes. If a Web page contains more than one panel collection, changing or zooming in or out the displayed range of the t values on one of the panel collections causes the displayed ranges of the other panel collections to be changed or zoomed in or out at the same time.
(2) v Axis
The v axis is orthogonal to the t axis, and is parallel to the y axis in horizontal display mode and to the x axis in vertical display mode. As with t values, values of the v coordinates are used as coordinate values to determine positions where data, figures, text, images and others are displayed. Each layer has a different range and direction for its v axis. They are determined based on the arguments passed to the constructor when a layer object (or its derived objects) is created.
4. Specifying the Display Mode (Horizontal and Vertical) and the Relation between XY Coordinates and TV Coordinates
You specify the display mode (vertical or horizontal) and forward direction in the t axis by using the displayMode property on a panel collection basis. One example is that if displayMode = 0, then the direction of the t axis is parallel to the x axis and in the forward direction (the t axis from left to right in horizontal display mode). Another is that if displayMode = 3, then the direction of the t axis is parallel to the y axis and in the backward direction (the t axis from bottom to top in vertical display mode).
5. Hierarchical Structure of Containers and the Relationship between Containers and DOM Elements
As containers, a panel collection, panel, and layer correspond to objects of HuTime.PanelCollection, HuTime.TilePanel (or HuTime.OverlayPanel), and HuTime.Layer classes, respectively. Each of the classes is associated with a DOM element for display (div element) via the element property. Based on containment relationships between objects, objects for the classes are put into a hierarchy of objects, and at the same time, DOM elements associated with these objects are also added, in the form of hierarchy, to the DOM elements in a Web page prepared by a user.
The HuTime.PanelCollection class has the canvas element, which is used to obtain mouse events and control the shape of the cursor, and is displayed on all of other DOM elements. This canvas element can be referenced through the captureElement property of each class. Furthermore, the HuTime.Layer class has the canvas element for drawing associated with it. Figures, text images, and others that are displayed on a layer are drawn.
The application root (a HuTime object), located at the top of the object tree, accommodates one or more panel collections and provides control over how the entire application works, including managing the displayed range. Each object under the panel collection in the hierarchy can refer to the HuTime object to which the object itself belongs, through the hutimeRoot property.
