7/18/2019 Comunnication Client Server

http://slidepdf.com/reader/full/comunnication-client-server 1/9

Page 1 

1

Tutorial Client-Server Komunikasi EE368/CS232 Digital Image Processing, Musim Dingin 2014

Pengantar 

Dalam tutorial ini, kita akan belajar bagaimana mengatur komunikasi client-server untukmenjalankan gambaraplikasi pengolahan pada server dari perangkat Android. Karena banyak pengolahan citraalgoritma memerlukan biaya kompleksitas tinggi, menjalankan algoritma ini pada klien mobiledenganinteraksi responsif sering tidak layak. Salah satu obat untuk masalah ini adalah untuk offload pekerjaan keserver kinerja tinggi melalui jaringan.Gambar 1 Contoh dari sistem pengolahan citra client-serverSebagai contoh ilustrasi, misalkan Anda ingin offload perhitungan SIFT1

dariPerangkat Android ke server dalam proyek kelas Anda. Gambar 1 menggambarkan skema yangmungkin untuk klien-sistem pengolahan citra Server. Pengguna pertama akan mengambil foto masukan menggunakanAndroidklien dan mengirim foto ke server melalui HTTP. Sebuah script PHP pada server kemudianmemanggilaplikasi server-side untuk menghitung SIFT pada gambar. Setelah perhitungan selesai,Server akan mengirimkan hasilnya kembali ke perangkat Android untuk ditampilkan.1SIFT: Fitur Scale-invariant transform. Untuk referensi, lihat EE368 "Skala-Space Image

 Processing"  dan"Metode Fitur berbasis untuk Image Matching"  slide kuliah atau Lowe, David G. (2004)"Distinctive Gambar Fitur dari Skala-Invarian Poin penting ". 

Page 2 

2Kami akan menggunakan contoh di atas seluruh tutorial kami. Tutorial ini dibagi menjadi dua bagian. Bagian pertama dari tutorial ini akan fokus pada cara mengatur aplikasi server. Kamiakanmenerapkan script PHP untuk memfasilitasi komunikasi client-server dan membangun server-

sideaplikasi untuk menghitung SIFT menggunakan Matlab dan perpustakaan VLFeat. Pada bagiankedua, kita akanmenjelaskan bagaimana untuk menangani komunikasi client-server pada klien Android.Disclaimer: Tutorial ini adalah untuk tujuan pendidikan saja. Hal ini ditujukan bagi siswa yangakan ingin membangun sebuah prototipe cepat bekerja untuk proyek-proyek kelas mereka. Perludiketahui bahwa tutorial

7/18/2019 Comunnication Client Server

http://slidepdf.com/reader/full/comunnication-client-server 2/9

tidak mempertimbangkan masalah sistem praktis, seperti keamanan dan kehandalan, dalam pengaturan dunia nyata.Pra-syarat:  

 Selesai tutorial Android # 1 dari EE368, "Tutorial Menggunakan Android untuk Gambar  Proyek Pengolahan ".

 Sebelum pengalaman dengan PHP dan menjalankan server web.  Sebuah server dengan Matlab, HTTP software (Apache, IIS, dll) dan PHP diinstal Bagian I: Server Server Setup  1. Tutorial ini mengasumsikan Anda memiliki web server dengan HTTP software (Apache, IIS,dll) dan PHPdiinstal. Jika tidak, silakan lihat link berikut tentang cara men-setup server web:http://www.wampserver.com/en/ (Windows)http://www.mamp.info/en/index.html (Mac)

https://help.ubuntu.com/community/ApacheMySQLPHP (Linux / Ubuntu)Ambil Server Sour ce Code  2. Pada server Anda, men-download kode sumber server dari tutorial dari:http://www.stanford.edu/class/ee368/Android/Tutorial3/EE368_Android_Tutorial3_Server.zip 3. EkstrakEE368_Android_Tutorial3_Server.zipke direktori web hosting Anda. Contoh:/ Var / www /atau/ Home / <username> / public_html

