วันพุธที่ 11 มกราคม พ.ศ. 2560

ทดลองเขียน HTML

        ในวิชา Building Software II จะเน้นไปเรื่องการเขียน web application เป็นหลัก SPN จึงให้ทดลองการเขียนเว็บโดยใช้ HTML โดยใช้ text editor แบบธรรมดา ทางกระผมจึงได้ทดลองเขียนโดยใช้ gedit ซึ่งเป็น text editor ที่ทาง ubuntu มีให้อยู่แล้ว มาเขียนภาษา HTML โดยจะเขียนหน้าเว็บเกี่ยวกับไอดอลที่ตัวเองชื่นชอบ

        ในการเขียน HTML ก็ได้หาความรู้พื้นฐานมาจากเว็บไซด์ http://www.w3schools.com/html/ 
ซึ่งเป็นเว็บไซด์ที่ส่วนตัวผมเองว่าเป็นเว็บที่ดีมาก เพราะจะมีข้อมูลที่ครอบคลุมแล้วยังมีการทดสอบระหว่างการอ่านเนื้อหาในส่วนๆนั้นจบ ซึ่งจะมีเนื้อหาของส่วน css มาให้ด้วย

        หลังจากที่ได้ทดลองเขียนนี้คือผลงานของผม




HTML




        จากโค้ดด้านบนกระผมก็พอจะเข้าใจภาษา HTML ขั้นพื้นฐานได้แล้ว โดยความรู้พื้นฐานก็อย่างเช่นว่า <> คือ tag ในการเขียนโค้ด HTML <> จะเป็นหัวใจหลัก ในการเขียน โดยในโค้ดจะมีส่วนสำคัญๆคือ <html> <head> <body> โดยจะต้องมี tag ปิดด้วย </html> ฯลฯ ในส่วนของ <head> จะเป็นการกำหนดส่วนหัวของเว็บเพจ หรือ ก็คือส่วนนี้



        ในส่วนของ <body> ก็จะเป็นการใส่เนื้อหาต่างๆ โดยคำสั่งที่ใช้ไปก็จะมี 
<h1-h6> เป็นส่วนของ heading หรือหัวข้อ จะต้องมี tag ปิดด้วย
<p> เป็นส่วนของการใส่ข้อความเป็นย่อหน้า จะต้องมี tag ปิดด้วย
<br> เป็นการเว้นบรรทัด หรือ ขึ้นบรรทัดใหม่
<div> เป็นการสร้าง block ให้กับส่วนต่างๆของข้อความ จะต้องมี tag ปิดด้วย
<ul> เป็นการสร้าง listing โดยจะใช้คู่กับ <li> โดยจะสามารถใส่ style กำหนดได้ว่าต้องการรูป                แบบใด โดยผมเลือกแบบวงกลม



จะได้ผลเป็นดังนี้



<table> เป็นการสร้างตาราง โดยจะใช้คู่กับ <tr> เป็นการสร้างแถว <th> เป็นการใส่หัวข้อในแนวหลัก <td> เป็นการใส่เนื้อหาในแนวหลัก

<img src=""> เป็นการใส่รูปโดยใน "" จะสามารถใส่ได้ทั้งชื่อไฟล์รูปภาพที่อยู่ในเครื่อง หรือ อาจจะเป็นลิ้งค์ของรูปภาพที่ต้องการก็ได้ 

และอีกสิ่งที่ได้จากการทดลองเขียนก็คือในส่วนต่างๆของคำสั่ง สามารถที่จะใช้ คำสั่ง style เข้ามาช่วยเพิ่มเติมคุณสมบัติต่างๆได้ อย่างเช่น 

<div style="background-color:#ffb67a;border:3px solid black;"> จะเป็นการใส่สีพื้นหลัง แล้วใส่เส้นขอบขนาด 3 พิกเซล แล้วมีลักษณะของเส้นเป็นสีดำทึบ

<h2 align="left"> จะทำให้ข้อความ heading ของเรานั้นถูกจัดอยู่ในด้านซ้าย

แล้วก็ได้รู้จักกับ HTML entities จากเว็บไซด์นี้ http://www.w3schools.com/html/html_entities.asp
ซึ่งตัวที่ได้ลองใช้คือ $nbsp ซึ่งจะทำให้ผลที่ออกมาเป็นการเคาะ spacebar 1 ครั้ง หรือ non-breaking space นั้นเอง








