Reference for the Mosaic class WidgetSet::VerticalValueBarConfig

WidgetSet::VerticalValueBarConfig
CoverBitmap
CoverFrame
CoverStackingPriority
CoverTint
FaceBitmap
FaceFrame
FaceStackingPriority
FaceTint
NeedleBitmap
NeedleFrame
NeedleMarginBottom
NeedleMarginTop
NeedleOffset
NeedleStackingPriority
NeedleTint
OnUpdate
SwingDuration
SwingElastic
TrackAboveBitmap
TrackAboveBorderColor
TrackAboveBorderWidth
TrackAboveColor
TrackAboveCornerRadius
TrackAboveFlattened
TrackAboveFrame
TrackAboveMarginBottom
TrackAboveMarginTop
TrackAboveOffset
TrackAboveStackingPriority
TrackAboveStatic
TrackAboveThickness
TrackAboveTint
TrackAboveWithEdge
TrackBelowBitmap
TrackBelowBorderColor
TrackBelowBorderWidth
TrackBelowColor
TrackBelowCornerRadius
TrackBelowFlattened
TrackBelowFrame
TrackBelowMarginBottom
TrackBelowMarginTop
TrackBelowOffset
TrackBelowStackingPriority
TrackBelowStatic
TrackBelowThickness
TrackBelowTint
TrackBelowWithEdge
WidgetMaxSize
WidgetMinSize
WidgetSet::WidgetConfig

SEE ALSO

Using and customizing the Vertical Value Bar widget.

This class implements the functionality permitting you to simply customize the look and feel of a 'vertical value bar' widget (WidgetSet::VerticalValueBar). In the practice, you will create an instance of this class, configure its properties with bitmaps, colors and other relevant attributes according to your design expectations and assign such prepared configuration object to the property 'Appearance' of every affected vertical value bar widget. Thereupon the widgets will use the configuration information provided in the object.

Since with the configuration object you determine the appearance of the value bar widget you should know from which views the widget is composed of:

All above mentioned views are arranged one above the other whereby the resulting stacking order can be configured by using the properties FaceStackingPriority, TrackBelowStackingPriority, TrackAboveStackingPriority, NeedleStackingPriority and CoverStackingPriority. The view with higher priority will appear in front of other views with lower priority.

The value bar widget can move the needle with a smooth animation. This can be configured in the properties SwingDuration and SwingElastic.

To further enhance the widgets, a slot method can be assigned to the property OnUpdate. Within the slot method new decoration views can be added to the widgets and updated according to the current state of the widget.

With the properties WidgetMinSize and WidgetMaxSize you can configure size constraints for the widget itself. You can, for example, limit the value bar widget to not shrink below a specified width or height.

property Resources::Bitmap CoverBitmap = null;

The property 'CoverBitmap' determines the bitmap to fill vertically the foreground of the value bar widget. The bitmap is centered horizontally.

If the specified bitmap contains more than one frame (multi-frame bitmap), the desired frame number can be selected in the property CoverFrame. If the selected bitmap is intended to be animated, ensure that the property CoverFrame is -1.

If the specified bitmap contains opacity information only (Alpha8 bitmap), you can tint the bitmap by specifying the desired color in the property CoverTint. With the property CoverTint you can also modulate the opacity of a regular bitmap.

property int32 CoverFrame = -1;

The property 'CoverFrame' determines the frame number within the bitmap CoverBitmap. This property is applicable for multi-frame bitmaps only (see also Resources::Bitmap). If the desired frame is not available in the bitmap, no bitmap is shown.

If the property is initialized with the value -1 and the CoverBitmap bitmap is animated, the animation is automatically started. If the bitmap is not animated and the property is -1, the frame with number 0 is displayed.

property int32 CoverStackingPriority = 5;

The property 'CoverStackingPriority' determines the Z-order position of the view destined to display the cover bitmap. Per default the cover view is arranged in front of all other views within the value bar widget. By configuring this property the arrangement of the views within the widget can be changed whereby views with larger priority will be arranged in front of views with lower priority. For example, to bring the cover view in background of the widget, configure the property with a smaller value.

