วันอังคารที่ 22 กันยายน พ.ศ. 2558

Chapter 4 : Improving the User Experience

ใน chapter นี้จะอธิบายในส่วนที่ Kivy มีไว้ช่วยให้นักโปรแกรมเมอร์ สามารถพัฒนา User Experince ซึ่งจะเกี่ยวข้องกับ widget ที่เฉพาะเจาะจง

สรุปสิ่งที่เราจะได้เรียนรู้ ;

- สับเปลี่ยนไปมาระหว่าง screens ที่แตกต่างกัน
- การใช้ pre-build complex widgets เพื่อที่จะเลือกสี
- การควบคุม พื้นที่ของ Canvas
- หมุน และขยายด้วย  multi-touch gestures 
- สร้าง single gestures เพื่อวาด screen

Screen manager – selecting colors for the figures

ScreenManager class คือส่วนที่ให้เราจัดการกับ screen ต่างๆ ใน window เดียวกันได้ ซึ่งในส่วนนี้ User จะเป็นคนเพิ่มสีเองได้ Kivy เตรียม widget ที่ชื่อว่า ColorPicker ดังรูปต่อไปนี้


ปัญหาที่เราพบคือ widget นี้กินพื้นที่มาก จึงไม่เหมาะกับ interface ของเราเลย เราจึงจะใช้ ScreenManager ในการแก้ปัญหานี้ ให้เราสร้างไฟล์ kivy ขึ้นมา ชื่อว่า comicscreenmanager มีโค้ดดังนี้


ในบรรทัดที่ 5 มีการเรียกใช้ ColorPicker 
และเราก็ต้องมีไฟล์ kivy อีกไฟล์ชื่อว่า comiccreator มีโค้ดดังนี้


นอกจากนี้เราต้องไปแก้โค้ดใน Chapter 3, Widget Events – Binding Actions ในส่วนที่เราจะระบุ ColorPicker Screen ด้วยชื่อ colorscreen เพื่อเริ่มการใช้ ColorPicker ให้แก้โค้ดตรงที่  method of generaloptions.py

ทีนี้เราก็ปุ่ม Color เพื่อสลับ Screen ให้แสดง ColorPicker

ComicScreenManager ได้กลายมาเป็น Widget หลัก ของ comic creator project ดังนั้น ไฟล์ comicreator.py  ควรจะเปลี่ยนตามนี้

เมื่อเปลี่ยนเสร็จแล้ว เราสามารถสลับไปมา 2  screens ระหว่าง ColorPicker และ ComicCreator

Color Control on the canvas – coloring figures 

เมื่อซักครู่เราได้เรียนวิธีการเลือกสีไปแล้ว ต่อมาเราจะใช้สีที่เลือกใส่ให้กับ elements ใน widget นั้นๆ
ศึกษาจากตัวอย่างต่อไปนี้


ใน Label จะมี properties หนึ่งชื่อว่า color เราเปลี่ยน color ตรงนี้ให้เป็นสีแดง ดูผลลัพท์


ใน Label เราเรียก color ให้เป็นสีแดง Line จึงเป็นสีแดง แต่มันกลับใส่สีแดงให้กับ  Line ใน widget ด้วย
สามารถแก้ปัญหาด้วย 3 เมธอดนี้ ในไฟล์ toolbox.py

• Method draw in ToolStickman:

• Method draw (class ToolFigure): 

• Method widgetize (class ToolFigure): 

จะเห็นว่าทั้งสามเมธอดมีโค้ดส่วนที่ไปดึง ค่า ColorPicker ไปใส่เป็น Color instruction ให้กับ canvas




ไม่มีความคิดเห็น:

แสดงความคิดเห็น