4. タイマーにボタンをつけよう

1. 初めに

今回は前回作成したタイマーにボタンをつけ、図１に示すようなアプリを作ります。

[図１]

前回作成したタイマーは設定時間を GUI 上で変更できなかったので、それを変更できるようにしました。また、Start, Stop, Reset ボタンをつけてみました。

まず、Button の作成方法について述べてから、プログラムの説明をします。

2. Button の作成

Button は以下のように作成します。

Tk.Button(master, **options)

最初の引数で親 widget を指定し、キーワード引数を続けます。
以下に主な属性を示します。 Tkinter reference: 5. The Button widget や、 The Tkinter Button Widget も参照してください。

属性	説明
anchor	ボタン上のテキストの位置。
bd or borderwidth	pixel 単位の縁の幅
bg or background	ボタンの背景色
bitmap	（テキストの代わりに、）ボタンに表示する bitmap 名
command	ボタンを押したときに呼ばれる関数を指定
cursor	カーソルがボタンにあるとき、その形を指定
default	ボタンの状態の初期値。普通は Tk.NORMAL。押せないようにするには Tk.DISABLED。'state' option で同じことができる。
disabledforeground	ボタンが押せない状態のときの文字色
fg or foreground	通常の文字色
font	フォント
height	テキストの行単位のボタンの高さ。image の時は pixel 単位
image	テキストの代わりにボタンに表示するイメージ
justify	数行に渡るテキストのそろえ方。
padx	横の余白
pady	縦の余白
relief	縁の形
state	ボタンの状態を指定。デフォルトは NORMAL. ボタンが利かない状態にするには DISABLED を指定。
text	ボタン上に表示するテキスト
textvariable	ボタン上に表示する Tk.StringVar()
underline	下線をつける文字の位置を指定。デフォルトは -1
width	テキストを表示しているときは文字数、イメージを表示しているときは pixel で指定。
wraplength	長いテキストの折り返しの幅を指定。

Label の時と同様に、これらの属性は configure メソッドを使って、プログラムの実行中に変化させることができます。また、image の貼り方なども Label と同様です。

3. タイマーにボタンをつける。

早速タイマーを作ってみましょう。かなりの部分は前回作ったものと同じです。動作中に不要なボタンを押せないようにするため、こまめに state 属性を変えています。

[code 1](timerb.py)

