Python | DeVlog - 銀の翼で翔べ -

PySide での show メソッドと geometry の挙動

PySide を使って Linux/Windows で動作するアプリケーションを作成しています。最近、QMainWindow の “geometry” プロパティの挙動が Linux と Windows とでは異なるためにいろいろと戸惑ったので、実際に調べてみました。

はじめに

私がやりたかったのは、

メインウインドウを最大化、最小化、フルスクリーン化した後、ウインドウの現在のサイズをコード上で知る

という事です。QWidget.showMaximized/Minimized/FullScreen メソッドを実行することで、表示されるウインドウサイズを変化させる事はできます。(リファレンスでは、showFullScreen() は X Window ではうまく動かない可能性がある旨記述がありますが、私の利用範囲では今のところ不都合ありません。) しかし、以下で述べるように、コードから現在の表示サイズを知るのは、Windows ではうまくいきますが、Linux ではうまくいきませんでした。

調査方法

QMainWindow に対して、show, showMaximized, showMinimized, showFullScreen, showNormal, setGeometry の各メソッドを実行して、”geometry” プロパティがどのように変化するのか表示するプログラムを作成しました。
イベントループに入ってからメソッドを実行しないとウインドウが表示された状態の値を確認できないため、QTimer で 100msec の遅延を発生させてから実行しています。(ウインドウが表示されるため、実行時に多少画面がちらつきます。)

結果

1920×1080 のスクリーンサイズを持つ同一 PC (Windows をホスト、Linux をゲストとした VirtualBox 環境) にて、上記 checkShow.py を Windows7, Xubunutu13.04, Ubunutu13.04 で実行した結果を以下にあげます。各段階での “geometry” プロパティの値を一覧にしています。(実際の表示の冗長な部分は削って有ります。)
※QRect の値は、最初の２つのパラメータが位置(左上の座標)、次の２つが大きさ(横x縦)です。

Windows の場合

before show:                     QRect(0, 0, 640, 480)
after show:                      QRect(488, 354, 200, 100)
after showMaximized:             QRect(0, 22, 1920, 1018)
after showMinimized:             QRect(0, 22, 1920, 1018)
after showFullScreen:            QRect(0, 0, 1920, 1080)
after showNormal:                QRect(488, 354, 200, 100)
after setGeometry:               QRect(100, 100, 300, 400)
after showMinimized again:       QRect(100, 100, 300, 400)

before show: QRect(0, 0, 640, 480)

after show: QRect(488, 354, 200, 100)

after showMaximized: QRect(0, 22, 1920, 1018)

after showMinimized: QRect(0, 22, 1920, 1018)

after showFullScreen: QRect(0, 0, 1920, 1080)

after showNormal: QRect(488, 354, 200, 100)

after setGeometry: QRect(100, 100, 300, 400)

after showMinimized again: QRect(100, 100, 300, 400)

Xubuntu/Ubuntu の場合

Xubuntu と Ubuntu では結果は同じでした。

before show:                     QRect(0, 0, 640, 480)
after show:                      QRect(0, 0, 200, 100)
after showMaximized:             QRect(0, 0, 200, 100)
after showMinimized:             QRect(0, 0, 200, 100)
after showFullScreen:            QRect(0, 0, 200, 100)
after showNormal:                QRect(0, 0, 200, 100)
after setGeometry:               QRect(100, 100, 300, 400)
after showMinimized again:       QRect(100, 100, 300, 400)

before show: QRect(0, 0, 640, 480)

after show: QRect(0, 0, 200, 100)

after showMaximized: QRect(0, 0, 200, 100)

after showMinimized: QRect(0, 0, 200, 100)

after showFullScreen: QRect(0, 0, 200, 100)

after showNormal: QRect(0, 0, 200, 100)

after setGeometry: QRect(100, 100, 300, 400)

after showMinimized again: QRect(100, 100, 300, 400)

まとめ

上記の結果から、”geometry” プロパティに関して以下の事がわかりました。

