カテゴリー: Program

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

　透明なキャンバスを重ねるというアイディアを実現しようといろいろ調べまわりましたが、なかなか良いものが見つかりません。その中で見つけたちょっと面白い技を紹介します。透明なウィンドウです。

出来上がりイメージ

ソースコード

import tkinter as tk

class Application(tk.Tk):
    def __init__(self):
        super().__init__()
        self.title("Transparent window")
        self.geometry("500x300")
        self.config(bg="white")
        self.attributes("-transparentcolor", "white")
        
if __name__ == "__main__":
    application = Application()
    application.mainloop()

説明

　ポイントはただ一つ、9行目の「self.attributes(“-transparentcolor”, “white”)」です。これで透明になる色をセットしています。この場合、白（”white”）ですね。8行目でbg（背景色）に白を設定しています。この色が透明になる、ということで画像のようなウィンドウが出来上がります。

まとめ

　背景を透明にすることで、変わった形のウィンドウを作ったり、特殊な効果を実現することができそうですね。ちなみに、Raspbianではうまく動作しない、と、言われていました。

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

　EclipseのGraphical Editing Framework(GEF)には透明なキャンバスがあって、背面にConnection layer、前面にPrimary layerを配置することで、コネクションをうまくあつかう工夫をしています。tkinterでも同じことができないかといろいろと調べていたのですが、ちょっと難しそうです。

　レイヤーが変えられないので、項目を前後に移動して重なりを制御するしかありませんね。と、いうときに使えるのが、tag_raise()、tag_lower()です。

できあがりイメージ

ソースコード

import tkinter as tk

class Application(tk.Tk):
    def __init__(self):
        super().__init__()
        self.geometry("600x400")
        self.title("canvas tag_raise")
        
        self.canvas = tk.Canvas(self, background="white")
        self.canvas.pack(fill=tk.BOTH, expand=True)
        
        self.r = self.canvas.create_rectangle(90,40,510,360,fill="lightblue")
        self.o = self.canvas.create_oval(30,30,560,370,fill="lightyellow")
        
        self.item = "r"
        
        self.canvas.bind("<ButtonPress>", self.clicked)
        
    def clicked(self, event):
        if self.item == "r":
            self.canvas.tag_raise(self.r)
            self.item = "o"
        else:
            self.canvas.tag_raise(self.o)
            self.item = "r"
        
if __name__ == "__main__":
    application = Application()
    application.mainloop()

説明

　12行目、13行目でcreate_rectangle()、create_oval()でキャンバス上に四角形と楕円を描画します。このときの戻り値はidで、キャンバス上に描画した項目を管理する番号です。17行目で、クリックしたときに実行するメソッドをバインドしています。

　21行目と24行目のtag_raise()で指定されたidの項目を上に移動させます。

まとめ

　tag_raise()とtag_lower()を使って、項目をz軸方向に移動させることができます。ただし、一番上と一番下しか指定できませんので、複数項目があって、重なる順番が必要な時は、工夫が必要になりそうですね。

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

　今日は、キャンバスの切り替えのやり方です。透明なキャンバスを二枚重ねる方法はないかと調べていたのですが、見つからず、かわりにフレームを切り替える方法を見つけましたので、紹介します。

できあがりイメージ

　初期表示画面は以下のように三角形を描いてあります。

　キャンバスをクリックすると次のように切り替わります。

ソースコード

import tkinter as tk

class App(tk.Tk):
    def __init__(self):
        super().__init__()
        self.title("test")
        self.frames = {}
        
        self.frames["top"] = top = tk.Frame(self,width=300,height=200)
        topcanvas = tk.Canvas(top)
        topcanvas.place(x=0, y=0)
        topcanvas.create_oval(30,30,270,170,outline="blue",fill="white")
        top.grid(row=0,column=0)

        self.frames["bottom"] = bottom = tk.Frame(self,width=300,height=200)
        bottomcanvas = tk.Canvas(bottom)
        bottomcanvas.place(x=0, y=0)
        bottomcanvas.create_polygon(150,30,30,170,270,170,fill="lightgrey")
        bottom.grid(row=0,column=0)

        self.bind("<ButtonPress>", self.clicked)
        self.frame = "top"

    def clicked(self, event):
        self.frames[self.frame].tkraise()
        if self.frame == "top":
            self.frame = "bottom"
        else:
            self.frame = "top"
        
if __name__ == "__main__":
    app = App()
    app.mainloop()

説明

