Membangun Aplikasi Mobile Dengan Qt SDK Dengan Studi Kasus Monitoring Ruangan Menggunakan Kamera.

(1)

i

Universitas Kristen Maranatha

MEMBANGUN APLIKASI MOBILE DENGAN QT SDK DENGAN STUDI KASUS MONITORING RUANGAN MENGGUNAKAN KAMERA

Disusun oleh : Nama : Yansen

NRP : 0822052

Jurusan Teknik Elektro, Fakultas Teknik, Universitas Kristen Maranatha, Jl. Prof.Drg.Suria Sumantri, MPH no.65, Bandung, Indonesia.

Email : sen_0790@yahoo.com

ABSTRAK

Saat ini, telepon genggam atau handphone sudah menjadi alat yang multiguna, para pengembang handphone/smartphone sudah menambahkan bermacam-macam fitur dan aplikasi yang sangat berguna bagi para pengguna.

Nokia memberikan kesempatan kepada pengembang aplikasi dengan memberikan developer berupa Qt SDK. Pengembang aplikasi dapat menggunakan Qt SDK untuk merancang dan membuat aplikasi yang dapat dijalankan pada telepon genggam berbasis symbian. Dalam Tugas Akhir ini, Qt SDK digunakan untuk membuat aplikasi untuk memonitoring suatu ruangan menggunakan kamera dan menampilkannya pada smartphone berbasis symbian. Digunakan juga sebuah software webcam7 untuk memantau hasil kamera dan menampilkannya pada layar PC. Smartphone symbian yang digunakan adalah Nokia E71. Kamera yang digunakan merupakan kamera webcam M-Tech yang terhubung ke PC melalui kabel usb dan webcam internal.

Virtual router digunakan untuk membuat laptop menjadi access point. Virtual router dibuat menggunakan perintah netsh yang diketikkan pada command prompt laptop tersebut. Smartphone symbian dikoneksikan dengan wifi pada laptop tersebut. Dengan mengakses IP dari laptop tersebut maka tampilan webcam sudah berhasil dilihat pada smartphone symbian melalui aplikasi monitoring yang dibuat menggunakan Qt SDK.

(2)

ii

DEVELOPING MOBILE APPLICATION WITH QT SDK FOR ROOM MONITORING WITH CAMERA

Composed by : Nama : Yansen

NRP : 0822052

Department of Electrical Engineering, Maranatha Christian University, Jl. Prof.Drg.Suria Sumantri, MPH no.65, Bandung, Indonesia.

Email : sen_0790@yahoo.com

ABSTRACT

Nowadays, cell phones or mobile phones have become a multipurpose tool. The developers of mobile phone / smartphone has added an assortment of features and applications that are very useful for the users.

Nokia provides the opportunity for application developers by providing developers such as Qt SDK. Application developers can use Qt SDK to design and create applications that can run on mobile phones based on Symbian. In this thesis, Qt SDK is used to create applications for monitoring a room using a camera and display it on a smartphone based on Symbian. Used also a webcam7 software to monitor the camera and display it on the PC screen. Symbian smartphones used the Nokia E71. The camera used a webcam M-Tech camera connected to the PC via USB cable, and internal webcam.

Virtual routers are used to make the laptop into an access point. Virtual routers created using the netsh command is typed at the command prompt laptop. Symbian Smartphone connected to the wifi on the laptop. By accessing the IP of the laptop, display on a webcam has successfully seen through a symbian smartphone monitoring application created using Qt SDK.

(3)

v

DAFTAR ISI

ABSTRAK ... i

ABSTRACT ... ii

KATA PENGANTAR ... iii

DAFTAR ISI ... v

DAFTAR TABEL ... viii

DAFTAR GAMBAR ... ix

BAB I PENDAHULUAN I.1 Latar Belakang ... 1

I.2 Rumusan Masalah ... 2

I.3 Tujuan Tugas Akhir ... 2

I.4 Ruang Lingkup Bahasan ... 2

I.5 Sistematika Penulisan ... 2

