月: 2020年4月

　今日も見に来てくださって、ありがとうございます。石川さんです。

　Canvasにテキストを書いたときに、その大きさや、座標はどうなるのかな、と、ちょっと気になったので調べてみました。こちらのサイトを参考にさせていただきました。

出力イメージ

　出力イメージはこんな感じになります。

作成したスクリプト

　今回作成したスクリプトは以下のようになりました。

import tkinter as tk

class App(tk.Tk):
    def __init__(self):
        super().__init__()
        self.title("Canvas Text")
        self.geometry("400x200")
        
        c = tk.Canvas(self, bg="white")
        c.pack(fill=tk.BOTH)
        
        t1 = c.create_text(70, 30, text="1st text", font=("",24))
        c.create_rectangle(c.bbox(t1))
        x0, y0, x1, y1 = c.bbox(t1)
        c.create_line(x1, y1, x1 + 30, y1 + 30, arrow=tk.FIRST)
        description = "bboxは、テキストを囲む箱の座標を戻します。"
        c.create_text(x1 + 30, y1 + 30, text=description, anchor=tk.W)
        x, y = c.coords(t1)
        c.create_line(x, y, x + 70, y + 70, arrow=tk.FIRST, fill="red")
        description = "coordsは中心点を戻します。"
        c.create_text(x + 70, y + 70, text=description, anchor=tk.NW, font=("",9))
        width = tk.font.Font(c,font=("",9)).measure(description)
        height = tk.font.Font(c,font=("",9)).metrics("linespace")
        c.create_line(x + 70, y + 70 + height, x + 70 + width, y + 70 + height)
        
if __name__ == "__main__":
    app = App()
    app.mainloop()

解説

　もろもろのアプリケーションウィンドウをつくるところは端折って、まずは9行目でキャンバスを作成しています。作成時のbg=”white”で背景色を白に、packのfill=tk.BOTHでウィンドウサイズに合わせます。

　12行目で”1st text”と最初のテキストを作成しています。座標にx=70、y=30を指定しています。ちょっと大きめになるようにフォントのサイズを24と指定しています。フォント名を指定することで変更することもできますが、初期値のままにしておきたかったので、””を指定しています。

　13行目のcreate_rectangleを使って、矩形を描画しています。指定する座標はbboxで取得していますが、bboxはテキストを囲む矩形の左上の座標と右下の座標を取得します。14行目では説明用の線を引くために、もう一度bboxを呼び出して座標をアンパックして取り出しています。ぼくの環境では、それぞれ、(17, 14, 124, 47)がセットされていました。

　15行目で矢印付きの直線を斜め下に弾いています。arrow=tk.FIRSTで開始座標が矢印になっています。

　18行目でcoordsを使っていますが、これはテキストを作成するときに指定した座標を戻します。この場合はテキストの中心点になっています。これは、テキスト作成時にanchorを指定しなかったので、デフォルト値のtk.CENTERが指定されたためです。他にどこを指定するかというのは、こちらが参考になりました。

　ちなみにぼくの環境ではこのcoordsの戻り値、テキスト作成時の座標に70と30を指定した結果、（70.0、30.0）になっていました。coordsは小数点以下が有効になっているようです。試しにcreate_textの座標を70.5とか、70.9999とかに設定したら、その値をきちんと保持していることが確認できました。有効桁数がどれくらいなのか、どうやってこの座標値を扱っているのか、ちょっぴり気になります。

　22行目は、テキスト出力の横幅をどうやって計算すればいいのか、というのを調べた結果です。これはあちこち探しまわって、結局ここを参考にしたと思います。テキストに下線を引いてちゃんと幅が一致していることを確認しました。最初はfont=(“”,9)というのを指定していなかったのですが、そうすると、最初にcreate_textした時のサイズ、24がなぜか取得できてしまったので、テキストとともにわざわざ設定することにしました。今回はとりあえず幅が求まって満足したので、なぜそんなことになるのかという原因までは調査しませんでした。

　bboxがあるのでいったん出力してしまえばテキストの描画幅は座標から計算できるのですけど、幅をもとに位置決めをしたい要望があったので、先に計算して求める方法を探し出しました。

