Assignment 7

COMP112 2020 Tri 1: Assignment 7

  • Due 4 Jun 10am

Goals

By the end of the assignment, you will have gained experience in writing programs using with simple event-driven input (mouse, buttons, etc).

Preparation

Download the zip file and extract it to your home folder. It should contain template for the Java program you are to complete. Read through the whole assignment to see what you need to do. You can run the demo programs on the ECS lab computers.

Go over the code examples in slides from the lectures on GUIs and Event-driven input.

Summary

  • MiniPaint:
    right Complete the MiniPaint program that allows the user to draw simple pictures on the graphics pane with the mouse.
  • Understanding Java. (10%)
    right Answer some short questions about Java programming.

Overview

The assignment focuses on making interactive event-driven programs with Graphical User Interfaces.

To Submit:

Submit your best version of MiniPaint.java and your UnderstandingJava.txt files by the due date. Remember to click the button for the final step of the submission process after you have uploaded the files (which does some automated checking for you).

You may talk with other students about the assignment but you must write and submit your own code. If you use code that you got from someone else, you must put a comment explaining where you got it.

MiniPaint Program

For this question, you must design and implement a simple paint application that lets a user draw simple pictures on the screen.

There are many commercial software applications that allow you to draw pictures using a computer. Most of them have a lot of commands and would be complicated to write. For this assignment, you are to write a simple version of these applications called MiniPaint.

MiniPaint provides a set of "tools" for drawing different kinds of shapes, (lines, rectangles, ovals, text, and images). The user can use the mouse to draw using the current tool and can click on buttons to change the brush-shape. There are also buttons to clear the screen, and to set various options, such as toggling between outline shapes and filled shapes, setting the line and fill colours, setting the line width and setting the text size.

It is important to watch the demo video in order to see how the program should work.

The MiniPaint class has
  • a setupGUI method to set up all the elements of the GUI,
  • fields to store
    • the name of the current tool,
    • the position the mouse was pressed.
      (the shape is drawn when the mouse is released, but the position and size of the shape depend on the pressed position also.)
    • whether the shape should be filled or not,
    • the colour of the lines (including the outline of the rectangles and ovals)
    • the width of the lines
    • the fill colour for the centers of the rectangles and ovals
    • the name of the image file,
    • the "caption" that can be placed on the image
    • the font size for the captions.
  • methods to respond to the buttons, textfields, and sliders
  • a method to respond to the mouse, which will call...
  • methods for drawing the shapes.

MiniPaint should have the following widgets (buttons, sliders, etc):

  • Clear button: Clears the graphics pane.

  • Line button: After the Line tool has been selected, if the user drags the mouse from one point on the screen to another, the program should draw a straight line between the points.
    Although an ideal program would show the line being drawn while the user drags the mouse, MiniPaint is simpler, and only shows the line once the user has released the mouse.

  • Rect button: After the Rect tool has been selected, if the user drags the mouse from one point on the screen to another, the program should draw the rectangle defined by the two points.
    [Completion] Note that the user should be able to drag between any two diagonally opposite corners of the rectangle (top-left to bottom-right, bottom-right to top-left, top-right to bottom-left, or bottom-left to top-right).
  • Oval button: After the Oval tool has been selected, if the user drags the mouse from one point on the screen to another, the program draws an oval centred within the rectangle defined by the two points.
  • Caption textfield: When the user enters some text in the Caption textfield, the program will remember the caption. After this, if the user releases the mouse at a point, the program will draw the caption at that point.
  • Image button: When the Image button is clicked, the program will ask the user for an image file (using the UIFileChooser.open() dialog box). After this, if the user drags the mouse between two points, the program will draw the image file to fit in the rectangle between those points.
    Note: If the pressed and released points are very close, it should just draw the image with its natural size at the released position.
  • Eraser button: When the user presses and drags the mouse, the program will erase a circular region around the mouse wherever the user drags the mouse.
  • Freehand button: When the user presses and drags the mouse, the program will draw a line (of the current line width) wherever the user drags the mouse.
  • Fill/NoFill button: Changes whether later rectangles and ovals are filled or just outline. Clicking the button should toggle the current state of the "tool".
  • Line Color button: Asks the user for the color for lines (and borders and text) for later shapes. It should use the JColorChooser.showDialog(null,...) method.
  • Fill Color button: Asks the user for the color for the centers of later shapes. It should use the JColorChooser.showDialog(null,...) method.
  • Line Width slider: Changes the width of lines (and borders) for later shapes.
  • Text Size slider: Changes the font size of later captions.

