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.

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 –

Your email address will not be published.