爱招飞帮助手册
目录

仪表控件

# FastWeb仪表控件

  • 适用平台： APP(移动端)

  该组下的组件主要是一些仪表盘组件，用于动态展示数据。

# 1. TUgAppMeterLed

  此组件显示为可显示状态的LED灯。

# 1.1. 属性

# 1.1.1. Options

# 1.1.1.1. Color
property Color: TMeterColor;
1

  设置控件可显示的颜色。当设置为off时表示不显示颜色。

# 1.1.1.2. Size
property Size: TMeterSize;
1

  设置控件显示的尺寸大小。

# 1.1.2. State

property State: Boolean;
1

  设置显示LED灯的状态。当设置为True时，灯亮，否则为灯灭。

# 1.2. 方法

# 1.2.1. Init

procedure Init;
1

  设置控件的初始化显示。

# 2. TUgAppMeterTank

  该组件显示为一个储罐，可用于显示罐体内液面的信息。

# 2.1. 属性

# 2.1.1. Options

  设置显示的相关选项。

# 2.1.1.1. High
property High: Integer;
1

  设置刻度线显示的最大值。

# 2.1.1.2. Level
property Level: TMeterLevel;
1

  设置显示的级别，不同的级别显示的颜色不同。

名称 说明
danger 危险级别，液面以红色显示
default 默认级别，液面以紫色显示
primary 主要级别，液面以紫色显示
safe 安全级别，液面以绿色显示
unimportant 不重要级别，液面以灰色显示
warning 警告级别，液面以黄色显示
# 2.1.1.3. Low
property Low: Integer;
1

  设置刻度线的最低显示值。

# 2.1.1.4. Size
property Size: TMeterSize;
1

  设置控件显示的尺寸大小。

# 2.1.1.5. TickAmount
property TickAmount: Integer;
1

  控件中设置的刻度线的显示数量，此项为预设属性，不支持在脚本中修改其大小。

# 2.1.1.6. TickHeight
property TickHeight: Integer;
1

  设置刻度线的百分比高度(线宽)，此项为预设属性，不支持在脚本中修改其大小。

# 2.1.1.7. TickScale
property TickScale: Boolean;
1

  此项设置是否将数字刻度添加至刻度线。

# 2.1.1.8. TickScaleFrequency
property TickScaleFrequency: Integer;
1

  数字标签显示的频率，即设置的数字含义为经过多少个刻度后显示数字，如在脚本中进行此项属性的修改，需在脚本中设置初始化后才可以使此属性的设置显示生效。

# 2.1.2. Value

property Value: Double;
1

  设置控件展示的数据值。

# 2.2. 方法

# 2.2.1. Init

procedure Init;
1

  设置控件的初始化显示。

# 3. TUgAppMeterThermo

  此组件显示为一个类似于温度计造型的控件。

# 3.1. 属性

# 3.1.1. Automatic

property Automatic: Boolean;
1

  设置控件是否进行自动化演示，当此项设置为True时，控件会进入演示模式，动态展示控件的数据变化。

# 3.1.2. Options

  设置显示的相关选项。

# 3.1.2.1. High
property High: Integer;
1

  设置刻度线显示的最大值。

# 3.1.2.2. Level
property Level: TMeterLevel;
1

  设置显示的级别，不同的级别显示的颜色不同。

名称 说明
danger 危险级别，液面以红色显示
default 默认级别，液面以紫色显示
primary 主要级别，液面以紫色显示
safe 安全级别，液面以绿色显示
unimportant 不重要级别，液面以灰色显示
warning 警告级别，液面以黄色显示
# 3.1.2.3. Low
property Low: Integer;
1

  设置刻度线的最低显示值。

# 3.1.2.4. Size
property Size: TMeterSize;
1

  设置控件显示的尺寸大小。

# 3.1.2.5. TickAmount
property TickAmount: Integer;
1

  控件中设置的刻度线的显示数量，此项为预设属性，不支持在脚本中修改其大小。

# 3.1.2.6. TickHeight
property TickHeight: Integer;
1

  设置刻度线的百分比高度(线宽)，此项为预设属性，不支持在脚本中修改其大小。

# 3.1.2.7. TickScale
property TickScale: Boolean;
1

  此项设置是否将数字刻度添加至刻度线。

# 3.1.2.8. TickScaleFrequency
property TickScaleFrequency: Integer;
1

  数字标签显示的频率，即设置的数字含义为经过多少个刻度后显示数字，如在脚本中进行此项属性的修改，需在脚本中设置初始化后才可以使此属性的设置显示生效。

# 3.1.3. Value

property Value: Double;
1

  设置控件展示的数据值。

# 3.2. 方法

# 3.2.1. Init

procedure Init;
1

  设置控件的初始化显示。

# 4. TUgAppMeterReadout

  此组件显示为一个显示屏，上面可用于显示true或者false的信息。

# 4.1. 属性

# 4.1.1. Automatic

property Automatic: Boolean;
1

  设置控件是否进行自动化演示，当此项设置为True时，控件会进入演示模式，动态展示控件的数据变化。

# 4.1.2. Options

  设置显示的相关选项。

# 4.1.2.1. Color
property Color: TMeterColor;
1

  设置控件可显示的颜色。当设置为off时表示不显示颜色。

# 4.1.2.2. DigiAmount
property DigitAmount: Integer;
1

  设置控件默认显示的位数。

# 4.1.2.3. Size
property Size: TMeterSize;
1

  设置控件显示的尺寸大小。

# 4.1.3. Value

property Value: Double;
1

  设置控件展示的数据值。

# 4.2. 方法

# 4.2.1. Init

procedure Init;
1

  设置控件的初始化显示。

# 5. TUgAppMeterGauge

  此控件显示为一个半圆形的仪表。

# 5.1. 属性

# 5.1.1. Automatic

property Automatic: Boolean;
1

  设置控件是否进行自动化演示，当此项设置为True时，控件会进入演示模式，动态展示控件的数据变化。

# 5.1.2. Options

  设置显示的相关选项。