まとめ

　これでキャンバス上にテキストと線を自由自在にひくことができるようになりました。いや、なったはずです！(笑)

　今日も見に来てくださって、ありがとうございます。石川さんです。

　今回は、tkinterの中に定義されている、ttkのNotebookについて、ちょっと調べてみました。

出来上がりイメージ

　簡単に言うとタブ付きの切り替えですね。

ソースコード

　ソースコードは、以下のようになりました。

import tkinter as tk
import tkinter.ttk as ttk

class App(tk.Tk):
    def __init__(self):
        super().__init__()
        self.title("ttk Notebook サンプル")
        properties = {
            "全般":["タイトル","タグ","メニュー名","表示可能","使用可能","コントロールメニュー","最大化ボタン","最小化ボタン","クライアントエッジ"],
            "スクロール":["水平スクロールバー","垂直スクロールバー","行の単位","カラムの単位","1ページのカラム数","1ページの行数"],
            "ツールバー":["ツールバーの表示","ツールバーの配置","ツールバーX","ツールバーY","ツールバーの幅","ツールバーの高さ"],
            "その他":["X","Y","幅","高さ","ポインタ"],
        }
        self.notebook = ttk.Notebook(width=400, height=200)
        for key, value in properties.items():
            frame = ttk.Frame(self.notebook)
            self.notebook.add(frame, text=key, sticky=tk.NE+tk.SW)
            for text in value:
                ttk.Label(frame, text=text).pack(anchor=tk.W)
        self.notebook.pack()

        self.button = ttk.Button(self, text="Close", command=self.destroy)
        self.button.pack()

if __name__ == "__main__":
    app = App()
    app.mainloop()

解説

　割と簡単にできました。まず、Notebookを作ります。そして、FrameをNotebookの子供として作成して、addするだけですね。Frame以外にもCanvasやLabelなどWidgetを指定できるようです。

まとめ

　タブ付きのエディタを作りたい、と、思っているのですけど、使えそうですね！

　今日も見に来てくださって、ありがとうございます。石川さんです。

　先日、tkinterモジュールのソースコードを眺めていたら、dnd.pyというファイルがありましてちょっと、おお、と思ったので記録しておきます。dndというからにはドラッグ・アンド・ドロップでしょ。

動作確認

　ぼくは、Anacondaを使っているので、C:\ProgramData\Anaconda3\Lib\tkinterにモジュールがあって、そこにこのdnd.pyファイルがあります。ソースを見ると、最後の方にありました、テスト用に直接実行できるコードです。

if __name__ == '__main__':
    test()

　さっそく実行してみました。

ソースコード

　ソースコードを追加したかったのですが、みなさんのフォルダにもあるはずなのと、（ぼくの環境は、C:\ProgramData\Anaconda3\Lib\tkinter\dnd.pyです。）、著作権的にも問題があると思いますので、今回はそちらをご覧ください。

解説

　ソースコードは下から見ていくとよさそうですね。まずは、ルートのTkをインスタンス化してから、その後、Testerクラスを使ってウィンドウを三つ作成しています。この中にはそれぞれCanvasが作られてありますね。そして、次にIconクラスのインスタンスを三つ作って、それぞれそのウィンドウのCanvasにattachを実行する、という流れですね。attachでは、引数で受け取ったCanvasにLabelをつくって、それからマウスの第一ボタンが押されたときの処理としてpressが登録されています。

　pressでは、dndモジュールの最初に定義されているdnd_startが呼び出されていて、ここでDndHandlerによってラップされたインスタンスが作成されます。DndHandlerの初期化の処理で、マウスのボタンがリリースされたときのイベントの処理にon_releaseが登録され、<Motion>イベントの処理にon_motionが登録されています。要するにマウスが動くたびにon_motionが呼び出されて、マウスのボタンを離したときにon_releaseが呼び出されるようにしました、ということですね。あ、あと、カーソルが"hand2"に変更されているように見えます。

