การนำรูป SVG มาใช้ใน PowerPoint แล้วเป็น animation

สำหรับวันนี้จะมาแนะนำการสร้าง animation ใน powerpoint ด้วยรูป SVG กันค่ะ มาดูกันเลย 1.เปิด power point ขึ้นมา แล้วคลิก Blank  Presentation 2.เตรียมไฟล์ SVG ไว้ หรือหาใน google เอา หรือลิงค์ https://storyset.com เมื่อเลือกรูปได้แล้วให้ดาวน์โหลดเป็นไฟล์ SVG 3.กลับมาที่ Power point ไปที่เมนู Insert > Picture > This Device เลือกไฟล์ SVG ที่เราเพิ่งดาวน์โหลดมา 4.จากนั้นเราจะทำการ Convert รูป SVG นี้ให้เป็นรูปร่างก่อน วิธีการแปลง ไปที่เมนู Graphics Format > Convert to Shape 5.จากนั้น คลิกเมาส์ขวา Group > Ungroup จากนั้นเราจะมาทำ animation ให้แต่ละรูป เนื่องจากทุกรูปแยกออกจากกันแล้ว เวลาเรารัน slide แล้วให้แต่ละรูปเล่น animation อยู่ตลอดเวลา มาดูกันว่าทำยังไง เลือกรูปคนกลาง ไปที่เมนู Animations > Animation Pane เพื่อให้โชว์หน้าต่างภาพเคลื่อนไหวขึ้นมา เลือก More Motion Paths > Lines รูปมันจะเลื่อนลง จากนั้นคลิกที่ Effect Options > Up เพื่อให้เด็กกระโดดขึ้นไป จากนั้นคลิกที่ลูกศรที่ Animation Pane > With Previous จากนั้นคลิกที่ลูกศรที่ Animation Pane > Effect Options แท็บ Effect ติ๊กถูก Auto-reverse เพื่อให้กระโดดขึ้นกระโดดลงอยู่ตลอดเวลา แท็บ Timing ที่ Repeat เลือก Until End of Slide เพื่อให้ทำซ้ำ ๆ จนสิ้นสุด Slide แล้วคลิกปุ่ม “OK” ทีนี้จะให้กระโดดขึ้นสูงต่ำแค่ไหน ให้สังเกตที่จุดสีแดง คลิกที่จุดสีแดง 1 ครั้ง วงกลมสีแดงคือจุดสุดท้าย สีเขียวคือจุดเริ่มต้น เราเลื่อนลงมาต่ำสักหน่อยเพื่อไม่ให้กระโดดสูงมาก จากนั้นคลิก Preview เพื่อแสดงตัวอย่าง ถ้าอยากให้เคลื่อนเร็วกว่าเดิม ที่ Duration ให้ปรับเป็น 01.00 คือ 1 วินาที แล้วลอง Preview ดูตัวอย่าง ให้ทั้ง3คนนี้กระโดดเหมือนกันให้คลิกตัวที่เราทำเสร็จแล้ว > Animation Painter หมายถึงว่ามันจะคัดลอกตัวที่เราเลือกอยู่ แล้วคลิกรูปที่เราต้องการให้เป็นเหมือนรูปแบบที่เราคัดลอกมา และทำรูปที่เหลือเหมือนกัน จะได้กระโดดกันทั้ง 3 คน จากนั้นค่อยมาจัดลำดับ หน่วงเวลา เพื่อให้ทั้ง 3 คนดู smooth กำหนดที่ Delay คนทางซ้าย 00:25 ทางขวา 00.50 แล้วลอง Preview ดู นี่คือตัวอย่างการนำรูป SVG มาทำ animation ใน powerpoint ลองนำไปใช้กันดูนะคะ

Read More »

อ่านข้อมูลจาก google sheet ด้วย API Service