# 5.1.2.1. High
property High: Integer;
1

  设置刻度线显示的最大值。

# 5.1.2.2. Low
property Low: Integer;
1

  设置刻度线的最低显示值。

# 5.1.2.3. Size
property Size: TMeterSize;
1

  设置控件显示的尺寸大小。

# 5.1.2.4. TickAmount
property TickAmount: Integer;
1

  控件中设置的刻度线的显示数量，如在脚本中进行此项属性的修改，需在脚本中设置初始化后才可以使此属性的设置显示生效。

# 5.1.2.5. TickHeight
property TickHeight: Integer;
1

  设置刻度线的百分比高度(线宽)，如在脚本中进行此项属性的修改，需在脚本中设置初始化后才可以使此属性的设置显示生效。

# 5.1.2.6. TickScale
property TickScale: Boolean;
1

  此项设置是否将数字刻度添加至刻度线。

# 5.1.2.7. TickScaleFrequency
property TickScaleFrequency: Integer;
1

  数字标签显示的频率，即设置的数字含义为经过多少个刻度后显示数字，如在脚本中进行此项属性的修改，需在脚本中设置初始化后才可以使此属性的设置显示生效。

# 5.1.3. Value

property Value: Double;
1

  设置控件展示的数据值。

# 5.2. 方法

# 5.2.1. Init

procedure Init;
1

  设置控件的初始化显示。

# 6. TUgAppSwitch3D

  此组件显示为一个可左右按动的开关按钮，点击按钮可实现按钮开关状态的切换。

# 6.1. 属性

# 6.1.1. Checked

property Checked: Boolean;
1

  设置当前按钮的状态是否为ON(开启)的状态。

# 6.1.2. Options

  设置控件的外观等属性。

# 6.1.2.1. FontSize
property FontSize: Integer;
1

  设置按钮上显示的文字的尺寸大小。

# 6.1.2.2. TitleOff
property TitleOff: string;
1

  设置按钮的关闭处显示的文字内容。如果输入的文字为英文会转换为大写。

# 6.1.2.3. TitleOn
property TitleOn: string;
1

  设置按钮的开启处显示的文字内容。如果输入的文字为英文会转换为大写。

# 6.2. 事件

# 6.2.1. OnSwitch

procedure UgSwitch3D01OnSwitch(sender: tobject);
1

  当开关按钮的状态切换时触发当前事件。

# 6.3. 方法

# 6.3.1. Init

procedure Init;
1

  设置控件的初始化显示。

# 7. TUgAppLinearGauge

  组件显示为一个仪表盘，包含了指针仪表盘中的常用功能。

  在横向的模式下，刻度计不显示数值栏，如果调整控件的宽度与高度，使控件的Width属性小于控件的Height属性，则可以显示数值框。

# 7.1. 属性

# 7.1.1. Options

  设置仪表盘的显示属性的选项。

# 7.1.1.1. animatedValue
property animatedValue: Boolean;
1

  设置仪表动画运行期间是否连续地更新仪表中显示的值。 如果此项被设定为False，会立即显示翻转仪表值，动画将仅在仪表指针或进度条上可视化运行。

# 7.1.1.2. animateOnInit
property animateOnInit: Boolean;
1

  设置仪表在初始绘制时是否显示指针或数值的动画效果。

# 7.1.1.3. animation
property animation: Boolean;
1

  此属性是仪表控件动画效果的设置总开关，当此项被设置为False，不管其他的相关动画属性如何设置，仪表均不会显示任何效果。

# 7.1.1.4. animationDuration
property animationDuration: Integer;
1

  设定动画效果的持续时间，单位是毫秒(ms)。

# 7.1.1.5. animationRule
property animationRule: TanimationRule;
1

  设置仪表的动画的运行效果性为。有以下的样式可选择。

名称 说明 图形示意
bounce 动画运行到指定的值时，会有类似弹跳的效果
cycle 动画的效果呈现为匀加速运动
linear 动画运行效果值的变化是线性的，即匀速运动
quad 起始时缓动，然后匀速运动，到动画快结束时减速
quint 与quad的效果相似，不同的是相比起始与结束时缓动的时间更长
debounce 显示的效果为bounce的反向
decycle 显示的效果为cycle的反向
delinear 显示的效果为linear的反向
dequad 显示的效果为quad的反向
dequint 显示的效果为quint的反向
# 7.1.1.6. barBeginCircle
property barBeginCircle: Integer;
1

  设置一个进度条的起始端是否以圆形元素开始，如果设置了数值则以相应的数值来显示。如果设置为零，则不进行显示。

# 7.1.1.7. barLength
property barLength: Integer;
1

  设置条的相对于总长度的相对长度。

# 7.1.1.8. barProgress
property barProgress: Boolean;
1

  设置是否在仪表盘上显示进度条相关的信息。

# 7.1.1.9. barShadow
property barShadow: Integer;
1

  设置进度条内部阴影的长度，默认值设置为0，表示不显示阴影效果。

# 7.1.1.10. barStrokeWidth
property barStrokeWidth: Integer;
1

  设置条形图的外框绘制的宽度，如果此项设置为0，则不绘制外框。

# 7.1.1.11. barWidth
property barWidth: Integer;
1

  设置进度条的宽度相对于仪表宽度的总百分比，其值被限制在0-50之间。

# 7.1.1.12. borderInnerWidth
property borderInnerWidth: Integer;
1

  指定内边框的宽度，以像素为单位，如果此项被设置为零，则不会绘制边框。

# 7.1.1.13. borderMiddleWidth
property borderMiddleWidth: Integer;
1

  指定中层边框的宽度，以像素为单位，如果此项被设置为零，则不会绘制边框。

# 7.1.1.14. borderOuterWidth
property borderOuterWidth: Integer;
1

  指定外层边框的宽度，以像素为单位，如果此项被设置为零，则不会绘制边框。

# 7.1.1.15. borderRadius
property borderRadius: Integer;
1

  设定边线的圆角半径。

