Adobe AIR + Kinect (4) - Gesture with Arduino

這篇是關於自訂手勢 Static Gesture 

在之前有提到骨架資訊
Adobe AIR + Kinect (2) - Skeleton with 2D Character

首先感謝Gray Liao 在 Some extensions for AIRKinect  
一系列相關文章中給了我許多啟發與學習經驗，再次感謝。




目標：
比出 O & X的手勢來讓LED燈隨之亮滅。
來練習如何用自訂手勢來與Arduino互動吧!


AS
Custom Static Gesture 自訂靜態手勢：Bingo & Cross

Bingo

達成Bingo手勢的條件
◎ 雙手要高過頭部 (也不能過高，不然也不像圓圈 )
◎ 雙手要接近一定距離 (不要完全貼合)

在測試中發現手掌翻轉時會導致手部骨架位置資訊的變化，
結論是手心不要朝向螢幕，而是向下的角度完成(類似敬禮，如上圖)。

Cross

達成Cross手勢的條件

◎ 雙手不可高過頭頂 (約肩膀高度上下)
◎ 雙手交叉的位置靠近另一邊肩膀 (右手在左肩)

測試中發現了一些小細節，
當只是先計算單手靠近另一邊肩膀的距離值，
與雙手交叉靠近另一邊肩膀所得到的數據不同。
這應該是當做出交叉動作時，
Shoulder也會因為Hand 的關係(牽引)而有些許移動。

AS3 Connec to Arduino

使用as3Glue程式庫來與Arduino(實際上是SerProxy)連線，
並把Flash的訊息包裝成Firmata。
也可以同時參考這裡。

Arduino
Arduino +  LED (設定pin 13, 不附圖XD)

Arduino Code 

SerProxy (記得要開啟呀)

====================
                   心得
====================

坦白說自己寫的靜態手勢判斷算法並不嚴謹(只是判斷是否在預設範圍內而已)，
雖然預設是站著時判斷是否比出手勢，
但發現坐著coding時, 有時會莫名發生判定成功的情形XD
看來日後在設計時必須考慮更細微的使用情境會更好。

動作設定必須合理 & 清楚界定範圍：

在判定不相對嚴謹的情況下，
(要求嚴謹得要考慮更多種可能&實用性，只是實驗性質的判斷還不需要那麼複雜)如果有多種以上的動作偵測，更要留意誤判的可能性。
即使不是做出A，但不經意的動作也有可能導致觸發。
接近的Gesture最好不要在同一個情境下作多種事情，導致模稜兩可。
(此例的Bingo/Cross = ON/OFF，但別又同時擁有其他功能。)

使用的數據類型是 position.world (3D position in world coordinate space)
判斷的數值會因為與鏡頭距離的不同而有所差異。
所以假設使用情境下，
應該要求User與Kinect 保持在一定距離，
好讓判斷能夠收斂在固定範圍內。

我想不論是其他偵測動作的算法或感應器，這都應該是必備條件。
(不然距離太遠、不經意做出的動作而導致誤判，也是非常可能的。)

另外，position沒有另外與depth, rgb 比較，
不知在不同情況下是否可以採取對應的數據類型。(留待日後再研究吧XD)

影片請看這

Adobe AIR + Kinect (3) - Gesture with Game(vision checking)

Gesture手勢的應用

Github上的類別庫  NuiGesture

作者將所有的功能都封裝在裡面

因此只要這樣(↓)便可以使用，快速上手。






使用心得：

測試時發現感應太過靈敏了，就算只是身體移動也會被判定有資訊輸入(這樣很困擾欸)。
只要調降 NuiSettings.ActionCatchTime 的數值就可以了。
有時仍有誤判可能(例:不是正常站姿)，是較為美中不足之處。

NuiGesture 這個類別庫最大優勢在於，
可以輕鬆整合進自己的程式碼，
能夠進行基礎手勢「上、下、左、右」的方向判斷。  (左右手皆可, 預設只有開放右手)
便能開發基於此的更多體感互動應用。


