狠狠撸

狠狠撸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

QML + Arduino & Leap Motion