1CS160 Discussion SectionMatthew KamMay 12, 2003Administrivia• Final project presentations due today(May 12, 2003)• Posters due Wednesday (May 14, 2003)• Final review session– May 15, 2003 (Thursday)– 3 to 5 PM– Location TBA– In view of limited time, email conceptual questions to newsgroup or mattkam@csLooking Ahead• “Why is HCI part of the engineering curriculum?”Looking Ahead• “Why is HCI part of the engineering curriculum?”• My answer: “Because the ultimate goal of any feat of engineering is to improve the human condition, and to do so requires that engineers understand and design for the intended users of technology.”Collaboratories Telemedicine2Distance Education Precision AgricultureLife After CS160• Graduating?– Check out HCI Panel scribe notes for workplace-related informationLife After CS160• Not yet graduating?– Ubiquitous Computing• Fall 2003 CS294-2• Professor Anind K. DeyLife After CS160• Not yet graduating?– Human-Centered Computing• Fall 2003 CS294-8 (graduate class)• Fall 2003 CS294-31 (seminar)• Professor John F. CannyLife After CS160• Not yet graduating?– Experience hands-on HCI research – http://guir.cs.berkeley.edu3CS 160: Lecture 10Professor John CannySpring 2003March 3 Describe image as strokes (w/ color/thickness)+ Line ((10, 4), (17,4), thick 2, red)+ Circle (( 19, 13), radius 3, thick 3, white) Maps to early vector displays & plotters Most UI toolkits have stroked objects* arcs, ellipses, rounded rectangles, etc.Stroke ModelProblems with Stroke Model? How would you represent with strokes? Solution? Pixel Model Break-up complex images into discrete “pixels” & store color for each Resolution* spatial: number of rows by columns+ e.g., 1280 x 1024 is a good monitor display+ quality laser printer: 6000 x 4800 (600 dpi)* image depth (i.e., number of bits per pixel)+ several styles... 8-bit, 24-bit, 32-bitImage DepthBit map - 1 bit/pixel (on/off)* B&W screens or print-outsAliasingSmooth objects (e.g., lines) appear jagged since resolution is too lowAntialiasing - fill-in some jagged places w/ gray scale or primary colors4Anti-Aliasing Pixels colored in proportion to relative amount of line that crosses them. Equivalently, draw the line in B/W at finer resolution and then color each pixel in proportion to number of colored sub-pixels.CleartypeThe pixel matrix for a laptop or LCD screen.CleartypeUse sub-pixel color pixels as though they were gray pixels (can cause color anomalies). Region Model Use the stroke model to outline region Fill the region with* colors & blendings (i.e., patterns) Advantages??* allows representation of filled shapes w/+ little memory+ independence from display resolution Text represented this way & converted to bitmaps inside of the printerOutline FontsUsed by both Postscript & TrueTypeYXCoordinate Systems Device coordinates* coordinates of the display device* origin usually at upper left Window coordinates* toolkit presents window as an abstraction* virtual display with frame around it (title, etc.)* program’s coordinates placed in window as if frame doesn’t exist* like device coords, always expressed in pixels* mouse events may be in device coords - check5Coordinate Systems (cont.) Physical coordinates* pixel-based coords don’t deal well w/ devices of different resolutions (e.g., monitor vs. printer)* specify coordinates in physical units (e.g., inches, centimeters, or printer points) Model coordinates* coordinate system relative to drawn objects* need to convert from model to physical/window coordinates & backEvent-Driven Programming Instead of the user waiting on program, have the program wait on the user All communication from user to computer is done via “events” An eventis something “interesting” that happens in the system* mouse button goes down* item is being dragged* keyboard button was hitCS 160: Lecture 11Professor John CannySpring 2003March 10Event-Driven ProgrammingMouseSoftwareKeyboardSoftwareEvent QueueAll generated events go to a single event queue* provided by operating system* ensures that events are handled in the order they occurred* hides specifics of input from appsWidgetsButtonRadioButtonRadioButtonTextAreaComboBoxCheckBoxReusable interactive objectsHandle certain events* widgets say what events they are interested in* event queue/interactor tree sends events to the “right” widgetUpdate appearance* e.g. button up / button downComboBoxButtonButtonWidgets (cont.)ButtonRadioButtonRadioButtonTextAreaComboBoxGenerate some new events* “button pressed”* “window closing”* “text changed”But these events are sent to interested listeners instead* custom code goes thereComboBoxCheckBox6Main Event Loopwhile (app is running) {get next eventsend event to right widget}MouseSoftwareEventsSourceCode//// See bottom of file for software licensepackage ed u.berk eley .guir .lib. sati n;import j ava .a wt. *;import java.awt.e vent.*;import edu.berkeley .guir.l ib.s atin.obj ects.*;/*** Satin constants.** <P>* This software is distributed unde r the * <A HREF="http://guir.cs.berkeley.edu/projects/COPYRIGHT.txt">* </PRE>** @version SATIN-v2.1-1.0.0, Aug 11 2000*/public interface SatinConstants{//===========================================================================//=== GLOBAL SATIN PROPERTIES ===========================================/*** The name of Satin's properties file. Assumed to be in the current* directory, from which Satin is started (via the java interpreter).*/public static final String SATIN_PROPERTIES_FILENAME = "satin.properties";//=== GLOBAL SATIN PROPERTIES ===========================================//===========================================================================//===========================================================================//=== STYLE PROPERTIES ==================================================//// If you add any new Style properties, be sure to upda te the//// Style.javafile too.public static final String KEY_STYLE_FILLCOLOR = "FillColor";public static final String KEY_STYLE_FILLTRANSPARENCY = "FillTransparency";public static final String KEY_STYLE_MITERLIMIT = "MiterLimit";public sta tic f ina l Str ing KE Y_STYLE_ DASHARR AY = "DashArray ";public sta tic f ina l Str ing KE Y_STYLE_ DASHPHAS E = "DashPhas e";//=== STYLE PROPERTIES
View Full Document
Unlocking...