A3: Widgets & Layout
In this assignment you will implement a vector-drawing program in Java/Java FX. Your program will allow a user to select shapes to draw, set their properties, and draw the shapes on-screen. This type of program would typically be used to draw simple diagrams.
- Construct an interface using Java FX components and layouts.
- Support interaction with a drawing canvas, where users can draw shapes using graphics primitives.
- Handle mouse and keyboard interaction, and implement standard interactive features.
The main area of your drawing program is a canvas where users can draw shapes. Users can select a shape from the list on the side, specify colour, border thickness and style, then use their mouse to draw that shape on the canvas.
Your drawing program will have the following layout and features:
- A menu bar containing the following menus and menu items:
- New: create a new blank drawing (and prompt the user to save if the current drawing is unsaved).
- Load: load a drawing that you previously saved (also prompt the user before discarding a drawing).
- Save: save the current drawing using a file format that you determine.
- Quit: exit the application (prompt the user to save before exiting).
- About: display a dialogbox with your program name, your name and WatID.
- A tool palette on the left-hand side, with the following tools:
- A selection tool: this allows the user to select a shape that has been drawn. To select a shape, the user should click this tool, then click on an existing shape (resulting in some visual indication to the shape itself to indicate that its been selected). Pressing ESC on the keyboard (or clicking an empty part of the canvas) will clear shape selection. Selecting a shape will cause the colour palette, line thickness and style to update their state to reflect the currently selected shape (e.g. if I select a red circle with the largest line thickness, the colour palette should change to red, and the line thickness should change to the largest line to match the selected shape). Changing colour, line thickness or line style when a shape is selected will update the shape to the new values.
- An erase tool: click on this tool and then click on a shape to remove it. Pressing DEL while a shape is selected should also delete that selected shape.
- A line drawing tool: select this to draw a line using the selected properties.
- A circle drawing tool: select this to draw a circle at the point indicated using the selected properties.
- A rectangle tool: select this to draw a rectangle using the selected properties.
- A fill tool: select this tool, and click on a shape to change it's fill colour to the currently selected value.
- A line colour icon that graphically displays the currently selected line color. Clicking on this object will bring up a color chooser dialog that lets the user pick a color. This colour will be used as the border colour for any new shapes that are drawn (or the ONLY colour in the case of a line).
- A fill colour icon that graphically displays the currently selected fill color. Clicking on this object will bring up a color chooser dialog that lets the user pick a color. This colour will be used as the fill colour for any new shapes that are drawn (it will NOT be used if a line is being drawn).
- A line thickness palette: a graphical display of at least three line widths that the user can select. Selecting a line width will set the line thickness or border thickness for any new shapes drawn.
- A line style palette: a graphical display of solid or dotted lines with at least least three choices. Selecting a line style will set the line style or border style for any new shapes that are drawn.
The following functionality should be supported:
- Drawing: The user draws a shape by selecting the appropriate tool, and clicking on the canvas where they want to start drawing it. The first click typicaly sets the upper-left corner starting position of the shape, and a "preview" is shown as the mouse is dragged. When the mouse button is released, that completes the shape (i.e. the drag operation sets the width of the circle, or creates a line, depending on the shape being drawn, and the shape is completed when the mouse button is released).
- Selection: The user should be able to select any shape and move it by dragging it with the mouse. Shapes can overlap, with the more recently drawn shape overlapping the older shape (hint: you order them back-to-front as they are created). Your interface should clearly indicate which shape, if any, is selected. You may use thicker borders around the tool, or some other visual indicator that you choose. When a shape is selected, the properties should also change to reflect the shape's properties.
- Update shape: Changing the properties of a selected shape should change that shape's properties.
- Window resizing: Your application should support dynamic resizing of the application window, so that the application adapts to different window sizes and resolutions. If you change the size of the window, the canvas should scale to the size of the window, but the shapes should stay at the same size and position. The exact implementation is a visual design decision left to you, but the application and all functionality should be equally usable at all resolutions. You should set "reasonable" minimum and maximum sizes for your application window (e.g. range from 640x480 to 1920x1440). You can decide on the exact range but make sure that it clearly demonstrates a change in layout.
In all cases, your UI should disable controls when they are not appropriate (e.g. if no shape is selected and you click on the Select tool, the drawing property tools should be disabled since they don't apply. Once you select a shape, they wold then be enabled and changed to the properties for that shape).
Choose Your Own Feature! (Select one or more features to implement from the list below, up to 10 marks).
- Scale shapes: the ability to change the scale/size of any shape by selecting it, then grabbing a corner of the shape, and dragging to increase/decrease it's size (i.e. direct manipulation) (5 marks).
- Rotate shapes: the ability to grab a corner of a shape and rotate it in real-time (i.e. direct manipulation). (5 marks)
- Group shapes: select multiple shapes, then group them together so that they can be moved as a single entity. If you support resizing or rotation, you must also apply those operations to the group (5 marks).
- Zoom and pan: support zooming the canvas in and out, scaling the contents and showing scrollbars as needed. This also requires the ability to pan around the screen if it's zoomed in larger than the viewport (i.e. if you have scrollbars) (10 marks).
- Multiple document: add tabs, so that the user can have multiple drawings open simultaneously! You would need to add File-New Tab and File-Close Tab functionality, and handle loading and saving from each tab as well. (10 marks)
- Cut-copy-paste: allow users to cut/copy/paste shapes within your application (e.g. to create a copy of a shape). This includes adding standard Edit-Cut, Edit-Copy, Edit-Paste menu items. If a shape is copy-pasted, the new copy should be fully interactive, just as if it had been drawn. You do NOT need to support pasting from an external application (10 marks).
- Undo-Redo: allow users to undo the last action (5 marks) or have a full implementation that lets them undo-redo multiple steps. Add functionality under Edit-Undo and Edit-Redo menu items (10 marks).
The following is a list of technical constraints and guidelines:
- The assignment must be programmed using only Java 11 and Java FX 11 libraries. You should not use Swing.
- The starting application window should be no larger than 1600x1200. The window should be resizable, as described above.
- Appropriate widgets should be selected and used for the interface. Options should appropriately enabled/disabled in the UI (i.e. if an option is unavailable, it should be disabled).
- You may use third-party graphics/images, provided that (a) they are licensed to allow you to use them in this way (e.g. Creative Commons), and (b) you comment their origin and license in your README file.
- You may use any sample code provided in-class (including on the class repository). If you do this, you must provide a comment in the code indicating the source of the code. If you use and fail to disclose this information, it could be considered an academic violation. You may not use any other third-party code unless you obtain instructor consent ahead of time.
Your directory structure for your assignment submission should be in subdirectories under your
a3/ directory in your Git repository. It should use a standard file layout for a Gradle project. For example, your submission should resemble this (likely with slightly different class, image and sound file names). Note that you should NOT include the contents of the out/ folder (since they will be replaced when we build your project). Also, your project may or may not include
a3.iml depending on whether you used IntelliJ.
a3/ ├── a3.iml ├── build/ ├── build.gradle ├── gradle/ ├── gradlew ├── gradlew.bat ├── readme.md ├── settings.gradle └── src/ └── main └── java ├── CanvasView.java ├── Model.java ├── SketchIt.java └── ToolbarView.java └── resources ├── selection.jpg ├── erase.jpg └── circle.jpg
Your submission needs to include:
- All source code and resources required to build and execute your program.
- A Gradle project that compiles ('gradle build') and runs your project ('gradle run').
- A `readme.md' file with any details required to help the TA grade your assignment.
Your `readme.md' file needs to include, at a minimum:
- Your name,
- Your student number,
- The version of Java that you used,
- Your operating system & version,
- The source for your image and sound assets,
Your submission will be assessed
- 5%: Gradle project compiles and runs your program.
- 60%: Functional requirements, described above.
- 5 Drawing a circle works as expected, includes preview
- 5 Drawing a line works as expected, includes preview
- 5 Drawing a rectangle works as expected, includes preview
- 5 New file clears the canvas, about shows relevant info, quit exits the application
- 5 Can save a file
- 5 Can load a file
- 5 Possible to select a shape, the relevant properties update to reflect selection, can exit selection using Esc key
- 5 Shapes can be moved when they are selected
- 5 Erase tool works; can also use delete key while selected
- 5 Fill tool works as expected
- 5 Line colour, fill colour, line thickness, line style all work as expected when drawing new shape
- 5 Shape properties can be updated when a shape is selected
- 25%: Appropriate use of widgets to meet the requirements above.
- 10 All appropriate functionality has matching GUI component (drawing tools, properties, menu)
- 10 Window can be resized appropriately
- 5 Graphical display used for the tool buttons
- 10%: Additional features adding up to 10%
- 1.0. Aug 26, 2020. Initial draft.
- 1.1. Oct 19, 2020. Included Gradle project details. Clarified functionality.
- 1.2. Oct 26, 2020. Removed DRAFT.
- 1.3. Nov 7, 2020. Fixed the example directory structure (indenting of the source folder was off by one level).
- 1.4. Nov 9, 2020. Added detailed marking scheme.