Spring 06 Project 1 - iConditioner

More on Project 1  

For the assignments in this class you have a choice of user interface toolkit that you wish to use. Good options are Swing for Java, fltk for C or C++, or wxWidgets for a c++ or Python. The limitation is that we need to be able to check your program on the CS department linux machines on the second floor of SEL.

Project 1 will give you a chance to program a small interface and get used to the UI toolkit of your choice 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, icons, or other elements borrowed from others must be cited in the work and in the README file.


Now onto the project itself.

The iConditioner is a Computer controlled thermostat.

Thermostats to control central heating and cooling in a house or apartment used to look like this:

classic round thermostat

Now programmable digital ones are becoming more common with small b/w LCD screens and a few physical buttons, and some even with touch-screens.

It is also possible now, and more likely in the future, that you will be able to control your thermostat remotely and wirelessly from a tablet-PC-like device. This device could be used within the apartment / house or it could be taken with you to control the temperature at home while you are on vacation somewhere else.


The interface hardware:

The user interface


You also need to write a simulated furnace / air conditioner to run in the background:
It is important to note that this system is designed to be used by 'normal people' so there is a need to balance more powerful features with the desire to keep from confusing the user.

You may want to look at some real programmable thermostats (including some touch-screen ones) for ideas, but  in general they do not have very intuitive user interfaces - so don't pick up bad habits from them. Remember that the user might be seeing/controlling the interface from work or from the beach, so feedback will be important. Keep the concepts from class in mind: making things visible, good mappings, good feedback, designing for error.

I would suggest writing the simulation code first, but I would also think about the kind of controls the user will need to have as hooks into the simulation.

The project will be graded on whether it works, as well as whether it has a reasonably good user interface given what we have talked about in class so far. Both are required to get a C or above. So, for example, writing a fully functional application that gives the user a touch screen keyboard and a command prompt to interact with the system would not get a very good grade.

Turning in Project 1

The project is due at the beginning of class on 2/7/06

Make sure your project works on the linux machines 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.

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. I would suggest using an html-based readme file so you can include images in it.

We will be using the traditional 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 -c cs422 -p Project1 422

were the -c tells which course and -p tells which project. Turnin definitely works from bert.cs.uic.edu


Presenting Project 1

An important part of creating user interfaces is getting feedback and using it to improve your design. Given the class size, this can be a bit of a challenge. On 2/7 and 2/9, after the project has been turned in, we will have some group discussions and presentations about the solutions to Project 1.

On Tuesday 2/7 the class will break into 8 groups. Each group will compare notes on their solutions to the problem and come to an agreement on a single interface design. This design does not have to be implemented; it should be presented as a series of screen snapshots/mockups for the major functions.

Before Thursday's class each group should create a web page with the team members' names, the screen snapshots, and a description of how the interface will be used. The address of this page should be emailed to Andy before class begins on Thursday.

On Thursday 2/9 each of the 8 groups will give a 8 minute presentation on the combined interface that their group came up with, using their web page, showing the snapshots and giving a brief description of its functionality. 

Here are the web pages that the various groups came up with:

Chris
Rick
Felix
Joe 
http://www.rickdogg.com/cs422/cs422.html
Final Version settings
Samuel
Mandeep
Dubi
http://www.cs.uic.edu/~spro/
Final Version settings
Arunan
Marco
Vijay
http://arunan.50webs.com/cs422p1.html
Final Version settings
Brian
Sana
James B.
http://www.amaze-inc.com/Brian/CS422/GroupProject1/GroupProject1.htm
Final Version settings
Bindu
James J.
Manisha
http://www2.uic.edu/~mrajku2/cs422/proj1.htm
Final Version settings
Cristian
Benjamin
Cara
http://home.earthlink.net/~dxvii/422/
final design
Dat
Darshan
Greg
www.sapne.net/datdarshangreg.html
final design settings
Satya
Eric
Bharath
http://www.cs.uic.edu/~eho/cs422/project1/
Final Version settings

On 3/9 the class broke into new groups and revised the designs, coming up with the following:

Cristian
Chris
Ben
version 2 version 2
Brian
Marco
Manisha 
version= 2 version 2
Darshan
Dubi
James Vijay
version 2 version 2
Mandeep
Arunan
Satya
James
version 2 version 2
Sana
Joe
Eric
Dat
version 2 version 2
Bharath
Greg
Rick
Bindu
version 2 version 2


What happens if we look at these as someone who is colour blind?

Final Version Final Version
Final Version Final Version
Final Version Final Version
Final Version Final Version
Final Version Final Version
final design final design
final design final design
Final Version Final Version


and here is a shell script to get the current outside temperature using wget which is available for unix/linux asnd windows ...

#!/bin/sh

# uses wget: http://www.gnu.org/software/wget/wget.html

# cities: http://my.aol.com/weather
# Chicago: USIL0225

city="USIL0225"

wget -q -O toto.txt "http://my.aol.com/weather/index.psp?city=$city"
grep 'Current Temperature' toto.txt | awk '{print $3}'
/bin/rm -f toto.txt 


 

Fall 02 Project 1

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