|
|
Table of Contents
The best way to explore HotWeb capabilities is to run the demonstration application in an HTML browser.
| 1. | Install the HotWeb class by unzipping the software distribution file, HotWeb101.zip |
| 2. | Begin the demo application by starting a Java enabled browser window and opening the file HotWebExample.html or HotWebFramed.html |
| 3. | Use the mouse to navigate in the
Hyperbolic Tree window.
For more information about using the Hyperbolic Tree,
see
|
| 4. | Install the HotWeb on your Website. Copy the files HotWeb.class, S.class, and the directory hypertk and its contents. Create and install on your website your dataset TRE file and the HTML which references the HotWeb applet. |
The Hyperbolic Tree Dataset (TRE file format)
Data for HotWeb is provided in datasets encoded in the TRE file format. Each line in the TRE file represents a node in the Hyperbolic Tree diagram. The level of indentation for each line indicates the parent/child relationship between consecutive lines in the file. A single space increment from the previous line indicates the node is a child of the previous node. Lines at the same indentation are siblings (i.e., all children of the same parent).
Fields in the TRE file are positional and separated by semicolons. If a field is omitted, the corresponding semicolon must be included to indicate the absence of the parameter.
As an example, a node with the long name "http://my.com/node.html", with the short name "Node", with gray gray node color and magenta link color, with a circle display size of 35, and with an image GIF named node.gif would be coded in this way:
|
|
|
|
|||
|
|
long name | This value is displayed in the node feedback display. It is also displayed if the short name is empty or missing. Thus a TRE file may only have a single field and still be useable. The ‘long name’ may also be a URL. When you double click on a node, HotWeb assumes that the long name is a URL, and attempts to move the browser to that location if the url is valid. | |||
|
|
short name | This is displayed, if present in the hyperbolic tree node display rectangles. | |||
|
|
node color | Available Colors: | |||
|
0
|
black |
5
|
blue | ||
|
1
|
white |
6
|
cyan | ||
|
2
|
darkgray |
7
|
magenta | ||
|
3
|
red |
8
|
yellow | ||
|
4
|
green | ||||
|
|
link color | The colors available for links are the same as those for nodes. The link color of a node is applied to the link that connects the node with its parent. | |||
|
|
thumbnail image file | The sample file orgchart.tre has several image thumbnail references. | |||
|
|
circle display size | If the node shape
is not a circle, this field is ignored.
Note: If the size is not specified, a circle node will not be displayed. |
|||
Navigation
The mouse allows a user to change the focus of the Hyperbolic Tree and move various nodes to the center of the window.
|
|
|
|
| Left | Click | Causes the point under the cursor to move to the center of the window. This movement is animated to provide a better perspective of the overall structure of the data tree. |
| Left | Drag | Causes the point under the cursor to follow the mouse path. |
| Shift + Drag | Drag | Causes the center focus to ‘stretch’. Graphical feedback is shown to indicate the operation of the stretch control. The focus of the HotWeb display is at its center. The further a right mouse drag moves from the center, the greater the stretch; the closer the right mouse drag moves to the center, the smaller the stretch (or the greater the compression of the tree). |
| Left | Double Click | Double click on a node with a valid URL causes the browser to open that URL. This function only works if the URL is valid. |
Keyboard Shortcuts
Keyboard shortcuts allow a user to exercise the move and transition functions provided by HotWeb. Shortcuts also access the following functions: search, alwaysArcs, alwaysLines, background color, font size, and text display options.
|
|
|
|
|
Toggles the long text setting. If this setting is true (it begins as false), then up to 25 characters of node text will be displayed by the node. Otherwise text display is limited by the hyperbolic space allocated to the node. |
|
|
Toggles the text end setting. If this setting is true, the node text displayed will start from the end of the text, clipping the beginning. Otherwise the end of the text will be clipped if there is not sufficient space. |
|
|
Decreases the font size of node text by one point. |
|
|
Increases the font size of node text by one point. |
The HTML for this applet may include any of these following parameters. All of the parameters shown below are included in the HotWebExample.html file in your software package:
HotWebExample Parameters
<PARAM NAME=dataset VALUE="data/xeroxsite.tre">
<PARAM NAME=image_dir VALUE="images">
<PARAM NAME=root_image VALUE="images/x.gif">
<PARAM NAME=font_size VALUE="13">
<PARAM NAME=background_color VALUE="white">
<PARAM NAME=node_color VALUE="black">
<PARAM NAME=text_color VALUE="white">
<PARAM NAME=node_shape VALUE="RECTANGLE">
<PARAM NAME=text_rect VALUE="TRUE">
<PARAM NAME=display_images VALUE="TRUE">
<PARAM NAME=window_target VALUE="hotweb window">
|
|
|
|
| WIDTH
HEIGHT |
Required | These parameters determine the
width and height of the applet display.
Note: The feedback panel on the bottom of the applet is 31 units high, so a square browser view must be 31 units higher than it is wide. |
| dataset | Required. | Specifies the name of the TRE file that will be displayed by HotWeb. The name must include the full directory path. If the dataset is improperly formatted, missing, or damaged, the applet will not load, and a Java nullException will be raised. The dataset path must be specified relative to the code base (i.e., relative to the location where you have installed the HotWeb.class.) |
| image_dir | Optional | Specifies the path for the directory that contains image files to be displayed with nodes. Only directory paths relative to location of the HotWeb software are valid (i.e., paths pointing to remote locations cannot be used). |
| root_image | Optional | This parameter allows a root image to be displayed at the upper right corner above the background color beneath the hyperbolic tree, starting at coordinates 15, 15. |
| font_size | Optional | Sets the default font size for the display text. The default is 12 points. Acceptable values are from 4 through 50. |
| background_color | Optional | Sets the color of the background image. The options are: white, darkgray, red, green, blue, cyan, magenta, yellow. The default background_color is white. |
| node_color | Optional | Sets the default color of the nodes if a color is not specified in the TRE file (except for the root node, which is always red). Valid colors names are the same as background_color. The default node_color is gray. |
| text_color | Optional | Sets the color of the node text display. Valid color names are the same as background_color. If a specific text_color is not specified,the default depends on the node_color setting (for contrast purposes). |
| node_shape | Optional | Specifies the shape of the nodes.
The shape options are rectangle, ellipse, and circle. If circle is specified,
the text rectangle is still drawn inside the circle.
Note: In circle mode, the size of each node must be specified in the TRE data file. If this field is not specified, the node will not be displayed. |
| text_rect | Optional | This boolean parameter, if set to false, prevents the display of the text rectangle when node_shape is either rectangle or circle. The default is true. |
| display_images | Optional | This boolean parameter, when set to TRUE, causes the image files to be drawn with the nodes closer to the focus node. Image files are specified in the TRE data file. |
| window_target | Optional | This string parameter indicates the name of the browser window or frame to open URL's. |
Please send all comments and queries to support@inxight.com.
|
|