เมื่อ ADB ไม่สามารถติดต่อ AVD หรือ Mobile Device ได้

เมื่อเราใช้ Eclipse และสั่งรัน emulator (AVD) ด้วย ADT plugin จนเคยชินด้วยความสะดวกสบาย จนมาวันหนึ่งที่เราต้องการสั่งรัน AVD (Android Virtual Device) โดยไม่มี Eclipse เราจะทำอย่างไร

ก่อนอื่น ต้องรู้ก่อนว่า จะทดสอบโปรแกรมบน AVD นั้น ซึ่งใช้ Eclipse คลิกอย่างเดียว มันมีกระบวนการเบื้องหลังอยู่อย่างไรบ้าง

1. Start ADB (Android Debug Bridge) ตัวนี้ล่ะครับที่ทำให้เราสามารถเชื่อมต่อกับ emulator หรือ device จริงๆได้
2. Start AVD หรือ เสียบสาย USB ที่เชื่อมต่อกับอุปกรณ์
3. เชื่อม ADB กับ AVD หรืออุปกรณ์
4. ตอนนี้ก็สามารถติดตั้ง ทดสอบโปรแกรม หรือจัดการอะไรต่างๆมากมายบน AVD หรืออุปกรณ์ได้แล้ว

 อย่างไรก็ตาม ปัญหาที่มักจะเจอ คือ ขั้นตอนที่ 3 ไม่สามารถสามารถติดต่อ AVD หรือ Mobile Device ได้

วิธีการลองแก้ไข คือ

1. ตรวจสอบให้ชัดเจนว่า AVD หรืออุปกรณ์ได้ทำงานแล้ว (เปิดอยู่) เสียบสาย USB แน่น ลองดึงออกแล้วเปลี่ยนช่องเสียบดู
2. ตรวจสอบว่าได้เปิด USB debugging ใน developer mode แล้ว
3. เปิด command prompt และไปที่โฟลเดอร์ของ Android SDK หาโฟลเดอร์ sdk\platform-tools แล้วพิมพ์คำสั่งว่า "adb devices" ถ้าขึ้นชื่อ AVD หรืออุปกรณ์ และไม่ตามด้วยคำว่า offline แสดงว่าใช้งานได้แล้ว (ถ้าไม่ได้ใช่ eclipse ตัว adb จะไม่ได้ทำงานเองนะครับ ต้องไป start มัน ซึ่งสามารถใช้คำสั่ง adb devices ได้เลย)
4. แต่ถ้ายังมีคำว่า offline ตามท้าย ก็ยังใช้ไม่ได้ ลอง restart adb ใหม่ด้วยคำสั่ง "adb kill-server" (หรือใช้ task manager เพื่อ stop process ชื่อ adb.exe ก็ได้) ตามด้วย "adb devices" อีกครั้ง แล้วดูผล
5. บางครั้งต้องติดตั้ง driver ของอุปกรณ์/มือถือ ชิ้นนั้นก่อน ซึ่งมักจะมีมาพร้อมกับอุปกรณ์เอง (อยู่ในโฟลเดอร์หรือต้องเปลี่ยนโหมดอุปกรณ์ให้เป็นการติดตั้งซอฟต์แวร์ก่อน) หรือสามารถหาดาวน์โหลดได้ทั่วไป เช่น ดูจากที่นี่ครับ
6. หากยังไม่ได้ ลองตรวจสอบว่ามี program หรือ process ใด ที่ใช้ port 5555/5554 ทับกับ adb/AVD หรือไม่ ถ้ามีก็หยุด process นั้น แล้วลองข้อ 3 ใหม่
7. หากยังไม่ได้ ลองลบ AVD นั้น แล้วสร้างขึ้นใหม่ (บางคนไม่ลบ แค่เลือก wipe data ตอน start ก็ใช้งานได้) แล้วลองข้อ 3 ใหม่
8. หากยังไม่ได้อีก บางเว็บแนะนำให้อัพเดท Android SDK แล้วลองข้อ 3 ใหม่
9. หากยังไม่ได้อีก ลองบังคับการเชื่อมต่อผ่านไอพี โดยใช้คำสั่ง "adb connect IP:port" ดู ซึ่งมักจะเป็นกรณีพิเศษ เช่นใช้ emulator ที่ไม่ได้มากับ SDK ตัวอย่างเช่น "adb connect localhost:5555"
10. ถ้ายังไม่ได้ อาจจะต้องลองหาว่าเป็นเฉพาะ emulator ตัวนั้น หรืออุปกรณ์ตัวนั้นหรือเปล่าครับ ซึ่งอาจจะมีวิธีอื่นๆอีก ถ้าหาเจอเพิ่มเติมจะมาอัพเดทต่อไปนะครับ

