Hello, dear friend, you can consult us at any time if you have any questions, add WeChat: daixieit

CMPT 381 Assignment 4

Multiple Selection, Undo/Redo, and Cut/Copy/Paste

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-lassomethod 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():

https://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

 

The editor after creating and resizing five targets.

 

In the middle of a rubber-band-lasso selection, with both the rubberband (green rectangle) and lasso (red outline) shown.

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 apps 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: https://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 trainerview

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 users 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 users 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 applications 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: https://docs.oracle.com/javafx/2/charts/scatter-chart.htm

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

 

The targeting trainer, showing the first of five targets from the set defined in the pictures above

 

The chart view shown after all targets are selected.

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

     Part 4: The targeting trainer view and controller provide the required interaction capabilities, the summary

report view correctly presents a chart of the performance data, and the system correctly switched between application modes based on the user interaction requirements

     Overall, your system should run correctly without errors, and your code should clearly demonstrate that you

have satisfied the interaction and software requirements stated in the assignment description. (Document your code to assist the markers understand how you are satisfying the software requirements)

If parts of your system have only partial implementations (e.g., a feature does not work but has been partially                   developed), clearly indicate this in your readme.txt file. Code should be appropriately documented and tested (although documentation will not be explicitly marked).

In general, no late assignments will be allowed, and no extensions will be given, except for emergency or medical reasons. (If you wish to use your one-time free extension, you must contact the instructor before the deadline).