如何使用 Kinect 手勢滑動介面選單 (For Windows SDK V1)

Photobucket


















這是一篇 Kinect 進階應用的文章,

需要建立在這些基礎概念上:

1. Kinect 骨架追蹤

2. Kinect 手勢判斷

3. Kinect 模擬滑鼠動作

以上1、2和3的概念,KT這邊就不在老調重彈了,

所以將焦點放在這次主題「滑動介面選單」上,

我們可以先參考一下,目前在XBOX 360遊戲主機上的Kinect互動使用介面:

Photobucket

上圖白色手(KT這邊簡稱他為飛手),

就像電腦滑鼠鼠標一樣,當飛手在畫面按鈕停留,

飛手周圍會出現圓圈圈確認程序(Hover Button / Hover Control),

繞完一圈則代表Click 按下按鈕動作,

若中途使用者將飛手移走,未繞完一圈則未有Click 按下按鈕動作。

(原文:Hover Button/Control,意指飛手,盤旋在按鈕上的這個動作)

Photobucket

另外一件事,當飛手撥動畫面時,

如:由右至左撥動,畫面選單可滑動至另一頁選單。

所以我們這次主要學習目標為:手勢滑動介面選單



  • 如何製作手勢滑動介面選單

在這個例子裡,KT先布置好三個畫面介面選單,

Photobucket

分別定義為左、主和右畫面,且編上編號。

這個畫面設計概念來自芒果機Phone 7 ,橫向捲軸(panorama),滑動切換選單。

Photobucket

介面選單互相交替的動畫,

我們通常稱他為過場動畫,如:iPhone上手機經典的切換程式間的過場動畫,

採用淡進淡出的一個過場效果呈現,而我們要讓畫面之間切換有一些變化,

我們則需要去設計這過場動畫,

在WPF裡很我們可以透過故事模板(Storyboard)功能,可以很迅速方便,

立即設計出迷人的動畫,當然這即是WPF最大特色之一,而故事模板(Storyboard),

這部分隸屬於WPF範疇裡,Kinect 這邊,KT 就不贅述如何寫故事模板,

有興趣可以參考WPF書籍裡的動畫相關章節。


而這個範例裡,KT簡單設計了四個故事模板,分別是

1.主畫面=>左畫面,左畫面=>主畫面
Photobucket


2.主畫面=>右畫面,右畫面=>主畫面
Photobucket

而在切換畫面時,畫面會轉一個小角度然後滑到另一個畫面,
(當然你也可以改成不轉角度,直接平滑過去)

動畫程式碼可以參考MainWindow.xaml裡面的:
LeftStoryboard_F(主畫面=>左畫面)
LeftStoryboard_B(左畫面=>主畫面)
RightStoryboard_F(主畫面=>右畫面)
RightStoryboard_B(右畫面=>主畫面)

設計了四個過場動畫的故事模板後,

這時即可搭配手勢辨識,來觸發不一樣的動畫。

而KT這邊簡單寫了一個,位置旗標的演算法,來判斷目前螢幕畫面所在位置,
Photobucket
  • 旗標初始位置為(1):
當左手揮動,旗標位置切換至(0)=>撥放LeftStoryboard_F(主畫面=>左畫面)
當右手揮動,旗標位置切換至(2)=>撥放 RightStoryboard_F (主畫面=>右畫面)
  • 旗標初始位置為(0):
當左手揮動,不做任何改變
當右手揮動,旗標位置切換至(1)=>撥放 LeftStoryboard_B(左畫面=>主畫面)
  • 旗標初始位置為(2):
當左手揮動,旗標位置切換至(1)=>撥放 RightStoryboard_B(右畫面=>主畫面)
當右手揮動,不做任何改變

位置旗標程式碼:
//========================
//==="右手"揮動判斷式=====
//========================
if (Order == 1)//主畫面
{
 my_sb = (Storyboard)this.FindResource("RightStoryboard_F");//畫面切至右畫面
 Order = 2;//畫面旗標設為右畫面
}
else if (Order == 0)//左畫面
{
 my_sb = (Storyboard)this.FindResource("LeftStoryboard_B");//畫面切至主畫面
 Order = 1;//畫面旗標設為主畫面
}
my_sb.Begin(this);

//========================
//==="左手"揮動判斷式=====
//========================
if (Order == 1)//主畫面
{
 my_sb = (Storyboard)this.FindResource("LeftStoryboard_F");//畫面切至左畫面
 Order = 0;//畫面旗標設為左畫面
}
else if (Order == 2)//右畫面
{
 my_sb = (Storyboard)this.FindResource("RightStoryboard_B");//畫面切至主畫面
 Order = 1;//畫面旗標設為主畫面
}
my_sb.Begin(this);
               

而我們可使用右手關節點的座標來控制滑鼠鼠標,

可是你會發現,預設箭頭鼠標與大按鈕比較起來非常小,

這時我們可以透過CursorHelper(取自Ouch@點部落)

來更改預設箭頭鼠標為一隻飛手的樣式,

Photobucket

讓使用者去點選按鈕時,眼睛不會看的那麼吃力,

所以在主畫面時可將飛手移至按鈕上,左手舉起來觸發左鍵按下命令。

這邊三個按鈕點擊時會出現簡單三個訊息視窗,分別表示自己被點擊。

而你這邊當然就可以改成你所想要觸發的事件。

結果展示影片:



範例程式碼下載:



更多相關參考範例應用:


1.飛手繞圈動畫,
可參考 KinectPaint 、kinect button press 、Kinecting the Dots 等範例。


2.更改預設箭頭鼠標: UserControl當作滑鼠游標


相關文章參考:
HKT線上教學教室 - Kinect 教學目錄



這個網誌中的熱門文章

最新入門零基礎 Java 教學【從零開始學 Java 程式設計】Java教學課程目錄 (IntelliJ IDEA 開發教學)

2023 最新入門零基礎 Kotlin教學【從零開始學 Kotlin 程式設計】Kotlin 教學課程目錄 (Android Kotlin, IntelliJ IDEA, Android Studio, Android APP 開發教學)

nano 文字編輯器

2022 最新入門零基礎 Flutter教學 【Flutter 程式設計入門實戰 30 天】Flutter 教學課程目錄 (IntelliJ IDEA 開發教學)

Android Studio 歷代版本下載點