SlickBoard | XML/SWF Charts | Timeline Eons (new)

 < previousnext > 

 

Image

 

<image url='string' 
       x='number' 
       y='number' 
       width='number'  
       height='number' 
       fill='string' 
       rotation='number' 
       alpha='number' 
       timeout='number'
       retry='number'
       />


Description

Image draws an image, which can be a JPEG, unanimated GIF, PNG, or SWF flash animation:

  • url: Relative or absolute URL of a JPEG, unanimated GIF, PNG, or SWF flash animation. This must be in the same sub-domain as the slickboard.swf file (flash security).

  • x: The horizontal position of the top-left corner of the image rectangle. This is relative to the upper left corner of the background (0, 0). The default is zero. See the fill attribute below.

  • y: The vertical position of the top-left corner of the image rectangle. This is relative to the upper left corner of the background (0, 0). The default is zero. See the fill attribute below.

  • width: The width of the image rectangle. See the fill attribute below.

  • height: The height of the image rectangle. See the fill attribute below.

  • fill: This specifies the way the image is positioned within the rectangle defined by x, y, width, and height. Valid values are:

    • normal (default): Stretch the image to the rectangle defined by x, y, width, and height. This fills the rectangle, but may distort the image.

    • center: Display the image using its original width and height values, and center the image within the rectangle defined by x, y, width, and height. This does not distort the image, but may not fill the rectangle and/or may not constrain the image to the rectangle.

    • fit: Scale the image to fit within the rectangle defined by x, y, width, and height. This does not distort the image, but may not fill the rectangle.

    • trim: Scale the image to fill the rectangle defined by x, y, width, and height. This does not distort the image, but may not constrain the image to the rectangle.

    • stage: Stretch the image to the entire board area. This ignores the rectangle defined by x, y, width, and height. This may distort the image.


  • rotation: The image's rotation around its upper-left corner (x, y). The default value is zero.

  • alpha: The image's transparency value. Valid values range from 0 (fully transparent) to 1 (fully opaque). The default is 1.

  • timeout: The number of seconds to wait before the image loading times out. The default is 30 seconds.

  • retry: The number of times to try loading the image before displaying a loading error message. The default is 2 (try twice).

 


Charts inside SlickBoard

To display XML/SWF Charts within SlickBoard, use the <image> tag and pass the library and source paths in the query part of the charts.swf URL. To give the chart the same coordinate system as the board, omit the x, y, width, height, and fill attributes like this:

<slickboard>

   <image url='charts.swf?library_path=libs/charts_library&xml_source=sample.xml' />   

</slickboard>

Because the chart is rendered after it is loaded by SlickBoard, if you want the chart to be 300 pixels wide, then avoid scaling it. Instead, do this within the chart's XML source. Set chart_rect, legend, and all the chart elements to match this requirement.

Charts always produce a bounding rectangle larger than their visible area. To make charts work correctly with functions that make use of bounding rectangles such as constrain, it is necessary to mask them.

 


SlickBoard inside SlickBoard

It is not possible to display a whole SlickBoard inside another Slickboard. An image with a slickboard.swf URL has no effect. To load external objects into a board, see External Objects

 

Example

<slickboard>

   <!-- draw a jpeg image -->    
   <image url='images/pattern.jpg'   
          x='50' 
          y='25'
          width='200' 
          height='150'
          fill='stage'
          /> 
       
   <!-- draw the same image with different attributes -->    
   <image url='images/pattern.jpg'
          x='75' 
          y='50'
          width='175' 
          height='125'
          rotation='10'
          /> 
          
   <!-- draw a SWF animation -->    
   <image url='images/count.swf'
          x='300' 
          y='100'
          width='100' 
          height='100'
          alpha='.7'
          /> 
   
</slickboard>

 

 < previousnext > 


Copyright 2010-2014, maani.us