property color CoverTint = #FFFFFFFF;

The property 'CoverTint' determines the color value to tint or modulate the bitmap specified in the property CoverBitmap. The effect of this color value depends on the type of the bitmap:

property Resources::Bitmap FaceBitmap = null;

The property 'FaceBitmap' determines the bitmap to fill vertically the background of the value bar widget. The bitmap is centered horizontally.

If the specified bitmap contains more than one frame (multi-frame bitmap), the desired frame number can be selected in the property FaceFrame. If the selected bitmap is intended to be animated, ensure that the property FaceFrame is -1.

If the specified bitmap contains opacity information only (Alpha8 bitmap), you can tint the bitmap by specifying the desired color in the property FaceTint. With the property FaceTint you can also modulate the opacity of a regular bitmap.

property int32 FaceFrame = -1;

The property 'FaceFrame' determines the frame number within the bitmap FaceBitmap. This property is applicable for multi-frame bitmaps only (see also Resources::Bitmap). If the desired frame is not available in the bitmap, no bitmap is shown.

If the property is initialized with the value -1 and the FaceBitmap bitmap is animated, the animation is automatically started. If the bitmap is not animated and the property is -1, the frame with number 0 is displayed.

property int32 FaceStackingPriority = 1;

The property 'FaceStackingPriority' determines the Z-order position of the view destined to display the face bitmap. Per default the face view is arranged in the background of the value bar widget behind all other views. By configuring this property the arrangement of the views within the widget can be changed whereby views with larger priority will be arranged in front of views with lower priority. For example, to bring the face view in front of the value bar widget, configure the property with a larger value.

property color FaceTint = #FFFFFFFF;

The property 'FaceTint' determines the color value to tint or modulate the bitmap specified in the property FaceBitmap. The effect of this color value depends on the type of the bitmap:

property Resources::Bitmap NeedleBitmap = null;

The property 'NeedleBitmap' determines the bitmap to be displayed centered at the actual needle position within the value bar widget. The position of the bitmap can additionally be adjusted by configuring the property NeedleOffset.

If the specified bitmap contains more than one frame (multi-frame bitmap), the desired frame number can be selected in the property NeedleFrame. If the selected bitmap is intended to be animated, ensure that the property NeedleFrame is -1.

If the specified bitmap contains opacity information only (Alpha8 bitmap), you can tint the bitmap by specifying the desired color in the property NeedleTint. With the property NeedleTint you can also modulate the opacity of a regular bitmap.

property int32 NeedleFrame = -1;

The property 'NeedleFrame' determines the frame number within the bitmap NeedleBitmap. This property is applicable for multi-frame bitmaps only (see also Resources::Bitmap). If the desired frame is not available in the bitmap, no bitmap is shown.

If the property is initialized with the value -1 and the NeedleBitmap bitmap is animated, the animation is automatically started. If the bitmap is not animated and the property is -1, the frame with number 0 is displayed.

property int32 NeedleMarginBottom = 0;

The property 'NeedleMarginBottom' determines an additional gap in pixel between the bottom edge of the widget at the lowermost position for the needle. The needle can't be moved beyond this position.

property int32 NeedleMarginTop = 0;

The property 'NeedleMarginTop' determines an additional gap in pixel between the topmost position for the needle and the upper edge of the widget. The needle can't be moved beyond this position.

property point NeedleOffset = <0,0>;

The property 'NeedleOffset' determines an additional displacement in pixel for the needle. The needle, determined by the bitmap NeedleBitmap is displayed horizontally centered at the actual needle position. The value specified in the property NeedleOffset is used to move the needle accordingly.

property int32 NeedleStackingPriority = 4;

The property 'NeedleStackingPriority' determines the Z-order position of the view destined to display the needle bitmap. Per default the needle is arranged in front of the views belonging to the lower and upper tracks. By configuring this property the arrangement of the views within the widget can be changed whereby views with larger priority will be arranged in front of views with lower priority. For example, to place the needle in background of the value bar widget, configure the property with a smaller value.

