Perfect Widgets: Elements Description

The General Instrument Model

The Instrument is a compound object with a hierarchical structure. Any elements can be included in the instrument. The elements can be structurally divided into two groups:

  • simple;
  • compound (elements that can include any other elements).

The elements can be functionally divided into:

  • visual (are intended for instrument appearance assigning);
  • non-visual (intended for elements’ binding and grouping, as well as for assigning instrument functionality).

The elements can be included in the instrument in different combinations. However, for practical use the instruments, specifically intended for displaying and assigning some certain values, are utilized.

Such elements are built according to the following scheme. One or several scales assigning and displaying value range are included in the instrument. Several sliders displaying (assigning) the current value are included. The elements, displaying the value in some other form, for example in the form of text line, can also be included.

For example, to build a simple instrument the following structure is used:

 

Description of General Properties

Let’s consider the Instrument class properties, peculiar to all descendants’ elements in details.

The Name property assigns the unique name within the entire instrument.

The Fill property assigns the fill, which will be used for element drawing.

Line tracing style, which will be used for element drawing, is assigned in the Stroke property.

The Style property assigns the style name of the element, used for element drawing. Available styles are assigned in the Styles property of the instrument, the element belongs to. If the element has no Fill and/or Stroke properties assigned, the style with the name assigned in the Style property will be applied.

The Visible property assigns element’s visibility.

The Active property indicates whether an element will perceive the events from the mouse.

The RecalculateAll property indicates for what elements the expressions will be recalculated, if the element state was changed. If RecalculateAll is set to false, the expressions will be recalculated only for the selected element and all the elements included in it, otherwise the expressions of all instrument elements will be recalculated.

The Size property is the size of the instrument work area.

The Enabled property indicates whether the instrument will react on the user actions.

The following properties are used only in the instrument design mode and saved with the instrument: SnapToGrid – snap to grid, the ShowGrid property - the grid visibility, the GridStep property – the step of the grid, the MeasureUnit property –the measurement units used.


The Description of All Elements and Their Properties

Joint

The Joint element is the trajectory in the line of an arc.

Описание: Description: Images/IMK/IMK_Joint.gif 

The arc is assigned by the center (the Center property), by the radius (the Radius property), by the starting angle (the StartAngle property) and by the total angle (the TotalAngle property). The angles are counted clockwise, from the horizontal axis. The Joint element is used for dials creation.

 

Guide

The Guide element is the trajectory along the line.

Описание: Description: Images/IMK/IMK_Guide.gif 

The line is assigned by the start (the StartPoint property) and the end (the EndPoint property) points. This element is used for linear scales creation.

 

Scale

The Scale element is a non-visual element that assigns the range of scale value changes. The range is assigned with the help of Minimum and Maximum properties. For the scale visualization such elements as Ticks, NumericLabels and TextLabels are included into the Scale element.

Slider

The Slider element is a non-visual element that assigns the current value (the Value property) on the scale, in which this slider is included. The Slider handles the events from the mouse in the following way: it synchronizes the Value property according to the current position of the mouse pointer and the geometry of the trajectory, in which it is included. As the Slider element is a non-visual one, it cannot directly receive the events from the mouse. The events from the mouse are passed to the Slider by the visual elements included in it. Thus, in order to make the Slider react on the mouse moves, it is necessary to include some visual element in it.

The MaxLimit and MinLimit assign range of changing value and can process both absolute and relative values. The UseLimit property defines if the assigned range of changing value is used.

Various visual elements, included in the Slider and bound to it by expressions, can be used for visualizing current Slider value.

Group

The group element is a non-visual element used for grouping other elements.

Label

The Label element is the visual element intended for text output.

Описание: Description: Images/IMK/IMK_Label.gif 

The Text property assigns the output text. The rectangle, in which the text is output, is assigned by the center (the Center property) and by size (the Size property). Text alignment relatively to the rectangle is assigned by the TextAlign property. The Font property assigns the text font. The Angle property assigns the figure rotation clockwise relatively to the center.

Custom Labels

The CustomLabels element represents text labels on the scale that are not bound to scale values.

Описание: Description: Images/IMK/IMK_CustomLabels.gif 

Text labels as well as corresponding scale values are assigned in the Labels collection. Scale value can be assigned both by absolute value and relative value (in percentage from the scale range). Labels, which value is set to Auto, will be evenly distributed along the scale subject to bench mark assigned by the Origin property. Shift form the Scale is assigned in the Distance property.

The Dock property defines relative position of the CustomLabels element subject to sifts assigned in the Padding property. The OddLabelDistance property sets sift of add labels relative to even ones. Labels alignment relative to each other is assigned by the Position property. The TextAlingment property defines marks alignment relative to the corresponding scale value. Text angle is assigned in the Angle property, and text orientation is set in the TextRotationMode property. The ItemMargins property defines text shift from the label area margins. The ShowSuperposableLabels defines if the superposable labels will be displayed. If you need to display labels only in the specified range, use the MaxLimit and MinLimit properties assigning range bounds. The UseLimit property indicates that limitation of element output will be executed. This element should be included in the scale.

