Controlling Extra Effects

Developing with the SDK > Using CSS Syntax in the Style Sheet > Customizing General Links in the Style Sheet > Controlling Extra Effects

Controlling Extra Effects

INDEX

PREVIOUS NEXT

The extra effects available for a link are:

Waves

The wave effect is very effective for representing a wireless connection. The wave specification consists of two numbers: the wave amplitude and its period, in pixels. The property type is a String where two integers separated by "/" represent, respectively, amplitude and period. The effect renders best with straight lines but remains compatible with any shape.

The wave effect can also be mixed with dashes, border, arrow, and so on.

Figure 3.14 The Wave Effect for a Link with a Border

Code Sample 3.9 Basic Link Properties and the Wave Property

Animation

You can animate a link with dashes (see the lineStyle property) or alternate colors (see the alternateColor property). The animation consists of incrementing the lineStylePhase value at regular intervals, so that the pattern is shifted at each animation frame. The current implementation updates the pattern 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 dash pattern length. For example, 0.1 means that ten frames pass before you see the first frame again. Note that 0.9 represents the same increment but in the backward direction.

Zoom

IlvGeneralLink inherits from IlvLinkImage, and keeps its zoom behavior. In particular, the maximumLineWidth property sets the maximum size of the line. Also, the link is zoomable only if one edge node is zoomable. Note that the link border thickness does not zoom. The border line style and the link line style follow the zoom level of the link.

Neon Effect and Road Effect

MODE_NEON is a minor mode which is a variation of MODE_GRADIENT. It displays the link with transparent colors, giving a glowing effect (this works best with larger links and with darker backgrounds). The border is automatically disabled in this mode. An example of using Neon mode is to mark link selection, as shown in the top link in Figure 3.14. (The second link shows the same link when it is not selected.)

Previous examples already demonstrated some of the many possibilities that the link appearance offers. By combining some of the properties, you can achieve some fancy effects, such as the "road" link in Figure 3.14, where the large border is the same gray color as the link foreground, and the white alternateColor looks like the middle line of a road.

Figure 3.14 The Neon Effect

link {
        lineWidth  : 10 ; 
        lineJoin   : JOIN_ROUND ; 
        endCap     : CAP_ROUND ; 
        foreground : 255,181,197 ; 
}

link.top { 
        mode      : MODE_NEON ; 
        lineWidth : 20 ; 
}

link.center {
        borderWidth : 1 ; 
}



link.bottom { 
        mode           : MODE_UNICOLOR;
        endCap         : CAP_BUTT ; 
        lineWidth      : 15 ; 
        foreground     : darkGray ; 
        lineStyle      : 20,10;
        lineStylePhase : 5 ; 
        alternateColor : white ; 
        borderWidth    : 12 ; 
        borderUpColor  : darkGray ; 
        curved         : 0.65 ; 
}

Code Sample 3.11 Selected (Neon) and Not Selected Links, and a Road Link

PREVIOUS NEXT