Qt Lab #2

Useful links

• Courses: Qt page - HCI Courses - UE IGR201b
• Qt: Qt5 - GWidgets - Classes
• C++: Doc C++ - Cours C++ - UE INF224

Step 1: Create a new project

Create a new Qt project (to go faster you can copy the source files of the first lab, then add them to the project). So far, the main difference with the previous project is that it will display a widget for drawing shapes instead of text in the central area.

For this purpose, you need to declare and implement a class (in new files .h and .cpp) that inherits from QWidget. For now this class will not do much: it will just have a proper constructor. The default size of a QWidget being null (as widgets' size is by default computed by considering the elements they contain), use the setMinimumSize() method to enforce an adequate size. Create an instance of this class, make it appear in the central area, then compile and test.

Step 2: Drawing a line interactively

Modify your class so that the user can now draw a line interactively:

• A press event will start drawing the line
• A release event will end drawing the line
• A move event adjust the position of the line, so that its ending follows the cursor.

Step 3: Specifying graphical attributes

Modify your class and the application in order to make it possible to specify the color, the thickness and the style of the line before drawing it. Make it simple a this stage, for instance you can just provide a small set of colors to the user (e.g. in a menu or as a set of exclusive buttons).

Step 4: Drawing other geometric shapes

Modify your source code so that you can now either draw a line, a rectangle, or an ellipse interactively (the user will need to select which shape she wants to draw before drawing it)

Note:: have a look at the next question as you may want to do both simultaneously.

Step 5: Drawing multiple shapes

In the previous questions, the user could only draw one shape. The goal of this question is to make it possible to draw as many shapes as needed. Importantly, the user may wish to draw different shapes with different graphical attributes (e.g. a red line, then a blue ellipse).

Notes:

• This question requires creating a display list, that is to say a list containing all the shapes that have been drawn by the user (and their corresponding graphical attributes). For this purpose you can either use standard C++ lists or vectors (std::vector, std::list) or Qt lists (QList).
• The display list will contain objects of different types (lines, rectangles, ellipses). What is the typical solution that is used in Object-Oriented Programming for solving such a problem? Alternatively, you can also use QPainterPath .
• Memory management tends to be error prone when using C++ because this language does not provide a garbage collector. Hence, please check there are no memory leaks, or pending pointers that could crash the program.

Step 6: Editing the shapes

The goal of this question is to allow editing the shapes that were previously drawn (by selecting, moving and resizing them, and changing their graphical attributes).

Note: Selecting shapes requires detecting if the mouse is located on the outline of the shape (or, possibly, inside the shape if the shape is closed). This operation is called picking and Qt classes such as QRect, QRectF, QPainterPath, etc. provides methods (intersects(), contains()) that helps this task (Incidentally, note that this is especially helpful when dealing with non trivial shapes such as bezier curves or shape combinations).

Step 7: Ask for confirmation before exiting the program

As in Lab #1, make sure that the user cannot exit the program without saving the data (see last question of Lab #1).

Step 8: (Optional) Using QtDesigner

The goal of this question is to add a control panel to your user interface using Qt Designer. In this panel you will add widgets (e.g. sliders) for controlling graphical attributes in a more sophisticated way than in Step 3. The actual purpose of this step is to learn how to use Qt Designer and how to mix standard widgets classes with your own classes.

Notes:

• To use Designer, just double click on MainWindow.ui in QtCreator. Note that the MainWindow constructor must now start with ui-> setupUi (this) . This statement instantiates the widgets that were created using Designer and make them to appear.
• To connect the widgets created by using Designer with the slots that you implemented in the C++ code, the simplest solution is to use autoconnection.
• To access these widgets in the C++ code (e.g. to change their values) have a look at ui_MainWindow.h (this file is hidden, to make it visible click on "Projects" (top left) then select "File system").

Step 9 (optional): Read and save shapes

Following the same principle as in Lab #1, implement a "read" and a "save" slot that perform these operations and connect them to the appropriate buttons or menu items

Note: Qt objects, in particular QPen and QPainterPath are serializable, which ease this task.

Exercice Report

Please follow the following instructions to avoid mistakes and undesirable problems:

• Please check that your project compiles and executes correctly on a Linux machine at Télécom: your "client" is not supposed spending time debugging your source code, similarly, we won't accept projects that have not been properly tested.
• Write a short README indicating which questions you answered and containing all explanations you'll find useful. This file must be in PDF or in text format (UTF-8 encoding). Do not forget to put your name in all files (especially in the README).
• Create a directory called LastName__FirstName (last name first please!). If your first or last name contains spaces, use _ instead. Remove .o files, but keep the Qt designer .pro file. Zip your directory, either in .zip or .tar.gz format (no other format accepted).
• Finally, upload your zip file to the eCampus Web page.