2023年3月11日 星期六

[app, Thunkable, flowchart] 從流程圖到 Thunkable app_2：計算長方形面積

 從流程圖到 Thunkable app_2：

計算長方形面積

Line：ted2016.kpvs
Email：Lct4246@gmail.com
FB：http://gg.gg/TedLeeFB/
Blog：http://gg.gg/TedLeeBlog/

Mar. 11, 2023
[1]

當雲端的新服務發佈（publish）後沒多久，透過 API（Application Programming Interface）呼叫，App 版的介面也會很快的發行。舉例來說，ChatGPT 在 2022 年 11 月上線後，對應的 apps 在近期也可以陸陸續續從 app 市集（markets）上下載到。因此，雲端服務同時能提供網頁和 app 形式來連接已成為現今最主流的雙介面。
另一方面，行動載具採 MVC（Model View Controller）設計概念，分成畫面設計和程式設計兩個階段。本文先說明要解決的問題，再將它的解題步驟匯整為陳會安老師設計的 fChart 流程圖。最後再著手設計 app 的呈現畫面及其背後的控制程式。

問題說明

由鍵盤輸入長方形的寬，並自動計算其面積。
陳會安老師提供了本問題的解決流程如圖 2 所示。首先，設定好長方形的高 height 為 135。接著，讀取輸入的寬 width。最後，計算其面積 area，並將之顯示在畫面上。

圖 1：長方形面積的計算流程

畫面設計

畫面的安排如圖 2 所示，我們使用馬 3 個 Label 和 1 個 Text Input 元件。
圖 2：畫面設計圖

各元件的命名及其屬性設定詳列如圖 3。

 
圖 3：各元件設定

程式畫面

在程式自動化方面，當我們輸入完長方形寬的大小後，按下 Enter 鍵或以滑鼠在空白處輕點一下（完成輸入）後會立即啟動 Submit（提交）事件。因此，我們將長方形的計算方式及結果輸出包在這個事件處理積木之內即可完成處理（圖 4）。


圖 4：積木程式

張貼者： 於 沒有留言:
標籤： , ,

2023年2月28日 星期二

[app, Thunkable, flowchart] 從流程圖到 Thunkable app_1：加法

 從流程圖到 Thunkable app_1：

加法

Line：ted2016.kpvs
Email：Lct4246@gmail.com
FB：http://gg.gg/TedLeeFB/
Blog：http://gg.gg/TedLeeBlog/

Feb. 28, 2023
[1]


我們在這篇文章《從想法到實現：怎麼用程式解決問題？》（https://reurl.cc/6NEG7d）中已明確的指出：

流程圖（flowchart）為程式邏輯之母
將原始問題的一連串解決步驟表達成清晰、明確的解題流程之後，想要使用任何的程式語言來實作（implement）成軟體工具就變成「流程圖與程式語言」對應的轉換問題了。
本文以陳會安老師分享的 fChart+Thunkable 示例，詳細的解說 fChart（https://reurl.cc/gZ0rXV）流程圖如何以手工方式（目前沒有流程圖自動轉成程式語言語法（syntax）的演算法）一一轉換為 Thunkable app 。

  1. 1_fChart_Blockly_Thunkable_基礎與程式邏輯（https://reurl.cc/qkOp2p）
  2. 2_fChart_Blockly_Thunkable_變數與運算子(循序結構)（https://reurl.cc/6NEGRV）
  3. 3_fChart_Blockly_Thunkable_是否選(選擇結構)（https://reurl.cc/MRb2om）
  4. 4_fChart_Blockly_Thunkable_二選一(選擇結構)（https://reurl.cc/pLWpbd）
  5. 5_fChart_Blockly_Thunkable_多選一(選擇結構)（https://reurl.cc/DmdxMO）
  6. 6_fChart_Blockly_Thunkable_迴圈(重複結構)（https://reurl.cc/mlGpbV）
  7. 7_fChart_Blockly_Thunkable_函數(模組)（https://reurl.cc/AdK9ed）
  8. 8_fChart_Blockly_Thunkable_清單(資料結構)（https://reurl.cc/Nqp2mm）
  9. 9_Thunkable多螢幕App開發（https://reurl.cc/xlOWME）
  10. 10_Thunkable跨平台行動開發(專案實例)（https://reurl.cc/qkOpRD）

