เด็กโข่งทำป้าย Digital Signage ตอนที่ 4 ตอนจบ

เมื่อวันเสาร์ที่ผ่านมานึกสนุกก็เลยไปดู TV ที่เป็น Smart TV เพราะอยากรู้ว่า Smart TV มันเป็นยังไง จะติดตั้งโปรแกรมเข้าไปได้ยังไง แล้วจะเอา Synapse ไปติดตั้งได้มั๊ย หลังจากเดินดูอยู่ครึ่งวันก็พบว่าผมไม่ได้คำตอบจากคนขายมากนัก ส่วนใหญ่ก็บอกว่าก็เข้า LG Store หรือ Samsung Hub แล้วก็สั่งติดตั้ง ถ้าอยากรู้ต้องซื้อไปลองเอาเอง แต่ว่า Smart TV นี่ราคาหลายหมื่นนอกจากราคาแพงแล้วจอยังใหญ่เกินกว่าที่ผมจะแบกคนเดียวไหว และถ้าจะต้องใช้ LG Store หรือ Samsung Hub จริงผมคงเลิกที่จะซื้อ Smart TV เพราะเอามาก็ไม่รู้จะดูอะไร เอาเป็นว่าซื้อจอคอมพิวเตอร์ละกันเอาแบบที่รองรับ Full HD ได้ เสียบกับช่องอะไรก็ได้ไม่ว่าจะเป็น HDMI, D-Sub และ DVI ก็เลยไปสอยจอ LG LED 23EA63 มาตัวนึง พร้อมกับ Android Mini PC MK808 และ Air Mouse
หลังจากที่เสียบเจ้า MK808 ก็พบว่า ROM ที่ติดมาเป็น Android 4.1.1 ซึ่งไม่ตรงกับ Stock ROM เข้าใจว่าทางร้านคงจะอัพเกรดให้ แต่ที่น่าเสียดายคือไม่ได้ Root เครื่องมาไม่งั้นได้เล่นอะไรสนุกๆ อีกเยอะ หลังจากได้จอ Full HD และ MK808 มาแล้วก็เลยได้ทดสอบ Synapse Digital Signage แบบเต็มๆ หลังจากที่ทดสอบบน Asus Transformer มาเกือบ 1 สัปดาห์ ผลปรากฏว่า resolution มันผิด T_T ตอนที่ทดสอบบน Asus Tranformer เป็นหน้าจอขนาด 1280×800 ไม่ใช่หน้าจอขนาด 720p อย่างที่ผมเข้าใจ ทำให้การแสดงผลบนจอ Full HD มันแปลก เพราะสัดส่วนมันเกินไป 80 pixel อีกอย่างการ Scale บน App ตั้งค่าไว้เป็นแบบ Center ทำให้ภาพมันดูไม่เต็มจอ ต่อให้หด Navigation Bar แล้วก็ตาม อ้อ MK808 ที่ผมซื้อมามี Feature ซ่อน Navigation Bar มาให้ด้วย ก็ไม่จำเป็นต้อง Root หรือติดตั้งโปรแกรมเพิ่มเติม แหมถ้ายัด App Full! Screen จะดีมากเลยล่ะ เอ้ามาดูกันว่าหน้าตาบนจอ 1080p เป็นยังไง

หน้าแรกหลังลง App จะมี Overlay Instruction แบบสวยๆ

หลังจากกดผ่านมาแล้ว App จะดึง default image มาแสดง เพราะตั้งค่า data store เป็น image slideshow

คลิกที่นาฬิกาจะเปิดหน้าต่าง setting ขึ้นมาตั้งค่ากันตามใจชอบ

ถ้ากำหนด data store เป็น website ก็จะเปิดหน้าเว็บขึ้นมา ภาพตัวอย่างเป็น Gecko Board

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

  • ใช้ Android Stick อย่าง MK808
  • ติดตั้ง App Full!Screen เพื่อบังคับให้ซ่อน Navigation Bar
  • ติดตั้ง Synapse และตั้งค่าให้เป็น default launcher
  • คัดลอกไฟล์ภาพใส่ SD Card แล้วเปลี่ยน image path ใหม่ หรือ
  • เลือก data sourcr เป็น website แล้วตั้งค่า URL ที่คุณต้องการ

เพียงเท่านี้คุณก็จะได้จอ Digital Signage แล้ว แค่เสียบปลั๊กทุกอย่างทำงานก็เรียบร้อย ง่ายมั๊ยครับ อ้อเกือบลืมไปไม่มี จอฟ้า หรือ Error Dialog มากวนใจด้วย 🙂

เด็กโข่งทำป้าย Digital Signage ตอนที่ 3