Fast Android Emulator

จากการที่ได้เขียนโปรแกรมบน Android และต้องทดสอบกับ Emulator คำถามนึงที่เกือบทุกคนจะถามเหมือนกันคือ ทำไม Emulator มันถึงช้าได้ขนาดนี้ เราลองมาหาทางเลือกอื่นๆ สำหรับเพิ่มความเร็วให้ Android Emulator กันดีกว่าครับ

วิธีแรก (ง่ายสุด)
ใช้ genymotion [1] ดาวน์โหลด ติดตั้ง ใช้งานได้เลย
ข้อดี

• ใช้งานง่าย
• มีแบบฟรีและแบบเสียค่าใช้จ่าย
• สามารถจำลอง sensor แบบต่างๆได้ เช่น GPS / Screen Rotation / Battery / Gyroscope ฯลฯ
• มี plugin ให้กับ eclipse และ android studio สามารถเรียก emulator ได้จากใน IDE และรันโปรแกรมได้โดยตรง

ข้อจำกัดเล็กน้อย

• ต้องสมัครเป็นสมาชิก (ฟรี)
• ต้องดาวน์โหลดและติดตั้ง emulator ใหม่ ถ้าต้องการใช้งานในเครื่องอื่นๆเพิ่มเติม

วิธีที่สอง

ติดตั้ง ORACLE VirtualBox และ AndroVM ซึ่งจะมีขั้นตอนพอสมควรดังนี้

1. ดาวน์โหลดและติดตั้ง VirtualBox [2] ซึ่งถ้าต้องการใช้แบบ portable สามารถดาวน์โหลดตัวช่วยคือ Portable VirtualBox [3]

หมายเหตุ ตัว genymotion ก็ต้องใช้ VirtualBox เหมือนกัน แต่มันมีเวอร์ชัน bundle คือผนวกมาให้กับตอนดาวน์โหลดเลย

2. ดาวน์โหลด AndroVM [4] (ซึ่งความจริงก็คือต้นตำรับของ genymotion นั่นแหละ) จะได้ไฟล์ .ova มา ซึ่งแน่นอนว่าจะไม่ได้อัพเดทแล้ว

หมายเหตุ ตอนดาวน์โหลด ถ้ามี t หมายถึง tablet ส่วน p หมายถึง phone ครับ หาก

ใครจะใช้ไฟล์ ova ของ genymotion ก็ได้ ไปหากันเอาเองนะครับ

3. รัน VirtualBox จะได้หน้าตาแบบนี้ครับ

4. เลือกเมนู File/Import Appliance แล้วเลือกไฟล์ ova ที่ดาวน์โหลดมาจาก AndroVM คลิก Next และ Import

5. จะเกิด VM ใหม่ในแถบด้านซ้ายมือดังรูป

ตอนนี้ถ้าลองคลิก Start ก็จะสามารถเห็น Emulator แล้วครับ

อย่างไรก็ตาม Emulator ที่มีตอนนี้ จะยังไม่สามารถใช้งานกับ adb ได้ครับ เพราะมันไม่รู้จักกัน เราต้องเชื่อม emulator กับ adb เข้าด้วยกันก่อน เพื่อให้รันหรือติดตั้งโปรแกรมได้

6. กลับไปที่หน้า VirtualBox จากนั้นให้คลิกที่ปุ่ม Settings แล้วเลือกเมนู Network