　クリックしたら描かれたキャンバスが切り替わります。正確には、フレームが切り替わります。まずは、アプリケーション作成、いつものようにtkinterのTkを継承してクラスを開始しています。__init__メソッドでは、最初にsuper().__init__()と記述して、親クラスTkの__init__()初期化メソッドを呼び出しています。その後、タイトルをセットして、self.framesをディクショナリとして初期化しています。

9行目でフレームを作成、10行目でそのフレーム上にキャンバスを作成します。11行目でplaceを使って配置しています。12行目でキャンバスへ楕円を描画しています。13行目でフレームをgridを使って配置しています。作ったフレームはディクショナリにセットしています。

　15～19行目、同様にフレームとキャンバスを作成、配置しています。21行目、クリックされたときに呼び出すメソッドをセット、作ったフレームはディクショナリにセットしています。

　25行目、ここが実際のフレームの切り替えを実行している箇所です。ディクショナリに登録したフレームのtkraise()メソッドを呼び出して、フレームを最上位に移動しています。

　フレームをたくさん作って、タイマーでパカパカ切り替えたら、アニメーションが作れそうですね。

まとめ

　フレームの切り替え、やり方さえ知っていれば、簡単ですね。キャンバスを二枚重ねて表示する方法は、いまだ不明です。どなたか知っている方がいらっしゃれば、教えてください。

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

　今日は、データベースオラクルへ接続、そのスキーマのテーブル情報を取得してTreeviewへ表示するプログラムにチャレンジしました。いや～、けっこう時間がかかりましたねぇ。Treeviewを思ったように操作するのが難しかったなぁ。

　Oracleのバージョンは18c Express Edition、PythonはAnaconda3です。

出来上がりイメージ

　今回のソースを実行して、「load table」ボタンをクリックすると、こんな感じのウィンドウになります。左側のテーブル一覧を選択すると右側に項目の一覧が表示されます。

ソースコード

import cx_Oracle as db
import tkinter as tk
import tkinter.ttk as ttk

LOGIN_USER = "ユーザー名をここに入力"
LOGIN_PASSWORD = "パスワードをここに入力"
LOGIN_HOST = "localhost:1521/xepdb1"

class Application(tk.Tk):
    def __init__(self):
        super().__init__()
        self.title("Table viewer sample for ORACLE XE 18c")

        self.conn = db.connect(LOGIN_USER, LOGIN_PASSWORD, LOGIN_HOST)
        self.cur = self.conn.cursor()
        
        self.style = ttk.Style(self)
        self.style.configure("Treeview", rowheight=30)
        
        columns = ("#1", "#2")
        self.table_list = ttk.Treeview(self, show="headings", columns=columns, selectmode="browse")
        self.table_list.heading("#1", text="TABLE_NAME")
        self.table_list.column("#1", width=125)
        self.table_list.heading("#2", text="COMMENTS")
        self.table_list.column("#2", width=300)
        self.table_list.grid(row=0, column=0, rowspan=2, sticky=tk.NSEW)
        self.scroll_bar = ttk.Scrollbar(self, command=self.table_list.yview)
        self.table_list.configure(yscroll=self.scroll_bar.set)
        self.scroll_bar.grid(row=0, column=1, rowspan=2, sticky=tk.NS)
        self.table_list.bind("<<TreeviewSelect>>", self.show_table)
        
        columns = ("#1","#2","#3")
        self.table_info = ttk.Treeview(self, show="headings", columns=columns)
        self.table_info.heading("#1", text="COLUMN_NAME")
        self.table_info.heading("#2", text="COMMENTS")
        self.table_info.heading("#3", text="DATA_TYPE")
        self.table_info.grid(row=0, column=2, sticky=tk.NSEW)
        
        self.load_button = ttk.Button(self, text="load table", command=self.load_table)
        self.load_button.grid(row=1, column=2)
        
        self.grid_rowconfigure(0, weight=1)

    def load_table(self):
        self.table_list.delete(*self.table_list.get_children())
        self.table_info.delete(*self.table_info.get_children())
        sql = ("SELECT TABLE_NAME, COMMENTS"
               "  FROM USER_TAB_COMMENTS"
               " WHERE TABLE_TYPE = 'TABLE'")
        results = self.cur.execute(sql)
        for row in results:
            self.table_list.insert("", tk.END, values=row)
        self.table_list.selection_set(self.table_list.get_children()[0])
    
    def show_table(self, event):
        sel = self.table_list.selection()
        table_name = self.table_list.item(sel[0])["values"][0]
        sql = ("SELECT T1.COLUMN_NAME, T1.COMMENTS,"
               "  CASE WHEN T2.DATA_TYPE IN ('TIMESTAMP(6)','DATE') THEN T2.DATA_TYPE"
               "       WHEN T2.DATA_TYPE IN ('CHAR','VARCHAR2') THEN T2.DATA_TYPE ||'('||T2.DATA_LENGTH||')'"
               "       WHEN T2.DATA_TYPE = 'NUMBER' THEN T2.DATA_TYPE || "
               "         CASE WHEN T2.DATA_PRECISION IS NULL AND T2.DATA_SCALE IS NULL THEN ''"
               "              WHEN T2.DATA_PRECISION IS NOT NULL AND NVL(T2.DATA_SCALE,0) = 0 THEN '('||T2.DATA_PRECISION||')'"
               "              WHEN T2.DATA_PRECISION IS NOT NULL AND T2.DATA_SCALE IS NOT NULL THEN '('||T2.DATA_PRECISION||'.'||T2.DATA_SCALE||')'"
               "              WHEN T2.DATA_PRECISION IS NULL THEN '(.'||T2.DATA_SCALE||')'"
               "              END"
               "       END"
               "  FROM USER_COL_COMMENTS T1, USER_TAB_COLUMNS T2"
               " WHERE T1.TABLE_NAME = T2.TABLE_NAME"
               "   AND T1.COLUMN_NAME = T2.COLUMN_NAME"
               "   AND T1.TABLE_NAME = :table_name")
        results = self.cur.execute(sql, table_name=table_name)
        self.table_info.delete(*self.table_info.get_children())
        for row in results:
            self.table_info.insert("", tk.END, values=row)
        