Windows / Linux 共に、show() の実行前は、仮の値として (0, 0, 640, 480) が入っている(VGA サイズということかと思われます)。
show() を実行すると、両者ともサイズは 200×100 に変化する。ただし、表示位置は OS によって異なる。Linux では左上隅に、Windows ではやや右下にシフトした位置になる。
Windows では、showMaximized/FullScreen/Normal の実行後、”geometry” は実際に表示されたウインドウのサイズに設定されるが、Linux ではこれらのメソッドは “geometry” を変化させない。(表示そのものは、最大化/フルサイズ/通常化します。つまり、表示されている状態と “geometry” の値が一致しません。)
Windows でも (Linux も) showMinimized() は、”geometry” を変化させない。おそらく、ウインドウをただ見えなくしているだけという事だと思われる。
もちろん、setGeometry() は、Windows / Linux 共に “geometry” を変化させる。

この結果から、Windows であれば、実際にウインドウが表示されていれば現在のウインドウサイズを “geometry” プロパティから知ることができますが、Linux の場合には “geometry” と現在のウインドウサイズが一致していない可能性があることがわかります。Linux では、自前で大きさを計算して setGeometry() で設定しないと両者を一致させられないようです。

[関連サイト]
junf/checkshow

[関連記事]

[参考にしたサイト]

PySide でズームイン／ズームアウトを実現する

今回は、PySide を使って画像をズームイン／ズームアウトしてみます。このやり方で、画像を拡大/縮小しながら表示するエフェクトが得られます。この記事を読む前に、PySide で画像をスライドさせる | DeVlog – 銀の翼で翔べ – を読んでいただくとより理解しやすいと思います。

今回の記事も Python3.3 で検証しています。

アプリケーションの骨格を作る

まず、いつものようにアプリケーションの骨格を作っておきます。メインウインドウ(window)内に、画像(hoge.jpg)を表示するラベル(label)を表示します。setGeometry のパラメータを必要に応じて調整してください。

import sys
from PySide import QtCore
from PySide import QtGui

app = QtGui.QApplication(sys.argv)
window = QtGui.QMainWindow()

label = QtGui.QLabel(window)
pixmap = QtGui.QPixmap('hoge.jpg')
label.setPixmap(pixmap)
label.resize(pixmap.size())

window.setGeometry(100, 100, 900, 700)
window.show()

sys.exit(app.exec_())

import sys

from PySide import QtCore

from PySide import QtGui

app = QtGui.QApplication(sys.argv)

window = QtGui.QMainWindow()

label = QtGui.QLabel(window)

pixmap = QtGui.QPixmap('hoge.jpg')

label.setPixmap(pixmap)

label.resize(pixmap.size())

window.setGeometry(100, 100, 900, 700)

window.show()

sys.exit(app.exec_())

実行すると左上角に画像が表示されます。

どのようにズームを実現するのか

QLabel には “scaledContents” というプロパティがあります。これを True に設定しておくと、中に格納されたイメージはラベルの大きさと同じになるように拡大／縮小されて(ラベルいっぱいに)表示されます。この特性を使えば、画像そのものを拡大／縮小する操作をしなくても、ラベルの拡大／縮小だけでズームが実現できます。

以下のようにズームアニメーションを取得するメソッドを書けます。target として QLabel オブジェクトを与え、mag1, mag2 に最初と最後のズーム倍率(0 〜 1)を与えます。

def zoom(target, duration, mag1, mag2)
    target.setScaledContents(True)

    animation = QtCore.QPropertyAnimation(target, "size")
    animation.setDuration(duration)

    mapsize = target.pixmap().size()
    animation.setStartValue(mapsize * mag1)
    animation.setEndValue(mapsize * mag2)

    return animation

def zoom(target, duration, mag1, mag2)

target.setScaledContents(True)

animation = QtCore.QPropertyAnimation(target, "size")

animation.setDuration(duration)

mapsize = target.pixmap().size()

animation.setStartValue(mapsize * mag1)

animation.setEndValue(mapsize * mag2)