ตั้งใจว่าจะทำ Synapse Lite จำกัดความสามารถไว้แต่ไปๆ มาๆ นั่งทำ feature เพิ่มขึ้นเรื่อยๆ ตอนนี้ตั้งใจทำ Language Support ให้ได้หลายภาษาเท่าที่จะทำได้ จะมีภาษาดังนี้

  • ภาษาอังกฤษ
  • ภาษาไทย
  • ภาษาลาว
  • ภาษาเวียดนาม

เดี๋ยวรอดูว่ามีประเทศไหนเอาไปเล่นบ้าง แล้วค่อยทำภาษานั้นๆ เพิ่ม สำหรับ feature อื่นๆ คงเก็บเอาไว้ใช้กับเวอร์ชั่นขาย ผมไม่อยากขายผ่านเว็บหรือขายไฟล์ APK อยากให้โหลดจาก Play Store แล้วเอาไป Activate เอาเอง ตอนนี้กำลังหาวิธีที่ดีที่สุดอยู่ครับ 🙂
สำหรับวิธีการเล่นก็ง่ายมาก ดาวน์โหลด App ได้ที่ Google Play Store  ติดตั้งลงบน Android Box หรือ Android Stick เสียบเข้ากับ TV LCD ความละเอียดหน้าจอต่ำสุดที่ 720p เมื่อเปิด App ขึ้นมาตัว App จะตรวจสอบข้อมูลภาพ (ค่าปริยายอยู่ที่แสดงภาพ) ใน External Storage ซึ่งเปิดครั้งแรดจะไม่มีข้อมูล App จะคัดลอกตัวอย่างภาพไปยัง External Storage ที่ไดเรคทอรี /sdcard/Synapse พร้อมตั้งค่า App เบื้องต้นให้
จากนั้นจะมีหน้าจอ Instruction Overlay ขึ้นมาอธิบายว่ามีอะไรบ้าง ให้คลิกที่หน้าจอ 1 ครั้ง ก็จะแสดงผลภาพตัวอย่าง หากต้องการตั้งค่าใหม่ให้คลิกที่นาฬิกา จะเข้าสู่หน้าตั้งค่า App หากต้องการเปลี่ยนรูปภาพการแสดงผลก็คัดลอกภาพไปยังไดเรคทอรี /sdcard/Synapse หากต้องการแสดงผลเว็บไซต์แทนรูปภาพ ก็เลือกกำหนด Data Source ใหม่ และกำหนด URL เว็บไซต์ที่ต้องการได้ อ้อ สำหรับซอร์สโค้ดอยู่ที่ GitHub เหมือนเดิมครับ
Get it on Google Play

เด็กโข่งทำป้าย Digital Signage ตอนที่ 2

เมื่อ 2 เดือนที่แล้วมีไอเดียการทำโซลูชั่นเกี่ยวกับ Digital Signage ซึ่งได้เขียน Blog ไป แต่ไม่มีเวลาทำก็เลยไม่ได้ทำ เนื่องจากมีงานเผา Slide สอน Andorid Mobile App Development ช่วงต้นเดือนมีนาคม ก็เลยทำให้โครงการนี้ค้างคามานานก็เกือบปลายเดือนเมาายนแล้วก็ได้เริ่มโครงการมานิดเดียว วันนี้มาเล่าความคืบหน้ากันหน่อย หลังจากที่ออกแบบคร่าวๆ จาก Blog ครั้งที่แล้ว รู้สึกว่าจะใช้เวลานานไปหน่อยในการทำเพราะองค์ประกอบที่ออกแบบคร่าวๆ ไว้มันเยอะไปหน่อย คงทำไม่เสร็จใน 1 สัปดาห์แน่นอน ผมก็เลยแบ่ง App ออกเป็น 2 รุ่น คือรุ่น Lite และรุ่น Full ง่ายมั๊ย ;P ซึ่งตอนนี้พัฒนารุ่น Lite เตรียมที่จะออก Lite Beta ได้แล้ว
อ้อลืมบอกจะทำ App มันก็ต้องมีชื่อใช่มั๊ย จะตั้งชื่อว่า Ezy Digital Signage เดี๋ยวก็จะโดน Google Play Store แบน App อ้อผมโดน Google Play Store แบน App ด้วยล่ะ รู้สึกภูมิใจมากมาย 🙂 คิดเล่นๆ ก็เลยใช้ชื่อว่า SYNAPSE ใช้ตัวอักษรในภาษา Albanian ไม่รู้ว่าตัวอะไรลืมละ เห็นมันสวยดี ในรุ่น Lite นี้มีคุณสมบัติง่ายๆ ดังนี้

  • ใช้ข้อมูลรูปภาพ, ข้อมูลจากเว็บไซต์ เลือกเอาอย่างใดอย่างหนึ่ง
  • ระบุที่เก็บรูปภาพ
  • ระบุที่อยู่เว็บไซต์ (ใช้บริการจาก Geckoboard หรือ Duckboard ได้หากไม่อยากทำเว็บ)
  • มีตัวอักษรวิ่งและนาฬิกา
  • ปรับสีตัวอักษรวิ่งและนาฬิกา
  • ปรับสีพื้นหลังอักษรวิ่งและนาฬิกา

