Customizing User-Defined Network Links
PREVIOUS
NEXT
| Styling > Customizing User-Defined Business Objects > Customizing User-Defined Network Links |
Customizing User-Defined Network Links |
INDEX
PREVIOUS
NEXT
|
User-defined business objects can also be represented as links in the network and equipment components. All user-defined business classes that are links are rendered as a general link graphic object when they implement IlpObject directly, that is, when they do not extend a predefined business link class. The graphic representation is illustrated in the following figure:
Refer to <installdir>/samples/network/customClasses for an example of how to customize user-defined business objects in the network component.
You can customize a network link using the following properties:
object."test.MyLink" {
oriented: true;
lineWidth: 5;
lineStyle: "4,4,2";
endCap: CAP_ROUND;
wave: "1/2";
}
The following sections provide more information on the use of these properties:
| Note |
| Color values in the following sections are given as literals or hexadecimal codes. The resulting colors are shown in the figures that precede the text. |
The general link has three principal looks associated with the property mode. For the first two looks, the foreground property sets the main color.
The properties of the first look shown in Figure 4.5 are composed as follows:
mode = MODE_UNICOLOR lineWidth = 10 foreground = pink
The properties of the second look shown in Figure 4.5 are composed as follows:
mode = MODE_GRADIENT lineWidth = 10 foreground = pink
The properties of the third look shown in Figure 4.5 are composed as follows:
mode = MODE_TEXTURE lineWidth = 10 fillTexture = wood.png
The fillTexture property specifies the URL of an image file to use as a texture in TEXTURE mode. Note that the URL does not use the URL Access Service.
A border is painted when the borderWidth property is greater than 0, the default value. The default border color is black. Two other properties control the line style (such as dashes).
The properties of the top link in Figure 4.6 are composed as follows:
lineWidth = 10 foreground = #90EE90 endCap = CAP_ROUND borderWidth = 4 borderColor = red
The properties of the center link in Figure 4.6 are composed as follows:
lineWidth = 10 foreground = #90EE90 endCap = CAP_ROUND borderWidth = 4 borderColor = gray borderLineStyle = "10,5"
borderLineStyle is expressed as a float array.
The properties of the bottom link in Figure 4.6 are composed as follows:
lineWidth = 10 foreground = #90EE90 endCap = CAP_ROUND borderWidth = 2
The properties of the top link in Figure 4.7 are composed as follows:
lineWidth = 10 mode = MODE_UNICOLOR endCap = CAP_ROUND lineJoin = JOIN_ROUND borderWidth = 4 borderColor = white borderColor2 = black foreground = #FFAFAF
The properties of the center link in Figure 4.7 are composed as follows:
lineWidth = 10 mode = MODE_UNICOLOR endCap = CAP_ROUND lineJoin = JOIN_ROUND borderWidth = 4 borderColor = white borderColor2 = black foreground = #FFC800 borderLineStyle = "10,10"
borderLineStyle is expressed as a float array.
The properties of the bottom link in Figure 4.7 are composed as follows:
lineWidth = 10 mode = MODE_UNICOLOR endCap = IlvStroke.CAP_ROUND lineJoin = IlvStroke.JOIN_ROUND borderWidth = 4 borderColor = yellow borderColor2 = blue foreground = #1EC830
The default stroke parameters are JOIN_MITER and CAP_SQUARE. You can change the end cap and join style, as shown in Figure 4.8, with the following values.
The properties of the top link in Figure 4.8 are composed as follows:
lineWidth = 10 endCap = IlvStroke.CAP_ROUND lineJoin = IlvStroke.JOIN_ROUND borderWidth = 2 foreground = #9A9AFF
The properties of the center link in Figure 4.8 are composed as follows:
lineWidth = 10 endCap = CAP_BUTT lineJoin = JOIN_MITER borderWidth = 2 foreground = #9A9AFF
The properties of the bottom link in Figure 4.8 are composed as follows:
lineWidth = 10 endCap = CAP_SQUARE lineJoin = JOIN_BEVEL borderWidth = 2 foreground = #9A9AFF
The curved property uses the link points to feed a Bezier function which renders a curved link. Intermediate points show the path for the Bezier computation. With two points, a standard deviation applies, that is, at 1/4 before the end of the link. The curved value is a float between 0f and 1f. A value of 0 means no curve at all (the default), and a value of 1 means the sharpest curve. Use a value of 0.65f for an attractive curve.
The properties of the top link in Figure 4.9 are composed as follows:
lineWidth = 10 endCap = CAP_ROUND lineJoin = JOIN_ROUND borderWidth = 2 foreground = #FFDAB9 curved = 0.65 mode = MODE_UNICOLOR
The properties of the center link in Figure 4.9 are composed as follows:
lineWidth = 10 endCap = CAP_SQUARE lineJoin = JOIN_ROUND borderWidth = 2 foreground = #FFDAB9 curved = 0.65 lineStyle = [10,20]
lineStyle is expressed as a float array.
The properties of the bottom link in Figure 4.9 are composed as follows:
lineWidth = 10 endCap = CAP_SQUARE lineJoin = JOIN_BEVEL borderWidth = 6 foreground = #FFDAB9 curved = 0.65 borderLineStyle = [1,10]
borderLineStyle is expressed as a float array.
Dashes provide interesting effects together with endCap values. Dashes are controlled by the lineStyle property. They are expressed as a float array. Alternate entries in the array represent lengths of the opaque and transparent segments of the dashes.
Note that the dash specification also applies to the border unless the borderLineStyle property overrides it.
The properties of the top link in Figure 4.10 are composed as follows:
lineWidth = 10 endCap = CAP_ROUND lineJoin = JOIN_ROUND borderWidth = 2 foreground = #55BEF3 lineStyle = [1,15]
The properties of the center link in Figure 4.10 are composed as follows:
lineWidth = 10 endCap = CAP_ROUND lineJoin = JOIN_ROUND borderWidth = 2 foreground = #FFC800 lineStyle = [10,8,20,8]
The properties of the bottom link in Figure 4.10 are composed as follows:
lineWidth = 10 endCap = CAP_BUTT lineJoin = JOIN_ROUND borderWidth = 2 foreground = red mode = MODE_UNICOLOR lineStyle = [4,4] curved = 0.65
The alternateColor property toggles the link in alternate mode with the specified color. The segment size equals the thickness of the link. Otherwise, the segment size can be specified with the lineStyle property.
The lineStylePhase property sets the initial offset. If no lineStyle is specified, the phase is proportional to twice the line width. In Figure 4.11, the bottom link starts the alternate color one segment later than the top one.
The appropriate values for the links are as follows.
The properties of the top link in Figure 4.11 are composed as follows:
lineWidth = 10 endCap = CAP_BUTT lineJoin = JOIN_ROUND borderWidth = 2 foreground = yellow alternateColor = darkGray curved = 0.65
The properties of the center link in Figure 4.11 are composed as follows:
lineWidth = 10 endCap = CAP_BUTT lineJoin = JOIN_ROUND borderWidth = 2 foreground = yellow alternateColor = darkGray curved = 0.65 lineStyle = [4,3]
lineStyle is expressed as a float array.
The properties of the bottom link in Figure 4.11 are composed as follows:
lineWidth = 10 endCap = CAP_BUTT lineJoin = JOIN_ROUND borderWidth = 2 foreground = yellow alternateColor = darkGray curved = 0.65 lineStylePhase = 1 mode = MODE_UNICOLOR
There are four modes for representing an arrow controlled by the arrowMode property.
ARROW_FILL mode value (the default) draws a filled triangular arrow.
ARROW_OPEN mode value draws a two-arm arrow.
ARROW_GRADIENT mode value shows an oriented link by smoothly varying the luminosity along the link. The link appears darker near the source and brighter near the target.
ARROW_DECORATION mode value delegates the task of displaying the arrow to one of the link decorations.
In the first two modes, the arrowPosition property controls the position of the arrow along the link. Its value is a float between 0 and 1. A value of 0 means the start of the link. A value of 1 means the end of the link (the default). The arrow direction is aligned with the link segment below it.
The property arrowRatio controls the size of the arrow, which is proportional to the width of the link. A float value of 0.5 means the arrow is the same size as the link. The default value 1 means the arrow is twice as wide as the link. This property applies to all four arrow modes.
The default color of an arrow is black. The color can be set by the property arrowColor.
The properties of the top link in Figure 4.12 are composed as follows:
lineWidth = 10 endCap = CAP_BUTT lineJoin = JOIN_ROUND borderWidth = 2 foreground = #FF82AB arrowMode = ARROW_GRADIENT oriented = true
The properties of the center link in Figure 4.12 are composed as follows:
lineWidth = 10 endCap = CAP_BUTT lineJoin = JOIN_ROUND borderWidth = 2 foreground = #FF82AB arrowMode = ARROW_GRADIENT oriented = true mode = MODE_UNICOLOR arrowMode = ARROW_FILL
The properties of the bottom link in Figure 4.12 are composed as follows:
lineWidth = 10 endCap = CAP_BUTT lineJoin = JOIN_ROUND borderWidth = 2 foreground = #FF82AB arrowMode = ARROW_OPEN oriented = true arrowColor = #A3056E arrowPosition = 0.2
A wave effect is very effective for representing a wireless connection. The wave specification consists of two numbers in pixels representing the wave amplitude and its period. The property type is String, where two integers separated by a forward slash or solidus (/) represent the amplitude and period respectively. The effect is rendered best with straight lines, but remains compatible with any shape.
The wave effect can also be combined with dashes, border, arrow, and so on.
The properties of the link in Figure 4.13 are composed as follows:
lineWidth = 10 endCap = CAP_ROUND lineJoin = JOIN_ROUND borderWidth = 2 foreground = #EEAEEE wave = 20/30
A link with dashes (see the lineStyle property) or alternate colors (see the alternateColor property) can be animated. The animation consists of incrementing the lineStylePhase value at regular intervals, so that the dash pattern is shifted at each animation frame. The current implementation updates every 500 ms.
The animateSpeed property controls animation of the link and how much the phase is incremented. If the value is 0, the animation is stopped. Otherwise, the value must be between 0f and 1f and represents a fraction of the dash pattern length. For example, 0.1 means that ten frames elapse before seeing the first frame again. Note that 0.9 represents the same increment but in the reverse direction.
The maxLineWidth property sets the maximum width of the line. The link is zoomable only if one edge node is zoomable. Note that the link border cannot be zoomed.
The minLineWidth property sets the minimum width of the line.
MODE_NEON is a minor mode that is a variation of MODE_GRADIENT. It displays the link with transparent colors, giving a glowing effect. (This effect works best with larger links and with darker backgrounds.) The border is automatically disabled in this mode. Neon mode could be used to mark link selection, for example.
The preceding figures show some of the diversity offered in the appearance of links. By combining some of the properties, you can obtain some special effects, such as the road link in Figure 4.14, where the large border is the same gray color as the link foreground and the white value of the alternateColor property looks like the center line of a road.
The style of the top link in Figure 4.14 is composed as follows:
lineWidth = 20 endCap = CAP_ROUND lineJoin = JOIN_ROUND foreground = #FFB5C5 mode = MODE_NEON
The properties of the center link in Figure 4.14 are composed as follows:
lineWidth = 10 endCap = CAP_ROUND lineJoin = JOIN_ROUND foreground = #FFB5C5
The properties of the bottom link in Figure 4.14 are composed as follows:
lineWidth = 15 endCap = CAP_BUTT lineJoin = JOIN_ROUND borderWidth = 12 foreground = #404040 borderColor = #404040 alternateColor = white curved = 0.65 mode = MODE_UNICOLOR LineStyle = [20,10]
lineStyle is expressed as a float array.
The label decoration is customized using the same properties as for the predefined business objects.
object."test.MyNetworkElement" {
labelBackground: white;
labelForeground: blue;
labelPosition: Right;
label: @name;
labelVisible: true;
}
Refer to Customizing the Label of Business Objects for a complete list of the available properties.
| Copyright © 1987-2007 ILOG S.A. All rights reserved. Documentation homepage. All rights reserved. Legal terms. | PREVIOUS NEXT |