XML/SWF Charts| CSS/XML Timeline Eons(New)| Timeline Eons| SlickBoard

 < previousnext > 

 

filter

 

<filter>

   <!-- shadow --/>
   <shadow id='string'
           distance='int'
           angle='int'
           color='string' 
           alpha='int'
           blurX='int' 
           blurY='int' 
           strength='int' 
           quality='int'  
           inner='boolean' 
           knockout='boolean' 
           hideObject='boolean' 
           />
   
   <!-- bevel --/>
   <bevel id='string'
          distance='int'
          angle='int'
          highlightColor='string' 
          highlightAlpha='int'
          shadowColor='string' 
          shadowAlpha='int' 
          blurX='int'  
          blurY='int' 
          strength='int' 
          quality='int' 
          type='string'
          knockout='boolean'
          />   
        
   <!-- glow --/>
   <glow id='string'
         color='string'
         alpha='int'
         blurX='int' 
         blurY='int'
         strength='int' 
         quality='int' 
         inner='boolean'  
         knockout='boolean' 
         />   
 
   <!-- blur --/>
   <blur id='string'
         blurX='int'  
         blurY='int' 
         quality='int' 
         />   

</filter>


Description

filter defines any number of filters to enhance the look of or highlight different graphic elements. Filters can be applied to axis_category, axis_value, legend, chart_data, chart_rect, chart_label, and draw.

After defining filters, one or more can be applied to different chart elements. For example, you can define one shadow and two bevel filters. You can apply just the shadow to one element, just the first bevel to a second element, and both the shadow and the second bevel to a third element.

The effects created with filters are not visible in printed charts.

 


Shadow

The shadow filter has the following attributes:

  • id: Any unique ID to identify the filter. A filter is applied to an element by passing it this ID.

  • distance: The offset distance of the shadow in pixels. The default is 4.

  • angle: The angle of the shadow. Valid values are 0 to 360. The default is 45.

  • color: The color of the shadow. This is a string holding triple hexadecimal values representing the red, green, and blue components of a color. The default is "000000" (black).

  • alpha: The transparency value of the shadow color. Valid values are 0 (fully transparent) to 100 (fully opaque). The default is 20.

  • blurX: The amount of horizontal blur. Valid values are 0 to 255. The default value is 4. Values that are a power of 2 (such as 2, 4, 8, 16 and 32) are optimized to render more quickly than other values.

  • blurY: The amount of vertical blur. Valid values are 0 to 255. The default value is 4. Values that are a power of 2 (such as 2, 4, 8, 16 and 32) are optimized to render more quickly than other values.

  • strength: The strength of the shadow. The higher the value, the stronger the contrast between the shadow and the background. Valid values are 0 to 255. The default is 1.

  • quality: The number of times to apply the filter. The default value is 1, which is equivalent to low quality. A value of 2 is medium quality, and a value of 3 is high quality.

  • inner: Indicates whether the shadow is an inner shadow or not. A value of true specifies an inner shadow. The default is false, an outer shadow (around the outer edges of the object).

  • knockout: Applies a knockout effect (true), which makes the object invisible and reveals the background through it (see the red text below). The default is false (show the object).

  • hideObject: Indicates whether the object is hidden or not. A value of true indicates that the object itself is not drawn; only the shadow is visible. The default is false (show the object).

 


Bevel

The bevel filter has the following attributes:

  • id: Any unique ID to identify the filter. A filter is applied to an element by passing it this ID.

  • distance: The offset distance of the bevel in pixels. The default is 4.

  • angle: The angle of the shadow. Valid values are 0 to 360. The default is 45.

  • highlightColor: The highlight color of the bevel. This is a string holding triple hexadecimal values representing the red, green, and blue components of a color. The default is "FFFFFF" (white).

  • highlightAlpha: The transparency value of the highlight color. Valid values are 0 (fully transparent) to 100 (fully opaque). The default is 20.

  • shadowColor: The shadow color of the bevel. This is a string holding triple hexadecimal values representing the red, green, and blue components of a color. The default is "000000" (black).

  • shadowAlpha: The transparency value of the shadow color. Valid values are 0 (fully transparent) to 100 (fully opaque). The default is 20.

  • blurX: The amount of horizontal blur. Valid values are 0 to 255. The default value is 4. Values that are a power of 2 (such as 2, 4, 8, 16 and 32) are optimized to render more quickly than other values.

  • blurY: The amount of vertical blur. Valid values are 0 to 255. The default value is 4. Values that are a power of 2 (such as 2, 4, 8, 16 and 32) are optimized to render more quickly than other values.

  • strength: The strength of the bevel. The higher the value, the stronger the contrast between the bevel and the background. Valid values are 0 to 255. The default is 1.

  • quality: The number of times to apply the filter. The default value is 1, which is equivalent to low quality. A value of 2 is medium quality, and a value of 3 is high quality.

  • type: The type of bevel. Valid values are inner, outer, and full. The default value is inner.

  • knockout: Applies a knockout effect (true), which makes the object invisible and reveals the background through it. The default is false (show the object).

 