ในหัวข้อ Attached to: ถ้าเลือกแบบ Bridged Adapter แล้วมีรายการชื่อ network card โผล่มาให้ ก็ให้เลือกแบบนี้

ถ้าไม่มีรายชื่อ network card โผล่มา ก็ต้องใช้รูปแบบอื่น เช่นในที่นี้จะใช้ NAT

จากนั้นเลือกปุ่ม Port Forwarding แล้วคลิกปุ่มสีเขียวขวามือ เพื่อสร้าง rule ใหม่ และกรอกข้อมูลตามนี้

7. จากนั้นให้ Start Emulator
8. ไปโฟลเดอร์ที่มี adb อยู่ ถ้าใครดาวน์โหลด adt bundle [5] มา ก็จะอยู่ในโฟลเดอร์ \adt-bundle\sdk\platform-tools
9. เปิดหน้าต่าง command line แล้วพิมพ์ว่า adb connect localhost

สังเกตว่าถ้าสำเร็จ จะเกิดคำว่า connected to localhost:5555

10. สามารถรันหรือติดตั้งโปรแกรม android ได้แล้วครับ

11. ถ้าจะติดตั้งไฟล์ apk เพื่อทดสอบ จะให้ง่าย ให้ย้ายไฟล์ apk ไปไว้ในโฟลเดอร์เดียวกับ adb แล้วใช้คำสั่ง
adb install xxx.apk

เมื่อติดตั้งสำเร็จ ก็จะเกิด icon ของโปรแกรมในกลุ่มของ application ให้ทดสอบได้ครับ

12. ถ้าจะรันผ่าน eclipse หรือ android studio ก็ทำได้เช่นกัน เพราะมันจะเห็น emulator ที่เราใช้งานโดยอัตโนมัติ

หมายเหตุ

• ขั้นตอนการเชื่อมต่อระหว่าง adb กับ emulator ต้องทำเองทุกครั้งเมื่อเริ่ม emulator ใหม่

ข้อมูลอ้างอิง
[1] http://www.genymotion.com/
[2] https://www.virtualbox.org/
[3] http://www.vbox.me/
[4] http://androvm.org/blog/download/
[5] http://developer.android.com/sdk/index.html
[6] http://therockncoder.blogspot.com/2013/06/using-virtualbox-android-emulator.html
[7] http://stackoverflow.com/questions/6751911/android-emulation-on-virtual-box-in-eclipse

Phonegap + jQuery Mobile + Android

ช่วงนี้ Mobile Application กำลังมาแรง เค้าว่ากันว่าจะสร้าง app พวกนี้ น่าจะทำได้ประมาณ 3 แบบคือ
1. Native app เขียนโค้ดโดยตรงสำหรับ Android iOS WP8 ไปเลย
2. Web app เขียนเป็นเว็บโดยใช้ HTML+CSS+JavaScript ไง เร็วดี
3. Hybrid app เขียนเแบบ 2 แต่ wrap ให้เป็นแบบ 1 โดยใช้เครื่องมือช่วยเช่น Phonegap

ข้อดีข้อเสียก็ว่ากันไป แต่บทความนี้เราจะลองพูดถึงแบบที่ 3 ดูครับ โดยเน้นไปที่ Android อย่างไรก็ตาม วิธีนี้ถ้าใช้ phonegap อย่าลืมไปเช็ค Platform Support ก่อนที่ http://docs.phonegap.com/en/edge/guide_support_index.md.html#Platform%20Support ว่ามันทำได้อย่างที่เราต้องการหรือเปล่า