# 7.1.1.16. borders
property borders: Boolean
1

  设定边框是否在初始化时被绘制显示。

# 7.1.1.17. borderShadowWidth
property colorBorderShadowWidth: string;
1

  设置外边框的投影宽度，如果此项被设置为零，则将不会绘制阴影。

# 7.1.1.18. colorBar
property colorBar: TColor;
1

  设置条形图的背景的颜色。

# 7.1.1.19. colorBarEnd
property colorBarEnd: TColor;
1

  设置中间的进度显示的条是否启用渐变的效果，如果此项未设置，则将不使用渐变效果。

# 7.1.1.20. colorBarProgress
property colorBarProgress: TColor;
1

  设置条形图进度条段的颜色。

# 7.1.1.21. colorBarProgressEnd
property colorBarProgressEnd: TColor;
1

  设置条形图进度条段的渐变效果，如果此项未设置，则将不使用渐变效果。

# 7.1.1.22. colorBarShadow
property colorBarShadow: TColor;
1

  设置条形图的阴影的颜色。

# 7.1.1.23. colorBarStroke
property colorBarStroke: TColor;
1

  设置条形图外框的颜色。

# 7.1.1.24. colorBorderInner
property colorBorderInner: TColor;
1

  设置控件内边框的颜色。

# 7.1.1.25. colorBorderInnerEnd
property colorBorderInnerEnd: TColor;
1

  如果此项被设置颜色数据，则在控件内边框上将启用渐变颜色的效果。颜色会从colorBorderInner到colorBorderInnerEnd进行渐变。

# 7.1.1.26. colorBorderMiddle
property colorBorderMiddle: TColor;
1

  设置控件中层边框的颜色。

# 7.1.1.27. colorBorderMiddleEnd
property colorBorderMiddleEnd: TColor;
1

  如果此项被设置颜色数据，则在控件中层边框上将启用渐变颜色的效果。颜色会从colorBorderMiddle到colorBorderMiddleEnd进行渐变。

# 7.1.1.28. colorBorderOuter
property colorBorderOuter: TColor;
1

  设置控件外层边框的颜色。

# 7.1.1.29. colorBorderOuterEnd
property colorBorderOuterEnd: TColor;
1

  如果此项被设置颜色数据，则在控件外层边框上将启用渐变颜色的效果。颜色会从colorBorderOuter到colorBorderOuterEnd进行渐变。

# 7.1.1.30. colorBorderShadow
property colorBorderShadow: TColor;
1

  如果此项被设置，则会启用边框的阴影效果，阴影的颜色为设定的数值，如果不设置此项，则边框的阴影不会被绘制。

# 7.1.1.31. colorMajorTicks*
property colorMajorTicks: TStrings;
1

  设置主刻度线的颜色，其可设置为一个数组，为每个主刻度线单独设置颜色。如果选项启用了strokeTicks，则数组中的第一种颜色将用于描边。

# 7.1.1.32. colorMinorTicks
property colorMinorTicks: TColor;
1

  设置次刻度线的颜色。

# 7.1.1.33. colorNeedle
property colorNeedle: TColor;
1

  设置指针的颜色。

# 7.1.1.34. colorNeedleEnd
property colorNeedleEnd: TColor;
1

  如果此项被设置，则表示指针部分使用渐变颜色填充，否则将表示纯色绘制。

# 7.1.1.35. colorNeedleShadowDown
property colorNeedleShadowDown: TColor;
1

  设置指针投影的颜色。

# 7.1.1.36. colorNeedleShadowUp
property colorNeedleShadowUp: TColor;
1

  设置指针的阴影颜色的上半部分。

# 7.1.1.37. colorNumbers*
property colorNumbers: TColor;
1

  设定仪表盘刻度部分数字的文本颜色。

# 7.1.1.38. colorPlate
property colorPlate: TColor;
1

  设定仪表盘的背景颜色。

# 7.1.1.39. colorPlateEnd
property colorPlateEnd: TColor;
1

  如果当前选项被设置颜色，则会启用仪表盘背景的渐变颜色的效果，颜色会从colorPlate到colorPlateEnd实现渐变的效果。

# 7.1.1.40. colorStrokeTicks
property colorStrokeTicks: TColor;
1

  为所有刻度线定义静态颜色。默认设置下此项为空，如果设置为某个颜色值，将覆盖线条的主要刻度笔触颜色，但不会影响数字颜色。 如果 colorMinorTicks属性留空未设置，则此设置也会同步应用于次刻度。

# 7.1.1.41. colorTitle
property colorTitle: TColor;
1

  设置标题的颜色。

# 7.1.1.42. colorUnits
property colorUnits: TColor;
1

  设置单位显示栏位的颜色。

# 7.1.1.43. colorValueBoxBackground
property colorValueBoxBackground: TColor;
1

  设置数值显示框的背景颜色。

# 7.1.1.44. colorValueBoxRect
property colorValueBoxRect: TColor;
1

  设定数值显示框边框的颜色。

# 7.1.1.45. colorValueBoxRectEnd
property colorValueBoxRectEnd: TColor;
1

  如果此项有启用，则设定数值显示框边框的渐变颜色的效果。渐变的颜色从colorValueBoxRect到colorValueBoxRectEnd。

# 7.1.1.46. colorValueBoxShadow
property colorValueBoxShadow: TColor;
1

  设置数值显示框的阴影颜色。

# 7.1.1.47. colorValueText
property colorValueText: TColor;
1

  设置数值显示的颜色。

# 7.1.1.48. colorValueTextShadow
property colorValueTextShadow: TColor;
1

  设置数值显示文本的阴影颜色。

# 7.1.1.49. exactTicks
property exactTicks: Boolean;
1

  设置切换刻度的绘图模式，在默认情况下，此项设置为False，即按照以下方式绘制刻度：

  • 根据majorTicks数组定义多个长度相等的部分。
  • 根据minorTicks定义两个majorTicks之间绘制的刻度数。

  如果此项被设置为True，则按照以下方式来设置：

  • majorTicks数组用户定义绘制主刻度的精确数值。
  • minorTicks定义了绘制次刻度的步长。