return animation

setScaledContents(True) で “scaledContents” を True にし、QLabel の “size” プロパティをアニメーション化することでズームを実現します。QSize オブジェクト (mapsize) には ‘*’ 演算が定義(オーバーロード)されているので、倍率を掛け算するだけで新しい QSize オブジェクトが得られます。Python でも演算子のオーバーロードが使えるんですね。

アニメーションを実行するには、アニメーションオブジェクトの start メソッドを実行します。

an = zoom(label, 10000, 1, 2)
an.start()

1 2	an = zoom(label, 10000, 1, 2) an.start()

画像中央を基準にズームするには

先ほどの例では、左上角が固定されてズームされています。画像中央を中心として拡大/縮小していくようなエフェクトについても考えてみます。

画像中央を中心とする場合は、画像が左上のままでははみ出てしまいますので、まず準備として、画像を中央に配置しておきます。
以下のような、親オブジェクト(parent)の中央に、幅 width, 高さ height の画像を配置する場合の “pos” (画像の左上角) を計算するメソッドを作り、

def posOnParentCenter(parent, width, height):
    c = parent.rect().center()
    return QtCore.QPoint(c.x() - width / 2, c.y() - height / 2)

def posOnParentCenter(parent, width, height):

c = parent.rect().center()

return QtCore.QPoint(c.x() - width / 2, c.y() - height / 2)

このメソッドを使って画像をウインドウ中央に配置します。

label.move(posOnParentCenter(window, label.width(), label.height()))

1	label.move(posOnParentCenter(window, label.width(), label.height()))

それでは、中央固定のズームについて、あらためて考えてみます。左上固定の場合というのは、”pos” が固定しているという事です。”pos” はターゲットの左上角の座標ですから当然といえば当然です。逆に言うと、中央固定の場合、ズームと共に “pos” が変化するという事です。

つまり、画像のズームと同時に “pos” も変化するアニメーションを作れば良いのです。”pos” を変化させる(画像をスライドさせる)アニメーションについては、すでに PySide で画像をスライドさせる | DeVlog – 銀の翼で翔べ – で解説していますのでそちらも参照してください。

では、最初に “pos” を pos1 から pos2 に変化させるアニメーションを取得するメソッドを定義します。

def move(target, duration, pos1, pos2):
    animation = QtCore.QPropertyAnimation(target, "pos")
    animation.setDuration(duration)
    animation.setStartValue(pos1)
    animation.setEndValue(pos2)

    return animation

def move(target, duration, pos1, pos2):

animation = QtCore.QPropertyAnimation(target, "pos")

animation.setDuration(duration)

animation.setStartValue(pos1)

animation.setEndValue(pos2)

return animation

次に、ターゲットをズームした時の “pos” の位置を計算するメソッドを作っておきます。

def posZoomed(target, mag):
    g = target.geometry()
    c = g.center()
    return QtCore.QPoint(c.x() - g.width() / 2 * mag, c.y() - g.height() / 2 * mag)

def posZoomed(target, mag):

g = target.geometry()

c = g.center()

return QtCore.QPoint(c.x() - g.width() / 2 * mag, c.y() - g.height() / 2 * mag)

そして、ターゲット中央を固定してズームするアニメーションを取得するメソッドを作成します。QParallelAnimationGroup を使うことで、zoom と move を同時に実行します。(QSequentialAnimationGroup を使った例として、PySide で画像をフェードイン/フェードアウト | DeVlog – 銀の翼で翔べ – も参照して下さい。)

def zoom2(target, duration, mag1, mag2):
    target.setScaledContents(True)

    an_zoom = QtCore.QPropertyAnimation(target, "size")
    an_zoom.setDuration(duration)

    mapsize = target.pixmap().size()
    an_zoom.setStartValue(mapsize * mag1)
    an_zoom.setEndValue(mapsize * mag2)

    ang = QtCore.QParallelAnimationGroup()
    ang.addAnimation(an_zoom)

    pos1 = posZoomed(target, mag1)
    pos2 = posZoomed(target, mag2)
    an_pos = move(target, duration, pos1, pos2)
    ang.addAnimation(an_pos)

    return ang

