らふのプログラミングメモ

プログラミングメモです。

Tkinterのキャンバスに画像を入れてみよう。

最近のGUIは見た目が華やかですよね。

なのに、Tkinterはいたってシンプルです。

昔のVB時代を思い出すようなシンプルさですよね。

そんなTkinterもイラストとかをはめ込めばかわいくなるはず!ということで、今回はTkinterに画像をはめ込むことにしてみます。

パネル:Tkinterのキャンバスに画像をはめ込んでみよう

とりあえず画像を準備!

まずはなんでもいいので、いれてみたい画像を準備しましょう。

今回はブログアイコンのこの子を表示させてみたいと思います。

くまちゃんがんばるもん。
この子をTkinterに入れてみましょう!

ウィンドウの準備

まずはウィンドウを準備しましょう。

よくある640*480ピクセルサイズのウィンドウを作ってみましょう。

import tkinter

#ウィンドウを作成する
root = tkinter.Tk()

root.title("らふのアイコン画面をウィンドウに表示させよう")

#ウィンドウの最小サイズ
root.minsize(640,480)

#ウィンドウをループさせる
root.mainloop()

これを実行すると以下のようなキャンバスが作れます。

横640縦480のウィンドウ
640*480のウィンドウ

画像ファイルを実際はめ込んでみよう

先ほどのブログアイコンを実際に設定してみましょう。

ブログアイコンは実行ファイルと同じ場所にimageフォルダを作成し、その中にicon.pngファイルを配置します。

#キャンバスを準備する
canvas = tkinter.Canvas(bg = "white", width = 640,height = 480)
canvas.place(x = 0,y = 0)

#画像ファイルを指定する
img_file = tkinter.PhotoImage(file = "image/icon.png")

#画像ファイルをキャンバスの(0,0)に合わせて表示してみる
canvas.create_image(0,0,image = img_file)

実行結果はこちら

ブログアイコンの右下の絵しか表示されない
右下しか表示されない

これより、キャンバスの(0,0)に合わせて表示をすると、正しく表示されないことがわかります。

なんでこうなるの!?

キャンバスにイメージファイルを挿入する場合、(0,0)と指定するとどうしてこのように場所がずれるのでしょう?

挿入したいイメージファイルの(0,0)の場所の説明
挿入したいイメージファイルの(0,0)の場所はここ

イメージファイルは(0,0)の位置が、画像ファイルの中心部分になっています。

では、tkinterのキャンバスの(0,0)はどこでしょうか。

Tkinerのキャンバスの(0,0)の場所の説明
Tkinterのキャンバスの(0,0)はここ

このようにキャンバスは中心が(0,0)ではなく、左上が(0,0)になっています。

これにより、キャンバスにイメージファイルを挿入するとき、
お互いの原点の位置がずれているため、正しく表示されませんでした。

画像を位置を正しく表示させてみよう

では、実際に正しく表示させてみましょう。

イメージファイルの原点を、キャンパスのどこに置きたいのか指定します。

今回は中心部分にイメージファイルを配置させたいため、(320,240)を指定します。

<修正前>

#画像ファイルをキャンバスの(0,0)に合わせて表示してみる
canvas.create_image(0,0,image = img_file)

    ↓

<修正後>

#画像ファイルをキャンバスの中心(320,240)に合わせて表示してみる
canvas.create_image(320,240,image = img_file)

実行してみましょう。

完成
できた!

このように、キャンバスの位置に注意しながら表示させるように気をつけましょう。

まとめ

今回、Tkinterのキャンバスにアイコンのファイルを表示させてみました。

Tkinterのキャンバスの座標の原点の位置と、挿入したいイメージファイルの原点の位置が異なっていることがわかりました。

キャンバスにイメージファイルを挿入する際、座標の位置には十分気をつけて表示していきましょう。


<最終更新日:2021/11/17>

修正箇所:
・プログラミング修正後のコメントの部分を修正。 ・投稿日と最終更新日の記載追加。

2021/11/06 投稿

DataFrameの値の取り扱い方法 データを置き換える

DataFrameのデータの中で、欠損値ではないけど
あきらかにデータに変な値が入っている・・・。
そんなことがあった場合の処理について、今回はまとめていきたいと思います。

パネル:DataFrameのデータの値を置き換えてみよう
異常値ってあるでしょ?そのデータを一括で置き換えちゃおう!

まずは下準備

前回と同じテストデータを使いたいと思います。

国語や英語などのテスト結果をイメージしてみてください。
-999という値は欠損値ではないけれど、おかしな点数ですよね。
こういったあきらかにおかしな値を置き換える処理を行っていきたいと思います。

Japanese English math Science social studies
100 -999 90 -999 90
-999 80 85 -999 80
80 92 90 90 85
-999 90 88 100 -999
90 88 -999 90 -999

まずは実際にデータをDataFrameにいれてみよう

import pandas as pd

data = {"Japanese":[100,-999,80,-999,90],"English":[-999,80,92,90,88],"math":[90,85,90,88,-999],"Science":[-999,-999,90,100,90],"social studies":[90,80,85,-999,-999]}

df = pd.DataFrame(data)

print(df)

dfの結果:

Japanese English math Science social studies
0 100 -999 90 -999 90
1 -999 80 85 -999 80
2 80 92 90 90 85
3 -999 90 88 100 -999
4 90 88 -999 90 -999

-999点を修正していこう!

-999点を0点に修正していきたいと思います。

df2 = df.replace(-999,0)

print(df2)

df2の結果:

Japanese English math Science social studies
0 100 0 90 0 90
1 0 80 85 0 80
2 80 92 90 90 85
3 0 90 88 100 0
4 90 88 0 90 0

これで-999点が0点に変更されました。

今回は-999点のみが置き換え用のデータでしたが、 1つの処理で複数のデータを置き換えることも可能です。

例えば

df3 = df.replace([92,100],"合格")

とすれば、92点と100点のところが「合格」という言葉に置き換えられます。

Japanese English math Science social studies
0 合格 -999 90 -999 90
1 -999 80 85 -999 80
2 80 合格 90 90 85
3 -999 90 88 合格 -999
4 90 88 -999 90 -999

また、以下のように-999点を0点、100点と合格という置き換えを同時に行うことも可能です。

df4 = df.replace([-999,100],[0,"合格"])

#このように書くことも可能です。←こっちのほうが見やすいかな?
df5 = df.replace({-999:0,100:"合格"})

df4とdf5の結果

Japanese English math Science social studies
0 合格 0 90 0 90
1 0 80 85 0 80
2 80 合格 90 90 85
3 0 90 88 合格 0
4 90 88 0 90 0

このように、一度に複数のデータを同時に置き換えることも可能です。


<最終更新日:2021/10/08>
2021/10/08 投稿