Qt Demo
For this exercise we will use QT Creator to design a simple image viewer
Make sure you have a qtImage directory in your w01-intro folder.
Run qtcreator then File->Open File or Project select the file ~/cs40/examples/CMakeLists.txt
In QT Creator you can edit, save, compile, and run code. It even integrates with your git repo.
When opening the project for the first time, QT Creator will ask for a build directory. Make a new directory build in your ~/cs40/examples folder and point QT Creator here
Click on the computer icon in the lower left and set the running application to qtimgtest. Click the green arrow to build and run this application. A simple window should pop up.
UI Design
click on mainwindow.ui in qtimage directory in QT Creator. Here you can add widgets and adjust the layout.
In the upper right corner, select the MainWindow widget. You can edit this widgets properties in the lower right menu. Find the windowTitle property and change it to "My First QT App". Run the QT green arrow again and see that the title has changed.
Adding Widgets
- Drag and drop two buttons and widget to the canvas
- Change button 1 to Load
- Change button 2 to Quit
- resize the widget to fit most of the window
- select the widget and enable autoFillBackground
- select the pallette property and change the color of Window to something visible (I use green in this example)
- Compile and run. The widgets don't resize
- Add a vertical spacer between the buttons.
- Stretch out the spacer
- Highlight the buttons/spacer and select align vertical from the top tool bar
- Add a horizontal spacer between the widget window and the vertical layout box
- Change some size policies
- set the horizontal spacer sizeType to Fixed
- set the widget SizePolicy to Expanding in the horizontal and vertical directions
- click in the main window and press the align horizontal button
- Compile, run, resize
Promoting Widgets
- Go to File->Add New File
- Select C++ Class
- Name the Class MyImageBox and have it inherit from QWidget
- add myimagebox.h and myimagebox.cpp to the qtimage/CMakeLists.txt file
- click on the main widget and select Promote Widget to MyImageBox
Slots and Signals
Graphical user interfaces such as QT have event handling mechanisms to process events like keypresses, mouse clicks, and menu selection. In QT this mechanism uses slots and signals. Events emit signals which can then be sent to slots.
- Go to Edit->Signals/Slots
- Drag the load button to green widget.
- Add an open() slot to the green widget.
- Connect the clicked() signal to the open() slot.
- Drag the quit button to the middle of the MainWindow (not the green widget).
- Select the checkbox that says "Show signals/slots inherited from QWidget"
- Connect the clicked() signal to the close() slot. You may need to click the "Show signals and slots inherited from QWidget" box to see the close() slot for the MainWindow.
- Compile and run. Quit button should work. Load button should not.
Add functionality to myimagebox.h
#include <QtWidgets>
...
public slots:
void open();
private:
QLabel *imageLabel;
QScrollArea *scrollArea;
QGridLayout *layout;
Implement in myimagebox.cpp
MyImageBox::MyImageBox(QWidget *parent) :
QWidget(parent)
{
imageLabel = new QLabel();
scrollArea = new QScrollArea(this);
scrollArea->setWidget(imageLabel);
layout = new QGridLayout();
layout->setContentsMargins(0,0,0,0);
layout->addWidget(scrollArea);
setLayout(layout);
}
void MyImageBox::open() {
QString fileName = QFileDialog::getOpenFileName(this,
"Open File", QDir::currentPath());
if (!fileName.isEmpty()) {
QImage image(fileName);
if (image.isNull()) {
QMessageBox::information((QWidget*)parent(), "Image Viewer",
QString("Cannot load %1.").arg(fileName));
return;
}
imageLabel->setPixmap(QPixmap::fromImage(image));
imageLabel->adjustSize();
}
}
Compile, Debug, Run, Test, Ponies!
Check the status of your source in git and update/commit and push your changes