Python tkinterでSpinboxで入力した値を得て計算し、表示させるにはどうしたら良いでしょうか。

Question

###前提・実現したいこと
PyhonでTkinterを用いてGUIアプリケーションを作成しています。
文房具の請求のプログラムなのですが、イメージはamazonなどの
通販サイトみたいな感じです。

いま、tkinterのSpinboxという機能を使って、商品の個数を選べるようにし、
その上下(▲▼)ボタン(またはキー入力)を押して個数を決めたときに、それと
連動してウィンドウの右側に、数値(値段と個数をかけたもの)を表示させたいのですが、
get()を使っても初期値の0が表示されるだけで、スピンボックスの中の値を
変化させても右側に表示される値は変わりませんでした。どうすればよいですか？

また、pythonでのクラスの作り方がよくわかっていなくて、クラスなしで
関数を作って実装しているのですが、クラスは作ったほうがいいのでしょうか？

###試したこと

from tkinter import *
import sys   

# Base window
window = Tk()

wc = Canvas(window, width = 2000, height = 2000)
wc.create_rectangle(0,0,2000,2000, fill = "paleturquoise")

wc.place(x = 0, y = 0)

# Setting the title
window.title("文房具の請求")

# Coloring canvas

for x in range(10):
    c = Canvas(window, width = 240, height = 150)
    c.create_rectangle(0,0,240,150, fill = "aliceblue")
    if x<= 4:
        c.place(x = 30, y = 30 + x * 155)
    else:
        c.place(x = 300, y = 30 + (x - 5) * 155)


# Set items & spinbox

item = ["*","*","*","*","*","*","*","*","*","*"]
for x in range(10):
    i = Label(text = item[x], bg = "#82EBF7")
    ko = Label(text = "個", bg = "aliceblue")
    if x <= 4:
        i.place(x = 30, y = 30 + x * 155)
        ko.place(x = 115, y = 150 + x * 155)
    else:
        i.place(x = 300, y = 30 + (x - 5) * 155)
        ko.place(x = 385, y = 150 + (x - 5) * 155)

'''
ついでに、以下のコードをfor文とかで簡単に書く方法ってありますか？
10個の商品のひとつずつにspinboxで値を決められるようにしています。
'''

s1value = StringVar()
s2value = StringVar()
s3value = StringVar()
s4value = StringVar()
s5value = StringVar()
s6value = StringVar()
s7value = StringVar()
s8value = StringVar()
s9value = StringVar()
s10value = StringVar()

s1 = Spinbox(window, from_=0, to=100, width = 10, textvariable=s1value)
s2 = Spinbox(window, from_=0, to=100, width = 10, textvariable=s2value)
s3 = Spinbox(window, from_=0, to=100, width = 10, textvariable=s3value)
s4 = Spinbox(window, from_=0, to=100, width = 10, textvariable=s4value)
s5 = Spinbox(window, from_=0, to=100, width = 10, textvariable=s5value)
s6 = Spinbox(window, from_=0, to=100, width = 10, textvariable=s6value)
s7 = Spinbox(window, from_=0, to=100, width = 10, textvariable=s7value)
s8 = Spinbox(window, from_=0, to=100, width = 10, textvariable=s8value)
s9 = Spinbox(window, from_=0, to=100, width = 10, textvariable=s9value)
s10 = Spinbox(window, from_=0, to=100, width = 10, textvariable=s10value)

s1.pack
s2.pack
s3.pack
s4.pack
s5.pack
s6.pack
s7.pack
s8.pack
s9.pack
s10.pack

def spin(w,x):
    if x <= 4:
        w.place(x = 40, y = 150 + x * 155)
    else:
        w.place(x = 310, y = 150 + (x - 5) * 155)

spin(s1,0)
spin(s2,1)
spin(s3,2)
spin(s4,3)
spin(s5,4)
spin(s6,5)
spin(s7,6)
spin(s8,7)
spin(s9,8)
spin(s10,9)

# Set price

price = ["1 円","2 円","3 円","4 円","5 円","6 円","7 円","8 円","9 円","10 円"]