if __name__ == "__main__":
    application = Application()
    application.mainloop()

解説

　Oracleへの接続にはおなじみのcx_Oracleを利用しました。cx_Oracleのセットアップについては、こちらを参考にしてください。

　５～7行目の接続情報はご自分の環境にあわせて変更してください。Oracle18c Express Editionをデフォルトインストールしたぼくの環境では、このLOGIN_HOSTで接続できました。もしかしたらlocalhostをローカルPCのIPアドレスに変更する必要があるかも知れません。

　14、15行目の初期化処理で、Oracleへの接続とカーソル取得しています。21行目でTreeviewを作成しています。showオプションは”tree”と”heading”が指定できますが、組み合わせで以下のように変わってきます。

• “tree”　カラム#0を表示します。
• “headings”　ヘッダ行を表示します。
• “tree headings”　カラム#0とヘッダ行の両方を表示します。（デフォルト値）
• “” カラム#0もヘッダ行も表示しない。

　selectmodeは、”extended”、”browse”、”none”が選択可能で、以下のような意味があります。

• “extended”　複数アイテムが選択可能。（デフォルト値）
• “browse”　単一のアイテムが選択可能。
• “none”　選択状態は変わらない。

　ちなみに、このTreeviewの行間、ぼくの環境Windows10では低く設定されていて文字が切れてしまっていたので、17、18行目のtkk.Styleを使って”Treeview”のrowheightを30にセットしています。

　スクロールバーは27、28行目で作成してセットしています。イディオムだと思って覚えてしまいましょう。30行目でバインドしているのは、仮想イベントの<<TreeviewSelect>>です。セレクションが変更されたときに発生します。ここでは、show_tableをバインドしています。これで選択されたテーブルの情報を隣のTreeviewに表示しています。

　42行目のself.grid_rowconfigure(0, weight=1)ですが、ウィンドウのサイズを変更したときに、行がどれくらいの割合で広がるか、というのを設定しています。指定しない場合のweightは0にセットされています。これによりgridで指定された0行目がウィンドウのサイズ変更に伴って変更されます。ちなみに、ウィジェットにgridを適用するときにstickyを指定しない場合は大きさは変わらないので注意が必要です。

　45、46行目では、Treeviewの項目を削除しています。すべての項目を取得するのに、self.table_list.get_children()を利用しています。このメソッドはすべての項目をタプルで戻します。self.table_list.delete()の引数は、削除したい項目をすべて渡す必要があるため、先頭に「*」アスタリスクを付けて、タプルのアンパックをしています。タプルのままでは動作しませんので、注意が必要です。

　47～49行目はSQL文を定義しています。複数文字列をインデントを無視した形で改行するのに丸括弧「()」を使っています。丸括弧の中はインデント無視できるのですよね。ちなみにここで指定しているテーブルのUSER_TAB_COMMENTSは、オラクルのデータディクショナリで、テーブルに設定されているコメントを参照することができるビューになります。