# 7.1.1.50. fontNumbers
property fontNumbers: TFontName;
1

  指定刻度显示的数字的字体系列。默认选项是Arial。

# 7.1.1.51. fontNumbersSize
property fontNumbersSize: Integer;
1

  设置刻度显示的数字的字体大小。

# 7.1.1.52. fontNumbersStyle
property fontNumbersStyle: string;
1

  设置刻度显示的数字的样式类型。字体的样式可以是normal、italic或者oblique其中之一。

# 7.1.1.53. fontNumbersWeight
property fontNumbersWeight: string;
1

  设置刻度显示的数字的字体粗细。字体的粗细可以是normal、bolder、lighter、100、200、300、400、500、600、700、800、900等值。

# 7.1.1.54. fontTitle
property fontTitle: TFontName;
1

  指定标题显示的内容的字体系列。默认选项是Arial。

# 7.1.1.55. fontTitleSize
property fontTitleSize: Integer;
1

  设置标题显示的字体大小。

# 7.1.1.56. fontTitleStyle
property fontTitleStyle: string;
1

  设置标题字体的样式类型。字体的样式可以是normal、italic或者oblique其中之一。

# 7.1.1.57. fontTitleWeight
property fontTitleWeight: string;
1

  设置标题显示的字体粗细。字体的粗细可以是normal、bolder、lighter、100、200、300、400、500、600、700、800、900等值。

# 7.1.1.58. fontUnit
property fontUnit: TFontName;
1

  指定计量单位栏标题显示的内容的字体系列。默认选项是Arial。

# 7.1.1.59. fontUnitSize
property fontUnitSize: Integer;
1

  设置计量单位栏标题显示的字体大小。

# 7.1.1.60. fontUnitStyle
property fontUnitStyle: string;
1

  设置计量单位栏标题字体的样式类型。字体的样式可以是normal、italic或者oblique其中之一。

# 7.1.1.61. fontUnitWeight
property fontUnitWeight: string;
1

  设置计量单位栏标题显示的字体粗细。字体的粗细可以是normal、bolder、lighter、100、200、300、400、500、600、700、800、900等值。

# 7.1.1.62. fontValue
property fontValue: TFontName;
1

  指定数值显示的内容的字体系列。默认选项是Arial。

# 7.1.1.63. fontValueSize
property fontValueSize: Integer;
1

  设置数值显示栏显示的字体大小。

# 7.1.1.64. fontValueStyle
property fontValueStyle: string;
1

  设置数值显示栏显示的字体的样式类型。字体的样式可以是normal、italic或者oblique其中之一。

# 7.1.1.65. fontValueWeight
property fontValueWeight: string;
1

  设置数值显示栏显示的字体粗细。字体的粗细可以是normal、bolder、lighter、100、200、300、400、500、600、700、800、900等值。

# 7.1.1.66. height
property height: Integer;
1

  设置仪表盘显示区域的像素高度。

# 7.1.1.67. highlights
property highlights: TStrings;
1

  此属性用于设置根据刻度配置的高亮区域的颜色信息，每个高亮的对象会定义一个区域，从一个值到另一个值并使用给定的颜色进行着色，示例如下。

{ from: number, to: number, color: string }
1
# 7.1.1.68. highlightsWidth
property highlightsWidth: Integer;
1

  设置高区域的像素宽度。

# 7.1.1.69. majorTicks
property majorTicks: TStrings;
1

  设置用于显示在刻度仪表位置上的数字或者字符串值的数组。例如[0, 20, 40, 60, 80, 100]。

# 7.1.1.70. majorTicksDec
property majorTicksDec: Integer;
1

  此属性定义了应该使用多少个位置来显示刻度数的小数部分。

# 7.1.1.71. majorTicksInt
property majorTicksInt: Integer;
1

  此属性定义了应该使用多少个数字位置来显示刻度数的整数部分。

# 7.1.1.72. maxValue
property maxValue: Integer;
1

  设置显示于仪表盘中的数字的最大值。

# 7.1.1.73. minorTicks
property minorTicks: string;
1

  设置在两个相邻的主刻度之间需要绘制多少个次刻度。

# 7.1.1.74. minValue
property minValue: Integer;
1

  设置显示于仪表盘中的数字的最小值。

# 7.1.1.75. needle
property needle: Boolean;
1

  设置仪表中是否显示指针等信息。

# 7.1.1.76. needleEnd
property needleEnd: Integer;
1

  设置指针的主位置的相对长度。

# 7.1.1.77. needleShadow
property needleShadow: Boolean;
1

  设置指针是否显示投影阴影。

# 7.1.1.78. needleSide
property needleSide: TSide;
1

  设置指针显示的位置，可选项为left(显示于左侧)、right(显示于右侧)、both(两侧同时显示)。

# 7.1.1.79. needleStart
property needleStart: Integer;
1

  设置指针的尾部的长度，以相对单位来表示。

# 7.1.1.80. needleType
property needleType: TneedleType;
1

  设置指针的类型，有arrow(箭头)、Line(线)可选。

# 7.1.1.81. needleWidth
property needleWidth: Integer;
1

  设置指针的最宽处的最大像素宽度。

# 7.1.1.82. numberSide
property numberSide: TSide;
1

  设置刻度数字显示的位置，可选项为left(显示于左侧)、right(显示于右侧)、both(两侧同时显示)。

# 7.1.1.83. numbersMargin
property numbersMargin: Integer;
1

  以相对单位定义刻度标签(数字)的间距，默认设置为1。

# 7.1.1.84. renderTo*
property renderTo: string;
1

  在 DOM 树中渲染目标。 它应该是一个画布元素，或者它在 DOM 树中的标识符。 当仪表作为 Web 组件注入页面时，不需要此选项。

# 7.1.1.85. strokeTicks
property strokeTicks: Boolean;
1

  设置是否显示用于串联刻度的边线，这仅是一个视觉的效果。