เมื่อมีการเก็บข้อมูลแบบสอบถาม ใน google form แล้วต้องการเอาข้อมูลจาก google sheet เพื่อมาตรวจสอบว่านักศึกษาหรือคนที่กรอกแบบสอบถามนั้น ได้ตอบแบบสอบถามไปรึยัง เพื่อนำมาตรวจสอบต่อกับเว็บไซต์หรือระบบของเราที่พัฒนาเอง เช่นนักศึกษาคนนี้กรอกแบบสอบถามรึยัง ถ้ากรอกแล้วจะสามารถดำเนินการต่อในระบบได้ ถ้ายังไม่กรอกต้องไปยังแบบสอบถามก่อน ขั้นแรก ต้องเปิดช่องทางการเข้าถึง Google sheet และกำหนดสิทธิ์ให้ Application ที่เราต้องการเข้าถึงข้อมูลนั้น ๆ ก่อน ไปยังลิงค์  https://console.developers.google.com/ และไปที่ปุ่มรูป Hamberger –> IAM & Admin –> Manage Resources จากนั้นจะแสดงหน้าจัดการ Resources ให้คลิกเมนู CREATE PROJECT จะแสดงดังรูป ตั้งชื่อ Project และคลิกปุ่ม CTREATE เมื่อสร้างแล้วจะแสดงดังรูป จากนั้นไปที่ ปุ่มรูป Hamberger –> APIs & Services –> Dashboard จะแสดงหน้า Dashboard ดังรูป ให้เลือกเมนู Credentials แล้วคลิกเมนู CREATE CREDENTIALS –> Service account สร้างเสร็จแล้วจะแสดงดังรูป จากนั้นคลิกแก้ไข จากนั้นคลิก ADD KEY –> Create new key จะเป็นการให้สิทธิ์การเข้าถึงให้กับผู้ใช้ กดปุ่ม CREATE จากนั้นแก้ไขไฟล์ JSON ที่โหลดมาให้เป็นชื่อ credentials.json และเปิดไฟล์ดังกล่าว copy ส่วนของ client_email ไว้ และนำไป set ให้เข้าถึง google sheet ที่เราต้องการ เปิด google sheet คลิกที่ปุ่ม Share และวาง client_email ที่เรา copy ไว้ จากนั้นคลิกปุ่ม Done เราก็จะมาเขียนโปรแกรมดึงข้อมูลกัน ในที่นี้ขอเขียน Python เนอะ เริ่มจาก install library ที่จำเป็นกันก่อนค่ะ เปิด command line แล้วรันคำสั่งนี้กันเลย pip install oauth2client gspread ที่แสดงในภาพข้างต้นแบบนั้น เนื่องจากเรา install ไปแล้วค่ะ ต่อไปเรามาเริ่ม code กันเล้ย อย่าลืม!! บันทึกไฟล์ไว้ที่เดียวกับ credentials.json เน้อ ที่สี่เหลี่ยมสีแดง คือ ลิงค์ของ google sheet ที่เราให้สิทธิ์การเข้าถึงไว้ เรียบร้อยมาลองรันกันดู ลืมให้ดูข้อมูลใน google sheet รูปด้านล่างเลยจ้า ถ้ารันไม่ได้ ให้ไปที่เมนู Library แล้วค้นหา API Library ของเรา แล้วคลิก Enable เรียบร้อยแล้วลองรันใหม่ดูค่ะ

Read More »

มาจัดการข้อมูลซ้ำ ๆ และเอาข้อมูลล่าสุดกัน ใน Excel

สืบเนื่องจากเมื่อ 2-3 เดือนก่อน มีโอกาสได้ทำแบบสอบถาม เก็บข้อมูลนักศึกษา แล้วนักศึกษากรอกข้อมูลมาซ้ำ ๆ กันหลายคน และเราจะเอาแค่ข้อมูลล่าสุดเท่านั้น ทำไงกันดีนะ….. ในเมื่อแบบสอบถาม export ออกมาเป็น excel ได้ เราก็มาลองดูว่าทำไงได้บ้าง เล่นไปเล่นมา เฮ้ย ง่ายจุง ได้ข้อมูลตามต้องการด้วยสิ มาดูกัน จากภาพ เราต้องทำการ Sort รหัสนักศึกษาและ Timestamp ล่าสุด สุ่มดูคร่าว ๆ รหัสนักศึกษา 6110610025 มีรายการซ้ำ เมื่อจัดการข้อมูลซ้ำและให้เหลือเฉพาะข้อมูลล่าสุด ต้องเป็นแถวที่ 42 จากนั้นคลิกแท็บ Data –> Remove Duplicates เลือกเลือกเฉพาะ รหัสนักศึกษา ซึ่งมันซ้ำกันอยู่ เมื่อเรียบร้อยแล้วจะแสดง Dialog แจ้งบอก มี 28 รายการที่ซ้ำและได้ลบออกไปแล้ว 165 รายการที่ไม่ซ้ำ สุ่มดู รหัส 6110610025 จะพบแค่รายการล่าสุดเท่านั้น เป็นวิธีที่ง่ายมาก ลองนำไปใช้กันดูนะคะ แล้วพบกันใหม่ค่ะ…..