วิธีการใช้งานก็ง่ายๆ ครับ หากล่อง Android Stick มาเสียบไว้ที่จอ TV ใหญ่ๆ

Android Mini TV MK808

จากนั้นติดตั้งโปรแกรม Full! Screen เพื่อบังคับให้ Navigation Bar หายไป แล้วก็ตั้งค่า SYNAPSE Lite เพื่อทำเป็น Digital Signage ได้แล้ว ดูภาพตัวอย่าง

ทำเล่นพอสนุกสนาน 🙂  ครั้งหน้าเราจะเชื่อมต่อกับ REST API เพื่อดึง content จาก Cloud Storage กันครับ เก็บไว้เป็นรุ่น Full ละกันนะ

เด็กโข่งทำป้าย Digital Signage ตอนที่ 1

หลังจากจบช่วงเด็กโข่ง(อยาก)เขียนเกมส์เมื่อปีที่แล้วก็ไม่ได้เขียน App อะไรอีกเลยบน Android สืบเนื่องจากมีของเล่นจากพี่อดุลย์แห่ง NanoSoft Tech เอา Android Stick มาโชว์ก็เลยอยากลองเล่นบ้าง แต่ไม่มี TV จะเสียบ T_T แถมทิ้งท้ายเรื่อง Digital Signage ไว้นิดหน่อย ก็รู้สึกว่าน่าสนใจดี เพราะ Android Box หรือ Android Stick ราคาถูกมากๆ แถมติดไว้กับ TV จอใหญ่ๆ ได้สบายๆ ติดตั้ง Application จาก Market ก็ได้ เหมือนกับเครื่องคอมพิวเตอร์ดีๆ นี่เอง ซึ่งเราสามารถเล่นได้หลายอย่างตั้งแต่ App ปกติ เกมส์ ดูหนังฟังเพลง หรือประยุกต์เอาไปใช้งานเฉพาะด้าน เช่น Digital Signage เป็นต้น หากคุณเป็นแฟน Android และเป็นสิงห์ Play Store แล้วละก็ คุณจะพบว่า App ที่ทำ Digital Signage บน Android มีหลายตัวมาก มีทั้งแบบฟรีและเสียเงิน ซึ่งครั้งนี้จะมาทำ Digital Signage Solution ในแบบที่ผมอยากได้ก็แล้วกัน ใครนึกภาพไม่ออกว่า Digital Signage เป็นยังไง ผมมีภาพให้ดูครับ

ป้าย Digital Signage ขนาดตึก 2 ชั้น

ป้ายแบบแขวนเป็นจอก่อนเข้าลิฟ

แบบ2 จอ บางมุมมี 3 จอ

เบื้องหลังมี PC เกาะอยุ่หลังจอพร้อมสาย LAN

ผมยกตัวอย่างป้ายของ Aqua Corporation ที่ติดอยู่ที่ศูนย์ราชการ เพราะอยู่ใกล้ตัวมากที่สุด ใครที่เดินไปตามห้างสรรพสินค้าหรือขึ้นรถไฟฟ้าก็จะเจอป้าย Digital Signage แบบนี้เยอะมาก เนื่องจากจัดการกับเนื้อหา ทำได้สะดวก รวดเร็ว และกำหนดจอที่จะแสดงผลได้ (กรณีที่มีหลายจอ) ดังนั้นจึงต้องอาศัยเครื่องคอมพิวเตอร์ขนาดเล็กมาเกาะอยู่ที่หลังของจอเพื่อรับข้อมูลจากเซิร์ฟเวอร์นั่นเอง ครั้งนี้เราจะมาลองทำ Android App เลียนแบบ Digital Signage กัน โดยดึงข้อมูลที่ต้องการแสดงผลจาก Cloud เจ๋งป่ะ 🙂 สำหรับโปรเจคนี้คงไม่รีบร้อนอะไรมากนักเนื่องจากแก่แล้วนอนดึกไม่ได้เพราะตับอักเสบผมก็เลยจะทะยอยเขียน App ตามใจที่อยากจะทำละกัน สำหรับโครงการนี้เป็นโอเพนซอร์สเช่นเคยทั้งตัว Android App, Web App และ Service API ซอร์สโค้ดจะอยู่ที่ GitHub เช่นเคย