　このマウスが動くたびに呼び出されるon_motionは、処理中にターゲットのCanvasが変更されていない間はdnd_motionを呼び出すことでキャンバス内のラベルを移動させています。ターゲットのCanvasが変更されたときは、dnd_leaveとdnd_enterがそれぞれ変更前のCanvasと変更後のCanvasで呼び出されて、ドラッグ・アンド・ドロップ実現しています。

　最後にマウスのボタンが離されたときに、イベントが削除されたりカーソルを元に戻したりしたあとに、dnd_commitを呼び出して終了処理をしています。

まとめ

　ドラッグアンドドロップは、実装するのに、こんなに複雑なことをしないといけないのですねぇ。今回はざっと眺めただけなのでよいですけど、自分で同じ機能を実現するのは、かなり苦労しそうです。

　今日も見に来てくださって、ありがとうございます。石川さんです。プログラミングマニアじゃありませんよ。

　だけど、今回もtkinterのメニューの作り方について、まとめてみました。だから、マニアじゃないんだってば。

出来上がりイメージ

ソースコード

import tkinter as tk
import tkinter.messagebox as mb

class App(tk.Tk):
    def __init__(self):
        super().__init__()
        self.title("Menu sample")
        self.geometry("400x50")
        
        menu = tk.Menu(self)
        file = tk.Menu(menu, tearoff=0)
        edit = tk.Menu(menu, tearoff=0)
        option = tk.Menu(menu, tearoff=0)
        
        file.add_command(label="New")
        file.add_command(label="Open")
        file.add_separator()
        file.add_command(label="Save")
        file.add_command(label="Save all")
        file.add_command(label="Save as...")
        file.add_separator()
        file.add_command(label="Quit", command=self.destroy)
        
        edit.add_command(label="Undo")
        edit.add_command(label="Redo")
        edit.add_command(label="Cut")
        edit.add_command(label="Copy")
        edit.add_command(label="Paste")
        edit.add_command(label="Select All")
        
        self.check = tk.BooleanVar(name="check")
        self.check.trace("w", self.checked)
        option.add_checkbutton(label="Check", onvalue=True, offvalue=False, variable=self.check)
        option.add_separator()
        self.radio = tk.StringVar(name="radio",value="A")
        self.radio.trace("w", self.selected)
        option.add_radiobutton(label="A", value="A", variable=self.radio)
        option.add_radiobutton(label="B", value="B", variable=self.radio)
        option.add_radiobutton(label="C", value="C", variable=self.radio)
        
        menu.add_cascade(label="File", menu=file)
        menu.add_cascade(label="Edit", menu=edit)
        menu.add_cascade(label="Options", menu=option)
        menu.add_command(label="Help", command=lambda:mb.showinfo("Help","Help me!"))

        self.config(menu=menu)
        
    def checked(self, *args):
        print(self.check.get(), *args)
        
    def selected(self, *args):
        print(self.radio.get(), *args)

if __name__ == "__main__":
    app = App()
    app.mainloop()

解説

　ソースコードを見ればそのままなので、特に解説は必要ないような気がしてきました。が、気を取り直して、menuの変数にトップレベルのメニューを追加しました。以降は、このmenuにメニューを追加していきます。今回は、file、edit、optionをそのメニューの中のメニューとして作成しました。メニューの区切りはadd_separator()を実行することで追加できます。add_cascadeで中にさらに展開するメニューを追加することができます。そして、最後にhelpを追加してみました。

　メニュー追加時のtearoffは、初期値が有効になっています。そのオプションを有効にしておくと、サブメニューを取り外すことができて、独立したウィンドウで好きなところへ配置できるようになっています。オプションを無効にする必要はないのですが、最近はこのようにデザインされているメニューがあまりないので、無効にしておくとよいと思います。

　optionsには、create_checkbuttonでチェック可能なメニューと、add_radiobuttonで選択可能なメニューを追加しました。セットされた値はBooleanVarとStringVarを利用して監視しています。これらの値を保持するためのクラスはtkinterで用意されているもので、BooleanVarとStringVar以外にも、IntVarとDoubleVarがあります。今回は書き込み時(“w”)のコールバックを登録して、書き込み時にprintを実行するようにしました。