Welcome to BS2

ในตอนนี้ได้เริ่มต้นการศึกษาในวิชา Building Software II

วันพฤหัสบดีที่ 17 พฤศจิกายน พ.ศ. 2559

Kivy on Android

เนื่องจาก SPN ต้องการให้ลองไปเล่น kivy บนมือถือ ก็เลยทำการโหลด Kivy Launcher มาจาก Play Store ของมือถือ Android แล้วสร้างโฟลเดอร์ ชื่อ kivy ขึ้นมาไว้ในเครื่อง แล้วก็จากที่อ่านมาก็คือเราสามารถ ที่จะนำ Project Kivy ต่างๆ ใส่เข้าไปได้ แต่ว่า ใน Project นั้นจะต้องมี ไฟล์ android.txt ไว้ เพื่อทำการเซ็ตค่าของการรัน kivy ด้วย


โดย title จะเป็นหัวข้อที่จะแสดงใน App มือถือเรา ส่วน Author ก็เป็นการบอกว่าใครเขียน ส่วน orientation จะเป็นการตั้งค่าว่าจะให้เป็นแนวนอนหรือแนวตั้ง (landscape & portrait)

หลังจากนั้นก็สามารถกดรัน kivy บน App ได้เลย

ตอนแรกผมก็คิดอย่างนั้นแต่มันกลับ ไม่ได้ซะงั้น พอกดรันแล้วมันก็เด้งออกหน้าจอ จากนั้นก็ลองไปถามเพื่อนว่ามันมีสาเหตุจากอะไร (Sarik Kampan) เพื่อนก็บอกมาว่าให้ลอง เปลี่ยนชื่อไฟล์หลักนั้นให้เป็น main.py สิแล้วจะรันได้ ซึ่งพอเปลี่ยนก็ทำได้จริงๆ ซึ่งเหตุผลที่ได้ ผมก็เดาว่ามันน่าจะมาจากการที่ว่า ถ้ามีไฟล์ .py หลายๆไฟล์ App จะไม่รู้ว่าตัวเป็นเป็น ตัวหลักก็เป็นได้

แล้วผลที่ได้จากการนำ ไปใช้กับเกม Pong, OX, ComicCreator และ Memo










Memo pt.8.1 (Setting)

จาก อ.SPN ให้ลองใช้ issues บน bitbucket แล้วให้ตั้งหัวข้อเกี่ยวกับการทำ setting ใน Memo ดู ก็เลยไปลอง ทดลองทำดู ได้ผลมาดังนี้


ซึ่งเราก็ได้ทำไปจนเป็นรูปเป็นร่างแล้ว



ส่วนที่เริ่มทำส่วนแรกจะเป็นส่วนของ ขนาดตัวอักษร font และสีพื้นหลัง โดยจะเก็บไฟล์การ setting นี้ให้อยู่ใน ไฟล์ .txt โดยจะมีลักษณะดังนี้

โดยหลักการของเราคือจะมีการสร้าง Class Setting ขึ้นมาโดยจะมี method ใหม่ดังนี้

+data()
+all_set()
+font_size_set()
+font_name_set()
+bg_color_set)

โดยผมจะขอเริ่มต้นที่ method data() ก่อน

ใน method นี้ก็ไม่ได้มีอะไรมากเลย เป็นเพียงการเก็บข้อมูลในไฟล์ .txt ให้เป็นชุดๆ โดยจะให้เป็น list เอาไว้ โดยใช้คำสั่ง split เมื่อเจอช่องว่าง จะแยกเป็น ลิสตัวใหม่ จากไฟล์ .txt ด้านบนจะเห็นได้ว่าแบ่งได้เป็น 8 ตัว index (0-7)

ต่อไปก่อนที่จะไปจุดอื่น จะขออธิบายเกี่ยวกับ Class Option ก่อน

ในคลาสนี่จะมีตัวแปร 2 ตัวคือ font_size กับ font_name โดยสองตัวนี้จะ เป็นตัวแปรที่ใช้ในการใส่ขนาดและ font ทุุกข้อความในโปรแกรม 


