A2: Model-View-Controller (Java) -- JSketch
Due Fri Oct 19 at 5:00 PM
In this assignment you'll demonstrate your understanding of MVC by implementing a vector-drawing program, consisting of a canvas and tool palettes. Your program will selecting drawing properties, and drawing shapes on-screen.
- Widget Library
- Layout Managers
- Some 2D graphics
The main area of your drawing program is a canvas that supports drawing shapes from the tool palette. Users can draw by selecting a shape from the list on the side, then clicking and dragging the mouse on the canvas to draw that shape. A shape "preview" is shown as the mouse is dragged, and the shape is complete when the mouse button is released (i.e. the first click sets the starting position, and the drag operation sets the width of the circle, or creates a line, depending on the shape being drawn, and the shape is complete when the mouse button is released).
Your drawing program will have the following layout and features:
- A menu bar with both file and view menus:
- File-New: create a new drawing. The drawing will always fit the canvas when it is created.
- File-Load: load a drawing from a file (i.e. a file that you previously saved, which replaces the current drawing).
- File-Save: save the current drawing (using a file format that you choose).
- A tool palette on the left-hand side, supporting the following tools:
- A selection tool: this allows the user to select a shape that has been drawn (there should be some visual indication which shape is selected). To select a shape, the user should click this tool, then click on an existing shape. Pressing ESC on the keyboard will clear shape selection. Selecting a shape will cause the color palette and line thickness palette to update their state to reflect the currently selected shape (e.g. if I select a red circle with the largest line thickness, the color palette should change to red, and the line thickness should change to the largest line to match the selected shape). Changing color or line thickness when a shape is selected will update the shape properties to the new values.
- An erase tool: click on this tool and then click on a shape to delete it.
- A line drawing tool: select this to draw a line (using the selected color and the line thickness).
- A circle drawing tool: select this to draw an unfilled circle at the point indicated (using the selected line thickness and color for the border).
- A rectangle tool: select this to draw an unfilled rectangle (using the selected line thickness and color for the border).
- A fill tool: select this tool, and click on a shape to fill that shape with the currently selected color.
- A color palette: a graphical display of 6 or more colors, which the user can use to select the current color (alternately, the user can click on the "Chooser" button to bring up a color chooser dialog to select a color). Choosing a color will set the current drawing color, which will be used for any new shapes that are drawn. If a shape is already selected when a color is chosen, the shape's border will change to that new color, if possible. [Technical note: using JButtons with a backgroundColor doesn't work properly on Mac OS X, and displays blank white buttons; you should avoid doing that.]
- A line thickness palette: a graphical display of at least 3 line widths that the user can select. Selecting a line width will set the border thickness for any new shapes drawn. Selecting a shape will change the border thickness to reflect the line thickness of that shape.
The following functionality should be supported:
- The user should be able to move a selected shape around the screen by selecting it, and dragging it with the mouse. You should determine rules for how overlapping shapes are handled (the assumption is that shapes will overlap, but you need to determine exactly how to handle this).
- Your interface should clearly indicate which tool, color and line thickness are selected at any time. It should also be obvious which shape, if any, is selected. You may use thicker borders around the tool (as in the example above), or some other visual indicator that you choose.
- Your interface should enable/disable controls if appropriate (e.g. if an option is invalid, you should disable the control).
- Your application should support dynamic resizing of the application window, so that the application adapts to different window sizes and resolutions. The tool palettes should expand and contract based upon available space; how the layout changes is a visual design decision left to you. The canvas should not change size, but should display scrollbars if the user resizes the window smaller than the canvas (otherwise the scrollbars should remain hidden). You may set a "reasonable" minimum size for your application window (e.g. 640x480), but there should be no limit to the maximum size.
The following is a list of technical constraints and guidelines:
- The assignment must be programmed in Java 10.0.2, using Swing components.
- The starting appication window should be no larger than 1600x1200. You can constrain the minimum size if you wish, but you need to support a wide enough range of window sizes to demonstrate your dynamic layout.
- The layout should be dynamic and designed appropriately to support scaling the application, as described above.
- MVC architecture should be used for the application (including at least one model and two views).
- Appropriate widgets should be selected and used for the interface. Options are appropriately enabled/disabled in the UI.
- 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 (i.e. included in a ZIP file attached to the Schedule page of the course website). 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.
Additional Features (Mandatory, choose one or more features from the list below, totalling 10%).
- 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 (5 marks).
- Group shapes: select multiple shapes, then group them together so that they can be dragged/resized as a single entity (5 marks).
- Customizable color palette: you can wholly or partially customize color buttons in the palette (e.g. right-click a button and choose a new color for that button from a color-chooser dialog) (5 marks).
- Dynamic use of widgets: if display is resized too small, replace a set of widgets with a space-optimized widget (e.g. replace stroke width with combo box, color palette with subset of buttons and so on). This should be a dynamic manipulation of at least 2 sets of widgets (10 marks).
- Undockable toolbars: toolbars can be undocked to create floating palettes, that can be repositioned around the screen (10 marks).
- System-level copy/paste: support pasting an image (any supported format) to an outside program (e.g. MS Paint, Photoshop, Pixelmator) (10 marks).
Bonus Features: Resizing (Bonus, up to 10% for completing this feature)
In addition to making the canvas fixed-size, you may choose to enable scaling of the canvas to the window. This is an optional feature. If you complete it, we will reward up to 10 bonus marks on your assignment. If you exceed 100%, we will apply the "extra" marks to your lowest assignment.
This feature allows the user to toggle between scaling the canvas full-size (as above), or scaling the canvas and its contents to the window. You should add the following options to your toolbar:
- View-Full Size: if this option is selected, the canvas and its contents remain the same size as you resize the window, and scrollbars appear to let you scroll the image (note that you can only select one of the view options at a time).
- View-Fit to Window: if this option is selected, the canvas and its contents resize to fit the window as the window is resized (note that you can only select one of the view options at a time).
Submit the following to your personal Git repository, in the A2/ subdirectory:
- All files required to build and run your project (including source, images).
- A Makefile that will build, then execute, your project by typing only "make run" from the command line.
- A saved drawing from your application that can be loaded to demonstrate your load and save capabilities.
readme.mdfile that documents your application.
- Late assignments will not be accepted.
- TAs will grade on Windows or Mac, using your README as a guideline. If you include more than 10% in additional features, they will only grade the first ones that are submitted.
Your submission will be assessed roughly as follows:
- Makefile compiles and runs program.
- Functional requirements, described above.
- MVC architecture (incl. at least 1 model and 2 views).
- Dynamic layout, and appropriate use of widgets.
- Additional features from the list above.
- Optional, maximum bonus for resizing.
- 1.0. Sept 26. Initial release.
- 1.1. Oct 15. Changed resizing to a bonus feature (i.e. it's now optional instead of required).