def zoom2(target, duration, mag1, mag2):

target.setScaledContents(True)

an_zoom = QtCore.QPropertyAnimation(target, "size")

an_zoom.setDuration(duration)

mapsize = target.pixmap().size()

an_zoom.setStartValue(mapsize * mag1)

an_zoom.setEndValue(mapsize * mag2)

ang = QtCore.QParallelAnimationGroup()

ang.addAnimation(an_zoom)

pos1 = posZoomed(target, mag1)

pos2 = posZoomed(target, mag2)

an_pos = move(target, duration, pos1, pos2)

ang.addAnimation(an_pos)

return ang

このメソッドで返されるアニメーションオブジェクトの start() メソッドを実行すると、このページの最初に示したようなエフェクトが得られます。
なお、完全なコードをこちらに用意しましたので、hoge.jpg を用意して実行してみてください。

[関連サイト]
junf/PySideSamples · GitHub

[関連記事]

PySide で画像をフェードイン／フェードアウトする

前回の記事では、アニメーションを利用して画像をスライドさせる方法について記述しました。今回は、画像をフェードイン／フェードアウトする方法に挑戦してみます。また、複数のアニメーションをつなげる方法についてもふれます。

今回も、コードは全て Python3.3 で検証しています。

基本の画像を配置する

例によって、まず骨格を作ります。フェードインの様子が分かりやすいように、少し大きめの画像 “fuga.jpg” を背景の画像として表示させましょう。

import sys
from PySide import QtCore
from PySide import QtGui

app = QtGui.QApplication(sys.argv)

blabel = QtGui.QLabel()
bmap = QtGui.QPixmap('fuga.jpg')
blabel.setPixmap(bmap)
blabel.resize(bmap.size())
blabel.show()

sys.exit(app.exec_())

import sys

from PySide import QtCore

from PySide import QtGui

app = QtGui.QApplication(sys.argv)

blabel = QtGui.QLabel()

bmap = QtGui.QPixmap('fuga.jpg')

blabel.setPixmap(bmap)

blabel.resize(bmap.size())

blabel.show()

sys.exit(app.exec_())

実行すると以下のようになります。

次に、この背景の上に、少し小さな画像 “hoge.jpg” を表示させてみます。以下のコードを追加します。

flabel = QtGui.QLabel(blabel)
fmap = QtGui.QPixmap('hoge.jpg')
flabel.setPixmap(fmap)
flabel.resize(fmap.size())
flabel.show()

flabel = QtGui.QLabel(blabel)

fmap = QtGui.QPixmap('hoge.jpg')

flabel.setPixmap(fmap)

flabel.resize(fmap.size())

flabel.show()

実行すると、以下のように hoge.jpg が fuga.jpg の左上に表示されます。

[Code 2] の 1行目に注目して下さい。”flabel” の生成時に、”blabel” を引数として与えています。このようにすると、”flabel” は “blabel” の子として扱われます。(“blabel” は “flabel” の親) こうすることで、”flabel” は “blabel” の内部に表示されます。

不透明エフェクトを設定する

ここまでで基本部分の準備ができました。では、フェードインの実現について考えてみます。”hoge.jpg” をフェードインするには、予め “hoge.jpg” を透明にしておき、徐々に不透明にしていきます。この、「不透明」なエフェクトは、QGraphicsOpacityEffect オブジェクトで表現できます。hoge.jpg に不透明エフェクトを設定するには、以下のようにします。

effect = QtGui.QGraphicsOpacityEffect()
flabel.setGraphicsEffect(effect)

1 2	effect = QtGui.QGraphicsOpacityEffect() flabel.setGraphicsEffect(effect)

QGraphicsOpacityEffect の「不透明度」の初期値は 70% です。この値は setOpacity メソッドで変更できます。50% で表示すると以下のようになります。

