Implementationand Case Study

ผนวกเดช สุวรรณทัต (Mock)

Kasetsart University Sriracha Campus

Human-Computer Interactions 4 March 2015Lecture 7

http://www.philsimon.com/blog/trends/why-time-warner-and-comcast-are-scared/ http://qt-project.org

HCI - Lecture 8 - Implementation and Case StudyUI Implementation → is hard

• ปัจจุบันมี platform มากมาย • แต่ละ platform มี “วัฒนธรรม” ของตนเอง • เปรียบเสมือน “ต่างประเทศ” ที่มีทั้งภาษา และ วัฒนธรรม เฉพาะตน

http://www.scanbuku.com/travel/ http://qt-project.org

HCI - Lecture 8 - Implementation and Case StudyUI Implementation → is fun!

• หลักการพื้นฐาน คล้ายกันมาก! • เช่น paint models, event models

• มีเครื่องมือช่วยออกแบบ cross-platform • เปลี่ยนภาษาไม่ยาก ถ้าเข้าใจหลักการ

adapted from Alan Dixhttp://www.betaarchive.com/wiki/index.php?title=Microsoft_Windows http://www.polyvore.com/apple_mac_logo_clipped_bella/thing?id=26983362 http://blog.lastlog.de/posts/ubuntu-14.04-apt_problems/ http://www.makeuseof.com/tag/if-youre-not-using-siri-by-now-you-should-be/ https://sites.google.com/site/tic2014it/tema-2-sistema-operativos

HCI - Lecture 8 - Implementation and Case StudyUI Implementation → different kinds of UIs

User Interface ชนิดต่างๆ

ฯลฯ

Graphic UI

Command Line UIVoice UI

• haptic • mixed • direct brain • AR (augmented reality) • web/mobile/…

http://buckitmedia.com/will-intels-realsense-will-finally-change-the-user-interface/

HCI - Lecture 8 - Implementation and Case Study

GUI หน้าตาเป็นอย่างไรUI Implementation → GUI

W I

M P

windowiconmenupointer

http://buckitmedia.com/will-intels-realsense-will-finally-change-the-user-interface/ http://www.communication360.it/voltaren/voltaren-salep-adalah/

HCI - Lecture 8 - Implementation and Case Study

GUI หน้าตาเป็นอย่างไรUI Implementation → GUI

W I

M P

windowiconmenupointer

+

http://igugagames.blogspot.com/2012/08/download-mario-kart-wii-torrent.html :

HCI - Lecture 8 - Implementation and Case Study

GUI หน้าตาเป็นอย่างไรUI Implementation → GUI

http://www.yuyellowpages.net/xbox-360-kinect-games-list.htm :

HCI - Lecture 8 - Implementation and Case Study

GUI หน้าตาเป็นอย่างไรUI Implementation → GUI

http://buckitmedia.com/will-intels-realsense-will-finally-change-the-user-interface/ http://www.macrumors.com/2014/10/13/apple-releases-sixth-os-x-yosemite-public-beta/ http://aracama.deviantart.com/art/GUI-Pioneer-CDJ-1000-MK3-204524638

HCI - Lecture 8 - Implementation and Case Study

Focus: WIMP มาตรฐาน + ประกอบเองUI Implementation → GUI

มาตรฐานประกอบเอง

http://www.clipartpanda.com/categories/outside-window-clipart http://www.miami.edu/index.php/professional_development__training_office/learning/leadership_toolkit/ http://design.tutsplus.com/tutorials/creating-a-set-of-digital-painting-icons-part-3-paint-brush-icon--psd-5663 http://www.freecadweb.org/wiki/index.php?title=Mouse_Model/sv

HCI - Lecture 8 - Implementation and Case Study

องค์ประกอบสำคัญของการเขียน GUI (ไม่ใช่แค่ WIMP)

UI Implementation → important components

window system toolkit

paint models event models

a

HCI - Lecture 8 - Implementation and Case Study

windowing system ให้อะไรกับเรา?Windowing System

window system

1. device independenceความเป็นอิสระจากอุปกรณ์

2. resource sharingแบ่งปันทรัพยากร

3. application management การบริหารจัดการโปรแกรม

adapted from Alan Dix

image from Alan Dix

HCI - Lecture 8 - Implementation and Case Study

windowing system ให้อะไรกับเรา?Windowing System → device independence

window system

1. device independenceความเป็นอิสระจากอุปกรณ์

adapted from Alan Dix

• ขนาดของหน้าจอ• ชนิดอินพุต (mouse,

joystick, trackpad) • การจัดเรียงคีย์บอร์ด

HCI - Lecture 8 - Implementation and Case Study

windowing system ให้อะไรกับเรา?

window system

1. device independenceความเป็นอิสระจากอุปกรณ์