Glow

The glow filter has the following attributes:

  • id: Any unique ID to identify the filter. A filter is applied to an element by passing it this ID.

  • color: The color of the glow. This is a string holding triple hexadecimal values representing the red, green, and blue components of a color. The default is "88FF00" (green).

  • alpha: The transparency value of the glow color. Valid values are 0 (fully transparent) to 100 (fully opaque). The default is 20.

  • blurX: The amount of horizontal blur. Valid values are 0 to 255. The default value is 4. Values that are a power of 2 (such as 2, 4, 8, 16 and 32) are optimized to render more quickly than other values.

  • blurY: The amount of vertical blur. Valid values are 0 to 255. The default value is 4. Values that are a power of 2 (such as 2, 4, 8, 16 and 32) are optimized to render more quickly than other values.

  • strength: The strength of the glow. The higher the value, the stronger the contrast between the glow and the background. Valid values are 0 to 255. The default is 1.

  • quality: The number of times to apply the filter. The default value is 1, which is equivalent to low quality. A value of 2 is medium quality, and a value of 3 is high quality.

  • inner: Indicates whether the glow is an inner glow or not. A value of true specifies an inner glow. The default is false, an outer glow (around the outer edges of the object).

  • knockout: Applies a knockout effect (true), which makes the object invisible and reveals the background through it (see the red text below). The default is false (show the object).

 


Blur

The blur filter has the following attributes:

  • id: Any unique ID to identify the filter. A filter is applied to an element by passing it this ID.

  • blurX: The amount of horizontal blur. Valid values are 0 to 255. The default value is 4. Values that are a power of 2 (such as 2, 4, 8, 16 and 32) are optimized to render more quickly than other values.

  • blurY: The amount of vertical blur. Valid values are 0 to 255. The default value is 4. Values that are a power of 2 (such as 2, 4, 8, 16 and 32) are optimized to render more quickly than other values.

  • quality: The number of times to apply the filter. The default value is 1, which is equivalent to low quality. A value of 2 is medium quality, and a value of 3 is high quality.

 

 

Example

<chart>

   <!-- define two bevel and one shadow filters -->
   <filter>
      <bevel id='bevel1' angle='60' blurX='100' blurY='100' distance='35' highlightColor='0000ff' shadowColor='ff0000' />
      <bevel id='bevel2' angle='45' blurX='3' blurY='3' distance='3' highlightAlpha='50' highlightColor='ffffff' />
      <shadow id='shadow1' distance='5' angle='45' color='000000' alpha='75' blurX='10' blurY='10' />
   </filter>

   <!-- apply the first bevel to chart_rect -->
   <chart_rect x='100' width='250' bevel='bevel1' />
       
   <draw>
      <!-- apply the second bevel and the shadow to a text -->
      <text y='225' width='250' rotation='-90' size='60' color='4400ff' alpha='90' bevel='bevel2' shadow='shadow1'>graph</text>
   </draw>

</chart>

 


Shadow and glow effects are visible through transparent objects. To apply a shadow or a glow to a transparent object without affecting the transparent color, make an opaque duplicate of the object, place it below the transparent object, and then apply a filter to it with knockout set to true. This hides the opaque object and adds the filter without affecting the transparent color.

<chart>

   <!-- define a shadow filter with knockout set to true -->
   <filter>
      <shadow id='shadow1' knockout='true' alpha='75' blurX='20' blurY='20' />
   </filter>

   <!-- create 2 overlapping rectangles. One is transparent, the other is opaque --> 
   <!-- apply the shadow to the opaque rectangle, which becomes invisible -->   
   <draw>
      <rect x='10' y='10' fill_color='000000' fill_alpha='100' shadow='shadow1' />
      <rect x='10' y='10' fill_color='FF0000' fill_alpha='50' />
   </draw>	

</chart>

 

 < previousnext > 


Copyright © 2003-2017, maani.us