for x in range(10):
    t = Label(text = price[x], bg = "aliceblue")
    if x <= 4:
        t.place(x = 30, y = 70 + x * 155)
    else:
        t.place(x = 300, y = 70 + (x - 5) * 155)
       
# name

name = ["商品名1","商品名2","商品名3","商品名4","商品名5","商品名6","商品名7","商品名8","商品名9","商品名10"]

for x in range(10):
    n = Label(text = name[x], bg = "aliceblue")
    if x <= 4:
        n.place(x = 30, y = 50 + x * 155)
    else:
        n.place(x = 300, y = 50 + (x - 5) * 155)
        
# Set window

window.geometry("1000x825+100+20")

# Set subwindow

'''
以下のsubwindow(sb)が、上記でいうウィンドウの右側のことです。
'''

sb = Canvas(window, width = 400, height = 700)
sb.create_rectangle(0,0,400,700, fill = "white")
sb.place(x = 570, y = 50)

text = Label(window, text="カート", bg = "#69D7E3" )
text.place(x=570, y=50)

# Get price

'''
もし、▲が押されたら、get()した値(現在値:0)に1を足し、
▼が押されたら、1を引く、といったことを書こうとしたのですが、
buttonupとは何ですか？といったエラーがでてしまいます。

ちなみにs1は商品1のことであり、r1は商品1の個数に商品1の値段を
かけたものです。(値段設定は今は適当なため、1円ということにしています。)
'''

if s1.invoke == buttonup:
    s1.get = s1.get + 1
elif s1.invoke == buttondown:
    s1.get = s1.get - 1

r1 = int(s1.get()) * 1

note = Label(window, text = r1, bg = "white" )
note.place(x=590, y=80)

window.mainloop()
    

Traceback (most recent call last):
  File "C:/Users/admin/Desktop/HCI/memo12.py", line 123, in <module>
    if s1.invoke == buttonup:
NameError: name 'buttonup' is not defined

###補足情報(言語/FW/ツール等のバージョンなど)
使用ツール:Python3.5.1

Answer 1

簡単に修正してみました。
やりたい事はこんな感じでしょうか。

from tkinter import *
import sys


# spinboxの値が更新された時に呼ばれる関数
# Spinbox生成時にこの関数をcommand引数で渡しています。
# idxには更新されたSpinboxのIndex値が入ります
def update_value(idx):
    print("Update spinbox {}".format(idx))
    num_of_purchase = [int(s.get()) for s in spinboxes]
    sub_total = [n*p for n,p in zip(num_of_purchase, price)]
    total = sum(sub_total)

    # 表示するデータを作成する（適当に書きました）
    txt = ["{:5d} x {:2d} = {:5d}".format(p,n,t) for p,n,t in zip(price,num_of_purchase,sub_total)]
    txt.append("-----------------------------")
    txt.append("TOTAL : {}".format(total))

    # noteを更新する
    note.config(text='\n'.join(txt))



# Base window
window = Tk()

wc = Canvas(window, width = 2000, height = 2000)
wc.create_rectangle(0,0,2000,2000, fill = "paleturquoise")
wc.place(x = 0, y = 0)

# Setting the title
window.title("文房具の請求")

# Coloring canvas
for x in range(10):
    c = Canvas(window, width = 240, height = 150)
    c.create_rectangle(0,0,240,150, fill = "aliceblue")
    c.place(x = 30 + int(x/5) * 270, y = 30 + (x%5) * 155)

# Set Lavels
item = ["ノート","鉛筆","シャープペン","消しゴム","色鉛筆","ボールペン","油性ペン","蛍光ペン","はさみ","のり"]
for x in range(10):
    i = Label(text = item[x], bg = "#82EBF7")
    ko = Label(text = "個", bg = "aliceblue")
    i.place(x = 30 + int(x/5) * 270, y = 30 + (x%5) * 155)
    ko.place(x = 115 + int(x/5) * 270, y = 150 + (x%5) * 155)

# Set Spinboxes
spinboxes = []
for x in range(10):
    value = StringVar()
    s = Spinbox(window, from_=0, to=100, width = 10, textvariable=value, command=lambda idx=x:update_value(idx))
    s.place(x = 40 + int(x/5) * 270, y = 150 + (x%5) * 155)
    spinboxes.append(s)