App 設計在 maker、IoT 上扮演的角色定位

在筆者拙著《物聯網的兩種標準作業模式：地對雲與雲對地》（https://reurl.cc/xlOWrb）一文中，從圖 1 中可以看出行動 Apps 扮演著兩種模式：遠端監控（remote monitoring）和遠端顯示（remote display）。

 
圖 1：IoT 三大技術領域：邊緣運算、雲端服務與行動 Apps

雖然目前 app 開發的市場已趨近飽和，像憤怒鳥 app 那樣一上架就萬人下載的榮景不再，不過 maker 或 IoT 創作者客製化（customize）成符合自己作品應用情境的版本仍是有其需求的。
註：我們之所以挑選 Thunkable 做為 apps 開發的入門工具乃是因為它能同時支援 Android 與 iOS 軟硬體平台。

問題說明

由鍵盤輸入兩數字，並顯示其和。
在圖 2 中，我們截取會安老師繪製的 fChart 流程圖來說明上述問題的四個解決步驟：輸入兩個數字 a 和 b、計算相加之和、顯示結果。

圖 2：兩數求和計算

App 設計邏輯：三區與二畫面

apps 設計工具多半採用 MVC（Mode-View-Controller，模型─視圖─控制器）架構，圖 3 即為 Thunkable IDE 的三明治式執行畫面：左側為元件（components）區、中間為 UI 設計區，最右側為元件屬性（properties）區。
此外，apps 設計的過程也分成設計（Design）畫面與程式（Blocks）畫面。我們將在隨後的兩小節中詳細說明。

圖 3：Thunkable IDE

設計畫面

app 設計第一要務是要先想好它的呈現畫面。如圖 4 所示，我們需要 3 個文字標籤、2 個輸入文字和 1 個按鈕。
圖 4：UI 設計圖

在圖 5 中詳列了圖 4 用到的元件，將之以「元件名稱縮寫+用途」重新命名，並各元件對應的屬性。其中，為了畫面管理方便，我們在第一個數字和第二個數字區域使用 Group 來將 Label 與 Text Input 兩個元件以群組方式打包起來。

   
圖 5：元件配置、命名與其屬性設定

程式畫面

在圖 4 的 app 畫面中，我們輸入兩個數字 opd1 和 opd2，按下（Click 事件）藍色的計算鈕後將它們的相加的結果顯示在畫面的最下方。


圖 6：積木程式

張貼者： 於 沒有留言:
標籤： , ,

2023年1月15日 星期日

[AI, Python, 深蹲, squat] Python 蹲的門面

 Python 蹲的門面

Line：ted2016.kpvs
Email：Lct4246@gmail.com
FB：http://gg.gg/TedLeeFB/
Blog：http://gg.gg/TedLeeBlog/

Jan. 15, 2023
[1]


在筆者的先前拙著《用變數傾印法玩 Python 蹲》（https://reurl.cc/LXk1qx）一文中，我們成功地在陳會安老師研發的 fChart 中的 Thonny IDE 測試了深蹲偵測及計次範例。本文將進一步地甞試以 fChart 內建的 Tinker 套件 [2] 為之再加上一套使用者介面（user interface，UI）來梳妝打扮一番。


新增功能

在本文中，我們將為《用變數傾印法玩 Python 蹲》範例擴充下列兩個新功能：
  1.  改用攝影機即時取得的影像（而非事先預錄的影片）。
  2. 增設深蹲達標關卡（為了便於測試，暫訂為深蹲三下）。
 

UI 佈局（layout）

在圖 1 上方，我們設計了一個 3×2 大小的畫面，第一行顯示專案名稱（Python 蹲）與版次（V1.0），第二行顯示由攝影機取得的即時影像與相關訊息，第三行為留白及作者姓名（Ted Lee）。圖 1 下方為 Tinker 刻出來的畫面。

 
圖 1：UI 設計圖