　SQL文の実行は50行目です。51行目で結果セットを順番に取り出すforループを記述しています。データを取得して、ループして一行ずつ処理する、このパターンもよく使いますので、覚えておくと便利です。

　Treeviewへのデータの追加はinsert()メソッドです。valuesパラメータを使うことで複数項目を一気にセットすることができます。

　あと、53行目は、テーブルを取得したときに、1行目を選択させて、テーブル情報を右側に表示するために追加しました。1行目を選択するのに結構悩みましたよ～。selection_set()メソッドへ渡すパラメータは項目名なのですよね。0とか-1とかを指定してもエラーになります。そこで、ここでは、self.table_list.get_children()[0]を使って最初の項目を取得しています。この0を-1に変更すると最後の項目、任意の行の場合も数値を変更するだけで対応可能ですね。

　56行目、sel = self.table_list.selection()は、選択中のアイテム名を取得しています。取得結果は複数の場合もあるのでタプルで戻ってきます。ここでは一項目しか取得できない設定ですので、sel[0]と指定すれば、選択中の項目が利用可能になります。57行目のtable_name = self.table_list.item(sel[0])["values"][0]で、Treeviewにセットされた値を取得することができます。

まとめ

　いや～、時間かかったなぁ。あ、二つ目のSQLの説明を忘れてました。ま、そんなに難しくないし、見ればわかるか。Treeviewの扱いに慣れるのには、ちょっと時間がかかりそうですね。またサンプル作ってみますね。

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

　先日、バーコードを作るプログラムサンプルを作成しました。その時に、バーコードの種類を選べるようにドロップダウンボックスを用意して、選べるようにしようかな、と思いました。ところが調べてみるとドロップダウンの機能はOptionMenuとComboboxの二種類ありました。ぼくの思っていたドロップダウンはComboboxの方でしたが、ちょっと調べたものをまとめておきたいと思います。

出来上がりイメージ

　はい、今回のプログラムの出来上がりイメージはこんな感じです。上に、OptionMenu、下にComboboxを配置しました。選択肢は月の和名にしてみました。

ソースコード

　ソースコードは以下の通りです。

import tkinter as tk
import tkinter.ttk as ttk

class Application(tk.Tk):
    def __init__(self):
        super().__init__()
        self.title("ドロップダウンサンプル")
        
        months = ["睦月","如月","弥生",
                  "卯月","皐月","水無月",
                  "文月","葉月","長月",
                  "神無月","霜月","師走"]
        
        option_label = tk.Label(self, text="OptionMenu:")
        option_label.grid(row=0, column=0, padx=10, pady=10)

        self.ov = tk.StringVar()
        self.ov.set("弥生")
        self.o = tk.OptionMenu(self, self.ov, *months, command=self.optionmenu_selected)
        self.o.grid(row=0, column=1, padx=10, pady=10)
        
        combo_label = tk.Label(self, text="Combobox:")
        combo_label.grid(row=1, column=0, padx=10, pady=10)

        self.c = ttk.Combobox(self, values=months)
        self.c.grid(row=1, column=1, padx=10, pady=10)
        self.c.current(2)
        self.c.bind("<<ComboboxSelected>>", self.combobox_selected)
        
    def optionmenu_selected(self, event):
        print(event, self.ov.get())

    def combobox_selected(self, event):
        print(self.c.get())

if __name__ == '__main__':
    application = Application()
    application.mainloop()

プログラムの説明

　最初のポイントは19行目のOptionMenu()のインスタンスの作成方法ですね。第一引数のselfはよいとして、第二引数は、テキストの変数を指定します。第三引数以降に選択値を書いていきます。今回は、リストで定義しましたので、アスタリスク「*」を付けることでアンパックしています。commandで値が変更されたときの処理を指定することができます。18行目で初期値をセットしています。

　次のポイントは25行目のCombobox()のインスタンス作成のところでしょう。27行目のself.c.current(2)で、3個目の要素を初期値にしています。値が変更されたときのイベントを定義するために、28行目のself.c.bind("<<ComboboxSelected>>", self.combobox_selected)の中で疑似イベント<<ComboboxSelected>>を使って処理を指定しています。

　現在値の取得は、それぞれ31行目のself.ov.get()と34行目のself.c.get()というふうに記載します。

まとめ

　tkinterはもともとUNIXベースで作られていたのだと思います。OptionMenu()の選択肢は、UNIXユーザになじみのあるユーザーインターフェースですが、tkとttkの関係から、こちらの方が先に作られていたようです。Windowsユーザには、Comboboxの方がなじみがありますよね。これで、いくつかの選択肢があっても大丈夫ですね。