Client Interface Programming in C: Direct Manipulation

1357 days ago, 633 views
PowerPoint PPT Presentation
GUI Topics. ComponentsGUI layoutsEventsGraphics ManipulationAnimationDatabasesMVC. Audit. 3 sorts of components in a component\'s API?How to get Events?GUI Layout techniques?When to paint the graphics?How to paint the design?. Direct Manipulation. Definition: (Shneiderman)Visual objectsSelection by pointingRapid, incremental, reversible actionsImmediate, constant feedbackTypical interactio

Presentation Transcript

Slide 1

UI Programming in C#: Direct Manipulation Chris North CS 3724: HCI

Slide 2

GUI Topics Components GUI designs Events Graphics Manipulation Animation Databases MVC

Slide 3

Review 3 sorts of components in a part's API? How to get Events? GUI Layout methods? At the point when to paint the design? How to paint the representation?

Slide 4

Direct Manipulation Definition: (Shneiderman) Visual items Selection by guiding Rapid, incremental, reversible activities Immediate, ceaseless criticism Typical connection succession: 1. select item(s) by point-n-click … (hit testing) 2. follow up on item(s) by drag … (dynamic refresh)

Slide 5

1. Hit Testing Mouse click, mouse over Which speck did client tap on? Utilizing parts: Make each dab a basic segment, similar to a Button Hit testing programmed, every segment is a subwindow Receive occasions from segments, check occasion source rectangular things, not adaptable, acquire from UserControl Using custom design: Get click (x,y) from MouseDown occasion Iterate through information structure, test for hit E.g: if rect.contains(x,y) Data structure for quick query?

Slide 6

2. Dynamic Updating Dragging, extending, … MouseMove occasions Using segments: mouseDown store x,y click in part mouseMove Calculate x,y delta Move segment by delta Using illustrations: (need to delete it, repaint different representation, repaint new thing) Calculate delta, figure new thing area, store Call Refresh( ) Draw new design in Paint occasion

Slide 7

Problem Dynamic control on top of different representation Need to safeguard (redraw) different representation Examples: MacDraw, powerpoint Simple arrangement: Call revive( ) or discredit( ) while dragging Paint( ) occasion reestablishes different design But: in the event that heaps of illustrations, too moderate & blazing!

Slide 8

Problem: Flashing Ugly glimmering when repaint: Paint foundation Redraw shapes

Slide 9

Solution: Double buffering

Slide 10

Solution: Double buffering Double supported repaint: Draw all illustrations in transitory off-screen picture Paint foundation shading Paint shapes Then paint picture to Window Bonus: C# can do this for you! SetStyle(ControlStyles.DoubleBuffer | ControlStyles.UserPaint | ControlStyles.AllPaintingInWmPaint, genuine); control keeps up off-screen picture

Slide 11

More Solutions: Speed Minimize repaint rectangle: this.Invalidate(rect), where rect is territory of control In Paint( ) occasion, prepare just illustrations inside e.ClipRect Modified twofold buffering: keep up support picture for foundation representation Paint picture to screen, then paint manip design XOR painting

Slide 12

Rubber Band (XOR painting) Want multi-determination by extending an elastic band Draw elastic band by reversing pixel hues drawing with XOR once modifies foundation hues drawing with XOR twice comes back to unique look No compelling reason to invigorate( ), quick! /in mouseMove occasion:/delete past rect: ControlPaint.DrawReversibleFrame(rect, Color.Black, FrameStyle.Dashed);/<update rect here in light of mouse x,y>/draw new rect: ControlPaint.DrawReversibleFrame(rect, Color.Black, FrameStyle.Dashed);

Slide 13

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

Slide 14

Software Architecture up until this point… Program State - information structures Paint occasion - show information Interaction occasions - change information