狠狠撸

狠狠撸Share a Scribd company logo
QML 培訓課程 -
LeapMotion & Arduino
DIRO FAN
diro.fan@gmail.com
2014/01/31@台開大樓
FB: QT@Taiwan
看起來快要可以舉辦Qt@Taiwan聯誼活動了
https://www.facebook.com/groups/qtdev/
我們也會在這裡分享一些Qt的開發經驗
http://vvtk-digest.blogspot.tw/
講這麼多場終於可以讓我扯到C++了
感謝 hackathon.tw
先抒發一下..
第一頁不就寫了嘛...
今天探討兩種互動裝置
Leap Motion
Leap Motion
Leap Motion Tracking Model
LeapMotion - Hand
1. Hand
a. id
b. palm
i. yaw, pitch, raw
c. left, right
d. sphere radius
e. finger
i. pointable
ii. bone
LeapMotion - Gesture
1. Gesture
a. Circle
b. Swipe
c. KeyTap
d. ScreenTap
Leap Motion SDK
1. Various platform
a. Mac / Linux / WIndows
2. Various language
a. JavaScript / C# / C++ / Java / Python / Objective-C
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
用這SDK看起來很痛苦啊
我們 QML 是快快樂樂系列課程 不是吗!
QtLeapMotionLibrary!
別怕!救世主來了
QtLeapMotionLibrary
QML component for Leap Motion integration
1. https://github.com/lemirep/QtLeapMotionLibr
ary
2. https://lemirep.wordpress.com/
3. 目前已完成 Hand, Gesture 兩個主要部份
安裝 QtLeapMotion Library
1. 安裝Leap Motion SDK
2. 將安裝完畢後的 SDK 中的 Leap 資料夾複製一份到
QtLeapMotionLibrary/QtLeapMotion/Leap 中,照這目錄
結構放可以省掉不少調整 project file 的功夫
3. 原本的版本並不支援 Mac (project file 沒有處理mac
build),因此請在各 example 中的 .pro 檔中稍作修改
a. 好啦,我晚點會放上github..
基礎用法
1. 直接用 QtLeapMotionQQuickVIew 取代原本的 QQuickView
QtLeapMotion::QtLeapMotionQQuickView *view = new
QtLeapMotion::QtLeapMotionQQuickView();
1. 然後你的程式就直接可以用LeapMotion了
2. 一些設定
view->setLeapMouseEnabled(true);
view->setLeapTouchEnabled(true);
來試看看吧!
SHOW TIME
感謝作者
真的是太簡單了..
進階用法 - HandsMotionArea
運用sphere偵測握拳
// if sphereradius < 50 mm, we have a fist
this->setFist(hand->sphereRadius() <= 50.0f);
就等大家去發揮了
還有很多細節功能
歡迎有志熱血青年一起來完成它!
其實,還有不少功能未完成
QML + Arduino & Leap Motion
QML + Arduino & Leap Motion
這塊板子可以幹嘛??
除了吃,剩的都可以..
1. 基本款
a. 偵測現在環境的亮度
b. 取得可變電阻的電壓值
c. 取得土壤溼度
d. 開關LED燈
e. 透過繼電器開關大電流電器
2. 進階款
a. Wii 搖桿、紅外線遙控器、四軸飛行器
b. 還有超多應用,可以上網查,或著去隔壁房間聽 XD
讓電腦與外界互動!
今天教大家做..
1. QML 環境亮度感測器
2. 復古造型電腦音量控制器
3. QML 開關控制器
用蚕惭尝看起来就是比较潮
讓我們先進入實境秀~
SHOW TIME!
會用到的小元件
光敏電阻 復古旋鈕
合体后大概长这样
看似複雜,但其實..
我們就是要去讀Analog In的值而已,很簡單
要讀到值有很多種管道
1. Serial Port
a. 透過 Serial.println() & Serial.read() 互動
2. Network (wire/wireless)
a. 透過 Web Server GET/POST 來互動
3. Bluetooth
a. 歹勢,我沒用過 Orz..
網路/藍芽 都要另外接板子
為了快速上手,我們就先不用了..
從 SerialPort 出發!
簡單好用,無腦上手
Qt 的 QSerialPort
QSerialPortInfo
如何得到所有的 serial port 列表:
QList<QSerialPortInfo> portlist = QSerialPortInfo::availablePorts();
foreach ( const QSerialPortInfo &serialPortInfo, portlist)
{
QObject::tr("Port: ") << serialPortInfo.portName() << endl;
}
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);
Read/Write Serial Port
Read
QObject::connect(&serial, &QSerialPort::readyRead, [=]()
{
QString databuf = serial.readAll();
}
Write
serial.write("HELLO WORLD!")
讀寫 SerialPort 真的很簡單
難的是訂定通訊協定...
沒有現成的SerialPort QML元件可以用
不過很可惜
都上那麼多堂了,一定要自己來的啊
自己的 QML 元件自己做!
第一步,先定義自己的通訊協定吧!
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
第二步,列出需要那些函式:
取得亮度及音量
qint32 brightness()
qint32 volume();
開關特定id
void turnOn(qint32 id);
void turnOff(qint32 id);
第三步,包成一個 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;
};
看不懂?
你早上一定蹺了Jack的課..
第四步,實作 讀取亮度及音量 的程式
碼
QML + Arduino & Leap Motion
ArduinoMgr arduino(0);
view->engine()->rootContext()->setContextProperty("arduino", &arduino);
再把這它強灌進入QML
只要這樣,就會有一個很棒的UI幫你顯示環境亮度了:
Dial
{
value:120 - (arduino.brightness / 1024) * 120;
}
有了 property binding 的加持,寫 code 是快樂的一件事
接下來,輕輕鬆鬆..
啊,怎麼不會動...
廢話,Arduino的code還沒寫啊
QML + Arduino & Leap Motion
可以講C++太興奮了,所以連lambda也出來了..
讓我們到 Qt Creator
看看完整範例吧!
QML 輕輕揮家電控制系統?
相信學到這大家已經有很多
點子在燃燒了!
Thank You!
The End

