Using Image Brushes
This applies to: Managed Dashboards, Managed Reports
Color-based properties of visualizations, components, and other design elements are actually brushes which can be one of the following brush types:
Solid (flat color)
Linear (gradient)
Radial (gradient)
Image
The image brush type in particular allows a button, for example, to be displayed as an image you specify instead of a solid color. You can also use this option to create customized state indicator states based on images.
Using an Image Brush
For this example, create a new dashboard and add a Button component to it from the toolbar.
Go to the Properties for the button, click Look, and then expand the Rest Background property. This is the background color of the button when it is in the rest state (unpressed).
Click the Brush drop-down and set it to Image.
The brush loads a placeholder image by default and the button is updated accordingly.
Next, set the properties of the image brush as described in the following sections.
Source
There are two options for specifying the image source. You can supply an absolute URL that points to an image (e.g., http://www.example.com/images/image1.png
), or you can select an existing image resource.
To use an image resource, click Select Image.
In the Open File dialog, select the existing image resource you want from the Images folder, and then click Submit.
The button is now displayed as an image on the canvas. In the Properties window, you can see a small preview of the loaded image as well. In the case of an image resource, the Source property looks like this:
dundasImageResource:e0011d1d-62ac-4d81-b532-287287741f14
The portion of the above text after the colon is the ID of the image resource (which you can also get from the image resource's properties).
Size
The Size property offers the following options:
Auto - The image size is automatically determined.
Cover - The image is sized so that it covers the available content area.
Contain - The image is sized so that it is contained within the available content area.
Fill - The image is stretched to fill the content area without taking the aspect ratio into consideration.
Repeat
The Repeat property specifies how the image will be repeated within the content area. There are two options:
Repeat
No Repeat
Note: The Repeat option may work differently depending on the type of component or element. For CSS-based components (such as the background of a label, or the dashboard itself), the repeat option first scales according to the Size setting, and then repeats based on that. For SVG-based controls (such as a rectangle), the repeat option ignores the Size setting, always starts at (0,0), and repeats based on the original size of the image.
For more information, see:
Comments
0 comments
Please sign in to leave a comment.