Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

QML + Arduino & Leap Motion

2,026 views

Published on

QML with Arduino & Leap Motion

Published in: Technology
  • Be the first to comment

QML + Arduino & Leap Motion

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

×