property color NeedleTint = #FFFFFFFF;

The property 'NeedleTint' determines the color value to tint or modulate the bitmap specified in the property NeedleBitmap. The effect of this color value depends on the type of the bitmap:

property slot OnUpdate = null;

The property 'OnUpdate' can refer to a slot method, which should be invoked by widgets connected to this configuration object when the widget's state changes. This method is intended to add and update custom widget decorations.

The usage of this property is equal to the homonymous property explained in WidgetSet::VerticalValueBar. See its description for more details.

Please note, when the slot method is invoked, the method's parameter 'sender' refers the widget instance causing the invocation. In this manner, by using 'sender' the implementation of the slot method can access the widget to add and manipulate decoration views.

property int32 SwingDuration = 500;

The property 'SwingDuration' determines the time in milliseconds the value bar widget should take when repositioning the needle between the topmost and lowermost positions. At the runtime, when the needle is moved, the operation is performed with a smooth animation.

Initializing this property with the value 0 (zero) deactivates the animation effect so that the position of the needle is adapted immediately when the corresponding value in the value bar widget changes.

If enabled, the animation is performed with the FastIn_EasyOut or BackOut timing (see Effects::Timing) depending on the configuration of the property SwingElastic.

property bool SwingElastic = true;

The property 'SwingElastic' controls the timing of the animation effect used to smoothly move the needle when the value in the widget changes. This animation is enabled when the property SwingDuration is greater than 0 (zero).

Initializing the property 'SwingElastic' with the value 'false' causes the animation to be performed with the FastIn_EaseOut timing. If the property is 'true', the animation is performed with the BackOut timing resulting in the animation to be more elastic. See also Effects::Timing.

property Resources::Bitmap TrackAboveBitmap = null;

The property 'TrackAboveBitmap' determines the bitmap to fill the area above the value bar needle.

If the specified bitmap contains more than one frame (multi-frame bitmap), the desired frame number can be selected in the property TrackAboveFrame. If the selected bitmap is intended to be animated, ensure that the property TrackAboveFrame is -1.

If the specified bitmap contains opacity information only (Alpha8 bitmap), you can tint the bitmap by specifying the desired color in the property TrackAboveTint. With the property TrackAboveTint you can also modulate the opacity of a regular bitmap.

The bitmap is arranged horizontally centered without being resized in the width. In the height the bitmap fills completely the area between the actual needle position and the top edge of the widget. With the property TrackAboveWithEdge you can control, whether the bitmap at its bottom end (at the actual needle position) should appear truncated or complete.

property color TrackAboveBorderColor = #00000000;

The property 'TrackAboveBorderColor' determines the color of the border surrounding the upper track. To determine the thickness of the border use the property TrackAboveBorderWidth.

Please note, in order to be visible, a valid width for the track has to be configured in the property TrackAboveThickness. With the property TrackAboveCornerRadius the rounding at the corners of the border can be specified.

property int32 TrackAboveBorderWidth = 0;

The property 'TrackAboveBorderWidth' determines the thickness of the border surrounding the upper track. The value is expressed in pixel. To determine the color of the border use the property TrackAboveBorderColor.

Please note, in order to be visible, a valid width for the track has to be configured in the property TrackAboveThickness. With the property TrackAboveCornerRadius the rounding at the corners of the border can be specified.

property color TrackAboveColor = #00000000;

The property 'TrackAboveColor' determines the color to fill the background of the upper track. In order to be visible, a valid width for the track has to be configured in the property TrackAboveThickness. With the property TrackAboveCornerRadius the rounding at the corners of the filled area can be specified.

property int32 TrackAboveCornerRadius = 0;

The property 'TrackAboveCornerRadius' determines the rounding at corners of a filled rectangle and border belonging to the upper track. Normally, the upper track has the shape of a rectangle with sharp corners. Specifying a value greater than 0 in this property rounds the corners. The larger the value, the bigger the rounding effect. The value is expressed as radius in pixel.

