iMacbaszii's Blog

Blog นี้จะมานำเสนอเทคนิคเล็กๆ น้อยๆ สำหรับคนที่ใช้ Terminal กัน ปกติเวลา Resize รูปทำยังไงครับ ใครมี Designer จัดการให้ก็สบายไป ใครไม่อยากเห็น Designer เหนื่อย ต้องการทำเอง ก็ตามมาเลย จากการอ่านครั้งนี้ จะเอาไปประยุกต์กับการใช้คำสั่ง Bash อะไรก็ได้นะครับ เป้าหมายของวันนี้คือผมจะสร้าง Command Line Application ที่จะย่อรูปจากขนาดใหญ่กว่าให้เลือกขนาด 96x96, 64x64, 32x32 เพื่อใช้กับ Tabbar บน iOS และตอนเรียกโปรแกรมนี้ขึ้นมาทำงานจะเรียกด้วยคำสั่งนี้ โดยโปรแกรมที่ใช้ในการจัดการรูปภาพคือ ImageMagick $ tabIconGenerator image.png newName เริ่มต้นด้วยการสร้างไฟล์ที่ไม่มี Extension ก่อน ผมสร้างด้วย vim นะ ใครใช้อะไรก็ตามสบายเลย $ vim tabIconGenerator จากนั้นก็เขียนคำสั่งที่ต้องการลงไป โดยเขียนหัวไฟล์ว่า #!/bin/bash เพื่อบอกว่าเราจะสั่งให้ Bash เป็นคนรันคำสั่งพวกนี้นะ #!/bin/bash convert $1 -resize 96x96 $2@3x.png convert $1 -resize 64x64 $2@2x.png convert $1 -resize 32x32 $2.png $1 และ $2 คือ Command Line Arguments ซึ่ง $0 จะเป็นคำสั่ง จากนั้นก็ Save ออกมา โดยปกติแล้วไฟล์ท...

บน iOS 7 นั้น Apple ได้เสนอแนวคิดการออกแบบที่เรียกว่า Depth (ความลึก) ซึ่งสิ่งที่ได้ชัดคือ การทำให้ View ที่อยู่ด้านหลังเบลอมาเป็น Background เราจะเห็นแทบทุกๆ ที่บน iOS 7 เลย ตัวอย่างที่ชัดมากๆ ก็คือ Notification Center และ Control Center นี่แหละ และก็ต้องพูดคำนี้อีกละ "ทำไมไม่ทำให้มันง่ายๆ ตั้งแต่ iOS 7 ฟระ" บน iOS 7 นั้นเป็น Private API และไม่เปิดให้นักพัฒนาใช้กันอย่างแพร่หลายเนื่องจากกังวลเรื่องการใช้เยอะเกินไป ทำให้เกิดปัญหาด้านประสิทธิภาพ เนื่องจากการทำ Blur นั้น เราต้องทำแบบ Real Time กับภาพ Background ปัจจุบัน ซึ่งก็มีหลายคนเขียน Blur Algorithm ขึ้นมาใช้งานเอง และก็มี Library ที่ Apple แจกให้กับนักพัฒนาด้วย แต่บน iOS 8 นั้น Apple ได้ทำการใส่ Official API สำหรับการทำ Blur Effect มาให้ด้วย (แน่นอนว่าใช้ร่วมกับ iOS 7 ไม่ได้) ว่ากันเรื่องเบลอ... วิธีการทาง Image Processing ในการทำภาพให้เบลอ มีหลากหลายวิธี ถ้าใครเคยเรียนมา และวิธีที่เป็นที่นิยม และใช้กันอย่างแพร่หลายนั่นคือ Gaussian วิธีการก็คือ "ในแต่ละ Pixel ของภาพ เราจะนำ Pixel รอบข้างมาหาค่าเฉลี่ยแล้วเ...

วันนี้ก็เป็น Blog ที่ไม่ยากอีกเช่นเคย และจะได้ใช้บ่อยๆ นั่นคือการเลือกรูป ซึ่ง UI ที่เหมาะสม และผมใช้บ่อยๆ ก็คือสร้าง UIImageView หนึ่งตัว ที่สามารถ Tap ได้ จากนั้นก็ให้เลือกว่าจะถ่ายรูป หรือเลือก Photo Library Code ส่วน Interface ก็ประกาศ UIImageView ไว้แล้วก็ประกาศ Protocol ที่ต้องใช้ มาส่วนของ Implementation กันบ้าง ... เพื่อให้ Code มัน Readability ขึ้นเราจะ Define ค่าคงที่ไว้แทนการใช้ Magic Number ใน - viewDidLoad ; ก็เขียนเรียก method ตัวนึงที่จะทำการเซตค่าต่างๆ เนื้อหาของ - setupImageView ; ก็เพียงแค่เซคค่าให้รับการกระทำจากผู้ใช้และใส่ gesture  และเมื่อ Tap ที่ตัว ImageView แล้วก็ให้ผู้ใช้เลือก Source Type ซึ่งพระรองของงานนี้คือ UIActionSheet จากนั้นพระเอกของเราก็ออกโรง (ซะที) นั่นคือ UIImagePickerController นั่นเอง โดย Delegate ก็จะมี 2 method ที่ต้อง Implement นั่นคือจังหวะที่ User กด cancel และเลือกรูปภาพหรือถ่ายรูปเรียบร้อย เท่านี้แหละครับ ในที่นี้ผมแค่ให้ภาพที่เลือกถูกแสดงบน UIImageView ที่ได้เตรียมไว้

