1. Overview
You specify a position on a layer using an object of the Position classes (classes derived from the HuTime.PositionBase class) to draw an on-layer object such as a figure, string, and image. HuTime provides the TV coordinate system, which is used to put data or others, and the XY coordinate system, which is used to indicate positions where objects are drawn on the screen. You can position your objects by using the combination of these coordinate systems. Positioning can be achieved by specifying an absolute position and specifying a relative position. You first specify the absolute position, and then, if necessary, specify relative positions in reference to the absolute position. HuTime also provides constants to indicate particular coordinates and classes for conversion into an integer for coordinate values on Canvas to be output.
The list of Position classes (classes derived from the HuTime.PositionBase class). The PositionBase is defined as an abstract class, and is not used in practice.
2. Absolute Position
This type of position works as a reference, and falls into two classes depending on the difference in the coordinate systems. When you show charts or records on a timeline, use HuTime.TVPosition for the TV coordinate system. If a position is specified on the TV coordinate system, the display position on the screen changes depending on changes in display statuses, such as the display mode of the screen (vertical and horizontal display modes), the displayed range of the t axis, the displayed range of the v axis, and the height of the layer. On the other hand, use HuTime.XYPosition for the XY coordinate system, with regard to objects that is fixed to a particular position on the screen, including the title of a layer. When you specify a position on the XY coordinate system, the object at that position is displayed in the same position on the screen if the display status varies.
Constructor
HuTime.TVPosition(t, v)
The absolute position on the TV coordinate system.
- t
- Type: Number
- The t value of the absolute position.
- v
- Type: Number
- The v value of the absolute position.
HuTime.XYPosition(x, y)
The absolute position on the XY coordinate system.
- x
- Type: Number
- The x value of the absolute position.
- y
- Type: Number
- The y value of the absolute position.
How the display position of the absolute positions on a layer depend on the display modes. The absolute position specified on the TV coordinate system (the blue circle) indicates the display position on the screen according to the display mode. On the other hand, the absolute position specified on the XY coordinate system (the red circle) indicates the same display positions on the screen independent of the display mode.
How the display position changes as the displayed range of the t axis varies (changed and zoomed in or out). The absolute positions specified on the TV coordinate system (the blue circle) change their position on the screen according to the displayed range of the t axis. On the other hand, the absolute position specified on the XY coordinate system (the red circle) does not change its position on the screen even when the displayed range of the t axis varies (it returns to the original position upon redrawing).
Sample code (click here for a running example):
<!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(100, 200);
ht.appendPanelCollection(pnls, document.getElementById("timeline"));
var pnl = new HuTime.TilePanel(100);
pnls.appendPanel(pnl);
var lyr = new HuTime.Layer(100, 0, 0, 100, 0);
lyr.vForX = HuTime.VForX.bottomForLeft;
pnl.appendLayer(lyr);
var posTV = new HuTime.TVPosition(140, 20);
var posXY = new HuTime.XYPosition(40, 30);
var objTV = new HuTime.Circle(new HuTime.FigureStyle(0, "blue", "blue"), posTV, 10);
lyr.appendObject(objTV);
var objXY = new HuTime.Circle(new HuTime.FigureStyle(0, "red", "red"), posXY, 10);
lyr.appendObject(objXY);
ht.redraw(100, 200);
</script>
<p>
<input type="radio" title="LtoR" name="displayMode" value="0" onClick="radioChange(event)" checked="checked" />Horizontal
<input type="radio" title="TtoB" name="displayMode" value="2" onClick="radioChange(event)" />Vertical
</p>
<script type="text/javascript">
radioChange = function(ev) {
pnls.displayMode = parseInt(ev.target.value);
ht.redraw();
};
</script>
</body>
</html>
3. Relative Position
Using the following classes, you specify the relative position with reference to the position specified by a Position object. The relative position is specified on the TV coordinate system or XY coordinate system, but does not have to match the coordinate system for the reference position. For example, to add a label or annotation to a record on a chart or timeline, set a display position of the record as a reference position, and specify the display position of the label or annotation as a relative position from there. In this case, the position of the record is specified on the TV coordinate system, but the relative position can be specified on either of the TV or XY coordinate system.
Constructor
HuTime.RelativeTVPosition(position, ofsT, ofsV)
The relative position on the TV coordinate system.
- position
- Type: HuTime.PositionBase
- The reference position for relative positions.
- ofsT
- Type: Number
- The displacement from the reference position in the t-value direction.
- ofsV
- Type: Number
- The displacement from the reference position in the v-value direction.
HuTime.RelativeXYPosition(position, ofsX, ofsY)
The relative position on the XY coordinate system.
- position
- Type: HuTime.PositionBase
- The reference position for relative positions.
- ofsX
- Type: Number
- The displacement from the reference position in the x-value direction.
- ofsY
- Type: Number
- The displacement from the reference position in the y-value direction.
How the display position of the relative positions depend on the display modes. The absolute position (the blue-filled circle) specified on the TV coordinate system being used as the reference, one relative position as the TV coordinates (the blue circle) and another as the XY coordinates (the red circle) are indicated. Also, the absolute position (the red-filled circle) specified on the XY coordinate system being used as the reference, one relative position as the TV coordinates (the blue circle) and another as the XY coordinates (the red circle) are indicated. The relative positions as the TV coordinates are displayed at different positions on the screen, in relation to the reference position in each display mode. On the other hand, the relative positions as the XY coordinates have the same positional relation with the reference positions, independent of the display mode.
How the drawing position changes as the displayed range of the t axis varies (changed and zoomed in or out). The relative positions specified on the TV coordinate system (the blue circles) change their positional relation with the reference positions (distance from the reference positions), as the displayed range of the t axis is changed, or zoomed in or out. On the other hand, the relative positions specified on the XY coordinate system (the red circles) do not change their positional relation with the reference positions even when the displayed range of the t axis varies (they return to the original positions upon redrawing).
Sample code (click here for a running example):
<!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(100, 200);
ht.appendPanelCollection(pnls, document.getElementById("timeline"));
var pnl = new HuTime.TilePanel(100);
pnls.appendPanel(pnl);
var lyr = new HuTime.Layer(100, 0, 0, 100, 0);
lyr.vForX = HuTime.VForX.bottomForLeft;
pnl.appendLayer(lyr);
var posTV = new HuTime.TVPosition(140, 20);
var posXY = new HuTime.XYPosition(40, 30);
var objTV = new HuTime.Circle(new HuTime.FigureStyle(0, "blue", "blue"), posTV, 10);
lyr.appendObject(objTV);
var objXY = new HuTime.Circle(new HuTime.FigureStyle(0, "red", "red"), posXY, 10);
lyr.appendObject(objXY);
var posTVrTV = new HuTime.RelativeTVPosition(posTV, -10, 0);
var objTVrTV = new HuTime.Circle(new HuTime.FigureStyle(2, "blue"), posTVrTV, 10);
lyr.appendObject(objTVrTV);
var posTVrXY = new HuTime.RelativeXYPosition(posTV, 10, 0);
var objTVrXY = new HuTime.Circle(new HuTime.FigureStyle(2, "red"), posTVrXY, 10);
lyr.appendObject(objTVrXY);
var posXYrTV = new HuTime.RelativeTVPosition(posXY, -10, 0);
var objXYrTV = new HuTime.Circle(new HuTime.FigureStyle(2, "blue"), posXYrTV, 10);
lyr.appendObject(objXYrTV);
var posXYrXY = new HuTime.RelativeXYPosition(posXY, 10, 0);
var objXYrXY = new HuTime.Circle(new HuTime.FigureStyle(2, "red"), posXYrXY, 10);
lyr.appendObject(objXYrXY);
ht.redraw(100, 200);
</script>
<p>
<input type="radio" title="LtoR" name="displayMode" value="0" onClick="radioChange(event)" checked="checked" />Horizontal
<input type="radio" title="TtoB" name="displayMode" value="2" onClick="radioChange(event)" />Vertical
</p>
<script type="text/javascript">
radioChange = function(ev) {
pnls.displayMode = parseInt(ev.target.value);
ht.redraw();
};
</script>
</body>
</html>
4. Constants for Indicating Coordinates
Constants to indicate particular coordinate positions, such as the top end or left end of a layer, are defined as shown below. When specifying coordinates on each of the coordinate systems, you can use these constants, instead of numbers. The coordinate specified by the constant remains in the position indicated by it, even when the displayed range of the t axis is changed (it returns to the original position upon redrawing).
| Coordinate System | Coordinate Axis | Constant | Parameter to the Constructor |
|---|---|---|---|
| TV Coordinate System | t Axis | HuTime.PositionConstant.tMin | The minimum value of the t-axis range currently displayed |
| HuTime.PositionConstant.tMax | The maximum value of the t-axis range currently displayed | ||
| v Axis | HuTime.PositionConstant.vMin | The minimum value of the v-axis range currently displayed | |
| HuTime.PositionConstant.vMax | The maximum value of the v-axis range currently displayed | ||
| XY Coordinate System | x Axis | HuTime.PositionConstant.xLeft | The left end of a layer |
| HuTime.PositionConstant.xRight | The right end of a layer | ||
| y Axis | HuTime.PositionConstant.yTop | The top end of a layer | |
| HuTime.PositionConstant.yBottom | The bottom end of a layer |
How the display positions of coordinates specified by the constants depend on the display mode. The positions specified on the TV coordinate system (the blue circles) are displayed at the positions on the screen according to the display mode. On the other hand, the positions specified on the XY coordinate system (the red circles) are displayed at the same positions on the screen, independent of the display mode.
Sample code (Applicable Lines Only):
var pos1 = new new HuTime.TVPosition(HuTime.PositionConstant.tMax, 20);
var pos2 = new HuTime.XYPosition(40, HuTime.PositionConstant.yTop);
5. Converting Coordinate Values into Integers
If a decimal is used for positioning (XY coordinates) on HTML5 Canvas, anti-aliasing may blur drawn objects. To avoid this situation on your HuTime, use the Position class that has the ability to convert coordinate values on canvas that are output from a Position object into an integer, to wrap the original Position class. The three types of classes below are available depending on the way they are converted into integers. You can apply these classes to whichever Position classes for the TV coordinate system or XY coordinate system.
Constructor
HuTime.PositionFloor(position)
The coordinate position on the screen, rounded down to convert it into an integer.
- position
- Type: HuTime.PositionBase
- The position to be converted into the integer.
HuTime.PositionFloor(position)
The coordinate position on the screen, rounded up to convert it into an integer.
- position
- Type: HuTime.PositionCeil
- The position to be converted into the integer.
HuTime.PositionRound(position)
The coordinate position on the screen, rounded to the nearest integer to convert it into an integer.
- position
- Type: HuTime.PositionBase
- The position to be converted into the integer.
Sample code (Applicable Lines Only):
var pos1 = new HuTime.PositionFloor(new HuTime.TVPosition(140, 20));
var pos2 = new HuTime.PositionCeil(new HuTime.RelativeTVPosition(new HuTime.XYPosition(40, HuTime.PositionConstant.yTop), -10, 0));
6. Use Cases
Here are some use cases for positioning on the layer.
| Use Case | How to specify Position |
|---|---|
| Show an annotation at a particular point on the scatter chart. | Based on the position of the point specified as an absolute position of the TV coordinates (HuTime.TVPosition), specify the display position of the annotation by using the relative position of the XY coordinates (HuTime.RelativeXYPosition). |
| Show the error bar at the top of each of bars. | Based on the top position of the bar specified as an absolute position of the TV coordinates (HuTime.TVPosition), specify the start and end points of the error bars by using the relative position of the TV coordinates (HuTime.RelativeTVPosition). |
| Show a title at the top-left position of the layer. | Using the constants indicating the left end and top end (HuTime.PositionConstant.xLeft and HuTime.PositionConstant.yTop), specify the top left position of the layer as an absolute position of the XY coordinates (HuTime.XYPosition). To set a margin, specify it as a relative position of the XY coordinates (HuTime.RelativeXYPosition). |