# 7.1.1.86. tickSide
property tickSide: TSide;
1

  设置刻度标记显示的位置，可选项为left(显示于左侧)、right(显示于右侧)、both(两侧同时显示)。

# 7.1.1.87. ticksPadding
property ticksPadding: Integer;
1

  设置用于以相对单位从条形图绘制刻度的填充。

# 7.1.1.88. ticksWidth
property ticksWidth: Integer;
1

  设置主刻度显示的宽度。以相对单位来进行定义。

# 7.1.1.89. ticksWidthMinor
property ticksWidthMinor: Integer;
1

  设置以相对单位设定的次刻度线的宽度。

# 7.1.1.90. title
property title: string;
1

  设置标题显示的内容。9.1.1.93.

# 7.1.1.91. units
property units: string;
1

  设置单位栏目显示的内容。

# 7.1.1.92. value
property value: Double;
1

  设置显示的数值。

# 7.1.1.93. valueBox
property valueBox: Boolean;
1

  设置是否显示数值框。

# 7.1.1.94. valueBoxBorderRadius
property valueBoxBorderRadius: Double;
1

  设置数值显示框的圆角的半径。

# 7.1.1.95. valueBoxStroke
property valueBoxStroke: Integer;
1

  设置值框元素的边线宽度，以相对数值来表示。

# 7.1.1.96. valueBoxWidth
property valueBoxWidth: Integer;
1

  设置值显示框的宽度，如果其中显示的值的宽度大于设定的宽度，则将会按照值的宽度进行缩放。

# 7.1.1.97. valueDec
property valueDec: Integer;
1

  设置使用多少位置来显示值的小数部分。

# 7.1.1.98. valueInt
property valueInt: Integer;
1

  设置使用多少位置来显示值的整数部分。

# 7.1.1.99. valueText
property valueText: string;
1

  设置数值框中要显示的文本而不是当前显示的值。当需要在数值框中显示不同的文本时会有用。

# 7.1.1.100. valueTextShadow
property valueTextShadow: Boolean;
1

  设置是否绘制文本的阴影。

# 7.1.1.101. width
property width: Integer;
1

  设置控件显示的像素宽度。

# 7.2. 方法

# 7.2.1. Init

procedure Init;
1

  设置控件的初始化显示。

# 8. TUgAppRadialGauge

  组件显示为一个仪表盘，包含了指针仪表盘中的常用功能。

# 8.1. 属性

# 8.1.1. Options

  设置仪表盘的显示属性的选项。

# 8.1.1.1. animatedValue
property animatedValue: Boolean;
1

  设置仪表动画运行期间是否连续地更新仪表中显示的值。 如果此项被设定为False，会立即显示翻转仪表值，动画将仅在仪表指针或进度条上可视化运行。

# 8.1.1.2. animateOnInit
property animateOnInit: Boolean;
1

  设置仪表在初始绘制时是否显示指针或数值的动画效果。

# 8.1.1.3. animation
property animation: Boolean;
1

  此属性是仪表控件动画效果的设置总开关，当此项被设置为False，不管其他的相关动画属性如何设置，仪表均不会显示任何效果。

# 8.1.1.4. animationDuration
property animationDuration: Integer;
1

  设定动画效果的持续时间，单位是毫秒(ms)。

# 8.1.1.5. animationRule
property animationRule: TanimationRule;
1

  设置仪表的动画的运行效果性为。有以下的样式可选择。

名称 说明 图形示意
bounce 动画运行到指定的值时，会有类似弹跳的效果
cycle 动画的效果呈现为匀加速运动
linear 动画运行效果值的变化是线性的，即匀速运动
quad 起始时缓动，然后匀速运动，到动画快结束时减速
quint 与quad的效果相似，不同的是相比起始与结束时缓动的时间更长
debounce 显示的效果为bounce的反向
decycle 显示的效果为cycle的反向
delinear 显示的效果为linear的反向
dequad 显示的效果为quad的反向
dequint 显示的效果为quint的反向
# 8.1.1.6. animationTarget
property animationTarget: TanimationTarget;
1

  设置仪表的哪个部分使用动画效果，可以设置为needle或plate。needle表示为设置指针运动，plate表示为设置仪表盘运动。

# 8.1.1.7. barProgress
property barProgress: Boolean;
1

  设置是否在仪表盘上显示进度条相关的信息。

# 8.1.1.8. barShadow
property barShadow: Integer;
1

  设置进度条内部阴影的长度，默认值设置为0，表示不显示阴影效果。

# 8.1.1.9. barStartPosition
property barStartPosition: string;
1

  默认的设置为left，若设置为right，则将会从右侧开始作为起点。

# 8.1.1.10. barStrokeWidth
property barStrokeWidth: Integer;
1

  设置条形图的外框绘制的宽度，如果此项设置为0，则不绘制外框。

# 8.1.1.11. barWidth
property barWidth: Integer;
1

  设置进度条的宽度相对于仪表宽度的总百分比，其值被限制在0-50之间。

# 8.1.1.12. borderInnerWidth
property borderInnerWidth: Integer;
1

  指定内边框的宽度，以像素为单位，如果此项被设置为零，则不会绘制边框。

# 8.1.1.13. borderMiddleWidth
property borderMiddleWidth: Integer;
1

  指定中层边框的宽度，以像素为单位，如果此项被设置为零，则不会绘制边框。

# 8.1.1.14. borderOuterWidth
property borderOuterWidth: Integer;
1

  指定外层边框的宽度，以像素为单位，如果此项被设置为零，则不会绘制边框。

# 8.1.1.15. borders
property borders: Boolean
1

  设定边框是否在初始化时被绘制显示。

# 8.1.1.16. borderShadowWidth
property colorBorderShadowWidth: string;
1

  设置外边框的投影宽度，如果此项被设置为零，则将不会绘制阴影。

# 8.1.1.17. colorBar
property colorBar: TColor;
1

  设置条形图的背景的颜色。

# 8.1.1.18. colorBarProgress
property colorBarProgress: TColor;
1

  设置条形图进度条段的颜色。