Please note, that the corner radius is automatically limited to half the width of the track according to the value specified in the property TrackAboveThickness. Furthermore, with the property TrackAboveFlattened the track edge at the current needle position can be flattened.

property bool TrackAboveFlattened = false;

The property 'TrackAboveFlattened' controls the appearance of the upper track at its edge corresponding to the actual needle position. Per default the corners at the edge are rounded according to the value specified in the property TrackAboveCornerRadius. By configuring the property TrackAboveFlattened with the value 'true', the corner rounding occurs only when the track has assumed its bottommost position. As long as the track is smaller, the edge at the actual needle position is clipped (it appears flattened). The bottommost position for the track is configured by the property TrackAboveMarginBottom.

property int32 TrackAboveFrame = -1;

The property 'TrackAboveFrame' determines the frame number within the bitmap TrackAboveBitmap. This property is applicable for multi-frame bitmaps only (see also Resources::Bitmap). If the desired frame is not available in the bitmap, no bitmap is shown.

If the property is initialized with the value -1 and the TrackAboveBitmap bitmap is animated, the animation is automatically started. If the bitmap is not animated and the property is -1, the frame with number 0 is displayed.

property int32 TrackAboveMarginBottom = 0;

The property 'TrackAboveMarginBottom' determines an additional gap in pixel between the bottom edge of the value bar widget and the bottom end of the area destined to display views belonging to the upper track (filled rectangle, border and image).

The bottom end of the track area corresponds to the actual needle position. When the needle is moved, the size of the track is adjusted accordingly. By using this property, the bottommost position can be limited to not exceed the predetermined margin. To adjust the topmost position of the track, use the property TrackAboveMarginTop. To adjust the horizontal position of the upper track use the property TrackAboveOffset.

property int32 TrackAboveMarginTop = 0;

The property 'TrackAboveMarginTop' determines an additional gap in pixel between the top edge of the value bar widget and the area destined to display views belonging to the upper track (filled rectangle, border and image). If this property is 0 (zero), the upper track is directly aligned at the top edge of the widget. To adjust the horizontal position of the upper track use the property TrackAboveOffset.

property int32 TrackAboveOffset = 0;

The property 'TrackAboveOffset' determines an additional horizontal displacement in pixel for the area destined to display views belonging to the upper track (filled rectangle, border and image). Per default, the upper track is horizontally centered within the value bar widget. By configuring this property, the horizontal position of the track can be adjusted. To adjust the vertical position of the upper track use the property TrackAboveMarginTop.

property int32 TrackAboveStackingPriority = 2;

The property 'TrackAboveStackingPriority' determines the Z-order position of the views destined to display the upper track (rectangle, border and image). Per default all upper track views are arranged in front of the face view just behind the lower track. By configuring this property the arrangement of the views within the widget can be changed whereby views with larger priority will be arranged in front of views with lower priority. For example, to place the upper track views in front of the lower track, configure the property with a larger value.

property bool TrackAboveStatic = false;

The property 'TrackAboveStatic' controls the size calculation of the area destined to display views belonging to the upper track (filled rectangle, border and image). If this property is 'false', the upper track fills automatically the area between the actual position of the needle and the top edge of the value bar widget. When the needle is moved, the position and the size of the track are adjusted accordingly.

By initializing this property with the value 'true', the track assumes its maximum possible size filling the entire area between the top and bottom edges of the value bar widget. Now, the size of the track does not correspond anymore to the position of the needle. The track has a static size.

Please note, that the area destined for the upper track can additionally be limited by the properties TrackAboveMarginBottom and TrackAboveMarginTop.

property int32 TrackAboveThickness = 0;

The property 'TrackAboveThickness' determines the width in pixel of a filled rectangle and border belonging to the upper track. The color of the rectangle has to be configured by property TrackAboveColor. The thickness and the color of the border are configured by the properties TrackAboveBorderWidth and TrackAboveBorderColor.