สิ่งที่เราต้องการในบทความนี้
1. phonegap (http://phonegap.com/install/) ผมลองเวอร์ชัน 3 แล้วงงพอควร แนะนำให้ใช้ 2.9.0 ซึ่งดาวน์โหลดได้โดยตรงที่ https://github.com/phonegap/phonegap/archive/2.9.0.zip
2. jquery Mobile เอามาเขียนเว็บให้ดูหน้าตาเข้าที ให้ touch ได้ swipe ได้นะ (http://jquerymobile.com/)
3. Genymotion ตัวนี้จะใช้หรือไม่ใช่ก็ได้ เอาไว้เป็น android emulator เพราะตัวที่มากับ ADT Bundle นั้นช้าที่สุดในจักรวาลลลลล ตัวนี้เร็วกว่าแบบเทียบกันไม่ได้ เหมาะกับโปรแกรมเมอร์ที่จะทดสอบโค้ดบน android emulator (http://genymotion.com/)
4. ADT Bundle สำหรับเขียนโค้ด build และรัน app (http://developer.android.com/sdk/installing/bundle.html)
5. ถ้าอยากลอง ตัวนี้จะใช้หรือไม่ก็ได้ Netbeans 7.4 Beta (http://download.netbeans.org/netbeans/7.4/beta/) ย้ำว่าควรเป็นตัวนี้เท่านั้น ตัวเต็มเวอร์ชัน 7.4 ดันเป็นตัวที่ใช้กับ phonegap ยากซะงั้น เลือกโหลดที่เป็น php เวอร์ชันก็พอครับ

วิธีการใช้งาน (เลือกเอาครับว่าจะใช้แบบไหน)
แบบที่ 1 ใช้ Netbeans
กลายเป็นว่า Netbeans เป็น IDE ที่สนับสนุนการใช้ phonegap เต็มที่ สำเร็จรูปมากกกก แต่ดันทำไม่สุด เวอร์ชัน Beta สามารถกำหนดว่า phonegap อยู่ที่ไดเรกทอรีไหน แต่เวอร์ชันจริงมันกลับไปเช็ค path การติดตั้ง phonegap ซึ่งผมไม่ต้องการ ผมอยากได้ IDE ที่มันเป็น portable ก๊อบใส่ USB drive ได้ง่ายๆ เลยถอยมาใช้ตัว Beta ดู
ปล. แนะนำให้โหลด Netbeans php ตัว zip มาใช้แบบไม่ต้องติดตั้ง
ปล.2 เว็บดาวน์โหลด Netbeans มันประหลาดมาก โหลดแล้วหลุดตลอดจนเซ็ง

หลังจากดาวน์โหลด แตกไฟล์ต่างๆเรียบร้อยแล้วก็เปิด Netbeans เลยครับ
-เลือกเมนู Tools/Options แล้วกำหนดไดเรกทอรีต่างๆ เช่น

-สร้าง New Project มันจะมีให้เลือก Phonegap Application หรือ Cordova Application ให้เลย พร้อมทั้งสำเนาไฟล์ต่างๆมาหมด สุดยอดดดด
-ลองรันรูปแบบต่างๆได้โดย

-สามารถ Build เป็น Native app ผ่าน phonegap แบบง่ายๆ โดยคลิกขวาที่ Project แล้วเลือก Build ก็จะได้ไฟล์ apk ที่เป็น debug เวอร์ชันในไดเรกทอรีชื่อ platforms/android/bin

เห็นไหมครับ ง่ายกว่านี้ไม่มีแล้ว แต่ๆๆๆๆ มันไม่สามารถเลือก emulator ตัวอื่น เช่นจาก genymotion ได้ครับ ต้อง build ออกมาก่อนเป็นไฟล์ apk แล้วใช้ adb ติดตั้งไปบน emulator ด้วยคำสั่งเช่น adb install -r xxx.apk ครับ รวมถึงมีข้อจำกัดอีกอย่างคือไฟล์ apk จะเป็น debug เวอร์ชันเท่านั้น ถ้าจะทำเป็น release หรือ sign เวอร์ชันก็จะมีขั้นตอนอีก

แบบที่ 2 ผ่าน Eclipse
อ้างอิงจากที่นี่เลยครับ http://www.adobe.com/devnet/html5/articles/getting-started-with-phonegap-in-eclipse-for-android.html
ทำตามเค้าเป๊ะ ขั้นตอนเยอะพอสมควร จนถึงขั้นตอนการกำหนด user permission หลังจากนั้นก็ไม่จำเป็นแล้วมั้ง
อย่าลืมก๊อบไดเรกทอรีของ jquery mobile ไปให้ครบด้วย
ตอนกำหนดสิทธิ์ในไฟล์ AndroidManifest.xml ถ้าไม่ได้ใช้อะไร ก็กำหนดแค่
uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"
ตัวเดียวก่อน ส่วนจะต้องกำหนด permission อะไรบ้าง ขึ้นอยู่กับ module ที่ใช้ ซึ่งสามารถอ้างอิงได้จากคู่มือ http://docs.phonegap.com/en/2.9.0/index.html ในส่วนของ API reference ครับ

มีหลายอย่างที่ยังงงๆอยู่ครับ จะลองไปเล่นดูเพิ่มเติม หากมีวิธีที่ง่ายขึ้นจะมาอัพเดทอีกทีครับ

JavaScript Gauge

วันนี้ลองหาโค้ด JavaScript Gauge เจอสองเว็บที่น่าสนใจครับ
http://justgage.com/

แสดงผลเป็นเวกเตอร์ทำให้รูปชัดเจนแม้ย่อหรือขยาย ดูแล้วเข้าใจง่าย แต่ยังมีข้อจำกัดหลายอย่างที่กำลังพัฒนาอยู่ เวอร์ชันที่เป็น demo อยู่มีฟังก์ชันที่น่าสนใจมาก http://justgage.com/demos/

ตัวอย่างโค้ดโดยใช้เวอร์ชันที่กำลังพัฒนาอยู่ครับ ดาวน์โหลดได้ที่ http://justgage.com/justgage.js

<!doctype html>
<html>
<head>
 <title>Auto-adjust</title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
 <script src="raphael.2.1.0.min.js"></script>
 <script src="justgage.js"></script>
 <script>   
   window.onload = function(){
  var g1 = new JustGage({
    id: "g1", 
    value: 150, 
    min: 0,
    max: 200,
    title: "PPM10",
    label: "ug/m3",
    customSectors: [{
     color : "#00ff00",
     lo : 0,
     hi : 120
   }, {
     color : "#ff0000",
     lo : 121,
     hi : 300
    }]
  });
   };
 </script>
</head>

<body>
 <div id="g1" style="width:200px; height:160px; display:inline-block;"></div>
</body>
</html>

และอีกตัวหนึ่งครับ
https://github.com/Mikhus/canv-gauge

ตัวนี้สามารถกำหนดค่าได้ค่อนข้างมาก และสามารถระบุค่าเป็นแบบ tag ของ html หรือเขียนเป็นโค้ดของ JavaScript ก็ได้

ตัวอย่างโค้ดแบบ html

<!doctype html>
<html>
<head>
 <title>Canv-gauge</title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
 <script src="gauge.min.js"></script>
</head>

<body>
 <canvas width="200" height="200"
  data-type="canv-gauge"
  data-title="PPM10"
  data-value="100"
  data-units="ug/m3"
  data-max-value="300"
  data-major-ticks="0 100 200 300"
  data-highlights="0 120 #0f0, 120 300 #f00"
 ></canvas>
</body>
</html>

ลองเลือกใช้กันดูครับ

Histogram

เราลองมาคำนวณ Histogram ของรูปกันครับ

import cv2
import numpy as np

img = cv2.imread("lena.jpg")
gray = cv2.cvtColor(img,cv2.COLOR_BGR2GRAY)

#compute histogram
#create zero array for histogram, 255 bins
hist = np.zeros(256)
#for each pixel
for p in gray.flat:
    hist[p]+=1

#normalize histogram to display in 256x256 image
hist = hist/hist.max()*255
hist = np.uint8(hist)

#create a new image for displaying histogram
#note that the image origin is at top-left corner
out = np.zeros((256,256,3),dtype=np.uint8)
for r in range(256):
    cv2.line(out,(r,255),(r,255-hist[r]),(0,0,255))

cv2.imshow("Original",gray)
cv2.imshow("Histogram",out)
cv2.waitKey()
cv2.destroyAllWindows()