BAB II LANDASAN TEORI II.1 Teori-teori Qt SDK ... 4

II.1.1 Nokia Qt SDK ... 4

II.1.2 Fitur-fitur Qt Creator ... 6

II.1.3 Qt Creator IDE (Integrated Development Environment) .. 11

II.1.4 Struktur program C++ pada Qt ... 13

II.1.5 Debugging pada Qt Creator ... 16

II.2 Qt Basic/Qt Core Module ... 17

II.2.1 Qt Library ... 17

II.2.2 Menurunkan Object dari class QObject ... 18

(4)

vi

II.2.4 Collection dan Iterator ... 20

II.2.5 Menggunakan QList ... 20

II.3 Signal dan Slot ... 21

II.3.1 Aplikasi Event-Driven ... 21

II.3.2 Pengenalan Signal dan Slots ... 21

II.4 GUI (Graphical User Interface) ... 24

II.4.1 Main Menu ... 24

II.4.2 Layout ... 26

II.4.3 Widget ... 27

II.4.4 Message Box ... 31

II.4.5 Validasi Input Pengguna ... 31

II.4.6 Menu ... 32

II.4.7 ToolBar ... 32

II.5 Qt Network ... 32

II.5.1 Menggunakan Library Qt Network ... 32

II.5.2 Menggunakan QnetworkAccessManager ... 33

II.6 Qt Webkit ... 33

II.6.1 Webkit Module ... 33

II.7 Komunikasi Wireless LAN ... 35

II.8 Webcam ... 38

II.9 Virtual Router ... 40

(5)

vii

BAB III PERANCANGAN DAN REALISASI

III.1 Perancangan sistem ... 43

III.2 Pembuatan apllikasi monitoring ... 45

III.3 Realisasi aplikasi monitoring ke smartphone symbian ... 47

III.4 Webcam7 ... 50

III.5 XAMPP ... 53

BAB IV DATA PENGAMATAN DAN ANALISIS IV.1 Pengujian aplikasi monitoring ... 54

BAB V KESIMPULAN DAN SARAN V.1 Kesimpulan ... 69

V.2 Saran ... 69

(6)

viii

DAFTAR TABEL

Tabel 2.1 Jenis-jenis class pada modul Qt webkit ... 34 Tabel 4.1 Rata-rata jumlah frame yang dikirim tiap detik pada webcam

1.3 MP ... 56 Tabel 4.2 Rata-rata besar data yang dikirim tiap detik pada webcam

1.3 MP ... 58 Tabel 4.3 Rata-rata jumlah frame yang dikirim tiap detik pada webcam

5 MP ... 62 Tabel 4.4 Rata-rata besar data yang dikirim tiap detik pada webcam

(7)

ix

DAFTAR GAMBAR

Gambar 2.1 Sistem operasi yang didukung Qt ... 5

Gambar 2.2 Qt Creator ... 11

Gambar 2.3 Bagian project content ... 12

Gambar 2.4 Class library yang disediakan Qt ... 18

Gambar 2.5 Contoh beberapa class yang diturunkan dari Qobject ... 19

Gambar 2.6 Main window Qt Creator ... 25

Gambar 2.7 Skema hubungan antarclass webkit ... 35

Gambar 2.8 Webcam M-tech 5MP ... 39

Gambar 2.9 Command Prompt ... 40

Gambar 3.1 Diagram perancangan sistem ... 44

Gambar 3.2 Tampilan form pada Qt Creator ... 45

Gambar 3.3 Tampilan Go to Slot ... 46

Gambar 3.4 Build setting ... 48

Gambar 3.5 Run qmake ... 48

Gambar 3.6 Diagram alir aplikasi monitoring ... 49

Gambar 3.7 Tampilan webcam7 saat memilih source ... 50

Gambar 3.8 Tampilan webcam7 saat webcam sudah terkoneksi ... 51

Gambar 3.9 Tampilan webcam7 broadcast ... 51

Gambar 3.10 Tampilan webcam7 options ... 52

Gambar 3.11 XAMPP Control Panel ... 53

