OpenCV(cv2.imshow)を外部ボタンから停止制御の方法

Question

"Digital Photo Slide view"なる物を作っていますが、
スライドビューで下記のサイトで凄く気に入ったので
利用したいと思い実装を考えました。
それはcv2.imshowで表示するのですが、
制御する為のframe(ｺﾝﾄﾛｰﾙ)を利用したCanvasに乗せれないと
サイト調べで理解しました。
そこでframe(ｺﾝﾄﾛｰﾙ)とcv2.imshowを横並びで表示して、
コントロールで制御と考えますが、
この方法は妥当でしょうか？

妥当として上記を進める場合、exit_buttonで、動画を止めて、cv2.imshowを
cv2.destroyWindow("Slide")と思っていますが、
試行錯誤を試みましたが、正解を見出せないでいます。
どなたか、知恵を貸して頂ければ思います。宜しくお願い致します

自分初心者程度の知識しか有りませんので、
コードを提示して頂ければ助かります。
又利用コードが複雑なため、全コードを提示します。

スライドビューの元サイト　Create a Moving Photo Slideshow with Weighted Transitions in OpenCV
https://www.learnpythonwithrune.org/create-a-moving-photo-slideshow-with-weighted-transitions-in-opencv/

関連する前回質疑：https://teratail.com/questions/342676

11.jpg
12.jpg
14.jpg
15.jpg
black.jpg

import tkinter as tk
from tkinter import ttk
import tkinter
import os
from PIL import Image, ImageTk
import cv2
import glob
import random
import threading

class Application(tk.Frame):
    def __init__(self, master):
        super().__init__(master)
        master.title("Digital Photo Slide view")
        master.geometry("125x480+70+70")
        ttk.Style().configure("TP.TFrame", background="gainsboro")
        self.main_frame = ttk.Frame(master=master, style="TP.TFrame", width=125, height=480)
        self.main_frame.pack()

        # load_button
        self.load_btn = tk.Button(self.main_frame, text="load_button", font=("", 12), bg="green", fg="white", relief=tk.FLAT)
        self.load_btn.place(x=10, y=150)

        # exit_button
        self.exit_btn = tk.Button(self.main_frame, text="exit_button", font=("", 12), bg="green", fg="white", relief=tk.FLAT)
        self.exit_btn.place(x=10, y=250)

        # top_button
        self.top_btn = tk.Button(self.main_frame, text="top_button", font=("", 12), bg="green", fg="white", relief=tk.FLAT)
        self.top_btn.place(x=10, y=350)

    def PhotoView(self):
        self.filelist=['./photo\11.jpg', './photo\12.jpg',  './photo\14.JPG', './photo\15.JPG']
        # Cl:class
        self.Cl = PhotoImageStack(self.filelist)
        self.preImage = self.Cl.get_image()
        self.Cl.add_image()
        self.nowImage = self.Cl.get_image()
        self.Cl.add_image()

# ?????????????????????????????????????????????????????????????????????????
        self.update_timer = self.preImage
        self.roop_image()


    def roop_image(self):
        load_nextimage = threading.Thread(target=self.Cl.add_image)
        # print(load_nextimage)
        if (load_nextimage):
            for i in range(100): #100回繰り返す 重なりタイム
                alpha = i/100
                beta = 1.0 - alpha
                # 画像を重ね合わせる cv2.addWeighted(src1, alpha, src2, beta, gamma)
                dst = cv2.addWeighted(self.nowImage.get_frame(), alpha, self.preImage.get_frame(), beta, 0.0)
                self.update_timer =cv2.imshow("Slide", dst)
                cv2.moveWindow("Slide", 195, 70)  # Window表示位置指定
                cv2.waitKey(10)

            for _ in range(300):  #300回繰り返す　表示タイム
                self.update_timer =cv2.imshow("Slide", self.nowImage.get_frame())
                cv2.waitKey(10)

            self.preImage = self.nowImage
            self.nowImage = self.Cl.get_image()
            load_nextimage = threading.Thread(target=self.Cl.add_image)
            # load_nextimage.start()
            self.update_timer = load_nextimage.start()
            self.roop_image()

        else:
            print("else")
            self.update_timer = None
    def stop(self):
        print("stop")
        # if self.update_timer():
        #     self.update_timer = None
        #     cv2.destroyWindow("Slide")