Note that none of the buttons (except Clear) actually change anything on the graphics pane when they are selected. All actual drawing happens in response to releasing the mouse on the graphics pane. The effect of a button is to change the internal state of the program, so that the next mouse release will draw a different shape.

Core

Implement MiniPaint so that it will
  • Have the appropriate fields.
  • Set up the user interface correctly
  • Select the Line, Rect, Oval, or Caption tool correctly (and remember the text for the caption).
    (The doSetLine etc, methods)
  • Draw a line between the mouse pressed and mouse released points if the current shape is Line.
    (The doMouse and drawALine methods).
  • Draw a rectangle or oval between the mouse pressed and mouse released points if the current shape is Rect or Oval. The shape should be an outline or filled, depending on the Fill/NoFill button.
    (The doMouse, drawARectangle and drawAnOval methods).
    For the core, drawARectangle and drawAnOval only need to draw the shapes correctly when the user drags from the top-left corner to the bottom-right corner.
  • Draw a text caption where the mouse is released if the current tool is Caption.
    (The doMouse and drawCaption methods)
  • Make the Fill/NoFill button work, so that drawing rectangles and ovals will be filled or outline, depending on the Fill/NoFill button.
  • Make the Line Width and Text Size sliders set the line width and text size.

Hint: The most common difficulty that students have is working out exactly when and where everything should happen. Make sure that you watch the demo video and notice what happens when buttons are clicked and what happens when the mouse is pressed, released, or dragged on the graphics pane. Notice especially that when you click on the buttons (except the Clear button), the program does not draw anything - all it does is to remember which button was chosen. It is only when you release the mouse somewhere that it actually draws a shape (or image). What shape it draws depends on what tool it is currently set to.

Completion

Add the following features to your program:
  • Make the mouse draw ovals or rectangles correctly when the user drags from any corner to the diagonally opposite corner.
    (Hint: given the two points, work out the values of left, top, width, and height.)
  • Make the Line Color and Fill Color buttons work, and make lines, ovals, rectangles and captions use the two colours correctly.
  • Make the Image button ask for a filename and set the tool correctly, and then have the mouse draw the image within the rectangle specified by the pressed and released mouse positions (just like the rectangles) (or at its natural size if the two positions are within 5 pixels of each other).
  • Make the Eraser and the Freehand buttons work.
    For these tools, you need a mouseMotionListener, and the mouse must respond to "dragged" events by either erasing a circular region around the mouse or extending the freehand line to the mouse position.

screenshot.png

Challenge

Marking Guide: The first one is 5 marks. We add 10 for each of the other three till you get 20. For example, do any two of the last three will give you full marks.

There are lots of ways in which this program could be made nicer to use. For example you could add some of the following (or something else interesting):

  • [+5] Make the Fill/NoFill and Colour buttons display the currently selected state and colour in some way.

  • [+10] Make the drawing actions "rubber-band" - as the user drags the mouse, the program should show the line or the rectangle being dragged out. However, it should not destroy the bits of the drawing that it is dragged over. Hint: use the invertLine, invertRect or invertOval methods
  • [+10] Add a Polygon button and a slider that lets the user add a regular polygon (triangle, square, pentagon, hexagon, etc) to the drawing. The slider controls how many sides the polygon will have.
  • [+10] Add a "Curve" button which will allow the user to draw nice curved lines. Curved lines need at least three points to specify them. Ideally, the user should be able to keep adding points to a curve. (Look up Bezier curves to do this really nicely!)

Understanding Java

Answer the following questions in the UnderstandingJava.txt file, and make sure you submit it.

1. What are the general rules for defining a field or a method private or public? When do we define something public static final?
2. In your own words, explain what an object is and what a class is. Give examples to explain when you need to create an object.