　あ、言わずもがなですが、コマンドはcommandオプションで指定できます。

まとめ

　簡単なメニューをつくるのは特に難しくありませんね。アクセラレータやショートカットなんかを追加したい、ということになると環境の違いを考慮する必要も出てきて、ちょっと難しくなるようですね。

　今日も見に来てくださって、ありがとうございます。石川さんです。

　自分でもしつこいなぁ、とは思いますが、Entryで日付を入力するためのウィジェットをつくる、パート３です。前回つくったのは、ちょっと納得できなかったのですよねぇ。ま、今回も納得したか、というと、微妙なのですけど、まあ、現状としてはこんなものでしょう。

実行イメージ

　出来上がりイメージはこんな感じになります。

スクリプト

　スクリプトは以下のようになりました。日付を入力するだけなのに、ずいぶんとかかりました。ひょっとしたら車輪の再発明をしたのかも知れませんねぇ。

import tkinter as tk
import tkinter.messagebox as mb
from datetime import datetime

class DateEntry(tk.Frame):
    def __init__(self,master=None,frame_look={},**look):
        args = dict(relief=tk.SUNKEN,bg="white")
        args.update(frame_look)
        tk.Frame.__init__(self, master, **args)

        yearvc = (self.register(self.year_check), "%V", "%d", "%i", "%S", "%P")
        monthvc = (self.register(self.month_check), "%V", "%d", "%i", "%S", "%P")
        dayvc = (self.register(self.day_check), "%V", "%d", "%i", "%S", "%P")
        self.year = tk.Entry(self,width=4,relief=tk.FLAT,validate="all",validatecommand=yearvc)
        self.sep1 = tk.Label(self,text="/",relief=tk.FLAT,bg="white")
        self.month = tk.Entry(self,width=2,relief=tk.FLAT,validate="all",validatecommand=monthvc)
        self.sep2 = tk.Label(self,text="/",relief=tk.FLAT,bg="white")
        self.day = tk.Entry(self,width=2,relief=tk.FLAT,validate="all",validatecommand=dayvc)
        
        self.year.pack(side=tk.LEFT)
        self.sep1.pack(side=tk.LEFT)
        self.month.pack(side=tk.LEFT)
        self.sep2.pack(side=tk.LEFT)
        self.day.pack(side=tk.LEFT)
        
        self.year.bind("<KeyPress>",lambda e:self.key('year', e))
        self.month.bind("<KeyPress>",lambda e:self.key('month', e))
        self.day.bind("<KeyPress>",lambda e:self.key('day', e))

    def setPrev(self, prev=None):
        self.prev = prev

    def setNext(self, next=None,):
        self.next = next
    
    def year_check(self, event, command, index, char, proposed):
        if event == 'key':
            if command == '0': # Delete command
                return True
            else:
                if not char.isdigit():
                    return False
        if event == 'key' and len(proposed) == 4:
            self.month.focus()
        return True
    
    def month_check(self, event, command, index, char, proposed):
        if event == 'key':
            if command == '0': # Delete command
                return True
            else:
                if not char.isdigit():
                    return False
            if int(proposed) < 0 or 12 < int(proposed):
                return False
            if len(proposed) == 2:
                self.day.focus()
        return True
    
    def day_check(self, event, command, index, char, proposed):
        if event == 'key':
            if command == '0': # Delete command
                return True
            else:
                if not char.isdigit():
                    return False
            if int(proposed) < 0 or 31 < int(proposed):
                return False
        if event == 'key' and len(proposed) == 2:
            if self.next:
                self.next.focus()
        return True

    def key(self, w, event):
        if event.keysym == 'Left':
            if w == 'year':
                if self.prev:
                    if self.year.index(tk.INSERT) == 0:
                        self.prev.focus()
            elif w == 'month':
                if self.month.index(tk.INSERT) == 0:
                    self.year.focus()
            elif w == 'day':
                if self.day.index(tk.INSERT) == 0:
                    self.month.focus()
        elif event.keysym == 'Right':
            if w == 'year':
                if len(self.year.get()) == self.year.index(tk.INSERT):
                    self.month.focus()
            elif w == 'month':
                if len(self.month.get()) == self.month.index(tk.INSERT):
                    self.day.focus()
            elif w == 'day':
                if self.next:
                    if len(self.day.get()) == self.day.index(tk.INSERT):
                        self.next.focus()

    def get(self):
        try:
            d = datetime(year=int(self.year.get()),
                        month=int(self.month.get()),
                        day=int(self.day.get())) 
        except:
            return None    
        return d

    def clear(self):
        self.year.delete(0,tk.END)
        self.month.delete(0,tk.END)
        self.day.delete(0,tk.END)

