チェックボックス部分を表示の切り替わるボタンに置き換えて現在の機構を再現したい。

Question

前提・実現したいこと

チェックボックス部分にチェックを入れたり外したりすることで、機能を切り替える仕組み作りました。
これをtkinterのみでトグルボタンに置き換えて、機能を再現したいと考えていますが。
構文が思いつかず、このサイトを頼った次第です。

発生している問題・エラーメッセージ

構文が思いつかず、syntax errorしか作れていません。

該当のソースコード

組み込み先のデータです。
チェックボックス（チェックボタン？）部分のみの置き換えで記述していただければ幸いです。

#tkinterのインポート
import tkinter as tk

# ウィンドウを作成
root = tk.Tk()
root.title("Hello, World!")
root.geometry("500x300")

b = tk.Label(text="コントロール画面")
b.pack()

def btn_click1():
    if( var.get() == True):
        print('txt_1.(/・ω・)/にゃー!')
        txt_1.insert(tk.END,'(/・ω・)/にゃー!')
    else:
        print('txt_1.(」・ω・)」うー!')
        txt_1.insert(tk.END,'(」・ω・)」うー!')

def btn_click2():
    if( var.get() == True):
        print('txt_2.(/・ω・)/にゃー!')
        txt_2.insert(tk.END,'(/・ω・)/にゃー!')
    else:
        print('txt_2.(」・ω・)」うー!')
        txt_2.insert(tk.END,'(」・ω・)」うー!')
    
def btn_click3():
    if( var.get() == True):
        print('txt_3.(/・ω・)/にゃー!')
        txt_3.insert(tk.END,'(/・ω・)/にゃー!')
    else:
        print('txt_3.(」・ω・)」うー!')
        txt_3.insert(tk.END,'(」・ω・)」うー!')

var = tk.BooleanVar()

def change():
    if( var.get() == True):
        button1.config(text='(/・ω・)/にゃー!')
        button2.config(text='(/・ω・)/にゃー!')
        button3.config(text='(/・ω・)/にゃー!')
    else:
        button1.config(text='(」・ω・)」うー!')   
        button2.config(text='(」・ω・)」うー!') 
        button3.config(text='(」・ω・)」うー!')

def clear():
    txt_1.delete(0,tk.END)
    txt_2.delete(0,tk.END)
    txt_3.delete(0,tk.END)

t_btn = tk.Checkbutton(variable=var, text="(」・ω・)」うー!  /  (/・ω・)/にゃー!",command = change, width=20).place(x=30, y=30)

button1 = tk.Button(root, text='(」・ω・)」うー!', command=btn_click1)
button1.place(width=80, x=30, y=80)
button2 = tk.Button(root,text='(」・ω・)」うー!',command = btn_click2)
button2.place(width=80, x=30, y=120)
button3 = tk.Button(root,text='(」・ω・)」うー!',command = btn_click3)
button3.place(width=80, x=30, y=160)

Clear_button = tk.Button(root,text='クリア',command = clear)
Clear_button.place(width=50,x=25,y=250)

txt_1 = tk.Entry(width=50)
txt_1.place(x=120, y=82)

txt_2 = tk.Entry(width=50)
txt_2.place(x=120, y=122)

txt_3 = tk.Entry(width=50)
txt_3.place(x=120, y=162)

root.mainloop( )

トグルボタンは下記のHPを参考にしました。
ボタンの位置指定の書き換えも失敗しているので、その個所も教えていただければ幸いです。
Simple Tkinter Toggle Button

import tkinter as tk

def toggle(tog=[0]):
    tog[0] = not tog[0]
    if tog[0]:
        t_btn.config(text='(/・ω・)/にゃー!')
    else:
        t_btn.config(text='(」・ω・)」うー!')
root = tk.Tk()
t_btn = tk.Button(text="(」・ω・)」うー!", width=20, command=toggle)
t_btn.pack(pady=5)
root.mainloop()

試したこと(9/21追記)