# Set price
price = [100,20,150,50,40,120,180,200,350,240]
for x in range(10):
    t = Label(text = "{} 円".format(price[x]), bg = "aliceblue")
    t.place(x = 30 + int(x/5) * 270, y = 70 + (x%5) * 155)

# Set name
name = ["商品名1","商品名2","商品名3","商品名4","商品名5","商品名6","商品名7","商品名8","商品名9","商品名10"]
for x in range(10):
    n = Label(text = name[x], bg = "aliceblue")
    n.place(x = 30 + int(x/5) * 270, y = 50 + (x%5) * 155)

# Set window
window.geometry("1000x825+100+20")

# Set subwindow
sb = Canvas(window, width = 400, height = 700)
sb.create_rectangle(0,0,400,700, fill = "white")
sb.place(x = 570, y = 50)

text = Label(window, text="カート", bg = "#69D7E3" )
text.place(x=570, y=50)

note = Label(window, text = "", bg = "white" )
note.place(x=590, y=80)

window.mainloop()

大きな変更点をザッと説明すると

1.
Spinbox 生成時に10回を同じ処理の繰り返すで記述しておりましたので、spinboxes=[] というリストを作成して、各Splinboxをこの中に格納するように修正しました。

2.
Spinbox 生成時に command引数に関数を渡すことで、

def update_value():
    # Spinboxが更新されたときに呼ばれる関数
    # 更新時の処理をここに書く

Spinbox(..., command=update_value)

のように記述できます。

pashango2さんのおっしゃるとおり、一般的にGUIアプリはイベントドリブンで動作するので、このように何かしらのイベントが発生した際に呼ばれる イベントハンドラ（コールバック関数） に対応する処理を記述する必要があります。

今回は更に

def update_value(idx):
    # Spinboxが更新されたときに呼ばれる関数
    # idx にどのSpinboxが更新されたのかが格納される
    new_value = int(spinboxes[idx].get())
    #...

Spinbox(..., command=lambda idx=x: update_value(idx))

のようにlambda にデフォルト引数を設定したもの(idx=x)を挟むことにより、どのSpinboxから更新がかかったのかを判別できるようにしております。

3.
上記 2. で追加したupdate_value()関数内にて、noteをに記述する内容を作成し、note更新する部分を記述しております。

4.
priceリストのデータは文字列型で格納されておりましたが、合計などの計算には不適なので、数値型に変更しました。
単位 '円'はLabelを描写するタイミングで付加しております。

5.
コードの至る所にあった判定文を数式化して削除しました。
（このあたりは好みがあるかと思いますが）

あと、

• 複数あるループをまとめる
• データ定義の部分とGUIを生成している部分を分離する
• 5. での修正部が複数存在するので、共通部をまとめて関数化する

などを行おうかと思いましたが、元のコードから構成が大きく変更してしまうので、今回は行っておりません。
これらを行うと、もう少しスッキリと書けると思います。

---

【補足】
クリアボタン追加してみました

from tkinter import *
import sys

# spinboxの値が更新された時に呼ばれる関数
# Spinbox生成時にこの関数をcommand引数で渡しています。
# idxには更新されたSpinboxのIndex値が入ります
def update_value(idx):
    print("Update spinbox {}".format(idx))
    num_of_purchase = [int(s.get()) for s in spinboxes]
    sub_total = [n*p for n,p in zip(num_of_purchase, price)]
    total = sum(sub_total)

    # 表示するデータを作成する（適当に書きました）
    txt = ["{:5d} x {:2d} = {:5d}".format(p,n,t) for p,n,t in zip(price,num_of_purchase,sub_total)]
    txt.append("-----------------------------")
    txt.append("TOTAL : {}".format(total))

    # noteを更新する
    note.config(text='\n'.join(txt))

# 全てをクリアする
def clear_all():
    for val in spinbox_values:
        val.set(0)
    note.config(text='')

# Base window
window = Tk()

