儀表展示(WEB)
# FastWeb之儀表展示(WEB)
# 1. 說明
通過FastWeb的控制元件實現儀表展示的功能。
通過本範例學習，可以掌握儀表的外觀的設定方式，實現儀表展示的相關功能。
# 2. 設計明細
開啟FastWeb設計器，分別加入下插圖之控制元件。或者點選左上角的[匯入]選擇模板檔案來打開對應模板。
1：TUgWaterTank元件，控制元件名稱為UgWaterTank01。
2：TUgRadialGauge元件，控制元件名稱為UgRadialGauge01。
3：TUgRadialGauge元件，控制元件名稱為UgRadialGauge02。
4：TUgRadialGauge元件，控制元件名稱為UgRadialGauge03。
5：TUgLinearGauge元件，控制元件名稱為UgLinearGauge01。
6：TUgLinearGauge元件，控制元件名稱為UgLinearGauge02。
7：TUgLinearGauge元件，控制元件名稱為UgLinearGauge03。
8：TUgLinearGauge元件，控制元件名稱為UgLinearGauge04。
9：TUgSwitch3D元件，控制元件名稱為UgSwitch3D01。
10：TUgMeterLed元件，控制元件名稱為UgMeterLed01。
11：TUgMeterTank元件，控制元件名稱為UgMeterTank01。
12：TUgMeterThermo元件，控制元件名稱為UgMeterThermo01。
13：TUgMeterReadout元件，控制元件名稱為UgMeterReadout01。
14：TUgMeterGauge元件，控制元件名稱為UgMeterGauge01。
15：TUgSwitchRod元件，控制元件名稱為UgSwitchRod01。
16：TUgTimer元件，控制元件名稱為UgTimer01。
17：TUgLabel元件，控制元件名稱為UgLabel01。
18：TUgLabel元件，控制元件名稱為UgLabel02。
19：TUgLabel元件，控制元件名稱為UgLabel03。
20：TUgLabel元件，控制元件名稱為UgLabel04。
21：TUgLabel元件，控制元件名稱為UgLabel05。
22：TUgLabel元件，控制元件名稱為UgLabel06。
23：TUgLabel元件，控制元件名稱為UgLabel07。
24：TUgLabel元件，控制元件名稱為UgLabel08。
25：TUgLabel元件，控制元件名稱為UgLabel09。
26：TUgLabel元件，控制元件名稱為UgLabel12。
27：TUgLabel元件，控制元件名稱為UgLabel13。
28：TUgLabel元件，控制元件名稱為UgLabel14。
29：TUgLabel元件，控制元件名稱為UgLabel15。
30：TUgLabel元件，控制元件名稱為UgLabel16。
31：TUgLabel元件，控制元件名稱為UgLabel11。
UgWebRunFrame屬性設定
Height：設定界面顯示的畫素高度，設定為768。Width：設定界面顯示的畫素寬度，設定為1024。
17 UgLabel01屬性設定
Caption：設定顯示的字幕資訊，設定為UgWaterTank01。
18 UgLabel02屬性設定
Caption：設定顯示的字幕資訊，設定為UgRadialGauge01。
19 UgLabel03屬性設定
Caption：設定顯示的字幕資訊，設定為UgRadialGauge02。
20 UgLabel04屬性設定
Caption：設定顯示的字幕資訊，設定為UgRadialGauge03。
21 UgLabel05屬性設定
Caption：設定顯示的字幕資訊，設定為UgLinealGauge01。
22 UgLabel06屬性設定
Caption：設定顯示的字幕資訊，設定為UgLinealGauge02。
23 UgLabel07屬性設定
Caption：設定顯示的字幕資訊，設定為UgLinealGauge03。
24 UgLabel08屬性設定
Caption：設定顯示的字幕資訊，設定為UgLinealGauge04。
25 UgLabel09屬性設定
Caption：設定顯示的字幕資訊，設定為UgSwitch3D01。
26 UgLabel12屬性設定
Caption：設定顯示的字幕資訊，設定為UgMeterLed01。
27 UgLabel13屬性設定
Caption：設定顯示的字幕資訊，設定為UgMeterTank01。
28 UgLabel14屬性設定
Caption：設定顯示的字幕資訊，設定為UgMeterThermo01。
29 UgLabel15屬性設定
Caption：設定顯示的字幕資訊，設定為UgMeterReadout01。
30 UgLabel16屬性設定
Caption：設定顯示的字幕資訊，設定為UgMeterGauge01。
31 UgLabel11屬性設定
Caption：設定顯示的字幕資訊，設定為UgSwitchRodV01。
# 3. 指令碼設計
點選指令碼設計界面右下角的按鈕，切換至單元選擇界面，勾選需要使用的單元。該程式無需引用額外的指令碼。
# 3.1. 指令碼初始設定
該程式的指令碼初始設定包括儀表的通用外觀的設定項。
//JScript
function CompassInit()
//UgRadialGauge Used as Compass
{
UgRadialGauge02.Options.minValue = 0;
UgRadialGauge02.Options.maxValue = 360;
UgRadialGauge02.Options.majorTicks.Text = "[\"N\",\"NE\",\"E\",\"SE\",\"S\",\"SW\",\"W\",\"NW\",\"N\"]";
UgRadialGauge02.Options.minorTicks = "22";
UgRadialGauge02.Options.ticksAngle = 360;
UgRadialGauge02.Options.startAngle = 180;
UgRadialGauge02.Options.strokeTicks = False;
UgRadialGauge02.Options.highlights.Text = "false";
UgRadialGauge02.Options.colorPlate = StrToInt("$003A0300");
UgRadialGauge02.Options.colorMajorTicks.Text = "#F5F5F5";
UgRadialGauge02.Options.colorMinorTicks = StrToInt("$00DDD000");
UgRadialGauge02.Options.colorNumbers = StrToInt("$00CCC000");
UgRadialGauge02.Options.colorNeedle = StrToInt("$008080F0");
UgRadialGauge02.Options.colorNeedleEnd = StrToInt("$007AA0FF");
UgRadialGauge02.Options.valueBox = False;
UgRadialGauge02.Options.valueTextShadow = False;
UgRadialGauge02.Options.colorNeedleCircleInner = StrToInt("$00FFF000");
UgRadialGauge02.Options.colorNeedleCircleOuter = StrToInt("$00CCC000");
UgRadialGauge02.Options.needleCircleSize = 15;
UgRadialGauge02.Options.needleCircleOuter = False;
UgRadialGauge02.Options.animationRule = linear;
UgRadialGauge02.Options.needleType = line;
UgRadialGauge02.Options.needleStart = 75;
UgRadialGauge02.Options.needleEnd = 99;
UgRadialGauge02.Options.needleWidth = 3;
UgRadialGauge02.Options.borders = True;
UgRadialGauge02.Options.borderInnerWidth = 0;
UgRadialGauge02.Options.borderMiddleWidth = 0;
UgRadialGauge02.Options.borderOuterWidth = 10;
UgRadialGauge02.Options.colorBorderOuter = StrToInt("$00CCC000");
UgRadialGauge02.Options.colorBorderOuterEnd = StrToInt("$00CCC000");
UgRadialGauge02.Options.colorNeedleShadowDown = StrToInt("$00222000");
UgRadialGauge02.Options.animationTarget = plate;
UgRadialGauge02.Options.units = "s";
UgRadialGauge02.Options.title = "DIRECTION";
UgRadialGauge02.Options.fontTitleSize = 19;
UgRadialGauge02.Options.colorTitle = StrToInt("$00F5F5F5");
UgRadialGauge02.Options.animationDuration = 1500;
UgRadialGauge02.Init;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
//PasScript
Procedure CompassInit; //指南針
//UgRadialGauge Used as Compass
Begin
UgRadialGauge02.Options.minValue := 0;
UgRadialGauge02.Options.maxValue := 360;
UgRadialGauge02.Options.majorTicks.Text := '["N","NE","E","SE","S","SW","W","NW","N"]';
UgRadialGauge02.Options.minorTicks := '22';
UgRadialGauge02.Options.ticksAngle := 360;
UgRadialGauge02.Options.startAngle := 180;
UgRadialGauge02.Options.strokeTicks := False;
UgRadialGauge02.Options.highlights.Text := 'false';
UgRadialGauge02.Options.colorPlate := $003A0300;
UgRadialGauge02.Options.colorMajorTicks.Text := '#F5F5F5';
UgRadialGauge02.Options.colorMinorTicks := $00DDD000;
UgRadialGauge02.Options.colorNumbers := $00CCC000;
UgRadialGauge02.Options.colorNeedle := $008080F0;
UgRadialGauge02.Options.colorNeedleEnd := $007AA0FF;
UgRadialGauge02.Options.valueBox := False;
UgRadialGauge02.Options.valueTextShadow := False;
UgRadialGauge02.Options.colorNeedleCircleInner := $00FFF000;
UgRadialGauge02.Options.colorNeedleCircleOuter := $00CCC000;
UgRadialGauge02.Options.needleCircleSize := 15;
UgRadialGauge02.Options.needleCircleOuter := False;
UgRadialGauge02.Options.animationRule := linear;
UgRadialGauge02.Options.needleType := line;
UgRadialGauge02.Options.needleStart := 75;
UgRadialGauge02.Options.needleEnd := 99;
UgRadialGauge02.Options.needleWidth := 3;
UgRadialGauge02.Options.borders := True;
UgRadialGauge02.Options.borderInnerWidth := 0;
UgRadialGauge02.Options.borderMiddleWidth := 0;
UgRadialGauge02.Options.borderOuterWidth := 10;
UgRadialGauge02.Options.colorBorderOuter := $00CCC000;
UgRadialGauge02.Options.colorBorderOuterEnd := $00CCC000;
UgRadialGauge02.Options.colorNeedleShadowDown := $00222000;
UgRadialGauge02.Options.animationTarget := plate;
UgRadialGauge02.Options.units := 's';
UgRadialGauge02.Options.title := 'DIRECTION';
UgRadialGauge02.Options.fontTitleSize := 19;
UgRadialGauge02.Options.colorTitle := $00F5F5F5;
UgRadialGauge02.Options.animationDuration := 1500;
UgRadialGauge02.Init;
End;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
// Make sure to add code blocks to your code group
//JScript
function HalfGaugeInit()
//半圓儀表外觀設定顯示
{
UgRadialGauge03.Options.units = "Km/h";
UgRadialGauge03.Options.minValue = 0;
UgRadialGauge03.Options.startAngle = 90;
UgRadialGauge03.Options.ticksAngle = 180;
UgRadialGauge03.Options.valueBox = False;
UgRadialGauge03.Options.maxValue = 220;
UgRadialGauge03.Options.majorTicks.Text = "[\"0\",\"20\",\"40\",\"60\",\"80\",\"100\",\"120\",\"140\",\"160\",\"180\",\"200\",\"220\"]";
UgRadialGauge03.Options.minorTicks = "2";
UgRadialGauge03.Options.strokeTicks = True;
UgRadialGauge03.Options.highlights.Text = "[{\"from\": 160, \"to\": 220, \"color\": \"rgba(200, 50, 50, .75)\"}]";
//UgRadialGauge03.Options.colorPlate = StrToInt("$00FFF000");
UgRadialGauge03.Options.borderShadowWidth = 0;
UgRadialGauge03.Options.borders = False;
UgRadialGauge03.Options.needleType = arrow;
UgRadialGauge03.Options.needleWidth = 2;
UgRadialGauge03.Options.needleCircleSize = 7;
UgRadialGauge03.Options.needleCircleOuter = True;
UgRadialGauge03.Options.needleCircleInner = False;
UgRadialGauge03.Options.animationDuration = 1500;
UgRadialGauge03.Options.animationRule = linear;
UgRadialGauge03.Init;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//PasScript
Procedure HalfGaugeInit;
//半圓儀表外觀設定顯示
Begin
UgRadialGauge03.Options.units := 'Km/h';
UgRadialGauge03.Options.minValue := 0;
UgRadialGauge03.Options.startAngle := 90;
UgRadialGauge03.Options.ticksAngle := 180;
UgRadialGauge03.Options.valueBox := False;
UgRadialGauge03.Options.maxValue := 220;
UgRadialGauge03.Options.majorTicks.Text := '["0","20","40","60","80","100","120","140","160","180","200","220"]';
UgRadialGauge03.Options.minorTicks := '2';
UgRadialGauge03.Options.strokeTicks := True;
UgRadialGauge03.Options.highlights.Text := '[{"from": 160, "to": 220, "color": "rgba(200, 50, 50, .75)"}]';
//UgRadialGauge03.Options.colorPlate := $00FFF000;
UgRadialGauge03.Options.borderShadowWidth := 0;
UgRadialGauge03.Options.borders := False;
UgRadialGauge03.Options.needleType := arrow;
UgRadialGauge03.Options.needleWidth := 2;
UgRadialGauge03.Options.needleCircleSize := 7;
UgRadialGauge03.Options.needleCircleOuter := True;
UgRadialGauge03.Options.needleCircleInner := False;
UgRadialGauge03.Options.animationDuration := 1500;
UgRadialGauge03.Options.animationRule := linear;
UgRadialGauge03.Init;
End;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// Make sure to add code blocks to your code group
//JScript
function linearGauge02Init()
//橫向儀表展示
{
UgLinearGauge02.Options.units = "℃";
UgLinearGauge02.Options.title = "Temperature";
UgLinearGauge02.Options.minValue = -50;
UgLinearGauge02.Options.maxValue = 50;
UgLinearGauge02.Options.majorTicks.Text = "[-50,-40,-30,-20,-10,0,10,20,30,40,50]";
UgLinearGauge02.Options.minorTicks = "5";
UgLinearGauge02.Options.strokeTicks = True;
UgLinearGauge02.Options.ticksWidth = 15;
UgLinearGauge02.Options.ticksWidthMinor = 7;
UgLinearGauge02.Options.highlights.Text = "[{\"from\": -50, \"to\": 0, \"color\": \"rgba(0,0, 255, .3)\"},{\"from\": 0, \"to\": 50, \"color\": \"rgba(255, 0, 0, .3)\"}]";
UgLinearGauge02.Options.colorMajorTicks.Text = "#FFE66A";
UgLinearGauge02.Options.colorMinorTicks = StrToInt("$00FEE66A");
UgLinearGauge02.Options.colorTitle = StrToInt("$00EEE000");
UgLinearGauge02.Options.colorUnits = StrToInt("$00CCC000");
UgLinearGauge02.Options.colorNumbers = StrToInt("$00EEE000");
UgLinearGauge02.Options.colorPlate = StrToInt("$002465C0");
UgLinearGauge02.Options.colorPlateEnd = StrToInt("$00327AC0");
UgLinearGauge02.Options.borderShadowWidth = 0;
UgLinearGauge02.Options.borders = False;
UgLinearGauge02.Options.borderRadius = 10;
UgLinearGauge02.Options.needleType = arrow;
UgLinearGauge02.Options.needleWidth = 3;
UgLinearGauge02.Options.animationDuration = 1500;
UgLinearGauge02.Options.animationRule = linear;
UgLinearGauge02.Options.colorNeedle = StrToInt("$00222000");
UgLinearGauge02.Options.colorBarProgress = StrToInt("$00327AC0");
UgLinearGauge02.Options.colorBar = StrToInt("$00F5F5F5");
UgLinearGauge02.Options.barStrokeWidth = 0;
UgLinearGauge02.Options.barWidth = 8;
UgLinearGauge02.Options.barBeginCircle = 0;
UgLinearGauge02.Init;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
//PasScript
Procedure linearGauge02Init;
//橫向儀表展示
Begin
UgLinearGauge02.Options.units := '℃';
UgLinearGauge02.Options.title := 'Temperature';
UgLinearGauge02.Options.minValue := -50;
UgLinearGauge02.Options.maxValue := 50;
UgLinearGauge02.Options.majorTicks.Text := '[-50,-40,-30,-20,-10,0,10,20,30,40,50]';
UgLinearGauge02.Options.minorTicks := '5';
UgLinearGauge02.Options.strokeTicks := True;
UgLinearGauge02.Options.ticksWidth := 15;
UgLinearGauge02.Options.ticksWidthMinor := 7;
UgLinearGauge02.Options.highlights.Text := '[{"from": -50, "to": 0, "color": "rgba(0,0, 255, .3)"},{"from": 0, "to": 50, "color": "rgba(255, 0, 0, .3)"}]';
UgLinearGauge02.Options.colorMajorTicks.Text := '#FFE66A';
UgLinearGauge02.Options.colorMinorTicks := $00FEE66A;
UgLinearGauge02.Options.colorTitle := $00EEE000;
UgLinearGauge02.Options.colorUnits := $00CCC000;
UgLinearGauge02.Options.colorNumbers := $00EEE000;
UgLinearGauge02.Options.colorPlate := $002465C0;
UgLinearGauge02.Options.colorPlateEnd := $00327AC0;
UgLinearGauge02.Options.borderShadowWidth := 0;
UgLinearGauge02.Options.borders := False;
UgLinearGauge02.Options.borderRadius := 10;
UgLinearGauge02.Options.needleType := arrow;
UgLinearGauge02.Options.needleWidth := 3;
UgLinearGauge02.Options.animationDuration := 1500;
UgLinearGauge02.Options.animationRule := linear;
UgLinearGauge02.Options.colorNeedle := $00222000;
UgLinearGauge02.Options.colorBarProgress := $00327AC0;
UgLinearGauge02.Options.colorBar := $00F5F5F5;
UgLinearGauge02.Options.barStrokeWidth := 0;
UgLinearGauge02.Options.barWidth := 8;
UgLinearGauge02.Options.barBeginCircle := 0;
UgLinearGauge02.Init;
End;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
// Make sure to add code blocks to your code group
//JScript
function linearGauge03Init()
//豎向儀表1的顯示
{
UgLinearGauge03.Options.units = "℃";
UgLinearGauge03.Options.title = "Temperature";
UgLinearGauge03.Options.minValue = 0;
UgLinearGauge03.Options.maxValue = 220;
UgLinearGauge03.Options.majorTicks.Text = "[0,20,40,60,80,100,120,140,160,180,200,220]";
UgLinearGauge03.Options.minorTicks = "2";
UgLinearGauge03.Options.strokeTicks = True;
UgLinearGauge03.Options.highlights.Text = "[{\"from\": 100, \"to\": 220, \"color\": \"rgba(200, 50, 50, .75)\"}]";
//UgLinearGauge03.Options.colorPlate = StrToInt("$00FFF000");
UgLinearGauge03.Options.borderShadowWidth = 0;
UgLinearGauge03.Options.borders = False;
UgLinearGauge03.Options.needleType = arrow;
UgLinearGauge03.Options.needleWidth = 2;
UgLinearGauge03.Options.animationDuration = 1500;
UgLinearGauge03.Options.animationRule = linear;
UgLinearGauge03.Options.tickSide = left;
UgLinearGauge03.Options.numberSide = left;
UgLinearGauge03.Options.needleSide = left;
UgLinearGauge03.Options.barStrokeWidth = 7;
UgLinearGauge03.Options.barBeginCircle = 0;
UgLinearGauge03.Options.value = 75;
UgLinearGauge03.Init;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//PasScript
procedure linearGauge03Init;
//豎向儀表1的顯示
Begin
UgLinearGauge03.Options.units := '℃';
UgLinearGauge03.Options.title := 'Temperature';
UgLinearGauge03.Options.minValue := 0;
UgLinearGauge03.Options.maxValue := 220;
UgLinearGauge03.Options.majorTicks.Text := '[0,20,40,60,80,100,120,140,160,180,200,220]';
UgLinearGauge03.Options.minorTicks := '2';
UgLinearGauge03.Options.strokeTicks := True;
UgLinearGauge03.Options.highlights.Text := '[{"from": 100, "to": 220, "color": "rgba(200, 50, 50, .75)"}]';
//UgLinearGauge03.Options.colorPlate := $00FFF000;
UgLinearGauge03.Options.borderShadowWidth := 0;
UgLinearGauge03.Options.borders := False;
UgLinearGauge03.Options.needleType := arrow;
UgLinearGauge03.Options.needleWidth := 2;
UgLinearGauge03.Options.animationDuration := 1500;
UgLinearGauge03.Options.animationRule := linear;
UgLinearGauge03.Options.tickSide := left;
UgLinearGauge03.Options.numberSide := left;
UgLinearGauge03.Options.needleSide := left;
UgLinearGauge03.Options.barStrokeWidth := 7;
UgLinearGauge03.Options.barBeginCircle := 0;
UgLinearGauge03.Options.value := 75;
UgLinearGauge03.Init;
End;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// Make sure to add code blocks to your code group
//JScript
function linearGauge04Init()
//豎向儀表2的展示
{
UgLinearGauge04.Options.units = "℃";
UgLinearGauge04.Options.title = "Temperature";
UgLinearGauge04.Options.minValue = 0;
UgLinearGauge04.Options.valueBox = False;
UgLinearGauge04.Options.maxValue = 220;
UgLinearGauge04.Options.majorTicks.Text = "[0,20,40,60,80,100,120,140,160,180,200,220]";
UgLinearGauge04.Options.minorTicks = "2";
UgLinearGauge04.Options.strokeTicks = True;
UgLinearGauge04.Options.highlights.Text = "[{\"from\": 100, \"to\": 220, \"color\": \"rgba(200, 50, 50, .75)\"}]";
//UgLinearGauge04.Options.colorPlate = StrToInt("$00FFF000");
UgLinearGauge04.Options.borderShadowWidth = 0;
UgLinearGauge04.Options.borders = False;
UgLinearGauge04.Options.needleType = arrow;
UgLinearGauge04.Options.needleWidth = 2;
UgLinearGauge04.Options.animationDuration = 1500;
UgLinearGauge04.Options.animationRule = linear;
UgLinearGauge04.Options.barWidth = 10;
UgLinearGauge04.Options.value = 35;
UgLinearGauge04.Init;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//PasScript
Procedure linearGauge04Init;
//豎向儀表2的展示
Begin
UgLinearGauge04.Options.units := '℃';
UgLinearGauge04.Options.title := 'Temperature';
UgLinearGauge04.Options.minValue := 0;
UgLinearGauge04.Options.valueBox := False;
UgLinearGauge04.Options.maxValue := 220;
UgLinearGauge04.Options.majorTicks.Text := '[0,20,40,60,80,100,120,140,160,180,200,220]';
UgLinearGauge04.Options.minorTicks := '2';
UgLinearGauge04.Options.strokeTicks := True;
UgLinearGauge04.Options.highlights.Text := '[{"from": 100, "to": 220, "color": "rgba(200, 50, 50, .75)"}]';
//UgLinearGauge04.Options.colorPlate := $00FFF000;
UgLinearGauge04.Options.borderShadowWidth := 0;
UgLinearGauge04.Options.borders := False;
UgLinearGauge04.Options.needleType := arrow;
UgLinearGauge04.Options.needleWidth := 2;
UgLinearGauge04.Options.animationDuration := 1500;
UgLinearGauge04.Options.animationRule := linear;
UgLinearGauge04.Options.barWidth := 10;
UgLinearGauge04.Options.value := 35;
UgLinearGauge04.Init;
End;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// Make sure to add code blocks to your code group
初始化顯示。
//JScript
function UgWebRunFrameOnAfterRunScript(sender)
{
CompassInit();
HalfGaugeInit();
linearGauge02Init();
linearGauge03Init();
linearGauge04Init();
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
//PasScript
Begin
CompassInit;
HalfGaugeInit;
linearGauge02Init;
linearGauge03Init;
linearGauge04Init;
End.
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
// Make sure to add code blocks to your code group
# 3.2. 事件設定
- 16：UgTimer01-OnTimer事件
定時器的定時觸發事件，用於重新整理儀表顯示的隨機數值。
//JScript
function UgTimer01OnTimer(sender)
//定時器的觸發事件,隨機顯示
{
UgWaterTank01.Options.Level = RandomRange(0,100);
UgRadialGauge01.Options.value = RandomRange(0,100);
UgRadialGauge02.Options.value = RandomRange(0,360);
UgRadialGauge03.Options.value = RandomRange(0,220);
UgLinearGauge01.Options.value = RandomRange(0,100);
UgLinearGauge02.Options.value = RandomRange(-50,50);
UgLinearGauge03.Options.value = RandomRange(0,220);
UgLinearGauge04.Options.value = RandomRange(0,220);
UgMeterTank01.Value = RandomRange(0,100);
UgMeterThermo01.Value = RandomRange(0,100);
UgMeterGauge01.Value = RandomRange(0,100);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//PasScript
procedure UgTimer01OnTimer(sender: tobject);
//定時器的觸發事件,隨機顯示
begin
UgWaterTank01.Options.Level := RandomRange(0,100);
UgRadialGauge01.Options.value := RandomRange(0,100);
UgRadialGauge02.Options.value := RandomRange(0,360);
UgRadialGauge03.Options.value := RandomRange(0,220);
UgLinearGauge01.Options.value := RandomRange(0,100);
UgLinearGauge02.Options.value := RandomRange(-50,50);
UgLinearGauge03.Options.value := RandomRange(0,220);
UgLinearGauge04.Options.value := RandomRange(0,220);
UgMeterTank01.Value := RandomRange(0,100);
UgMeterThermo01.Value := RandomRange(0,100);
UgMeterGauge01.Value := RandomRange(0,100);
end;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// Make sure to add code blocks to your code group
- 9 UgSwitch3D01-OnSwitch事件
同步更新開關狀態的顯示。
//JScript
function UgSwitch3D01OnSwitch(sender)
//切換狀態顯示
{
if (UgSwitch3D01.Checked)
{
UgMeterLed01.State = True;
//UgSwitchRod01.Checked = True;
UgSwitchRodV01.Checked = True;
UgMeterReadOut01.Value = "True";
}
else
{
UgMeterLed01.State = False;
//UgSwitchRod01.Checked = False;
UgSwitchRodV01.Checked = False;
UgMeterReadOut01.Value = "False";
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//PasScript
procedure UgSwitch3D01OnSwitch(sender: tobject);
//切換狀態顯示
begin
if UgSwitch3D01.Checked Then
Begin
UgMeterLed01.State := True;
UgSwitchRodV01.Checked := True;
UgMeterReadOut01.Value := 'True';
End
Else
Begin
UgMeterLed01.State := False;
UgSwitchRodV01.Checked := False;
UgMeterReadOut01.Value := 'False';
End;
end;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// Make sure to add code blocks to your code group
# 4. 運行結果
使用滑鼠在FastWeb功能表，點選[儲存至資料庫]按鈕，將其儲存至資料庫，點選[除錯運行]確認能夠正常打開。
儀表的讀數會隨著數值的變化而發生變化，同時點選開關按鈕可同步其餘的開關狀態的變化。