di Linux / Ubuntu.VLFeat Perpustakaan  Dalam tutorial ini, kita akan menggunakan library VLFeat (http://www.vlfeat.org ) Untuk menghitung SIFT darigambar pada server. VLFeat adalah perangkat lunak open-source yang ditulis dalam C denganantarmuka untuk Matlab untukkemudahan penggunaan dan eksperimen. Perpustakaan mengimplementasikan banyak visikomputer umumalgoritma termasuk SIFT, MSER dan k-means. Beberapa dari Anda mungkin menemukan perpustakaan ini sangat berguna

untuk proyek kelas Anda.4. Untuk menggunakan VLFeat, men-download dan membongkar paket biner dari:http://www.vlfeat.org/download.html Atau, Anda dapat menggunakan paket VLFeat(./vlfeat-0.9.14) Yang sudah disediakan difile tutorial.

7/18/2019 Comunnication Client Server

http://slidepdf.com/reader/full/comunnication-client-server 3/9

Page 3 

35.Untuk menggunakan dan antarmuka VLFeat dengan Matlab, tambahkan baris ini ke Andastartup.m

file:menjalankan ('<path_to_your_VLFeat_Library> / toolbox / vl_setup')Silakan lihat link ini untuk membuat atau memodifikasistartup.m:http://www.mathworks.com/help/techdoc/ref/startup.html Matlab Script:  computeSIFT.m  Di dalam file tutorial, kami telah menulis script Matlab,computeSIFT.m, Untuk menghitung

SIFT dari suatu gambar untuk Anda. Dibutuhkan gambar masukan darimeng-uploadfolder dan mengkonversinya menjadigambar grayscale dengan presisi tunggal:InputImg = imread (input_img_path);GrayImg = tunggal (rgb2gray (InputImg));Setelah mendapat gambar grayscale, kita hanya menggunakanvl_siftdari VLFeat untuk menghitung SIFT,[F, d] = vl_sift (GrayImg);

 Setiap kolom 

fadalah keypoint SIFT dengan Format [X, Y, S, TH], X, Y adalah pusatkeypoint ini, S adalah skala dan TH adalah orientasi (dalam radian).

 Setiap kolom d adalah 128-dimensi SIFT descriptor. Setelah SIFT dihitung, kita plot keypoints relevan dengan menggunakanvl_plotframe pada berwarnagambar dan menyimpan hasilnya kekeluaranfolder.Script PHP:  

computeSIFT.php  Sebuah script PHP disebutcomputeSIFT.php juga termasuk dalam file tutorial. Silakan cepatterlihat. Script PHP ini memungkinkan klien untuk meng-upload gambar ditangkap danmengembalikan perbedaan-of-Gaussian (DoG) keypoints gambar dari perhitungan SIFT. Di bawah ini adalah potongan kodedari

7/18/2019 Comunnication Client Server

http://slidepdf.com/reader/full/comunnication-client-server 4/9

computeSIFT.phpuntuk mengambil gambar masukan upload dari klien:# Menyatakan Target path untuk menyimpan foto di upload di server". / Upload /" $ photo_upload_path =;$ Photo_upload_path = $ photo_upload_path. basename (

$ _FILES ['Uploadedfile'] ['name']);# Copy file upload sementara untuk jalan yang menyimpan upload foto menargetkanif (copy ($ _FILES ['uploadedfile'] ['tmp_name'], $ photo_upload_path)) {# Melakukan sesuatu pada gambar ....}Di sisi client, kami akan posting upload gambar ke server dengan memanggilcomputeSIFT.php.File gambar diupload ke tempat penyimpanan sementara pada server. Untuk menyimpan file kitaupload,kita perlu untuk merujuk ke array asosiatif$ _FILES

, Yang menyimpan semua informasi tentang filediposting. Ada tiga elemen array ini Anda harus tahu untuk tujuan kita:

Page 4 

4

 uploadedfile- Referensi kami akan menetapkan ketika kita posting file dari klien. Kami akan perlu ini untuk memberitahu$ _FILESArray berkas yang kita ingin proses.

 $ _FILES ['Uploadedfile'] ['name']-nama berisi path asli dari klienfile upload.

 $ _FILES ['Uploadedfile'] ['tmp_name']-tmp_name berisi path ke