Gambar 4.1 Data pengamatan ... 54

Gambar 4.2 Pengaruh brightness terhadap besar data yang dikirim tiap detik ... 55

Gambar 4.3 Grafik pengujian 1 (FPS) webcam 1.3 MP ... 57

(8)

x

Gambar 4.8 Grafik pengujian 1 (besar data tiap detik) webcam 1.3 MP ... 60

Gambar 4.13 Grafik pengujian 1 (FPS) webcam 5 MP ... 63

Gambar 4.18 Grafik pengujian 1 (besar data tiap detik) webcam 5 MP ... 66

(9)

(10)

L-1  Monitoring.pro

# Add files and directories to ship with the application # by adapting the examples below.

# file1.source = myfile # dir1.source = mydir

DEPLOYMENTFOLDERS = # file1 dir1

symbian:TARGET.UID3 = 0xE7708E6B

# Allow network access on Symbian

symbian:TARGET.CAPABILITY += NetworkServices

# If your application uses the Qt Mobility libraries, uncomment # the following lines and add the respective components to the # MOBILITY variable.

# CONFIG += mobility # MOBILITY +=

QT += webkit

SOURCES += main.cpp mainwindow.cpp

HEADERS += mainwindow.h

FORMS += mainwindow.ui

# Please do not modify the following two lines. Required for deployment.

include(deployment.pri)

qtcAddDeployment()

 Deployment.pri

# checksum 0xfb0c version 0x30001

# This file was generated by an application wizard of Qt Creator. # The code below handles deployment to Symbian and Maemo, aswell as copying

# of the application data to shadow build directories on desktop. # It is recommended not to modify this file, since newer versions of Qt Creator

# may offer an updated version of it.

