Exercise 1: Usability Winter Term 2018/19

(1)

Exercise 1: Usability

Winter Term 2018/19

In the lecture, we were talking about the termusability. Organize yourself in couples; one has to think loudly while doing the exercise, the other one is supposed to take notes.

Important Note: The usage of help sites, such as google, isnotallowed. Also, do not use search options, such as the university’s Mitarbeitersuche.

The University of Rostock’s Website

Unit 1: Go to the University’s home page www.uni-rostock.de and find the current term dates (Vorlesungszeiten).

Unit 2: Go to the faculty’s home page www.ief.uni-rostock.de. From there, (1) find a validStudienordnungfor the studies in electrical engineering and (2) find the currentPromotionsordnung.

Unit 3: Start at the university’s home page and find the library’s home page.

Unit 4: Go to the home page of the library of the University of Rostock. Please find the place where you can make a reservation of a private group working place.

Unit 5: Go to the University’s home page www.uni-rostock.de Where can you find public photo copy machines at ITMZ (the computer science building)?

Unit 6: Go to the University’s home page www.uni-rostock.de. What are the princi- ple’s (Rektors) room and phone numbers?

Unit 7: Go to the University’s home page www.uni-rostock.de and find our sports sciences department, and look up Professor Bruhn’s phone number.

Unit 8: Go to the University’s home pagewww.uni-rostock.de and find Prof. Bernd Kreikemeyer’s home page.

Unit 9: Go to the University’s home pagewww.uni-rostock.deand find the Mitarbeit- ersuche.

Unit 10: Go to the University’s home pagewww.uni-rostock.deand find students sports recreation’s home page (Seite des Hochschulsports).

Unit 11: Go to the University’s home pagewww.uni-rostock.deand find the Antrag auf R¨uckerstattung privat verauslagter Mittel.

1

(2)

Unit 12: Go to the University’s home pagewww.uni-rostock.deand find the Antrag auf Genehmigung einer Dienstreise.

Unit 13: Go to the University’s home pagewww.uni-rostock.deand find the Hotelliste (die offiziellen Hotels der Uni Rostock bzw. des Landes Mecklenburg-Vorpommern).

Linux

Unit 1: Start a program with the namex-terminal-emulator

Unit 2: Start the program korganizer. Create an entry for the 21st of October 2018.

Create another entry for the period starting at the 16th of October and ending at the 23rd of October 2018. Modify the entry of the 21st of October 2018, e.g., another time or another subject. Mark your vacation which is from the 28th of October to the 8th of November 2018.

Unit 3: 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 a “links” on the panel (left line).

Unit 4: Restart the computer.

Have fun, Theo and Ralf

(3)

Exercise 2: A Notes Application

Winter Term 2018/19

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.

3

(4)

Exercise 3: Events

Winter Term 2018/19

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?

(5)

Exercise 4: Procedures versus Call Backs

Winter Term 2018/19

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.

5

(6)

Exercise 5: Qt - Tutorial, Chapter 1-3

Winter Term 2018/19

In this exercise, you will be learning the basics of Qt programming. The first three chapters introduce thesignal-and-slotmechanism.

The complete tutorials, including the description and source files, are available at /opt/lehre/qt-tut/qt-tut.zip. The top-level file of the tutorials is called html/tutorial.html.

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.

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.

(7)

Exercise 6: Qt - Tutorial, Chapters 4-7

Winter Term 2018/19

Chapters 4 to 7 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 7 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?

7

(8)

Exercise 7: Your First Own Widgets

Winter Term 2018/19

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))).

(9)

Exercise 8: Using Timer Objects

Winter Term 2018/19

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.

Hint: In order to see something useful on the screen, you should take a look at the following method:QWidget::setFixedSize().

Unit 2: Implement a stopwatch that should contain astop-button, a start-button, and a display (QLCDNumber) that displays the elapsed time in seconds.

9

(10)

Exercise 9: Creating a Makefile

Winter Term 2018/19

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?

(11)

Exercise 10: Creating a Simple Dialog

Winter Term 2018/19

Dialogs are another element of almost all applications with a graphical user interface. This exercise covers the basics of their creation and usage.

Unit 1: Define your own dialog class for dialogs that have the following properties:

• Such a dialog should contain our “regular” educational elements, such as a slider and an LCD number, as well as aclose-button. In addition, it should be displaying a label and asubmit-button.

• On invocation of theclose-button, the dialog should be returning the current value of the slider, and it should also disappear (but not be destroyed).

• The dialog should also be containing a method/slot that makes it appear on the screen. This method/slot should have a parameter that is to be displayed as the text.

Before doing any programming, visualize the entire dialog with all its signals, slots, and connections.

Unit 2: Create an instance of this dialog and test its functionality.

Unit 3: Integrate your new dialog class into some sort of simple application. This application, for example, should contain a button for showing it up and an LCD number for displaying the configured (and submitted) value.

11

(12)

Exercise 11: An Application with Menues and Bars

Winter Term 2018/19

Most real-world applications 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 following questions:

1. What are the components of a fully-fleshed real-world application?

2. What are the basic methodsQMainWindowprovides for adding such components?

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 slot trigger(). On the slot’s invocation, the label should display 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 the sub menus. What can be observed?

(13)

Exercise 12: Robot Application

Winter Term 2018/19

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.

13