อย่างที่บอกไปเมื่อ Entry ที่แล้วนะครับ ใครเปิดอันนีี้มาอันแรกเนี่ย ให้อ่าน Entry นี้ก่อน " [iOS Dev] Working with UITapGestureRecognizer " เพราะผมจะบอกว่า ผมทำอะไรบ้าง ในเบื้องต้นเนื่องจากทุกตอนใช้ Project เดียวกันหมดครับ ตอนที่เกี่ยวข้องจะเป็นตอนของ UIGestureRecognizer ทั้งหมดครับ [iOS Dev] Working with UITapGestureRecognizer http://www.macbaszii.com/2012/06/ios-dev-working-with.html [iOS Dev] Moving Object with UIPanGestureRecognizer http://www.macbaszii.com/2012/06/ios-dev-moving-object-with.html [iOS Dev] Rotation Image with UIRotationGestureRecognizer http://www.macbaszii.com/2012/06/ios-dev-rotation-image-with.html มาเริ่มกันเลยครับ นี่คือ Instance Variable ที่จะใช้ในการทำงานครั้งนี้ครับ สร้าง Function init ข้อมูลต่างๆ เกี่ยวกับ ImageView ที่นำมาใช้ อย่าลืมเรียกใช้ผ่าน viewDidLoad ล่ะ จากนั้นก็ Add Gesture ซึ่งในการ Zoom เราจะใช้ UIPinchGestureRecognizer นะครับ การ Pinch คือ การ "ถ่าง" แบบที่พี่โน้ส อุดม บอกแหละครับ :) จากนั้น...

ปกติแล้ว เวลาเราใช้ UIImageView เนี่ย ตามปกติแล้วรูปทรงเราจะได้ "สี่เหลี่ยม" ใช่ไหมครับ ? คราวนี้ ถ้าสมมติ Design เรามาเป็นภาพวงกลมล่ะ ? (เป็นไฟล์ .png ที่ BG เป็น Transparent) ภาพที่เราจะใช้คือ ภาพนี้ครับ  แน่นอนว่า จับภาพใส่เลยเนี่ย จะมีขอบมุมทั้ง 4 ออกมาแน่ๆ Trick ง่ายๆ ครั้งนี้เราจะใช้ Framework บางอย่างเข้ามาช่วย  "เล็มขอบมุมทั้ง 4 ออกตามที่ต้องการ"  ลองมาทำตามปกติกันก่อน ว่าเราจะได้ผลลัพธ์เป็นแบบไหน ...  Framework ที่เราจะใช้คือ QuartzCore Framework จากนั้นก็ import เข้ามา ใช้ทั้งหมด 2 method ... ค่า Corner Radius อันนี้ผมคำนวณไม่เป็นครับ ใช้วิธีการทดสอบไปเรื่อยๆ เมื่อเรียบร้อยแล้ว ก็จะได้แบบนี้ครับ สวยงาม ~ ** ใช้วิธีได้กับ Object ทุกชนิดที่เป็น UIView Subclass 

เรามารู้จักเรื่องของสีกันนิดนึงนะครับ สีมีอยู่ 3 ประเภท แต่วันนี้ผมจะกล่าวถึงแค่ 2 ประเภท คือ RGB (Red, Green, Blue) และ CMYK (Cyan, Magenta, Yellow, Key) และอีกประเภทที่ผมว่าคือ HSL หรืออีกชื่อ HSB (Hue, Saturation, Brightness or Luminance) เดี๋ยวได้เรียนแล้ว อาจจะมาเขียนเพิ่ม ตอนนี้ยังไม่มีข้อมูล แต่หาได้เท่านี้ มาเริ่มที่ RGB กันก่อน RGB เป็นสีที่ใช้ใน Computer Monitor และ TV ทั่วไป โดยใช้หลักการเปล่งแสงของหลอดไฟ 3 ดวง เมื่อสีผสมกันจะทำให้เกิดสีที่มนุษย์สามารถของเห็นได้ทั้งหมด 6 สี (ในสีรุ้งมีสีนึงที่มนุษย์ไม่สามารถมองเห็นได้) ส่วนค่าของสี RGB นั้นจะ Represent ได้ 2 รูปแบบคือ เลขฐานสิบ จะเขียนในรูป (R,G,B) โดยที่ R,G,B มีค่า 0 - 255 ตามความเข้มของสี เลขฐานสิบหก จะเขียนในรูป  RRGGBB โดย RR,GG,BB จะมีค่าตั้งแต่ 00 - FF                                  ** แต่ถ้ามีการซ้ำกันเช่น 00FFCC อาจจะย่อเหลือแค่ 0FC ก็สามารถทำได้ และในทางกลับกัน ดังภาพ RGB vs CMYK ด้านบน เราจะเห็นว...