ボタンに置き換えと表示の切り替えはできるようになったが、機能の切り替えがうまくいかない。
btn_click1～3にtoggle()が切り替わった情報を入れる方法がわからない。

#tkinterのインポート
import tkinter as tk

# ウィンドウを作成
root = tk.Tk()
root.title("Hello, World!")
root.geometry("500x300")

b = tk.Label(text="コントロール画面")
b.pack()

def btn_click1():
    if(toggle() == tog[0]):
        print('txt_1.(/・ω・)/にゃー!')
        txt_1.insert(tk.END,'(/・ω・)/にゃー!')
    else:
        print('txt_1.(」・ω・)」うー!')
        txt_1.insert(tk.END,'(」・ω・)」うー!')

def btn_click2():
    if(toggle() == tog[0]):
        print('txt_2.(/・ω・)/にゃー!')
        txt_2.insert(tk.END,'(/・ω・)/にゃー!')
    else:
        print('txt_2.(」・ω・)」うー!')
        txt_2.insert(tk.END,'(」・ω・)」うー!')
    
def btn_click3():
    if(toggle() == tog[0]):
        print('txt_3.(/・ω・)/にゃー!')
        txt_3.insert(tk.END,'(/・ω・)/にゃー!')
    else:
        print('txt_3.(」・ω・)」うー!')
        txt_3.insert(tk.END,'(」・ω・)」うー!')


def clear():
    txt_1.delete(0,tk.END)
    txt_2.delete(0,tk.END)
    txt_3.delete(0,tk.END)


def toggle(tog=[0]):
    tog[0] = not tog[0]
    if tog[0]:
        t_btn.  config(text='(/・ω・)/にゃー!')
        button1.config(text='(/・ω・)/にゃー!')
        button2.config(text='(/・ω・)/にゃー!')
        button3.config(text='(/・ω・)/にゃー!')
        return not tog[0]

    else:
        t_btn.  config(text='(」・ω・)」うー!')
        button1.config(text='(」・ω・)」うー!')   
        button2.config(text='(」・ω・)」うー!') 
        button3.config(text='(」・ω・)」うー!')
        return not tog[0]


t_btn = tk.Button(text="(」・ω・)」うー!", width=20, command=toggle)
t_btn.place(width=100,x=30, y=30)


button1 = tk.Button(root, text='(」・ω・)」うー!', command=btn_click1)
button1.place(width=80, x=30, y=80)
button2 = tk.Button(root,text='(」・ω・)」うー!',command = btn_click2)
button2.place(width=80, x=30, y=120)
button3 = tk.Button(root,text='(」・ω・)」うー!',command = btn_click3)
button3.place(width=80, x=30, y=160)

Clear_button = tk.Button(root,text='クリア',command = clear)
Clear_button.place(width=50,x=25,y=250)

txt_1 = tk.Entry(width=50)
txt_1.place(x=120, y=82)

txt_2 = tk.Entry(width=50)
txt_2.place(x=120, y=122)

txt_3 = tk.Entry(width=50)
txt_3.place(x=120, y=162)

root.mainloop( )

Comments

[teamikl]

本題ではないかもしれませんが、気になった点。

t_btn = tk.Checkbutton(～略～).place(x=30, y=30)
では、place() の 戻り値が t_btn に入る為、None になってしまうので、
後々ウィジェットを参照する場合は、pack/grid/place は１行にせず
下に掲載されてるコードのように別けて書く必要があります。

掲載のコードは正常に実行できたので、どこがエラーになったのか解りませんが、
t_btn 変数関連でエラーになってた場合は、見直してください。
(SyntaxError は心当たり有りません。この場合は大抵AttributeError になります)

Answer 1

回答内容を参考にし、以下の通りにしました。

#tkinterのインポート
import tkinter as tk

# ウィンドウを作成
root = tk.Tk()
root.title("Hello, World!")
root.geometry("500x300")