class App(tk.Tk):
    def __init__(self):
        super().__init__()
        self.title("DateEntry test")
        self.label = tk.Label(text="日付を入力してください(YYYY/MM/DD):")
        self.label.grid(row=0,column=0)
        self.date_entry = DateEntry()
        self.clear_button = tk.Button(text="Clear", command=self.clear)
        self.close_button = tk.Button(text="Close", command=self.destroy)
        self.show = tk.Button(text="show", command=self.show)
        
        self.date_entry.setPrev(self.show)
        self.date_entry.setNext(self.clear_button)

        self.date_entry.grid(row=0,column=1)
        self.clear_button.grid(row=2,column=0)
        self.close_button.grid(row=2,column=1)
        self.show.grid(row=2,column=2)

    def clear(self):
        self.date_entry.clear()
        
    def show(self):
        d = self.date_entry.get()
        if d:
            message = "入力されたのは、「"+d.strftime("%Y/%m/%d")+"」です。"
        else:
            message = "正しい日付がセットされていません。"
        mb.showinfo(title="info",message=message)

if __name__ == "__main__":
    app = App()
    app.mainloop()

解説

　日付を入力するのに、途中のハイフンやスラッシュを入力するのはイケてないよねぇ、と思ったので、なんとかならないかとちょっと調べてみました。ここにありました。みんな同じようなこと考えるのですね。EntryとLabelを組み合わせたFrameをつくることで実現してありましたので、これを参考にしてつくったのが上記のスクリプトです。

　年、月、日をそれぞれEntryでつくります。それぞれvalidatecommandを設定しています。入力は数字のみ、年は4桁入力されたとき、月と日は2桁入力されたとき、それぞれ次の項目に移動するようにしています。月は1～12、日は1～31のみ入力できるようにしました。

　あと、左右のキーで年月日を移動できるようにしてみました。ポイントは現在のカーソル位置が途中の時は項目間の移動ではなくて、項目内の移動にしなくてはならない、というところでしょうか。現在のカーソル位置は、tk.Entry.index(tk.INSERT)で取得できました。

まとめ

　日付項目を実装するだけなのに、けっこうなコーディング量になってしまいました。これって、誰かがもう作っているんじゃないかなぁ、と、思いながら作りましたが、楽しかったです♪

　今日も見に来てくださって、ありがとうございます。石川さんです。

　在宅勤務二日目、調子が出てまいりました。皆さんはいかがでしょうか。さて、先日はEntryについて軽く紹介しましたが、今日はもうちょっと突っ込んで、日付入力用のEntryをつくることを考えてみたいと思います。

　ちょっとやってみましたが、満足いくものにならなかったので、引き続き検討したいと思いますが、今回作ってみたものを紹介しておきます。「Python GUI Programing with Tkinter」という書籍を参考にして作成してみました。

出来上がりイメージ

ソースコード

import tkinter as tk
from datetime import datetime

