The Mosaic framework provides the views Filled Gradient Path and Stroked Gradient Path intended to display vector graphic shapes. Depending on the respective view, the shape appears filled (Filled Path view) or as lines drawn along its path edges (Stroked Path view). In any cases to display a shape, the views require color gradient information.

A gradient can be understood as a collection of color stops, each specifying a concrete color value and its position within the gradient. At the runtime the colors lying between two gradient stops are interpolated. One gradient can manage up to 256 color stops what permits creation of very sophisticated and complex gradients.

Embedded Wizard supports two types of gradients: Linear Gradient (described in this chapter) and Radial Gradient. The following sections are intended to provide you an introduction and useful tips of how to deal with the gradient object. For the complete reference please see the documentation of the Graphics::LinearGradient class.

To add a new Linear Gradient object just at the design time of a GUI component do following:

As long as the Linear Gradient object is selected you can inspect and modify its properties conveniently in the Inspector window as demonstrated with the property Start in the screenshot below. Please note, for better overview the below screenshot has been made with Inspector window being configured to sort the properties by categories:

The Linear Gradient object serves as data container where you store the gradient color information. In order to display this information on the screen you have to connect the Linear Gradient object to one of the both views Filled Gradient Path and Stroked Gradient Path. Accordingly, the view will display vector graphic using the specified gradient information.

To connect a Linear Gradient object to a view you have to assign this object to the property Gradient of the affected view. With the Inspector Assistant you can conveniently select the right object when you edit the initialization expression for the property Gradient. For example:

As soon as you have connected the both, the information provided in the Linear Gradient object appears within the view. If desired, you can assign the same Linear Gradient object to several views. If during the runtime of the application, the content of the Linear Gradient object changes, all associated views are updated automatically.

The coordinates of the Linear Gradient are determined by it properties Start and End, whereby the Start and End properties determine a straight line segment along which the gradient colors are interpolated. The both coordinates are expressed in pixel and they are valid in the coordinate space of the respective view connected to the gradient object. If there are multiple views connected to the same gradient object, each view will display the gradient calculating with its own coordinate space.

An example, let's assume, the size of the view is 200x100 pixel and you intent to display a diagonal gradient from the upper left corner to the bottom right corner of the view, then configure the property Start with the value <0,0> and the property End with the value <200,100>. In turn, to get a horizontal gradient, it would be sufficient to configure the property End with the value <200,0>.

Colors inside the gradient are determined by so-called color stops. Each color stop specifies the color value and its corresponding position along the gradient. For positions lying between two color stops, the colors are interpolated linearly. The positions are expressed as values in range 0.0..1.0 whereby 0.0 corresponds to the start position of the gradient and 1.0 to its end position. The both positions are determined by the above described properties Start and End.

In its simplest form, a gradient is determined by two colors associated to its start and end positions. If such simple gradient meets your requirements, the Linear Gradient object provides two convenience properties to specify the corresponding color values StartColor and EndColor. The value in property StartColor determines thus the first color stop at position 0.0. The value in property EndColor determines the last color stop at position 1.0. The following figure demonstrates such simple gradient interpolating between red and green color stops. The start position of the gradient is specified to correspond to the top left corner of the view. The end position is at the bottom right corner:

If your use case requires more complex gradients composed of more than two color stops, then the color stops have to be configured programmatically. For this purpose exist following methods to specify the desired number of color stops, the content of each of them and to query the capacity information:

Method	Description
SetMaxNoOfColorStops()	The method configures the capacity of the gradient (the maximum number of color stops it can accommodate). Once the capacity is specified, the color stops can be added by using the method AddColorStop().
AddColorStop()	The method configures a new color stop. The new color stop is appended to the end of the list of all previously specified color stops. If successful, the method returns a color stop number identifying the just added color stop. This number can be used to address and modify the color stop by the method SetColorStop(). If the gradient is full (there is no free entry), the method fails returning -1.
SetColorStop()	The method modifies a color stop. The color stop has to be added previously by invoking the method AddColorStop().
GetMaxNoOfColorStops()	The method returns the capacity of the gradient, it means the maximum number of color stops it can accommodate. To specify the capacity, the method SetMaxNoOfColorStops() is available.
GetNoOfColorStops()	The method returns the number of color stops stored actually in this gradient. To append a new color stop, use the method AddColorStop(). To query the capacity of the gradient, use the method GetMaxNoOfColorStops().

For example, to configure a gradient composed of six rainbow colors, following implementation could be applicable:

This results in following screen content:

The order in which color stops are added doesn't matter, usually. In practice, the color stops are evaluated according to their positions and not order. In case of multiple color stops being assigned to one and the same position, however, the selection of the right color stop occurs according to the order in which the color stops have been added originally. In the following example, the gradient starts with red and ends with green color. At the position 0.5, in turn, are two colors specified, according to the order first yellow and then blue:

This results in the gradient being divided in two parts. The range 0.0..0.5 interpolates the colors between red and yellow. The other range 0.5..1.0 interpolates the colors between blue and green. The position 0.5 acts thus like a sharp border between two colors. The border appears yellow on its left side and blue on its right side. The order in which the colors have been added decides in such case which color appears at which side of the border: