วิธีใช้ Apple Command Key ใน Remote Desktop

Standard

    สำหรับ Mac User คงจะชินกับคีย์ลัดต่างๆ  ของ OS X ซึ่งจะใช้ปุ่ม Command เป็นหลัก  เช่นการ Copy , Paste  ก็จะใช้ปุ่ม command+c , command+v  แต่พอต้องสลับไปใช้ Windows ก็จะต้องเปลี่ยนไปใช้ปุ่ม  Control แทน  ทำให้ไม่ได้สะดวก  ซึ่งผมก็เจอปัญหานี้เหมือนกัน  ปกติจะใช้ Macbook เป็นเครื่องหลักและ Remote ไปเขียนโปรแกรมเครื่องที่เป็น Windows เพราะต้องเขียน .NET   วันนี้ก็เลยมาแนะนำ App ตัวนึงที่ทำให้เราใช้คีย์ลัดต่าง ๆ ได้เหมือนกับ OS X เลย  App นี้ก็คือ Karabiner นั่นเอง

[NODEMCU] - ทดสอบควบคุมหุ่นยนต์ผ่าน UDP แบบง่าย ๆ โดยใช้ C# และ NODEMCU

Standard

หลังจากมี #Arduino IDE ที่ใช้เขียนโค้ดสำหรับ #ESP8266 ได้ ก็ไม่รู้จะเขียนอะไรเล่นดี เมื่อคืนเลยลองเขียนโค้ดง่าย ๆ ทดลองส่ง UDP ไปควบคุม GPIO บน #NodeMCU ครับ (ส่งข้อมูลขนาด 1 byte)
Posted by AppStack on 27 เมษายน 2015


   ช่วงนี้กระแส IoT กำลังบูมมาก ๆ  ทำให้หลายคนที่ทำงานด้าน Embedded หันมาเล่นด้านนี้กันมากขึ้น   ในช่วงที่ผ่านมามี Chip ที่ชื่อว่า ESP8266 ผลิตโดย Espressif  ซึ่งรองรับการใช้งาน Wifi ในโหมด AP และ Station    สามารถส่งข้อมูลได้ทั้งแบบ UDP และ TCP  ที่สำคัญราคาถูกมาก ๆ (ตัวละร้อยกว่าบาท) ทำให้ Chip ตัวนี้มีตัวอย่างการประยุกต์ใช้งานให้ศึกษาหลายที่เลย

     ในโพสนี้เราจะลองเขียนโค้ดควบคุมหุ่นยนต์แบบง่าย ๆ ผ่าน UDP  ซึ่ง Command ที่เราจะส่งนั้นมีแค่

  • เดินหน้า
  • ถอยหลัง
  • เลี้ยวซ้าย
  • เลี้ยวขวา
ทำให้การส่งข้อมูลเราจะใช้แค่ 1 Byte สำหรับการส่ง Command  ส่วนการเขียนโค้ดเราจะใช้ Arduino IDE for ESP8266  เพราะมี toolchain ของ ESP8266 มาให้เลย  ซึ่งเราจะเขียนแบบ C++ หรือ C ก็ได้เหมือนกันครับ   ข้อดีอีกอย่างคือเราสามารถ port library ของ Arduino มาใช้งานได้ไม่ยาก

 
ในส่วนวงจรขับมอเตอร์  เราจะใช้โมดูล L298   และการเขียนโปรแกรมก็ทำการรับ UDP มา 1 Byte แล้วส่งให้ Class AppStackRobot จัดการต่อ   ภายใน Class ก็จะมีหน้าที่เช็คว่าค่าที่รับเข้ามาคืออะไร  ตรงกับ Protocol ที่ตั้งไว้หรือไม่  ถ้าตรงก็ไปสั่ง GPIO ให้ Module L298 ทำงานแค่นี้เองครับ

ในส่วนโปรแกรมที่พัฒนาด้วย C# ก็จะมีปุ่มสำหรับส่ง Command เมื่อมีการกดปุ่มโปรแกรมก็สร้าง UDP packet ส่ง command ไปควบคุมหุ่นยนต์

Source code ตัวอย่างดูจากคอมเม้นใน Clip ได้เลยครับ




แชร์ประสบการณ์ไปร่วมงาน Sketch Meetup #1