defineTest(qtcAddDeployment) {

for(deploymentfolder, DEPLOYMENTFOLDERS) { item = item$${deploymentfolder}

itemsources = $${item}.sources

$$itemsources = $$eval($${deploymentfolder}.source) itempath = $${item}.path

(11)

L-2 isEmpty(TARGET.EPOCHEAPSIZE):TARGET.EPOCHEAPSIZE = 0x20000

0x2000000 } else:win32 { copyCommand =

for(deploymentfolder, DEPLOYMENTFOLDERS) { source =

copydeploymentfolders.commands = $$copyCommand first.depends = $(first) copydeploymentfolders export(first.depends)

export(copydeploymentfolders.commands)

QMAKE_EXTRA_TARGETS += first copydeploymentfolders }

} else:unix { maemo5 {

installPrefix = /opt/usr

(12)

L-3

for(deploymentfolder, DEPLOYMENTFOLDERS) { item = item$${deploymentfolder}

icon.path = /usr/share/icons/hicolor/64x64/apps desktopfile.files = $${TARGET}.desktop

target.path = $${installPrefix}/bin export(icon.files)

export(icon.path)

export(desktopfile.files) export(desktopfile.path) export(target.path)

INSTALLS += desktopfile icon target }

export (ICON) export (INSTALLS) export (DEPLOYMENT)

export (TARGET.EPOCHEAPSIZE) export (TARGET.CAPABILITY) export (LIBS)

(13)

L-4  Mainwindow.h

// checksum 0x9a77 version 0x30001 /*

This file was generated by the Mobile Qt Application wizard of Qt Creator.

MainWindow is a convenience class containing mobile device specific code

such as screen orientation handling.

It is recommended not to modify this file, since newer versions of Qt Creator

class MainWindow : public QMainWindow

{

void setOrientation(ScreenOrientation orientation); void showExpanded();

private slots:

void on_pushButton_clicked();

private:

(14)

L-5 mainWindow.showExpanded();

return app.exec(); }

 Mainwindow.cpp

// checksum 0xa193 version 0x30001 /*

This file was generated by the Mobile Qt Application wizard of Qt Creator.

MainWindow is a convenience class containing mobile device specific code

such as screen orientation handling.

It is recommended not to modify this file, since newer versions of Qt Creator

MainWindow::MainWindow(QWidget *parent)

: QMainWindow(parent), ui(new Ui::MainWindow) {

ui->setupUi(this); }

MainWindow::~MainWindow₍₎

{

delete ui; }

void MainWindow::setOrientation(ScreenOrientation orientation)

{

#if defined(Q_OS_SYMBIAN)

// If the version of Qt on the device is < 4.7.2, that attribute won't work

if (orientation != ScreenOrientationAuto) { const QStringList v =

QString::fromAscii(qVersion()).split(QLatin1Char('.')); if (v.count() == 3 && (v.at(0).toInt() << 16 | v.at(1).toInt() << 8 | v.at(2).toInt()) < 0x040702) {

qWarning("Screen orientation locking only supported with

(15)

L-6 // Qt < 4.7.2 does not yet have the Qt::WA_*Orientation

attributes

case ScreenOrientationLockPortrait:

attribute = static_cast<Qt::WidgetAttribute>(128); break;

case ScreenOrientationLockLandscape:

default:

case ScreenOrientationAuto:

#else // QT_VERSION < 0x040702

case ScreenOrientationLockPortrait:

attribute = Qt::WA_LockPortraitOrientation; break;

case ScreenOrientationLockLandscape:

attribute = Qt::WA_LockLandscapeOrientation;

#endif // QT_VERSION < 0x040702

};

setAttribute(attribute, true); }

void MainWindow::showExpanded()

{

#ifdef Q_OS_SYMBIAN

showFullScreen();

#elif defined(Q_WS_MAEMO_5) || defined(Q_WS_MAEMO_6)

showMaximized(); #else

show(); #endif }

void MainWindow::on_pushButton_clicked()

(16)

L-7

document.images.webcam1.src = "http://192.168.173.1:8080/cam_" + currentCamera1 + ".jpg?uniq="+uniq1;

document.images.webcam2.src = "http://192.168.173.1:8080/cam_" + currentCamera2 + ".jpg?uniq="+uniq2;

(17)

L-8

Tampilan webcam7

(18)

(19)

1

BAB I

PENDAHULUAN

Bab ini berisikan tentang latar belakang, perumusan masalah, tujuan tugas akhir,

pembatasan masalah, dan sistematika penulisan laporan tugas akhir.

I.1 Latar Belakang

Telepon genggam bukan lagi sekedar perangkat untuk bertelekomunikasi.

Masyarakat sudah menggunakan telepon genggam tersebut untuk berbagai keperluan

lainnya. Namun mayoritas pengguna telepon genggam di Indonesia tidak

memaksimalkan semua fitur yang ditawarkan oleh sebuah telepon genggam.

Dinamika jaringan sosial yang berkembang pesat di Indonesia juga memberikan

kontribusi yang signifikan pada piranti telepon genggam. Maka dari itu, sangat

disayangkan apabila telepon genggam tidak dimaksimalkan kegunaannya.

Nokia memberikan kesempatan kepada pengembang aplikasi dengan

memberikan software developer berupa Qt SDK. Pengembang aplikasi mobile dapat

menggunakan Qt SDK untuk membuat aplikasi untuk dijalankan pada telepon

genggam berbasis symbian.

Hal tersebut dijadikan dasar bagi penulis untuk membangun aplikasi mobile

dengan Qt SDK dengan studi kasus monitoring ruangan menggunakan kamera. Qt

SDK merupakan software yang akan digunakan pada symbian devices untuk

membantu studi kasus memonitoring ruangan menggunakan kamera yang dapat

ditampilkan pada symbian devices tersebut.

Aplikasi ini bertujuan untuk dapat mengetahui keadaan suatu ruangan yang

dipantau oleh kamera, yang kemudian dapat dipantau melalui smartphone berbasis

symbian dengan aplikasi yang dibangun dari Qt SDK. Hal ini dapat membuat seorang

pemantau tidak perlu menunggu di layar monitor tetapi dapat mengaksesnya melalui

(20)

2

I.2 Rumusan Masalah

Masalah yang akan dibahas pada tugas akhir ini adalah :

 Bagaimana membangun aplikasi mobile dengan Qt SDK untuk memonitoring

ruangan menggunakan kamera ?

I.3 Tujuan Tugas Akhir

Merancang dan membuat aplikasi mobile dengan Qt SDK untuk

memonitoring ruangan menggunakan kamera

I.4 Ruang Lingkup Bahasan

Ruang lingkup bahasan dalam tugas akhir ini adalah sebagai berikut :

 Smartphone yang digunakan merupakan smartphone berbasis symbian

 Menggunakan software webcam7 sebagai antarmuka

 Belum dapat mengontrol gerak kamera

 Koneksi menggunakan wireless LAN

 Dapat memilih dari pilihan 2 kamera yang terhubung

I.5 Sistematika penulisan

Susunan naskah Tugas Akhir ini, secara umum dibagi menjadi 5 bab yang

terdiri dari :

BAB I PENDAHULUAN

Berisi latar belakang, perumusan masalah, tujuan Tugas Akhir, ruang lingkup

bahasan, dan sistematika penulisan Tugas Akhir.

BAB II DASAR TEORI

Bab ini membahas tentang teori-teori mengenai Qt, komunikasi wireless LAN,

(21)

3

BAB III PERANCANGAN DAN REALISASI

Pada bab ini membahas perancangan sistem, pembuatan aplikasi menggunakan Qt

SDK, realisasi aplikasi Qt SDK ke smartphone symbian, software webcam7

BAB IV ANALISA DATA DAN PENGAMATAN

Pada bab ini dijelaskan tentang proses pengamatan dan pengujian aplikasi mobile

yang telah dibuat menggunakan Qt SDK untuk memonitoring suatu ruangan

menggunakan kamera.

BAB V KESIMPULAN DAN SARAN

Bab ini membahas tentang kesimpulan yang diperoleh setelah melihat pengujian dari

aplikasi mobile yang telah dibuat menggunakan Qt SDK, serta saran-saran untuk

(22)

69

BAB V

KESIMPULAN DAN SARAN

Pada bab ini berisi kesimpulan dari Tugas Akhir dan saran-saran yang perlu

dilakukan untuk perbaikan di masa mendatang.

V.1 KESIMPULAN

Dengan memperhatikan data pengamatan dan analisis pada bab sebelumnya,

dapat disimpulkan bahwa:

1. Aplikasi mobile dengan studi kasus monitoring ruangan menggunakan kamera

berhasil direalisasikan menggunakan Qt SDK ke dalam smartphone berbasis

symbian.

2. FPS tidak dipengaruhi oleh resolusi pixel dari webcam yang digunakan,

sehingga berapapun resolusi pixel yang digunakan, FPS akan tetap sama.

3. Resolusi pixel webcam yang digunakan mempengaruhi rata-rata besar data

yang dikirim tiap detik, akan relatif lebih besar pada resolusi pixel webcam

yang lebih besar dibandingkan dengan resolusi pixel webcam yang lebih

kecil.

V.2 SARAN

Saran-saran yang dapat diberikan untuk perbaikan dan pengembangan dari

Tugas Akhir ini adalah sebagai berikut:

1. Kamera webcam dapat digerakkan dan dapat melakukan zoom in dan zoom

out.

(23)

70

DAFTAR PUSTAKA

1. Kurniawan, Erick. 2011. “Membangun Aplikasi Mobile dengan Qt SDK”, Yogyakarta: Andi

2. http://etalaseilmu.wordpress.com/2009/11/12/web-camera/ diakses tanggal 11 Februari 2013

3. http://shintaambarwaty.blogspot.com/2011/10/teknologi-wireless-lan-wlan.html diakses tanggal 11 Februari 2013

4. www.vilani.web.id/93-pc-camera-m-tech-5mp.html diakses tanggal 11 Februari 2013

5. www.virtualrouter.codeplex.com/discussions/266860diakses tanggal 11 Februari 2013

6. www.webcamxp.comdiakses tanggal 11 Februari 2013