Bidang Ilmu Teknik Elektro dan Informatika

LAPORAN
PENELITIAN TERAPAN SWADANA

INOVASI SISTEM PROMOSI

MELALUI FOTO UDARA QUADCOPTER
DENGAN MODIFIKASI DAN JEJARING SOSIAL

TIM PENGUSUL
WAHYU SULISTIYO, S.T., M.Kom. (NIDN. 0001047705)
ARI SRIYANTO N., S.T.,M.T.,M.Sc. (NIDN. 0004097405)
BUDI SUYANTO, S.T, M.Eng (NIDN. 0003107605)
Drs. PARSUMO RAHARJO, M.Kom. (NIDN. 0022086005)
SUKAMTO, S.Kom, M.T (NIDN. 0017017106)

DIBIAYAI DARI DAFTAR ISIAN

PELAKSANAAN ANGGARAN POLITEKNIK NEGERI SEMARANG
NOMOR : 042.04.2.400137/2015 TANGGAL 15 APRIL 2015
SESUAI SURAT PERJANJIAN PELAKSANAAN
KEGIATAN BANTUAN PENELITIAN SWADANA-PNBP
DOSEN POLITEKNIK NEGERI SEMARANG
UNTUK PELAKSANAAN KEGIATAN
BANTUAN PENELITIAN SWADANA-PNBP
NOMOR : 12759/PL4/PPK/LK/2015

POLITEKNIK NEGERI SEMARANG

OKTOBER 2015
 HALAMAN PENGESAHAN
PENELITIAN TERAPAN

Judul Penelitian : Inovasi Sistem Promosi Melalui Foto Udara Quadcopter dengan Modifikasi
dan Jejaring Sosial
TOR : Pengembangan Sistem Telekomunikasi dan Informasi
Ketua Peneliti :
a. Nama Lengkap : Wahyu Sulistiyo, S.T., M.Kom.
b. NIDN : 0001047705
c. Jabatan Fungsional : Lektor
d. Jurusan/Prodi : T. Elektro/ T. Informatika
e. Nomor HP : 085740119501
f. Alamat Surel (e-mail) : w4hyu5@yahoo.com, wahyu.sulistiyo@polines.ac.id
Anggota Peneliti (1) :
a. Nama Lengkap : Ari Sriyanto Nugroho, S.T., M.T., M.Sc.
b. NIDN : 0004097405
c. Jurusan/Prodi : T. Elektro/ T. Informatika
Anggota Peneliti (2) :
a. Nama Lengkap : Budi Suyanto, S.T., M.Eng
b. NIDN : 0003107605
c. Jurusan/Prodi : T. Elektro/ T. Informatika
Anggota Peneliti (3) :
a. Nama Lengkap : Drs. Parsumo Raharjo, M.Kom.
b. NIDN : 0022086005
c. Jurusan/Prodi : T. Elektro/ T. Informatika
Anggota Peneliti (4) :
a. Nama Lengkap : Sukamto, S.Kom., M.T.
b. NIDN : 0017017106
c. Jurusan/Prodi : T. Elektro/ T. Informatika
Lama Penelitian : 4 Bulan
Biaya Penelitian : Rp. 7.500.000
Semarang, Oktober 2015
Mengetahui,
Direktur Ketua Peneliti

Ir. Supriyadi, MT Wahyu Sulistiyo, ST, MKom

NIP 195909061987031002 NIP. 197704012005011001
Menyetujui,
Kepala P3M

Dr.Eng.Sidiq Syamsul Hidayat, ST, MT

NIP 197203112000031002
 RINGKASAN

Tahun 2014, Drone berkembang dengan pesat, Di Indonesia, quadcopter menjadi kategori
”hot list” di marketplace Tokopedia. Perkembangan Drone yang semakin maju ini dapat
dimanfaatkan untuk beberapa keperluan seperti alat untuk foto udara, pengantar barang
ataupun sekedar untuk mainan aeromodeling.
Sebagai peranti foto udara Drone memberikan pemandangan secara keseluruhan yang sama
sekali tidak mungkin dari permukaan tanah. Misalnya melihat semua bidang properti.
Menunjukkan kelebihan dari lokasinya yang diambil dari atas. Tampilkan rute akses dan
perkembangan pembangunan yang ada disekitarnya. Gambar udara dapat membuat
dokumen promosi menjadi sempurna, dengan demikian perencanaan pengembangan
menjadi lebih matang, Disamping berfungsi sebagai alat bantu presentasi, materi promosi
atau pemasaran, dan tentu saja ini adalah cara yang mengagumkan untuk menampilkan
properti anda. Fotografi udara dapat digunakan untuk real estate, fotografi komersial dan
banyak lagi.
Pada penelitian ini pengembangan aplikasi pengendali Quadcopter Drone difokuskan pada
pengambilan data foto menggunakan Drone Quadcopter dan dapat dimodifikasi. Aplikasi
digunakan untuk membantu promosi di jaringan sosial. Pengembangan aplikasi
menggunakan bahasa pemrograman visual.
Aplikasi berhasil dikembangkan dengan menggunakan metode Waterrfall. Sistem software
dan Quadcopter dipisah menggunakan gateway media streaming VLC, Sistem
pemodifikasi foto berhasil diselesaikan dengan manipulasi bitmap dan hasilnya dikirim ke
media sosial facebook.
 DAFTAR ISI

Hal
Halaman Cover i
Halaman Pengesahan ii
Ringkasan iii
Daftar Isi iv
Daftar Tabel v
Daftar Gambar vi
Daftar Lampiran viii
BAB 1 Pendahuluan 1
BAB 2 Tinjauan Pustaka 3
BAB 3 Tujuan dan Manfaat Penelitian 9
BAB 4 Metodologi Penelitian 10
BAB 5 Hasil dan Pembahasan 12
BAB 6 Kesimpulan dan Saran 27
Daftar Pustaka
Lampiran
 DAFTAR TABEL

Hal
Tabel 5.1 Analisis Hasil 26
 DAFTAR GAMBAR

Hal
Gambar 2.1 Model X Quadcopter 3
Gambar 2.2 Modul Buetooth 4
Gambar 2.3 Aplikasi Navigasi Quadcopter 4
Gambar 2.4 Aplikasi Multiwii 5
Gambar 2.5 Model Sistem Quadcopter untuk promosi 5
Gambar 2.6 Gambar Bitmap 7
Gambar 5.1 FlowChart Sistem 13
Gambar 5.2 Desain Antarmuka Aplikasi Desktop 14
Gambar 5.3 Desain Antarmuka Client Facebook 14
Gambar 5.4 Sistem Inovasi Promosi Melalui Foto Udara Quadcopter
Dengan Modifikasi dan Jejarin Sosial 15
Gambar 5.5 Quadcopter bergerak kekiri 16
Gambar 5.6 Quadcopter bergerak keatas kebawah 16
Gambar 5.7 Pergerakan kepala Quadcopter 16
Gambar 5.8 Quadcopter bergerak maju dan mundur 17
Gambar 5.9 Quadcopter menyesuaikan gerakan 17
Gambar 5.10 Quadcopter menyesuaikan gerakan keatas kebawah 18
Gambar 5.11 Kepala Quadcopter bergerak menyesuaikan sitck pada rudder 18
Gambar 5.12 Gerakan Quadcopter menyesuaikan untuk maju dan mundur 18
Gambar 5.13 Menyesuaikan rudder trim 19
Gambar 5.13 Menyesuaikan elevator trim 19
Gambar 5.15 Menyesuaikan aileron trim 20
Gambar 5.16 Jendela VLC Player – Stream 20
Gambar 5.17 Open Media Network Protokol 20
Gambar 5.18 Jendela Stream Output 21
Gambar 5.19 Jendela Stream Output- destinations 21
Gambar 5.20 Jendela Stream Output- destinations-port:1234 21
Gambar 5.21 HTPP authentication 21
Gambar 5.22 Streaming-VLC media player 22
Gambar 5.23 Streaming sukses 22
Gambar 5.24 Hasil Video VLC 23
Gambar 5.25 Hasil Foto QuadCopter Walkera Streaming 23
Gambar 5.26 Aplikasi ClientFacebook 24
Gambar 5.27 Form Login Facebook 24
Gambar 5.28 Data Pesan dan Foto 25
Gambar 5.29 Hasil foto di Wall Facebook 25
 Lampiran