class App(tk.Tk):
    def __init__(self):
        super().__init__()
        vc = (self.register(self.validate), '%V', '%d', '%i', '%S')
        ivc = (self.register(self.invalid), '%V')
        self.dentry = tk.Entry(self,
                               validate="all",
                               validatecommand=vc,
                               invalidcommand=ivc)
        self.error = tk.StringVar()
        self.error_info = tk.Label(self,textvariable=self.error)
        self.button = tk.Button(self,text="Close",command=self.destroy)

        self.dentry.pack(side=tk.TOP)
        self.error_info.pack(side=tk.TOP)
        self.button.pack(side=tk.BOTTOM)
        
    def validate(self, event, command, index, char):
        self.toggle_error()
        if event == "key":
            if command == '0': # 削除のとき
                return True
            else:
                if index in ('01235689'):
                    return char.isdigit()
                elif index in ('47'):
                    return char == '-'
                else:
                    return False
        elif event == "focusout":
            try:
                datetime.strptime(self.dentry.get(),'%Y-%m-%d')
            except:
                return False
        return True
    
    def invalid(self,event):
        if event == 'focusout':
            self.toggle_error("日付形式が正しくありません。")

    def toggle_error(self,error=""):
        self.error.set(error)
        if error:
            self.dentry.config(foreground="red")
        else:
            self.dentry.config(foreground="black")
        
if __name__ == '__main__':
    app = App()
    app.mainloop()

概要

　validateでキー入力されたとき、4番目、7番目の入力では、「-」のみ入力可能としています。それ以外のキー入力は数値のみ入力可能です。フォーカスが外れたときに、日付形式が「’%Y-%m-%d’」となっているかどうかチェックします。ここでエラーが発生したら、「日付形式が正しくありません。」と出力されるようになっています。

　何が気に入らないかというと、入力位置によって、入力できるキーを制限しているので、既に何かが入力されているタイミングでも決まった位置に数字や「-」が入力可能なので、「2020–04-099」のような入力ができてしまいます。

まとめ

　とりあえず、入力チェックが付いたものはできました。しかし、別のやり方ができないかどうか、もうちょっと検討してみます。

　今日も見に来てくださって、ありがとうございます。石川さんです。

　Tkinterで業務アプリケーション作るときに絶対避けて通れない、Entryについてちょっとまとめたいと思います。Entryは一行だけデータを入力できるフィールドを作るためのウィジェットです。データが入力できるだけだよねぇ、と、思っていたのですが、意外と便利な機能が用意されているようです。

実行イメージ

　普通にEntryを何の飾りもなく使うとこんな感じになります。

ソースコード

　もっともシンプルなEntryの使い方は、以下の通りです。

import tkinter as tk

class App(tk.Tk):
    def __init__(self):
        super().__init__()
        self.title("Entry Test")
        self.entry = tk.Entry()
        self.entry.pack()
    
if __name__ == "__main__":
    app = App()
    app.mainloop()

使い方

　普通にテキストを入力することができます。

　入力されたテキストを取得するには、self.entry.get()のように、getメソッドで入力されたテキストを取得することができます。

　入力時のチェックは、validate、validatecommandで実装可能です。例えば入力文字数を6文字に限定するにはスクリプトを以下のように書き換えます。

import tkinter as tk

class App(tk.Tk):
    def __init__(self):
        super().__init__()
        self.title("Entry Test")
        vc = (self.register(self.validate_command), "%P")
        self.entry = tk.Entry(validate="key", validatecommand=vc)
        self.entry.pack()
        
    def validate_command(self, string):
        return len(string) <= 6
                
if __name__ == "__main__":
    app = App()
    app.mainloop()

　7行目でコマンドを登録して8行目のEntry定義時にvalidateとvalidatecommandをセットしています。validateには、ここにあるように、”key”以外にも、”none”、”focusin”、”focusout”、”focus”、”all”が指定できるようです。ちなみに”focus”は、”focusin”と”focusout”の両方で、”all”は、”key”と”focusin”、”focusout”と同じだそうです。指定することで、いずれかのトリガーでコマンドが実行される、ということになります。

　”%P”を指定しているところは、以下の指定が可能でそれぞれの意味を記載しておきます。

コード	渡される値
%d	1は挿入、0は削除、その他のイベントは-1
%i	挿入または削除される文字列のインデックス
%P	変更後に想定されるフィールドの値
%s	編集前のエントリの現在値
%S	挿入または削除されるテキスト文字列
%v	現在設定されている検証のタイプ（focusin、focusout、key、forced）
%V	コールバックした検証のタイプ（focusin、focusout、key、forced）
%W	ウィジェットの名前（entry!）

まとめ

　今回紹介した、validateとvalidatecommandを利用することで簡単な入力制限を実現できそうですね。