Simple2DUI

User Interfaces for Project 2 Phase 2 - Simple2D

For phase 2 of Project 2, we have asked you to make a very simple interactive graphics program. It has very basic requirements (see here).

The idea is that we want you to see what it takes to make an interactive 3D graphics program. There are really two (not completely separate) issues:

1. How do you use the tools you need to use (a windowing library like FlTk and the graphics library OpenGL)
2. How do you make simple interfaces that are sufficient for showing off your program, but are easy enough that you can build them.

The tutorials should help you get started with the mechanics. This is here to help you think about the interfaces themselves.

This class is not really about user interface design, but you do need to have something so we can test out the programs. Plus, designing good interfaces can be interesting, implementing them is challenging, and better interfaces will make your projects more fun. On the other hand, you probably want to focus on learning the graphics stuff for this class.

So, here are some thoughts on how to design simple interfaces that are easy to build. We'll look at this in the context of the Simple2D assignment, and then add some 3D thoughts later.

The Simplest UI

The simplest user interfaces to build are entirely keyboard driven.

Here is my "simplest" solution to the assignment:

The program is visually spartan. But notice that it does meet the requirements:

• You can tell which square is selected (its red)

And, while you can't tell from the picture,

• You can make new squares (the "a" key (for "Add")).
• You can delete the selected square (the "d" key (for "Delete")).
• You can move the selected square around (use the arrow keys)
• You can change your selection (use the "n" key (for "Next"))
• You can switch run mode on and off (using the "S" key) - when its switched on, the little square orbits the red one.

Its not going to win any design awards, but it didn't take very long to write, and its short and simple (about 100 lines of code).

Even to do this simple thing I needed to:

1. create an FlTk window with OpenGL in it
2. override the draw method of the window (to do the drawing)
3. override the handle method of the window (to take user input)
4. have an "idle callback" so that i can animate things when there is no user input

While I am not proud of it (your code should be better documented than this), here is it: Simple2D.cpp,Simple2D.vcproj.

Here are two variations of the simple solution, modified to use 1.) FLTK widgits (Simple2D.cpp,Simple2D.vcproj) and 2.) mouse picking and dragging (Simple2D.cpp, Simple2D.vcproj).

Technically, you could use this for your assignment (remember to give proper attribution). But you really should just read through it, try to understand it, and re-create something better on your own. Later on, you'll need to make more complicated interfaces.

Hopefully, from this example, you can learn that basic UIs can be simple.