1. SK Direktur
2. Surat Selesai Revisi
3. Foto
4. CV Peneliti
5. Kode Program
 BAB 1 PENDAHULUAN

1.1 Latar Belakang

Salah satu jenis robot yang sedang pesat perkembangannya adalah robot
terbang yang sering disebut sebagai pesawat tanpa awak atau UAV (Unmanned
Aerial Vehicle). UAV sendiri terdiri jadi beberapa jenis dan yang paling populer
sekarang ini adalah Quadcopter (atau kadang disebut Quadrotor), yang merupakan
multicopter yang memiliki empat rotor (baling-baling). Quadcopter ini dapat
terbang dengan dua cara yaitu terbang dengan cara dikontrol dan terbang otomatis

Tahun 2014, Drone berkembang dengan pesat, Di Indonesia, quadcopter menjadi

kategori ”hot list” di marketplace Tokopedia [Danang,2014]. Perkembangan Drone
yang semakin maju ini dapat dimanfaatkan untuk beberapa keperluan seperti alat
untuk foto udara, pengantar barang ataupun sekedar untuk mainan aeromodeling.

Sebagai peranti foto udara Drone memberikan pemandangan secara keseluruhan

yang sama sekali tidak mungkin dari permukaan tanah. Misalnya melihat semua
bidang properti. Menunjukkan kelebihan dari lokasinya yang diambil dari atas.
Tampilkan rute akses dan perkembangan pembangunan yang ada disekitarnya.
Gambar udara dapat membuat dokumen promosi menjadi sempurna, dengan
demikian perencanaan pengembangan menjadi lebih matang, Disamping berfungsi
sebagai alat bantu presentasi, materi promosi atau pemasaran, dan tentu saja ini
adalah cara yang mengagumkan untuk menampilkan properti anda. Fotografi udara
dapat digunakan untuk real estate, fotografi komersial dan banyak lagi.

Dengan potensi yang besar, aplikasi yang memanfaatkan Drone belum banyak
dibuat. Perkembangan penelitian Drone di Indonesia masih berfokus pada
pembuatan Drone itu sendiri. Pada tahun 2012 Whanindra dkk melakukan
penelitian “Perancangan dan Implementasi Kontrol Fuzzy-PID pada Pengendalian
AutoTake-Off Quadcopter UAV”. Penelitiannya fokus pada menjaga keseimbangan

1
Drone Quadcopter tertutama pada saat take-off [Whaninda dkk,2013]. Penelitian
yang lain Sistem Navigasi Ruangan Quadcopter dengan menggunakan Sensor
Elektronik sudah dibuat oleh Yosa Rosario dkk. Penelitiannya fokus pada
kemampuan navigasi Quadcopter [2]. Quadcopter yang digunakan sebagai peranti
foto udara juga sudah dibuat. Penelitian tentang perancangan dan implementasi
Quadcopter untuk foto udara objek wisata di kota Palembang [Shinta,2014].

Pada penelitian ini fokus pada pengembangan aplikasi pengendali Quadcopter AR

Drone yang dimodifikasi untuk membantu promosi dan terhubung ke jaringan
sosial. Aplikasi ini dikembangan dengan menggunakan bahasa pemrograman visual
dan dapat melakukan kendali navigasi, kendali kamera, modifikasi gambar serta
koneksi ke jaringan sosial yang dibutuhkan untuk bidang promosi.

1.2 Permasalahan
Perkembangan Drone Quadcopter yang pesat dan semakin stabilnya kemampuan
Drone Quadcopter memerlukan aplikasi pendukung yang membuat sistem Drone
ini lebih fungsial. Di penelitian ini dirumuskan bagaimana membuat sistem yang
bisa terhubungan dengan sistem Quadcopter, memodifikasi gambar dan membuat
koneksi ke jejaring sosial untuk promosi

2
 BAB 2 TINJAUAN PUSTAKA

2.1 Penelitian Terdahulu

Penelitian terdahulu tentang Quadcopter dilakukan oleh Whanindra Kusuma dik.
Penelitiannya mengambil judul Perancangan dan Implementasi Kontrol Fuzzy-PID
pada Pengendalian AutoTake-Off Quadcopter UAV di tahun 2012. Penelitiannya
menghasilkan sistem kendali Quadcopter pada saat take-off. Faktor-faktor yang
mempengaruhi kinerja Quadcopter [Whanindra dkk,2013] adalah beban dan
kondisi pada saat take-off yang menyebabkan munculnya banyak getaran atau
gangguan turbulensi. Model Quadcopter yang banyak digunakan adalah model X
dengan menggunakan 4 rotor seperti Gambar 2.1.

Gambar 2.1 Model X Quadcopter

Gerakan pada Quadcopter

Gerakan Throtle
Gerakan ini dilakukan dengan menambah atau mengurangi kecepatan masing
masing motor secara serempak.
Gerakan Pitch
Gerakan ini dihasilkan dari penambahan atau pengurangan kecepatan motor
belakang sembari melakukan pengurangan atau penambahan kecepatan pada
motor depan.Gerakan ini bertumpu pada sumbu X.
Gerakan Roll
Gerakan ini dilakukan dengan menambah atau mengurangi kecepatan motor
kiri sembari mengurangi atau menambah kecepatan motor kanan. Gerakan ini
tertumpu pada sumbu Y.

3
 Gerakan Yaw
Gerakan ini dilakukan dengan menambah atau mengurangi kecepatan sepasang
motor(kanan dan kiri) secara serempak sembari melakukan pengurangan atau
penambahan kecepatan sepasang motor lainnya(depan dan belakang) secara
serempak.Gerakan ini bertumpu pada sumbu Z.

Penelitian tentang navigasi Quadcopter juga telah dilakukan oleh Yosa Rosario dkk
di tahun 2013. Penelitiannya fokus pada navigasi Quadcopter, Quadcopter
berkomunikasi dengan komputer dengan mengirimkan letak posisi dari satu posisi
ke posisi yang lain secara wireless. Komunikasi menggunakan modul Bluetooth
seperti Gambar 2.2 [Yosa dkk,2013].

Gambar 2.2 Modul Bluetooth

Proses terbang Quadcopter dilakukan dengan model manual dan otomatis yang
dianalisis menggunakan aplikasi komputer seperti Gambar 2.3 berikut.

Gambar 2.3 Aplikasi Navigasi Quacopter [Yosa dkk,2013]

4
Penelitian lainnya tentang Quadcopter dilakukan oleh Shinta Puspitasari dkk di
tahun 2014. Penelitiannya tentang penggunaan Quadcopter sebagai foto udara
tempat-tempat wisata di kota Palembang. Quadcopter dilengkapi dengan kamera
foto dan dikendalikan dengan menggunakan aplikasi Multiwii GUI. Aplikasi
pengendali Quadcopter seperti Gambar 2.4 berikut.

