PythonでGUI付のアプリを作る話

こんばんは。忙しかったりで少し間が開いてしまいましたね。

最近、 Python で Windows 用の GUI アプリケーションを作ったりしてます。
CUI のアプリケーションは沢山作ってきましたけれども、やはり GUI があるとテンションが変わってきます。

特に、 Flet が便利というか、少ない記述でそれっぽくモダンなデザインにできて気に入っています。


そこで今回は Flet の Tips です。
案外こういうのってサクッと見付からないので、自分用の備忘も兼ねて書いておこうと思います。

趣味でカメラをやっているということもあり、画像をいじるアプリケーションとか作ってみたくなることがあります。
そうなると、 GUI 上に画像を表示して、画像の上をすべっていくマウスカーソルの位置が欲しくなりますよね。

Flet では、 GestureDetector を使用することで、簡単にマウスカーソルの位置を取得できます。
　　image = ft.Image(src="test_img.png")
　　gesture_detector = ft.GestureDetector(
　　　　content=image,
　　　　hover_interval=10,
　　　　on_hover=on_hover,
　　)
こんな感じに、 control を定義して、 def on_hover(e:ft.HoverEvent) を呼べば、 e.local_x とかで画像上の座標が取得できるわけです。

ところが、これだとマウスを画像の上に持って行っただけでずーっと取得し続けてしまいます。
押し込んでいる間だけ取得したい、とかっていうニーズは絶対にあると思うわけです。私がやりたいです。

そこで、以下のように定義しなおします。
　　gesture_detector = ft.GestureDetector(
　　　　content=image,
　　　　hover_interval=10,
　　　　on_hover=on_hover,
　　　　on_tap_down=img_click_on,
　　　　on_tap_up=img_click_off
　　)
これで、ローカル変数に is_click_on:bool とかフラグを定義して、 def img_click_on(e) などで操作してやればよい、というのが素直な思考です。
しかしやってみると、上手くいきません。

で、どうしたら良いのか、という話なんですけれども、 hover ではなく drag を利用します。
　　gesture_detector = ft.GestureDetector(
　　　　content=image,
　　　　drag_interval=10,
　　　　on_vertical_drag_update=on_drag,
　　　　on_horizontal_drag_update=on_drag
　　)
水平方向と垂直方向のドラッグの更新処理それぞれに、 def on_drag(e:ft.DragUpdateEvent) とか登録してやります。
画像上のカーソル位置は、先ほどと同じく、 e.local_x と e.local_y で分かります。

尚、 hover_interval と drag_interval は、ミリ秒でイベントの間隔を設定できます。 10ms でも 100Hz ですから十分でしょう。（デフォルトはゼロなので設定必須です。）

これを利用すると、虫眼鏡ツールや、指先ツールなどを実装できるようになる（かも知れません）。


以上。