在圖 2 中，我們先建立最外層的視窗 window 元件（component），再置入 frmTitle、frmVideo 和 frmTeam 三個框架元件（Frame）。緊接著，在 frmTitle 中擺放 lblTitle 和 lblVersion、在 frmVideo 中擺放 lblVideo 和 lblResult、在 frmTeam 中擺放 lblSpace 和 lblTeam。所有元件皆以 pack 佈局方式安排。詳如如圖 2 所示。

圖 2：UI 元件佈局

程式邏輯

我們將程式執行的流程畫成圖 3 的流程圖。此外，程式採模組化程式設計（modularized programming）的方法，將獨立的功能以下列三個副程式來達成：

  1. detectPose()：偵測姿勢。
  2. updateUI()：即時更新影像標籤 lblVideo。
  3. cleanUp()：程式結束，釋放已配置資源（allocated resources）。

圖 3：本文的流程圖

本文的執行結果請參考 https://youtu.be/Gm6o7m-QH6Y。完整程式碼詳列如下（讀者亦可由 https://reurl.cc/rZ7aob 下載）。

import cv2
import numpy as np
from PIL import ImageFont, ImageDraw, Image
    
from tkinter import *
from PIL import Image, ImageTk

from PoseModule import PoseDetector
dir = 0 
count = 0

def updateUI():
    global img, lblVideo
    
    cv2image = cv2.cvtColor(img, cv2.COLOR_BGR2RGBA)
    img = Image.fromarray(cv2image)
    imgtk = ImageTk.PhotoImage(image = img)    

    lblVideo.imgtk = imgtk
    lblVideo.config(image = imgtk)
    lblVideo.after(100, detectPose)
    
    if count > 3:
       lblResult.config(text = '你已達標！')   
    