Gambar 4 Aplikasi Multiwii [Shinta dkk,2013]

Dari penelitian ini Quadcopter sudah dapat digunakan untuk mengambil foto objek
wisata dengan hasil yang menarik.

2.2 Penelitian Sekarang

Pada penelitian sekarang sistem Quadcopter akan dilengkapi dengan aplikasi yang
dibangun sendiri sehingga membuat Quadcopter lebih fungsional. Model sistem
yang akan dibangun seperti Gambar 2.5.

Aplikasi PC Kendali dan

Penangkap Foto

Aplikasi Pemodifikasi Foto

Komunikasi ke Jejaring Sosial

Gambar 2.5 Model Sistem Quadcopter untuk promosi

5
Sistem yang dibangun memanfaatkan Quadcopter Walkera QR W100S sebagai
peranti pengambil foto udara. Peranti ini dikendalikan di bawah (ground)
menggunakan bantuan Komputer PC melalui peranti media akses WIFI. Aplikasi
mempunyai kemampuan navigasi dan penangkap foto. Dari proses ini aplikasi
pengolah foto akan menambahkan efek dari foto udara yang sudah diambil. Jika
hasilnya dirasa cukup bagus, aplikasi dapat melakukan subunit ke Facebook hasil
foto udara yang sudah dimodifikasi dengan keterangan tambahannya sebagai sarana
promosi.

Walkera QR W100S
Walkera QR W100S merupakan jenis Drone yang mudah didapatkan di pasaran
Indonesia. Drone ini memiliki Spesifikasi teknis sebagai berikut
- Mendukung iPhone dan iPads, serta Pemancar Devo
- WIFI
- Rentang kendali tetap tidak berubah di 80 meter
- Kendali yang stabil dengan 6 Axis Gyro
- 30W pixel kamera HD
- Video Real Time
- Waktu Penerbangan +/- 10 Menit

Gambar Bitmap

Dalam grafik komputer, Gambar Bitmap adalah sebuah struktur data yang mewakili
susunan piksel warna yang ditampilkan pada layar monitor, kertas atau media
tampilan lainnya. Secara teknis gambar bitmap digambarkan dengan lebar dan
tinggi dalam piksel dan dalam angka bit per piksel. Beberapa format gambar bitmap
yang sering dijumpai: GIF, JPEG, BMP dan PNG.

Keunggulan dari gambar bitmap antara lain

1. Pemakaian Processor lebih kecil

6
2. Mampu menangkap nuansa warna dan bentuk yang natural

Sedangkan kelemahannya adalah:

1. Ukuran file lebih besar

Contoh Gambar Bitmap seperti Gambar 2.6

Gambar 2.6 Gambar Bitmap

Jejaring Sosial Facebook

Pada tahun 2007, Facebook meluncurkan platform sendiri untuk pengembangan
aplikasi. Platform terdiri dari bahasa markup berbasis HTML disebut Facebook
Markup Language (FBML),antarmuka pemrograman aplikasi (API) untuk
membuat REST (REST) panggilan ke Facebook, bahasa query SQL bergaya untuk
berinteraksi dengan Facebook disebut Facebook Query Language (FQL), bahasa
scripting yang disebut Facebook JavaScript untuk memperkaya pengalaman
pengguna, dan satu set perpustakaan pemrograman client. Umum, yang
alat yang membentuk platform Facebook secara longgar disebut Facebook API.
Dengan melepaskan platform ini, Facebook membangun sebuah alat yang
memungkinkan pengembang untuk membuat aplikasi eksternal untuk
memberdayakan pengguna Facebook untuk berinteraksi dengan satu sama lain
alam baru dan menarik cara-cara yang Anda, sebagai pengembang, bisa

7
menciptakan. Anda tidak hanya dapat mengembangkan Wet aplikasi, tetapi
Facebook juga membuka platform desktop yang tersambung ke Internet
aplikasi dengan yang klien perpustakaan Java. Dengan membuka platform ini
sampai dengan baik berbasis web dan aplikasi desktop dan menawarkan untuk
pengguna umum teknologi yang sama bahwa Facebook pengembang gunakan
untuk membangun aplikasi, Facebook adalah memposisikan diri untuk menjadi
pemain utama dalam masa depan pembangunan sosio-teknis.

8
 BAB 3 TUJUAN DAN MANFAAT

3.1 Tujuan
Tujuan dari penelitian ini adalah untuk membuat sistem foto udara Quadcopter
dengan aplikasi pengendalinya yang digunakan untuk sistem promosi ke jejaring
sosial.

3.2 Manfaat
Dengan adanya penelitian ini diharapkan dapat memberi manfaat:
- Bertambahnya aplikasi yang dapat mengendalikan Quadcopter
- Dapat digunakan sebagai media promosi yang unik dalam bidang bisnis
- Publikasi Ilmiah

9
 BAB 4 METODOLOGI PENELITIAN

Pada penelitian ini untuk mencapai target yang sudah ditetapkan dilaksanakan
menggunakan metode SDLC (System Development Life Cycle Waterfall).
1. Tahap Analisis
Tahap ini digunakan untuk mengumpulkan bahan dan memberi batasan
permasalahan dalam mengembangan aplikasi Inovasi Sistem Promosi Melalui
Foto Udara Quadcopter dengan Modifikasi dan Jejaring Sosial. Fitur yang akan
dikembangkan:
a. Aplikasi Pemodifikasi Foto
b. Aplikasi Promosi ke Jejaring Sosial Facebook

2. Tahap Desain
Tahap ini digunakan untuk menentukan solusi desain dari permasalahan
aplikasi:
a. Desain antarmuka hardware dan software
b. Desain Proses

3. Tahap Implementasi
Tahap ini dilakukan untuk melakukan implentasi aplikasi
a. Implementasi Aplikasi Pemodifikasi Foto
b. Implementasi Aplikasi Jejaring Sosial

4. Tahap Pengujian
Pengujian dilakukan untuk:
a. Pengujian Aplikasi pemodifikasi Foto
b. Pengujian Publikasi ke Jejaring Sosial Facebook
c. Pengujian Integrasi

5. Tahap Pemeliharaan

10
Pemeliharaan dilakukan untuk penulisan laporan, publikasi dan tahapan
pengembangan berikutnya

11
 BAB 5 HASIL DAN PEMBAHASAN

5.1 Hasil Penelitian

Pengembangan sistem Inovasi Sistem Promosi Melalui Foto Udara Quadcopter

dengan Modifikasi dan Jejaring Sosial ini menggunakan Sistem Development Life
Cycle (SDLC). Tahapan-tahapan yang didokumentasikan sebagai hasil penelitian
sebagai berikut:
1. Tahapan Analisis
Analisis kebutuhan yang diperlukan oleh sistem:
- Quadcopter hardware menggunakan model Walkera QR W100S dengan
kamera digunakan sebagai media pengambil foto udara. Walkera ini
dilengkapi dengan fitur WIFI dengan jangkauan 80m yang dapat
dikendalikan melalui perangkat lunak
- Aplikasi remote sistem untuk Walkera diperlukan untuk dapat mengambil
video streaming sebagai output quadcopte Walkera. Aplikasi ini dapat
mengambil gambar foto dari input streaming dan melakukan modifikasi
hasil gambar untuk diunggah ke media sosial.
- Aplikasi yang terhubung ke media sosial dibutuhkan, berupa aplikasi client
yang dapat berkomunikasi dengan Facebook API. Aplikasi ini dapat
melakukan unggah foto dan pesan di halaman Wall Facebook.
2. Tahapan Desain
Desain Aplikasi menggunakan Flow Chart seperti Gambar 5.1. Flowchart
dibagi dalam 4 tahapan proses rutin
- Koneksi
- Ambil Foto
- Modifikasi
- Unggah