# 8.1.1.19. colorBarShadow
property colorBarShadow: TColor;
1

  设置条形图的阴影的颜色。

# 8.1.1.20. colorBarStroke
property colorBarStroke: TColor;
1

  设置条形图外框的颜色。

# 8.1.1.21. colorBorderInner
property colorBorderInner: TColor;
1

  设置控件内边框的颜色。

# 8.1.1.22. colorBorderInnerEnd
property colorBorderInnerEnd: TColor;
1

  如果此项被设置颜色数据，则在控件内边框上将启用渐变颜色的效果。颜色会从colorBorderInner到colorBorderInnerEnd进行渐变。

# 8.1.1.23. colorBorderMiddle
property colorBorderMiddle: TColor;
1

  设置控件中层边框的颜色。

# 8.1.1.24. colorBorderMiddleEnd
property colorBorderMiddleEnd: TColor;
1

  如果此项被设置颜色数据，则在控件中层边框上将启用渐变颜色的效果。颜色会从colorBorderMiddle到colorBorderMiddleEnd进行渐变。

# 8.1.1.25. colorBorderOuter
property colorBorderOuter: TColor;
1

  设置控件外层边框的颜色。

# 8.1.1.26. colorBorderOuterEnd
property colorBorderOuterEnd: TColor;
1

  如果此项被设置颜色数据，则在控件外层边框上将启用渐变颜色的效果。颜色会从colorBorderOuter到colorBorderOuterEnd进行渐变。

# 8.1.1.27. colorBorderShadow
property colorBorderShadow: TColor;
1

  如果此项被设置，则会启用边框的阴影效果，阴影的颜色为设定的数值，如果不设置此项，则边框的阴影不会被绘制。

# 8.1.1.28. colorMajorTicks
property colorMajorTicks: TStrings;
1

  设置主刻度线的颜色，其可设置为一个数组，为每个主刻度线单独设置颜色。如果选项启用了strokeTicks，则数组中的第一种颜色将用于描边。

# 8.1.1.29. colorMinorTicks
property colorMinorTicks: TColor;
1

  设置次刻度线的颜色。

# 8.1.1.30. colorNeedle
property colorNeedle: TColor;
1

  设置指针的颜色。

# 8.1.1.31. colorNeedleCircleInner
property colorNeedleCircleInner: TColor;
1

  此项为仪表中间的的装饰元素的内部圆设定颜色。

# 8.1.1.32. colorNeedleCircleInnerEnd
property colorNeedleCircleInnerEnd: TColor;
1

  如果此项被设置，则在仪表中间的装饰元素的内部圆会被设定渐变颜色的效果。

# 8.1.1.33. colorNeedleCircleOuter
property colorNeedleCircleOuter: TColor;
1

  此项为仪表中间的的装饰元素的外部圆设定颜色。

# 8.1.1.34. colorNeedleCircleOuterEnd
property colorNeedleCircleOuterEnd: TColor;
1

  如果此项被设置，则在仪表中间的装饰元素的外部圆会被设定渐变颜色的效果。

# 8.1.1.35. colorNeedleEnd
property colorNeedleEnd: TColor;
1

  如果此项被设置，则表示指针部分使用渐变颜色填充，否则将表示纯色绘制。

# 8.1.1.36. colorNeedleShadowDown
property colorNeedleShadowDown: TColor;
1

  设置指针投影的颜色。

# 8.1.1.37. colorNeedleShadowUp
property colorNeedleShadowUp: TColor;
1

  设置指针的阴影颜色的上半部分。

# 8.1.1.38. colorNumbers
property colorNumbers: TColor;
1

  设定仪表盘刻度部分数字的文本颜色。

# 8.1.1.39. colorPlate
property colorPlate: TColor;
1

  设定仪表盘的背景颜色。

# 8.1.1.40. colorPlateEnd
property colorPlateEnd: TColor;
1

  如果当前选项被设置颜色，则会启用仪表盘背景的渐变颜色的效果，颜色会从colorPlate到colorPlateEnd实现渐变的效果。

# 8.1.1.41. colorStrokeTicks
property colorStrokeTicks: TColor;
1

  为所有刻度线定义静态颜色。默认设置下此项为空，如果设置为某个颜色值，将覆盖线条的主要刻度笔触颜色，但不会影响数字颜色。 如果 colorMinorTicks属性留空未设置，则此设置也会同步应用于次刻度。

# 8.1.1.42. colorTitle
property colorTitle: TColor;
1

  设置标题的颜色。

# 8.1.1.43. colorUnits
property colorUnits: TColor;
1

  设置单位显示栏位的颜色。

# 8.1.1.44. colorValueBoxBackground
property colorValueBoxBackground: TColor;
1

  设置数值显示框的背景颜色。

# 8.1.1.45. colorValueBoxRect
property colorValueBoxRect: TColor;
1

  设定数值显示框边框的颜色。

# 8.1.1.46. colorValueBoxRectEnd
property colorValueBoxRectEnd: TColor;
1

  如果此项有启用，则设定数值显示框边框的渐变颜色的效果。渐变的颜色从colorValueBoxRect到colorValueBoxRectEnd。

# 8.1.1.47. colorValueBoxShadow
property colorValueBoxShadow: TColor;
1

  设置数值显示框的阴影颜色。

# 8.1.1.48. colorValueText
property colorValueText: TColor;
1

  设置数值显示的颜色。

# 8.1.1.49. colorValueTextShadow
property colorValueTextShadow: TColor;
1

  设置数值显示文本的阴影颜色。

# 8.1.1.50. exactTicks
property exactTicks: Boolean;
1

  设置切换刻度的绘图模式，在默认情况下，此项设置为False，即按照以下方式绘制刻度：

  • 根据majorTicks数组定义多个长度相等的部分。
  • 根据minorTicks定义两个majorTicks之间绘制的刻度数。

  如果此项被设置为True，则按照以下方式来设置：

  • majorTicks数组用户定义绘制主刻度的精确数值。
  • minorTicks定义了绘制次刻度的步长。
