Month: July 2022

  • เพิ่มสีสันให้กับ Picklist Field ของ Work item บน Azure DevOps ด้วย Color picklist control

    naparat.h

    สำหรับบล๊อกนี้ เราจะมาเพิ่มสีสันให้กับ ฟิลด์รายการ (Picklist Field) ของ Work item บน Azure DevOps กันค่า เพราะสีสันเป็นสิ่งที่มีอิทธิพลต่ออารมณ์และความรู้สึกของเรา (และ “มิตรภาพที่ดีก็เหมือนสีที่ติดแน่น ไม่จางหาย” อ่ะไปนั่นนน >,<)

    Color picklist control ที่นำมาใช้นั้น จะช่วย

    • ระบุความสำคัญของไอเท็ม
    • สร้าง visual language (ภาษาภาพ หรือสิ่งที่มองเห็น) ให้กับ ฟิลด์ (field) เพื่อแทนความหมายที่ต้องการจะสื่อสาร

    มาเริ่มกันเลยค่า

    1. ไปที่ Work Item (ที่ต้องการปรับแต่ง Picklist Field) โดยคลิกเพิ่มเติม … แล้วเลือก “Cuztomize” ดังรูป

    2. หน้าจอการปรับแต่ง Work item จะแสดงขึ้นมา ให้กดเลือก “Add custom control” ดังรูป

    3. หน้าต่าง Add a custom control จะแสดงขึ้นมา ให้กดเลือก Control ชื่อ Color picklist control (Microsoft DevLabs) (ซึ่งเราได้ Add ไว้ใช้งานเรียบร้อยแล้ว) แล้วก็กดปุ่ม “OK” Let’s it goooo ดังรูป

    4. เมื่อเลือก control เรียบร้อยแล้ว ไปที่แท๊ป Option เพื่อเข้าไปกำหนดสี และ Label ให้กับค่าต่างๆ ของ filed โดยให้ทำการเลือก Picklist Filed ที่ต้องการ แล้วระบุ label แล้วทำการกำหนดสี ให้กับแต่ละค่าของรายการใน filed ดังรูป
    –> ในตัวอย่าง ผู้เขียนได้กำหนดสี และ Label ให้กับ filed > State ซึ่งมีทั้งหมด 4 ค่า คือ Active;Closed;Proposed ;Resovled และกำหนดสีดังนี้ Blue;Green;Grey;Orange (ในการกำหนดค่าให้ใช้ ; คั้นระหว่างค่าข้อมูล)

    5. ไปที่แท๊ป Label กันซักหน่อย เพื่อกำหนด Label ของ Field ที่ต้องการให้แสดง ดังรูป ตัวอย่าง ผู้เขียนตั้งชื่อว่า State แล้วกดปุ่ม “OK” ก็เป็นอันเสร็จเรียบร้อยแล้วละค่า

    มาดูหน้าตาหลังดำเนินการกันเรียบร้อยแล้วค่ะ

    และในส่วนของหน้าจอกรอกข้อมูล … พอมีสีสันขึ้นมา อู้วววว ดีงามมากเลยค่า 🙂

    อ้างอิง : https://marketplace.visualstudio.com/items?itemName=ms-devlabs.color-form-control&ssr=false#overview
    https://azure.microsoft.com/en-us/services/devops/#overview
    https://www.altv.tv/content/altv-news/623742784e62cb7e583a80a3

  • After Effect การเรียกใช้งาน AE ที่ Export มาใช้บน Premier Pro (Part3)

    nattapon.p

    การเรียกใช้งาน After Effect ที่ Export มาใช้บน Premier Pro

    หากยังไม่ได้สร้างงานจาก AE กลับไปดูขั้นตอนที่ Link Part1 ได้ครับ

    หากยังไม่ได้ Export งาน AE กลับไปดูขั้นตอนที่ Link Part2 ได้ครับ

    ในPart3 นี้เราจะเปิดโปรแกรม Premier Pro นะครับจะนำไฟล์ที่เรา Export จาก AE ที่เซฟไว้มาใช้งาน

    เริ่มจากเปิดโปรแกรม แล้วหาวิดีโอ หรือรูป ก็ได้ครับมาทดสอบ ในภาพผมได้นำภาพไปวางไว้ที่ Timeline เรียบร้อยแล้ว

    จากนั้นไปที่ เมนู Window ->Essential Graphics

    จากนั้นพิมพ์ชื่อที่เราตั้งไว้ “Fade Text” (ในPart2ที่ตั้งไว้ครับ)

    -Local Templates Folder ถ้าเราเซฟไว้ในเครื่องเราครับ

    -Libraries ที่เราเซฟไว้ใน cloud ครับ

    จะมี Fade Text ขึ้นมาให้เราใช้งาน

    Drag มาวางไว้ที่ Timelines เพื่อทดสอบ

    เราสามารถเปลี่ยนข้อความได้ ในภาพได้เปลี่ยนเป็น “Hello World” และสามารถแก้ไข Font ขนาด ต่างๆได้

    เสร็จเรียบร้อยแล้วครับ ^^

  • After Effect การ export งานไปใช้งานบน Premier Pro (Part 2)

    nattapon.p

    การ export งาน After Effect ไปใช้งานบน Premier Pro(Part 2)

    หากยังไม่ได้สร้างงานจาก AE กลับไปดูขั้นตอนที่ Link Part1 ได้ครับ

    หลังจากที่ได้งานที่ต้องการแล้ว ใครที่ทำตามมาจาก Part1 สามารถทำต่อได้เลยครับ ไปที่เมนู window ->Essential Graphics

    Drag ตรง Source Text ไปที่ Essential Graphics

    จะได้ดังภาพ ส่วนนี้ตอนที่เราเรียกใช้งานบน Premier pro จะทำให้สามารถแก้ไขข้อความได้แทนที่ข้อความที่เราตั้งเอาไว้

    Click ที่ Edit Properties เพื่อกำหนดค่าที่แก้ไขได้เพิ่มเติม

    ให้ติ๊กถูกทั้ง 3 ข้อ เพื่อตอนนำไปใช้จะเปลี่ยน Font ปรับขนาดของ Font เปลี่ยนเป็น ตัวหนา ตัวเอียง ได้ จากนั้นกดปุ่ม OK

    จะแสดงส่วนที่สามารถแก้ไขได้ จากนั้นตั้งชื่อให้สอดคล้อง และ กดปุ่ม Export Motion Graphics Template

    เลือกสถานที่จะบันทึก ในรูปจะเลือก save ไว้บน cloud และกดปุ่ม OK เป็นอันเรียบร้อย

  • After Effect การสร้าง Text Fade in Fade out (part1)

    nattapon.p

    การสร้าง Text Fade in Fade out จาก After Effect ไปใช้งานบน Premier Pro (part1)

    เนื้อหาเป็นการสร้างงานจาก After Effect แล้วคล้ายๆกับการสร้าง Component(ในการเขียนโปรแกรม)เพื่อให้ใช้งานได้ตลอดในPremier Pro เนื้อหาทั้งหมดมี 3 part ด้วยกันครับ

    1.การสร้าง Text Fade in Fade out จาก After Effect

    2.การ export งานที่สร้างจาก After Effect ไปใช้งานบน Premier Pro

    3.การเรียกใช้งาน After Effect ที่ Export มาใช้บน Premier Pro

    เริ่มต้นเปิดโปรแกรมและสร้าง composition สำหรับสร้างชิ้นงานของเรา ^^
    แนะนำการตั้งค่าสำหรับการทำ Text Fade in Fade out ตั้งเวลา timeline ไว้สัก 5 วินาที จะมากกว่านี้หรือน้อยกว่านี้ก็ได้ครับ
    ไปที่เครื่องสำหรับพิมพ์ข้อความตามภาพเลยครับ

    หลังจาก click ที่เครื่องมือพิมพ์ข้อความ แล้วมา click ที่พื้นที่ทำงาน ระบุข้อความตามต้องการ ตั้งข้อความอะไรก็ได้ครับเพราะตอนเรานำไปใช้ที่ Premier Pro จะเป็นข้อความที่เราจะต้องแก้ไข

    เลือกจัด Paragraph เป็น Center Text และ Align เป็น Align Horizontally กรณีที่ไม่มีให้ไปเปิดที่เมนู Window

    หลังจากนั้นเรามาที่เครื่องมือ Rectangle Tool สร้าง สี่เหลี่ยมเพื่อจะนำมาใช้บังข้อความ

    ให้เลื่อนสี่เหลี่ยมที่สร้างขึ้นให้ใกล้ๆกับ Text ครับ

    จากนั้นให้ไปที่ Track Matte กรณีหาไม่เจอให้ไป click ขวา บริเวณที่กรอบสีแดงดังภาพ เลือก Columns -> Modes

    ที่ Layer ของ Text ให้เลือกTrack Matte เป็น Alpha Inverted Matte “Shape Layer1”

    อธิบายเพิ่มเติมในงานของเรามีการสร้าง Text และรูปสี่เหลี่ยมไว้ ถ้าเราเอาไฟล์นี้ไปใช้ในงานvdo ของเราตอนนี้จะเห็นแค่Text แต่ไม่เห็นรูปสี่เหลี่ยม(ในรูปขอทำเป็นเส้นปะไว้) สิ่งที่เราจะทำต่อไปก็คือทำAnimation ให้กับ Text ไปซ่อนหลังรูปสี่เหลี่ยม ก็คือการ Fade in / Text ออกมาจากรูปสี่เหลี่ยม ก็คือการ Fade out

    หากรูปสี่เหลี่ยมหายไปแบบนี้ถือว่าถูกต้องแล้วครับ

    เริ่มทำ Animation โดยการใช้ Keyframe ให้ไปที่ Transform -> Position

    เลื่อน Timeline ที่ต้องการ กรณีนี้เลื่อนไปที่ 1 วินาที

    Click ที่เพิ่ม Keyframe (ทางซ้ายมือ)และเลื่อน Timeline มาที่จุดเริ่มต้น เพิ่ม Keyframe

    ที่ KeyFrame เริ่มต้นให้เลื่อนTEXT มาซ่อนไว้หลังรูปสี่เหลี่ยม

    จากนั้นไปที่ Keyframe ที่จุดที่ 2 (1วินาที) Click ขวา Keyframe -> Easy Ease

    Drag เมาส์ ทั้ง 2 Keyframe กดปุ่ม Ctrl + c Copy Keyframe เอาไว้

    เลื่อน Timeline ไปวินาทีที่ 2 กดปุ่ม Ctrl + v วาง Keyframe

    Click ขวา Keyframe ที่ 3 เลือก Keyframe Assistant -> Time -Reverse Keyframes

    เท่านี้เราก็จะได้ Text ที่มีการ Fade in Fade out แล้วครับ

  • Tabulator ในการดึงข้อมูลจาก google sheet

    thichaluk.s

    ต้องการนำข้อมูลใน google sheet ไปแสดงบนหน้าเว็บ ด้วย Tabulator ตัวอย่างข้อมูลดังนี้ค่ะ

    จากนั้นให้เราไปสร้าง Apps Script กันค่ะ สร้าง function และสร้าง page index

    จากนั้นค้นใน google ว่า tabulator > คลิก Documentation > คลิก Quick Start > ที่ Install Sources > CDN จากนั้นให้ Copy

    ไปวางที่บรรทัดที่ 4 หน้า index.html ดังรูป

    จากนั้นให้ Copy

    จะได้ code หน้า index.html ดังนี้

    จากนั้นคลิกปุ่ม Deploy > New deployment ที่ setting > Web app ที่ Who has access เลือก Anyone > กดปุ่ม Deploy > Done

    จากนั้นคลิกปุ่ม Test deployment > คลิกที่ URL จะได้ผลลัพธ์ดังนี้ เป็นผลลัพธ์ตาม code ตัวอย่างที่เรา copy มาจากเว็บ Tabulator ค่ะ

    คราวนี้มาทำให้ดึงข้อมูลจาก google sheet กันดีกว่าค่ะ ไปที่ Code.gs กันเล้ย ตามนี้จ้า

    จากนั้นไปที่ index.html จะดึงค่าจาก google sheet หล่ะ

    จากนั้นลอง Refresh หน้าจอดู

    ลองนำไปเล่นกันดูนะคะ ^_^