Read More »

Robot Framework Puppeteer

Robot Framework Puppeteer คืออะไร เป็น Library ที่ทำมาครอบ Puppeteer เพื่อให้ Robot framework ใช้งานได้ง่าย โดย Keyword ต่างๆจะเหมือนกับการใช้งาน Selenium Library ทำให้ใครที่ใช้งาน Selenium Library อยู่แล้วสามารถปรับตัว รวมไปจนถึง การเปลี่ยนมาใช้ Puppeteer ทำได้ง่ายเลยค่ะ และหมดปัญหาการที่เราต้องมาคอยอัพเดต Web driver อยู่ตลอด ๆ การติดตั้งง่ายมาก ๆ ดูให้ทันหล่ะ 555 รัน Command เดียวเลยจบ ไม่ต้องโหลด Chrome driver หรือ Setup Path เพิ่มเติมให้ปวดหัว เปิด Command line มาเลยค่ะ แล้วพิมพ์คำสั่ง pip install –upgrade robotframework-puppeteerlibrary การใช้งาน เราลองมารัน code เดิมที่เขียนไว้กันดูดีกว่า (selenium2library) อ้าวเฮ้ย!!! Error ซะงั้น Web driver ไม่ support ต้องอัพเดตอีกแล้ว งั้นขอไปอัพเดตแปปนึงนะ ไม่ขอเล่าถึงการอัพเดตแล้วนะ เคยเล่าไว้ตอนนึงแล้ว ไปลองหาอ่านกันดู อิอิ หลังจากอัพเดตแล้วมาลองรันอีกรอบ เปลี่ยนที่ Setting จาก Selenium2Library เป็น PuppeteerLibrary จากนั้นลองรันดู เปรียบเทียบความเร็วในการประมวลผลระหว่างใช้ Selenium2Library กับ PuppeteerLibraryรูปแรกจะเป็นการใช้ Selenium2Library รูปถัดไปจะเป็น PuppeteerLibrary จะเห็นได้ว่า PuppeteerLibrary ทำงานได้เร็วกว่า นี่ขนาดรันคำสั่งขนาดน้อย ๆ ไว้ลองกับคำสั่งที่ซับซ้อนแล้วจะมาเล่าให้ฟังค่ะ

Read More »

ให้ Visual Studio Code แสดงสีและ Intellisense (Robot framework)

เมื่อติดตั้ง Visual Studio Code เสร็จแล้ว ก่อนที่เราจะเริ่ม Code กัน หรือ Code ไปแล้วมันรู้สึกว่า นี่เรากำลังใช้ Note pad กันหรืออย่างไร ไม่มีสีสัน แยกส่วน Code ต่าง ๆ เพื่อลดการลายตา และมันยากต่อการอ่าน Code และไม่มี Intellisense อะไรเลย พิมพ์เองล้วน ๆ หน้าตาก็ประมาณนี้สีเดียว มาดูกันว่าเราจะทำอย่างไรกัน ไปที่เมนู Extensions แล้ว ค้นหาด้วยคำว่า robot แล้ว Enter ให้คลิก Install ตัว Robot Framework Intellisense เมื่อ Install เสร็จจะเห็นได้ว่ามีสีสันแล้วนะ และมี Intellisense ด้วยแล้วนะ

Read More »