12
 mulai

Koneksi ke
QuadCopter

Ambil Foto

Modifikasi

Unggah

Ulangi

Selesai

Gambar 5.1 FlowChart Sistem

Dalam Desain Flowchart ini fungsi-fungsi yang ada dikelompokkan dalam desain
antarmuka aplikasi sebagai berikut:
- Desain antarmuka aplikasi Inovasi Desktop (Gambar 5.2)
- Desain antarmuka aplikasi Client Facebook (Gambar 5.3)

13
 Gambar 5.2 Desain Antarmuka Aplikasi Desktop

Fitur desain aplikasi Desktop

1. Koneksi
2. Ambil Bingkai
3. Jalankan Streaming
4. Ambil Gambar Bingkai + Foto Streaming
5. Panggil Aplikasi Client Facebook

Gambar 5.3 Desain Antarmuka Client Facebook

Fitur aplikasi Client Facebook
1. Tulis Pesan
2. Ambil Foto
3. Unggah

14
3. Tahapan Implementasi dan Pengujian
Implementasi sistem dibagi dalam beberapa bagian yang akan diuji tiap bagiannya
dalam tahapan pengujian. Sistem secara keseluruhan dapat digambarkan dalam
diagram blok berikut

Quadcopter

Gateway Streaming VLC Aplikasi Dektop Aplikasi Client Facebook

Facebook

Gambar 5.4 Sistem Inovasi Sistem Promosi Melalui Foto Udara Quadcopter
dengan Modifikasi dan Jejaring Sosial

Sistem Navigasi QuadCopter

a. Mode 1 (throttle stick di tangan kanan)

Mode 1 merupakan mode radio remote untuk tuas throttle radio remote yang

berada pada bagian kanan.

1) Ketika aileron stick digerakan kekiri dan kekanan, maka Quadcopter akan

bergerak kekiri dan atau kekanan. (Lihat Gambar 5.5)

15
 Gambar 5.5 Quadcopter bergerak kekiri

2) Ketika throttle stick digerakan naik atau kebawah, Quadcopter akan keatas atau

kebawah. (Lihat Gambar 5.6)

Gambar 5.6 Quadcopter bergerak keatas kebawah

3) Ketika rudder stick digerakkan ke kiri atau kekanan, kepala Quadcopter akan

menyesuaikan untuk ke kiri atau kekanan. (Lihat Gambar 5.7)

Gambar 5.7 Pergerakan kepala Quadcopter

16
4) Ketika elevator stick digerakkan naik atau turun, Quadcopter akan

menyesuaikannya untuk maju atau mundur. (Lihat Gambar 5.8)

Gambar 5.8 Quadcopter bergerak maju dan mundur

b. Mode 2 (throttle stick di tangan kiri)

Mode 2 merupakan mode radio remote untuk tuas throttle radio remote yang

berada pada bagian kiri.

1) Ketika aileron stick digerakan kekanan, maka Quadcopter akan

menyesuaikannya atau kekanan. (Lihat Gambar 5.9)

Gambar 5.9 Quadcopter menyesuaikan gerakan

2) Ketika throttle stick digerakkan naik atau turun, quadcopter akan

meneyesuaikannya untuk keatas atau kebawah. (Lihat Gambar 5.10)

17
 Gambar 5.10 Quadcopter menyesuaikan gerakan keatas kebawah

3) Ketika rudder stick digerakkan kekanan atau kekiri, maka kepala Quadcopter

akan menyesuaikannya untuk kekiri atau kekanan. (Lihat Gambar 5.11)

Gambar 5.11 Kepala Quadcopter bergerak menyesuaikan sitck pada rudder

4) Ketika elevator stick bergerak keatas dan kebawah, Quadcopter akan

menyesuaikannya untuk maju atau mundur. (Lihat Gambar 5.12).

Gambar 5.12 Gerakan Quadcopter menyesuaikan untuk maju dan mundur

18
c. Trimming the flight actions

Trimming the flight actions atau menggerakan robot secara manual

menggunakan tombol-tombol yang ada pada radio remote. Tombol-tombol ini yang

mengatur kecepatan setiap baling-baling robot terbang.

(1) Sesuaikan rudder trim

Memindahkan rudder trim jika kepala quadcopter kekiri selama lepas landas.

(Lihat Gambar 5.13).

Gambar 5.13 Menyesuaikan rudder trim

(2) Sesuaikan elevator trim

Gerakkan elevator trim kedepan selama lepas landas; jika bergerak keatas. (Lihat

Gambar 5.14).

Gambar 5.14 Menyesuaikan elevator trim

(3) Sesuaikan aileron trim

Gerakkan aileron trim kekanan jika quadcopter lepas landas; jika tidak gerakkan

kekiri. (Lihat Gambar 5.15).

19
 Gambar 5.15 Menyesuaikan aileron trim

Gateway Media Streaming

Streaming dilakukan menggunakan VLC versi 1.8 sebagai server streaming

quadcopter. Untuk melakukan streaming via VLC, maka jalankan terlebih dahulu

quadcopter.

1) Buka VLC dan Pilih “Streaming”. (Lihat Gambar 5.16).

Gambar 5.16 Jendela VLC Player - Stream

2) Masukkan network URL http://192.168.10.1:8080/?action=stream, kemudian

pilih stream. (Lihat Gambar 5.17).

Gambar 5.17 Open Media Network Protokol

3) Klik “Next” membuka jendela selanjutnya. (Lihat Gambar 5.18).

20
 Gambar 5.18 Jendela Stream Output

4) Pada “Destinations” group, pilih “HTTP” dan klik “Add”. (Lihat Gambar

5.19).

Gambar 5.19 Jendela Stream Output- destinations

5) Pilih dan ketikan port 1234 dan pilih Video- MPEG 2 +MPGA(TS), kemudian

klik “NEXT”. (Lihat Gambar 5.20).

Gambar 5.20 Jendela Stream Output- destinations-port:1234

6) Karena pengaksesan kamera pada robot terbang memerlukan authentication,

masukkan user name = admin, dan Password = admin123, lalu tekan tombol

OK. (Lihat Gambar 5.21).

Gambar 5.21 HTPP authentication

21
7) Setelah menekan tombol OK maka tampilan layar utama akan menunjukkan

stream. Tunggu hingga video stream bisa di lihat. (Lihat Gambar 5.22).

Gambar 5.22 Streaming-VLC media player

8) Media Streaming sudah dapat dilihat. (Lihat Gambar 5.23).

Gambar 5.23 Streaming sukses

Aplikasi Desktop
Proses Eksekusi Aplikasi Desktop dengan menjalankan Aplikasi Desktop.
Kemudian dengan membuat hubungan dengan QuadCopter Streaming. Untuk
pengujian saat ini dilakukan dengan mengambil File sebagai simulasi Streaming.
Sistem dibangun dengan konsep Loose Coupling. Sistem ini bisa berjalan mandiri

22
tanpa tergantung pada jenis QuadCopter yang dipakai. Media Streaming VLC
digunakan untuk memastikan konsep loose coupling ini berhasil dengan baik. Hasil
pengambilan video streaming VLC (disimulasikan dari file) seperti Gambar 5.24.

