1 / 20

User Interface Programming in C#: Direct Manipulation

User Interface Programming in C#: Direct Manipulation. Chris North CS 3724: HCI. GUI Topics. Components GUI layouts Events Graphics Manipulation Animation Databases MVC. Review. 3 kinds of elements in a component’s API? How to receive Events? GUI Layout techniques?

malory
Download Presentation

User Interface Programming in C#: Direct Manipulation

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. User Interface Programming in C#: Direct Manipulation Chris North CS 3724: HCI

  2. GUI Topics • Components • GUI layouts • Events • Graphics • Manipulation • Animation • Databases • MVC

  3. Review • 3 kinds of elements in a component’s API? • How to receive Events? • GUI Layout techniques? • When to paint the graphics? • How to paint the graphics?

  4. Direct Manipulation Definition: (Shneiderman) • ? • ? • ? • ?

  5. Direct Manipulation Definition: (Shneiderman) • Visual objects • Selection by pointing • Rapid, incremental, reversible actions • Immediate, continuous feedback Examples: Drag a button, drag graphics, over other graphics

  6. Typical interaction sequence • select item by point-n-click: Hit testing • act on item by drag: Dynamic update • release item MouseDown MouseMove MouseUp

  7. 1. Hit Testing • Mouse down, mouse over • Which dot did user click on? • Using components: • Make each dot a simple component, like a Button • Hit testing automatic, each component is a subwindow • Receive events from components, check event source • rectangular items, not scalable, inherit from UserControl • Using custom graphics: • Get click (x,y) from MouseDown event • Iterate through data structure, test for hit • E.g: if rect.contains(x,y) • Data structure for fast lookup?

  8. 2. Dynamic Updating • Dragging, stretching, … • MouseMove events • Using components: • mouseDown store x,y click in component • mouseMove • Calculate x,y delta • Move component by delta • Using graphics: • (need to erase it, repaint other graphics, repaint new item) • Calculate delta, calculate new item location, store • Call Refresh( ) • Draw new graphics in Paint event

  9. Problem • Dynamic manipulation on top of other graphics • Need to preserve (redraw) other graphics • Examples: MacDraw, powerpoint • Simple solution: • Call refresh( ) or invalidate( ) while dragging • Paint( ) event restores other graphics • But: if lots of graphics, too slow & flashing!

  10. Problem: Flashing • Ugly flashing when repaint: • Paint background • Redraw shapes

  11. Solution: Double buffering

  12. Solution: Double buffering • Double buffered repaint: • Draw all graphics in temporary off-screen image • Paint background color • Paint shapes • Then paint image to Window • Bonus: C# can do this for you! • Form1.DoubleBuffered = true; //VS 2005 • control maintains off-screen image • SetStyle(ControlStyles.DoubleBuffer | //VS 2003 ControlStyles.UserPaint | ControlStyles.AllPaintingInWmPaint, true);

  13. Notes on DoubleBuffering in C# • Form1.DoubleBuffered = true; • Only works for graphics in the Paint event • Graphics drawn in mouse events will not double buffer. • Only works on the component which is set • Setting Form1.DoubleBuffered = true for Form1 will NOT doublebuffer child components like a Panel. • Must set ‘DoubleBuffered=true’ for each component you want buffered. • But…

  14. but… • Can set Form1.DoubleBuffered = true • Cannot set Panel1.DoubleBuffered = true • DoubleBuffered is Protected property • Can only set by Panel class or subclass • Must make Panel subclass: public class MyPanel : Panel { public MyPanel() : base() { this.DoubleBuffered = true; } } • Then use MyPanel component instead of Panel.

  15. More Solutions: Speed • Minimize repaint rectangle: • this.Invalidate(rect), where rect is area of manipulation • In Paint( ) event, process only graphics within e.ClipRect • Modified double buffering: • maintain buffer image for background graphics • Paint image to screen, then paint manip graphics • XOR painting

  16. Rubber Band (XOR painting) • Want multi-selection by stretching a rubber band • Draw rubber band by inverting pixel colors • drawing with XOR once inverts background colors • drawing with XOR twice returns to original look • No need to refresh( ), fast! // in mouseMove event: // erase previous rect: (must use screen coords, not window coords) ControlPaint.DrawReversibleFrame(rect, Color.Black, FrameStyle.Dashed); // <update rect here based on mouse x,y> // draw new rect: ControlPaint.DrawReversibleFrame(rect, Color.Black, FrameStyle.Dashed);

  17. Drag-n-Drop • Drag and Drop API for GUI controls • Supports data transfer DestControl.AllowDrop = True; SourceControl_MouseEvent: this.DoDragDrop(data, DragDropEffects.Copy); DestControl_DragOver(e): e.Effect = DragDropEffects.Copy; DestControl_DragDrop(e): do something with e.Data.GetData(typeof(String));

  18. Animation • Update components/graphics in a loop: for(int i =0; i<100; i++) button2.Left += 10; for(int i =0; i<100; i++) myGraphicX += 10; refresh(); • but? Loops blocks other events.

  19. Event-based Animation • Use a Timer control • Non-visible control, fires a Tick event at specified intervals • Timer1.Interval = 10 //milliseconds • Timer1.Enabled = true //starts animation • in Timer1_Tick( ) event: • Update graphics • Refresh( ) • Timer1.Enabled = false //stops animation • Use doublebuffering

  20. Software Architecture so far… Program State -data structures Paint event-display data Interaction events -modify data

More Related