b = tk.Label(text="コントロール画面")
b.pack()


def clear():
    txt_1.delete(0,tk.END)
    txt_2.delete(0,tk.END)
    txt_3.delete(0,tk.END)

def toggle():
    global var
    if var == 0:        
        var = 1 
        var1.set('(/・ω・)/にゃー!')
        var2.set('(/・ω・)/にゃー!')
        var3.set('(/・ω・)/にゃー!')
        button_var.set('(/・ω・)/にゃー!')

    else:                
        var = 0        
        var1.set('(」・ω・)」うー!')
        var2.set('(」・ω・)」うー!')
        var3.set('(」・ω・)」うー!')
        button_var.set('(」・ω・)」うー!')

def btn_click1():
    if var1.get() == '(」・ω・)」うー!':
        txt_1.insert(tk.END,'(」・ω・)」うー!')
    else:
        txt_1.insert(tk.END,'(/・ω・)/にゃー!')

def btn_click2():
    if var2.get() == '(」・ω・)」うー!':
        txt_2.insert(tk.END,'(」・ω・)」うー!')
    else:
        txt_2.insert(tk.END,'(/・ω・)/にゃー!')

def btn_click3():
    if var3.get() == '(」・ω・)」うー!':
        txt_3.insert(tk.END,'(」・ω・)」うー!')
    else:
        txt_3.insert(tk.END,'(/・ω・)/にゃー!')

var = 0

var1 = tk.StringVar()
var2 = tk.StringVar()
var3 = tk.StringVar()
button_var = tk.StringVar()

var1.set('(」・ω・)」うー!')
var2.set('(」・ω・)」うー!')
var3.set('(」・ω・)」うー!')
button_var.set('(」・ω・)」うー!')

t_btn = tk.Button(textvariable=button_var, width=20, command=toggle)
t_btn.place(width=100,x=30, y=30)


button1 = tk.Button(root, textvariable=var1, command=btn_click1)
button1.place(width=80, x=30, y=80)
button2 = tk.Button(root, textvariable=var2,command = btn_click2)
button2.place(width=80, x=30, y=120)
button3 = tk.Button(root, textvariable=var3,command = btn_click3)
button3.place(width=80, x=30, y=160)

Clear_button = tk.Button(root,text='クリア',command = clear)
Clear_button.place(width=50,x=25,y=250)

txt_1 = tk.Entry(width=50)
txt_1.place(x=120, y=82)

txt_2 = tk.Entry(width=50)
txt_2.place(x=120, y=122)

txt_3 = tk.Entry(width=50)
txt_3.place(x=120, y=162)

root.mainloop( )

ご回答いただき、ありがとうございました。

Answer 2

• テキスト内容の変更はtk.StringVar()を使用し、textvariableに代入してあげると便利です。

variableとは日本語で可変という意味であり、テキストの中身を変えたりする動的な処理を行いたい時に便利です。
var1, var2, var3, button_varとそれぞれ用意し、.set()でvarの中に文字列をセットしています。

• 現在の状態を判定するには、適当に変数を用意してあげるとわかりやすいでしょう

今回の場合はvarという名前で変数を定義し、変数の中身を0や1に代入し直す事で、現在の状態を判定しています。
関数toggle()で、現在の状態が0の場合には～/現在の状態が1の場合には～と処理を分けています。
また関数toggle()の中でglobal varという記述がありますが、関数の外で定義された変数を関数内で参照する場合には、global宣言といって関数の中で使用したい変数を宣言してあげる必要があります。
今回のケースではif var == 0:とif文でvarの中身を判定する為に参照する為にglobal varと宣言しています。

#tkinterのインポート
import tkinter as tk

# ウィンドウを作成
root = tk.Tk()
root.title("Hello, World!")
root.geometry("500x300")

b = tk.Label(text="コントロール画面")
b.pack()


def clear():
	txt_1.delete(0,tk.END)
	txt_2.delete(0,tk.END)
	txt_3.delete(0,tk.END)