Gambar 5.24 Hasil Video VLC

Streaming dapat diambil gambarnya dan dimodifikasi dengan menggunakan

gambar bingkai. Hasilnya dapat dilihat seperti pada Gambar 5.25

Gambar 5.25 Hasil Foto QuadCopter Walkera Streaming

23
Unggah foto dilakukan dengan aplikasi Client Facebook yang dihubungkan dengan
aplikasi desktop.

Aplikasi ClientFacebook
Aplikasi ClientFacebook digunakan untuk unggah foto hasil modifikasi. Tampilan
Aplikasi seperti pada Gambar 5.26

Gambar 5.26 Aplikasi ClientFacebook

Untuk bisa upload foto, Facebook meminta autentikasi yang dilakukan dalam
proses login aplikasi Facebook. Gambar Login 5.27 sebagai hasil autentikasi

Gambar 5.27 Form Login Facebook

24
Isian data pesan dan foto seperti pada Gambar 5.28

Gambar 5.28 Data Pesan dan Foto

Setelah diunggah ke Wall Facebook didapatkan seperti Gambar 5.29

Gambar 5.29 Hasil foto di Wall Facebook

25
5.2 Analisis hasil
Hasil implementasi dan pengujian direkapitulasi dalam bentuk Tabel 5.1 berikut
Tabel 5.1 Analisis Hasil
No Fitur Hasil Keterangan
1 Gateway Streaming Baik Media Gateway Input-
ouput stream
2 Play Video Stream desktop Baik Play Stream Video
3 Modifikasi bingkai Baik Pixel JPEG
4 Capture foto dan bingkai Baik File JPEG Tes.JPG
5 Unggah Foto Baik Teknologi WPF
6 Video Walkera Kurang Baik Resolusi 0,3 Mpixel,
tidak ada teknologi
gimbal

Dari pengamatan sistem hardware dan software dapat dikatakan bahwa sistem
sudah dapat berjalan dengan baik. Konsep loose coupling aplikasi berjalan dengan
baik dengan media streaming gateway VLC sehingga hardware Quadcopter tidak
berpengaruh pada sistem software.
Video Streaming dengan menggunakan Walkera QR W100S menggunakan kamera
0,3 Mpixel dan tidak menggunakan teknologi gimbal sehingga hasil kamera tidak
terlalu tajam dan kurang stabil.
Aplikasi berjalan dengan baik dan dan dapat mengambil hasil video streaming
dengan teknik capture pixel beserta bingkainya dan berhasil melakukan unggah ke
Wall Facebook.

26
 BAB 6 Kesimpulan dan Saran

6.1 Kesimpulan
Kesimpulan dari hasil penelitian sebagai berikut
1. Sistem berhasil dibangun dengan konsep loose coupling untuk memisahkan
sistem hardware quadcopter dan software aplikasi
2. Pengujian sistem hardware dengan menggunakan Walkera QR W100S
menghasilkan video stream dengan kualitas 0,3 Mpixel. Kamera yang tidak
menggunakan teknologi gimbal meyebakan kamera kurang stabil
3. Aplikasi pemodifikasi sudah berhasil menggabungkan hasil capture video
streaming dan bingkai Jpeg ke sebuah file Jpeg.
4. Aplikasi berhasil melakukan unggah pesan dan foto Jpeg ke Wall Facebook

6.2 Saran
Saran dari penelitian sebagai berikut
1. Penggunaan hardware quadcopter yang lebih baik untuk pengujian integrasi
dalam bentuk foto udara
2. Penggunaan teknologi WPF untuk menggabungan dua buah aplikasi
menjadi satu aplikasi tunggal

27
 DAFTAR PUSTAKA

1. Dino Esposito. 2013. Cutting Edge - Essential Facebook Programming:

Building a Windows Client, MSDN Magazine Online January 2013
2. Shinta Puspitasari, Abdul Rahman, Dedy Hermanto . 2014. Perancangan dan
Implementasi Quadcopter untuk Foto Udara Objek-objek Wisata di Kota
Palembang. Jurnal Generic, Vol. 9, No. 2, September 2014, pp. 332~341
3. Yosa Rosario, Rudy Dikairono, dan Tri AriefSardjono. 2013. Sistem Navigasi
Ruangan Quadcopter Dengan Menggunakan Sensor Ultrasonik. Paper
Jurusan Teknik Elektro – FTI, Institut Teknologi Sepuluh Nopember (ITS)
4. Whanindra Kusuma, Rusdhianto Effendi AK, dan Eka Iskandar. 2012.
Perancangan dan Implementasi Kontrol Fuzzy-PID pada Pengendalian Auto
Take-Off Quadcopter UAV. JURNAL TEKNIK POMITS Vol. 1, No. 1, (2012)
1-6
5. Wahyu Sulistiyo dkk. 2012. Rancang Bangun Sistem Monitoring Objek
Bergerak Berbasis SMS dengan tampilan peta Google dibantu perangkat GPS,
Penelitian Polines sebagai anggota
6. Wayne Graham. 2008. Facebook API Developers Guide. Apress
7. Danang arradian. 2014. Eranya Drone. http://www.koran-
sindo.com/read/947155/152/2014-eranya-drone-1420602555
8. http://id.wikipedia.org/wiki/Gambar_bitmap, diunduh 17 April 2015
LAMPIRAN 1 JUSTIFIKASI BIAYA PENELITIAN

I. Alat dan Bahan Jumlah Satuan Sub Total Justifikasi

Walkera QR W100S 1 Rp2.600.000 Rp2.600.000 Alat
Pemancar Devo 1 Rp300.000 Rp300.000 Alat
Baterai Lipo 1 Rp500.000 Rp500.000 Bahan
Ram Komputer 8 GB 1 Rp900.000 Rp900.000 Alat
Pulsa Telepon 5 Rp100.000 Rp500.000 Bahan
Rp4.800.000
II. Perjalanan
Sewa Mobil 2 Rp250.000 Rp500.000 Survey, Pembelian alat dan Pengujian
Perjalanan Dalam Kota 9 Rp50.000 Rp450.000 Survey, Pembelian alat dan Pengujian
Rp950.000
III. Laporan dan Publikasi
Jurnal 5 Rp50.000 Rp250.000 Publikasi jurnal ilmiah
Laporan 10 Rp6.000 Rp60.000 laporan
Rp310.000
IV. Lain
Makan 48 Rp20.000 Rp960.000 koordinasi dan pelaksanaan
Snack 48 Rp10.000 Rp480.000 koordinasi dan pelaksanaan
Rp1.440.000

TOTAL Rp7.500.000
Lampiran 2

Dukungan Sarana Prasarana

1. Lab Komputer untuk Pemrograman Prodi Informatika

Digunakan untuk pengembangan dan integrasi sistem

2. Laptop masing-masing Peneliti

Digunakan untuk pengembangan aplikasi
Lampiran 3

Susunan Organisasi Peneliti

Ketua : Wahyu Sulistiyo, S.T., M.Kom.

Tugas : Analisis, Desain, Pemrograman
Kompetensi : Pemrograman Antarmuka
Waktu Kerja : 3 jam/Minggu

Anggota : Ari Sriyanto N, S.T., M.T., M.Sc.

Tugas : Hardware Antarmuaka
Kompetensi : Jaringan
Waktu Kerja : 3 jam/ minggu

Anggota : Budi Suyanto, S.T., M.Eng.

Tugas : Desain Grafik dan Pengembangan Antarmuka
Kompetensi : Desain Multimedia
Waktu Kerja : 3 Jam / minggu