Standard
   
      หลังจากที่ไปร่วมงาน Sketch Meetup #1 มาพบว่าได้อะไรมากกว่าที่คิดไว้มาก  ด้วยความที่ผมไม่เคยทำงานด้าน Design มาก่อนเลย  เพราะปกติอยู่สาย Programmer เขียน .NET และ ไมโครคอนโทรเลอร์เป็นส่วนใหญ่   เคยใช้โปรแกรม Photoshop มาบ้าง แต่ก็ใช้แต่งรูปมากกว่า  คิดว่าถ้าไปงานนี้แล้วได้เรียนรู้เรื่องการใช้งานทั่วไปกับ Export ก็พอใจแล้ว  แต่เอาเข้าจริง ๆ ได้เรียนรู้เกี่ยวกับ Workflow , plugin  และ ข้อดี-ข้อเสีย จากคนที่ทำงานจริง ๆ   ทำให้คนที่ไม่เคยใช้งานโปรแกรมเลยอย่างผมเห็นภาพและเข้าใจการทำงานมากขึ้นครับ     สำหรับ Blog นี้ก็จะขอเขียนสรุปสิ่งที่ได้รับมาจากงานนะครับ  อาจจะไม่ค่อยครบ หรือผิดพลาดตรงไหนรบกวนบอกด้วยนะครับ  เพราะบางช่วงก็ตามไม่ค่อยทันจริง ๆ

 

1. แนะนำโปรแกรม Sketch และข้อดีข้อเสียต่าง ๆ

     Sketch เป็นโปรแกรมที่ใช้ทำงานด้านการออกแบบ  ซึ่งทำงานบนระบบปฏิบัติการ OSX  สามารถใช้ออกแบบ UI ต่าง ๆ เช่น Mobile App หรือ Web  งานที่ออกแบบจะเป็นแบบ Vector คล้ายกับ AI ทำให้ไม่มีปัญหากับการย่อหรือขยาย   แต่ที่สำคัญคือ  โปรแกรมใช้งานง่าย ,  มี Workflow ที่ทำให้งานเสร็จเร็ว  ,  มี Plugin และ  Resource ให้หลายอย่าง   ทำให้โปรแกรมนี้ได้รับความนิยมเพิ่มขึ้นเรื่อย  ๆ

    หลังจากฟังในงานก็มีหลายหัวข้อเกี่ยวกับ Sketch ที่น่าสนใจผมขอแยกตามนี้นะครับ

File , Page , ArtBoard คืออะไร ? 

     ตอนแรกฟังดูก็ยังงง ๆ ว่า Page และ Art Board คืออะไร    ในไฟล์ของ Sketch  1 ไฟล์จะมีได้หลาย Page  และใน 1 Page จะมีได้หลาย Art Board     เช่น  การออกแบบเว็บจะมีหลาย ๆ หน้า  และแต่ละหน้าก็ต้องมีการออกแบบสำหรับหน้าจอแต่ละขนาด  ดังนั้นเวลาออกแบบในโปรแกรม Sketch ก็จะมีหลาย ๆ Page สำหรับออกเว็บแต่ละหน้า  และในแต่ละ Page ก็จะมีหลาย ๆ Art Board สำหรับออกแบบหน้าจอแต่ละขนาดครับ นอกจากนี้ Sketch ยังมีขนาดหน้าจอของอุปกรณ์ต่างๆ  เตรียมไว้ให้ด้วย   ซึ่งการเก็บงานแบบ Page และ Art Baord ทำให้เราสามารถเก็บงานทั้งหมดไว้ใน 1 ไฟล์ได้ ตรงนี้ทำให้ได้เปรียบ Photoshop   แต่ถ้าไฟล์ใหญ่เกินไปก็จะทำให้โปรแกรมทำงานช้าลงได้

Size และการ Export

     ในการออกแบบหน้าจอที่ขนาดต่างกัน ต้องมีการออกแบบส่วนประกอบต่าง ๆ ให้มีหลายขนาดด้วย  เช่น การออกแบบปุ่มกดบนมือถือหลายแบบ  จะต้องมีขนาด 2x , 3x เพื่อรองรับขนาดหน้าจอต่าง ๆ  ซึ่ง Sketch ได้ออกแบบให้โปรแกรมสามารถ Export  ให้ปุ่มกดมีขนาดต่าง ๆ ตามที่เรากำหนดได้เลย  และ สามารถ Export เป็น SVG ได้ด้วย

Symbol

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

เมื่อต้องการเปลี่ยนจาก Photoshop มาใช้ Sketch อย่างเดียว

     ก่อนอื่นต้องบอกก่อนว่าสองโปรแกรมนี้มีความสามารถเด่นกันคนละด้าน  โดย Photoshop สามารถทำงานเกี่ยวกับ Bitmap  ได้ดี  ส่วน Sketch ก็มี Workflow ที่ดีกว่า  ดังนั้นเมื่อเปลื่ยนมาใช้ Sketch อย่างเดียวย่อมทำให้เกิดทั้งข้อดีและข้อเสียตามมา   แต่สุดท้ายก็มีความเห็นว่า  ยังไงก็ต้องใช้หลาย ๆ โปรแกรมร่วมกันในการออกแบบอยู่ดี

