More on Project 1
For the assignments in this class we will be using fltk to build the user interfaces. There are several good toolkits out there to build interfaces, fltk is nice because it is very cross-platform and allows you to make use of your previous experience with C / C++.
Project 1 will give you a chance to learn ftlk on a small assignment before we proceed onto the main project in the course: Project 2.
Each person will work individually on this project. This project is NOT a team project.
It is expected that all of the code used in these programs will be written by you. You can use code from the web as examples and a guide to writing your code, but the code must be your own. We will be using computer software to compare people's programs and it is very good at finding similar programs.
Any code, images, or other elements borrowed from others must be cited in the work and in the README file.
The main source of information on fltk is www.fltk.org
The current version of fltk is release candidate 6, however release candidate 5 seems to be more stable for what we are doing.
You can get release candidate 5 from: ftp://ftp.fltk.org/pub/fltk/1.1.0rc5/ and its available on the suns at /home2/fac2/ajohnson/fltk
If you prefer to use release candidate 6 then it is available from: ftp://ftp.fltk.org/pub/fltk/1.1.0rc6/ and its available on the suns at /home2/fac2/ajohnson/fltk6
Now onto the project itself.
Before we cantalk about project 1 we need to briefly talk about Project 2. Project 2 will involve using fltk to prototype an interface for a PDA. In this assignment you will create a simple shell that will handle the controls of the PDA and give you some experience with what fltk can do.
Most PDAs on the market follow a few simple patterns. I have chosen the basic Pocket PC pattern.
Your PDA should look more or less like this:
The PDA has the following controls:
The screen size is: 320 pixels tall by 240 pixels wide. The PDA in assignment 2 will be dedicated to a single task so you will be able to take over the entire screen and all of the buttons aside from the on/off switch.
The PDA has a speaker but no microphone.
The PDA has built-in wireless (whereas in these simulations you are reading files from the file-system you can assume the 'real' interface would be able to communicate with a central server)
For this first project we will assume that the PDA will be used in its 'traditional' configuration with a vertical screen and the buttons below the screen. For project 2a this assumption is relaxed and you can chose the orientation that the user sees - though you cant move any of the buttons or the scrollwheel. For project 2b this is relaxed even further and you can redesign the PDA.
For Project 1 you do not need to exactly duplicate the PDA that I created ... you can change the overall size and shape of the PDA slightly (but not the screen), and give it a colour or image that you like, the buttons dont have to be square and they can be moved around a bit, or have images placed on them. If in doubt, show me your proposed layout and I'll tell you if its OK or not.
In this assignment you need to write the code to set up the visual representation of the hand-held and handle all of the various buttons. This should give you some ideas of how to set up the interface for the second project. Note that if you with to use fluid, the fltk user interface designer, then that's OK ... though personally I thought it was easier to complete this project without using fluid.
When the PDA is turned on (the simulator application is run) it will display an introductory graphics screen (a gif file) and read in several data files:
- pictures.txt - a text file containing the filenames of images (maximum of 100) for the pda to display. All the images will be gif files. All will be 320 pixels tall by 240 pixels wide.
- index.html - a simple html file for the pda to display.
- survey.txt - a text file containing a list of short questions (maximum of 100) for a survey.
Samples of these files (and images) can be found below. Note that the final testing files will follow these same formats but will not be the same files.
index.html
survey.txt
pictures.txt
title.gif
nasa1.gif
nasa2.gif
nasa3.gif
nasa4.gif
nasa5.gif
The 4 main buttons will perform he following tasks:
far left - bring up the picture browser (using Fl_GIF_Image). The first picture from pictures.txt is displayed. Using the scroll-wheel the user can scroll through the various pictures, bringing each one onto the screen in turn.
left center - bring up the html browser (using Fl_Help_View). This will display the index.html file and allow the user to move through it using the scroll bars that will appear if needed on the screen. The user should also be able to scroll through the html file using the scroll-wheel.
right center - bring up the survey form with questions from survey.txt. On screen each question in the survey will have a check box (Fl_Check_Button) that the user can check (by clicking on it) or leave unchecked. The scroll wheel will be used to scroll through the questions. At the bottom there will be a 'submit' button which will print out the results of the survey (cout or fprintf is fine for this.) Note that the questions could be fairly long so you may need to reformat them to make sure all the text is visible on the screen.
right - extra credit - this one is available for you to come up with something creative making use of the joystick. Look through some of the other options in fltk and see what you can come up with.
Turning in Project 1
Make sure your project works on the Suns on the 2nd floor of SEL. You can develop this on whatever machine you prefer, but that is the platform that we will be testing on, so be sure that it compiles and runs there.
On the suns, fltk can be found in my directory /home2/fac2/ajohnson/fltk for release candidate 5 (preferred) and /home2/fac2/ajohnson/fltk6 (less preferred but newer)
Since the gcc compilers got updated at the end of August, so now you should compile with something like:
gcc -O3 -c
-I../fltk/ -I/usr/include -o project1.o
project1.cxx
gcc -O3 -o project1 project1.o -L. -L../fltk/lib -lfltk_forms
-lfltk
-L/usr/openwin/lib -lm -lXext -lX11 -lfltk_images -lstdc++
you may also want to add in -ljpeg -lpng depending on what functions you use in your code. fl_register_images() seems to like to have those on the link line. ernie also seems to be a more stable machine to compile and link on. g++ works as well as gcc.
Be sure to have a README file that explains what your program does, and what it does not do so that while grading we know what to expect.
We will be using the traditional EECS/CS turnin system. Projects are due by the beginning of class on the due-date so please be sure you have your program turned in before then. For more information on turnin you can do 'man turnin' on any of the CS machines, but basically if you have a directory called 422 containing your project you would go to the directory level above 422 and type:
turnin -ccs422 -pProject1 422
were the -c tells which course and -p tells which project. Turnin has been turned on as of September 3rd.
last updated September 5, 2002