Anggota : Drs. Parsumo Raharjo, M.Kom

Tugas : Analisis dan desain
Kompetensi : Jaringan dan Sistem Operasi
Waktu Kerja : 3 jam/ Minggu

Anggota : Sukamto, S.Kom., M.T

Tugas : Desain dan Pemrograman
Kompetensi : Pemrograman
Waktu Kerja : 3 jam/ Minggu

Pembantu Mahasiswa : Syarif Hidatullah

Tugas : Pembantu Umum
Waktu Kerja : 2 Jam/ Minggu
Lampiran 4 Biodata Peneliti
DAFTAR RIWAYAT HIDUP

1. Ketua Peneliti
1. Nama lengkap : Wahyu Sulistiyo,S.T., M.Kom
2. Jenis Kelamin : Laki-Laki
3. Pangkat/Gol/NIP : Penata/ III C / 197704012005011001
4. Jabatan Fungsional : Lektor
5. Jurusan/Program Studi : Teknik Elektro/Teknik Informatika
6. Perguruan Tinggi : Politeknik Negeri Semarang
7. Riwayat Pendidikan :

No. Macam Pendidikan Tempat Tahun Sertifikat/Gelar Bidang

1 D3 Politeknik Semarang 1998 A.Md. T Elektronika

2 S1 Undip Semarang 2004 S.T. T.Komputer &
Informatika
3 S2 Undip Semarang 2012 M.Kom. Sistem
Informasi

8. Pengalaman Penelitian :
- Desain Aplikasi Multimedia dengan Data Dinamis untuk mendukung metode
pembelajaran berbasis E-Learning
- Desain dan rancang bangun perangkat lunak pemonitor pengendali motor DC
berbasis PID dengan variabel tunning
- Rancang bangun aplikasi Android untuk navigasi lokasi objek wisata di kota
Semarang dibantu perangkat GPS
- Rancang bangun sistem Monitoring objek bergerak berbasis SMS dengan
tampilan peta Google dibantu perangkat GPS

Semarang, Juni 2015

Ketua

Wahyu Sulistiyo, S.T., M.Kom

NIP 197704012005011001
2. Anggota Peneliti
1. Nama
2. Jenis Kelamin
3. Alamat
4. Pangkat/ Gol./NIP
5. Jabatan Fungsional
6. Fakultas/ Jurusan
7. Perguruan Tinggi
8. Alamat Kantor
9. Riwayat Hidup
: Ari Sriyanto Nugroho, S.T., M.T., M.Sc.
: Laki-laki
: Bukit Emerald Jaya, Semarang
: Penata /III C / 197409042005011001
: Lektor
: Politeknik / Elektro
: Politeknik Negeri Semarang
: Jl. Prof . Sudharto, S.H., Tembalang ,Smg
:

Pendidikan Tempat Tahun Bidang Spesialisasi

SD Prembun 1981
SMP Prembun 1984
SMA Yogyakarta 1987
S1 Yogyakarta 1993 Teknik Informatika
S2 Semarang 2012 Magister Sistem
Informasi

10. Pengalaman Penelitian :

• Sistem Pengaturan Lampu Menggunakan Jaringan Komputer Lokal:
Sebuah Model Pengaturan Peranti Sistem Masukan dan Sistem
Keluaran Melalui LAN (Local Area Network)
• Comparison of FG/BG Detection Methods for Extracting Road Traffic
Parameters
• The effect of topology on energy Conservation in wireless sensor network

Semarang, Juni 2015

Anggota,

Ari Sriyanto Nugroho, S.T, M.T., M.Sc.

NIP. 197409042005011001
3. Anggota Peneliti
1. Nama Lengkap dan Gelar : Budi Suyanto, S.T., M.Eng.
2. Tempat dan Tanggal : Ngawi, 03 Oktober 1976
Lahir
3. Umur/Jenis Kelamin : 35 Tahun/ Laki-laki
4. Pangkat/Jabatan/NIP : Penata Tk. I/Lektor/197610032003121002
5. Perguruan : Politeknik Negeri Semarang/T.Elektro
Tinggi/Jurusan
6. Bidang Keahlian : Informatika
7. Riwayat Pendidikan :

No. Macam Tempat Tahun Sertifikat/Gelar Bidang

Pendidikan
a. SD Ngawi 1989 - -
b. SMP Ngawi 1992 - -
c. SMA Ngawi 1995 - IPA -Fisika
d. S1 Yogyakarta 2001 S.T. Teknik
Informatika
e. S2 Yogyakarta 2012 M.Eng. Sistem Komputer
& Informatika

8. Pengalaman Penelitian :
a. Penelitian pembuatan system ajar berbasis e-learning tahun 2010
b. Penelitian pembuatan system informasi pasien berbasis smart card 2010
c. Desain 3 Dimensi Karakter Wayang Kulit Gagrag Jogjakarta,
UNBRAW Malang Scietec 2012

Semarang, Juni 2015

Penyusun,

Budi Suyanto, S.T., M.Eng.

NIP. 197610032003121002
4. Anggota Peneliti
1. Nama Lengkap dan Gelar
2. Tempat/ Tgl lahir
3. Jenis Kelamin
4. NIP
5. Pangkat/Jabatan
6. Prodi / Jurusan
7. Bidang Keahlian
: Drs Parsumo Rahardjo, M.Kom
: Batang, 22 Agustus 1960
: Laki- Laki
: 196008221988031001
: IV B / Lektor Kepala
: T. Informatika / T. Elektro.
: Jaringan Komputer, Sistem Operasi

8. Riwayat Pendidikan
Pendidikan Tempat Tahun Spesialisasi
S1 IKIP Semarang 1984
S2 UGM Yogyakarta 2002 Komputer

9. Pengalaman dalam bidang Penelitian:

• Aplikasi Perangkat Lunak MatLab Sebagai Media Analisis Rangkaian-
Rangkaian Elektronika 2008
• Uji Keamanan Koneksitas Pada Jaringan Komputer Tanpa kawat
Menggunakan Standrad IEEE 802.11b, 2011

Semarang, Juni 2015

Drs. Parsumo Rahardjo,M.Kom

NIP 19600821988031001
5. Anggota Peneliti
1. Nama Lengkap dan Gelar
2. Tempat/ Tgl lahir
3. Jenis Kelamin
4. NIP
5. Pangkat/Jabatan
6. Prodi / Jurusan
7. Bidang Keahlian
: Sukamto, S.Kom, M.T
: Pemalang, 17 Januari 1971
: Laki-Laki
: 197101172003121001
: III B / Penata Muda Tk. I
: T. Informatika / T. Elektro.
: Sistem Informasi

Riwayat Pendidikan
Tempat Titel/
Tempat Tahun Lulus Bid. Spesialisasi
Pendidikan Ijazah
STMIK
Yogyakarta 1998 Sarjana Teknik Informatika
Akakom
Sistem Kom &
USU Medan 2011 Magister
Informatika

8. Pengalaman dalam bidang Penelitian:

a. Sistem Terpadu Rekam Medik Rumah Sakit Dengan Smart Card
b. Desain Aplikasi Multimedia Dengan Data Dinamis Untuk Mendukung
Metode Pengajaran Berbasis E-Learning
c. Rancang Bangun Sistem Informasi Alumni Politeknik Negeri Semarang
Menggunakan Teknologi Wireless
d. Desain dan Rancang Bangun Perangkat Lunak Pemonitor Pengendali
Motor DC Berbasis PID Dengan Variabel Tuning
e. Pemanfaatn E-Learning Sebagai Pendukung Program Polines
SmartCampus