def detectPose():
    global cap, detector, dir, count, img

    success, img = cap.read()
    if success:
        img = cv2.resize(img, (640, 480))
        h, w, c = img.shape
        pose, img = detector.findPose(img, draw=True)
        
        if pose:
            lmList = pose["lmList"]
            angle, img = detector.findAngle(lmList[24], lmList[26], lmList[28], img)
            bar = np.interp(angle, (85, 180), (w//2-100, w//2+100))
            cv2.rectangle(img, (w//2-100, 50), (int(bar), 100), (0, 255, 0), cv2.FILLED)

            if angle <= 150:                
                if dir == 0:
                    count = count + 0.5
                    dir = 1
                    
            if angle >= 170: 
                if dir == 1:
                    count = count + 0.5
                    dir = 0
                    
            msg = str(int(count))        
            cv2.putText(img, msg, (100, 150), cv2.FONT_HERSHEY_SIMPLEX, 5, (255, 255, 255), 20)
            
        cv2.imshow("Pose", img)
        updateUI()

def cleanUp():
    window.destroy()
    cap.release()
    cv2.destroyAllWindows()

cap = cv2.VideoCapture(0) #####開啟攝影機
detector = PoseDetector()

#開 UI ---------------------------------------------------------------------------------------------------------   
#widow
window = Tk()
window.title('Python 蹲')
#window.geometry('1024x768')
window.attributes('-fullscreen', True)


#frame
frmTitle = Frame(window)
frmTitle.pack(side = TOP, fill = BOTH, expand = YES)

frmVideo = Frame(window)
frmVideo.pack(side = TOP, fill = BOTH, expand = YES)   

frmTeam = Frame(window)
frmTeam.pack(side = BOTTOM, fill = BOTH, expand = YES)


#Title
lblTitle = Label(frmTitle, text = "Python 蹲", fg = '#005E5E', bg = '#666666', font = ('標楷體', 70), borderwidth = 0, highlightthickness = 0, relief = "sunken") 
lblTitle.pack(side = LEFT, fill = BOTH, expand = YES)

lblVersion = Label(frmTitle, text = "V1.0", fg = '#005E5E', bg = '#666666', font = ('標楷體', 20), borderwidth = 0, highlightthickness = 0, relief = "sunken") 
lblVersion.pack(side = RIGHT, fill = BOTH, expand = YES)


#Video
lblVideo = Label(frmVideo, bg = '#005E5E', borderwidth = 0, highlightthickness = 0, relief = "ridge")
lblVideo.pack(side = LEFT, fill = BOTH, expand = YES)

lblResult = Label(frmVideo, text = "", fg = 'white', bg = '#005E5E', font = ('標楷體', 40), borderwidth = 0, highlightthickness = 0, relief = "sunken")
lblResult.pack(side = RIGHT, fill = BOTH, expand = YES)


#Team
lblSpace = Label(frmTeam, text = "", fg = '#005E5E', bg = '#666666', font = ('標楷體', 20), borderwidth = 0, highlightthickness = 0, relief = "sunken") 
lblSpace.pack(side = LEFT, fill = BOTH, expand = YES)

lblTeam = Label(frmTeam, text = "Ted Lee", fg = '#005E5E', bg = '#666666', font = ('標楷體', 20), borderwidth = 0, highlightthickness = 0, relief = "sunken") 
lblTeam.pack(side = RIGHT, fill = BOTH, expand = YES)

#姿勢識別 ---------------------------------------------------------------------------------------------------
detectPose()
    
window.bind('<Escape>', lambda e: cleanUp())
mainloop()


進階問題

  1. 建置一「分數雲端排行榜」來記錄玩家的深蹲分數。
  2. 修改程式，使得深蹲次數達標後出現是否「重新訓練」詢問。
[2] 請參考拙著《AI 成績查詢系統》（https://reurl.cc/aaWlKl）一文。
張貼者： 於 沒有留言:
標籤： , , ,

2023年1月14日 星期六

[AI, Python, 深蹲, squat] 用變數傾印法玩 Python 蹲

用變數傾印法玩 Python 蹲

Line：ted2016.kpvs
Email：Lct4246@gmail.com
FB：http://gg.gg/TedLeeFB/
Blog：http://gg.gg/TedLeeBlog/

Jan. 14, 2023
[1]

本文將一門深入陳會安老師在 https://reurl.cc/mZ1mD1 分享的《看圖學Python人工智慧程式設計》（https://reurl.cc/rZW79r）一書中的範例。此範例使用了 Google  MediaPipe（https://reurl.cc/nZg8mX）跨平台機器學習解決方案，讓我們得以使用短短的 4x 行 Python 程式碼就能實現深蹲（squat）姿勢的判別並能計次。

會安老師說：「只要懂得程式語言三大結構（循序、選擇與重複），再了解一點 Python 程式語言的語法，就能開始玩 AI了！」讀者們，Python 蹲、Python 蹲，Python 蹲完換你們蹲了喔！


開發環境建置

本文使用會安老師開發的 fChart 流程圖轉語法中的 Thonny IDE [2]，它已裝妥了 CVZone 與 Tinker 套件。

下載　英文版「fChartThonny6_cvzone_en.zip」可由 https://reurl.cc/gQ59Vb 下載。此外，深蹲範例程式的原始碼「Squat.zip」可由 https://reurl.cc/x1qzE5 下載。
解壓縮　將上述的兩支 .zip 檔解壓縮至磁機的「根」目錄（root directory）下（例如：c:\），如圖 1 所示。

 

圖 1：將「fChartThonny6_cvzone_en.zip」和「Squat.zip」解壓縮至 c:\

Thonny　雙撃「C:\fChartThonny6_cvzone_en\WinPython」路徑下的「thonny.vbs」以開啟 Thonny（圖 2）。

圖 2：開啟 Thonny IDE

Squat.py　在視窗左手邊的 Files 檔案管理中切換到「C:\Squat」後再雙撃「Squat.py」（圖 3）以載入原始碼（source code）。

圖 3：在 Thonny 中開啟 Squat.py

程式碼追蹤

Squat.py 援用了「PoseModule.py」中的「PoseDetector」類別（class），並載入「squat3_clip.mp4」預錄的影像檔做為測試資料。 在 4x 行的程式碼中，最核心（core）的指令為第 17 行定義於的 PoseDetector 類別的 findAngle() 方法（method）！讀者們可先學習呼叫它的方法和需傳入的參數列（parameter list）。有需要再鑽進該類別去深究它是如何從影像資料中計算出深蹲的夾角的。
本小節將使用「變數傾印（dump）」暴力法（紮實的蹲馬步）將範例程式中插入「print(變數名)」，將用到變數一一印出來觀察其內容，藉以了解程式的設計邏輯。我們以
L行號 變數名稱
方式來標示查看程式碼的第幾行變數值。

L10 img　在第 10 和第 11 行中插入 print(img) 指令，我們可以看到變數 img 的第一筆內容如下：

[[[  0  44  37]
  [  2  50  43]
  [  7  63  54]
  ...
  [ 20  48  78]
  [ 19  47  77]
  [ 18  46  76]]

 [[  0  44  37]
  [  2  50  43]
  [  7  63  54]
  ...
  [ 18  46  76]
  [ 17  45  75]
  [ 16  44  74]]

 [[  0  45  37]
  [  0  51  43]
  [  4  62  53]
  ...
  [ 15  43  73]
  [ 12  40  70]
  [ 11  39  69]]

 ...

 [[121 115 110]
  [123 117 112]
  [127 121 116]
  ...
  [ 19  40  71]
  [ 22  43  74]
  [ 23  44  75]]

 [[144 138 133]
  [146 140 135]
  [152 146 141]
  ...
  [ 23  44  75]
  [ 23  44  75]
  [ 23  44  75]]

 [[153 147 142]
  [152 146 141]
  [152 146 141]
  ...
  [ 23  44  75]
  [ 21  42  73]
  [ 19  40  71]]]

圖 4：變數傾印法

L12 img　
[[[  1  47  40]
  [ 10  66  57]
  [ 12  70  61]
  ...
  [ 16  44  74]
  [ 20  48  78]
  [ 18  46  76]]

 [[  0  48  40]
  [  8  66  57]
  [  1  56  47]
  ...
  [ 16  44  74]
  [ 16  44  74]
  [ 13  41  71]]

 [[  1  50  42]
  [  8  66  57]
  [  5  61  52]
  ...
  [ 15  43  73]
  [ 13  41  71]
  [  9  37  67]]

 ...

 [[151 145 140]
  [143 137 132]
  [133 127 122]
  ...
  [ 15  36  67]
  [ 12  33  64]
  [ 15  36  67]]

 [[128 122 117]
  [135 129 124]
  [145 139 134]
  ...
  [ 17  38  69]
  [ 19  40  71]
  [ 23  44  75]]

 [[151 145 140]
  [153 147 142]
  [156 150 145]
  ...
  [ 22  43  74]
  [ 23  44  75]
  [ 21  42  73]]]

L13 h, w, c　「480 640 3」 color channel, 彩色圖片是3

L14 detector.findPose(img, draw=True)　
({'lmList': [[331, 126], [334, 121], [336, 121], [338, 121], [328, 121], [326, 121], [324, 121], [339, 124], [321, 124], [335, 133], [328, 132], [355, 164], [306, 163], [357, 213], [302, 210], [371, 198], [289, 200], [376, 194], [283, 193], [375, 190], [281, 190], [372, 191], [284, 192], [344, 253], [315, 254], [358, 328], [301, 332], [368, 399], [291, 400], [365, 407], [294, 410], [374, 422], [283, 423]], 'bbox': (282, 97, 97, 337), 'center': (330, 265)}, array([[[ 1, 47, 40],
[ 10, 66, 57],
[ 12, 70, 61],
...,
[ 16, 44, 74],
[ 20, 48, 78],
[ 18, 46, 76]],
[[ 0, 48, 40],
[ 8, 66, 57],
[ 1, 56, 47],
...,
[ 16, 44, 74],
[ 16, 44, 74],
[ 13, 41, 71]],
[[ 1, 50, 42],
[ 8, 66, 57],
[ 5, 61, 52],
...,
[ 15, 43, 73],
[ 13, 41, 71],
[ 9, 37, 67]],
...,
[[151, 145, 140],
[143, 137, 132],
[133, 127, 122],
...,
[ 15, 36, 67],
[ 12, 33, 64],
[ 15, 36, 67]],
[[128, 122, 117],
[135, 129, 124],
[145, 139, 134],
...,
[ 17, 38, 69],
[ 19, 40, 71],
[ 23, 44, 75]],
[[151, 145, 140],
[153, 147, 142],
[156, 150, 145],
...,
[ 22, 43, 74],
[ 23, 44, 75],
[ 21, 42, 73]]], dtype=uint8))

L14 pose　
{'lmList': [[331, 126], [334, 121], [336, 121], [338, 121], [328, 121], [326, 121], [324, 121], [339, 124], [322, 124], [335, 133], [328, 132], [355, 163], [306, 163], [357, 215], [299, 214], [371, 199], [289, 199], [376, 194], [283, 191], [376, 191], [281, 188], [374, 192], [283, 189], [344, 254], [316, 255], [358, 328], [301, 332], [368, 400], [291, 400], [365, 409], [294, 410], [374, 422], [283, 423]], 'bbox': (282, 97, 97, 337), 'center': (330, 265)}

L14 img　
[[[ 1 47 40]
[ 10 66 57]
[ 12 70 61]
...
[ 16 44 74]
[ 20 48 78]
[ 18 46 76]]
[[ 0 48 40]
[ 8 66 57]
[ 1 56 47]
...
[ 16 44 74]
[ 16 44 74]
[ 13 41 71]]
[[ 1 50 42]
[ 8 66 57]
[ 5 61 52]
...
[ 15 43 73]
[ 13 41 71]
[ 9 37 67]]
...
[[151 145 140]
[143 137 132]
[133 127 122]
...
[ 15 36 67]
[ 12 33 64]
[ 15 36 67]]
[[128 122 117]
[135 129 124]
[145 139 134]
...
[ 17 38 69]
[ 19 40 71]
[ 23 44 75]]
[[151 145 140]
[153 147 142]
[156 150 145]
...
[ 22 43 74]
[ 23 44 75]
[ 21 42 73]]]

L16 lmList　
[[331, 126], [334, 121], [336, 121], [338, 121], [328, 121], [326, 121], [324, 121], [339, 124], [322, 124], [335, 133], [328, 132], [355, 163], [306, 163], [357, 215], [299, 214], [371, 199], [289, 199], [376, 194], [283, 191], [376, 191], [281, 188], [374, 192], [283, 189], [344, 254], [316, 255], [358, 328], [301, 332], [368, 400], [291, 400], [365, 409], [294, 410], [374, 422], [283, 423]]

L17 detector.findAngle(lmList[24], lmList[26], lmList[28], img)　
[ 15, 36, 67],
[ 12, 33, 64],
[ 15, 36, 67]],
[[128, 121, 118],
[135, 128, 125],
[145, 138, 135],
...,
[ 17, 38, 69],
[ 19, 40, 71],
[ 23, 44, 75]],
[[151, 144, 141],
[153, 146, 143],
[156, 149, 146],
...,
[ 22, 43, 74],
[ 23, 44, 75],
[ 21, 42, 73]]], dtype=uint8))
(178.20385684750428, array([[[ 1, 47, 40],
[ 10, 66, 57],
[ 12, 70, 61],
...,
[ 16, 44, 74],
[ 20, 48, 78],
[ 18, 46, 76]],
[[ 0, 48, 40],
[ 8, 66, 57],
[ 1, 56, 47],
...,
[ 16, 44, 74],
[ 16, 44, 74],
[ 13, 41, 71]],
[[ 1, 50, 42],
[ 8, 66, 57],
[ 5, 61, 52],
...,
[ 15, 43, 73],
[ 13, 41, 71],
[ 9, 37, 67]],
...,
[[151, 144, 141],
[143, 136, 133],
[133, 126, 123],
...,
[ 15, 36, 67],
[ 12, 33, 64],
[ 15, 36, 67]],
[[128, 121, 118],
[135, 128, 125],
[145, 138, 135],
...,
[ 17, 38, 69],
[ 19, 40, 71],
[ 23, 44, 75]],
[[151, 144, 141],
[153, 146, 143],
[156, 149, 146],
...,
[ 22, 43, 74],
[ 23, 44, 75],
[ 21, 42, 73]]], dtype=uint8))