def toggle():
	global var
	if var == 0:		# もしもvarが0だった場合には
		var = 1		# varの中身を1にし、以下でテキスト内容を変更する
		var1.set('(/・ω・)/にゃー!')
		var2.set('(/・ω・)/にゃー!')
		var3.set('(/・ω・)/にゃー!')
		button_var.set('(/・ω・)/にゃー!')

	else:				# もしもvarが0じゃなかった場合には
		var = 0		# varの中身を0にし、以下でテキスト内容を変更する
		var1.set('(」・ω・)」うー!')
		var2.set('(」・ω・)」うー!')
		var3.set('(」・ω・)」うー!')
		button_var.set('(」・ω・)」うー!')

# StringVarの中身は.get()で取得出来ます。
# StringVarの中身が指定の文字列と一致した場合には.set()で中身の文字列を変更しましょう。
def btn_click1():
	if var1.get() == '(」・ω・)」うー!':
		var1.set('(/・ω・)/にゃー!')
	else:
		var1.set('(」・ω・)」うー!')

def btn_click2():
	if var2.get() == '(」・ω・)」うー!':
		var2.set('(/・ω・)/にゃー!')
	else:
		var2.set('(」・ω・)」うー!')

def btn_click3():
	if var3.get() == '(」・ω・)」うー!':
		var3.set('(/・ω・)/にゃー!')
	else:
		var3.set('(」・ω・)」うー!')

var = 0	# 現在の状態を判定する為の変数

# テキストを動的に操作するにはtk.StringVar()が便利です。
# まずは必要数用意しましょう。
var1 = tk.StringVar()
var2 = tk.StringVar()
var3 = tk.StringVar()
button_var = tk.StringVar()

var1.set('(」・ω・)」うー!')
var2.set('(」・ω・)」うー!')
var3.set('(」・ω・)」うー!')
button_var.set('(」・ω・)」うー!')

t_btn = tk.Button(textvariable=button_var, width=20, command=toggle)
t_btn.place(width=100,x=30, y=30)


button1 = tk.Button(root, textvariable=var1, command=btn_click1)
button1.place(width=80, x=30, y=80)
button2 = tk.Button(root, textvariable=var2,command = btn_click2)
button2.place(width=80, x=30, y=120)
button3 = tk.Button(root, textvariable=var3,command = btn_click3)
button3.place(width=80, x=30, y=160)

Clear_button = tk.Button(root,text='クリア',command = clear)
Clear_button.place(width=50,x=25,y=250)

txt_1 = tk.Entry(width=50)
txt_1.place(x=120, y=82)

txt_2 = tk.Entry(width=50)
txt_2.place(x=120, y=122)

txt_3 = tk.Entry(width=50)
txt_3.place(x=120, y=162)

root.mainloop( )

Comments

[fuji36_om]

本命のテキストボックスにインサートする機能が…。

[nto]

仕様を勘違いしておりました。
そうですね。.set()ではなくinsertにしてあげれば正常に機能してくれると思います。

Answer 3

おそらくは以下の様なトグルボタンを生成したいということでのご質問という事でしょうか？
残念ながらtkinterでは以下の様なトグルボタンのウィジェットはない為、生成する事はできません。

現時点で、掲載されているコードはまさにトグルボタンとしての役割を既に果たしており
更にこだわって再現するというのならばcanvasなどでボタンを描画し
クリックした際のアクションをイベントとして用意してあげる事で再現ができるのではないでしょうか。
(下記コードはお粗末な図形描画で申し訳ありません。)

またgiというツールキットのモジュールには
予めトグルボタンのウィジェットが用意されている様です。
補足:python3.5以上は使用できない模様です。
参考ページ:https://python-gtk-3-tutorial.readthedocs.io/en/latest/button_widgets.html#id5

import tkinter as tk