More Related Content

Viewers also liked (6)

QML 培訓課程 - 遊戲製作入門
QML 培訓課程  - 遊戲製作入門QML 培訓課程  - 遊戲製作入門
QML 培訓課程 - 遊戲製作入門
diro fan
?
Android-Arduino interaction via Bluetooth
Android-Arduino interaction via BluetoothAndroid-Arduino interaction via Bluetooth
Android-Arduino interaction via Bluetooth
Open Makers Italy
?
Bluetooth android application For interfacing with arduino
Bluetooth android application For interfacing with arduinoBluetooth android application For interfacing with arduino
Bluetooth android application For interfacing with arduino
sumit chakraborty
?
Communication entre android et arduino via bluetoothCommunication entre android et arduino via bluetooth
Communication entre android et arduino via bluetooth
Bedis ElAchèche
?
Android bluetooth
Android bluetoothAndroid bluetooth
Android bluetooth
Masahiro Hidaka
?
QML 培訓課程 - 遊戲製作入門
QML 培訓課程  - 遊戲製作入門QML 培訓課程  - 遊戲製作入門
QML 培訓課程 - 遊戲製作入門
diro fan
?
Android-Arduino interaction via Bluetooth
Android-Arduino interaction via BluetoothAndroid-Arduino interaction via Bluetooth
Android-Arduino interaction via Bluetooth
Open Makers Italy
?
Bluetooth android application For interfacing with arduino
Bluetooth android application For interfacing with arduinoBluetooth android application For interfacing with arduino
Bluetooth android application For interfacing with arduino
sumit chakraborty
?
Communication entre android et arduino via bluetoothCommunication entre android et arduino via bluetooth
Communication entre android et arduino via bluetooth
Bedis ElAchèche
?

Similar to QML + Arduino & Leap Motion (20)

