QML with Arduino & Leap Motion

1. QML 培訓課程 -
LeapMotion & Arduino
DIRO FAN
diro.fan@gmail.com
2014/01/31@台開大樓

2. FB: QT@Taiwan
看起來快要可以舉辦Qt＠Taiwan聯誼活動了
https://www.facebook.com/groups/qtdev/

3. 我們也會在這裡分享一些Qt的開發經驗
http://vvtk-digest.blogspot.tw/

4. 講這麼多場終於可以讓我扯到C++了
感謝 hackathon.tw
先抒發一下..

5. 第一頁不就寫了嘛...
今天探討兩種互動裝置

6. Leap Motion

7. Leap Motion

8. Leap Motion Tracking Model

9. LeapMotion - Hand
1. Hand
a. id
b. palm
i. yaw, pitch, raw
c. left, right
d. sphere radius
e. finger
i. pointable
ii. bone

10. LeapMotion - Gesture
1. Gesture
a. Circle
b. Swipe
c. KeyTap
d. ScreenTap

11. Leap Motion SDK
1. Various platform
a. Mac / Linux / WIndows
2. Various language
a. JavaScript / C# / C++ / Java / Python / Objective-C

12. Reference
1. http://blog.leapmotion.com/getting-started-leap-motion-sdk/
2. https://developer.leapmotion.com/documentation/python/devguide/Leap_Tr
acking.html
3. https://developer.leapmotion.com/documentation/java/devguide/Leap_Tou
ch_Emulation.html
4. http://robotics.csie.ncku.edu.tw/InsideLab.htm
5. http://www.game.csie.ndhu.edu.tw/gamewiki/index.php/%E9%AB%94%E6
%84%9F%E4%BA%92%E5%8B%95%E5%A8%9B%E6%A8%82%E8%B
B%9F%E9%AB%94%E8%A8%AD%E8%A8%88

13. 用這SDK看起來很痛苦啊
我們 QML 是快快樂樂系列課程 不是嗎!

14. QtLeapMotionLibrary！
別怕！救世主來了

15. QtLeapMotionLibrary
QML component for Leap Motion integration
1. https://github.com/lemirep/QtLeapMotionLibr
ary
2. https://lemirep.wordpress.com/
3. 目前已完成 Hand, Gesture 兩個主要部份

16. 安裝 QtLeapMotion Library
1. 安裝Leap Motion SDK
2. 將安裝完畢後的 SDK 中的 Leap 資料夾複製一份到
QtLeapMotionLibrary/QtLeapMotion/Leap 中，照這目錄
結構放可以省掉不少調整 project file 的功夫
3. 原本的版本並不支援 Mac (project file 沒有處理mac
build)，因此請在各 example 中的 .pro 檔中稍作修改
a. 好啦，我晚點會放上github..

17. 基礎用法
1. 直接用 QtLeapMotionQQuickVIew 取代原本的 QQuickView
QtLeapMotion::QtLeapMotionQQuickView *view = new
QtLeapMotion::QtLeapMotionQQuickView();
1. 然後你的程式就直接可以用LeapMotion了
2. 一些設定
view->setLeapMouseEnabled(true);
view->setLeapTouchEnabled(true);

18. 來試看看吧!
SHOW TIME

19. 感謝作者
真的是太簡單了..

20. 進階用法 - HandsMotionArea

21. 運用sphere偵測握拳
// if sphereradius < 50 mm, we have a fist
this->setFist(hand->sphereRadius() <= 50.0f);

22. 就等大家去發揮了
還有很多細節功能

23. 歡迎有志熱血青年一起來完成它！
其實，還有不少功能未完成

26. 這塊板子可以幹嘛??
除了吃，剩的都可以..

27. 1. 基本款
a. 偵測現在環境的亮度
b. 取得可變電阻的電壓值
c. 取得土壤溼度
d. 開關LED燈
e. 透過繼電器開關大電流電器
2. 進階款
a. Wii 搖桿、紅外線遙控器、四軸飛行器
b. 還有超多應用，可以上網查，或著去隔壁房間聽 XD
讓電腦與外界互動！