使用肢體的自然姿勢，Gesture 能有很多種應用。
講到上下左右，最容易聯想到的還是小時候做過的視力檢查吧!
搭配 NuiGesture，做了個視力檢查的小遊戲，
玩玩看你的視力如何!?
影片請看我。



BTW, 關於視力檢查的美國用語

Adobe AIR + Kinect (2) - Skeleton with 2D Character

Skeleton

Kinect有使用者骨架的偵聽事件，當User進入到攝影鏡頭範圍時約略等待一會就能觸發。



搜尋一下也能看到前輩們關於骨架的描述教學，操作細節便不贅述了。
[教學] AIRKinect 的魔法帽子
AIRKinect [4] Skeleton 使用者骨架擷取

節錄重點：

1. Kinect最多可同時擷取6人，其中2人全身共20個骨架節點(SkeletonJoint)，另外4人只有核心節點。(後者看來實用性較不高)
雖然有擷取上半身的設定，不過測試時可能距離鏡頭太近，還是得站起來才能被辨識。
(抑或是這本來就是得讓User Skeleton先完整被偵測到才行!?)



2. 測試時解析度採用RGB預設640*480，下半身節點可能因為距離&電腦桌的關係導致對位不準確。似乎不太要緊，因為以用途看來沒有上半身節點來得多。(所以管他的呢!)

3. 骨架資訊應用的範圍很多，可說AIRKinect ANE有最大應用範圍的就是Skeleton，
除了上圖可以看到根據骨架位置貼上偷蛋豬之外XD，做個簡單的AR也就不是太難的事情。

更有甚者，根據骨架節點與節點之間的相對位置去判斷是否為靜態姿勢，
or擷取連續時間內根據節點路徑(或說軌跡)來判斷是否為手勢(Gesture)或其他姿勢。
以此就能有更多豐富的互動操作方式，

但這又是另外一回事囉......ANE內沒有這樣的feature。
在Github上遍尋關於AIRKinect Gesture的相當稀少且有限制(當然嘛....)。想必native C++, C# 的高手們也早就開發出對應於Kinect的眾多gesture or posture library。要有Gesture必須要靠自己完成，只能留待後話了.....(意思就是現在沒空&難度也不低)





言歸正傳

既然談到Skeleton，也許會想到是否User做甚麼動作，讓腳色也跟著一起動作呢?
答案是可以，但並不如想像中美好。

先解釋一開始測試的思路，單純的以為只要把腳色的肢體對應到人體上，
那麼User做甚麼動作，腳色貼圖也就跟著動作，這麼簡單就大功告成了!?

真是大錯特錯 (大錯特錯~不要來~)



◎肢體位置的對應
首先，以成人的比例而言，骨架的相對位置大多都是固定。
但腳色的四肢位置與比例，卻會因為設計或腳色本質的關係，而不可能每次都能與User對應。
以下圖的喵喵為例，若是以腳色head → User head還沒問題，
但腳色hand → User hand，那腳色不就變成手跟身體分家啦，
所以這個方式根本不可行。

◎肢體的角度極限
上圖中，可以看到User左手略為舉高，喵喵的左手也跟著平舉。
但右手已經舉到與頭同高，但腳色的手也無法跟著舉到對應的角度&高度!?

其實仔細觀察&思考，可以發現：
1. 標記圓圈的地方已經露餡啦! (設計時沒有考慮到手臂旋轉的細節)

2. 人體關節可以自然呈現移動的角度非常大(廢話)，但2D腳色可不是這樣，
    尤其是像這樣的2頭身腳色。(3D不熟無法評論，不過若是3D真人比例的模組來說，
    曾看過範例是可以做到的，只是不知如何實作)。

    如果沒有繪製對應的角度素材，硬是要讓腳色手臂旋轉角度跟User一樣，
    就會變成非常詭異的畫面.....(整隻手幾乎快跟身體分離，只剩一個點)



因此這個互動方式的要點在於
◎必須先設定 & 限制腳色的活動姿勢
◎承上，美術與程式討論後設計對應的素材
◎如果腳色的再用性不高，是否有必要為其特地coding & design?