igdshare 110220: LuaJIT intro
igdshare 110220: LuaJIT introigdshare 110220: LuaJIT intro
igdshare 110220: LuaJIT intro
igdshare
?
程式人雜誌 -- 2013 年 2 月號
程式人雜誌 -- 2013 年 2 月號程式人雜誌 -- 2013 年 2 月號
程式人雜誌 -- 2013 年 2 月號
鍾誠 陳鍾誠
?
用最潮的 Java script 盡情開發 kde qt 程式
用最潮的 Java script 盡情開發 kde qt 程式用最潮的 Java script 盡情開發 kde qt 程式
用最潮的 Java script 盡情開發 kde qt 程式
Fred Chien
?
U boot 程式碼打掃計畫
U boot 程式碼打掃計畫U boot 程式碼打掃計畫
U boot 程式碼打掃計畫
Macpaul Lin
?
Python&GUI
Python&GUIPython&GUI
Python&GUI
Leo Zhou
?
NSCTF
NSCTFNSCTF
NSCTF
Yi Tseng
?
ajax_onlinemad
ajax_onlinemadajax_onlinemad
ajax_onlinemad
Kitor23
?
滲透測試 Talk @ Nisra
滲透測試 Talk @ Nisra滲透測試 Talk @ Nisra
滲透測試 Talk @ Nisra
Orange Tsai
?
Raspberry Pi 溫濕度發報機
Raspberry Pi 溫濕度發報機Raspberry Pi 溫濕度發報機
Raspberry Pi 溫濕度發報機
艾鍗科技
?
LLVM introduction
LLVM introductionLLVM introduction
LLVM introduction
National Cheng Kung University
?
资工人的学习成长之路
资工人的学习成长之路资工人的学习成长之路
资工人的学习成长之路
Murphy Chen
?
20200905_tcn_python_opencv_part1_omnixri
20200905_tcn_python_opencv_part1_omnixri20200905_tcn_python_opencv_part1_omnixri
20200905_tcn_python_opencv_part1_omnixri
OmniXRI Studio
?
OpenLab.Taipei #2 PORTA2030
OpenLab.Taipei #2 PORTA2030OpenLab.Taipei #2 PORTA2030
OpenLab.Taipei #2 PORTA2030
Rex Tsai
?
COSCUP2016 - LLVM框架、由淺入淺
COSCUP2016 - LLVM框架、由淺入淺COSCUP2016 - LLVM框架、由淺入淺
COSCUP2016 - LLVM框架、由淺入淺
hydai
?
COSCUP 2016 - LLVM 由淺入淺
COSCUP 2016 - LLVM 由淺入淺COSCUP 2016 - LLVM 由淺入淺
COSCUP 2016 - LLVM 由淺入淺
宗凡 楊
?
开放硬体认知学习指引
开放硬体认知学习指引开放硬体认知学习指引
开放硬体认知学习指引
MAKERPRO.cc
?
Big Data : The Missing Puzzle of Mobile Computing
Big Data : The Missing Puzzle of Mobile ComputingBig Data : The Missing Puzzle of Mobile Computing
Big Data : The Missing Puzzle of Mobile Computing
Jazz Yao-Tsung Wang
?
Introduction of Reverse Engineering
Introduction of Reverse EngineeringIntroduction of Reverse Engineering
Introduction of Reverse Engineering
YC Ling
?
live coding 賴群猜謎小遊戲
live coding 賴群猜謎小遊戲live coding 賴群猜謎小遊戲
live coding 賴群猜謎小遊戲
LINE Corporation
?
igdshare 110220: LuaJIT intro
igdshare 110220: LuaJIT introigdshare 110220: LuaJIT intro
igdshare 110220: LuaJIT intro
igdshare
?
程式人雜誌 -- 2013 年 2 月號
程式人雜誌 -- 2013 年 2 月號程式人雜誌 -- 2013 年 2 月號
程式人雜誌 -- 2013 年 2 月號
鍾誠 陳鍾誠
?
用最潮的 Java script 盡情開發 kde qt 程式
用最潮的 Java script 盡情開發 kde qt 程式用最潮的 Java script 盡情開發 kde qt 程式
用最潮的 Java script 盡情開發 kde qt 程式
Fred Chien
?
U boot 程式碼打掃計畫
U boot 程式碼打掃計畫U boot 程式碼打掃計畫
U boot 程式碼打掃計畫
Macpaul Lin
?
ajax_onlinemad
ajax_onlinemadajax_onlinemad
ajax_onlinemad
Kitor23
?
滲透測試 Talk @ Nisra
滲透測試 Talk @ Nisra滲透測試 Talk @ Nisra
滲透測試 Talk @ Nisra
Orange Tsai
?
Raspberry Pi 溫濕度發報機
Raspberry Pi 溫濕度發報機Raspberry Pi 溫濕度發報機
Raspberry Pi 溫濕度發報機
艾鍗科技
?
资工人的学习成长之路
资工人的学习成长之路资工人的学习成长之路
资工人的学习成长之路
Murphy Chen
?
20200905_tcn_python_opencv_part1_omnixri
20200905_tcn_python_opencv_part1_omnixri20200905_tcn_python_opencv_part1_omnixri
20200905_tcn_python_opencv_part1_omnixri
OmniXRI Studio
?
OpenLab.Taipei #2 PORTA2030
OpenLab.Taipei #2 PORTA2030OpenLab.Taipei #2 PORTA2030
OpenLab.Taipei #2 PORTA2030
Rex Tsai
?
COSCUP2016 - LLVM框架、由淺入淺
COSCUP2016 - LLVM框架、由淺入淺COSCUP2016 - LLVM框架、由淺入淺
COSCUP2016 - LLVM框架、由淺入淺
hydai
?
COSCUP 2016 - LLVM 由淺入淺
COSCUP 2016 - LLVM 由淺入淺COSCUP 2016 - LLVM 由淺入淺
COSCUP 2016 - LLVM 由淺入淺
宗凡 楊
?
开放硬体认知学习指引
开放硬体认知学习指引开放硬体认知学习指引
开放硬体认知学习指引
MAKERPRO.cc
?
Big Data : The Missing Puzzle of Mobile Computing
Big Data : The Missing Puzzle of Mobile ComputingBig Data : The Missing Puzzle of Mobile Computing
Big Data : The Missing Puzzle of Mobile Computing
Jazz Yao-Tsung Wang
?
Introduction of Reverse Engineering
Introduction of Reverse EngineeringIntroduction of Reverse Engineering
Introduction of Reverse Engineering
YC Ling
?
live coding 賴群猜謎小遊戲
live coding 賴群猜謎小遊戲live coding 賴群猜謎小遊戲
live coding 賴群猜謎小遊戲
LINE Corporation
?

QML + Arduino & Leap Motion