Semarang, Juni 2015

Penyusun

Sukamto, S.Kom, M.T

NIP 197101172003121001
6. Pembantu Umum
A. Data Diri
1 Nama Lengkap Syarif Hidayatullah
2 Jenis Kelamin Laki – Laki
3 Jurusan Teknik Elektro
4 Program Studi Teknik Informatika
5 NIM 3.34.12.0.21
6 Tempat dan Tanggal Lahir Kendal, 17 Maret 1994
7 E-mail firays_es@yahoo.es
8 Alamat Jl. Gajahmada Rt/Rw:02/03
Kel.Karangsari Kec.Kota Kendal
9 Nomor Telepon/HP +6285741389632

B. Riwayat Pendidikan
SD SMP SMA
Perguruan
Tinggi
Nama SD Negeri 2 SMP Negeri 1 SMA Politeknik
Institusi Karangsari Kendal Negeri 2 Negeri
Kendal Semarang
Jurusan IPA Teknik
Elektro
Tahun 1999-2005 2006-2009 2009-2012 2012-
Masuk- present
Lusus

Semarang, Oktober 2015

Penyusun

Syarif Hidayatullah
NIM 3.34.12.0.21
 Surat Pernyataan Ketua Peneliti

Yang bertanda tangan di bawah ini:

Nama : Wahyu Sulistiyo, S.T., M.Kom

NIDN : 0001047705
Pangkat/Golongan : Penata/ III C
Fungsional : Lektor

Dengan ini mengatakan bahwa proposal penelitian saya dengan judul

INOVASI SISTEM PROMOSI

MELALUI FOTO UDARA QUADCOPTER
DENGAN MODIFIKASI DAN JEJARING SOSIAL

Yang diusulkan dalam penelitan terapan Politeknik Negeri Semarang pada tahun
anggaran 2015 bersifat original dan belum pernah dibiaya oleh lembaga/sumber
dana lain.

Bilamana di kemudian hari ditemukan ketidaksesuaian dengan pernyataan ini,

maka saya bersedia dituntut dan diproses sesuai dengan ketentuan yang berlaku dan
mengembalikan seluruh biaya penelitian yang sudah diterima ke kas negara.

Demikian pernyataan ini dibuat dengan sesungguhnya dan sebenarnya

Semarang, Juni 2015

Mengetahui Yang menyatakan
Kepala P3M

Dr.Eng.Sidiq Saymsul Hidayat Wahyu Sulistiyo, S.T., M.Kom.

NIP 197203112000031002 NIP 197704012005011001
LAMPIRAN
FOTO QUAD COPTER
 KODE PROGRAM

Aplikasi Desktop
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
using System.Drawing.Imaging;

namespace proVLC
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}

public static void TakeCroppedScreenShot(string fileName, int x,

int y, int width, int height, ImageFormat format)
{
try
{
Rectangle r = new Rectangle(x, y, width, height);
Bitmap bmp = new Bitmap(r.Width, r.Height,
PixelFormat.Format32bppArgb);
Graphics g = Graphics.FromImage(bmp);
g.CopyFromScreen(r.Left, r.Top, 0, 0, bmp.Size,
CopyPixelOperation.SourceCopy);
bmp.Save(fileName, format);
}
catch
{

MessageBox.Show("Error");
}
}

private void btnCapture_Click(object sender, EventArgs e)

{

if (pbxCap.Image != null)
{
pbxCap.Image.Dispose();
pbxCap.Image = null;
}
 TakeCroppedScreenShot(@"D:\test.jpg", this.Left + myPanel.Left,
this.Top + myPanel.Top, myPanel.Width, myPanel.Height, ImageFormat.Jpeg);
pbxCap.Image = Image.FromFile(@"D:\test.jpg");
pbxCap.SizeMode = PictureBoxSizeMode.StretchImage;
}

private void btnExit_Click(object sender, EventArgs e)

{
System.Windows.Forms.Application.Exit();
}

private void btnConnect_Click(object sender, EventArgs e)

{
OpenFileDialog openFileDialog1 = new OpenFileDialog();

if (openFileDialog1.ShowDialog() == DialogResult.OK)
{
vlc.playlist.add(@"file:///" + openFileDialog1.FileName,
openFileDialog1.SafeFileName, null);

}
}

private void btnPlay_Click(object sender, EventArgs e)

{
vlc.playlist.play();
}

private void btnList_Click(object sender, EventArgs e)

{
OpenFileDialog openFileDialog1 = new OpenFileDialog();

if (openFileDialog1.ShowDialog() == DialogResult.OK)
{
pbxFrame.Image = null;
pbxFrame.Image =
Image.FromFile(openFileDialog1.FileName,true);
pbxFrame.SizeMode = PictureBoxSizeMode.StretchImage;

}
}

private void btnFace_Click(object sender, EventArgs e)

{

System.Diagnostics.Process.Start(@"ClientFacebook\FbAuthWpf.exe");
}

}
}
Aplikasi ClientFacebook <MODIFIKASI DARI MSDN MAGAZINE>

<MainWindow.XAML>

Imports Facebook
Imports FbAuthWpf.Presenters

'Imports System
'Imports System.Windows
'Imports System.Windows.Controls
'Imports System.Windows.Navigation

Namespace FbAuthWpf
''' <summary>
''' Interaction logic for MainWindow.xaml
''' </summary>
Partial Public Class MainWindow
Private ReadOnly _viewPresenter As MainWindowPresenter

Public Sub New()

InitializeComponent()
AddHandler loginButton.Click, AddressOf loginButton_Click
AddHandler logoutButton.Click, AddressOf
logoutButton_Click
AddHandler postButton.Click, AddressOf postButton_Click
AddHandler browseButton.Click, AddressOf
browseButton_Click
AddHandler facebookBrowser.Navigated, AddressOf
facebookBrowser_Navigated

_viewPresenter = New MainWindowPresenter(Me)

DataContext = _viewPresenter
End Sub

Public ReadOnly Property Browser As WebBrowser

Get
Return facebookBrowser
End Get
End Property

Private Sub facebookBrowser_Navigated(ByVal sender As Object,

ByVal e As NavigationEventArgs)
Dim fb = New FacebookClient
Dim oauthResult As FacebookOAuthResult = Nothing
If Not fb.TryParseOAuthCallbackUrl(e.Uri, oauthResult)
Then
Exit Sub
End If

If oauthResult.IsSuccess Then
_viewPresenter.LoginSucceeded(oauthResult)
Else
_viewPresenter.LoginFailed(oauthResult)
End If
End Sub
 Private Sub loginButton_Click(ByVal sender As Object, ByVal e As
RoutedEventArgs)
_viewPresenter.Login()
End Sub

Private Sub logoutButton_Click(ByVal sender As Object, ByVal e

As RoutedEventArgs)
_viewPresenter.Logout()
End Sub

Private Sub postButton_Click(ByVal sender As Object, ByVal e As

RoutedEventArgs)
_viewPresenter.PostUpdate()
End Sub

Private Sub browseButton_Click(ByVal sender As Object, ByVal e

As RoutedEventArgs)
_viewPresenter.BrowseForJpegFile()
End Sub
End Class
End Namespace

<MainWindowsPresenter.VB)
Imports System.ComponentModel
Imports Facebook
Imports FbAuthWpf.Common

Namespace FbAuthWpf.Presenters
Public Class MainWindowPresenter
Implements INotifyPropertyChanged

#Region "Private members"

Private ReadOnly _view As MainWindow
Private _token As String
Private _status As String
Private _userName As String
Private _userPicture As String
Private _photoPath As String
Private _showBrowser As Boolean
Private _isLogged As Boolean
#End Region

Public Sub New(ByVal view As MainWindow)

_view = view
_showBrowser = False
ResetUserInfo()
End Sub

''' <summary>
''' Gets and sets the FB token of the current user.
''' </summary>
Public Property Token As String
Get
Return _token
End Get
Set(ByVal value As String)
 _token = value
