Java Direct Manipulation Chris North cs3724: HCI.

Slides:



Advertisements
Similar presentations
Image Navigator Help Session. Review Graphics2D class for drawing shapes in a component – paintComponent(Graphics g) – Graphics2D g2 = (Graphics2D)g;
Advertisements

2D Graphics Drawing Things. Graphics In your GUI, you might want to draw graphics E.g. draw lines, circles, shapes, draw strings etc The Graphics class.
Web Design & Development Lecture 19. Java Graphics 2.
Mouse Listeners We continue our examination of GUIs by looking at how to interact with the mouse –Just as Java creates Events when the user interacts with.
Graphics Programming. Introduction GOAL: Build the Indexer Client Event-driven vs. Sequential programs Terminology – Top-level windows are called “frame.
Chapter 5 Programming Graphics. Chapter Goals To be able to write applications with simple graphical user interfaces To display graphical shapes such.
More Java Drawing in 2D Animations with Timer. Drawing Review A simple two-dimensional coordinate system exists for each graphics context or drawing surface.
BuddySoft Painter Capstone Project Buddy Landry December 15, 2006.
User Interface Programming in C#: Graphics
GUI and Swing, part 2 The illustrated edition. Scroll bars As we have previously seen, a JTextArea has a fixed size, but the amount of text that can be.
© The McGraw-Hill Companies, 2006 Chapter 14 Abstraction, inheritance and interfaces.
1 L36 Graphics and Java 2D™ (1). 2 OBJECTIVES  To understand graphics contexts and graphics objects.  To understand and be able to manipulate colors.
© Copyright 1992–2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. Chapter Java Multimedia: Images, Animation, Audio.
Event Handling Events and Listeners Timers and Animation.
CS 280 Data Structures Professor John Peterson. Quiz 4 Recap Consider the following array: {2, 6, 7, 3, 4, 1, 5, 9}. Draw this in tree form and then show.
1 Model View Controller. 2 Outline Review Definitions of MVC Why do we need it? Administiriva Changing the display Event flow Dragging at interactive.
Advanced Java Class GUI – part 1. Intro to GUI GUI = Graphical User Interface -- “Gooey” Just because it’s “gooey” does not mean you may write messy code.
Slides prepared by Rose Williams, Binghamton University Chapter 19 Swing II.
Slides prepared by Rose Williams, Binghamton University ICS201 Lecture 16 : Swing VI Graphics King Fahd University of Petroleum & Minerals College of Computer.
CS 112 GUI 06 May 2008 Bilkent. Java GUI API Containers: ◦ contain other GUI components. E.g, Window, Panel, Applet, Frame Dialog. Components: ◦ Buttons,
Events in Java Swing Chris North cs3724: HCI. Typical command line program Non-interactive Linear execution program: main() { code; }
User Interface Programming in C#: Direct Manipulation Chris North CS 3724: HCI.
Java Swing Chris North cs3724: HCI. AWT to Swing AWT: Abstract Windowing Toolkit import java.awt.* Swing: new with Java2 import javax.swing.* Extends.
Web Design & Development Lecture 18. Java Graphics.
GUI Programming in Java
1-1 OBJ Copyright 2003, Paradigm Publishing Inc. Dr. Joseph Otto Silvia Castaneda Christopher deCastro CSULA Macromedia Flash MX Introduction.
CIS 068 Welcome to CIS 083 ! Introduction to GUIs: JAVA Swing.
Working with Symbols and Interactivity
CSE 219 Computer Science III Images. HW1 Has been posted on Blackboard Making a Game of Life with limited options.
(c) University of Washington08-1 CSC 143 Models and Views Reading: Ch. 18.
Java Programming: Advanced Topics 1 Common Elements of Graphical User Interfaces Chapter 6.
Java Graphics. Review 3 kinds of elements in components API? Layout managers Events Extend vs. Implement.
Lesson 34: Layering Images with Java GUI. The FlowLayout RECAP.
Graphic User Interface. Graphic User Interface (GUI) Most of us interact with computers using GUIs. GUIs are visual representations of the actions you.
Graphics and Event-Driven Programming in Java John C. Ramirez Department of Computer Science University of Pittsburgh.
MSc Workshop - © S. Kamin, U.Reddy Lect 4 - Events - 1 Lecture 4 – Event Handling r Painting r Event types r Catching different event types.
User Interface Programming in C#: Direct Manipulation Chris North CS 3724: HCI.
Swing Differences between Swing and AWT Naming Conventions All Swing components begin with a capital J -- JPanel, JButton, JScrollBar, JApplet, etc..
CSE 219 Computer Science III Image Manipulation. HW 1 Has been posted on Blackboard Making a Game of Life with limited.
SWING 101. IF YOU GET LOST - IMPORTANT LINKS  Swing articles:
CS Fall 2012, Lab 09 Haohan Zhu. Boston University Slideshow Title Goes Here CS Fall 2012, Lab /20/2015 GUI - Graphical User Interface.
Lec.10 (Chapter 8 & 9) GUI Jiang (Jen) ZHENG June 27 th, 2005.
© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 1 Outline 21.1 Test-Driving the Painter Application.
(C) 2010 Pearson Education, Inc. All rights reserved.  Class Graphics (from package java.awt) provides various methods for drawing text and shapes onto.
Java Dynamic Graphics.
GUI DYNAMICS Lecture 11 CS2110 – Fall GUI Statics and GUI Dynamics  Statics: what’s drawn on the screen  Components buttons, labels, lists, sliders,
How to Add Animations and Narration to Your PowerPoint Presentation Ms. Chen North Shore High School AP Biology.
Mouse Listeners Moving the mouse will also generate events like the Timer –To have your program respond, you must implement either or both of MouseListener.
Review_6 AWT, Swing, ActionListener, and Graphics.
(c) by Elizabeth Sugar Boese.1 Chapter 6 Events - Lecture Slides.
Review Chris North cs3724: HCI. Midterm Topics Scenario-based design: (ch 1-4) SBD background –metrics, tradeoffs, scenarios Requirements analysis –Field.
Object-Oriented Software Engineering Using Threads and simple Animation.
Ajmer Singh PGT(IP) JAVA IDE Programming - I. Ajmer Singh PGT(IP) GUI (Graphical User Interface) It is an interface that uses a graphic entities along.
“Swing” - Constructing GUIs JButton JTextField. Layout Managers CENTERWEST CENTER BORDERLAYOUT this.setLayout(new BorderLayout()); this.add(displayCanvas,
CS 5JA Introduction to Java Graphics One of the powerful things about Java is that there is.
Event Handling H_Func(Event) { } Event Receiver Object Source Object Registration.
Java Graphics Chris North cs3724: HCI. Presentations peter hou Vote: UI Hall of Fame/Shame?
Advanced Java Screen Update Techniques SD’98 - Session 4406 Ted Faison Faison Computing Inc.
Java Swing and Events Chris North cs3724: HCI. Presentations nadine edwards, steve terhar Vote: UI Hall of Fame/Shame?
CPCS 391 Computer Graphics Lab One. Computer Graphics Using Java What is Computer Graphics: Computer graphics are graphics created using computers and,
10/20/2005week71 Graphics, mouse and mouse motion events, KeyEvent Agenda Classes in AWT for graphics Example java programs –Graphics –Mouse events –Mouse.
» The thief and house program we used last time is refactored to follow the MVC pattern » Now it consists of four parts: ˃AScene (model) ˃AThiefController.
Computer Science 209 Graphics and GUIs.
University of Central Florida COP 3330 Object Oriented Programming
1. Encode binary value using PCM
GUI Graphics Chris North cs3724: HCI.
More programming with "Processing"
Professor John Canny Spring 2004 March 5
Model, View, Controller design pattern
Professor John Canny Spring 2003 March 12
Presentation transcript:

Java Direct Manipulation Chris North cs3724: HCI

Java Review Java Swing components, Layout managers Events Graphics JDBC, MVC

Hit Testing Mouse click, mouse over Which dot did user click on? Using components: Make each dot a simple component, like a JButton Hit testing automatic, each component is a subwindow Listen to each component Receive event, check event source rectangular items, scalability, customize JComponent Using custom graphics: Get click event x,y from JPanel Iterate through data structure, test for hit Or, shape.contains(x,y) Data structure for fast lookup?

Manipulation Dragging, stretching, … MouseDrag, MouseMove events Using components: mousePressed store x,y click in component mouseDragged –Calculate 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 repaint( ) Draw new graphics in paintComponent( )

Problem Dynamic manipulation on top of other graphics Need to preserve (redraw) other graphics Examples: MacDraw, powerpoint Simple solution: Call repaint( ) while dragging paintComponent( ) restores other graphics But: lots of graphics, too slow!

Solutions Minimize repaint rectangle: mypanel.repaint(rect) where rect is area of manipulation paintComponent( ) process only graphics in rect Modified double buffering: maintain buffer for background graphics Paint buffer to screen, then paint manip graphics XOR painting: Draw manipulations by inverting pixel colors drawing with XOR twice returns to original look graphics.setXORMode(color) graphics.setPaintMode( ) for normal painting

In JBuilder

Drag-n-Drop Drag and Drop API Data transfer

Problem: Flashing Ugly flashing when repaint: Paint background Redraw shapes

Solution: Double buffering

Double buffered repaint: Draw all graphics in temporary off-screen image »Paint background color »Paint shapes Then paint image to JPanel Bonus: Swing does this for you! Draw graphics on JPanel JPanel maintains off-screen image