影像識別-視覺化控制元件(WEB)
# FastWeb之影像識別-視覺化控制元件(WEB)
# 1. 說明
通過ml5js的影像識別分類功能，輔助實現影像識別的相關功能。ml5js (opens new window)是基於tensorflow.js的深度學習框架，它安裝簡便，API簡單易懂，可直接在瀏覽器裡面運行，可作為輕量化的智能識別工具。此示例需要線上呼叫數據模型，且會呼叫攝像頭的相關許可權，故此處建議使用https來訪問FastWeb中的此示例。
通過本範例學習，可以掌握UgObjectDetect控制元件的使用方式，並通過攝像頭拍照以及圖片上傳兩種方式實現影像識別的相關功能。
使用此示例前，請先確保訪問FastWeb的客戶端能夠訪問網際網路的資源，此處使用的是線上的數據模型資源。
# 2. 設計明細
開啟FastWeb設計器，分別加入下插圖之控制元件。或者點選左上角的[匯入]選擇模板檔案來打開對應模板。
1：TUgLabel元件，控制元件名稱為UgLabel01。
2：TUgObjectDetect元件，控制元件名稱為UgObjectDetect01，此控制元件用於運行示例。
3：TUgFSButton元件，控制元件名稱為UgFSButton01。
4：TUgFSButton元件，控制元件名稱為UgFSButton02。
5：TUgFSButton元件，控制元件名稱為UgFSButton03。
TUgFileUploadButton元件，控制元件名稱為UgFileUploadButton01。
6：TUgFSButton元件，控制元件名稱為UgFSButton04。
7：TUgComboBox元件，控制元件名稱為UgComboBox01。
8：TUgMemo元件，控制元件名稱為UgMemo01。
9：TUgFSToast元件，控制元件名稱為UgFSToast01。
10：TUgIconClsList元件，控制元件名稱為UgIconClsLit01。
11：TUgTimer元件，控制元件名稱為UgTimer01。
TUgImage元件，控制元件名稱為UgImage02，此控制元件與UgWebCam01重疊，用於顯示拍照的相片。
TUgWebCam元件，控制元件名稱為UgWebCam01。此控制元件用於呼叫相機進行拍攝，但是控制元件不顯示。
UgWebRunFrame屬性設定
Height：設定頁面高度=600。Width：設定頁面寬度=800。
1：UgLabel01屬性設定
Align：設定控制元件的對齊方式，設定為alTop。Alignment：設定控制元件中的文字的對齊方式，設定為taCenter。AutoSize：設定控制元件是否跟隨文字大小變化控制元件大小，設定為False。Caption：設定顯示的文字內容，設定為影像識別。Font：設定字型，點選√打開字型設定界面。
2：UgObjectDetect01屬性設定
Anchors：設定錨點資訊，設定akLeft、akTop、akRight、akBottom為True。
UgWebCam01屬性設定
Align：其位於UgObjectDetect01控制元件中，設定錨點資訊，設定akLeft、akTop、akRight、akBottom為True。
7：UgIconClsList10屬性設定
雙擊控制元件，打開編輯器，依次新增以下幾項的圖示，方括號中的內容為需要輸入的名稱。
3：UgFSButton01屬性設定
Anchors：設定錨點資訊，設定akLeft、akTop為True，其餘選項為False。Caption：設定顯示的文字內容，設定為開啟相機。Images：設定顯示圖示的控制元件，設定為UGIconClsList01。ImageIndex：設定顯示的圖示的序號，設定為0。
4：UgFSButton02屬性設定
Anchors：設定錨點資訊，設定akLeft、akTop為True，其餘選項為False。Caption：設定顯示的文字內容，設定為拍照識別。Enabled：設定控制元件是否其餘，設定為False。Images：設定顯示圖示的控制元件，設定為UGIconClsList01。ImageIndex：設定顯示的圖示的序號，設定為1。
5：UgFSButton03屬性設定
Anchors：設定錨點資訊，設定akLeft、akTop為True，其餘選項為False。Caption：設定顯示的文字內容，設定為選擇圖片識別。Images：設定顯示圖示的控制元件，設定為UGIconClsList01。ImageIndex：設定顯示的圖示的序號，設定為2。
6：UgFSButton04屬性設定
Anchors：設定錨點資訊，設定akLeft、akTop為True，其餘選項為False。Caption：設定顯示的文字內容，設定為關閉相機。Images：設定顯示圖示的控制元件，設定為UGIconClsList01。ImageIndex：設定顯示的圖示的序號，設定為3。
7：UgComboBox01屬性設定
FieldLabel：設定標籤資訊，設定為攝像機列表。FieldLabelWidth：設定標籤顯示區域的寬度，設定為120。
8：UgMemo01屬性設定
Anchors：設定錨點資訊，設定akLeft、akRight、akTop為True，其餘選項為False。
UgFileUploadButton01屬性設定
Anchors：設定控制元件的錨點，設定akLeft與akBottom為True，其餘設定為False。ButtonVisible：設定按鈕是否處於可見狀態，設定為False。Filter：設定過濾器，設定常用的圖片後綴格式，設定為*.jpg;*.jpeg;*.gif;*.tif。
# 3. 指令碼設計
點選指令碼設計界面右下角的按鈕，切換至單元選擇界面，勾選需要使用的單元。該程式無需引用單元。
# 3.1. 指令碼初始設定
定義指令碼過程，用於設定兩種狀態下顯示的按鈕序列差異。
//JScript
function RefState(AStatus)
//重新整理按鈕的狀態
//1：表示為處於拍攝模式
//2：表示目前處於圖片處理模式
{
UgWebCam01.CameraName = UgComboBox01.Text;
if (AStatus == 0)
{
UgWebCam01.Visible = True;
UgWebCam01.StartCamera;
UgFSButton01.Enabled = False;
UgFSButton02.Enabled = True;
UgFileUpLoadButton01.Enabled = False;
UgFSButton04.Enabled = True;
}
if (AStatus == 1)
{
UgWebCam01.Visible = False;
UgWebCam01.StopCamera;
UgFSButton01.Enabled = True;
UgFSButton02.Enabled = False;
UgFileUpLoadButton01.Enabled = True;
UgFSButton04.Enabled = False;
}
}
{
Self.OnAfterRunScript = &UgWebRunFrameOnAfterRunScript;
UgWebCam01.OnCameraList = &UgWebCam01OnCameraList;
UgWebCam01.OnError = &UgWebCam01OnError;
UgWebCam01.OnSnap = &UgWebCam01OnSnap;
UgFSButton01.OnClick = &UgFSButton01OnClick;
UgFSButton04.OnClick = &UgFSButton04OnClick;
UgFSButton02.OnClick = &UgFSButton02OnClick;
UgFileUploadButton01.OnCompleted = &UgFileUpLoadButton01OnCompleted;
UgObjectDetect01.OnResult = &UgObjectDetect01OnResult;
UgObjectDetect01.Init;
RefState(1);
}
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
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
//PasScript
procedure RefState(AStatus: Integer);
//重新整理按鈕的狀態
//1：表示為處於拍攝模式
//2：表示目前處於圖片處理模式
Begin
UgWebCam01.CameraName := UgComboBox01.Text;
if AStatus = 0 Then
Begin
UgWebCam01.Visible := True;
UgWebCam01.StartCamera;
UgFSButton01.Enabled := False;
UgFSButton02.Enabled := True;
UgFileUpLoadButton01.Enabled := False;
UgFSButton04.Enabled := True;
End;
if AStatus = 1 Then
Begin
UgWebCam01.Visible := False;
UgWebCam01.StopCamera;
UgFSButton01.Enabled := True;
UgFSButton02.Enabled := False;
UgFileUpLoadButton01.Enabled := True;
UgFSButton04.Enabled := False;
End;
End;
//初始化界面，更新設定
Begin
UgObjectDetect01.Init;
RefState(1);
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
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
// Make sure to add code blocks to your code group
# 3.2. 事件設定
- UgWebRunFrame-OnAfterRunScript事件
初始化運行狀態，設定網頁顯示的內容。
//JScript
function UgWebRunFrameOnAfterRunScript(sender)
{
UGMM.LC(Self);
}
1
2
3
4
5
2
3
4
5
//PasScript
procedure UgWebRunFrameOnAfterRunScript(const sender: tobject);
begin
UGMM.LC(Self);
end;
1
2
3
4
5
2
3
4
5
// Make sure to add code blocks to your code group
- UgWebCam01-OnCameraList事件
此事件用於在啟動時獲取目前可用的攝像機的設備列表。
//JScript
function UgWebCam01onCameraList(sender)
//獲取攝像機列表
{
UgComboBox01.Items.Clear;
for (var i = 0; i <= UgWebCam01.CameraList.Count - 1; i++ )
UgComboBox01.Items.Add(UgWebCam01.CameraList.Names[i]);
if (UgComboBox01.Items.Count > 0)
UgComboBox01.ItemIndex= 0;
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
//PasScript
procedure UgWebCam01onCameraList(sender: tobject);
//獲取攝像機列表
var
i: Integer;
begin
UgComboBox01.Items.Clear;
for i := 0 to UgWebCam01.CameraList.Count-1 do
UgComboBox01.Items.Add(UgWebCam01.CameraList.Names[i]);
if UgComboBox01.Items.Count>0 then
UgComboBox01.ItemIndex:= 0;
end;
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
// Make sure to add code blocks to your code group
- UgWebCam01-OnError事件
當相機在運行的過程中出現錯誤時觸發事件，該事件中包含了錯誤的相關資訊。
//JScript
function UgWebCam01onError(sender,error)
//相機啟動出錯時的提示資訊
{
UgFSToast01.Info("",error);
}
1
2
3
4
5
6
2
3
4
5
6
//PasScript
procedure UgWebCam01onError(sender: tobject;const error: string);
//相機啟動出錯時的提示資訊
begin
UgFSToast01.Info('',error);
end;
1
2
3
4
5
6
2
3
4
5
6
// Make sure to add code blocks to your code group
- UgWebCam01-OnSnap事件
當照相機在執行照相操作后觸發此事件，將照相機拍攝獲得的圖片儲存后發送以進行識別。
//JScript
function UgWebCam01onSnap(sender,filename)
//拍照的結果
{
RefState(1);
var DestFolder=UGSM.StartPath+"UploadFolder\\";
var RemoteFileName = UGMM.CreateGuid + ".jpg";
var DestName=DestFolder+RemoteFileName;
//上傳檔案
CopyFile(filename, DestName, False);
var imgPath = "UploadFolder/"+RemoteFileName;
UgObjectDetect01.Image = imgPath;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
//PasScript
procedure UgWebCam01onSnap(sender: tobject;const filename: string);
//拍照的結果
var
DestName : string;
DestFolder : string;
RemoteFileName: String;
imgPath: String;
begin
RefState(1);
DestFolder:=UGSM.StartPath+'UploadFolder\';
RemoteFileName := UGMM.CreateGuid + '.jpg';
DestName:=DestFolder+RemoteFileName;
//上傳檔案
CopyFile(filename, DestName, False);
imgPath := 'UploadFolder/'+RemoteFileName;
UgObjectDetect01.Image := imgPath;
end;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// Make sure to add code blocks to your code group
- 3：UgFSButton01-OnClick事件
點選開啟相機按鈕，打開攝像機。
//JScript
function UgFSButton01OnClick(sender)
//開啟相機
{
RefState(0);
}
1
2
3
4
5
6
2
3
4
5
6
//PasScript
procedure UgFSButton01OnClick(sender: tobject);
//開啟相機
begin
RefState(0);
end;
1
2
3
4
5
6
2
3
4
5
6
// Make sure to add code blocks to your code group
- 4：UgFSButton02-OnClick事件
點選拍照按鈕，以執行拍照。
//JScript
function UgFSButton02OnClick(sender)
//拍攝照片
{
UgWebCam01.SnapPicture;
}
1
2
3
4
5
6
7
2
3
4
5
6
7
//PasScript
procedure UgFSButton02OnClick(sender: tobject);
//拍攝照片
begin
UgWebCam01.SnapPicture;
end;
1
2
3
4
5
6
2
3
4
5
6
// Make sure to add code blocks to your code group
- 6：UgFSButton04-OnClick事件
點選關閉相機按鈕，關閉攝像機。
//JScript
function UgFSButton04OnClick(sender)
//關閉相機
{
RefState(1);
}
1
2
3
4
5
6
2
3
4
5
6
//PasScript
procedure UgFSButton04OnClick(sender: tobject);
//關閉相機
begin
RefState(1);
end;
1
2
3
4
5
6
2
3
4
5
6
// Make sure to add code blocks to your code group
- 5：UgFileUploadButton01-OnCompleted事件
當上傳圖片后，進行判斷識別。
//JScript
function UgFileUploadButton01OnCompleted(sender,astream)
//上傳圖片
{
//遠端檔名
var RemoteFileName = ExtractFileName(varToStr(TUgFileUploadButton(sender).FileName));
//遠端檔案路徑
var DestFolder=UGSM.StartPath+"UploadFolder\\";
var DestName=DestFolder+RemoteFileName;
//上傳檔案
CopyFile(UGCM.GetFileStreamFileName(AStream), DestName, False);
//ShowMessage(DestName);
var imgPath = "UploadFolder/"+RemoteFileName;
UgObjectDetect01.Image = imgPath;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//PasScript
procedure UgFileUploadButton01OnCompleted(sender: tobject;astream: tfilestream);
//上傳圖片
var
DestName : string;
DestFolder : string;
RemoteFileName:String;
imgPath:String;
begin
//遠端檔名
RemoteFileName := ExtractFileName(VarToStr(TUgFileUploadButton(sender).FileName));
//遠端檔案路徑
DestFolder:=UGSM.StartPath+'UploadFolder\';
DestName:=DestFolder+RemoteFileName;
//上傳檔案
CopyFile(UGCM.GetFileStreamFileName(AStream), DestName, False);
//ShowMessage(DestName);
imgPath := 'UploadFolder/'+RemoteFileName;
UgObjectDetect01.Image := imgPath;
end;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// Make sure to add code blocks to your code group
- 2：UgObjectDetect01-OnResult事件
當識別到影像的結果時觸發，執行相關的指令碼，輸出識別的結果資訊。'
//JScript
function UgObjectDetect01OnResult(sender,alabel,aconfidence)
{
UgMemo01.Lines.Add(UGMM.LT("分類：") + alabel);
UgMemo01.Lines.Add(UGMM.LT("可信度：") + aconfidence);
}
1
2
3
4
5
6
2
3
4
5
6
//PasScript
procedure UgObjectDetect01OnResult(sender: tobject;const alabel: string;const aconfidence: string);
begin
UgMemo01.Lines.Add(UGMM.LT('分類項：') + alabel);
UgMemo01.Lines.Add(UGMM.LT('可信度：') + aconfidence);
end;
1
2
3
4
5
6
2
3
4
5
6
// Make sure to add code blocks to your code group
# 4. 運行結果
使用滑鼠在FastWeb功能表，點選[儲存至資料庫]按鈕，將其儲存至資料庫，點選[除錯運行]確認能夠正常打開。
打開示例，選擇圖片載入，可從載入的圖片中檢視識別的結果資訊。