GUI をつけるサンプル

GUI インターフェース
GUI インターフェース

先日作ったデータベースに GUI (グラフィカルユーザーインターフェース)をつけてみましょう。

wxPython を使います。先に結果を貼っておきます。

東野幸治さんと松本人志さんの顔認識の様子
東野幸治さんと松本人志さんの顔認識の様子

まず、先日のおさらいから。Face01 を呼び出して戻り値を得ます。

import face01 as f
# Face01 ================================================================
known_face_encodings, known_face_names = f.load_priset_image()
xs = f.face_attestation( known_face_encodings, known_face_names )

【追記】
Face01 シリーズの 1.0.4 からは Face01 の呼び出し方が変わりました。

# Face01 ===============================================================
import face01_linux_for_testscript as f
kaoninshoDir, pictures_of_people_i_knowDir = f.home()
known_face_encodings, known_face_names = f.load_priset_image(kaoninshoDir, pictures_of_people_i_knowDir, jitters = 1)
xs = f.face_attestation( kaoninshoDir, known_face_encodings, known_face_names, tolerance=0.5 )

移植性を高めるため等から内部プログラムが変更されています。ご注意ください。

次に先日のデータベースを設定します。

# データベース =====================================================================
import sqlite3
con = sqlite3.connect('sample.db')
cursor = con.cursor()
cursor.executescript("""
DROP TABLE IF EXISTS data_set;
CREATE TABLE data_set(id integer, name, pict text, date)
""")

id = 1
persons = []
for x in xs:
	persons.append( (id, x['name'], x['pict'], x['date']) )
	con.commit()
	id = id + 1
cursor.executemany("INSERT INTO data_set VALUES(?,?,?,?)", persons)

cursor.execute('SELECT * FROM data_set')
datas = cursor.fetchall()

そしてこれに GUI をつけます。

【追記】
wxPython は Python2 専用です。Python3 になってからは wxPython Pheonix に変わっています。
記事執筆時には Python2.7 でしたので ‘Classic’ wxPython のコードとなっています。
Python3 系を使用する場合は最新の wxPython Pheonix のコードに直してください。
‘Classic’ wxPython か Pheonix かどちらがインストールされているか分からない場合、端末から
$ python3 -c “import wx; print(wx.version())”
4.0.1 gtk3 (phoenix)
のようにして確認してください。
‘Classic’ から Pheonix への移行ガイドは wxPython Project Phoenix Migration Guide から確認できます。
また Pheonix 用のサンプルコードは「データベースと GUI のサンプルを紹介!」に記載しましたのであわせてご参照ください。

# wxPython ===============================================================
import wx

class Sample(wx.Frame):
	def __init__(self, parent, id, title):
		wx.Frame.__init__(self, parent, id, title, size=(700, 500))
		# メニューバー
		menubar = wx.MenuBar()
		file = wx.Menu()
		quit = wx.Menu()
		quit = wx.MenuItem(file, 1, '&Quit\tCtrl+Q')
		file.AppendItem(quit)
		self.Bind(wx.EVT_MENU, self.OnQuit, id=1)
		menubar.Append(file, '&File')
		self.SetMenuBar(menubar)
		# Box
		panel = wx.ScrolledWindow(self, -1)
		panel.SetBackgroundColour('white')
		vbox = wx.BoxSizer(wx.VERTICAL)
		
		# grid 設定
		grid1 = wx.GridSizer(1000, 5)
		
		grid1.Add(wx.StaticText(panel, -1, 'ID', (0, 0)), 0, wx.ALIGN_CENTER_VERTICAL | wx.ALIGN_CENTER_HORIZONTAL)
		grid1.Add(wx.StaticText(panel, -1, 'プリセット画像', (0, 1)), 0, wx.ALIGN_CENTER_VERTICAL | wx.ALIGN_CENTER_HORIZONTAL)
		grid1.Add(wx.StaticText(panel, -1, '記録された画像', (0, 2)), 0, wx.ALIGN_CENTER_VERTICAL | wx.ALIGN_CENTER_HORIZONTAL)
		grid1.Add(wx.StaticText(panel, -1, '日時', (0, 3)), 0, wx.ALIGN_CENTER_VERTICAL | wx.ALIGN_CENTER_HORIZONTAL)
		grid1.Add(wx.StaticText(panel, -1, '', (0, 3)), 0, wx.ALIGN_CENTER_VERTICAL | wx.ALIGN_CENTER_HORIZONTAL)
		
		num = 0
		for data in datas:
			(ID, img_known_picture, img_croped_picture, date) = data
			# ID の描画
			grid1.Add(wx.StaticText(panel, -1, str(ID).decode('utf-8'), (num, 0)), 0, wx.ALIGN_CENTER_VERTICAL | wx.ALIGN_CENTER_HORIZONTAL)
			# img_known_picture の描画
			img_known_picture = 'pictures_of_people_i_know/' + img_known_picture
			image = wx.Image(img_known_picture)
			self.bitmap = image.ConvertToBitmap()
			img_known_picture = wx.StaticBitmap(panel, -1, self.bitmap, (0, 0), (100, 100))
			img_known_picture.SetBackgroundColour('#ededed')
			grid1.Add(img_known_picture, 0, wx.ALIGN_LEFT | wx.LEFT | wx.TOP , 5)
			# img_croped_picture の描画
			image2 = wx.Image(img_croped_picture)
			self.bitmap = image2.ConvertToBitmap()
			img_croped_picture = wx.StaticBitmap(panel, -1, self.bitmap, (0, 0), (100, 100))
			img_croped_picture.SetBackgroundColour('#ededed')
			grid1.Add(img_croped_picture, 0, wx.ALIGN_LEFT | wx.LEFT | wx.TOP , 5)
			# date の描画
			grid1.Add(wx.StaticText(panel, -1, (date), (num, 3)), 0, wx.ALIGN_CENTER_VERTICAL | wx.ALIGN_RIGHT)
			# 空白の描画
			grid1.Add(wx.StaticText(panel, -1, '', (num, 3)), 0, wx.ALIGN_CENTER_VERTICAL | wx.ALIGN_CENTER_HORIZONTAL)
			
			num = num + 1
			if num > 990:
				break
			(ID, img_known_picture, img_croped_picture, date) = ('', '', '', '')
		
		panel.SetSizer(grid1)
		panel.SetScrollRate(10,10)
		vbox.Add(panel, 0, wx.BOTTOM | wx.TOP, 9)
		
		self.Centre()
		self.Show(True)
		
	def OnQuit(self, event):
		self.Close()
		
app = wx.App()
Sample(None, -1, 'Sample.py')
app.MainLoop()

結果はこちら。

東野幸治さんと佐々木恭子さんの顔認識の様子
東野幸治さんと佐々木恭子さんの顔認識の様子

簡単なサンプルですが、ソースコードは全て合わせても 100 行前後なのは驚きです。

同時に保存される顔認識動画を貼っておきます。

Follow me!

前の記事

データベースを作る