Scale Labels

The ScaleLabels element represents numeric labels on the scale.

Описание: Description: Images/IMK/IMK_ScaleLabels.gif

Values are displayed within the range, set in the scale, and step, defined by the Step property. If the Step property is set to Auto, divisions’ amount is set in the Divisions property. The origin property defines a benchmark. If the UseRoundValues is set to true, scale marks will be distributed along the scale in the way that the corresponding values contain minimal amount of fractional numbers; the number of divisions will be less or equal to the Divisions property value. When the element is drawn, these labels will be evenly distributed along the scale. Shift from the scale is assigned by the Distance property.

The Dock property defines relative position of the ScaleLabels subject to shifts, assigned in the Padding property. The OddLabelDistance property sets shift of the odd labels relative to even ones. Labels alignment relative to each other is set in the Position property. The TextAlignment property sets marks alignment relative to the corresponding scale value. Label angle is set in the Angle property, and label orientation is set in the TextRotationMode property. The ShowSuperposableLabels defines if the superposable labels will be displayed. The ItemsMargins property defines text shift from the Label area bounds. If you need to display Labels only within the assigned range, use the MaxLimit and MinLimit properties that set range bounds. The UseLimit property indicates that limitation of the element output will be executed. This element should be included in the scale.

Scale Title

The ScaleTitle element represents the scale title.

Описание: Description: Images/IMK/IMK_ScaleTitle.gif 

Title text is defined in the Text property. Element position is assigned is set in the Origin property. The Dock property assigns relative position of the Scaletitle subject to shifts set in the Padding property. The TextAlignment defines title alignment. Text angle is set in the Angle property, and text orientation is assigned in the TextRotationMode property.

Ticks

The Ticks element is the ticks on the scale.

Описание: Description: Images/IMK/IMK_Ticks.gif 

Values are displayed within the range, assigned in the scale and step defined in the Step property. The number of the ticks is assigned in the Divisions property. The Origin property specifies the bench mark. If the UseRoundValues property is set to true, scale ticks will be distributed in the way that the corresponding values contain minimal amount of the fractional numbers; the number of divisions will be less or equal to the Divisions property value. The length of the tick is assigned in the Length property. The intermediate ticks, which divide this range according to the SubDivisions property, are output between the ticks in the range. The length of the intermediate ticks is assigned in the SubLength property. The positional relationship of the ticks and the intermediate ticks can be assigned with the help of the SubTicksPosition property. When drawing the element, the ticks will be evenly spread in the line of the whole scale. The indent from the scale is assigned with the help of the Distance property. The Dock property determines the Ticks element position subject to shifts, set in the Padding property. If there is a necessity to output the ticks only in the assigned range, use MaxLimit and MinLimit properties that assign the range borders. The UseLimits property indicates that the limitation on element outlet will be used. This element is included in the scale.

Scale Marks

The ScaleMarks element represents graphic markers on the scale.

Описание: Description: Images/IMK/IMK_ScaleMarks.gif 

Shape type is assigned in the Shape property. Values are displayed within the range, set in the scale, and step, assigned in the Step property. If the Step property value is set to Auto, division amount is set in the Divisions property. The Origin property sets the benchmark. Marks size is assigned in the MarkSize property. Submarks are displayed in the within the range between marks, and they divide this range according to the SubDivisions property. Submarks size is assigned in the SubMarkSize property.

Marks and submarks relative position is set in the SubTicksPosition property. When the element is drawn, marks will be evenly distributed along the scale. Shift from the scale is set in the Distance property. The Dock property determines relative position of the marks subject to shifts, set in the Padding property. Marks angle is assigned in the MarksAngle property. If you need to display marks only in the specified range, use the MaxLimit and MinLimit properties, which assign range bounds. The UseLimit property indicates that limitation of the element output will be performed. The ScaleMarks element should be included in the scale.

Ranged Level

The RangedLevel element is intended for displaying intervals on the scale.

Описание: Description: Images/IMK/IMK_RangedLevel.gif 

The Value property assigns value the element will be displayed up to. The StartWidth and EndWidth property set width of the element at the beginning and at the end of the scale. If the Fill property is not set, the RangedLevel element will be painted with colors assigned in the Colors property. If the Colors property is not set, the element will be painted with colors set by StartColor and EndColor. The Divisions property determines divisions’ amount. The DivisionsStroke property assigns type of lines used to divide divisions. The AlignmentMode property assigns the way element will bound to the scale. If you need to display markers only within the specified range, use the MaxLimit and MinLimit properties that set range bounds.

Linear Level