L17 angle　177.34243016028947

L17 img　
  [ 15  36  67]
  [ 12  33  64]
  [ 15  36  67]]

 [[128 122 117]
  [135 129 124]
  [145 139 134]
  ...
  [ 17  38  69]
  [ 19  40  71]
  [ 23  44  75]]

 [[151 145 140]
  [153 147 142]
  [156 150 145]
  ...
  [ 22  43  74]
  [ 23  44  75]
  [ 21  42  73]]]
[[[  1  47  40]
  [ 10  66  57]
  [ 12  70  61]
  ...
  [ 16  44  74]
  [ 20  48  78]
  [ 18  46  76]]

 [[  0  48  40]
  [  8  66  57]
  [  1  56  47]
  ...
  [ 16  44  74]
  [ 16  44  74]
  [ 13  41  71]]

 [[  1  50  42]
  [  8  66  57]
  [  5  61  52]
  ...
  [ 15  43  73]
  [ 13  41  71]
  [  9  37  67]]

 ...

 [[151 144 141]
  [143 136 133]
  [133 126 123]
  ...
  [ 15  36  67]
  [ 12  33  64]
  [ 15  36  67]]

 [[128 121 118]
  [135 128 125]
  [145 138 135]
  ...
  [ 17  38  69]
  [ 19  40  71]
  [ 23  44  75]]

 [[151 144 141]
  [153 146 143]
  [156 149 146]
  ...
  [ 22  43  74]
  [ 23  44  75]
  [ 21  42  73]]]