在這個範例中實現了搖頭、擺手。
手部移動的原理是基於shoulder水平線 & hand的位置去計算夾角，

再轉換成元件可旋轉的角度。

喵喵搖頭的原理與上述類似，以 torso 為基準點，計算head的傾斜角度。
(不使用neck是因為也會移動，這樣就不準確了，只有軀幹是不可能亂旋轉的嘛)


像真人一樣帶動唱跳歌跳舞，看來不太可行。
儘管如此，還是能夠實現讓2D腳色可以隨著User作一些簡單運動。
若對象是小鬼們操控著自己喜愛的動漫腳色，
也能高興好一會兒吧!!

影片請點我

Adobe AIR + Kinect (1) - Beginning and UserMask with Effect

Before Start

Kinect1 vs Kinect2

如上圖，Kinect有2種類型，這裡使用的是第一代Kinect，對應的SDK版本是1.8。
若使用的硬體是Kinect 2，那麼就下載 Kinect for Windows SDK 2.0。
規定要 Win8以上才能使用，不然就會出現以下畫面....

使用AIRKinect開發，網路上已經有很多前輩分享的資訊可以參考，在此感謝。
韩 Hanleon - AIRKinect Tutorial
Gray Liao - AIRKinect
林克融 - 使用FlashDevelop與AirKinect 2.X開發Kinect應用程式
鴨道比 - [教學] AIRKinect 2.0 安裝
Alex - AIRKinect


另外，使用原生開發的 Heresy 也有相當豐富的資料。


照著連結下載SDK、ANE、設定開發環境，
跟著airkinect-2-examples的範例做，很快就可以發現有哪些功能可以玩玩，
不過如果只是照個範例依樣畫葫蘆就沒那麼有趣了，
AirKinect 正是要發揮Flash強大的互動能力才有意思呀!

For example：UserMask、Gesture、Skeleton、AR、with Arduino......










UserMask

一開始想到的方式是直接採用Starling Particle Effect套用在UserMask上，
Particle System只有在建構式的時候才能指定Texture，
我嘗試想要把UserMask.Bitmap放在EnterFrame中，
讓UserMask更新時同時指定給PDParticleSystem 建構式的texture參數，
可惜失敗了 ，看訊息是超過Texture所能承載的限制。

Error: Error #3691: Resource limit for this resource type exceeded.

只有靜止沒更新的BitmapData搭配PDParticleSystem 沒問題，
雖是學藝不精，但也花了太多時間在測試上只能喊停停損。




好吧，那麼退而求其次採用flash native effect
在網路上找到兩個特效範例 (搭配影片服用)

Electric： (程式碼由網友分享，出處已不可考。)
由於UserMask的特性是會不停變更 Bitmap.bitmapdata，
因此調整了一下原本的程式碼，讓UserMask套用效果時(onEnterFrame)，
必須將其變更的內容不斷重繪，這麼一來當User影像變更時，
不管採取甚麼姿勢，都可以看到影像周圍都有電流特效。

也可以看到FPS不甚理想(都已經是桌機了怎麼還....=_=)，
原來是因為效果是建立於不斷地重繪濾鏡，這吃效能的小怪獸身上。




Fire：(source)

出處來自人稱GS大神製作的火焰特效，
搭配組件使用，調整參數，完全不用coding，效能維持不墜，
(組件MC的圖層要在target上方)
讓你第一次當驚奇四超人的霹靂火就上手! (咦)

FireEffect 同樣是基於不斷變更的UserMask.bitmap而隨之變化，在畫面中可以發現，當User移動時效果會有略為延遲，
因而露出底下的UserMask，這也是運用時要稍微留意之處。


影片請看我

Adobe AIR for Mobile + Arduino + Bluetooth (3) - RELAY + Bulb/Fan

終於要正式進入繼電器的階段了。

如書上所說，家電大都是110V交流電，而微電腦零件大多是5V直流電，電子零件若直接通過110V電壓，肯定燒毀。