class MainWindow(tk.Frame):
	def __init__(self, master):
		super().__init__(master)
		self.master = master
		self.create_canvas()

	# 図形の描画
	def create_canvas(self):
		self.canvas = tk.Canvas(self.master)
		self.canvas.grid()

		self.round_rectangle(50, 50, 150, 100, radius=50, fill="#24a7d6")

		self.canvas.create_oval(54, 54, 96, 96, fill='#ccd5d9', outline='', tag='toggle_on')
		self.canvas.tag_bind('toggle_on', '<Button-1>', lambda event: self.toggle_switch(0))
		self.canvas.tag_bind('toggle_off', '<Button-1>', lambda event: self.toggle_switch(1))

	# 引数iでon/offを判定し、イベントを振り分ける
	def toggle_switch(self, i):
		if i == 0:
			self.canvas.itemconfig(self.toggle_frame, fill='#7f8385')
			self.canvas.delete('toggle_on')
			self.canvas.create_oval(104, 54, 146, 96, fill='#ccd5d9', outline='', tag='toggle_off')
		if i == 1:
			self.canvas.itemconfig(self.toggle_frame, fill='#24a7d6')
			self.canvas.delete('toggle_off')
			self.canvas.create_oval(54, 54, 96, 96, fill='#ccd5d9', outline='', tag='toggle_on')
	
	# 矩形の角を丸くする
	def round_rectangle(self, x1, y1, x2, y2, radius=25, **kwargs): 
		points = [x1+radius, y1, 
			x1+radius, y1, 
			x2-radius, y1, 
			x2-radius, y1, 
			x2, y1, 
			x2, y1+radius, 
			x2, y1+radius, 
			x2, y2-radius, 
			x2, y2-radius, 
			x2, y2, 
			x2-radius, y2, 
			x2-radius, y2, 
			x1+radius, y2, 
			x1+radius, y2, 
			x1, y2, 
			x1, y2-radius, 
			x1, y2-radius, 
			x1, y1+radius, 
			x1, y1+radius, 
			x1, y1] 

		self.toggle_frame = self.canvas.create_polygon(points, **kwargs, smooth=True) 
		return self.toggle_frame

if __name__ == '__main__':
	root = tk.Tk()
	window = MainWindow(master = root)
	window.mainloop()	

Comments

[teamikl]

単純な表示の切り替えなら
tk.Checkbutton にon/offの時の２種類の画像を指定する等の方法もありますね。
(切り替え時のアニメーション等、対応できない事もありますが…）

参考: https://stackoverflow.com/questions/58559865/tkinter-checkbutton-different-image/58560611#58560611

[fuji36_om]

単純にyoutube等に見られるような「再生/一時停止ボタン」のような押すたびにマークと機能を変更するボタンを作る方法を模索しているだけです。

実践的にプログラミングを扱う方々ならば薬籠中の物かと思い、ぜひともその情報を入手したく適当な試作品を交えて質問させていただきました。

ホームページでは貴殿のおっしゃる通りのものしか見つけることができず、自分が入手したい情報ではありませんでした。

あれのことをトグルボタンだと思っていたのですが、あれの正式名称は何なのでしょうか？
あの機構はどのようにして作られているのでしょうか？

[nto]

teamiklさん
なるほど。selectimageで振り分けるという事ですね。
綺麗に再現出来ていますね。

fuji36_onさん
確かにトグルボタンではありますが、あれ自体に特に正式名称といったものはなく通称は再生ボタンでいいのではないでしょうか？一般的にはトグルボタンというと回答に掲載したimageが一般的かと思います。
やっている事や仕組みは同じで、ボタンをクリックした時に現在の描画が再生のマークだったならば一時停止のマークに描画を切り替え、再生を行う処理を。もしボタンが一時停止のマークだったならば再生のマークに描画を切り替え一時停止を行う処理を。と、処理の内容を振り分けるといった流れで再現出来るのではないでしょうか？

[fuji36_om]

ボタンの表記している文字は連動して変更するのに成功しましたが
機能を変更できないので、試した事に追加します。