A3: Widgets & Layout (Java) -- Avatar Maker
In this assignment, you will have to code an application to create avatars and export them as images.
- Construct an interface using Java FX components and layouts.
- Handle mouse and keyboard interaction, and implement standard interactive features listed.
- Structure your application using the model-view-controller design pattern.
The program interface should be divided into 3 areas. The left part contains the different body parts of your avatar. The middle area is the avatar view. You display here your avatar and can interact with certain modifiable parts of it. The rightmost area is the command area where specific UI elements will be displayed depending on which part of the avatar is selected.
The parts are images files (.png or .svg) and are given as resources.
The following functionalities should be supported:
- Users can choose a part by clicking on the in the accordion view.
- The hair and clothes colors can be changed at will using a color picker. Those parts are svg files. A code to load those files is provided in the resources archive. Selecting the part should make the color picker display the part's current color.
The clotehs have 5 parts:
- the jacket,
- the tshirt,
- the t-shirt neck,
- the two lapels on the side of the jacket
- Users can change eyes brows vertical position in a reasonable range (e.g. [-8, 8]).
- Users can change the size/scale of the eyes in a reasonable range (i.e not more than factor 2).
- Users can select a part on the avatar view by clicking it. Clicking outside a selectable shape in the Avatar area (middle area) unselects the current selected part
- Current selected part should be highlighted.
- Selectable part should be lightly highlighted when the mouse hovers them.
- Only show controls that are adequate to the currently selected part in the command view.
- Save the avatar in an image file (i.e png, or jpeg).
- The window is resizeable but should have a minimum size of 800x400px.
- When starting the program, assign random colors to svg parts.
The following layout and features are required:
- An accordion containing the different parts organized by type that displays the thumbnails of parts:
- The avatar view that shows the avatar at the center of it. The right feedback should be given. It should lightly highlight parts that are selectable and mark a clear distinction when selected. The selectable parts are the clothes, the hair, the eyebrows, and the eyes.
- The command bar displays available commands/widgets depending on the type of part that is selected as well as the "Save..." button that should always be visible.
Choose Your Own Feature! (Select one or more features to implement from the list below, totalling 10%).
- Undo-Redo: allow users to undo the last action (5 marks) or have a full implementation that lets them undo-redo multiple steps using Ctrl+Z (10 marks).
- Drag-and-drop: allow users to drag and drop part from the accordion to the avatar view to change the part. (5 marks)
- Save and load avatars: allow users to save the avatar in a file (5 marks) and load it again (10 marks). For this, you will need to add buttons in the command area.
- Preview parts and colors: when users hover a part, the avatar view is updated to preview what it looks like (5 marks). Same with the colors for hair and clothes (10 marks)
- Background: users can change the backgound color or set it as transparent (5 marks). When exporting to png, if background is transparent, export it as transparent (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.
- The starting application window should be 1200px wide and 800px high. The window should be resizable, as described above (minimum size of 800x400, no max litmit).
- The layout should support scaling the application during resizing and all features must be usable after resizing.
- Appropriate widgets should be selected and used for the interface: using color picker to choose a color, using spinners or slider for numeric values. Options should appropriately enabled/disabled in the UI.
- You must use the model-view-controller design pattern in this assignment. You are expected to have at least one model and one controller class, with the appropriate class structure. In JavaFX the View and the Controlelr are highly coupled because FXML files so no need for a view class.
- 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) and in the resources archive provided. 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 main class should be named "Main" and reside in a file named `Main.java'. Running this class should execute your application.
Help and Hints
Here are some suggestions to ease the development.
All the parts png images are 756x756px. The svg files are also defined to be 200x200px. Meaning that setting the ImageViews containing the parts to be of size 200 by 200, the png and svg parts should be aligned if stacked. If you want to scale the images, you should scale the svg accordingly.
For the thumbnails in the Accordion container, I recommend setting a viewport on the ImageViews containing the images. The viewport is useful to zoom on a part of an image. It's not ideal but this way you don't have to crop the images.
The provided svg that draws clothes actually enclosed 5 parts. The jacket, the tshirt, the t-shirt neck and the two lapels on the side. Those are separated parts and users should be able to choose color for each of them.
The provided loader (SVGloader.java) is minimalistic and only handles extremely simple svg files. The loadSVG method takes an svg filename and returns a Group node containing the different paths defined in the svg file as SVGPath nodes.
You can use the DropShadow effect to highlight an item and set it as an effect to a Node.
DropShadow ds = new DropShadow( radius, color ); node.setEffect(ds);.
Another alternative is to use the InnerShadow effect which is the same as DropShadowm but in the inner part of the Node.
InnerShadow is = new InnerShadow( radius, color ); node.setEffect(is);.
You can use the
snapshot method of nodes to save the pixels representing the node.
Imageview event detection with png
pickBounds property of the Imageview to be able to click on the whole image and not just the colored pixels.
While it's not mandatory to use an FXML file, I strongly encourage using one. It'll be easier for you to maintain as the code to build the interface grows very fast. Plus, it will be easier for the TA to mark your project. That being said, you can still use code to add UI elements for example to populate the accordiaon and the Avatar view.
If you choose to use an FXML file, add the
fx:controller="your.package.Controller" attribute to the root element of the fxml file. This will link the fxml to the controller class and you will be able to select methonds from the controller in the scene builder of IntelliJ.
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 an IntelliJ project. For example, your submission should resemble this (likely with slightly different class, image). Note that you should NOT include the contents of the out/ folder (since they will be replaced when we build your project).
a3/ ├── a3.iml ├── out/ ├── readme.md └── src/ └── resources/ ├── skin/ ├── hair/ ├── eyes/ ├── eyebrows/ ├── mouth/ ├── nose.png ├── clothes.svg ├── Main.java ├── Model.java ├── SVGloader.java └── Controller.java
Your submission needs to include:
- All source code and resources required to build and execute your program.
- An IntelliJ project that compiles everything using the specified JDK and Java FX versions, and which has a Run target that will execute your program.
- 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,
- Which additional features (and how to use them!).
Your submission will be assessed roughly as follows:
- IntelliJ project compiles and runs program.
- Functional requirements, described above.
- Appropriate use of widgets to meet the requirements above.
- Additional features from the list above.