Overview

In this assignment you will build a graphical editor in JavaFX that lets the user create targets for people to practice 2D targeting (e.g., to help them improve their performance in arcade-style video games). The editor allows the user to create, resize, and position targets for the practice session, and then run a session where they click on the targets one at a time. The assignment is divided into four parts: part 1 covers target creation, deletion, resizing, selection, and multiple selection; part 2 covers undo/redo; part 3 covers clipboards and cut/copy/paste operations; and part 4 covers the deployment and logging of the target practice session.

Part 1: Target Creation, Selection, and Manipulation (25 marks)

Create a basic graphical editor that allows the user to create, select, and manipulate circular targets. You may start with the code provided in the BlobDemo example discussed in class. Your system should support both single selection and multiple selection as described below.

Basic Interaction Requirements:

· The user can create a new target by Shift-clicking on the background

· The user can move a target by clicking on the target and dragging

· The user can resize a target by Shift-clicking on a target and then dragging left or right (only dX is used to change the size)

o Targets should have a minimum radius of 5 pixels

· The user can select a target (shown by drawing the target in a different colour) by clicking on the target

· The user can clear the selection by clicking on the background

· The user can delete a selected target by pressing the Delete key on the keyboard

· Targets show their order number (i.e., the order they are stored in the model) at the centre of the circle

Interaction Requirements for Multiple Select:

· The user can add/remove single targets to/from the selection by Control-clicking

· The user can select multiple targets using the combination “rubber-band-lasso” method discussed in lectures

o Simplify the decision about whether to use the rubber band or the lasso to whichever is selecting more items

· The user can add/remove multiple targets to/from the selection by pressing Control and using the rubber-band-lasso control

· When multiple targets are selected, manipulations affect all selected items (move, resize, delete)

Code requirements:

· Use a full MVC architecture

· Implement a state machine for your controller class

· Use immediate-mode graphics in your view class

· Follow the guidelines discussed in lectures for the data structures used to store and manage multiple selections

Resources:

· You may use the BlobDemo code presented in class as a starting point for your visual editor

· Remember that key-event objects have methods isShiftDown() and isControlDown(): h ttps://openjfx.io/javadoc/15/javafx.graphics/javafx/scene/input/KeyEvent.html

· Lab (week of Nov. 14-18) covers the path API and offscreen bitmaps needed for lasso selection

 Part 2: Undo/Redo (25 marks)

Add classes and behaviour to your system to allow certain actions to be undone and redone. Your implementation must follow the “backwards undo” approach discussed in lectures.

Interaction Requirements:

· All create, delete, move, and resize actions can be undone/redone

· When the user presses Control-Z, the previous action (if there is one) is undone

· When the user presses Control-R, the next action (if there is one) is redone

· If the user has undone a previous action, and then does any new action, the Redo stack is cleared

· Undo/Redo actions should accommodate any multiple selection that was part of the original action (e.g., moving multiple targets)

Code Requirements:

· Create interface TargetCommand, following the example presented in lectures

· Create classes that implement TargetCommand for create, delete, move, and resize actions

· Add Stack data structures to your InteractionModel for your Undo stack and Redo stack

· Add functionality to your controller class and interaction model class to create and store command objects

· Add functionality to your controller class to handle key events for Control-Z and Control-R

Part 3: Clipboards and Cut/Copy/Paste (25 marks)

Implement an application clipboard in your system and add capabilities for Cut, Copy, and Paste actions.

Interaction Requirements:

· If there is a selection, pressing Control-X puts the selected items on the app’s clipboard and removes them from the model

o The action of removing the items from the model should be undoable (e.g., using a delete command from part 2)

· If there is a selection, pressing Control-C puts a copy of the selected items on the app’s clipboard (and does not remove them from the model)

o Only one collection of items can be in the clipboard at a time; if the user copies a second selection, the first one is discarded from the clipboard

· Pressing Control-V puts a copy of the items that are in the clipboard into the model

o The action of adding the items to the model should be undoable (e.g., using a create command from part 2)

o The user can paste the items in the clipboard multiple times

