A3: Widgets & Layout (Java) -- Avatar Maker


In this assignment, you will have to code an application to create avatars and export them as images.

This is a rough mockup and video that illustrates most of the features and the basic layout.




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:

The following layout and features are required:

Choose Your Own Feature! (Select one or more features to implement from the list below, totalling 10%).

Technical Requirements

The following is a list of technical constraints and guidelines:

Help and Hints

Here are some suggestions to ease the development.

Provided images

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.

SVG loader

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);.

Export image

You can use the snapshot method of nodes to save the pixels representing the node.

Imageview event detection with png

Use the 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.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:

Your `readme.md' file needs to include, at a minimum:


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.