# ///// 元ソース /////////////////////////////////////////////////////////
#
#         while True:
#             for i in range(100): #100回繰り返す 重なりタイム
#                 alpha = i/100
#                 beta = 1.0 - alpha
#                 # 画像を重ね合わせる cv2.addWeighted(src1, alpha, src2, beta, gamma)
#                 dst = cv2.addWeighted(self.nowImage.get_frame(), alpha, self.preImage.get_frame(), beta, 0.0)
#                 cv2.imshow("Slide", dst)
#                 cv2.moveWindow("Slide", 180, 70)  # Window表示位置指定
#                 if cv2.waitKey(10) == ord('q'):  #Esc key
#                     return
#
#             for _ in range(300):  #300回繰り返す　表示タイム
#                 cv2.imshow("Slide", self.nowImage.get_frame())
#                 cv2.imshow("Slide", self.nowImage.get_frame())
#                 if cv2.waitKey(10) == ord('q'):  #Esc key
#                     return
#
#             self.preImage = self.nowImage
#             self.nowImage = self.Cl.get_image()
#             load_nextimage = threading.Thread(target=self.Cl.add_image)
#             load_nextimage.start()
#             print(load_nextimage)
#
# //////////////////////////////////////////////////////////////////////////////


class PhotoImage():
    def __init__(self, filename):
        size = 480
        time = 500
        self.filename = filename
        self.shifted = 0.0
        img = cv2.imread(filename)
        # OpenCVで画像の縦と横のサイズを求める
        height, width, _ = img.shape
        if width < height:
            n_height = int(height*size/width)
            o_width = size
            self.img = cv2.resize(img, (o_width, n_height))
            self.shift = n_height - size
            self.shift_height = True
        else:
            n_width = int(width*size/height)
            o_height = size
            self.shift = n_width - size
            self.img = cv2.resize(img, (n_width, o_height))
            self.shift_height = False
        self.delta_shift = self.shift/time


    def get_frame(self):
        size = 480
        if self.shift_height:
            roi = self.img[int(self.shifted):int(self.shifted) + size, :, :]
        else:
            roi = self.img[:, int(self.shifted):int(self.shifted) + size, :]
        self.shifted += self.delta_shift
        if self.shifted > self.shift:
            self.shifted = self.shift
        if self.shifted < 0:
            self.shifted = 0
        return roi


class PhotoImageStack:
    def __init__(self, filelist, size=3):
        self.stack = []
        self.cnt = (len(filelist))

        # 降順配列のまま
        self.ar_file = filelist

        # 配列先頭にblack.jpgを挿入する
        self.ar_file.insert(0, './photo/black.jpg')

        self.i = 0
        filename = self.ar_file[self.i]
        self.i += 1
        if self.i == self.cnt +1  : self.i = 0
        self.stack.append((filename, PhotoImage(filename)))
        # Lock used for accessing the stack
        self.stack_lock = threading.Lock()
        self.add_image_lock = threading.Lock()

    def get_image(self):
        self.stack_lock.acquire()
        filename, img = self.stack.pop()
        print(f"Get image {filename} (stack size:{len(self.stack)})")
        self.stack_lock.release()
        return img

    def add_image(self):
        self.add_image_lock.acquire()
        filename = self.ar_file[self.i]
        self.i += 1
        if self.i == self.cnt +1 : self.i = 0

        self.stack_lock.acquire()
        while any(item[0] == filename for item in self.stack):
            filename = self.ar_file[self.i]
            self.i += 1
            if self.i == self.cnt +1 : self.i = 0

        self.stack_lock.release()
        img = PhotoImage(filename)
        self.stack_lock.acquire()
        self.stack.append((filename, img))
        print(f"Add image {filename} (stack size: {len(self.stack)})")
        self.stack_lock.release()
        self.add_image_lock.release()

def main():
    root = tk.Tk()
    app = Application(master=root)

