データベースと GUI のサンプルを紹介!

まずは結論から

登録者は下のとおりです。後々分かりやすいようにグレーにしてあります。

登録者

作成される GUI はこちら。

作成される GUI
作成される GUI

環境の確認とソースコード

環境の確認をします。

$ python3
Python 3.6.9 (default, Apr 18 2020, 01:56:04) 
[GCC 8.4.0] on linux
Type "help", "copyright", "credits" or "license" for more information.
>>> import wx
>>> print(wx.version())
4.0.1 gtk3 (phoenix)
wxPython Phoenix の確認
wxPython Phoenix の確認

Python は 3.6.9 、wxPython は 4.0.1 の Pheonix です。

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

#!/usr/bin/python3


# 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()

con.commit()
con.close()

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

class Sample(wx.Frame):
	def __init__(self, parent, id, title):
		wx.Frame.__init__(self, parent, id, title, size=(900, 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,0,0)
		
		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), (num, 0)), 0, wx.ALIGN_CENTER_VERTICAL | wx.ALIGN_CENTER_HORIZONTAL)
			# img_known_picture の描画
			img_known_picture_bitmap = 'pictures_of_people_i_know/' + img_known_picture
			image = wx.Image(img_known_picture_bitmap)
			self.bitmap = image.ConvertToBitmap()
			img_known_picture_bitmap = wx.StaticBitmap(panel, -1, self.bitmap, (0, 0), (100, 100))
			img_known_picture_bitmap.SetBackgroundColour('#ededed')
			grid1.Add(img_known_picture_bitmap, 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)
			# 登録者名の描画
			grid1.Add(wx.StaticText(panel, -1, str(img_known_picture), (num, 3)), 0, wx.ALIGN_CENTER_VERTICAL | wx.ALIGN_CENTER_HORIZONTAL)
			# date の描画
			grid1.Add(wx.StaticText(panel, -1, (date), (num, 4)), 0, wx.ALIGN_CENTER_VERTICAL | wx.ALIGN_RIGHT)
			
			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()

結果

動作の様子をキャプチャしました。

処理の様子
処理の様子
データベースの使用と作成される GUI の様子

データベースの使い回し

一度データベースに保存してあるので再度値を取り出すことが出来ます。ソースコードは以下のようになります。

#!/usr/bin/python3


# データベース ==========================================================
import sqlite3
con = sqlite3.connect('sample.db')
cursor = con.cursor()
datas = cursor.fetchall()
con.commit()
con.close()


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

class Sample(wx.Frame):
	def __init__(self, parent, id, title):
		wx.Frame.__init__(self, parent, id, title, size=(900, 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,0,0)
		
		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), (num, 0)), 0, wx.ALIGN_CENTER_VERTICAL | wx.ALIGN_CENTER_HORIZONTAL)
			# img_known_picture の描画
			img_known_picture_bitmap = 'pictures_of_people_i_know/' + img_known_picture
			image = wx.Image(img_known_picture_bitmap)
			self.bitmap = image.ConvertToBitmap()
			img_known_picture_bitmap = wx.StaticBitmap(panel, -1, self.bitmap, (0, 0), (100, 100))
			img_known_picture_bitmap.SetBackgroundColour('#ededed')
			grid1.Add(img_known_picture_bitmap, 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)
			# 登録者名の描画
			grid1.Add(wx.StaticText(panel, -1, str(img_known_picture), (num, 3)), 0, wx.ALIGN_CENTER_VERTICAL | wx.ALIGN_CENTER_HORIZONTAL)
			# date の描画
			grid1.Add(wx.StaticText(panel, -1, (date), (num, 4)), 0, wx.ALIGN_CENTER_VERTICAL | wx.ALIGN_RIGHT)
			
			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()

既存のデータベースから値を引っ張ってきていますので Face01 を使わないで処理をしています。
立ち上がりのスピードも申し分ありません。

すぐにウィンドウが開く様子
すぐにウィンドウが開く様子

まとめ

wxPython がバージョンアップして Pheonix ( 以前のバージョンは ‘Classic’ ) になりましたので GUI のサンプルコードとして手を加えました。
データベースの紹介も兼ねて、一度吐き出されるデータをデータベースに入れ、それから値を取り出しています。
wxPython に限りませんがこのように簡単にグラフィカルインターフェースを作成することが出来ます。
実際のアプリケーションにするなら、登録者の写真・氏名登録画面なども作ると良いと思います。Google で「顔認証システム 画面」と画像検索すると下に示すように色々と出てきます。ご参考にしてください。

Google で「顔認証システム 画面」と画像検索
Google で「顔認証システム 画面」と画像検索

以上です。
最後までお読み頂きありがとうございました。

Follow me!