01:     #! /usr/bin/env python
02:     
03:     """
04:     timerb.py
05:     
06:     June 27, 2005
07:     """
08:     
09:     
10:     import Tkinter as Tk
11:     
12:     
13:     
14:     BLUE = '#99CCFF'
15:     YELLOW = '#FFCC00'
16:     RED = '#FF00FF'
17:     CLOCK = 'meza-bl-2.gif'
18:     
19:     class Frame(Tk.Frame):
20:     
21:         def __init__(self, master=None):
22:             Tk.Frame.__init__(self, master)
23:             
24:             self.echo = Tk.StringVar()
25:             self.m = 3
26:             self.echo_set()
27:             
28:             self.master.title('Alarm')
29:             f_display = Tk.Frame(self, relief=Tk.RIDGE, bd=4)
30:             f_display.pack(fill=Tk.X, expand=1)
31:             
32:             self.image= Tk.PhotoImage(file=CLOCK)
33:             self.icon=Tk.Label(f_display, image=self.image, bg=BLUE)
34:             self.icon.grid(row=0,column=0, rowspan=2)
35:             display = Tk.Label(f_display, textvariable=self.echo, width=5, relief=Tk.SUNKEN, bd=2, anchor = Tk.E, 
36:                                  font=('Helvetica', '24'), bg='white')
37:             display.grid(row=0, column=1, rowspan=2, sticky=Tk.N+Tk.S)
38:             self.b_inc = Tk.Button(f_display, font=('Helvetica', '6'), text='+', command=self.inc_time)
39:             self.b_inc.grid(row=0, column=2, sticky=Tk.W + Tk.E + Tk.S, pady=1)
40:             self.b_dec = Tk.Button(f_display, font=('Helvetica', '6'), text='-', command=self.dec_time)
41:             self.b_dec.grid(row=1, column=2, sticky=Tk.W + Tk.E + Tk.N, pady=1)
42:     
43:             
44:             f_button = Tk.Frame(self)
45:             f_button.pack(pady=2)
46:             self.b_start = Tk.Button(f_button, text='Start', command=self.start)
47:             self.b_stop = Tk.Button(f_button, text='Stop', command=self.stop, state=Tk.DISABLED)
48:             self.b_reset = Tk.Button(f_button, text='Reset', command=self.reset, state=Tk.DISABLED)
49:             self.b_start.pack(side=Tk.LEFT, padx=1)
50:             self.b_stop.pack(side=Tk.LEFT, padx=1)
51:             self.b_reset.pack(side=Tk.LEFT, padx=1)
52:     
53:     
54:         def echo_set(self):
55:             self.timer = 60 * self.m
56:             self.echo.set('%02d:00' % (self.m))
57:             
58:         def inc_time(self):
59:             self.m += 1
60:             self.echo_set()
61:     
62:         def dec_time(self):
63:             self.m -= 1
64:             self.echo_set()
65:     
66:         def start(self):
67:             self.started = True
68:             if 0<self.timer<=20:
69:                 self.icon.configure(bg=YELLOW)
70:             elif(0 >= self.timer):
71:                 self.icon.configure(bg=RED)
72:             self.after(1000, self.counting)
73:             self.b_start.configure(state=Tk.DISABLED)
74:             self.b_stop.configure(state=Tk.NORMAL)
75:             self.b_inc.configure(state=Tk.DISABLED)
76:             self.b_dec.configure(state=Tk.DISABLED)
77:     
78:         def stop(self):
79:             self.icon.configure(bg=BLUE)
80:             self.started = False
81:             self.b_start.configure(state=Tk.NORMAL)
82:             self.b_stop.configure(state=Tk.DISABLED)
83:             self.b_reset.configure(state=Tk.NORMAL)
84:     
85:     
86:         def reset(self):
87:             self.echo_set()
88:             self.b_reset.configure(state=Tk.DISABLED)
89:             self.b_inc.configure(state=Tk.NORMAL)
90:             self.b_dec.configure(state=Tk.NORMAL)
91:     
92:         def counting(self):
93:                 if self.started:
94:                     self.timer -=1
95:                     self.echo.set('%02d:%02d' % (self.timer/60, self.timer%60))
96:                     if self.timer == 20:
97:                         self.icon.configure(bg=YELLOW)
98:     
99:                     if self.timer <= 0:
100:                         self.bell()
101:                         t= -1 * self.timer
102:                         self.icon.configure(bg=RED)
103:                         self.echo.set('-%02d:%02d' % (t/60, t%60))
104:                         self.after(500, self.yellow)
105:                         
106:                     self.after(1000, self.counting)
107:     
108:         def yellow(self):
109:             if self.started:
110:                 self.icon.configure(bg=YELLOW)
111:     
112:     
113:     if __name__ == '__main__':
114:         f = Frame()
115:         f.pack()
116:         f.mainloop()

3.1. 使い方と動作

コマンドラインから

>python timerb.py

とすると、図１で示した widget があらわれます。設定時間を増やすときには時間表示の右側の '+' ボタンを、減らすときには '-' ボタンを押します。設定時間は 1 分単位で増減します。

計測を始めるには 'Start'、止めるには 'Stop'、リセットするには 'Reset' ボタンを押します。時計アイコンの背景色の変化などは前回と同じです。

3.2. プログラムの簡単な説明

以下に簡単な説明をします。カッコ内の数字はソースコードの行数です。