# ??????????????????????????????????????
    def exit_close(): # 全て閉じる
        print("exit_close")
        cv2.destroyWindow("Slide")
        # app.stop()

    def exit_top(): # Topへ 回答対象外
        print("exit_top")
        cv2.destroyWindow("Slide")
        # app.stop()
# ??????????????????????????????????????

    app.load_btn.config(command=app.PhotoView)
    app.exit_btn.config(command=exit_close)
    app.top_btn.config(command=exit_top)

    root.mainloop()

if __name__ == '__main__':
    main()

Answer 1

それはcv2.imshowで表示するのですが、
制御する為のframe(ｺﾝﾄﾛｰﾙ)を利用したCanvasに乗せれないと
サイト調べで理解しました。

前提について、
「imshowで表示されるウィンドウは」直接 Canvas に載せらせません。
（方法はあるが、プラットフォーム依存）ですが、

しかし、表示したいのが画像であれば、画像は Canvas に描画可能です。
データ形式の変換が必要ですが、PIL を使っているのでこの点は問題が無く、
tkinter に組み込むのであれば、スレッドを使わない方法もあります。
懸念は、cv2 の他の部分でしょうか。

そこでframe(ｺﾝﾄﾛｰﾙ)とcv2.imshowを横並びで表示して、
コントロールで制御と考えますが、 この方法は妥当でしょうか？

もし、現状の方針（スレッドを使う）で実装するならそうなります。

スレッド間の停止制御には threading.Event が使えますが、
まずは先にスレッドの使い方を見直した方が良いです。(大幅な変更が必用)

• スレッドを使う場合は、tkitner のスレッド、cv2 のスレッドの２つに別けます。

　これは、双方のライブラリがイベントループを持つため、
イベントループが競合し、どちらか片方がフリーズするのを回避する為です。
一般的な構成では、２つのスレッドを使う場合、
片方では tkinter しか扱わず、もう片方で cv2 のみ扱うようにします。
※ cv2 のバックエンド次第では、メインスレッドで使わないといけないような制限がある事もあるかもしれません。
その場合は、tkinterをサブスレッドで使うか、マルチプロセスにする。

• cv2.waitKey 等は入力所得が競合する為、何らかの対策が必要です。

　→ tkinterでキー入力を拾い、別スレッドへ通知

---

解説: 2つのスレッドで実装する

問題点:
Lockで排他制御する場合、GUI等のイベント駆動プログラミングでは
ロック獲得によるブロックが発生すると、ウィンドウのフリーズに繋がる為、
避ける傾向があります。

解決策: 代案としては、プログラムの構造自体を
リソース毎に担当のスレッドを決めて、そのリソースは担当のスレッドからしか操作しないように、
もし外部から操作したい場合は、queue 等を用いてスレッド間の通信で行う、とします。
今回のケースであれば、対象のリソースは tkinter と cv2 の２つに別ける。

起動時

• Sub(cv2): 準備後に、tkinter起動を待機 tk_started.wait()
• Main(tk): tkinter を起動
• Main(tk): イベントループを開始。tk_started.set() で Subスレッドの待機を解除
• Sub(cv2): イベントループ開始。スライドショー

停止処理

• Main(tk): shared.pause = True
• Sub(cv2): c2.waitKey(1) を呼び続けるループに入る(イベントループ継続の為)

終了処理

• Main(tk): shared.running = sharead.pause = False (停止状態解除と稼働フラグをオフに)
• Sub(cv2): フラグがオフになったことにより、イベントループを抜けて終了

---

訂正: ボタンによる別スレッドの停止のデモ (threading.Event の使い方サンプル)

Comments

[shin0859]

teamikl様
いつもアドバイス有り難うございます
自分の知識では、理解出来ない回答を頂きましたので、サンプル動作等でしばらく考えたいとおもいます。
取り敢えずコメントお礼いたします

[teamikl]

多分、そのまま適応は出来ません。
現状のコードが、画像ひとつにつき２スレッド？みたいになってるので、
まずはスレッドは合計で２つ（メインでtkinter＋サブでcv2)の形を目指してください。

質問のコードを軌道修正ではなく、参考元のコード (process) がベースなら
少ない変更で出来るかもしれません。
event = threading.Event()
thread = threading.Thread(target=process, args=(event,), daemon=True)
thread.start()