フェードインを実現する

この「不透明度」は “opacity” というプロパティになっていますので、QPropertyAnimation を使ってアニメーション化すればフェードインが実現できます。フェードインアニメーションを返すメソッドは、以下のように定義できます。

def fadein(target, duration):
    an = QtCore.QPropertyAnimation(target, "opacity")
    an.setDuration(duration)
    an.setStartValue(0)
    an.setEndValue(1)
    return an

def fadein(target, duration):

an = QtCore.QPropertyAnimation(target, "opacity")

an.setDuration(duration)

an.setStartValue(0)

an.setEndValue(1)

return an

“target” にはアニメーション化する QGraphicsOpacityEffect を、”duration” にはアニメーションにかける時間を msec で与えます。以下のようにしてフェードイン表示できます。

an = fadein(effect, 2000)
an.start()

1 2	an = fadein(effect, 2000) an.start()

実行すると以下のようになります。

ここで一つ注意です。アニメーションオブジェクトは、アニメーションが終わるまで破棄されないようにする必要があります。fadein() メソッドが、アニメーションオブジェクトを返すようにしてあるのはそのためです。もし fadein() が内部で start() まで実行し、アニメーションオブジェクトを返さないと、fadein() から戻った時点でアニメーションオブジェクトが破棄されてしまうためアニメーションの効果は得られません。

フェードアウトを定義する

フェードインがわかればフェードアウトは自明ですね。以下のメソッドで定義できます。アニメーションの初期値と終了値を交換するだけです。

def fadeout(target, duration):
    an = QtCore.QPropertyAnimation(target, "opacity")
    an.setDuration(duration)
    an.setStartValue(1)
    an.setEndValue(0)
    return an

def fadeout(target, duration):

an = QtCore.QPropertyAnimation(target, "opacity")

an.setDuration(duration)

an.setStartValue(1)

an.setEndValue(0)

return an

※2013/05/29 メソッド定義部分のインデントが無かったので修正しました。

フェードイン／アウトをつなげる

では、最後にフェードインしてからフェードアウトするようにしてみます。Code 5 を以下のように書き換えます。

ag = QtCore.QSequentialAnimationGroup()
ag.addAnimation(fadein(effect, 2000))
ag.addPause(2000)
ag.addAnimation(fadeout(effect, 2000))
ag.start()

ag = QtCore.QSequentialAnimationGroup()

ag.addAnimation(fadein(effect, 2000))

ag.addPause(2000)

ag.addAnimation(fadeout(effect, 2000))

ag.start()

QAnimationGroup を使うと、複数のアニメーションをまとめて一つのアニメーションとして扱う事ができます。QSequentialAnimationGroup は QAnimationGroup の派生クラスで、複数のアニメーションを順番につなげる事ができます。上記のように、addAnimation() で追加した順番にアニメーションを実行します。addPause() は、アニメーションとアニメーションの間に一時停止状態を作ります。

なお、QParallelAnimationGroup も QAnimationGroup の派生クラスで、こちらは登録したアニメーションを同時に実行できます。スライドしながらフェードイン等が実現できます。

本記事で出てきた各クラスのリファレンスを見て、細かな設定を調整してみてください。なお、完全なコードをこちらに用意しました。

[参考にしたサイト]
PySide_Pitfalls | Qt Wiki | Qt Project

[関連サイト]
junf/PySideSamples · GitHub

[関連記事]

DeVlog – 銀の翼で翔べ –

J-run のプログラミングメモとか・・・

タグ: Python

PySide での show メソッドと geometry の挙動

はじめに

調査方法

結果

Windows の場合

Xubuntu/Ubuntu の場合

まとめ

PySide でズームイン／ズームアウトを実現する

アプリケーションの骨格を作る

どのようにズームを実現するのか

画像中央を基準にズームするには

PySide で画像をフェードイン／フェードアウトする

基本の画像を配置する

不透明エフェクトを設定する

フェードインを実現する

フェードアウトを定義する

フェードイン／アウトをつなげる