adapted from Alan Dix

• ขนาดของหน้าจอ • ชนิดอินพุต (mouse,

joystick, trackpad)• การจัดเรียงคีย์บอร์ด

http://onlinemca.com/mca_course/kurukshetra_university/semester5/computergraphics/joy_stick.php https://www.apple.com/magictrackpad/ http://mashable.com/2010/09/26/evolution-apple-mouse/ http://blog.laptopmag.com/looking-for-nub-best-and-worst-notebook-pointing-sticks http://www.amazon.com/Logitech-904346-0403-Cordless-TrackMan-Wheel/dp/B00004VUGJ

Windowing System → device independence

HCI - Lecture 8 - Implementation and Case Study

windowing system ให้อะไรกับเรา?

window system

adapted from Alan Dix

• ขนาดของหน้าจอ • ชนิดอินพุต (mouse,

joystick, trackpad) • การจัดเรียงคีย์บอร์ด

http://www.alexlockhart.com/dvorak.html

Windowing System → device independence

1. device independenceความเป็นอิสระจากอุปกรณ์

HCI - Lecture 8 - Implementation and Case Study

windowing system ให้อะไรกับเรา?

window system

1. device independenceความเป็นอิสระจากอุปกรณ์

adapted from Alan Dix

abstraction ระดับต่างๆ

Operating System: hardware interface, device drivers

Windowing System: abstract เมาส์ คีย์บอร์ด จอภาพ (ระบบ pixel, ระบบ vector, ระบบ 3D graphics)

Toolkit: (e.g. Java AWT) ปุ่ม หน้าต่าง เมนู ฯลฯ

Application: สิ่งที่ผู้ใช้ต้องการทำจริงๆ

Windowing System → device independence

HCI - Lecture 8 - Implementation and Case Study

windowing system ให้อะไรกับเรา?Windowing System → resource sharing

window system

2. resource sharingแบ่งปันทรัพยากร

adapted from Alan Diximages and slide idea from Alan Dix

จอเดียว คีย์บอร์ดเดียว เมาส์เดียว

โปรแกรม เยอะแยะ

ตาคู่เดียว มือคู่เดียว

HCI - Lecture 8 - Implementation and Case Study

windowing system ให้อะไรกับเรา?Windowing System → resource sharing

window system

2. resource sharingแบ่งปันทรัพยากร

adapted from Alan Diximages and diagram from Alan Dix

resource manager

devicedrivers

abstract terminal 1

abstract term. 2

abstract term. 3

abstract term. 4

• แต่ละโปรแกรมเสมือนว่า มีเครื่อง (abstract terminal) เป็นของตัวเอง

• ไม่ต้องแคร์คนอื่น • ระบบช่วยจัดสรรแบ่งปันให้

HCI - Lecture 8 - Implementation and Case Study

windowing system ให้อะไรกับเรา?Windowing System → resource sharing

window system

2. resource sharingแบ่งปันทรัพยากร

adapted from Alan Diximages from Alan Dix

การจัดวางหน้าต่างแบบ

ต่างๆ

แบ่งพื้นที่กัน แบ่งเวลากัน แบ่งพื้นที่และเวลา

HCI - Lecture 8 - Implementation and Case Study

windowing system ให้อะไรกับเรา?Windowing System → resource sharing

window system

2. resource sharingแบ่งปันทรัพยากร

adapted from Alan Diximages from Alan Dix, http://en.wikipedia.org/wiki/History_of_the_graphical_user_interface#mediaviewer/File:Xerox_Star_8010_workstations.jpg

การจัดวางหน้าต่างแบบ

ต่างๆ

แบ่งพื้นที่กันXerox Star (1981)

HCI - Lecture 8 - Implementation and Case StudyWindowing System → resource sharing

adapted from Alan Diximages from Alan Dix, https://youtu.be/J33pVRdxWbw https://youtu.be/2u70CgBr-OI

windowi กา

แ Xe

เกร็ดประวัติศาสตร์

HCI - Lecture 8 - Implementation and Case StudyWindowing System → resource sharing

adapted from Alan Diximages from Alan Dix, https://youtu.be/GqFYsvxHZOs

windowi กา

แ Xe

เกร็ดประวัติศาสตร์

HCI - Lecture 8 - Implementation and Case Study

windowing system ให้อะไรกับเรา?Windowing System → resource sharing

window system

2. resource sharingแบ่งปันทรัพยากร

adapted from Alan Diximages from Alan Dix, http://en.wikipedia.org/wiki/History_of_the_graphical_user_interface#mediaviewer/File:Xerox_Star_8010_workstations.jpg

การจัดวางหน้าต่างแบบ

ต่างๆ

แบ่งพื้นที่กันXerox Star (1981)

HCI - Lecture 8 - Implementation and Case Study

