CS 242 Fall 2011 : Assignment 1.3

This page last changed on Sep 20, 2011 by cemeyer2.

Assignment 1.3 – Creating a GUI for our path finding library

This final part of the assignment will be due on September 22nd, 2011 at 10:00 AM CST in SVN. This assignment will be an extension of the maze solver library. Specifically, it will create a GUI interface for your libraries. Please commit your assignment to a directory called Assignment1.3 in SVN. Please match this spelling exactly.

For this assignment we will be building a Graphical User Interface (GUI) for the maze solving libraries we have developed. As a method of creating this GUI, we’ll be turning to the model-view-controller (MVC) software architecture. In an MVC architecture there are three components that comprise all the pieces of a GUI. The Model is used to hold data related to an application. In the context of this assignment, this might be the maze representation(s), state of the solution, state of the GUI, etc. The View component contains what the user will see. A view would have all buttons, labels, frames, pictures, and other graphical elements. The Controller handles communication between the user and the application. It will contain the functions to handle button clicks, for example. The following link is an excellent description of the MVC design paradigm (this is the one shown in lecture): http://www.cs.rice.edu/~cork/newBook/node89.html.

To aid you in understanding how to use MVC, take a look at a set of slides that a former TA put together:


You need flash player installed to preview ppt and pdf files

Get Adobe Flash player




pdf download

To complete this assignment, your GUI must do several things:

  • You must use the MVC architectural pattern for your UI this week.
  • It should contain a button to test if the maze is solvable. Discuss ideas on how to do this on the course piazza space. You may need to think creatively here.
  • It should contain a button to then solve the maze. If the maze is not solvable, you should prevent this button from being pressed.
  • The GUI should be able to load a maze from a file, and the GUI should not need to be restarted when new mazes are loaded. You will find this functionality to be easily performed with a File Chooser.
  • It should also contain a visualization of the maze, and when solved, the solution. Preferably, a image of the maze will be displayed with the solved path overlayed on it.
  • Your GUI should also be able to take in any parameters used for scaling uphill/downhill values.
  • Your GUI should allow the user to choose a heuristic (from at least 3 of the ones you have implemented) and be able to find a path with the chosen heuristic.
  • Your GUI should be able to run the algorithm several times on the same image with different parameters without reloading and be able to show the paths in different colors.
  • Your GUI should be able to allow for basic editing of the map. That is, set thresholds for colors deemed to be “walkable” or “not walkable”
  • Your GUI should allow the user to pick the start and end coordinates for the path. Preferably, this will be done using the mouse, but text boxes with proper sanity checking will be sufficient.
  • Your GUI should allow the user to open multiple mazes and merge them together into one bigger maze, and find a path across them.
  • Lastly, your GUI must incorporate one of the user interface design patterns shown in the slides below.

User Interface Design Patterns


You need flash player installed to preview ppt and pdf files

Get Adobe Flash player




pdf download

UI Patterns you can choose from for this assignment:

  • Two-Panel/Multi-Panel Selector
  • One-Window Drill-down
  • Wizard
  • Extras On Demand
  • Center Stage
  • Card Stack
  • Closable Panels
  • Movable Panels

README

Please include a short README.txt plain text file with your submission. In it please describe your architecture, how you employed the MVC architectural pattern, and which UI pattern(s) you used and how you used them.

Challenges

For this assignment, the challenge will be to make your editing features more interactive. Namely, you need to make it such that your UI has some tools such as in MS Paint, such as a square tool, a circle tool, etc. Your UI should allow you to use these tools to edit the map by making areas of the map be not walkable.

Requirements

As always, you will be graded on participation and implementing the guidelines for modular, readable code. Additionally, you will be graded to ensure that you meet the requirements listed above.

The mega-maze requirement

When you compose many images into one to solve together, you may find your hash function does not work as well due to the large dimensions. You might need to come up with something different. The animation below shows an example of what the algorithm looks like as it solves a “mega-maze”. The yellow is the closed list, green is the current open list, and the red line is the found path thus far:

Netbeans/Eclipse Warning!

