User interface programming in c direct manipulation l.jpg
This presentation is the property of its rightful owner.
Sponsored Links
1 / 20

User Interface Programming in C#: Direct Manipulation PowerPoint PPT Presentation


  • 99 Views
  • Uploaded on
  • Presentation posted in: General

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?

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


User interface programming in c direct manipulation l.jpg

User Interface Programming in C#: Direct Manipulation

Chris North

CS 3724: HCI


Gui topics l.jpg

GUI Topics

  • Components

  • GUI layouts

  • Events

  • Graphics

  • Manipulation

  • Animation

  • Databases

  • MVC


Review l.jpg

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?


Direct manipulation l.jpg

Direct Manipulation

Definition: (Shneiderman)

  • ?

  • ?

  • ?

  • ?


Direct manipulation5 l.jpg

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


Typical interaction sequence l.jpg

Typical interaction sequence

  • select item by point-n-click: Hit testing

  • act on item by drag:Dynamic update

  • release item

MouseDown

MouseMove

MouseUp


1 hit testing l.jpg

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?


  • 2 dynamic updating l.jpg

    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


  • Problem l.jpg

    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!


  • Problem flashing l.jpg

    Problem: Flashing

    • Ugly flashing when repaint:

      • Paint background

      • Redraw shapes


    Solution double buffering l.jpg

    Solution: Double buffering


    Solution double buffering12 l.jpg

    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);


    Notes on doublebuffering in c l.jpg

    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…


  • Slide14 l.jpg

    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.


    More solutions speed l.jpg

    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


  • Rubber band xor painting l.jpg

    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);


    Drag n drop l.jpg

    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));


    Animation l.jpg

    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.


    Event based animation l.jpg

    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


  • Software architecture so far l.jpg

    Software Architecture so far…

    Program State -data structures

    Paint event-display data

    Interaction events

    -modify data


  • Login