1. Overview
Data, figures, text, images, and others are displayed on layers. The layers can also accommodate objects, including figures as part of the object tree. HuTime provides a wide variety of layers depending on their purposes, for example, for displaying time lines, charts or scales. A combination of more than one layer is available on a panel.
2. Creating an Object
Constructor
HuTime.Layer([vBreadth [, vMarginTop [, vMarginBottom [, vTop, vBottom]]]])
- vBreadth
- Type: Number
- Default value: null
- The length in the v-axis direction (in pixels).
- vMarginTop
- Type: Number
- Default value: null
- The top margin in the v-axis direction (the left margin in vertical display mode) (in pixels).
- vMarginBottom
- Type: Number
- Default value: null
- The bottom margin in the v-axis direction (the right margin in vertical display mode) (in pixels).
- vTop
- Type: Number
- Default value: 0
- The v value at the top edge (the leftmost end in vertical display mode) in the v-axis direction.
- vBottom
- Type: Number
- Default value: 100
- The v value at the bottom edge (the rightmost end in vertical display mode) in the v-axis direction.
3. Adding a Layer
You can add a layer using the appendLayer method of a panel object.
pnl.appendLayer(layer)
- pnl
- Type: HuTime.PanelBase
- The panel object to which the layer is added.
- layer
- Type: HuTime.Layer
- The layer that is added to the panel.
Sample code (click here for a running example). In this example, two layers (variables lyr1 and lyr2) are added to the panel object (variable pnl). By means of a property described later in Formatting, a gradient effect is applied and a photograph is attached to the background of the layer.
<!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 pnl = new HuTime.TilePanel(200);
pnls.appendPanel(pnl);
var lyr1 = new HuTime.Layer(150);
var lyr2 = new HuTime.Layer(150, null, 0);
pnl.appendLayer(lyr1);
pnl.appendLayer(lyr2);
pnls.style.backgroundColor = "pink";
pnl.style.backgroundColor = "lightyellow";
lyr1.style.backgroundImage = "url('img/bkSample.jpg')";
lyr2.style.background = "linear-gradient(to bottom, Azure 0%, SkyBlue 100%)";
ht.redraw();
</script>
</body>
</html>
4. Specifying the Display Position and the Size
In layers, the display width in the t-axis direction is adjusted to suit the width of the panel collection. You specify the display position and display width in the v-axis direction by using the vBreadth, vMarginTop, and vMarginBottom properties. Details about these properties are the same as the arguments of the constructor. In the example shown in "3. Adding a Layer," lyr1 (which has a photograph background) with only the vBreadth property specified is displayed at the top edge of the panel. On the other hand, in lyr2 (with a blue gradient effect on the background), the vBreadth property is specified and the vMarginBottom is set to 0. It is thus displayed at the bottom edge. As a result, two layers are overlapped partially, and the upper half of the layer with the photograph background is visible behind the layer with the gradient effect.
Display Position in Horizontal Display Mode
In horizontal display mode, the display position and size are specified in the v-axis direction, which represents height. Basically, you specify values for two properties out of three, and set the other to null (or undefined). The property with the null value is set automatically depending on the height of the panel (currentVBreadth).
If you specify values for vMarginBottom and vBreadth and set vMarginTop to null, the top margin expands and contracts according to the height of the panel (currentVBreadth). If you set vMarginBottom to 0, the layer object is displayed at the bottom edge of the panel with no margin.
If you specify values for vMarginTop and vBreadth and set vMarginBottom to null, the bottom margin expands and contracts according to the height of the panel (currentVBreadth). If you set vMarginTop to 0, the layer object is displayed at the top edge of the panel with no margin.
If you specify values for vMarginTop and vMarginBottom and set vBreadth to null, the height of the layer expands and contracts according to the height of the panel (currentVBreadth) . If you set both vMarginTop and vMarginBottom to 0, the layer is always fully displayed over the panel.
Basically, you specify values for two properties out of three and set the other to null (or undefined). If, however, you use a different combination of settings, the property values are as follows:
| Properties Specified | vMarginTop | vBreadth | vMarginBottom |
|---|---|---|---|
| None of the three | 0 | null | 0 |
| vMarginTop only | Specified value | null | 0 |
| vBredth only | 0 | Specified value | null |
| vMarginBottom only | 0 | null | Specified value |
| vMarginTop and vBredth | Specified value | Specified value | null |
| vBredth and vMarginBottom | null | Specified value | Specified value |
| vMarginTop and vMarginBottom | Specified value | null | Specified value |
| All of the three | Specified value | null | Specified value |
Display Position in Vertical Display Mode
It is the same as the case in the horizontal display mode, except that you read the vMarginTop property as the right margin and the vMarginBottom property as the left margin. However, setting the vMarginForX property can reverse the readings above.
Stack Order of Layers
The stack order of layers in a panel is determined by the zIndex property of each layer. A layer with a greater value will appear at an upper position than others with smaller values.
- zIndex
- Type: Number
- Default value: 0
- Stack order setting of layers in the panel. A layer with a greater value appears at an upper position (more to the front) than layers with smaller values.
5. Formatting
You can use the style property to format the layer. The value specified for the style property is reflected to the style attribute of the DOM element (div element) for display that the layer has. In the example shown in "3. Adding a Layer," a photograph is specified as the background of lyr1 and a blue gradient effect is specified as that of lyr2. Note that no background format is specified for a layer by default. You can therefore see through the background of the panel.
6. Other Key Properties and Methods
A layer has properties for specifying the behavior of layers in the panel.
Properties
- id
- Type: String
- Default value: null
- The ID for uniquely identifying the object.
- name
- Type: String
- Default value: null
- The name of the object.
- visible
- Type: Boolean
- Default value: true
- Specify whether the object 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: Except for children; 2: Children only; 3: All
- fixedLayer
- Type: Boolean
- Default value: false
- Specify whether the layer is handled as a fixed layer. If true, it will be a fixed layer and cannot be moved or zoomed in or out by dragging the mouse or using the wheel on the mouse.
- vFotX
- Type: Number
- Default value: 0
- How the property values are applied when the v axis represents the horizontal axis (0: vTop for the left, 1: vBottom for the left). No setting is required except when you switch the direction of the v axis.
Methods
redraw()
Redraws the layers. If the layer contains on-layer objects, such as figures, these objects are redrawn recursively.
- Return value
- None
clear()
Clears what is displayed on the layer.
- Return value
- None
processBeforeRedraw(layer)
Pre-processing of redrawing the layer. By default, an empty function is defined. By redefining it, you can add some action, such as drawing a figure, before the contents of the layer are redrawn.
- layer
- Type: HuTime.Layer
- The layer object to be redrawn.
processAfterRedraw(layer)
Post-processing of redrawing the layer. By default, an empty function is defined. By redefining it, you can add some action, such as drawing a figure, after the contents of the layer are redrawn.
- layer
- Type: HuTime.Layer
- The layer object to be redrawn.
