Exercise 1: Usability
Winter Term 2011/12
In the lecture, we were talking about the term usability. Organize yourself in couples; one has to think loudly while doing the exercise, the other one is supposed to take notes.
Unit 1: Goto the university’s home page atwww.uni-rostock.de. From there, find the Vorlesungsverzeichnis. From there, find this class’s home page, i.e., programming graphical user interfaces.
Unit 2: Goto the university’s home page atwww.uni-rostock.de. From there, find the current term dates.
Unit 3: Go to the faculty’s home page atwww.ief.uni-rostock.de. From there, find a valid Studienordnung for the studies in electrical engineering.
Unit 4: Assume that you are from out of town, have never been in Rostock, and have to visit the University’s president. Where can you find helpful directions.
Unit 5: Figure out how you can book a Ryanair flight from L¨ubeck to Stansted. Warning:
Do not do any booking!
Unit 6: Start the programkorganizer. Create an entry for the 1st of July 2010. Create another entry for the period starting at the 1st of August and ending at the 10th of September 2010. Modify the entry of the 1st of July 2010, e.g., another time or another subject. Show the period between the 8th and the 10th of June in the day/week display.
Unit 7: Create a “toy” programjojoby typing in the following commands:
echo ’echo hi there && sleep 1’ > jojo chmod 755 jojo
and try it by typing in./jojo. Create the following “links:”
1. a link to run thejojo-program from the desktop (background) 2. a link to run thejojo-program from the panel (bottom line)
Have fun, Matthias and Ralf.
Exercise 2: A Notes Application
Winter Term 2011/12
In order to introduce the paperless office, handwritten notes may be stored on a computer. This goal may be achieved by a simple notepad application. How could such an application look like? Which functionality should be provided? What are the relevant usability aspects? How can colors improve the usability? Which colors associate particular meanings to the user?
Design a graphical user interface for such a notepad application that incorporates the considera- tions discussed above. Use paper and a pencil to arrange the layout of your notepad application.
Pay strong attention to usability.
Have fun, Matthias and Ralf.
2
Exercise 3: Events
Winter Term 2011/12
The lecture was about several events that are being send between various windows in a graphical user interface. Under theX11window system, the commandxevreports all events that are sent to a particular window.
Unit 1: Start the commandxevand note all the incoming events.
Unit 2: Which types of events are received (at least 10)?
Unit 3: What is denoted by the additional parameters?
Unit 4: What are the events that are initiated by the mouse buttons?
Have fun, Matthias and Ralf.
Exercise 4: Procedures versus Call Backs
Winter Term 2011/12
As opposed to regular C-style programming, graphical user interfaces adopt the idea of call-back functions. This exercise is supposed to give you some ideas about this scheme.
Unit 1: Implement a regular C-function that simulates a regular traffic light. The functions output should be in ASCII; a complete cycle may look as follows:
R RY
G Y
withR,Y,Gindicating red, yellow, and green, and indicating a blank or a dot. Your function should print three complete cycles.
Unit 2: Convert your function into a call-back function. To this end, the function has to remember its own “state”. In each call, the function should print its current state and should advance to the next one.
Question: What parameters does this function require?
Unit 3: Convert your function from the previous unit into a regular C++ class.
Have fun, Matthias and Ralf.
4
Exercise 5: Qt - Tutorial, Chapter 1-3
Winter Term 2011/12
In this exercise, you will be learning the basics of Qt programming. The first three chapters introduce the signal-and-slot mechanism.
The manual is available at /opt/qt-tut/html/tutorial.html. Get a copy of the sources from either/opt/qt-tut/sourceor the class’s web page
http://www.imd.uni-rostock.de/ma/rs/lv/hoqt/tutorials.zip
To compile a program, do the following steps:
1. Download the tutorial sources and store them in a directory of your choice.
2. Change to that directory by using the commandcd <directory-name>in a shell.
3. Unpack the material by usingunzip tutorials.zip or just copy the sources from /opt/qt-tut/source.
4. Go to the directory of a tutorial you are interested in. There, typeqmakeand thenmake.
Work through the first three chapters.
Modify the tutorial program in a way that thehello-windowappears again after the first close and that the program terminates after the second one.
Have fun, Matthias and Ralf.
Exercise 6: Qt - Tutorial, Chapters 4-6
Winter Term 2011/12
Chapters 4 to 6 are dealing with the creation of an own widget, the use of the signal-and-slot mechanism, and the layout of widgets in a window.
Work through Chapters 4 to 6 of the tutorial. Make the following changes in order to understand how the parts work together.
1. Chapter 4: change the minimum and maximum size of the window.
2. Chapter 5: change the range and the start value. What happens, if you omit the
layout->addWidget()-method calls? Why do some window not appear on the screen?
How can you make them appear?
Have fun, Matthias and Ralf.
6
Exercise 7: Your First Own Widgets
Winter Term 2011/12
In this exercise, you will be learning how to implement your own widgets.
Unit 1: Combine aspinboxwith aslider, such that both are always in synchrony. That is, if you change the slider’s position, thespinboxshould be automatically chang- ing as well, and vice versa. The focus of this exercise is on the connections of signals and slots.
Unit 2: Build a widget that consists of an LCD display and a slider underneath it. Put two additional push buttons next to the right and left of the slider. These push buttons should decrease/increase the slider’s value. Key question: which slots of the slider do you have to use?
Unit 3: Push Button - LED Display:
Create a simple application that consists of a widget programmed by yourself. The widget consists of only a group of three LED-displays each with one push button underneath it.
Note: Since Qt does not provide a particular LED, you might be using an LCD widget with one number, and visualizing “on” and “off” by “1” and “0”, respectively.
Implement the following functionalities one after the other:
1. A click on one of the three push buttons should switch on the corresponding LED and switch off all others.
2. A click on any of the push buttons should move forward the LED, i.e., one is on, the others are off, by one position.
3. The LEDs should be acting like a binary counter, which is incremented by a click on any of the buttons.
Unit 4: RGB-Color Control:
Create a widget that can be used as a color chooser. The displayed color should be adjustable by using three controls for red, green, and blue, respectively. Display the current values of the controls.
Please note: The background color of a widget can be adjusted by using the method setPalette(QPalette(QColor(r,g,b))).
Have fun, Matthias and Ralf.
Exercise 8: Using Timer Objects
Winter Term 2011/12
Generally, a graphical user interface responses to user actions, such as a mouse click on a button.
This scheme does not work, if the programmer would like to run a periodic background process, such as a simulation, that might be modified or quit by the user. In such cases, timer objects can help.
Unit 1: Reuse the traffic light application from Exercise 4. Change the program such that it displays its current state within a widget. Then, use a timer object that let the traffic light advance to the next state every two seconds.
Unit 2: Implement a stopwatch that should contain astop-button, a start-button, and a display (QLCDNumber) that displays the elapsed time in seconds.
Have fun, Matthias and Ralf.
8
Exercise 9: An Application with Menues and Bars
Winter Term 2011/12
Most real-world application contain elements, such as a menus and various bars. This exercise shows how to program this in Qt.
Unit 1: Browse through the Qt class documentation of QMainWindow, and answer the fol- lowing questions:
1. What are the components of a fully-fleshed real-world application?
2. What are the basic methodsQMainWindowprovides for adding such compo- nents?
3. What classes does Qt provide for handling menues and bars?
Unit 2: Preparation: Create a QMainWindow-application that merely contains a label as its central widget. If you like, center the label. But please, do not waste more than 5 minutes on that task as its just optical sugar.
Unit 3: Extensions: Add a few menu points to the application’s menu bar, Then, you should add some entries to the menus you have just created. Furthermore, add some actions to the menu bar as well as to the menus. Compile and run your program. What is the effect of the action objects so far?
Unit 4: Building Connections: To take advantage of actions, they have to be connected to some (useful) slots. As a simple example, replace your central label with a cus- tomized label that provides a public slottrigger(). On slot’s invokation, the label should show up some text for a limited periode of time. After the time has expired, the text should vanish again. Connect the actions’ signals to the label’s slot.
Unit 5: Design: Use separators to optically divide menus from actions in the menu bar and all sub menus. What can be observed?
Have fun, Matthias and Ralf.
Exercise 10: Creating a Makefile
Winter Term 2011/12
The lecture was on how to compile and build a program that has been split up into more than one C-file. Themake-tool can support this task in a very efficient way.
Unit 1: Write a simple “Hello World” program. Move the part that outputs the text (i.e., the printf() function call), into a separate file hello.c. Edit an appropriate interface filehello.hin order to use the subroutine in themain.cprogram. Write aMakefilethat maintains the program structure. Use a variableCCin the makefile to define the compiler, e.g.,CC=gcc.
Unit 2: A “real” makefile is often a bit more complicated, especially if you are using Qt- files. Go to the directory of tutorial 7. The source files are lcdrange.cpp, lcdrange.h, and main.cpp. Take a look at the Makefile, and answer the following questions:
1. What is the program structure, i.e., which file depends on which one?
2. Which commands are used to create one file type from another one?
In order to validate theMakefile, do the following tasks:
1. Touch the filelcdrange.cpp(by using the commandtouch) and execute make. What does the command touch? Browse the comand’s description man touch.
2. Do the same with the filelcdrange.h.
Which files need to be compiled in the two cases? What have you observed?
Have fun, Matthias and Ralf.
10
Exercise 11: Robot Application
Winter Term 2011/12
In this last exercise, you should be developing a real-world, robot application. You can choose from two different robots, Khepera and a the e-Puck robot.
The application should be complete in that it contains a main-window and optinally menus, a toolbar as well as a statusbar. Also, the program should feature the required functionality.
Furthermore, a usability might be a main key point of your design and development.
The implementation of your application is being supported in that the class’ home page
http://www.imd.uni-rostock.de/ma/rs/lv/lvgui.htmlprovides some low-level Qt classes as well as the documentation.
Have fun, Matthias and Ralf.
