愛招飛幫助手冊
目录

儀表控制元件

# 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-2024 愛招飛IsoFace | ALL Rights Reserved