If you decide to use the UI builder in Netbeans, IntelliJ, or Eclipse for this assignment, be very careful. Although the UI builder quickly generates Java GUIs, it produces very ugly code that will not meet the requirements for this assignment without modification. Most noticeably, it tightly couples the view with the controller, so significant refactoring of the auto-generated code will be required. In the staff’s opinion, it is more work to generate a UI automatically and refactor it properly than to build one from scratch.

Hand written code

Netbeans autogenerated code

SimpleGuiDriver.java
SimpleGuiModel.java
SimpleGuiController.java
SimpleGuiView.java

How do I test a GUI?

We expect you to write junit unit tests for all of your controller code. The controller functions should be able to be invoked without the view present if needed. For testing the view, there are tools out there that will let you write automated UI functional tests, such as SWTBot and Rational Functional Tester, but we do not expect you to use them for this assignment. Rather, we ask that you create a manual test plan. A manual test plan is a document that contains the steps that a user would need to manually do with your application along with screenshots of it at each step so that the user can verify that the test is progressing as expected. We expect you to write an entry in your manual test plan for each of the main features of your application.

Resources

GUI programming can be a potentially daunting experience. Below are some external resources to help get you going.

  • MVC Wikipedia Article – The Wikipedia article on Model-view-controller architecture.
  • Sun JAVA GUI Tutorial – Sun’s tutorial on Java GUI programming. This is a great resource since it is straight from the source.
  • Model/View/Controller GUI – An introduction to the model view controller design scheme. Includes a Java GUI example. Especially relevant is section 3.1.2.0.1 Warning.
  • Crash Course in Java GUI – An introduction to Java GUI programming. The links on this site are actually powerpoint presentations.
  • Java GUI Examples – A number of examples using JFrame and JButton.

Grading

We will use the standard Grading rubric for this assignment.

  • You must use the MVC architectural pattern for your UI this week.
  • It should contain a button to test if the maze is solvable. Discuss ideas on how to do this on the course piazza space. You may need to think creatively here.
  • It should contain a button to then solve the maze. If the maze is not solvable, you should prevent this button from being pressed.
  • The GUI should be able to load a maze from a file, and the GUI should not need to be restarted when new mazes are loaded. You will find this functionality to be easily performed with a File Chooser.
  • It should also contain a visualization of the maze, and when solved, the solution. Preferably, a image of the maze will be displayed with the solved path overlayed on it.
  • Your GUI should also be able to take in any parameters used for scaling uphill/downhill values.
  • Your GUI should allow the user to choose a heuristic (from at least 3 of the ones you have implemented) and be able to find a path with the chosen heuristic.
  • Your GUI should be able to run the algorithm several times on the same image with different parameters without reloading and be able to show the paths in different colors.
  • Your GUI should be able to allow for basic editing of the map. That is, set thresholds for colors deemed to be “walkable” or “not walkable”
  • Your GUI should allow the user to pick the start and end coordinates for the path. Preferably, this will be done using the mouse, but text boxes with proper sanity checking will be sufficient.
  • Your GUI should allow the user to open multiple mazes and merge them together into one bigger maze, and find a path across them.
  • Lastly, your GUI must incorporate one of the user interface design patterns shown in the slides above.
Category Weight Notes
Basic Preparation 1 Ready to go at the start of section
Code Submission 4 Submitted on time and to the correct location in the repository
Requirements Satisfaction 3 Incorporation of UI pattern(s) and basic map editing
Requirements Satisfaction 3 Is solvable and solve maze features
Requirements Satisfaction 2 Load multiple images into one “mega-maze”
Requirements Satisfaction 3 Load maze from file without restarting and visualizing solved maze
Requirements Satisfaction 3 User input parameters and heuristic choice
Requirements Satisfaction 1 README.txt
Presentation 4  
Participation 6  
Effort 2  
Testing 4 Unit tests written for all controller code, manual test plan for views
Overall Design 6 Use of MVC
Naming 2  
Decomposition 4  
Documentation 4 Comments for each class and each function listing a brief summary, its parameters, and its return value
Cleverness 2 The hardest points on the rubric

CS242_UIPatterns.pdf (binary/octet-stream)

fa10lecture3.pdf (binary/octet-stream)

hand_written_gui.png (image/png)

netbeans_gui.png (image/png)

animation.gif (image/gif)
Document generated by Confluence on Feb 22, 2012 18:09

  1. No comments yet.

  1. No trackbacks yet.