โปรแกรมที่ 2 PainPot

โปรแกรมที่ 2 PainPot

วัตถุประสงค์

1.     เพื่อเข้าใจการจัดโครงสร้างหน้าจอ

2.     เข้าใจการใช้งาน Canvas component สำหรับการวาดรูป

3.     เข้าใจการใช้ touch และ drag event

3.1 เกี่ยวกับโปรแกรม PainPot

โปรแกรมจะสามารถโหลดรูป และระบายสีรูปได้ โดยใช้นิ้วมือในการเลือกสี และใช้นิ้วมือในการระบายสีลงรูปภาพ 

3.2 ขั้นตอนการพัฒนาโปรแกรม PainPot ในส่วนออกแบบ

    1)     เข้าไปที่เว็บไซต์ http://ai2.appinventor.mit.edu/

    2)     สร้างโปรเจคใหม่ ตั้งชื่อว่า PainPot

    3)     โหลดไฟล์ที่ใช้ในการสร้างโปรแกรมได้ที www.itbru.com/ai2/week3.zip

    4)     เริ่มต้นให้สร้างปุ่มสีแดง โดยกำหนดค่าดังนี้

·      เปลี่ยนชื่อปุ่มเป็น RedButton โดยกดที่ Rename

·      เปลี่ยนข้อความปุ่มเป็นสีแดง Text : สีแดง

·      เปลี่ยนสีปุ่มให้เป็นสีแดง BackgroundColor : Red

    5)     สร้างปุ่มสีน้ำเงิน

·      เปลี่ยนชื่อปุ่มเป็น BlueButton โดยกดที่ Rename

·      เปลี่ยนข้อความปุ่มเป็นสีน้ำเงิน Text : สีน้ำเงิน

·      เปลี่ยนสีปุ่มให้เป็นสีน้ำเงิน BackgroundColor : Blue

  

    6)     สร้างปุ่มสีเขียว

·      เปลี่ยนชื่อปุ่มเป็น GreenButton โดยกดที่ Rename

·      เปลี่ยนข้อความปุ่มเป็นสีเขียว Text : สีเขียว

·      เปลี่ยนสีปุ่มให้เป็นสีเขียว BackgroundColor : Green

  

    7)     จัดการ Layouts

การจัดเรียนจะแบ่งเป็น แนวตั้ง และ แนวนอน โดยจะเห็นว่าปุ่มทั้งสาม จะเรียงกันแบบ stack คือเรียงจากบนลงล่าง เป็นแนวตั้ง

แต่เราสามารถปรับการจัดวางให้เป็นแบบแนวนอนได้โดยจัดให้เรียงเป็นแถวได้โดย

·      คลิกที่ Layout แล้วเลือก HorizontalArrangement มาไว้ที่หน้าจอ

·      หลังจากนั้น ก็ ลาก ปุ่มทั้งสามสีมาใส่  และจัดให้อยู่กึ่งกลาง

        ดูในส่วนของ Component จะเห็นว่าปุ่มทั้งสาม อยู่ภายใต้ การจัดเรียงแบบHorizontal แล้ว

    8)     เพิ่มส่วนที่จะใช้ในการวาดภาพ  Canvas

·      ที่ Drawing and Animation เลือก Canvas มาวางที่หน้าจอ ตั้งชื่อเป็น DrawingCanvas

·      ปรับความกว้างเป็น Fill parent

·      ปรับความสูงเป็น 300 pixels

·      ปรับ PaintColor เป็นสีแดง

·      BackgroundImage เลือก รูป week3

    9)     สร้างปุ่ม ถ่ายรูป

·      เปลี่ยนชื่อปุ่มเป็น TakePictureButton

    10)                        สร้างปุ่ม ยางลบ

·      เปลี่ยนชื่อปุ่มเป็น WipeButton

    11)                        สร้างปุ่ม เพิ่มขนาด

·      เปลี่ยนชื่อปุ่มเป็น BigButton

12)     สร้างปุ่ม ดลขนาด

·      เปลี่ยนชื่อปุ่มเป็น SmallButton

13)     ที่ media ลาก Camera Compnent มาไว้ที่หน้าจอ

หน้าจอที่แสดงในโทรศัพท์ครับ

  3.3 ขั้นตอนการพัฒนาโปรแกรม PainPot ในส่วนเขียนโปรแกรม

สำหรับการวาดรูปบนหน้าจอ จะมีการทำงานการทำงานอยู่สองส่วนคือ การ touch และการ Drag

    1)     เริ่มต้นที่การเพิ่ม touch Event ก่อนนะครับ เมือเอานิ้วมือไปแตะที่หน้าจอ จะเป็นสร้างจุดวงกลมสีขึ้นมา