windowing system ให้อะไรกับเรา?Windowing System → resource sharing

window system

adapted from Alan Diximages from Alan Dix, http://www.imagedashboard.com/photoshop-panels-overview/

แบ่งพื้นที่กันXerox Star (1981)

HCI - Lecture 8 - Implementation and Case Study

windowing system ให้อะไรกับเรา?Windowing System → resource sharing

window system

2. resource sharingแบ่งปันทรัพยากร

adapted from Alan Diximages from Alan Dix, http://pixshark.com/galaxy-gear-watch-colors.htm http://lumiaconversations.microsoft.com/2012/08/06/nokia-drives-offline-maps-going-places-with-engadget/

การจัดวางหน้าต่างแบบ

ต่างๆ

แบ่งเวลากัน

HCI - Lecture 8 - Implementation and Case Study

windowing system ให้อะไรกับเรา?Windowing System → resource sharing

window system

2. resource sharingแบ่งปันทรัพยากร

adapted from Alan Diximages from Alan Dix, http://en.wikipedia.org/wiki/Microsoft_Windows

การจัดวางหน้าต่างแบบ

ต่างๆ

แบ่งพื้นที่และเวลา

HCI - Lecture 8 - Implementation and Case Study

windowing system ให้อะไรกับเรา?Windowing System → resource sharing

window system

2. resource sharingแบ่งปันทรัพยากร

adapted from Alan Diximages from Alan Dix, http://driverlayer.com/img/aaa%20battery/20/any http://www.gmv.com/blog_gmv/market-importance-4g/ http://news.thaivisa.com/thaivisa-news/some-100-one-baht-coins-used-as-bait-for-stealing-from-victims-car/7306/

ไม่ใช่แค่เรื่องพื้นที่!

HCI - Lecture 8 - Implementation and Case Study

windowing system ให้อะไรกับเรา?Windowing System → application management

window system

3. application management การบริหารจัดการโปรแกรม

adapted from Alan Diximages from Alan Dix, http://driverlayer.com/img/aaa%20battery/20/any

ความเสมอต้นเสมอปลาย

การใช้ข้อมูลร่วมกันระหว่างโปรแกรม

UI ช่วยสับราง

HCI - Lecture 8 - Implementation and Case Study

windowing system ให้อะไรกับเรา?Windowing System → application management

window system

3. application management การบริหารจัดการโปรแกรม

adapted from Alan Diximages from Alan Dix, http://www.javalobby.org/java/forums/t94729.html

ความเสมอต้นเสมอปลาย

HCI - Lecture 8 - Implementation and Case Study

windowing system ให้อะไรกับเรา?Windowing System → application management

window system

3. application management การบริหารจัดการโปรแกรม

adapted from Alan Diximages from Alan Dix, http://driverlayer.com/img/aaa%20battery/20/any http://www.fixedbyvonnie.com/2014/08/drag-drop-folders-complete-command-line-text-windows-8/ http://computers.tutsplus.com/tutorials/10-awesome-uses-for-automator-explained--mac-15845

การใช้ข้อมูลร่วมกันระหว่างโปรแกรม

HCI - Lecture 8 - Implementation and Case Study

windowing system ให้อะไรกับเรา?Windowing System → application management

window system

3. application management การบริหารจัดการโปรแกรม

adapted from Alan Diximages from Alan Dix, http://itknowledgeexchange.techtarget.com/windows-admin-tips-tricks/showing-the-folder-size-as-a-column-in-windows-explorer/ http://www.ntwind.com/software/vistaswitcher/new-alt-tab.html http://9to5google.com/2012/05/15/a-first-look-at-the-htc-desire-c-video/htc-desire-c-home-screen-1/

UI ช่วยสับราง

HCI - Lecture 8 - Implementation and Case Study

สถาปัตยกรรม 3 รูปแบบ ของ Windowing System

Windowing System → architectures

window system

adapted from Alan Dixhttp://seniortechdaily.com/the-best-gps-devices-for-seniors/ http://www.theinquirer.net/inquirer/feature/2373130/theres-more-to-windows-10-than-miscounting http://logo-kid.com/mac-apple-logo.htm http://en.wikipedia.org/wiki/XQuartz

• ลักษณะร่วมกัน: device driver แยกออกต่างหาก • สิ่งที่แตกต่าง: ตำแหน่งของระบบจัดการ

App สามัคคี• ทุก app รับหน้าที่

• แบ่งปันทรัพยากร • ส่งต่อข้อมูล clipboard

• ทุกคนร่วมรับผิดชอบ • ฝันร้ายของ developer • ประสิทธิภาพสูง สำหรับ

อุปกรณ์ง่ายๆ

OS จัดการให้• ระบบจัดการ window

ผูกติดกับ OS • แต่ละ application รับ