Please note, this property does not affect how bitmap specified in the properties TrackAboveBitmap is displayed. The width of the bitmap is determined exclusively by the bitmap itself.

property color TrackAboveTint = #FFFFFFFF;

The property 'TrackAboveTint' determines the color value to tint or modulate the bitmap specified in the property TrackAboveBitmap. The effect of this color value depends on the type of the bitmap:

property bool TrackAboveWithEdge = false;

The property 'TrackAboveWithEdge' controls the appearance of the track bitmap (TrackAboveBitmap). If this property is 'true', the widget displays the bitmap completely with all its edges. If this property is 'false', the bottom edge of the bitmap is truncated.

property Resources::Bitmap TrackBelowBitmap = null;

The property 'TrackBelowBitmap' determines the bitmap to fill the area below the value bar needle.

If the specified bitmap contains more than one frame (multi-frame bitmap), the desired frame number can be selected in the property TrackBelowFrame. If the selected bitmap is intended to be animated, ensure that the property TrackBelowFrame is -1.

If the specified bitmap contains opacity information only (Alpha8 bitmap), you can tint the bitmap by specifying the desired color in the property TrackBelowTint. With the property TrackBelowTint you can also modulate the opacity of a regular bitmap.

The bitmap is arranged horizontally centered without being resized in the width. In the height the bitmap fills completely the area between the bottom edge of the widget and the actual needle position. With the property TrackBelowWithEdge you can control, whether the bitmap at its upper end (at the actual needle position) should appear truncated or complete.

property color TrackBelowBorderColor = #00000000;

The property 'TrackBelowBorderColor' determines the color of the border surrounding the lower track. To determine the thickness of the border use the property TrackBelowBorderWidth.

Please note, in order to be visible, a valid width for the track has to be configured in the property TrackBelowThickness. With the property TrackBelowCornerRadius the rounding at the corners of the border can be specified.

property int32 TrackBelowBorderWidth = 0;

The property 'TrackBelowBorderWidth' determines the thickness of the border surrounding the lower track. The value is expressed in pixel. To determine the color of the border use the property TrackBelowBorderColor.

Please note, in order to be visible, a valid width for the track has to be configured in the property TrackBelowThickness. With the property TrackBelowCornerRadius the rounding at the corners of the border can be specified.

property color TrackBelowColor = #00000000;

The property 'TrackBelowColor' determines the color to fill the background of the lower track. In order to be visible, a valid width for the track has to be configured in the property TrackBelowThickness. With the property TrackBelowCornerRadius the rounding at the corners of the filled area can be specified.

property int32 TrackBelowCornerRadius = 0;

The property 'TrackBelowCornerRadius' determines the rounding at corners of a filled rectangle and border belonging to the lower track. Normally, the lower track has the shape of a rectangle with sharp corners. Specifying a value greater than 0 in this property rounds the corners. The larger the value, the bigger the rounding effect. The value is expressed as radius in pixel.

Please note, that the corner radius is automatically limited to half the width of the track according to the value specified in the property TrackBelowThickness. Furthermore, with the property TrackBelowFlattened the track edge at the current needle position can be flattened.

property bool TrackBelowFlattened = false;

The property 'TrackBelowFlattened' controls the appearance of the lower track at its edge corresponding to the actual needle position. Per default the corners at the edge are rounded according to the value specified in the property TrackBelowCornerRadius. By configuring the property TrackBelowFlattened with the value 'true', the corner rounding occurs only when the track has assumed its topmost position. As long as the track is smaller, the edge at the actual needle position is clipped (it appears flattened). The topmost position for the track is configured by the property TrackBelowMarginTop.

property int32 TrackBelowFrame = -1;

The property 'TrackBelowFrame' determines the frame number within the bitmap TrackBelowBitmap. This property is applicable for multi-frame bitmaps only (see also Resources::Bitmap). If the desired frame is not available in the bitmap, no bitmap is shown.

