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 –

Display Image While Sliding by PySide


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

Note: The code following, I have validated in Python3.3.

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 13, is setting the size of the main window. Please give appropriate values for your environment.

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. Animation in PySide is achieved by changing little by little “Properties” which QObject has.

“Properties” in Qt is designed so that it does not depend on the language, but its implementation seems to be somewhat different for each language. In PySide (Python), it is implemented as methods (so-called “Setter” and “Getter”). So, you do not know whether it is a “Property” while not see a reference in. If it is a property, it is in the description, such as “This property holds …”.

So, I think, if you look at the “Properties”, you had better to look at the reference of Qt (not PySide).

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.

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.

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

[Sites Referenced]
Using_Qt_Properties_in_PySide | Qt Wiki | Qt Project

[Related Sites]
junf/PySideSamples · 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. Fade in / Fade-out Images by PySide | DeVlog – Fly With Your Devil’s Wings –
  4. Realize Zoom-in and Zoom-out the Image in PySide | DeVlog – Fly With Your Devil’s Wings –