愛招飛幫助手冊 愛招飛幫助手冊
  • FastERP-1
  • Smart
  • PinToo
  • FastWeb
  • FastERP-2 企業管理系統 (opens new window)
  • 印染業ERP (opens new window)
  • 工廠終端機 (opens new window)
  • TARS
  • MARS
  • TaskRunner
  • Flying
  • FastDesk
  • HiDesk
  • HiNAT
  • FastBPM
  • 設備故障診斷 (opens new window)
  • 設備最佳運轉效益 (opens new window)
  • 企業智能助手SmeGPT (opens new window)
  • 燈號管理 (opens new window)
  • 戰情室 (opens new window)
  • 能源管理 (opens new window)
  • 人車定位 (opens new window)
  • 戰情指揮系統 (opens new window)
  • FastERP-1
  • FastWeb
  • Smart
  • PinToo
  • Flying
  • TARS
  • 通用功能

    • Report
    • Script
    • Echarts
    • Chart
    • DB Install
  • FastERP-1
  • Smart
  • PinToo
  • FastWeb
  • FastERP-2 企業管理系統 (opens new window)
  • 印染業ERP (opens new window)
  • 工廠終端機 (opens new window)
  • TARS
  • MARS
  • TaskRunner
  • Flying
  • FastDesk
  • HiDesk
  • HiNAT
  • FastBPM
  • 設備故障診斷 (opens new window)
  • 設備最佳運轉效益 (opens new window)
  • 企業智能助手SmeGPT (opens new window)
  • 燈號管理 (opens new window)
  • 戰情室 (opens new window)
  • 能源管理 (opens new window)
  • 人車定位 (opens new window)
  • 戰情指揮系統 (opens new window)
  • FastERP-1
  • FastWeb
  • Smart
  • PinToo
  • Flying
  • TARS
  • 通用功能

    • Report
    • Script
    • Echarts
    • Chart
    • DB Install
  • FastWeb幫助主頁
  • 學習手冊

  • 開發手冊

    • 通訊協議

    • 互動輸出

    • 媒體存取

    • 人工智慧

      • 地圖定位

      • 影象識別

        • 圖片分類(WEB)
        • 影象識別(WEB)
        • 視訊識別(WEB)
        • 圖片分類-視覺化控制元件(WEB)
        • 影象識別-視覺化控制元件(WEB)
          • 1. 說明
          • 2. 設計明細
          • 3. 指令碼設計
            • 3.1. 指令碼初始設定
            • 3.2. 事件設定
          • 4. 運行結果
        • 視訊識別-視覺化控制元件(WEB)
    • 實體運用

目录

影象識別-視覺化控制元件(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
    //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
    // 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
      //PasScript
      procedure UgWebRunFrameOnAfterRunScript(const sender: tobject);
      begin
        UGMM.LC(Self);
      end;
      
      1
      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
        //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
        // 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
          //PasScript
          procedure UgWebCam01onError(sender: tobject;const error: string);
          //相機啟動出錯時的提示資訊
          begin
            UgFSToast01.Info('',error);
          end;
          
          1
          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
            //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
            // 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
              //PasScript
              procedure UgFSButton01OnClick(sender: tobject);
              //開啟相機
              begin
                RefState(0);
              end;
              
              1
              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
                //PasScript
                procedure UgFSButton02OnClick(sender: tobject);
                //拍攝照片
                begin
                  UgWebCam01.SnapPicture;
                end;
                
                1
                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
                  //PasScript
                  procedure UgFSButton04OnClick(sender: tobject);
                  //關閉相機
                  begin
                    RefState(1);
                  end;
                  
                  1
                  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
                    //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
                    // 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
                      //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
                      // Make sure to add code blocks to your code group

                      # 4. 運行結果

                        使用滑鼠在FastWeb功能表,點選[儲存至資料庫]按鈕,將其儲存至資料庫,點選[除錯運行]確認能夠正常打開。

                        打開示例,選擇圖片載入,可從載入的圖片中檢視識別的結果資訊。

                      圖片分類-視覺化控制元件(WEB)
                      視訊識別-視覺化控制元件(WEB)

                      ← 圖片分類-視覺化控制元件(WEB) 視訊識別-視覺化控制元件(WEB)→

                      Copyright © 2021-2025 愛招飛IsoFace | ALL Rights Reserved
                      • 跟随系统
                      • 浅色模式
                      • 深色模式
                      • 阅读模式