wc = Canvas(window, width = 2000, height = 2000)
wc.create_rectangle(0,0,2000,2000, fill = "paleturquoise")
wc.place(x = 0, y = 0)

# Setting the title
window.title("文房具の請求")

# Coloring canvas
for x in range(10):
    c = Canvas(window, width = 240, height = 150)
    c.create_rectangle(0,0,240,150, fill = "aliceblue")
    c.place(x = 30 + int(x/5) * 270, y = 30 + (x%5) * 155)

# Set Lavels
item = ["ノート","鉛筆","シャープペン","消しゴム","色鉛筆","ボールペン","油性ペン","蛍光ペン","はさみ","のり"]
for x in range(10):
    i = Label(text = item[x], bg = "#82EBF7")
    ko = Label(text = "個", bg = "aliceblue")
    i.place(x = 30 + int(x/5) * 270, y = 30 + (x%5) * 155)
    ko.place(x = 115 + int(x/5) * 270, y = 150 + (x%5) * 155)

# Set Spinboxes
spinboxes = []
spinbox_values =[]
for x in range(10):
    value = StringVar()
    s = Spinbox(window, from_=0, to=100, width = 10, textvariable=value, command=lambda idx=x:update_value(idx))
    s.place(x = 40 + int(x/5) * 270, y = 150 + (x%5) * 155)
    spinbox_values.append(value)
    spinboxes.append(s)

# Set price
price = [100,20,150,50,40,120,180,200,350,240]
for x in range(10):
    t = Label(text = "{} 円".format(price[x]), bg = "aliceblue")
    t.place(x = 30 + int(x/5) * 270, y = 70 + (x%5) * 155)

# Set name
name = ["商品名1","商品名2","商品名3","商品名4","商品名5","商品名6","商品名7","商品名8","商品名9","商品名10"]
for x in range(10):
    n = Label(text = name[x], bg = "aliceblue")
    n.place(x = 30 + int(x/5) * 270, y = 50 + (x%5) * 155)

# Set window
window.geometry("1000x825+100+20")

# Set subwindow
sb = Canvas(window, width = 400, height = 700)
sb.create_rectangle(0,0,400,700, fill = "white")
sb.place(x = 570, y = 50)

text = Label(window, text="カート", bg = "#69D7E3" )
text.place(x=570, y=50)

note = Label(window, text = "", bg = "white" )
note.place(x=590, y=80)

clr_button = Button(window, text = "CLEAR", bg = "white", command=clear_all)
clr_button.place(x=580, y= 780)

window.mainloop()

Comments

[flower]

修正の手順までわかりやすく教えていただき、ありがとうございました！未熟な点が多く冗長なプログラムを、わかりやすく、見やすいかたちに直してくださり、理解が深まりました。よく読み、参考にさせていただきますm(__)m
追伸. 右側に表示した値段やスピンボックス内の値を一つのボタンで一括削除するプログラムも考えているのですが、０に書き換えようとすると桁数があふれたところが書き換えられず、少しはみ出て見えてしまうのですが、どうすればよいでしょうか？

[magichan]

すみません。
上記の説明だけでは不具合の内容が理解できませんでした。
もう少し具体的なコードを記述していただけると助かります。

とりあえず、勝手な想定にて一括削除ボタンを実装をしてみましたので、参考にしてください。

[flower]

CLEARをボタンを押したら、スピンボックスの各値を０にし、カートの中身の個数も連動して０にしたい、と考えていましたが、右側の中身をすべて消してしまうのも手ですね。ご丁寧に説明していただき、ありがとうございましたm(__)m

Answer 2

pythonというよりもGUIアプリケーションの動きを理解する必要があります。
GUIアプリケーションは基本的にイベント駆動式です、spinboxのボタンが押されたときのイベントをcommand引数のコールバック関数で取得する必要があります。

おそらく、どこかの本かWebをコピーしたものと思います。
参考にしたものを教えてください。

Comments

[flower]

なるほど、spinboxでcommand引数が使えることがわからず、ボタンをつけようか迷っていましたが、もう少し考えてみます！未熟者ですみません、ありがとうございましたm(__)m