ผิดชอบแค่ window ของตนเอง

window manager• ระบบจัดการ window

แยกออกต่างหากเป็น อีกหนึ่ง application

• win manager และ app อาจอาศัยอยู่คนละเครื่อง

HCI - Lecture 8 - Implementation and Case Study

สถาปัตยกรรม 3 รูปแบบ ของ Windowing System

Windowing System → architectures → X11

window system

adapted from Alan Dixhttp://seniortechdaily.com/the-best-gps-devices-for-seniors/ http://www.theinquirer.net/inquirer/feature/2373130/theres-more-to-windows-10-than-miscounting http://logo-kid.com/mac-apple-logo.htm http://en.wikipedia.org/wiki/XQuartz

• ลักษณะร่วมกัน: device driver แยกออกต่างหาก • สิ่งที่แตกต่าง: ตำแหน่งของระบบจัดการ

window manager• ระบบจัดการ window

แยกออกต่างหากเป็น อีกหนึ่ง application

• win manager และ app อาจอาศัยอยู่คนละเครื่อง

X Windows หรือ X11

HCI - Lecture 8 - Implementation and Case Study

ไม่ใช่แค่สำหรับ PCWindowing System → beyond PC

window system

adapted from Alan Dixhttp://ww.itimes.com/poll/smart-phone-54afc2154c709/result

คอนเซ็ปต์ของ windowing system จำเป็นสำหรับ • โทรศัพท์• website, web application • อุปกรณ์ต่างๆ (ทีวี, ไมโครเวฟ, หน้าปัดรถยนต์, ฯลฯ)

• ความต้องการคล้ายๆ กับ PC • การใช้จอ, อินพุตร่วมกัน • ความเสมอต้นเสมอปลาย

• มักจะเป็น full-screen app(จริงเหรอ?)

• ไม่มีหน้าต่างซ้อนทับกัน(น่าจะจริง?)

HCI - Lecture 8 - Implementation and Case Study

ไม่ใช่แค่สำหรับ PCWindowing System → beyond PC

window system

adapted from Alan Dixhttp://www.komando.com/cool-sites/7781/see-if-your-browser-needs-updating/all https://play.google.com/store/apps/details?id=com.facebook.katana

คอนเซ็ปต์ของ windowing system จำเป็นสำหรับ • โทรศัพท์• website, web application • อุปกรณ์ต่างๆ (ทีวี, ไมโครเวฟ, หน้าปัดรถยนต์, ฯลฯ)

• web browser ทำหน้าที่เป็น window manager

• windows, tabs, DOM (Document Object Model)

• ใช้ข้อมูล, หน้าจอ ร่วมกัน • บางเว็บทำหน้าที่เป็น platform (เช่น

facebook) สำหรับ micro-app

HCI - Lecture 8 - Implementation and Case Study

ไม่ใช่แค่สำหรับ PCWindowing System → beyond PC

window system

adapted from Alan Dixhttp://www.komando.com/cool-sites/7781/see-if-your-browser-needs-updating/all https://play.google.com/store/apps/details?id=com.facebook.katana

คอนเซ็ปต์ของ windowing system จำเป็นสำหรับ • โทรศัพท์• website, web application • อุปกรณ์ต่างๆ (ทีวี, ไมโครเวฟ, หน้าปัดรถยนต์, ฯลฯ)

• บางอุปกรณ์ ให้เขียนโปรแกรมควบคุม hardware โดยตรง

• บางอุปกรณ์ ให้เขียนโปรแกรมผ่านภาษาที่ดัดแปลงเฉพาะ เช่นJava, Windows CE

http://www.clipartpanda.com/categories/outside-window-clipart http://www.miami.edu/index.php/professional_development__training_office/learning/leadership_toolkit/ http://design.tutsplus.com/tutorials/creating-a-set-of-digital-painting-icons-part-3-paint-brush-icon--psd-5663 http://www.freecadweb.org/wiki/index.php?title=Mouse_Model/sv

HCI - Lecture 8 - Implementation and Case Study

องค์ประกอบสำคัญของการเขียน GUI (ไม่ใช่แค่ WIMP)

UI Implementation → important components

window system toolkit

paint models event models

http://en.wikipedia.org/wiki/Microsoft_Silverlight http://www.toolsqa.com http://www.guidetolearn.com/courses/79-79-mastering-mfc-fundamentals-using-microsoft-visual-c.aspx https://developer.apple.com/technologies/mac/cocoa.html http://fr.wikipedia.org/wiki/Qt_Development_Frameworks http://en.wikipedia.org/wiki/GTK%2B

HCI - Lecture 8 - Implementation and Case Studytoolkit → examples

toolkit

AWT and Swing

Apple Cocoa

GTK+