If the property is initialized with the value -1 and the TrackBelowBitmap bitmap is animated, the animation is automatically started. If the bitmap is not animated and the property is -1, the frame with number 0 is displayed.

property int32 TrackBelowMarginBottom = 0;

The property 'TrackBelowMarginBottom' determines an additional gap in pixel between the bottom edge of the value bar widget and the area destined to display views belonging to the lower track (filled rectangle, border and image). If this property is 0 (zero), the lower track is directly aligned at the bottom edge of the widget. To adjust the horizontal position of the lower track use the property TrackBelowOffset.

property int32 TrackBelowMarginTop = 0;

The property 'TrackBelowMarginTop' determines an additional gap in pixel between the top edge of the value bar widget and the top end of the area destined to display views belonging to the lower track (filled rectangle, border and image).

The top end of the track area corresponds to the actual needle position. When the needle is moved, the size and position of the track are adjusted accordingly. By using this property, the topmost position can be limited to not exceed the predetermined margin. To adjust the bottommost position of the track, use the property TrackBelowMarginBottom. To adjust the horizontal position of the lower track use the property TrackBelowOffset.

property int32 TrackBelowOffset = 0;

The property 'TrackBelowOffset' determines an additional horizontal displacement in pixel for the area destined to display views belonging to the lower track (filled rectangle, border and image). Per default, the lower track is horizontally centered within the value bar widget. By configuring this property, the horizontal position of the track can be adjusted. To adjust the vertical position of the lower track use the property TrackBelowMarginBottom.

property int32 TrackBelowStackingPriority = 3;

The property 'TrackBelowStackingPriority' determines the Z-order position of the views destined to display the lower track (rectangle, border and image). Per default all lower track views are arranged in front of the face and upper track views. By configuring this property the arrangement of the views within the widget can be changed whereby views with larger priority will be arranged in front of views with lower priority. For example, to place the lower track views behind the upper track, configure the property with a smaller value.

property bool TrackBelowStatic = false;

The property 'TrackBelowStatic' controls the size calculation of the area destined to display views belonging to the lower track (filled rectangle, border and image). If this property is 'false', the lower track fills automatically the area between the bottom edge of the value bar widget and the actual position of the needle. When the needle is moved, the size of the track is adjusted accordingly.

By initializing this property with the value 'true', the track assumes its maximum possible size filling the entire area between the top and bottom edges of the value bar widget. Now, the size of the track does not correspond anymore to the position of the needle. The track has a static size.

Please note, that the area destined for the lower track can additionally be limited by the properties TrackBelowMarginBottom and TrackBelowMarginTop.

property int32 TrackBelowThickness = 0;

The property 'TrackBelowThickness' determines the width in pixel of a filled rectangle and border belonging to the lower track. The color of the rectangle has to be configured by propery TrackBelowColor. The thickness and the color of the border are configured by the properties TrackBelowBorderWidth and TrackBelowBorderColor.

Please note, this property does not affect how bitmap specified in the property TrackBelowBitmap is displayed. The width of the bitmap is determined exclusively by the bitmap itself.

property color TrackBelowTint = #FFFFFFFF;

The property 'TrackBelowTint' determines the color value to tint or modulate the bitmap specified in the property TrackBelowBitmap. The effect of this color value depends on the type of the bitmap:

property bool TrackBelowWithEdge = false;

The property 'TrackBelowWithEdge' controls the appearance of the track bitmap (TrackBelowBitmap). If this property is 'true', the widget displays the bitmap completely with all its edges. If this property is 'false', the top edge of the bitmap is truncated.

property point WidgetMaxSize = <0,0>;

The property 'WidgetMaxSize' determines the maximum allowed size of the widget. Accordingly, the value bar widget can't become bigger than the value specified in this property. By using this property you can configure the size constraints for the widget.

property point WidgetMinSize = <0,0>;

The property 'WidgetMinSize' determines the minimal allowed size of the widget. Accordingly, the value bar widget can't become smaller than the value specified in this property. By using this property you can configure the size constraints for the widget.