The LinearLevel element is intended for displaying intervals on the linear scale.

Описание: Description: Images/IMK/IMK_LinearLevel.gif

The Value property sets value the element will be displayed up to. The Divisions property determines division’s amount. The DivisionsStroke property assigns type of lines used to divide divisions. If the Fill property is not set, the RangedLevel element will be painted with colors assigned in the Colors property. If the Colors property is not set, the element will be painted with colors set by StartColor and EndColor.

The Width property determines element width. The StartCap and EndCap properties assign style of displaying element-start and element-end. Style of displaying the whole element is determined in the Effect3D property. The ShowAsThermometer property determines if the element will be displayed as thermometer, i.e. there will be a circle with radius, set in the PocketRadius property, at the beginning of the scale. The Dock property determines type the of element’s docking to the scale.

Tank

The Tank element is a visual element, intended for emulating a tank, filled with liquid. The element is assigned by the Width property, determining tank width, the Depth property, assigning tank depth, and the TankWidth, determining width of the tank walls. The TankColor and LiquidColor set tank color and liquid color correspondingly. Style of displaying the whole element is determined by the Effect3D property. The Dock property determines type the of element’s docking to the scale.

Описание: Description: Images/IMK/IMK_Tank.gif

Circle

The Circle element is a visual element representing the figure in the form of a circle.

  

The circle is assigned with the help of the center (the Center property) and radius (the Radius property).

Ellipse

The Ellipse element is a visual element representing the figure in the form of an ellipse.

 

It is assigned with the help of the center (the Center property) and size (the Size property). The Angle property assigns the figure rotation clockwise relatively to the center.

Rectangle

The Rectangle element is a visual element representing the figure in the form of a rectangle.

 

It is assigned with the help of the center (the Center property) and size (the Size property). The Angle property assigns the figure rotation clockwise relatively to the center.

Rounded Rectangle

The RoundedRectangle element is a visual element representing the figure in the form of a rectangle with the rounded angles.

 

It is assigned with the help of the center (the Center property) and size (the Size property). The smoothing radius is assigned in the Radius property. The Angle property assigns the figure rotation clockwise relatively to the center.

Polygon

The Polygon element is a visual element representing a regular polygon inscribed in the circle with the center assigned by the Center property.

  

A polygon size is assigned by the radius of a circle circumscribed round it (the Radius property). The number of polygon faces is assigned by the Side property. The Angle property assigns the figure rotation clockwise relatively to the center.

Star

The Star element is a visual element representing the figure in the form of a star.

  

The star position is assigned by the center (the Center property), the radius of a circle circumscribed round it (the Radius property) and the radius of an inscribed circle (the InternalRadius property). The number of star sides is assigned by the Sides property. The Angle property assigns the figure rotation clockwise relatively to the center.

Gear

The Gear element is intended for emulating gears.

Описание: Description: Images/IMK/IMK_Gear.gif 

Element’s position is assigned by the Center and Radius properties, setting center coordinates and elements radius. The Count property defines amount of the gear claws. The Depth property determines claws size. The DimentionsRatio defines relative claws width.

Needle

The Needle element is a visual element representing the figure in the form of a needle. This element is intended for the Slider current value visualization. The StartPoint property assigns the start point of the needle. The EndPoint property assigns the end point of the needle. The needle base width is assigned in the StartWidth property and the needle tip width is assigned in the EndWidth property. To assign the complex geometry of the needle the NeedlePoints property is used. NeedlePoints is the collection of intermediate needle point’s descriptors. Each intermediate point descriptor is assigned by the needle width at a given point and the ratio between the distance from the needle base to a given point and the needle length. (See the image below). The ShowMode property assigns the needle displaying mode.

Описание: Description: Images/IMK/IMK_Needle.gif

Pie

The Pie element is a visual element representing the figure in the form of an ellipse sector.

Описание: Description: Images/IMK/IMK_Pie.gif

An ellipse is assigned with the help of the center (the Center property) and size (the Size property). A sector is assigned by the starting angle (the StartAngle property) and the summarized angle (SweepAngle property). The Angle property assigns the figure rotation clockwise relatively to the center.

 

Ring Sector

The RingSector element is a visual element representing the figure in the form of an ellipse ring sector.

Описание: Description: Images/IMK/IMK_RingSector.gif 

An ellipse is assigned with the help of the center (the Center property) and size (the Size property). A sector is assigned by the starting angles (the StartAngle property) and the summarized angle (the SweepAngle property). The ratio of the internal radius to the outer one is assigned in the InternalRadius property. The Angle property assigns the figure rotation clockwise relatively to the center.

Highlight

The HighLight element is intended for emulating hightlights on the circular instruments.

Описание: Description: Images/IMK/IMK_Highlight.gif

Element’s position is set in the Center and Radius properties assigning center coordinates and radius. The Angle and SweepAngle properties set element’s start angle and its angle of turn.


 