http://dict.longdo.com/search/widget http://www.java-forums.org/awt-swing/55278-how-design-palette-similar-netbeans.html http://www.datadisk.co.uk/html_docs/java/layout_managers.htm http://www.vtagion.com/copy-paste-pc-vsphere-virtual-machines/

HCI - Lecture 8 - Implementation and Case Studytoolkit → what they provide

toolkit

Toolkit ให้อะไรกับเราบ้าง? widgets (ปุ่มเปิ่ม)

ทั้ง input และ output

adapted from Alan Dix

layout support (การจัดวางสิ่งของบนหน้าจอ)

สำหรับหน้าต่างที่เปลี่ยนขนาดได้

higher-level abstraction (นามธรรมขึ้นไปอีก!)

เขียน code ง่ายขึ้น • ลดรายละเอียดที่ต้องพิจารณา

• ทำให้เป็น OOP

portable มากขึ้น

• version ใหม่ของ platform เดิม

• เปลี่ยน platform (Java, Qt, .NET?)

http://dict.longdo.com/search/widget http://www.java-forums.org/awt-swing/55278-how-design-palette-similar-netbeans.html http://www.datadisk.co.uk/html_docs/java/layout_managers.htm http://www.vtagion.com/copy-paste-pc-vsphere-virtual-machines/

HCI - Lecture 8 - Implementation and Case Studytoolkit → what they provide

toolkit

Toolkit ให้อะไรกับเราบ้าง?

adapted from Alan Dix

higher-level abstraction (นามธรรมขึ้นไปอีก!)

เพื่อ consistency (ความเสมอต้นเสมอปลาย)

• ในแง่ look and feel • ในแง่ interaction

http://www.clipartpanda.com/categories/outside-window-clipart http://www.miami.edu/index.php/professional_development__training_office/learning/leadership_toolkit/ http://design.tutsplus.com/tutorials/creating-a-set-of-digital-painting-icons-part-3-paint-brush-icon--psd-5663 http://www.freecadweb.org/wiki/index.php?title=Mouse_Model/sv

HCI - Lecture 8 - Implementation and Case Study

องค์ประกอบสำคัญของการเขียน GUI (ไม่ใช่แค่ WIMP)

UI Implementation → important components

window system toolkit

paint models event models

http://knowyourmeme.com/memes/draw-me-like-one-of-your-french-girls

HCI - Lecture 8 - Implementation and Case Studypaint model

Paint Model สำหรับวาดหน้าจอ

adapted from Alan Dix

paint models

• ไม่ต้องแคร์ ถ้าเราใช้แต่ widget มาตรฐาน • ต้องแคร์ ถ้าเราต้องการวาดรูปเอง

• games, map, etc • scientific visualization

วาดอะไร

วาดเมื่อไร?

วาดแล้วเกิดอะไรขึ้น?

diagram from Alan Dix

HCI - Lecture 8 - Implementation and Case Study

Paint Model สำหรับวาดหน้าจอ

adapted from Alan Dix

paint models

• application วาดสิ่งที่ต้องการวาด • วาดลงหน้าจอโดยตรง หรือว่าลง buffer? • วาดลงตำแหน่งสัมพัทธ์กับหน้าต่าง หรือหน้าจอ? • ลงมือวาดเอง หรือแค่บอกสิ่งที่อยากวาด?

paint model

> cat fred.txtThis is frd.txt> lsfred.txt tom.txtharry.c dick.java

screen

void main() {Frame f = new Frame();f.show()}

your code

your application

toolkit layer(s)

AWTSwing

other application(s)> cat fred.txtThis is frd.txt> lsfred.txt tom.txtharry.c dick.java

http://www.clipartsfree.net/clipart/10194-halftone-gradient-large-screen-clipart.html

HCI - Lecture 8 - Implementation and Case Study

Paint Model สำหรับวาดหน้าจอ

adapted from Alan Dix

paint models

• application วาดสิ่งที่ต้องการวาด • วาดลงหน้าจอโดยตรง หรือว่าลง buffer? • วาดลงตำแหน่งสัมพัทธ์กับหน้าต่าง หรือหน้าจอ? • ลงมือวาดเอง หรือแค่บอกสิ่งที่อยากวาด?

paint model

วาดบนหน้าจอโดยตรง

วาดบนจอผ่าน viewport

วาดลง buffer

เขียน display list

http://stackoverflow.com/questions/19570812/jogl-swing-does-not-initialize-properly

HCI - Lecture 8 - Implementation and Case Study

Paint Model สำหรับวาดหน้าจอ

adapted from Alan Dix

paint models

• application วาดสิ่งที่ต้องการวาด • วาดลงหน้าจอโดยตรง หรือว่าลง buffer? • วาดลงตำแหน่งสัมพัทธ์กับหน้าต่าง หรือหน้าจอ? • ลงมือวาดเอง หรือแค่บอกสิ่งที่อยากวาด?