Sketch กับการออกแบบสิ่งพิมพ์

     ในเมื่อ Sketch ใช้งานง่ายแบบนี้จึงไม่แปลกที่จะมีคนถามว่า  สามารถเอาไปใช้งานกับสิ่งพิมพ์ได้หรือเปล่า  ซึ่งได้รับคำตอบว่า "ไม่ควรทำครับ"  เพราะ Color Profiles ของ Sketch เป็น RGB ส่วนสิ่งพิมพ์จะใช้ CMYK เมื่อนำไปพิมพ์จะทำให้ได้สีที่ไม่ตรงตามที่ออกแบบไว้


2. Workshop ทดลองออกแบบ UI เหมือน Instagram

    Session นี้จะเป็นการ Workshop ให้ออกแบบ UI เหมือน Instagram ซึ่งแน่นอนมือใหม่แบบผมตามไม่ทันอยู่แล้ว 555  แต่ก็พอจะจำเทคนิคบางอย่างกลับมาได้บ้างครับ
  • ในการออกแบบ iOS App จะมี iOS Template มาให้สามารถ Copy มาใช้ได้เลย
  • ใช้ Grid ในการออกแบบตารางสำหรับใส่รูปภาพ  โดยสามารถเลือกได้ว่าจะเอากี่ Row และกี่ Column ซึ่งอาจจะต้องคำนวณขนาดของสี่เหลี่ยมไว้ก่อน  เพื่อให้พอดีกับหน้าจอเมื่อเอามาต่อกันเป็น Grid
  • ในการใส่รูปภาพ  เราไม่ต้องไปหารูปภาพมาใส่เอง  โดยจะมี Plugin สำหรับ Generate รูปภาพให้เรียกใช้งาน  แล้วปลั๊กอินจะสุ่มรูปมาใส่ให้เลย 
  • Font  ที่มีลักษณะคล้าย ๆ กันเช่น Following และ Follower สามารถใช้ Symbol เพื่อให้แก้ไขงานได้เร็วขึ้น

3.  Tools ที่ใช้งานร่วมกับ Sketch

Zeplin  เป็น Tool ที่เอาไว้แสดงขนาดและระยะห่างของส่วนต่างๆ  ใน UI ทำให้ Programmer ทำงานได้สะดวกขึ้น  และไม่ต้องมาถาม Designer บ่อย ๆ มาแต่ละส่วนมีขนาดเท่าไหร่  ระยะห่างเท่าไหร่



Invision เป็น Tool ที่เอาไว้ทำ Interactive Prototype  ให้กับ Design ของเรา  จะทำให้เห็นภาพการทำงานของสิ่งที่เราออกแบบมากขึ้น  เช่น  กดปุ่มนี้แล้วจะให้เกิดการเลื่อนซ้าย  เลื่อนขวา หรือเปลี่ยนหน้า



Git  เป็น Version Control ที่ Programmer นิยมใช้มาก  ดังนั้นการใช้ Git เพื่อส่งไฟล์งานจะทำให้ Programmer ทั่วไปสามารถใช้งานได้เลย  ด้วยความที่ Git เป็น Version Control จึงทำให้ทุกไฟล์ที่เราทำการ commit เข้าไปใน Repository ถูกเก็บไว้รวมถึงไฟล์เวอร์ชั่นเก่าๆด้วย  เราสามารถเปิดไฟล์เก่า ๆ มาดูได้เพียงแค่ checkout version ที่ต้องการ  ถือว่าเป็นการ Backup ไปในตัวได้เลยครับ   ความสามารถอีกอย่างของ Git ก็คือ Git Hook  เราสามารถเขียนสคริปเพิ่มได้  เช่น  เมื่อ Designer ทำการ Push งานลงไปบน Git Server แล้วให้ส่ง E-Mail ไปหา Developer หรือ เมื่อมีการ Push ให้ไป call url    การใช้ Git มาเป็นส่วนหนึ่งของ Workflow ก็จะทำให้เราทำงานได้สะดวกขึ้นครับ




ขอขอบคุณ  Sketch User Thailand  และ NE8T  สำหรับรูปภาพและกิจกรรมดี ๆ แบบนี้ครับ