星期日, 4月 01, 2012

如何使用 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 教學目錄



9 則留言 :

  1. KT大大你好!
    我是阿彥
    看過你的影片讓我獲益良多@@
    但有一個地方不太了解@@ 懇請大大幫我解惑!
    情形:當我移動那兩張圖片之後,在開啟程式,仍然可以左右移動,但兩張圖片就都看不到了,圖片移回去狀況也一樣,只有按CTRL+Z按回原樣後開起才回復原樣
    問題:旗標是定義在哪裡呢@@? 如何讓旗標與圖片連在一起@@? 懇請大大解惑^^~

    回覆刪除
  2. 哈囉~阿彥,

    這些基本觀念都建立在"WPF"上面喔!!!

    KT這邊貼心建議,若"WPF"不熟,需先跟"WPF"混熟喔!!!

    回覆刪除
  3. KT大大你好
    我是阿彥
    謝謝你的建言@@
    我後來看懂他是在畫布裡面了
    想請問
    如果我想往左推一次在推一次和往右推一次在一次應該 怎麼做@@
    我目前只知道是和storybroad有關
    但我看不懂>"<
    懇請KT大大幫忙

    回覆刪除
  4. KT大大好
    我是阿彥
    研究了很久 我還是不懂
    LeftStoryboard_F 中
    SplineDoubleKeyFrame KeyTime="0:0:1" Value="84.8"/ 的意思

    把value改成0之後就不會動了@@
    但是RightStoryboard_B 中 裡面的value都是0@@

    懇請大大教導><

    回覆刪除
  5. KT大大你好
    我是阿彥 經過我不斷的研究@@
    想請問Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="Right_menu">
    中的).(TransformGroup.Children)[3] 裡面的[3]是不是代表集合 可以裝3個值呢?
    那3個值是不是就是Right_menu那些?

    懇請大大解答
    一直煩忙你真不好意思><

    回覆刪除
  6. 如何製作Storybroad 與相關問題,可以參考MSDN這篇文章:

    Storyboards Overview
    http://msdn.microsoft.com/en-us/library/ms742868.aspx

    回覆刪除
  7. KT大大您好!
    这些资料都精彩,非常感谢
    我有个疑问,不需要通过BUTTON,直接推手(Push hand),该如何检测和响应事件

    回覆刪除
  8. 使用碰撞偵測:

    Hit Testing
    http://msdn.microsoft.com/en-us/library/ms752097.aspx

    供您參考

    回覆刪除
  9. 非常感谢您的回复,
    我叫庆忠,
    我不知道该如何识别推手手势(Push Hand)?

    又要麻烦您不好意思

    回覆刪除

回覆意見時,麻煩輸入一下暱稱
(隨便取個名字也好~ ^_^)
好讓我方便回覆您的問題,
選擇「名稱/網址」輸入您的暱稱,
麻煩一下,謝謝大家。

關閉廣告 [X]