Behavior of “geometry” Property and “show” Method in PySide


I am developing applications that runs on Linux and Windows using PySide. In the process, I recently, so embarrassed a lot for the behavior of the “geometry” property of QMainWindow differs between Windows and Linux, so I investigated in detail.

Introduction

I wanted to do the following.

After the minimize, maximize, and full screen sized the main window, I want to know the current size of the window by code.

By running the QWidget.showMaximized / Minimized / FullScreen method, it is possible to change the window size to be displayed. (In the reference, there is a description indicating that showFullScreen() may not work well with X Window. But there is no inconvenience for now in use my range.) However, as described below, to know the display size from the current code, it works well on Windows, but it did not work on Linux.

How to Investigate

I have created the program that, by running each method show, showMaximized, showMinimized, showFullScreen, showNormal and setGeometry for QMainWindow, you can see how “geometry” property change. (Because it is unable to verify the value while displaying the window if you run the method before event loop, I made the methods run with delay of 100msec by QTimer. (Because the windows are displayed, the screen flickers a little at run time.)

Result

Here are the results of running checkShow.py, in the above-mentioned, on Windows7, Xubunutu13.04 and Ubunutu13.04 in the same PC (with VirtualBox environment: Host Windows, Guset Linux) with a screen size of 1920×1080. I listed the value of the “geometry” of the property at each stage. (It cut the redundant part of the actual display.)

The values of the QRect are, the first two are the position (the coordinates of the upper left) and the following two are the size (width x length).

On Windows

On Xubuntu/Ubuntu

The results on Ubuntu and Xubuntu were the same.

Summary

From the above results, I’ve found the following facts about “geometry” property.

  • Both on Windows and Linux, the value before running show() is (0, 0, 640, 480). (I think that it is VGA size).
  • After running show(), size is changed to 200×100 on both OS. However, the display position differs by OS. On Linux, it is the upper-left corner. And on Windows, it is shifted slightly to the lower right.
  • On Windows, after running showMaximized/FullScreen/Normal, “geometry” is set to the size of the window that is actually displayed. However, on Linux, those methods do not change the “geometry”.(Display itself is changed to be maximize or full sized or normalized. These facts mean that the value of the “geometry” and the actual window that is displayed does not match.)
  • showMinimized() method does not change “geometry” on Windows (also Linux). Perhaps, it seems that minimize is equivalent to be invisible.
  • Of course, setGeometry change the “geometry” on both OS.

From these results, you can find that on Windows you can know the current window size from “geometry” property, but there is a possibility that the current window size does not match the “geometry” in the case of Linux. On Linux, if you want to match the window size and the “geometry”, you should culculate the size of your own and run setGeometry().

[Related Site]
junf/checkshow

[Related Articles]

[Referenced Sites]


Realize Zoom-in and Zoom-out the Image in PySide


This time, let’s zoom in or zoom out the image using PySide. In this way, you will get the effect to be displayed while the enlargement or reduction image. Before you read this article, to be easier to understand, you should read
Display Image While Sliding by PySide | DeVlog – Fly With Your Devil’s Wings –.

I have verified in Python3.3 also this article.

Make the Skeleton of the Application

First, make the skeleton of the application as usual. Display the “label” that displays an image “hoge.jpg” in the main window “wndow”. Please adjust as necessary parameters of setGeometry.

When you run, the image is displayed in the upper left corner.
base

How to Achieve the Zoom

QLabel has a property called “scaledContents”. By setting it to “True”, the image stored in it will be enlarged or reduced to be displayed the same as the size of the label. Using this property, without the operation to expand or shrink the image itself, zoom can be achieved with only zoom in or out “label”.

You can write a method to get the zoom animation as follows. Give QLabel objects as “target”, and give zoom magnification of the first and last to “mag1”, “mag2” (0-1).

You can realize the zoom by using “setScaledContents(True)” to set “scaledContents” “True” and animating the “size” property of QLabel.
Because QSize object (mapsize) has over-loaded “*” operator, new QSize object can be obtained simply by multiplying the magnification. We are lucky to be able to use “Operator overloading” even in Python.

To run the animation, run the start method of animation object.

To Zoom on the Basis of the Image Center

If zoomed on the basis of the image center, the image will protrude from window while placing the image in the upper left corner. Therefore, as first prepared, place the image to window center. Such as the following, create a method to calculate “pos” (upper left corner of the image) in the case where you place the image which width is “width” and height is “height” to the center of the parent object “parent”.

Using this method, place the image to window center.

center

So, try to think again the zoom of the central fixed. Zooming with left upper being fixed is that “pos” is fixed. Because “pos” is by definition coordinate of the upper left corner of the target, it is obvious. To put it the other way around, if the central fixed, “pos” changes with zooming.
zoom

This is, you should make an animation that changes also “pos” at the same time as the zoom of the image. Please also see Display Image While Sliding by PySide | DeVlog – Fly With Your Devil’s Wings – for the animation to change the “pos” (slide the image).

Fist, define a method to get the animation to change “pos” from pos1 to pos2.

Next, prepare a method to calculate the position of the “pos” when zoom the target.

Then, create a method to get the animation to zoom at a fixed target center. By using the QParallelAnimationGroup, you can run at the same time the move and zoom. (As an example of using the QSequentialAnimationGroup, see also Fade in / Fade-out Images by PySide | DeVlog – Fly With Your Devil’s Wings –.)

When you run start() method of the animation object, you can obtain effects such as those shown at the beginning of this page. In addition, since I have prepared here the complete code, please try to run it prepared “hoge.jpg”.

[Related Site]
junf/PySideSamples · GitHub

[Related Articles]

  1. To Display Images in Full-Screen by PySide | DeVlog – Fly With Your Devil’s Wings –
  2. Display Image While Sliding by PySide | DeVlog – Fly With Your Devil’s Wings –
  3. Fade in / Fade-out Images by PySide | DeVlog – Fly With Your Devil’s Wings –

Fade in / Fade-out Images by PySide


In previous article, I described how to slide the image by using animation. This time, let’s challenge to how to fade in / fade out the image. In addition, I also discussed how to connect multiple animations.

As ever, I have been verified by Python3.3 any code.

Put the Basic Image

As usual, I’ll make the first skeleton. As easy to see how the fade-in, let’s display image “fuga.jpg”, slightly larger, as an image of the background.

When you run, it is as follows.
bg

Then, over this background, try to display the image “hoge.jpg”, small a little. Add the following code.

When you run, “hoge.jpg” will be displayed in the upper left corner over the “fuga.jpg” as follows.
bg_fg

Note the first line of the [Code 2]. I’m giving as an argument, “blabel” when generating the “flabel”. In this way, “flabel” is treated as a child of “blabel”. (The parent of “flabel” is “blabel”) In the way, “flabel” is displayed in the interior of the “blabel”.

Set the Opacity Effect

You were ready for basic part so far. So you’ll think about the realization of fade-in. To fade in the “hoge.jpg”, the file should be transparent in advance, and be opaque gradually. This, the effects “opaque”, you can represent in “QGraphicsOpacityEffect” object. You can set the opacity effects to “hoge.jpg”, do the following.

Initial value of opacity of “QGraphicsOpacityEffect” is 70%. You can change this value in the method “setOpacity”. It is as follows when displayed at 50%.
OpacityEffect

Realize Fade-in

Because “opacity” is a “property”, it can be realized fade-in if animated using “QPropertyAnimation”. The method that returns the fade-in animation, you can be defined as follows.

You will give “target” to “QGraphicsOpacityEffect” object to be animated. And give “duration” to the time spent in the animation in msec. You can fade in view in the following manner.

It is as follows when you run.

There is one caveat here. The animation object, you must choose not to be destroyed until the end of the animation. It is for this reason to make ​​up the method “fadein()” to return the animation object. You do not get the effect of animation if “fadein()” performs the method “start()” on the inside and not return the animation object. Because the animation objects is destroyed when returned from “fadein()”.

Define the Fade-out

After understand “Fade-in”, “Fade-out” is obvious. You can define the method by the following. You only need to replace the end value as the initial value of the animation.

Connect Fade-in and Fade-out

Now, try to fade out after fade in. Code 5 is rewritten as follows.

With “QAnimationGroup”, you can treat multiple animations together as a single animation. In a derived class of “QAnimationGroup”, “QSequentialAnimationGroup” allows you to connect to order multiple animations. As described above, and then run the animation in the order in which they were added in “addAnimation()”. “addPause()” make a suspended state between animation and animation.

In addition, “QParallelAnimationGroup” is also derived class “QAnimationGroup”. This can be done at the same time the animation that you have registered. You can be realized, such as fade-in while slide. Look at the reference of each class that came out in this article, please try to adjust the detailed settings.

In addition, I have provided in here the complete code.
[Referenced Site]
PySide_Pitfalls | Qt Wiki | Qt Project

[Related Site]
junf/PySideSamples · GitHub

[Related Article]

  1. To Display Images in Full-Screen by PySide | DeVlog – Fly With Your Devil’s Wings –
  2. Display Image While Sliding by PySide | DeVlog – Fly With Your Devil’s Wings –
  3. Realize Zoom-in and Zoom-out the Image in PySide | DeVlog – Fly With Your Devil’s Wings –