# 8.1.1.51. fontNumbers
property fontNumbers: TFontName;
1

  指定刻度显示的数字的字体系列。默认选项是Arial。

# 8.1.1.52. fontNumbersSize
property fontNumbersSize: Integer;
1

  设置刻度显示的数字的字体大小。

# 8.1.1.53. fontNumbersStyle
property fontNumbersStyle: string;
1

  设置刻度显示的数字的样式类型。字体的样式可以是normal、italic或者oblique其中之一。

# 8.1.1.54. fontNumbersWeight
property fontNumbersWeight: string;
1

  设置刻度显示的数字的字体粗细。字体的粗细可以是normal、bolder、lighter、100、200、300、400、500、600、700、800、900等值。

# 8.1.1.55. fontTitle
property fontTitle: TFontName;
1

  指定标题显示的内容的字体系列。默认选项是Arial。

# 8.1.1.56. fontTitleSize
property fontTitleSize: Integer;
1

  设置标题显示的字体大小。

# 8.1.1.57. fontTitleStyle
property fontTitleStyle: string;
1

  设置标题字体的样式类型。字体的样式可以是normal、italic或者oblique其中之一。

# 8.1.1.58. fontTitleWeight
property fontTitleWeight: string;
1

  设置标题显示的字体粗细。字体的粗细可以是normal、bolder、lighter、100、200、300、400、500、600、700、800、900等值。

# 8.1.1.59. fontUnit
property fontUnit: TFontName;
1

  指定计量单位栏标题显示的内容的字体系列。默认选项是Arial。

# 8.1.1.60. fontUnitSize
property fontUnitSize: Integer;
1

  设置计量单位栏标题显示的字体大小。

# 8.1.1.61. fontUnitStyle
property fontUnitStyle: string;
1

  设置计量单位栏标题字体的样式类型。字体的样式可以是normal、italic或者oblique其中之一。

# 8.1.1.62. fontUnitWeight
property fontUnitWeight: string;
1

  设置计量单位栏标题显示的字体粗细。字体的粗细可以是normal、bolder、lighter、100、200、300、400、500、600、700、800、900等值。

# 8.1.1.63. fontValue
property fontValue: TFontName;
1

  指定数值显示的内容的字体系列。默认选项是Arial。

# 8.1.1.64. fontValueSize
property fontValueSize: Integer;
1

  设置数值显示栏显示的字体大小。

# 8.1.1.65. fontValueStyle
property fontValueStyle: string;
1

  设置数值显示栏显示的字体的样式类型。字体的样式可以是normal、italic或者oblique其中之一。

# 8.1.1.66. fontValueWeight
property fontValueWeight: string;
1

  设置数值显示栏显示的字体粗细。字体的粗细可以是normal、bolder、lighter、100、200、300、400、500、600、700、800、900等值。

# 8.1.1.67. height
property height: Integer;
1

  设置仪表盘显示区域的像素高度。

# 8.1.1.68. highlights
property highlights: TStrings;
1

  此属性用于设置根据刻度配置的高亮区域的颜色信息，每个高亮的对象会定义一个区域，从一个值到另一个值并使用给定的颜色进行着色，示例如下。

{ from: number, to: number, color: string }
1
# 8.1.1.69. highlightsLineCap
property highlightsLineCap: ThighlightsLineCap;
1

  设置高亮区域之间的衔接部分的现阶样式，有butt（柄状）、round(圆弧状)、square(方型)。

# 8.1.1.70. highlightsWidth
property highlightsWidth: Integer;
1

  设置高区域的像素宽度。

# 8.1.1.71. majorTicks
property majorTicks: TStrings;
1

  设置用于显示在刻度仪表位置上的数字或者字符串值的数组。例如[0, 20, 40, 60, 80, 100]。

# 8.1.1.72. majorTicksDec
property majorTicksDec: Integer;
1

  此属性定义了应该使用多少个位置来显示刻度数的小数部分。

# 8.1.1.73. majorTicksInt
property majorTicksInt: Integer;
1

  此属性定义了应该使用多少个数字位置来显示刻度数的整数部分。

# 8.1.1.74. maxValue
property maxValue: Integer;
1

  设置显示于仪表盘中的数字的最大值。

# 8.1.1.75. minorTicks
property minorTicks: string;
1

  设置在两个相邻的主刻度之间需要绘制多少个次刻度。

# 8.1.1.76. minValue
property minValue: Integer;
1

  设置显示于仪表盘中的数字的最小值。

# 8.1.1.77. needle
property needle: Boolean;
1

  设置仪表中是否显示指针等信息。

# 8.1.1.78. needleCircleInner
property needleCircleInner: Boolean;
1

  设置是否显示指针的装饰内圆元素。

# 8.1.1.79. needleCircleOuter
property needleCircleOuter: Boolean;
1

  设置是否显示指针的装饰外圆元素。

# 8.1.1.80. needleCircleSize
property needleCircleSize: Integer;
1

  以相对单位设置仪表的装饰圆元素的大小。

# 8.1.1.81. needleEnd
property needleEnd: Integer;
1

  设置指针的主位置的相对长度。

# 8.1.1.82. needleShadow
property needleShadow: Boolean;
1

  设置指针是否显示投影阴影。

# 8.1.1.83. needleStart
property needleStart: Integer;
1

  设置指针的尾部的长度，以相对单位来表示。

# 8.1.1.84. needleType
property needleType: TneedleType;
1

  设置指针的类型，有arrow(箭头)、Line(线)可选。

# 8.1.1.85. needleWidth
property needleWidth: Integer;
1

  设置指针的最宽处的最大像素宽度。

# 8.1.1.86. numbersMargin
property numbersMargin: Integer;
1

  以相对单位定义刻度标签(数字)的间距，默认设置为1。

# 8.1.1.87. renderTo*
property renderTo: string;
1

  在 DOM 树中渲染目标。 它应该是一个画布元素，或者它在 DOM 树中的标识符。 当仪表作为 Web 组件注入页面时，不需要此选项。