method font_size_set()
ทำหน้าที่ในการ รับค่ามาจาก method data() โดยจะใช้ ตัวที่ 2 ในลิสต์ มาเทียบ แล้วใส่ค่าตัวแปร font_size ในคลาส Option


method font_name_set()

ทำหน้าที่โดยรับค่า จาก method data() อีกเช่นเคย แต่ว่าจะเอาตัวตำแหน่งที่ 4 แล้วนำมาบวกกับ .ttf เพราะในไฟล์ .txt จะรับมาเฉพาะชื่อ font ไม่มีนามสกุล แล้วก็นำไปใส่แทนค่าใน font_name ในคลาส Option กับ StatusBar ลืมบอกไปว่าในส่วนของ StatusBar ก็มีตัวแปรนี้เช่นกัน 

method bg_color_set()


จะทำหน้าที่เหมือนกับที่ผ่านมาทั้งสองตัว แต่ว่าในส่วนนี้จะเป็นเรื่องของสีพื้นหลัง โดยจะรับค่าจาก method data() จากตำแหน่งตัวที่ 6 แล้วจะใช้ Window.clearcolor =(r,g,b,a) ตั้งค่าสี ตาม keyword ที่กำหนด






















Memo pt.7 (การใส่ฟอนต์ไทย)

ในตอนแรก Memo นั้นจะยังไม่สามารถอ่าน ภาษาไทยได้เลย ต้องทำการหาฟอนต์ที่มันอ่านภาษาไทยได้มาลง  ก็เลยได้ไปหา มา แล้วยังมีเพื่อนผู้แสนดี แนะนำมาว่า มันสวยมาก ก็เลยลองนำมาใช้ดู นั้นคือ font ที่มีชื่อว่า WareeSans
ซึ่ง ถ้ายังไม่ได้เปลี่ยน font มันก็จะอ่านภาษาไทยเป็นรูปสี่เหลียมๆ แต่เมื่อทำการเปลี่ยน โดยวิธีการเปลี่ยน font นั้นก็คือ นำ font ที่เราต้องการไปใส่ในโฟลเดอร์ไฟล์งานก่อน แบบนี้

ส่วนใน py กับ kv จากปกติ จะใช้คำสั่ง

font_name="Waree" (Python)

font_name:"Waree" (Kivy)

ซึ่ง Waree เป็น font ที่มีอยู่บน Linux อยู่แล้ว แต่ถ้าหากนำไปรันที่ os อื่นอาจจะเกิดปัญหาได้ เราจึงต้องใส่ WareeSans ที่เป็น font ที่สามารถ โหลดได้ฟรี แบบถูก กม. มาใช้  แล้วใส่ลงในโฟลเดอร์งาน ตามที่ได้กล่าวไปแล้วสักครู่ 

โดยเวลาเรียกใช้ก็จะเปลี่ยนจากปกติเป็น

font_name="WareeSans.ttf" (Python)

font_name:"WareeSans.ttf" (Kivy)

ซึ่งกรณีนี้เป็นการเรียกใช้แบบ กรณีที่ ไฟล์ font เราไม่ได้อยู่ในโฟลเดอร์ ถ้าหากอยู่ใน โฟลเดอร์เราก็ต้องใช้เป็น

font_name = './folder/WareeSans.ttf'  (Python)


font_name: './folder/WareeSans.ttf' (Kivy)

หรือ ก็คือต้องมีการกำหนด path ให้กับมันด้วย (Credit:Sarik Kampan)


วันอาทิตย์ที่ 13 พฤศจิกายน พ.ศ. 2559

Memo pt.6 (delete files)

4. Delete File

        มีการเรียกใช้ method delete_box() เมื่อมีการกดและปล่อยปุุ่ม


        ใน method ดังกล่าวจะมีการใช้คำสั่ง ของ os คือ os.remove() โดยจะทำการลบไฟล์ที่ self.desk.filechooser.selection[0] หรือ ก็คือตัวที่ถูกเลือกอยู่นั้นเอง หลังจากนั้น จะมีการเด้งหน้าต่างขึ้นมาเพื่อสอบถามความแน่ใจ ว่าจะลบจริงหรือไม่ และ ชื่อไฟล์ที่จะลบใช่ชื่อนี้ไหม ลบถูกแน่นะ แล้วจะมีส่งค่าไปให้กับทาง status bar เพื่อ update ค่าอีกด้วย