paint model

วาดบนหน้าจอโดยตรง

วาดบนจอผ่าน viewport

วาดลง buffer

เขียน display list

putPixel(510, 110);

(500, 100)

http://www.clipartsfree.net/clipart/10194-halftone-gradient-large-screen-clipart.html

HCI - Lecture 8 - Implementation and Case Study

Paint Model สำหรับวาดหน้าจอ

adapted from Alan Dix

paint models

• application วาดสิ่งที่ต้องการวาด • วาดลงหน้าจอโดยตรง หรือว่าลง buffer? • วาดลงตำแหน่งสัมพัทธ์กับหน้าต่าง หรือหน้าจอ? • ลงมือวาดเอง หรือแค่บอกสิ่งที่อยากวาด?

paint model

วาดบนหน้าจอโดยตรง

วาดบนจอผ่าน viewport

วาดลง buffer

เขียน display list

putPixel(10, 10);

(500, 100)

• coordinate

transformation

(แปลงพิกัด)

• clipping

(ตัดส่วนที่ไม่เห็น

)

• เช่น Java AWT

http://www.clipartlord.com/category/home-clip-art/computers-clip-art/page/4/ http://lessonsfromeducators.com/paint-with-a-broad-brush/

HCI - Lecture 8 - Implementation and Case Study

Paint Model สำหรับวาดหน้าจอ

adapted from Alan Dix

paint models

• application วาดสิ่งที่ต้องการวาด • วาดลงหน้าจอโดยตรง หรือว่าลง buffer? • วาดลงตำแหน่งสัมพัทธ์กับหน้าต่าง หรือหน้าจอ? • ลงมือวาดเอง หรือแค่บอกสิ่งที่อยากวาด?

paint model

วาดบนหน้าจอโดยตรง

วาดบนจอผ่าน viewport

วาดลง buffer

เขียน display list

• double bufferช่วยลดภาพสั่น

• retained bitmap

ไม่ต้องวาดใหม่เมื่อถูกทับแล้วเปิดออก

• เช่น Java swing

http://www.clipartsfree.net/clipart/10194-halftone-gradient-large-screen-clipart.html

HCI - Lecture 8 - Implementation and Case Study

Paint Model สำหรับวาดหน้าจอ

adapted from Alan Dix

paint models

• application วาดสิ่งที่ต้องการวาด • วาดลงหน้าจอโดยตรง หรือว่าลง buffer? • วาดลงตำแหน่งสัมพัทธ์กับหน้าต่าง หรือหน้าจอ? • ลงมือวาดเอง หรือแค่บอกสิ่งที่อยากวาด?

paint model

วาดบนหน้าจอโดยตรง

วาดบนจอผ่าน viewport

วาดลง buffer

เขียน display listcircle1 = …;circle2 = …;curve1 = …;panel.add( {circle1, circle2, curve1});

• app ไม่วาดเอง • แต่เขียนรายการ

สิ่งของที่อยากวาด • เส้น, วงกลม, ภาพ,

สี, ตำแหน่ง • toolkit เอาไปวาด

ให้ • เช่น OpenGL,

JS-DOM

Illustration from Alan Dix

HCI - Lecture 8 - Implementation and Case Study

adapted from Alan Dix

paint models

• buffer มีวิธีการนำไปใช้ 3 ระดับ

• แต่ละระดับ มีข้อดีข้อเสียต่างกันในแง่ความเร็ว

• ความเร็วในการวาด VS ความจำเป็นในการวาดซ้ำ

paint model → buffering

การใช้ buffer ใน toolkit หรือ WM(window manager)

Illustration from Alan Dix

HCI - Lecture 8 - Implementation and Case Study

adapted from Alan Dix

paint models

Non-retained• วาดเท่าที่จำเป็น • ไม่วาดในส่วนที่ถูกบัง • วาดครั้งแรก เร็วที่สุด • แต่ต้องวาดซ้ำเมื่อ

หน้าต่างที่บังถูกเคลื่อนออกไป

paint model → buffering → non-retained

การใช้ buffer ใน toolkit หรือ WM(window manager)

Illustration from Alan Dix

HCI - Lecture 8 - Implementation and Case Study

adapted from Alan Dix

paint models

Retained• วาดทั้งหน้าต่าง • วาดส่วนที่ถูกบังลงบน

buffer • วาดครั้งแรกไม่เร็วมาก

(เสียเวลาวาดส่วนที่ไม่เห็น) • เมื่อหน้าต่างที่บังถูก

เคลื่อนออกไป สามารถวาดใหม่ได้เร็ว (app ไม่ต้องวาด, WM วาดให้)

paint model → buffering → retained

การใช้ buffer ใน toolkit หรือ WM(window manager)