# 8.1.1.88. startAngle
property startAngle: Integer;
1

  设置刻度条开始的角度，默认为45度。

# 8.1.1.89. strokeTicks
property strokeTicks: Boolean;
1

  设置是否显示用于串联刻度的边线，这仅是一个视觉的效果。

# 8.1.1.90. ticksAngle
property ticksAngle: Integer;
1

  定义刻度条显示的最大覆盖角度，默认情况下此项被设置为270，如果此项被指定为360，则刻度条将填满整个圆。

# 8.1.1.91. title
property title: string;
1

  设置标题显示的内容。

# 8.1.1.92. units
property units: string;
1

  设置单位栏目显示的内容。

# 8.1.1.93. useMinPath
property useMinPath: Boolean;
1

  此项仅适用于具有完整360度刻度盘的径向仪表，如果将此类仪表设置为True，则会以最小的旋转路径旋转指针/仪表盘。

# 8.1.1.94. value
property value: Double;
1

  设置显示的数值。

# 8.1.1.95. valueBox
property valueBox: Boolean;
1

  设置是否显示数值框。

# 8.1.1.96. valueBoxBorderRadius
property valueBoxBorderRadius: Double;
1

  设置数值显示框的圆角的半径。

# 8.1.1.97. valueBoxStroke
property valueBoxStroke: Integer;
1

  设置值框元素的边线宽度，以相对数值来表示。

# 8.1.1.98. valueBoxWidth
property valueBoxWidth: Integer;
1

  设置值显示框的宽度，如果其中显示的值的宽度大于设定的宽度，则将会按照值的宽度进行缩放。

# 8.1.1.99. valueDec
property valueDec: Integer;
1

  设置使用多少位置来显示值的小数部分。

# 8.1.1.100. valueInt
property valueInt: Integer;
1

  设置使用多少位置来显示值的整数部分。

# 8.1.1.101. valueText
property valueText: string;
1

  设置数值框中要显示的文本而不是当前显示的值。当需要在数值框中显示不同的文本时会有用。

# 8.1.1.102. valueTextShadow
property valueTextShadow: Boolean;
1

  设置是否绘制文本的阴影。

# 8.1.1.103. width
property width: Integer;
1

  设置控件显示的像素宽度。

# 8.2. 方法

# 8.2.1. Init

procedure Init;
1

  设置控件的初始化显示。

# 9. TUgAppWaterTank

  该组件为槽罐页面显示的相关组件。可根据百分比来显示槽罐的页面的变化情况，具有动态显示的效果。

# 9.1. 属性

# 9.1.1. Options

  设置槽罐中的相关显示选项。

# 9.1.1.1. Color
property Color: TColor;
1

  设置槽罐中页面显示的颜色。可从颜色选择器中选择颜色，或者是自定义RGB来组合颜色。

# 9.1.1.2. CustomCSS
property CustomCSS: TStrings;
1

  设置槽罐显示的外观样式。

# 9.1.1.3. Height
property Height: Integer;
1

  设置显示区域的高度，以像素值为单位显示。

# 9.1.1.4. Level
property Level: Double;
1

  设置显示液面高度的百分比值，取值的范围在0-100之间。

# 9.1.1.5. Width
property Width: Integer;
1

  设置显示区域的宽度，以像素值为单位显示。

# 9.2. 方法

# 9.2.1. Init

procedure Init;
1

  设置控件的初始化显示。

# 10. TUgAppWidgetTemp

  该组件显示为一个温度计。其中的温度数值的最大值与最小值，以及温度计液位显示的数值大小均可进行设置。

# 10.1. 属性

# 10.1.1. TempOptions

property TempOptions: TTempOptions;
1

  仪表的相关设置选项。

名称 说明
BorderColor 控件边缘的颜色
BorderWidth 控件边缘的宽度
FillColor 内部填充的颜色
LabelColor 刻度标签的颜色
LabelSize 刻度标签的大小
MaxTemp 显示温度的最大值
MinTemp 显示温度的最小值
ReplaceHtml 是否单独使用页面进行显示
ShowLabel 是否显示刻度标签
ShowScale 是否显示刻度
Value 显示的数值
ValueUnit 显示数值的单位

# 11. TUgAppWidgetProgress

  该组件显示为进度条。可通过设置选项WidgetOptions中的项目，来设定显示的最大值，最小值以及当前显示的进度数值。可为不同的进度阶段设定不同的颜色，实现更好的自定义效果。

# 11.1. 属性

属性 说明
WidgetOptions 仪表设置的相关选项
WidgetRanges 仪表数值范围显示的样式内容

# 11.1.1. ProcessOptions

property WidgetOptions: TWidgetOptions;
1

  该项目下包含了仪表设置的相关内容。

名称 说明
AnimationDuration 动画效果的持续时间，单位为ms
ColorRange 是否显示颜色分区，如果为True则按照WidgetRanges中的样式进行显示
Disabled 是否响应操作
Layout 设置进度条显示的起始方向，normal为从左向右，reverse为从右向左
Max 进度条限制的最大值
Min 进度条限制的最小值
Orientation 进度条进度显示的方向，horizontal表示为水平方向显示，vertical表示为竖直方向显示
ShowText 是否显示进度的百分比数值
Template 颜色的配色模板，可根据需要选择
Theme 进度条的主题样式，可根据需要选择
Value 进度条的数值
UgWidgetProcess01.WidgetOptions.Value := 98;
1

# 11.1.2. WidgetRanges

property WidgetRanges: TStrings;
1

  该项中包含了分区颜色的样式json内容。默认的样式如下所示。

colorRanges: [{
  stop: 20,
  color: "#33b5e5"13.2. }, {
  stop: 50,
  color: "#98ca00"13.2.1. }, {
  stop: 80,
  color: "#ff4444"
}, {
  stop: 100,
  color: "#aa66cc"
}],
1
2
3
4
5
6
7
8
9
10
11
制图控件
数据库控件

← 数据库控件→

Copyright © 2021-2025 爱招飞IsoFace | ALL Rights Reserved