o The pasted items become selected when they are pasted; any existing selection is unselected

Code Requirements:

· Create class TargetClipboard to store items that have been cut or copied.

o Note: do not use the system clipboard; you must create your own clipboard class.

o Your clipboard should be managed by the InteractionModel

· Add handlers to your controller to handle keypress events for Control-X, Control-C, and Control-V.

· Add methods to the model for cutting, copying, and pasting

· When copying to the clipboard and when pasting, you will need to make a deep copy of the objects, because you may be pasting them multiple times, and each paste needs to add different objects to the model

Resources:

· Details on cut/copy/paste operations: Olsen text, chapter 15

· Tutorial on Java copying: h ttps://dzone.com/articles/java-copy-shallow-vs-deep-in-which-you-will-swim

Part 4: Targeting Trainer (25 marks)

Add views and controllers to allow the user to test their performance with the set of targets created in the editor, and show the user their results in terms of Fitts’ Law.

Interaction Requirements:

· When the user presses Control-T, the system switches to a “target trainer” view

o The view shows one target at a time, in the order that they are stored

o When the user clicks on the target, the next target is shown

o When all targets have been selected, the system shows a report view

· If the user presses Control-E, the system immediately switches back to the editor view (without showing the report view)

· The target trainer records performance as follows:

o The user’s first click on the first target is the start of the first targeting trial

o The next click on the second target is the end of the first trial

o The system records the elapsed time between the start and end of each trial

o The system also records the index of difficulty (ID) for each trial, based on the distance between the previous target and the current target, and the current target’s width

o Note that if there are N targets in the set, there will be N-1 trials

· The report view shows a chart of the user’s performance

o The chart plots MT (movement time in milliseconds) against ID (index of difficulty) with a dot for each trial

o There are no user interactions with the report view

· When the report view is active, the user can press Control-T to restart the test, or Control-E to go back to the editor

Code Requirements:

· Add code to your InteractionModel to keep track of the application’s mode (e.g., EDIT, TEST, REPORT)

· Create an additional publish/subscribe interface AppModeListener so that the iModel can notify other classes when the mode has changed

· Your MainUI class should listen to changes in the application mode, and switch views as appropriate

· Create an additional view class for the “target trainer” view

· Create an additional controller class that handles interaction with the target trainer view

· Add data structures to your InteractionModel to keep track of each targeting trial

o e.g., create a class TrialRecord to store elapsed time and ID for each trial, and store these in a list

· Create a report view class that shows the summary chart

o Use the existing ScatterChart class provided by JavaFX

o Plot ID on the X axis and MT (i.e., elapsed time) on the Y axis

o An example of using the ScatterChart: h ttps://docs.oracle.com/javafx/2/charts/scatter-chart.htm

o Set the axes to automatically alter their ranges: e.g., xAxis.setAutoRanging(true);

What to hand in (each student will hand in an assignment)

· Create a zip file of your JavaFX/IDEA project zip (File à Export à Project to Zip file…).

· Add a readme.txt file to the zip that describes the organization of your handin and provides any comments to the markers about what to look at in your code (as always, systems for 381 should never require the marker to install external libraries). If parts of the system don’t work, but you want us to look at the code for these parts, please explain in your readme.txt

· Note that you do not need to hand in separate zips for the different parts of the assignment: hand in one zipfile with your maximum progress, and explain what is working in your readme.txt. (Hand in multiple files only if this is required to correctly mark your work)

· This is an individual assignment – each student will hand in separately

· Review the material in the course syllabus regarding academic honesty, and follow all guidelines when completing this assignment. If you have any questions, contact your instructor.

Where to hand in

Hand in your zip file to the Assignment 4 link on the course Canvas site.

Evaluation

· Part 1: The editor application runs with all interaction requirements working, and all software requirements are implemented as specified

· Part 2: Undo/Redo is correctly implemented, provides the specified user interactions, and works with all required user actions

· Part 3: The clipboard and cut/copy/paste functionality is correctly implemented, provides the specified user interactions, and correctly duplicates objects