この後にメインスレッドで tkinter のコード。
cv2 は process() 関数内からしか使わないようにします。

[teamikl]

元のコードをベースにしたサンプル。
https://replit.com/@MiKLTea/TkCv2SlideShow#main.py
（画像やcv2ライブラリは構成してない為、サイト上で実行は出来ません）

[shin0859]

teamikl様　
サンプルコードを提示頂き大変有難うございます
filenamesを設定しましたら、完璧な動作でした。
コードを見ると、またまたちんぷんかんぷんでした。
コード自体も短くなってる？
長く掛かりそうですが、いろいろ調べて少しでも理解したいと思います。
取り急ぎ、お礼のコメントととして、有難うございました。
しばらく　開けておきます。

[teamikl]

画像の場所はスレッドへ引数で渡すようにしたり、
工夫できる余地はありますね。その辺は極力元コードを保ったままです。

一点訂正で、threading.Event での待機では、
cv2 のイベントループが止まってしまう為、
回答のサンプルコード(event.waitを使う)では、不都合がありそうでした。
誤誘導になりそうなので、この部分は取り下げます。

質問のコードのスレッドやLock使い方についても、いろいろあるのですが、
大まかな方針にだけ触れると、

Lock での排他制御 --> tkinter と cv2 の操作が混在している為。(※コードが複雑になりやすい)
Thread を別けると不要。MainThread: tkinter, SubThread: cv2 という構造にします。

- process() 内では cv2 のコードのみ。tkinter は直接使わない。
- main() 内では、tkinter のコードのみ。cv2は直接使わない。

Lock を避けるのは、イベントループ内でブロックされると、
ウィンドウが応答なしになる為です。

----
cv2側の処理は、スライドショーが停止中でも、
イベントループは稼働し続ける必要があります。

while pause: # スライドショー停止中、このループを繰り返す
　　cv2.waitKey(1) # イベントループを稼働させるために必要

イベントループが動いてないとウィンドウが応答なしになります。

Answer 2

teamikl様
その後の体調不良のため、コメント返しが遅くなり申し訳有りませんでした。（画面凝視で、めまいが暫く続きまして...）
本題ですが、その後の作図を交えた解説等、流れは大体理解できましたが、その一つ一つは理解不能と言うか 自分には及ばない高い知識の回答だと理解しました。（Websaite等で発信した方が、貴重な知識が多くの方に広まりそうですが...）
自分に於いては2021/06/25付け提示サンプルが、思い通りの動作なのでそれをベースに次に進めたいと思います。いろいろ有難うございました。

Comments

[teamikl]

「全体像の把握」が大切なので、大まかな流れが解れば大丈夫。
個別の項目については、カテゴリで言うと

- イベント駆動型プログラミング (GUI)
- 並行プログラミング。マルチスレッド、同期・排他制御

辺りの内容です。

プログラミング・パラダイムと呼ばれる分類で、
それぞれに、プログラミングの際の作法や注意点等があります。

今回の例で言えば、全体の流れ（図で説明したかった点）は、
"tkinter" と "cv2" の２つの「イベント駆動」のプログラムを
マルチスレッドで「平行に扱う」、といった組み合わせです。

書籍等でも、それぞれ個別に章割いて説明される位の分量のある内容なので
普通に学習しても、それなりに時間は掛かると思います。焦らず御自身のペースで進めて下さい。

オフトピですが、めまい対策には、目に優しいプログラミング環境作り
コーディングでも改善できる部分があって、一例を紹介すると

私の場合は、Python では self が大量にあると、疲れやすい傾向があったので、
エディタでの表示環境では self を薄くして目立たないように工夫したり、
逆に self を目立つ色に設定してる場合は、self を省く方向にコードをリファクタリングする等
自分でコードを書くときは極力 self を参照する頻度を下げる方法をとってます。

綺麗なコードは脳への負担も少なく、理解もしやすくなるはず。

----
cv2 は関係なくなりますが、
スライドショーのアニメーションをtkinterに移植しました。
https://replit.com/@MiKLTea/TkSlideShow#main.py