OnPropertyChanged("Token")
End Set
End Property

''' <summary>
''' Gets and sets the name of the currently logged user.
''' </summary>
Public Property UserName As String
Get
Return _userName
End Get
Set(ByVal value As String)
_userName = value
OnPropertyChanged("UserName")
End Set
End Property

''' <summary>
''' Gets and sets the URL of the FB user picture.
''' </summary>
Public Property UserPicture As String
Get
Return _userPicture
End Get
Set(ByVal value As String)
_userPicture = value
OnPropertyChanged("UserPicture")
End Set
End Property

''' <summary>
''' Gets and sets the text to post.
''' </summary>
Public Property Status As String
Get
Return _status
End Get
Set(ByVal value As String)
_status = value
OnPropertyChanged("Status")
End Set
End Property

''' <summary>
''' Gets and sets the photo path to post.
''' </summary>
Public Property PhotoPath As String
Get
Return _photoPath
End Get
Set(ByVal value As String)
_photoPath = value
OnPropertyChanged("PhotoPath")
End Set
End Property
 ''' <summary>
''' Shows and hides programmatically the web browser used to log to
FB.
''' </summary>
Public Property ShowBrowser As Boolean
Get
Return _showBrowser
End Get
Set(ByVal value As Boolean)
_showBrowser = value
OnPropertyChanged("ShowBrowser")
End Set
End Property

''' <summary>
''' Shows and hides programmatically the web browser used to log to
FB.
''' </summary>
Public Property IsLogged As Boolean
Get
Return _isLogged
End Get
Set(ByVal value As Boolean)
_isLogged = value
OnPropertyChanged("IsLogged")
End Set
End Property

''' <summary>
''' Triggers the authentication process towards Facebook
''' </summary>
Public Sub Login()
Dim loginUrl = FbHelpers.GetLoginUrl
ShowBrowser = True
_view.Browser.Navigate(loginUrl)
End Sub

''' <summary>
'''
''' </summary>
Public Sub Logout()
ResetUserInfo()
End Sub

''' <summary>
'''
''' </summary>
Public Sub PostUpdate()
If String.IsNullOrEmpty(PhotoPath) Then
FbHelpers.Post(Token, Status)
Else
FbHelpers.PostWithPhoto(Token, Status, PhotoPath)
End If

Status = String.Empty
PhotoPath = String.Empty
End Sub
 ''' <summary>
'''
''' </summary>
Public Sub BrowseForJpegFile()
Dim dialog = New Microsoft.Win32.OpenFileDialog With {.DefaultExt
= ".jpg", .Filter = "JPEG |*.jpg"}
Dim result = dialog.ShowDialog
If result = True Then
PhotoPath = dialog.FileName
End If
End Sub

''' <summary>
'''
''' </summary>
''' <param name="oauthResult"></param>
Public Sub LoginSucceeded(ByVal oauthResult As FacebookOAuthResult)
ShowBrowser = False
Dim token = FbHelpers.GetAccessToken(oauthResult)
Me.Token = token
Dim user As Object = FbHelpers.GetUser(token)

UserName = String.Format("{0} {1}", user.first_name,

user.last_name)
UserPicture = user.picture.ToString
IsLogged = True
End Sub

''' <summary>
'''
''' </summary>
''' <param name="result"></param>
Public Sub LoginFailed(ByVal result As FacebookOAuthResult)
ShowBrowser = False
IsLogged = False
MessageBox.Show(result.ErrorDescription)
End Sub

#Region "Private"
Private Sub ResetUserInfo()
UserName = "No user currently logged in."
UserPicture = String.Empty
IsLogged = False
Status = "Another post in the wall"
End Sub
#End Region

#Region "INotifyPropertyChanged"
Public Event PropertyChanged As PropertyChangedEventHandler Implements
INotifyPropertyChanged.PropertyChanged
Public Sub OnPropertyChanged(ByVal propertyString As String)
Dim handler As PropertyChangedEventHandler = PropertyChangedEvent
If Not handler Is Nothing Then
handler(Me, New PropertyChangedEventArgs(propertyString))
End If
End Sub
#End Region

End Class
End Namespace

<FBHelpers.VB>
Imports System.Configuration
Imports System.IO
Imports Facebook

Namespace FbAuthWpf.Common
Public Class FbHelpers
Public Shared Function GetLoginUrl() As String
Dim client = New FacebookClient
Dim fbLoginUri = client.GetLoginUrl(New With {Key .client_id =
ConfigurationManager.AppSettings("fb_key"), Key .redirect_uri =
"https://www.facebook.com/connect/login_success.html", Key .response_type =
"code", Key .display = "popup", Key .scope = "email,publish_actions"})

Return fbLoginUri.ToString
End Function

Public Shared Function GetAccessToken(ByVal oauthResult As

FacebookOAuthResult) As String
Dim client = New FacebookClient
Dim result As Object = client.Get("/oauth/access_token", New With
{Key .client_id = ConfigurationManager.AppSettings("fb_key"), Key
.client_secret = ConfigurationManager.AppSettings("fb_secret"), Key
.redirect_uri = "https://www.facebook.com/connect/login_success.html", Key
.code = oauthResult.Code})

Return result.access_token.ToString
End Function

Public Shared Function GetUser(ByVal token As String) As Object

Dim client = New FacebookClient
Dim user = client.Get("/me", New With {Key .fields =
"first_name,last_name,email,picture,gender", Key .access_token = token})
Return user
End Function

Public Shared Sub Post(ByVal token As String, ByVal status As

String)
Dim client = New FacebookClient(token)
Dim result As Object = client.Post("/me/feed", New With
{Key .message = status})
Dim x = 0
End Sub

Public Shared Sub PostWithPhoto(ByVal token As String, ByVal

status As String, ByVal photoPath As String)
Dim client = New FacebookClient(token)
Using stream = File.OpenRead(photoPath)
 Dim result As Object = client.Post("me/photos", New
With {Key .message = status, Key .file = New FacebookMediaStream With
{.ContentType = "image/jpg", .FileName =
Path.GetFileName(photoPath)}.SetValue(stream)})
End Using
End Sub
End Class
End Namespace

<VisibilityConverter.VB>

Imports System.Globalization

Namespace FbAuthWpf.Common
Public Class VisibilityConverter
Implements IValueConverter

Public Function Convert(ByVal value As Object, ByVal targetType

As Type, ByVal parameter As Object, ByVal culture As CultureInfo) As Object
Implements IValueConverter.Convert
If TypeOf value Is Boolean Then
Dim negateValue As Boolean
Boolean.TryParse(TryCast(parameter, String),
negateValue)

Dim newValue As Boolean

If negateValue Then
newValue = Not CType(value, Boolean)
Else
newValue = CType(value, Boolean)
End If
Return If(newValue, Visibility.Visible,
Visibility.Hidden)
End If

Return value
End Function

Public Function ConvertBack(ByVal value As Object, ByVal

targetType As Type, ByVal parameter As Object, ByVal culture As CultureInfo)
As Object Implements IValueConverter.ConvertBack
Throw New NotImplementedException
End Function
End Class
End Namespace