原理探討

從上小節一步一腳印地以土法煉綱的方式將程式中的每一個存放資料的變數印在 Thonny 的「互動環境（Shell）」中一一檢視。我們試圖以達文西的解剖術，一刀刀的拆解出基元後再拼湊出藏在程式碼背後的密碼──流程圖（flowchart）。

本範例以右大腿和小腿間因直立／深蹲所造成的夾角（angle）變化來判斷動作的完成與否。角度計算函式 findAngle() （定義於 PoseModule.py 中）以「髖骨─膝蓋─腳踝」三點的座標計算之（圖 5）：

蹲下， £ 105 
直立， ³ 170


圖 5：深蹲動作的角度值範例判斷

另一方面，深蹲的判別及其次數計算方式為（圖 6）：

dir = 0，站直，count <- count + 0.5（蹲半下）
dir = 1，蹲下，count <- count + 0.5（蹲半下）
其中，「<-」表示指定（assign），意即將符號右邊的值指定給左邊（將計次變數 count 加上蹲半下 0.5 後指定到 count 之中）。

圖 6：深蹲動作的判別及計次

因此，我們可以整理出程式的執行流程如圖 7 所示。

圖 7：本文的流程圖

進階問題

  1. 將「夾角」的偵測擴充到四足，讓程式可以判斷出四手腳的動作。
  2. 找一個運動的肢體變化過程，例如國標舞舞步，將深蹲改寫為「國標舞 AI 教練」。
  3. 請模仿我們先前拙著《AI 成績查詢系統》（https://reurl.cc/YdzLAX》一文，使用 fChart 內建的 Tinker 視窗設計工具包（GUI toolkit），替本文訂製一個使用者界面。
  4. 參考拙著《Python玩AI，你也可以 – 從CVZone入門吧！》（https://reurl.cc/AyZGkE），將測試資料置換成由攝影機餵入的即時（real-time）影像資料。
[2] https://reurl.cc/gQ59Vb 中的「fChart_CVZone工具」連結。
張貼者： 於 沒有留言:
標籤： , , ,
訂閱： 文章 (Atom)