นั่งเล่น Qt + MQTT
Topic
SECTION #1:เบื้องต้น Qt
- เริ่มลง Qt
- hello world
- โครงสร้างต่างๆ ของ Qt Creator
- นิดหน่อยกับ Signal & Slot
SECTION #2 :Qt + MQTT
- รู้จักกับ MQTT
- ตั้งค่า MQTT Broker (Cloud service)
- เริ่มเขียนโปรแกรม Qt กับ MQTT (อะไรอยู่ตรงไหน)
- Step by Step
- Make new Project
- Add Library
- Prepare Variable and Function
- MQTT Server Connection
- MQTT Public.
- MQTT Subscribe.
SECTION #3 นั่งเล่น Qt + MQTT
- ทดสอบเล่นกัน (ใครมี อะไร public ได้ งัดออกมาเล่นเลยครับ ESP8266, Arduino , Mobile )
2
Topic
SECTION#4 : คิดหัวข้อนั่งเล่น ตอนต่อไป
ผมเสนอ 1. Qt+ESP8266 (กำลังมาแรง)
2. Qt+Android (เบื้องต้น)
3. Qt+Serial port
4. Qt+ IoT
5. Qt+Hardware (Embedded,Sensor,..etc)
6. Qt+Software (Graphic,Database ,Network,..etc)
** ครั้งต่อไป ถ้าเป็นไปได้อยากให้แบ่งกันเล่า ^_^
**คุยกันอีกทีในกลุ่มครับ^^
3
Change logs
9 Aug 2015 New Issue : Playground Basic Qt+MQTT
4
Group Activity
9 Aug 2015 Playground Basic Qt+MQTT @ Quark Systems Co.,Ltd.
5
6
SECTION#1 เบื้องต้น Qt
เบื้องต้น Qt
7
Qt คืออะไร?
Qt มันก็คือ “ cross-platform application framework” เอาไว้ให้เราเขียนหรือพัฒนาโปรแกรม แค่ครั้งเดียวสามารถ run ได้หลาย platform.
Qt is not a programming language by its own.
ถ้างง หยุดคุยกัน…...
เบื้องต้น Qt
8
Programming language.
มีอีกเพียบ ใน wiki https://en.wikipedia.org/wiki/List_of_programming_languages
Platform
Hardware
Software
Qt
Cross-platform programming toolkits and environments
เบื้องต้น Qt : Download Qt
9
http://www.qt.io
License:
Qt is available under various licenses: The Qt Company sells commercial licenses, but Qt is also available as free software under several versions of the GPL and the LGPL (Licensing FAQ).
โหลดเลยครับ ^_^
License: Opensource http://www.qt.io/download-open-source/
เบื้องต้น Qt :
10
Installing….
ลงกันเสร็จแล้ว ไปต่อ...
Complete!
เบื้องต้น Qt : Directory
11
C:\Qt\Qt5.5.0\5.5\msvc2013_64\bin
อะไรอยู่ไหน หากันเจอแล้วนะ >
C:\Qt\Qt5.5.0\Tools\QtCreator\bin
Qt creator
Qt Binary
** windeployqt.exe อยู่ในนี้นะครับ ูู^^
เบื้องต้น Qt : Hello World
12
ทำไปพร้อมๆกันเลยครับ ...
เบื้องต้น Qt : Hello World
13
ทำไปพร้อมๆกันเลยครับ ...
เบื้องต้น Qt : Hello World
14
ทำไปพร้อมๆกันเลยครับ ...
เบื้องต้น Qt : Hello World
15
ทำไปพร้อมๆกันเลยครับ ...
เบื้องต้น Qt : Hello World
16
ทำไปพร้อมๆกันเลยครับ ...
เบื้องต้น Qt : Hello World
17
ทำไปพร้อมๆกันเลยครับ ...
เบื้องต้น Qt : Hello World
18
Run เลยซิครับ ^_^
สำเร็จ!!!
เบื้องต้น Qt: โครงสร้างต่างๆ Qt Creator
19
คุ้นแล้วนะครับ
ว่าอะไรอยู่ตรงไหน ^_^ ...
นั่งเล่นๆ
เบื้องต้น Qt : โครงสร้างต่างๆ Qt Creator
20
Run ไม่ออก หาดูแถวๆนี้แหละครับ ^_^
หน้าต่างเกี่ยวกับการ ฺีBuild & Run
File>option>Build & Run
Projects > Add Kit
Build , Clean
เบื้องต้น Qt : โครงสร้างต่างๆ Qt Creator
21
^_^
ดูโครงสร้าง Code บ้าง
.pro
*.h
*.cpp
*.ui
เบื้องต้น Qt : โครงสร้างต่างๆ Qt Creator
22
หน้าตาของโปรแกรมเราเลย ^_^
ดูโครงสร้าง Code บ้าง
*.ui
เบื้องต้น Qt : โครงสร้างต่างๆ Qt Code
23
@.^_^
#-------------------------------------------------
#
# Project created by QtCreator 2015-08-06T14:39:30
#
#-------------------------------------------------
QT += core gui
greaterThan(QT_MAJOR_VERSION, 4): QT += widgets
TARGET = helloworld
TEMPLATE = app
SOURCES += main.cpp\
widget.cpp
HEADERS += widget.h
FORMS += widget.ui
project.pro
เบื้องต้น Qt : โครงสร้างต่างๆ Qt Code
24
@@.^_^
#ifndef WIDGET_H
#define WIDGET_H
#include <QWidget>
namespace Ui {
class Widget;
}
class Widget : public QWidget
{
Q_OBJECT
public:
explicit Widget(QWidget *parent = 0);
~Widget();
private:
Ui::Widget *ui;
};
#endif // WIDGET_H
*.h
เบื้องต้น Qt : โครงสร้างต่างๆ Qt Code
25
@@@.^_^
#include "widget.h"
#include <QApplication>
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
Widget w;
w.show();
return a.exec();
}
main.cpp
เบื้องต้น Qt : โครงสร้างต่างๆ Qt Code
26
@@@@.^_^
#include "widget.h"
#include "ui_widget.h"
Widget::Widget(QWidget *parent) :
QWidget(parent),
ui(new Ui::Widget)
{
ui->setupUi(this);
}
Widget::~Widget()
{
delete ui;
}
*.cpp
เบื้องต้น Qt : โครงสร้างต่างๆ Qt Code
27
@@@@@.^_^
<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
<class>Widget</class>
<widget class="QWidget" name="Widget">
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>400</width>
<height>300</height>
</rect>
</property>
<property name="windowTitle">
<string>Widget</string>
</property>
</widget>
<layoutdefault spacing="6" margin="11"/>
<resources/>
<connections/>
</ui>
*.ui
เบื้องต้น Qt : โครงสร้างต่างๆ Qt Code
28
ผมล่ะงงมากเรื่องนี้
Signal and Slot
Reference:http://doc.qt.io/qt-5/signalsandslots.html
เบื้องต้น Qt : โครงสร้างต่างๆ Qt Code
29
@_@ เริ่มมึน พักกันก่อน
Signal and Slot
Reference:http://doc.qt.io/qt-5/signalsandslots.html
new Signal & Slot syntax : https://wiki.qt.io/New_Signal_Slot_Syntax
Class Referrence Qt : http://doc.qt.io/qt-5/classes.html
สร้าง Signal [.h]
public: signals:
void btclicksignall(int i);
สร้าง Signal [.cpp] ส่ง
emit btclicksignall(i++);
สร้าง Slot [.h]
สร้าง Slot [.cpp] (Call Function)
private slots:
void on_pushButton_clicked();
void on_recv_signal(int i);
void Widget::on_recv_signal(int i)
{
ui->label->setText(QString::number(i));
}
connect(this,SIGNAL(btclicksignall(int)),this,SLOT(on_recv_signal(int)));
สุดท้าย!!
30
SECTION#2 Qt + MQTT
Qt + MQTT : รู้จักกับ MQTT
31
@_@ มาถึงก็งงเลย
Reference:http://mqtt.org
“MQTT เป็น Protocol ระหว่างเครื่องจักรกับเครื่องจักรคุยกัน (machine-to-machine(M2M)/”Internet of Things”
Qt + MQTT : รู้จักกับ MQTT
32
รื้อฟื้น OSI Model กันหน่อย^_^
Ref:http://postscapes.com/internet-of-things-protocols#graphics
Qt + MQTT : รู้จักกับ MQTT
33
มี 3 ส่วนเองนะ ^_^
Concept
Qt + MQTT : รู้จักกับ MQTT
34
Format ควรรู้ ^_^
Publish/Subscribe
Topics/Subscriptions [/, + , #]
Quality of Service [0 ,1 ,2]
Qt + MQTT : เตรียมๆ MQTT ฺBroker
35
เลือกตามถนัดเลยครับ ^_^
Source Code
Install on Server
Cloud Service
ThingMQ
WebSphere MQ Telemetry
Erlang MQTT Broker
Home Brew MQTT
CloudMQTT
มีอีกเยอะครับ ยกตัวอย่างเท่านี้ก่อน
Qt + MQTT : เตรียมๆ MQTT Broker
36
เปรียบเทียบกันดูครับ ^_^
Ref:https://github.com/mqtt/mqtt.github.io/wiki/server-support
Qt + MQTT : มาดูฝั่ง MQTT Client บ้าง
37
^_^
Qt + MQTT : เตรียมๆ MQTT ฺBroker
38
ผ่านแล้วก็ไปเขียนโปรแกรมกันต่อ ^_^
ขอใช้ Broker บน cloud!
Qt + MQTT :โครงสร้าง Qt Client Code
39
อะไรกลมๆ ^_^
qmqtt
.cpp
.h
UI
connect
Pub
Sub
Qt + MQTT :New Project
40
สร้างเหมือน Hello world ลุยๆ ^_^
Qt + MQTT : Add Library
41
หาๆ ใครใช้ Qt เขียน Library MQTT ^_^
eMQTT
Opensource Library สำหรับ eMQTT.io Broker !!
Qt + MQTT : Add Library
42
Copy เรียบร้อย ^_^
Before
After
Qt + MQTT : Prepare Variable & Function
43
^_^
1. ประกาศ Slot
private slots:
void onMQTT_Connected();
void onMQTT_disconnected();
2. ประกาศ mqtt Object
private:
QMQTT::Client *client;
.h
3. สร้าง mqtt Object
client = new QMQTT::Client();
connect(client, SIGNAL(connected()), this, SLOT(onMQTT_Connected()));
connect(client, SIGNAL(disconnected()), this, SLOT(onMQTT_disconnected()));
4. Connect
.cpp
Qt + MQTT : Prepare Variable & Function
44
^_^
5. สร้าง Function Callback
.cpp
void PlayMQTT::onMQTT_Connected()
{
qDebug() << "Conneted";
}
void PlayMQTT::onMQTT_disconnected()
{
qDebug() << "Disconnected";
}
Qt + MQTT : Server Connection
45
เรียบร้อย Run เลยครับ^_^
void PlayMQTT::on_bt_connect_clicked()
{
// Connect Server
client->setHost(ui->brokerLE->text());
client->setPort(ui->PortLE->text().toInt());
if(ui->UsernameLE->text() != "")
{
client->setUsername(ui->UsernameLE->text());
client->setPassword(ui->PasswordLE->text());
}
client->connect();
}
void PlayMQTT::on_pushButton_clicked()
{
client->disconnect();
}
Qt + MQTT : PUBLIC
46
บรรทัดเดียวจบ อิอิ^_^
void PlayMQTT::on_bt_public_clicked()
{
QMQTT::Message msg(0,ui->Pub_topicLE->text(),ui->Pub_valueLE->text().toUtf8());
client->publish(msg);
}
Qt + MQTT : SUBSCRIBE
47
^_^
[.h file]
void onMQTT_Received(const QMQTT::Message &message);
Qt + MQTT : ์SUBSCRIBE
48
^_^
[.cpp file]
connect(client, SIGNAL(received(const QMQTT::Message &)), this, SLOT(onMQTT_Received(const QMQTT::Message &)));
void PlayMQTT::onMQTT_Received(const QMQTT::Message &message)
{
ui->logsText->append(message.topic());
ui->logsText->append(message.payload());
}
void PlayMQTT::on_bt_sub_clicked()
{
client->subscribe(ui->Sub_topicLE_2->text(),0);
}
void PlayMQTT::on_bt_unsub_clicked()
{
client->unsubscribe(ui->Sub_topicLE_2->text());
}
Qt + MQTT : Mission Complete
49
^_^
50
SECTION#3 นั่งเล่นกัน
51
SECTION#4 นั่งคุยกัน
52
คิดหัวข้อนั่งเล่น ตอนต่อไป
ผมเสนอ 1. Qt+ESP8266 (กำลังมาแรง)
2. Qt+Android (เบื้องต้น)
3. Qt+Serial port
4. Qt+ IoT
5. Qt+Hardware (Embedded,Sensor,..etc)
6. Qt+Software (Graphic,Database ,Network,..etc)
** ครั้งต่อไป ถ้าเป็นไปได้อยากให้แบ่งกันเล่า ^_^
SECTION#4 นั่งคุยกัน
สรุป :