Line

The Line element is a visual element representing the figure in the form of a line.

Описание: Description: Images/IMK/IMK_Line.gif

A line is assigned with the help of the StartPoint property and the EndPoint property.

Spring

The Spring element is a visual element representing the figure in the form of a spring.

 

A spring is assigned by the starting point (the StartPoint property). Spring width is assigned by the Amplitude property. The number of coils is assigned by the CoilCount property.

Arc

The Arc element is a visual element representing the figure in the form of an elliptical arc.

Описание: Description: Images/IMK/IMK_Arc.gif 

An ellipse is assigned with the help of the center (the Center property) and size (the Size property). The Arc element is assigned by the starting angle (the StartAngle property) and the summarized angle (the SweepAngle property). The Angle property assigns the figure rotation clockwise relatively to the center.


Circular Notches

The CircularNotches element creates the radial notches effect.

Описание: Description: Images/IMK/IMK_CircularNotches.gif

It is used for control elements design. The notches are inside the circle assigned by the center (the Center property) and the radius (the Radius property). The number of the notches is assigned by the Count property, their length is assigned by the Length property. Colors, assigned by DarkColor and LightColor properties, are used for drawing the notches. The Angle property assigns the figure rotation clockwise relatively to the center.

Linear Notches

The LinearNotches element creates the linear notches effect. It is used for control elements design.

Описание: Description: Images/IMK/IMK_LinearNotches.gif 

The notches are placed parallel to the line assigned by the start and end points (the StartPoint and EndPoint properties). The distance between the extreme notches is assigned by the Width property. The number of the notches is assigned by the Count property. Colors, assigned by DarkColor and LightColor properties, are used for drawing the notches.

Frame

The Frame element is a visual element in the form of a frame with the bevel.

Описание: Description: Images/IMK/IMK_Frame.gif 

The frame coordinates are assigned by the center (the Center property) and size (the Size property). The bevel style is assigned in the BevelStyle property. DarkColor, LightColor, OuterColor, InnerColor properties assign the colors used for drawing the bevel. The Angle property assigns the figure rotation clockwise relatively to the center.

Picture

The Picture element is intended for the picture output.

Описание: Description: Images/IMK/IMK_Picture.gif 

The picture is assigned in the Image property. Picture position and size are assigned by the Center and Size properties. The Angle property assigns the figure rotation clockwise relatively to the center.

Picture Set

The PictureSet element is intended for the output of one picture from the assigned pictures set. Picture collection is assigned in the image property. The number of output picture is assigned by the ImageIndex property. Picture position and size are assigned by the Center and Size properties. The Angle property assigns the figure rotation clockwise relatively to the center.

Digits

The Digits element is intended for digital indicator emulation.

Описание: Description: Images/IMK/IMK_Digits.gif 

It is used for digital values output. The text, displayed in the indicator, is assigned in the Text property. The following symbols are allowed: numbers (0-9), “point”, “dash”, “colon”, “space”. The position and size are assigned by the Center and Size properties. The Angle property assigns the figure rotation clockwise relatively to the center. The indicator number is displayed by the figures, consisting of segments. Segments thickness is assigned by the SegmentThickness property. The interval between the segments is assigned by the SegmentSpace property. The Symbol width is assigned by the DigitWidth property, height is assigned by DigitHeight property, the space between the figures is assigned by the DigitSpace property. The color of figures active segments is assigned by the ActiveColor property, the color of inactive segments is assigned by the InactiveColor property.

Odometer

The Odometer element is intended for mechanical meter emulation.

It is used for value output. The output number is assigned by the Value property. The position and size are assigned by the Center and Size properties. The Angle property assigns the figure rotation clockwise relatively to the center. The font of displayed figures is assigned by the Font property. The assigned value is output on different meter disks. The disk color, in which the number last rank is displayed, is assigned by the FirstDigitBackFill property; the figure color, output on this disk, is assigned by the FirstDigitForeFill property. The color of the other disks is assigned by the BackFill property; the color of the symbols, output on them, is assigned by the ForeFill property.

Digital Text

The DigitalText element is intended for displaying the text.

 

The text, displayed in the indicator, is assigned in the Text property. The position and size are assigned by the Center and Size properties. The Angle property assigns the figure rotation clockwise relatively to the center. The indicator text is displayed by figures, consisted of rectangle segments. The color of figures active segments is assigned by the ActiveColor property, the color of inactive segments is assigned by the InactiveColor property. The segments vertical and horizontal weight is assigned by the SegmentSize property. The space between the segments is assigned by the SegmentSpaces property. The text offset relatively to the left element bound is assigned by the TextHorizontalOffset property. The text offset relatively to the top bound is assigned by the TextVerticalOffset. Besides that, you can set font by the Font property.


 

Add Feedback