Display Image While Sliding by Qt


Introduction

This article is something that I rewrite again in C++, a programming article in Python, Display Image While Sliding by PySide | DeVlog – Fly With Your Devil’s Wings –.

I will describe, as can be seen well in the slide-show, how to display image while sliding in the vertical and horizontal by Qt. I also touched on the Qt-Properties.

Note: The code following, I have validated in Qt4.8 + Ubuntu(Xubuntu)13.04, Windows7.

Put a “Label” to the Main Window

First, define a framework of the application. In the main window, try to place the “label” to display the image “hoge.jpg”. (Since slide later, please prepare the “hoge.jpg” not so large.) In addition, “setGeometry()” of line 15, is setting the size of the main window. Please give appropriate values for your environment.

I generated the label that displays the image as a child of MainWindow.

When you run, it is as follows.
image

Deal With Qt-Property

To slide the “label” as defined here, you can use the animation technology. There are several ways to run the animation in Qt. The way to use Property will be used most often. The animation is achieved by changing little by little “properties” which QObject has. In Qt, the entity of “property” is the so-called “Setter” and “Getter”. You can find access functions (“Setter” and “Getter”) in the reference. If you define a property, you must use “Q_PROPERTY” macro.

Define the Animation

Well, the purpose of this article, “slide” can be achieved by changing the “pos” property of QWidget. “pos” is a property of QPoint to retain the position of the upper-left corner of the object.

First, define QPropertyAnimation object.

It means that animates the “pos” property of the “label” object. You must give the propery name as a string.
After, define the duration spent on the animation, initial and end value of “pos”.

And, start the animation.

By inserting the definition of the series of QPropertyAnimation object “an” after window.show() of application framework at the first, it is completed. When you run these codes, they will work like the video that you can find at the beginning of this article.

In addition, I have defined QPropertyApplication object as local variables in the main function in this article. However, if you run start() function not holding the QPropertyApplication object until the end of animation, the animation will be terminated. (You may also see the animation so that it is not running at all.) Please be careful enough about the scope of the object.

And I’ve prepared here a complete source. Next time, I will describe the fade-in or fade-out of the image.

[Referenced Site]
The Property System | Documentation | Qt Project

[Related Site]
junf/QtSamples – GitHub –

[Related Articles]

  1. Display Images in Full-Screen by Qt, Multi-Platform GUI Lib | DeVlog – Fly With Your Devil’s Wings –
  2. Display Image While Sliding by PySide | DeVlog – Fly With Your Devil’s Wings –
  3. To Display Images in Full-Screen by PySide | DeVlog – Fly With Your Devil’s Wings –
  4. Fade in / Fade-out Images by PySide | DeVlog – Fly With Your Devil’s Wings –
  5. Realize Zoom-in and Zoom-out the Image in PySide | DeVlog – Fly With Your Devil’s Wings –

To Display Images in Full-Screen by Qt


Introduction

This article is something that I rewrite again in C++, a programming article in Python, To Display Images in Full-Screen by PySide | DeVlog – Fly With Your Devil’s Wings – . Because my understanding for Qt is more advanced than before, there is some difference in the content. (Knowledge of Python for reading this article is not required.)

Why I try to write this article is as follows roughly.

Recently, I’ve been programming in Python + PySide to make the application on multi-platform. PySide is a package that is binding multi-platform GUI library Qt to Python.

If I started programming actually, it was not complete to just read a reference of PySide, and I have often referred to the sample and reference of Qt. While I do that, and now I think “Do good even try to programming in Qt and C++”. I love C++ (I have been doing with it since DOS), but I had not used it most of the past few years. So, I decided to try in the C++ / Python parallel and also serves as rehabilitation. For the time being, I plan to replace the articles of Python that I wrote previously to them of C++.

I verified the codes in Qt4.8 + Ubuntu(Xubuntu)13.04, Windows7. The time being, I would want to do without QtCreator (IDE for Qt).

Display an Image

First, I’ll try to make a code to display an image in Qt. You will see the JPEG file called “hoge.jpg”.

Include the header file of Qt class name to use. Store the image to “QPixmap” object, set it to “QLabel” object by “setPixmap()” and display it by “show()” method. Although you would think that “label” is for displaying “text”, you can do as well in the “QLabel” display of images as well as text in Qt.

In order to compile on Linux this code to run in sequence three commands the following in the directory that contains the source.

In Ubuntu or Xubuntu, if qmake is not installed, please install it in the following manner.

In Windows (Visual Studio), use nmake instead of make. Let’s set the path. In my environment, it is following.

If the path is through, you can build the project in the following manner.

The first line is running vcvars32.bat. In order to set various path, you will need to run it only once for the first time you open the command prompt. It is located in the same folder as nmake.

Each command, the following functions.

Putting “hoge.jpg” in the same directory as the executable file and running it, a window appears on the desktop as follows.
normal2

In this case, in order to full-screen display after, I used a large sample image (1920×1503). Therefore, a small part of the image contains only displayed.

Display Image in Full Screen

By replacing “show()” to “showFullScreen()” in line 8, you can achieve the full-screen display. It is displayed in full screen as follows. (my environment is 1920×1080) There is even no frame of the window.
full2

However, “close button” does not appear in full screen state. You will need to be able to release the full screen by handling the key event. (If you happen to display in full screen without any measures, switch to another task by ALT + TAB, and then you can close the application from the taskbar.)

Get the Key Events of QLabel

“QLabel”, as one of the parts of GUI, is inherit “QWidget”. It has the method “keyPressEvent” to handle the key events. Define a class called “Screen” that inherits from “QLabel”, then you are going to be able to handle the ESC key to override the “keyPressEvent”. First, create a header file below.

If you want to create a class derived from “QObject”, you need to add always Q_OBJECT macro as described above at any time. You should be careful.

You can define “Screen::keyPressEvent” as follows.

If you press the ESC key, display is switched in maximum display or full screen. Please note that in order to return to the normal display, you are calling the “showNormal()”.

Note: If, without using the header file, you use only .cpp file, you must insert the following line after the declaration of class “Screen”. If you do not put this, moc (meta object compiler) will not be executed and vtable error will be occured.

If you use the header file, so configure the Makefile that qmake to run the moc automatically, the include statement is not required. Include statement comes out in the middle of the file so not beautiful too, using header file is genuinely good idea.

By using this “Screen” class instead of “QLabel”, you will respond to the ESC key.

If you press the ESC key in the state of being full screen display, display change to maximum as shown below. If in this state, you will be able to terminate the program in close button.
max2

The way of the adjustment of display position, please refer to the reference of “QLabel”.
In addition, since I have prepared here the complete code.

It is a short code, but when dealing with C++ after a long time, I was puzzled by simple really.

[Reference Site]
[Solved] Undefined reference to vtable – class in main.cpp | Qt Project forums | Qt Project

[Related Site]
junf/QtSamples – GitHub –

[Related Articles]

  1. Display Image While Sliding by Qt | DeVlog – Fly With Your Devil’s Wings –
  2. To Display Images in Full-Screen by PySide | DeVlog – Fly With Your Devil’s Wings –
  3. Behavior of “geometry” Property and “show” Method in PySide | DeVlog – Fly With Your Devil’s Wings –
  4. Display Image While Sliding by PySide | DeVlog – Fly With Your Devil’s Wings –
  5. Fade in / Fade-out Images by PySide | DeVlog – Fly With Your Devil’s Wings –
  6. Realize Zoom-in and Zoom-out the Image in PySide | DeVlog – Fly With Your Devil’s Wings –