聽起來超恐怖的啊~~

所以這時候就要靠RELAY這玩意了!

關於RELAY的介紹：

Cooper Maa 繼電器簡介

Share！樂讀分享 [Arduino] 繼電器介紹 – Intro to Relay

WebDuino 繼電器控制風扇旋轉

簡單來說RELAY就是

「用小電壓控制大電壓」「用電磁鐵控制的開關」
輸入訊號，利用電磁鐵決定電流是否流通，在電路中有自動調節、安全保護、轉換電路等作用。

光有Relay是不夠的，在Arduino需要使用電晶體來提供Relay所需的大電流，且繼電器內部線圈在斷電時，會產生反電動勢，因此還需要在線圈處並接二極體。

好在，其實有現成的Relay Module，上述的問題就迎刃而解啦~

上圖中的接線方式

DC+：Arduino 3.3V
DC-：Arduino GND
IN：訊號輸入的Pin

上圖中的接線方式
NO 常開 ：家電的電源 (接收到訊號才開啟)
NC 常閉 ：與NO相反 (接收到訊號才關閉)
COM 共接點 ：110V電源






Arduino + Bluetooth Module + Relay








How to connect relay to Bulb?

預想中模擬圖如下，只要接上後再透過藍牙傳送訊號，看來似乎就可以達成了!?

等等，好像沒這麼簡單，有沒有發現了一個奇怪的地方？
圖中將原本燈泡的電線剪斷之後，再與繼電器延伸出來的電線連結包覆，
可是雖然想控制燈泡，但難道非得要破壞燈泡的線路嗎!?

該怎麼辦才好呢 !?





Solution：

STEP 1.以不破壞燈泡結構為前提，找一組延長線/插座，還有插頭，替代上圖的線路方案。

圖片來源 - [教學]用Arduino控制110V的電器



STEP 2.
燈泡電源只要接在這組延長線/插座上，而真正的市電來源就是插頭接在一般常見的插座上。

Arduino Coding

操作流程是先將手機上的藍牙訊號傳送給Arduino上的藍牙模組，
根據內容來決定是否對開啟/關閉Relay訊號的Pin腳位。

SoftSerial Port 的內容多加了「_%」是因為，不知甚麼原因從Arduino返回到手機上的訊息無法固定在同一時間段內完整顯示。
測試時在行動裝置上無法一次取得完整的字串，都是分好幾次才會將內容分別顯示完畢，例如第一次顯示為L，第二次才顯示OW，合起來才是LOW。
但如果是採用blueToothSerial.read();讀取第一個位元組，就不會有此問題。

(好像廢話，因為就那一個字元啊XD)

因此才自行加上了這組字串，用來判定訊息已經傳送完畢了。
ANE的問題？
Arduino傳送字串時出了問題？
原因不明 Q_Q

Bluetooth module → ArduinoRelay module → Fan 110V uploading code to Arduino

Using Mobile Device to control Fan or Bulb with Arduino


經過這些步驟，最後這樣就完成了透過用Arduino + Bluetooth 控制電器的目標了！
影片連結中風扇的風速開關當然還是得先按下去才會有作用，
如果電器換成是燈泡的話也是得先打開開關才行。
當按下ON訊號送出之後，風扇成功開始轉動的那一瞬間，
興奮心情真是筆墨難以形容啊!!!

影片請點我

Adobe AIR for Mobile + Arduino + Bluetooth (2) - LED

基本設定完成後，下一階段目的是透過藍牙來操控LED。
AIR for Mobile 要使用 Bluetooth 的功能得借助ANE。

Bluetooth ANE 

此處有幾個Bluetooth ANE的連結可供參考

1. as3breeze (Free) 測試是採用這個ANE，感謝作者無償提供。
不過，作者的網站似乎是被駭客給搞掛了，已經過了好一陣子都不見修復。 囧
在取得資源沒多久之後就......=_=
不過這邊還是可以取得範例檔 & ANE，範例檔請點我。
AS3 Game Gear 還有其ANE內部的基本程式碼介紹。
Author Linkedin：Danel Kirch