·      ตรง Blocks Editor ให้เลือก DrawingCanvas

·     ลาก block DrawingCanvas.Toucher มาวาง

X

  

Y

·      จาก DrawingCanvas เหมือนเดิม ให้ลาก block DrawingCanvas.DrawCircle

centerX และ centerY จะเป็นค่า location

ส่วน radius จะเป็นค่ารัศมี หรือขนาดของวงกลม

·      ลากค่าสำหรับ X และ Y

·      กำหนดค่าให้กับ radius ขนาดของวงกลม

เลือก block Math บนสุด

ใส่ค่า 5

 

ทดสอบโปรแกรม โดยการแตะที่หน้าจอ จะเห็นว่าตรงส่วนที่แตะจะปรากฏจุดสีแดงขึ้นมา

  

    2)     เพิ่ม Drag Event  โดย Drag จะเป็นการลากเพื่อสร้างเส้นสีที่หน้าจอ

·      ตรง Blocks Editor ให้เลือก DrawingCanvas

·      ลาก block DrawingCanvas.Dragged มาวาง

·      ลาก call DrawingCanvas.DrawLine มาใส่

·      ใส่ค่า x1 y1 x2 y2

·      ทดสอบโปรแกรม โดยการ ลากนิ้วที่หน้าจอ จะได้เส้นสีขึ้น

    3)     ทำ ปุ่มเพื่อเปลี่ยนสี สามปุ่ม สามสี

·      เริ่มจากปุ่มสีน้ำเงินก่อน

·      คลิกที่ BlueButton เลือก block BlueButton.Click

·      คลิกที่ DrawingCanvas เลือก block setDrawingCanvas.PaintColor

·      จากนั้นคลิกที่ Color เลือกสีน้ำเงินเอามาใส่ต่อใน block

·      ปุ่มสีแดง และเขียวก็ทำเหมือนกัน

·      ทดสอบการทำงาน

    4)     ทำ ปุ่มยางลบ เพื่อลบสีที่เราระบายไป

·      คลิกที่ WipeButton เลือก block WipeButton.Click

·      คลิกที่ DrawingCanvas เลือก block callDrawingCanvas.clear

     5)     ทำ ปุ่มถ่ายรูป เพื่อนำรูปที่ถ่ายมาใส่แทนรูปเดิม

·      คลิกที่ Camera1 เลือก block whenCamera1.AfterPicture

·      คลิกที่ DrawingCanvas เลือก block setDrawingCanvas.Backgroundimageto

·      นำ get image ด้านบนมาใส่

·      จากนั้น คลิกที่ TakePictureButton เลือก block

when TakePictureButton.Click

·      คลิกที่ Camera1 เลือก block callCamera1.TakePicture

·      ทดสอบโปรแกรม 

    6)     ทำ ปุ่ม เพิ่มขนาด เพื่อเพิ่มขนาดเส้น

·      คลิกที่ BigButton เลือก block BigButton.Click

·      คลิกที่ DrawingCanvas เลือก block setDrawingCanvas.LineWidth

·      คลิกที่ Math เลือกบนสุด ใส่เลข 10 นำไปใส่

    7)     ทำ ปุ่ม ลดขนาด เพื่อ ลดขนาดเส้น

·      คลิกที่ SmallButton เลือก block BSmallButton.Click

·      คลิกที่ DrawingCanvas เลือก block setDrawingCanvas.LineWidth

·      คลิกที่ Math เลือกบนสุด ใส่เลข 5 นำไปใส่

  

แบบฝึกหัดท้ายบท

ให้นักศึกษาพัฒนาโปรแกรมต่อจากเดิม  ดังนี้

    1.     สร้าง ปุ่มสี เพิ่มอีก 3 สี

    2.     สร้างปุ่ม เพิ่มขนาด ของเส้น

โดยเมื่อ กดปุ่มเพิ่มขนาด ขนาดของเส้นจะเพิ่มขึ้น ทีละ 1

    3.     สร้างปุ่ม ลดขนาด ของเส้น

โดยเมื่อ กดปุ่มลดขนาด ขนาดของเส้นจะลดลง ทีละ 1

    4.     ปรับแต่งโปรแกรมให้สวยงาม

ตัวอย่างโปรแกรม

ขอขอบคุณข้อมูลจาก

http://appinventor.mit.edu/

http://kidsangsan.com/

ตัวอย่างโปรแกรม นางสาววัชราภรณ์ ศรียานงค์ นักศึกษาสาขาวิชาเทคโนโลยีสารสนเทศ คณะวิทยาศาสตร์ มหาวิทยาลัยราชภัฏบุรีรัมย์