Illustration from Alan Dix

HCI - Lecture 8 - Implementation and Case Study

adapted from Alan Dix

paint models

Fully buffered• วาดทั้งหน้าต่างลงบน

buffer แล้วจึง copy ส่วนที่มองเห็นมาลงจอ

• วาดครั้งแรก ช้า (ต้องวาดสองรอบ)

• ลดอาการจอสั่น (flicker) และวาดซ้ำได้รวดเร็ว

paint model → buffering → buffered

การใช้ buffer ใน toolkit หรือ WM(window manager)

http://clip.teenee.com/news/35675.html http://siamnaliga.com/index.php?/topic/227110-part-6-รีวิวล่องเรือสำราญยุโรป-วัน/ http://www.posttoday.com/วิเคราะห์/รายงานพิเศษ/225915/ปากคำ-ชัย-ราชวัตร-กับ-ภารกิจสุดท้าย

HCI - Lecture 8 - Implementation and Case Study

adapted from Alan Dix

paint models

paint model → when to draw?

วาดเมื่อไหร่?• ใครเป็นคนสะกิดให้วาด • เหตุการณ์ใดบ้างที่กระตุ้นให้วาด?

internal control external control fixed interval

http://clip.teenee.com/news/35675.html http://siamnaliga.com/index.php?/topic/227110-part-6-รีวิวล่องเรือสำราญยุโรป-วัน/ http://www.posttoday.com/วิเคราะห์/รายงานพิเศษ/225915/ปากคำ-ชัย-ราชวัตร-กับ-ภารกิจสุดท้าย

HCI - Lecture 8 - Implementation and Case Study

adapted from Alan Dix

paint models

paint model → when to draw? → internal control

วาดเมื่อไหร่?• ใครเป็นคนสะกิดให้วาด • เหตุการณ์ใดบ้างที่กระตุ้นให้วาด?

internal control

• app อยากจะวาดเมื่อไหร่ก็วาด

เช่น • วาดเมื่อโหลดข้อมูลเสร็จ

• วาดเมื่อข้อมูลเปลี่ยน

• ใช้ได้ดีกับ display list

• ตอบสนองต่อ external event

ได้ไม่ดี (mouse click, etc)

http://clip.teenee.com/news/35675.html http://siamnaliga.com/index.php?/topic/227110-part-6-รีวิวล่องเรือสำราญยุโรป-วัน/ http://www.posttoday.com/วิเคราะห์/รายงานพิเศษ/225915/ปากคำ-ชัย-ราชวัตร-กับ-ภารกิจสุดท้าย

HCI - Lecture 8 - Implementation and Case Study

adapted from Alan Dix

paint models

paint model → when to draw? → external control

วาดเมื่อไหร่?• ใครเป็นคนสะกิดให้วาด • เหตุการณ์ใดบ้างที่กระตุ้นให้วาด?

external control

• app มีฟังก์ชันชื่อ

paint(...) สำหรับวาด

• แต่ไม่เรียกใช้เอง! • รอให้ toolkit / WM

เรียกเมื่อเวลาเหมาะสม (external event)

• แล้ว internal event ล่ะ? (ถ้า app อยากวาดใหม่ ทำอย่างไร?) • เรียกคำสั่ง repaint() ของ toolkit

http://clip.teenee.com/news/35675.html http://siamnaliga.com/index.php?/topic/227110-part-6-รีวิวล่องเรือสำราญยุโรป-วัน/ http://www.posttoday.com/วิเคราะห์/รายงานพิเศษ/225915/ปากคำ-ชัย-ราชวัตร-กับ-ภารกิจสุดท้าย

HCI - Lecture 8 - Implementation and Case Study

adapted from Alan Dix

paint models

paint model → when to draw? → fixed interval

วาดเมื่อไหร่?• ใครเป็นคนสะกิดให้วาด • เหตุการณ์ใดบ้างที่กระตุ้นให้วาด?

fixed interval

• app วาด frame ละหนึ่งครั้ง • ต.ย. วิดิโอ • ต.ย. game engine • เป็น external control ชนิดหนึ่ง เพราะถูกควบคุมด้วยปัจจัยภายนอก = เวลา • polling model for input(คอยมองหาอินพุตอยู่บ่อยๆ)

http://www.clipartpanda.com/categories/outside-window-clipart http://www.miami.edu/index.php/professional_development__training_office/learning/leadership_toolkit/ http://design.tutsplus.com/tutorials/creating-a-set-of-digital-painting-icons-part-3-paint-brush-icon--psd-5663 http://www.freecadweb.org/wiki/index.php?title=Mouse_Model/sv

HCI - Lecture 8 - Implementation and Case Study

องค์ประกอบสำคัญของการเขียน GUI (ไม่ใช่แค่ WIMP)