class Frame(Tk.Frame):
まず、Tk.Frame の導出クラスである Frame クラスを作ります。これが、時計の GUI を定義します (19--110)。
- __init__ (21--41)。
  - まず、Tk.Frame として初期化します (22)
  - 表示用変数 self.echo と設定時間を保持する self.m を定義します (25,26)、その後、メソッド self.echo_set (54--56)を呼び出して、表示と残り時間をセットします (26)。
  - 28 行目で Window のタイトルを 'Alarm' にセットします。
  - 次に、時計アイコンと、時間表示、設定値の増減ようボタンを収めるフレーム f_display を作成し、pack します (29,30)。
  - 時計アイコンの画像を self.image をつくり (32)、それをラベル self.icon に貼り付け (33)、さらに self.icon を grid します。このとき rowspan=2 を指定して上下に突き抜けます (34)。
  - 表示用ラベル display を作り、それを grid します (35--37)。
  - 設定時間増加用ボタン self.b_inc を作ります。コマンドに self.inc_time を指定します (38)。
  - self.b_inc を grid します。ボタンの大きさがちょうど良くなるように sticky で調節します (39)。
  - 同様に、設定時間減少用ボタン self.b_dec を作って grid します (40,41)。
  - Start, Stop, Reset ボタン用のフレーム f_button を作り、 pack します (44,45)。
  - Start ボタン self.b_start を作ります。command は self.start です (46)。
  - Stop ボタン self.b_stop を作ります。command は self.stop です。 state=Tk.DISABLED にして、このボタンが利かないようにします (47)。
  - Reset ボタン self.b_reset を作ります。command は self.reset です。 state=Tk.DISABLED にして、このボタンが利かないようにします (48)。
  - これら３つのボタンを左から pack します (49--51)。
- echo_set:
  表示と残り時間を設定するメソッド self.echo_set を定義します (54--56)。
- inc_time:
  設定時間を１分増やすメソッド self.inc_time を定義します (58-60)。
- dec_time:
  設定時間を１分減らすメソッド self.dec_time を定義します (58-60)。
- start:
  時計を動かすメソッド self.start を定義します (66--76)。
  - 時計が動いているので、self.started = True にします (67)。
  - 残り時間が 0--20 秒のときは時計アイコンの背景を黄色にします (68,69)。また、残り時間がなくなっているときは赤色にします (70,71)。
  - 一秒後に self.counting を呼び出します (72)。
  - self.b_stop の state を Tk.NORMAL にし、 self.b_start, self.b_inc, self.b_dec を Tk.DISABLED にします (73--76)。
- stop:
  時計を止めるメソッド self.stop を定義します (78--83)。
  - 時計アイコンの背景を青にします (79)
  - 時計が止まったので、self.started = False にします (80)。
  - self.b_start と self.b_reset を NORMAL にし、 self.b_stop を DISABLED にします (81--83)。
- reset:
  時計をリセットするメソッド self.reset を定義します (86--90)。
  - まず self.echo_set を呼び出して、残り時間と表示をセットします (87)。
  - 次に self.b_inc と self.b_dec を NORMAL にし、self.b_reset を DISABLED にします (88--90)。
- counting:
  時間を計るメソッド self.counting を定義します (92--106)。
  - もし時計が動いていれば (93)、残り時間を１秒減らし (94)、self.echo をセットします (95)。
  - のこり 20 秒になったら時計アイコンの背景を黄色にします (96,97)。
  - もし、残り時間がなくなったら、ベルを鳴らし、時計アイコンを赤ー黄に点滅させます。
  - 1 秒後に self.counting を再帰的に呼び出します。
- yellow:
  時計アイコンを黄色くするメソッドです (108--110)。
if __name__ == '__main__':
もし、OS から直接呼ばれたら、
- Frame のインスタンス f を作り、
- それを pack し、
- f.mainloop を呼び出して f をアプリにする。

4. Button から指定できる command について

Tk.Button の command オプションで指定するのは関数へのポインターです。従って、引数などは指定できません。指定される関数は内部変数にアクセスするためのポインター self のみを引数とするものに限られます。

普通に考えれると、これはとても不便で、プログラムが冗長になりがちだと思われるかもしれませんが、次回に述べる手法を用いることによってこの問題を回避することができます。

7. 終わりに

Tk.Button の使い方は一通り説明できたと思います。

次回は似たような command を効率よく定義するこつについて述べます。