เมื่อ Blog ที่แล้วผมพูดถึงการลงใน Python 3.x นะครับ ซึ่งผมก็หมดหนทาง เพราะเกิดปัญหาขึ้นบน Mac แต่ผมไม่ได้ทดสอบฝั่ง Windows นะครับว่าใช้ได้หรือปล่าว ? ก็เลยถอดใจและมาเขียนบน Python 2.7 นี่ก็พึ่ง Install เสร็จสดๆ ร้อนๆ เลย (1.47 AM) วิธีการก็ไม่มีอะไรมากนะครับ เครื่องคุณควรจะมี Python 2.x ผมแนะนำเป็น 2.7 ครับ (จริงๆ ต้องขอบคุณ @nuboat ครับ เขาแนะนำผมมาอีกที) สำหรับ Windows ก็หาโหลดมาลงนะครับ (ไม่ใช่ ล่าสุดนะครับ ล่าสุดคือ 3.2) ส่วน Mac เนี่ย ถ้าลง Xcode Developer Tools แล้วจะมี Python 2.7 ติดมาให้เลยครับ ถ้าไม่ชัวร์ลองเปิด Terminal แล้วทำแบบนี้ดูครับ .. เลื่อนลงมาด้านล่างนิดนึง ก็จะเห็น Version ของ Python แล้วก็แถมเห็นเวอร์ชั่นของ GCC Compiler ด้วย จากนั้นไปที่นี่ครับ Python Imaging Library (PIL) http://www.pythonware.com/products/pil/ ก็ให้ทำการ Download เวอร์ชั่นล่าสุดมาเลยครับ (ณ ปัจจุบัน 1.1.7) ฝั่ง Windows ทำการโหลด .exe มาติดตั้งได้เลย แล้วใช้ได้เลยนะครับ ... ส่วนฝั่ง Mac ให้โหลดตัวที่เป็น Source Kit มาครับ พอโหลดมาแล้ว ก็จัดการแตกไฟล์ซะ แล้ว...

ปกติถ้าเราใช้ UIImagePickerController เราจะสามารถเลือกรูปได้แค่ทีละรูปเท่านั้น http://www.mediafire.com/?rdvtn5kbd9wpdbk โหลดมันมาซะ มันคือ ELCImagePickerController พอโหลดเสร็จแล้วก็เปิด Example Project ด้านใน ขึ้นมา... จากนั้นก็ Copy Folder นี้ไปใส่ใน Project ของเราซะ... และเนื่องจากการใช้ Library ตัวนี้มีการใช้ AssetsLibrary ก็อย่าลืม Add Framework เพิ่มด้วย จากนั้นมาที่ Controller จัดการ #import ELCImagePickerController เข้ามาใช้ และใส่ Delegate Protocol ด้วย จากนั้นก็ Implement Function ตามนี้เพื่อเรียก ELCImagePickerController ขึ้นมา จากนั้นก็ Implement Delegate Function โดยที่ Method - ( void )elcImagePickerController:( ELCImagePickerController *)picker         didFinishPickingMediaWithInfo:( NSArray *)info; จะถูกเรียกใช้หลังจากที่เรากด Done ตอนเลือกรูปแล้ว เราจะได้ Array of Dictionary ของรูปแต่ละรูปมา ... โดยถ้าเราต้องการรูปเนี่ย ต้องใช้ key -> UIImagePickerControllerOriginalImage ส่วนจะเอาไปทำอะไร ก็แล้ว...

ผมขอเรียกมันว่ากรอบรูปแล้วกันครับ... โค้ดในส่วนของ Interface ก็ประมาณนี้ ผลลัพธ์ที่ได้... อ่านจาก Property นะครับ เราก็จะได้พื้นเป็น Ralative Layout ซึ่งมีกรอบรูป (ImageView) ขนาดเท่ารูปของเรา (wrap_content) วางอยู่ตรงกลาง Relative Layout ของเรา.... ซึ่งในที่นี้ เราไม่สามารถที่จะใส่รูปเข้าไปได้เลย (หรืออาจจะได้ แต่ผมยังไม่รู้วิธี) ตัวบาสเอง ใส่วิธีใส่จาก Resource ใน Java  ที่จะกล่าวต่อไปนะครับ... Photos มาว่ากันเรื่องของรูปกันก่อนดีกว่า...   - รูปที่ใช้ "ควรจะ" มีนามสกุลไฟล์คือ .jpg , .png   - ชื่อของไฟล์ภาพที่ใช้ต้องเป็นตัวอักษร "ตัวเล็ก" ทั้งหมด   - ควรจะเตรียมรูปขนาดพอดีกับงานที่ต้องใช้ **ImageView สามารถที่จะ resize รูปให้เราได้ก็จริง ถ้าเรากำหนด     layout_height และ layout_width ในรูปของ yypx แต่แน่นอน ถ้าเราเปลี่ยนขนาดจอล่ะ ?? งานเข้า Import Your Photos to App's Storage ใน Project ของคุณนะครับ ในที่นี้ของบาสคือ ImageViewTest   - คลิกขวาที่ Folder --> res   - เลือก New --> Folder ...