UI Implementation → important components

window system toolkit

paint models event models

http://pixshark.com/finger-tap-icon.htm http://www.computercatering.net/Computer_Networking.html http://www.blackboxtoolkit.com/osissues.html

HCI - Lecture 8 - Implementation and Case Study

Event Models

Event Models

event models

input event network event system event

http://herscoop.com/2014/09/03/help-for-overprotective-parents-real-simple/ http://sliceofmidlife.com/category/reading/ http://imgbuddy.com/blue-baby-clipart.asp

HCI - Lecture 8 - Implementation and Case Study

Event Models

Event Models

event models

• การจัดการกับเหตุการณ์ มีสองวิธีหลักๆ • แต่ละวิธี มีข้อดีข้อเสีย • ส่งผลต่อทิศทางการออกแบบ application

read-evaluation loop notification-basedadapted from Alan Dix

http://herscoop.com/2014/09/03/help-for-overprotective-parents-real-simple/ http://sliceofmidlife.com/category/reading/ http://imgbuddy.com/blue-baby-clipart.asp

HCI - Lecture 8 - Implementation and Case Study

Event Models

Event Models

event models

• การจัดการกับเหตุการณ์ มีสองวิธีหลักๆ • แต่ละวิธี มีข้อดีข้อเสีย • ส่งผลต่อทิศทางการออกแบบ application

read-evaluation loop notification-based

adapted from Alan Dix

• แต่ละ app มี infinite loop คอยเช็คว่ามี event เกิดขึ้นหรือไม่?

• ถ้ามี event เกิดขึ้น ก็ตอบสนอง (เรียกฟังก์ชั่นของตนเอง)

• ข้อดี: debug ง่าย • ข้อเสีย: เขียน code

เยอะ

• แต่ละ app บอก toolkit ว่าถ้ามีอะไรเกิดขึ้นให้เรียกฟังก์ชั่นไหน

• app รอเรียกอย่างเดียว • toolkit รับหน้าที่ที่เหลือ • ข้อดี: efficient ถ้ามีหลาย app,

เขียน app ง่าย • ข้อเสีย: debug ยาก

Diagram from Alan Dix. Image from http://crmcog.com/debug-siebel-interfaces-log-input-output/

HCI - Lecture 8 - Implementation and Case Study

Event Models

Event Models → read-evaluation loop

event models

read-evaluation loop

repeat read-event(myevent) case myevent.type type_1: do type_1 processing type_2: do type_2 processing ... type_n: do type_n processing end case end repeat

adapted from Alan Dix

main loop ชัดเจน

debug ง่าย

หน้าที่คือ? เอา input มาใส่ queue

Diagram from Alan Dix, image from http://stackoverflow.com/questions/7574490/how-to-remove-actionperformed-methods-in-netbeans

HCI - Lecture 8 - Implementation and Case Study

Event Models

Event Models → notification based

event models

adapted from Alan Dix

notification-based

void main(String[] args) { Menu menu = new Menu(); menu.setOption(“Save”); menu.setOption(“Quit”); menu.setAction(“Save”,mySave) menu.setAction(“Quit”,myQuit) ... }

int mySave(Event e) { // save the current file }

int myQuit(Event e) { // close down }

ไม่ใช่หน้าที่ ของ app

เขียน app

ได้ง่าย

efficient กว่า

read-eval loop

ถ้า notifier เดียว

บริการหลาย app

screen your code java api

user clicks

repaint sets ‘dirty’ flag

notices dirty flag

waits for more input

…

paint(Graphics g) { // draw things}

component asked to

paint itselfg.fillRect(…)

myListener(…) { // update state repaint();}

AWT invokes Listener

Slide borrowed from Alan Dix

example and image borrowed from Alan Dix

HCI - Lecture 8 - Implementation and Case StudyEvent Models → notification based

event models

adapted from Alan Dix

3 public class AddThem2 implements ActionListener { 4 // code to declare buttons, etc. including: 5 private JButton equalsButton; 6 7 public AddThem2() { 8 // lots of code to create panels, buttons etc. 9 equalsButton = new JButton("="); 10 equalsButton.addActionListener(this); 11 // and more, adding equalsButton to panel, etc. 12 } 13 public void doEquals() { 14 sumField.setText("Just thinking"); 15 String num1str = num1Field.getText(); 16 String num2str = num2Field.getText(); 17 int num1 = Integer.parseInt(num1str); 18 int num2 = Integer.parseInt(num2str); 19 int sum = num1+num2; //**** REAL WORK HERE **** 20 String sumStr = "" + sum; 21 sumField.setText(sumStr); 22 } 23 public void actionPerformed(ActionEvent e) { 24 if ( e.getSource() == equalsButton ) { 25 doEquals(); 26 } 27 } 28 }