愛招飛幫助手冊 愛招飛幫助手冊
  • 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)
        • 視訊識別-視覺化控制元件(WEB)
          • 1. 說明
          • 2. 設計明細
          • 3. 指令碼設計
            • 3.1. 指令碼初始設定
            • 3.2. 事件設定
          • 4. 運行結果
    • 實體運用

目录

視訊識別-視覺化控制元件(WEB)

# FastWeb之視訊識別-視覺化控制元件(WEB)

# 1. 說明

  通過ml5js的影象識別分類功能,輔助實現影象識別的相關功能。ml5js (opens new window)是基於tensorflow.js的深度學習框架,它安裝簡便,API簡單易懂,可直接在瀏覽器裡面運行,可作為輕量化的智能識別工具。此示例需要線上呼叫數據模型,且會呼叫攝像頭的相關許可權,故此處建議使用https來訪問FastWeb中的此示例。

  通過本範例學習,可以掌握UgVideoDetect的使用方法,並通過攝像頭的實時視訊來實時實現影象識別的相關功能。

  使用此示例前,請先確保訪問FastWeb的客戶端能夠訪問網際網路的資源,此處使用的是線上的數據模型資源。

# 2. 設計明細

  開啟FastWeb設計器,分別加入下插圖之控制元件。或者點選左上角的[匯入]選擇模板檔案來打開對應模板。

  1:TUgLabel元件,控制元件名稱為UgLabel01。

  2:TUgURLFrame元件,控制元件名稱為UgURLFrame01。

  3:TUgMemo元件,控制元件名稱為UgMemo01。

  • UgWebRunFrame屬性設定

    • Height:設定頁面高度=600。
    • Width:設定頁面寬度=800。
  • 1:UgLabel01屬性設定

    • Align:設定控制元件的對齊方式,設定為alTop。
    • Alignment:設定控制元件中的文字的對齊方式,設定為taCenter。
    • AutoSize:設定控制元件是否跟隨文字大小變化控制元件大小,設定為False。
    • Caption:設定顯示的文字內容,設定為圖片分類。
    • Font:設定字型,點選√打開字型設定界面。
  • 2:UgURLFrame01屬性設定

    • Anchors:設定錨點資訊,設定akLeft、akTop、akRight、akBottom為True。
  • 3:UgMemo01屬性設定

    • Anchors:設定錨點資訊,設定akLeft、akRight、akBottom為True,其餘選項為False。

# 3. 指令碼設計

  點選指令碼設計界面右下角的按鈕,切換至單元選擇界面,勾選需要使用的單元。該程式指令碼不需要引用單元。

# 3.1. 指令碼初始設定

  對程式的初始化設定。

    //JScript
    
    
    {
      Self.OnAfterRunScript = &UgWebRunFrameOnAfterRunScript;
      UgVideoDetect01.OnResult = &UgVideoDetect01OnResult;
      UgVideoDetect01.Init;
    }
    
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    //PasScript
    procedure UgWebRunFrameOnAfterRunScript(const sender: tobject);
    begin
      UgURLFrame01.HTML := UgSyntaxEditor01.Lines;
    end;
    
    Begin
      UgVideoDetect01.Init;
    End.
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    // 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
      • 2:UgVideoDetect01-OnResult事件

        設定返回識別的結果資訊。

        //JScript
        function UgVideoDetect01OnResult(sender,alabel,aconfidence)
        {
          UgMemo01.Lines.Add(UGMM.LT("識別項:") + alabel);
          UgMemo01.Lines.Add(UGMM.LT("可信度:") + aconfidence);
        }
        
        1
        2
        3
        4
        5
        6
        //PasScript
        procedure UgVideoDetect01OnResult(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
        • 跟随系统
        • 浅色模式
        • 深色模式
        • 阅读模式