2. distriqt ($20)

3. myflashlabs ($14.99)

Arduino Coding

根據作者網站的程式碼略為調整一下......
將輸出訊號的Pin設為13
當輸入1時代表高電位，LED亮起。
當輸入0時代表低電位，LED熄滅。

AIR for Android connect with Bluetooth module

作者提供的範例已經有APK可以使用，簡述與藍芽模組的連線流程：

1. Scan - 搜尋附近可用的藍牙裝置。這裡選定之前命名過的myBT_HC-06。

2. Bond - 配對類似記憶的概念，只要輸入一次Pin code便可，預設為1234。

3. Connect - 連接，與對應的藍牙裝置連結。當連線成功時，原本藍芽模組閃爍的燈號將會轉為恆亮。(Bond 並不算是真正的連結喔)
請看影片

到這裡已經初步完成用行動裝置控制LED，離目標越來越近啦~~~かんばって！

Adobe AIR + Leap Motion - 3 : Arduino

<開發過程記錄>

PART I: 

Arduino communicate with Flash
Code to run on the Arduino
Firmata - just get your software to send commands that will get Arduino to do what you need. 讓Arduino與其他軟體溝通的通訊協定，支援眾多語言(也包含AS3)。
   
Serial to Socket Server
SerProxy - Serial-to-Network Proxy Server.

Flash Socket Library
Glue - Flex/ActionScript 3 class and sample code for Arduinos with Firmata.(※註1)
   
Your Flash Code
做個從燈泡熄滅→全亮的補間動畫。其餘BJ4
※註1
Flash本身不具備序列埠連線功能，要藉由 SerProxy(中介軟體) 建立+監聽 TCP Port 5331的Socket Server，Flash再透過Socket類別(這裡使用的是as3Glue: for Arduino with Firmata) 連線到Socket Server，而Arduino再連線到序列埠，軟硬體就可以進行雙向溝通了。

PART II:

Step 1.
Flash - 先與Leap Motion Ctroller建立連線(with ANE)，確認可辨認手勢 Gesture.TYPE_CIRCLE，自行設定順時針為漸亮，逆時針為漸暗。

Step 2.
Arduino - Arduino IDE 編寫接收&處理Firmata類比訊息，編譯&上傳到Arduino。(採用書中範例)

Step 3.
Flash - 撰寫與Arduino連線的程式碼，使用Flash Socket Libraby，類別是as3Glue。

  

話不多說，看影片見分曉。
連結請按我

Adobe AIR + Leap Motion - 2 : Starling Particle

Adobe AIR + Leap Motion Controller + Starling Particle

根據前次範例修改，透過 Particle Editor 取得對應的檔案，
再依據取得的手指資訊對應成 PDParticleSystem實體，
也要稍微控制一下粒子數量，否則視覺體驗與效能都會有影響。

如影片所示，用手指運動展現絢麗的粒子效果。

連結請按我



附註：Particle Editor for Starling Framework 不能在無痕視窗中使用並輸出檔案(我使用Chrome)。

Adobe AIR + Leap Motion - 1 : LeapStatus

Adobe AIR + Leap Motion Controller

心得：
雖然可以藉由ANE 進行開發，但只要官方更新SDK or API，
但作者沒有隨之對應處理的話就麻煩了.........
一般開發者並沒有能力自己開發ANE，
這會造成若上述條件都發生時，會變成根本無法跨越的障礙之牆.......... =_=|||

工具再強，無法使用/過時，也是枉然。

只能說，個人深表遺憾......囧rz



LeapStatus 參考來自  android application
但下載SWC卻無法使用，後來經過某暗黑方式(很可怕不要問)瞭解後，
才知道因ANE版本不同，在創造Controller實體時的方式有所不同，
經簡單修改重製成目前ANE可對應版本。


如影片所示，偵測手指尖端位置與Z軸深度並對應呈現在畫面中。
LeapStatus 可以顯示對應的手指、掌心所在位置、速度.....etc

連結請按我