file sementara yang berada di server.Setelah path file sementara diketahui, kita dapat menyalin file upload ke kamimeng-uploadfolder untuk pengolahan. Untuk menjalankan script Matlab kamicomputeSIFT.mdi PHP, kita menulis (lihatcomputeSIFT.php

7/18/2019 Comunnication Client Server

http://slidepdf.com/reader/full/comunnication-client-server 5/9

, Line # 59-60):Perintah $ = "matlab-nojvm-nodesktop-nodisplay-r\ "ComputeSIFT ('$ photo_upload_path', '$ processed_photo_output_path'); exit \" ";exec ($ perintah);

 

Perintah $variabel mendefinisikan baris perintah yang diperlukan untuk melaksanakancomputeSIFT.mseolah-olahAnda menjalankan dari prompt baris perintah. Untuk perintah Matlab, kita tentukanPilihan "-Nojvm-nodesktop-nodisplay "untuk menonaktifkan Matlab GUI dan tampilan. Kamikemudian memanggil fungsi Matlab kami menggunakan"computeSIFT ('$ photo_upload_path', '$ processed_photo_output_path') ".

'$ Photo_upload_path'dan '$ Processed_photo_output_path 'menentukan input path gambar dan path output gambar masing-masing.

 exechanya mengeksekusi perintah yang ditetapkan.Setelah script Matlab dijalankan,computeSIFT.php perlu untuk secara otomatis mendorong hasil

kembali ke klien Android. Kami telah menerapkan fungsi PHP yang disebutstreamFile(Lihat baris# 9) untuk melakukan ini untuk Anda dengan mudah:streamFile ($ lokasi, $ filename, $ mimetype)

 $ Lokasiadalah path file dari file sumber.

 $ Filenameadalah nama file yang klien akan digunakan untuk menyimpan file.

 $ Mimetypeadalah jenis set karakter. Anda dapat menggunakan'Application / octet-stream'sebagaitipe MIME dalam contoh ini.Penguj ian Server Kode  6. Untuk menguji kode server Anda, kami menyediakan

7/18/2019 Comunnication Client Server

http://slidepdf.com/reader/full/comunnication-client-server 6/9

test.htmldalam file tutorial. Anda dapat memuattest.htmlmenggunakan browser Internet dan meng-upload gambar tes dalam format JPEG. Jika serverAnda

script setup berhasil, gambar output dengan SIFT keypoints penjelasan akandidownload ke browser Anda dalam beberapa detik. Gambar 2 menunjukkan contoh tesgambar dan hasil yang sesuai.

Page 5 

5Gambar 2 (Kiri) image uji Masukan (Kanan) hasil output dengan SIFT keypointsKetika Matlab tidak tersedia  Jika Anda tidak memiliki Matlab tersedia di server Anda, Anda dapat dengan mudah merujuk ke perpustakaan dan VLFeatmenulis program C Anda sendiri untuk menghitung SIFT. Alih-alih memanggil perintah Matlab,

Anda dapatmenggantiPerintah $(Baris # 59) dengan perintah eksekusi biner AndacomputeSIFT.php:Perintah $ = "<your_program_path> / <your_program_name> <arguments>"

Bagian II: Android Client Unduh Client Kode Sumber  1. Pada server Anda, men-download dan unzip source code klien dari:http://www.stanford.edu/class/ee368/Android/Tutorial3/EE368_Android_Tutorial3_Client.zip 

Menyiapkan Android Application Client  2. Buka Eclipse, dan pilih File → New → Project Android.

3. Pilih 'Buat proyek dari sumber yang ada' dan masukkan nama proyek 'SIFTExample '. Untuklokasi proyek, pilih jalur kode klien membuka ritsleting Anda.4. Memilih target membangun Android Anda. Android 2.2 dianjurkan.5. Pergi keSIFTExampleActivity.javadan masukkan URL dari server AndacomputeSIFT.php

oleh baris editing # 51:String SERVERURL swasta akhir = "";untukString SERVERURL swasta akhir = "http:// <server-path> / computerSIFT.php";

Page 6 

6

7/18/2019 Comunnication Client Server

http://slidepdf.com/reader/full/comunnication-client-server 7/9

6. Jalankan aplikasi pada perangkat Android Anda. Pastikan ponsel Anda sudahterhubung ke Internet. Sebuah preview kamera akan ditampilkan. Mengambil snapshot gambardenganmenekan tombol kamera. Kemudian, gambar harus otomatis upload ke server Anda.Jika semuanya telah diatur dengan benar, gambar output dengan SIFT keypoints harus

ditampilkan padalayar setelah beberapa detik. Untuk mengambil gambar lain, Anda dapat menekan tombolkamera lagi.Selamat! Anda telah berhasil membangun client-server sistem pengolahan gambar Anda sendiri.Penanganan Cl ient-Sever Komuni kasi Android Cli ent  DiSIFTExample proyek, kami memiliki tiga file sumber utama:

 SIFTExampleActivity.java: File aktivitas utama. Menangani UI dan client-server

komunikasi. ResultView.java: Pandangan permukaan untuk menarik hasil output gambar Anda.

 Preveiew.java: Pandangan permukaan yang menampilkan pratinjau kamera. Sama seperti apa yang Andamilikidilihat di Tutorial # 1.Sering kali, itu adalah praktek pemrograman yang baik untuk memiliki komunikasi server-clienttidak mengganggu

dengan aliran benang program utama kami. Ini membantu menjaga aplikasi kita responsif setiapsaat.Oleh karena itu, salah satu solusi untuk masalah ini adalah dengan memiliki tugas asynchronousuntuk mengelola server kamikomunikasi klien. Untuk melaksanakan tugas asynchronous, silakan lihatAsyncTaskAPI dariAndroid SDK:http://developer.android.com/reference/android/os/AsyncTask.html . Anda juga dapat merujuk kepadaSIFTExampleActivity.java

, Line # 180 sampai # 338, untuk aktualimplementasi dalam tutorial.Untuk offload pengolahan citra kita ke server, kami menerapkan fungsi yang disebut processImage(lihatSIFTExampleActivity.java, Line # 277 sampai # 299

7/18/2019 Comunnication Client Server

http://slidepdf.com/reader/full/comunnication-client-server 8/9

)yang abstrak semua penanganan server-clientkomunikasi untuk Anda. Di bawah ini adalah potongan kode processImage:

kekosongan  processImage (String inputImageFilePath) { Berkas inputFile = new File (inputImageFilePath);try { / / <1> membuat streaming file untuk gambar inputFileInputStream FileInputStream = new FileInputStream (inputFile);/ / <2> meng-upload fotoakhir HttpURLConnection conn = uploadPhoto (FileInputStream); / / <3> mendapatkan foto diproses dari serverif  (konek! = null) { getResultImage (conn);}

fileInputStream.close ();}catch (FileNotFoundException ex) {. Log e (TAG, ex.toString ());} . catch (IOException ex) {Log e (TAG, ex.toString ()); }}

Page 7 

7Di processImage

,<2> uploadPhoto(LihatSIFTExampleActivity.java, Line # 191 - # 257) akanmembantu Anda membuat sambungan HTTP ke URL Anda dan meng-upload foto Anda. KetikaHTTPkoneksi berhasil, server akan menjawab permintaan HTTP Anda dengan data hasil.Menggunakan<3>getResultImage (conn)

(LihatSIFTExampleActivity.java, Line # 260-273),kita dapat men-downloaddan menampilkan data. Silakan lihat fungsi-fungsi ini untuk implementasi mereka. Andamungkiningin memodifikasi mereka untuk proyek Anda.

7/18/2019 Comunnication Client Server

http://slidepdf.com/reader/full/comunnication-client-server 9/9

Referensi 1. PHP - Upload File. http://www.tizag.com/phpT/fileupload.php 2. Mengirim file dari Telepon ke PHP Server.http://getablogger.blogspot.com/2008/01/android-how-to-post-file-to-php-server.html 3. VLFeat. http://www.vlfeat.org/ 

4. Android AsyncTask. http://developer.android.com/reference/android/os/AsyncTaskhtml 5. HttpURLConnection Android.http://developer.android.com/reference/java/net/HttpURLConnection.html 6. EE368 "Fitur Scale-Space"  dan "Image Matching"  slide kuliah.7. Lowe, David G. (2004) "Distinctive Gambar Fitur dari Poin penting Scale-Invariant". 

Teks asli Inggris

, line #277 to #299Sarankan terjemahan yang lebih baik