28. 今天教大家做..
1. QML 環境亮度感測器
2. 復古造型電腦音量控制器
3. QML 開關控制器

29. 用QML看起來就是比較潮

30. 讓我們先進入實境秀~
SHOW TIME！

31. 會用到的小元件
光敏電阻 復古旋鈕

32. 合體後大概長這樣

33. 看似複雜，但其實..
我們就是要去讀Analog In的值而已，很簡單

34. 要讀到值有很多種管道
1. Serial Port
a. 透過 Serial.println() & Serial.read() 互動
2. Network (wire/wireless)
a. 透過 Web Server GET/POST 來互動
3. Bluetooth
a. 歹勢，我沒用過 Orz..

35. 網路/藍芽 都要另外接板子
為了快速上手，我們就先不用了..

36. 從 SerialPort 出發！

37. 簡單好用，無腦上手
Qt 的 QSerialPort

38. QSerialPortInfo
如何得到所有的 serial port 列表：
QList<QSerialPortInfo> portlist = QSerialPortInfo::availablePorts();
foreach ( const QSerialPortInfo &serialPortInfo, portlist)
{
QObject::tr("Port: ") << serialPortInfo.portName() << endl;
}

39. QSerialPort
開啟 serial port，並設定相關資訊
serial.setPortName("usbmodem1451");
serial.open(QIODevice::ReadWrite);
if(!serial.isOpen())
{
qDebug()<<"port is not open"<<endl;
}
serial.setBaudRate(QSerialPort::Baud9600);
serial.setDataBits(QSerialPort::Data8);
serial.setParity(QSerialPort::NoParity);
serial.setStopBits(QSerialPort::OneStop);
serial.setFlowControl(QSerialPort::NoFlowControl);

40. Read/Write Serial Port
Read
QObject::connect(&serial, &QSerialPort::readyRead, [=]()
{
QString databuf = serial.readAll();
}
Write
serial.write("HELLO WORLD!")

41. 讀寫 SerialPort 真的很簡單
難的是訂定通訊協定...

42. 沒有現成的SerialPort QML元件可以用
不過很可惜

43. 都上那麼多堂了，一定要自己來的啊
自己的 QML 元件自己做！

44. 第一步，先定義自己的通訊協定吧!
1. 亮度 BRIGHTNESS
a. B:xxxx
2. 音量 VOLUME
a. V:xxxx
3. TURN_ON
a. CMD:TURN_ON_id
4. TURN_OFF
a. CMD:TURN_OFF_id

45. 第二步，列出需要那些函式：
取得亮度及音量
qint32 brightness()
qint32 volume();
開關特定id
void turnOn(qint32 id);
void turnOff(qint32 id);

46. 第三步，包成一個 QObject class
class ArduinoMgr : public QObject
{
Q_OBJECT
Q_PROPERTY(qint32 brightness READ brightness NOTIFY brightnessChanged)
Q_PROPERTY(qint32 volume READ volume NOTIFY volumeChanged)
public:
ArduinoMgr(QObject *parent);
public slots:
qint32 brightness();
qint32 volume();
void turnOn(qint32 id);
void turnOff(qint32 id);
signals:
void brightnessChanged();
void volumeChanged();
private:
QSerialPort serial;
QString databuf;
QString m_author;
qint32 m_brightness;
qint32 m_volume;
};

47. 看不懂？
你早上一定蹺了Jack的課..

48. 第四步，實作 讀取亮度及音量 的程式
碼

50. ArduinoMgr arduino(0);
view->engine()->rootContext()->setContextProperty("arduino", &arduino);
再把這它強灌進入QML

51. 只要這樣，就會有一個很棒的UI幫你顯示環境亮度了：
Dial
{
value:120 - (arduino.brightness / 1024) * 120;
}
有了 property binding 的加持，寫 code 是快樂的一件事
接下來，輕輕鬆鬆..

52. 啊，怎麼不會動...
廢話，Arduino的code還沒寫啊

54. 可以講C++太興奮了，所以連lambda也出來了..
讓我們到 Qt Creator
看看完整範例吧!

55. QML 輕輕揮家電控制系統?
相信學到這大家已經有很多
點子在燃燒了！

56. Thank You！
The End