On occasion, we will be using a tool called QtCreator to design basic user interfaces for some of our graphics applications. Qt and QtCreator are responsible for creating windows, buttons, and various other Widgets that a user can interact with. Typically, one of these widgets will be an OpenGL context in which will display our beautifully rendered 3D models.

While QtCreator is a full integrated development environment (IDE), providing an editor, debugger, compiler, user interface (UI) development, and probably fifteen other tools I'm unaware of. It is not required to use QtCreator for any of our projects this semester, but it does make designing user interfaces easier, so I will primarily be demonstrating its use for that sole purpose.

Using QtCreator for CS40 will require some one time setup. It is important to follow the directions below carefully, otherwise your code may not build in QtCreator and you will be unable to easily test your UIs. If done correctly, you should only need to perform this setup once per semester, so let's try it now.

Configuring QtCreator

Open QtCreator by typing

qtcreator &

at the terminal prompt. If you'd like to create a launcher in your toolbar, that's possible too, just ask on piazza or during some downtime for instructions.

You'll be presented with an overwhelming menu of panels, options, and toolbars. Go to the Tools->Options menu from the top menu bar as shown below

On the next screen, there will be four things to verify.

1. Kit->Qt Version
2. Kit->CMake path
3. Kit->Kit settings
4. Build & Run -> build dir

Start by selecting the Kits option on the left hand side of the window shown below.

1. Checking the Qt Version.

On the top set of tabs on the options window for Kits, select Qt Versions. We'd like it to say Qt 5.9.5. If there is some old missing version found, you can click the Clean Up button to remove broken paths. Then click Add... and type /usr/bin/qmake. Version 5.9.5 should then show up under manual versions. Click Apply at the bottom to save your changes.

2. Checking the CMake path.

On the top set of tabs on the options window for Kits, select CMake tab. QtCreator should autodetect multiple versions. We need to select the /usr/local/bin/cmake version (CMake 3.11.4) as the default. Highlight this line, and click the Make Default button.

3. General Kit settings.

On the top set of tabs on the options window for Kits, select Kits tab. Set the preferred compilers for C and C++ to be Clang (x86 64 bit), as shown in the first Kits screenshot above.

4. Changing the default build directories

For the last change, select Build & Run from the left hand side of the options screen. At the bottom of the General tab for this menu, change the default build directory to be simply ./build. No need to go crazy here.

Click Apply one last time, then OK. We should be ready to open one of our projects in QtCreator.

Opening a project in QtCreator

Once the default settings are configured in QtCreator, we are ready to open and run the projects provided in CS40 through github. We will start with the examples repo we cloned earlier.

In QtCreator, go to the top menu bar and select File->Open File or Project. Once the file manager opens, navigate to the top level CMakeLists.txt file. Note, for some projects, including examples, there will be multiple subdirectories containing a CMakeLists.txt file for different demos or libraries. However, you should always select the topmost CMakeLists.txt file.

If this is your first time importing the project, you may be asked to configure the project. Unless instructed otherwise, simply select only the Desktop kit as shown below and click Configure Project

If all goes well, QtCreator should run CMake for you and import all your source code into the QtCreator editor. You are not obligated to use this editor, and you can still edit, compile, and run files from the terminal as we did in the previous class. If you do want to run a program from inside QtCreator, select the build type, and the particular executable you want to run from the computer-ish icon in the lower left, then press the green arrow under that button to compile and run that application. In the screenshot below, I am selecting the qtimgtest application with Release with Debug Information flags, a sensible CMake default. A blank window should pop up if this application compiles and runs correctly.

One last tidbit before we do some actual work on actual code. By default, QtCreator, seems to be compiling with a single thread. Yawn. If you select the Projects button with the wrench/spanner icon on the left, and go down to Build Steps, expand Details, and add -j8, to the Tool arguments, you may find QtCreator building faster.

Summary

Ideally, configuring the kit is a once per semester task, and configuring a project is a once per week task that will become familiar and efficient over time. If you have issues with QtCreator setup or configuration, please let me know. This is not supposed to be a major focus of the course, and I don't want you spending hours on this.

We will primarily use QtCreator to design and edit small, basic UIs for our graphics applications. Once this task is complete, you can use any editor you like to modify source code, and the terminal is usually sufficient to compile and run applications. We illustrate the basics of UI design in the Qt Demo tutorial.