Panel - HuTime API Manual

1. Overview

A panel is a basic unit for accommodating one or more layers and representing a variety of information. For example, you can combine a layer for displaying data, a layer for showing scales, and a layer for indicating the title together on a single panel, which allows you to create a collective representation of data and other necessary information. Typically, you use tile panels (HuTime.TilePanel), which are stacked up and displayed in the panel collection.

2. Creating an Object

Constructor

HuTime.TilePanel([vBreadth])

vBreadth: Type: Number; Default value: 150; The length in the v-axis direction (in pixels).

3. Adding a Panel

You can add a panel using the appendPanel method of a panel collection object.

pnls.appendPanelCollection(panel)

pnls: Type: HuTime; The panel collection object to which the panel is added.
panel: Type: HuTime.PanelBase; The panel that is added to the panel collection object.

Sample code (click here for a running example). Two panels (variables pnl1 and pnl2) are added to the panel collection object (variable pnls). By means of a property described later in Formatting, the background color of the first panel is set to light blue, and that of the second panel to yellow.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script type="text/javascript" src="http://web.hutime.org/js/HuTime.min.js"></script>
  <title>Sample Code</title>
</head>
<body>
<div id="timeline"></div>
<script type="text/javascript">
    var ht = new HuTime();
    var pnls = new HuTime.PanelCollection(250);
    ht.appendPanelCollection(pnls, document.getElementById("timeline"));
    var pnl1 = new HuTime.TilePanel(100);
    var pnl2 = new HuTime.TilePanel(100);
    pnls.appendPanel(pnl1);
    pnls.appendPanel(pnl2);
    pnls.style.backgroundColor = "pink";
    pnl1.style.backgroundColor = "aqua";
    pnl1.zIndex = 10;
    pnl2.style.backgroundColor = "lightyellow";
    pnl1.zIndex = 20;
    ht.redraw();
</script>
</body>
</html>

4. Specifying the Display Position and the Size

In panels, the display width in the t-axis direction is adjusted to suit the width of the panel collection. You specify the display width in the v-axis direction by using the vBreadth property. The display positions of tile panels are automatically determined according to the stack order in the panel collection. The stack order is determined by the zIndex property of each tile panel. A panel with a greater value will appear at an upper position than others with smaller values (at the leftmost position in vertical display mode). In the example shown in "3. Adding a Panel Collection," the zIndex value of pnl1 and pnl2 are set to 10 and 20, respectively. Thus, pnl2 in yellow is displayed above the other.

zIndex: Type: Number; Default value: 0; Specify the positions where panels are located in the panel collection (upper or lower) (left or right in vertical display mode). A panel with a greater value appears at an upper position (more to the left in vertical display mode) than panels with smaller values.

5. Formatting

You can use the style property to format the panel. The value specified for the style property is reflected to the style attribute of the DOM element (div element) for display that the panel has. In the example shown in "3. Adding a Panel," the background colors (style.backgroundColor) are set to light blue and yellow.

6. Other Key Properties and Methods

A panel has properties for specifying the behavior of panels in the panel collection.

Properties

id: Type: String; Default value: null; The ID for uniquely identifying the panel.
name: Type: String; Default value: null; The name of the panel.
visible: Type: Boolean; Default value: true; Specify whether the panel is visible or invisible. If true, it is visible.
mouseEventCapture: Type: Number; Default value: 3; The range to capture mouse events: 0: Not captured; 1: Panel only; 2: Layers in panel only; 3: Both panel and layers in the panel
tRatio: Type: Number; Default value: 1.0; The magnification ratio of the display width of the t axis. Specify how large the displayed range of the t axis on the HuTime root will appear. You need to specify it when putting a panel that is zoomed in or out for viewing.
repositionable: Type: Boolean; Default value: true; Specify whether or not the panel can be relocated. If true, it can be moved to a different position.
resizable: Type: Boolean; Default value: true; Specify whether or not the width in the v-axis direction can be changed in the panel. If true, the width of the panel can be changed.

Methods

redraw()

Redraws the panel. Layers in the panel are also redrawn recursively.

Return value: None

clear()

Clears what is displayed on the panel.

Return value: None

Back to the Contents of this Manual