Python3で作るアンケートフォーム【GUI編】

      2015/11/04




Python3でGUIアプリを作ります。

form_wincmp

そのPython3でのGUIを用いて、前回つくったアンケートフォームを改造してみましょう。

オープンソースのサードパーティーのライブラリーを使います。

sudo cp graphics.py /usr/local/lib/python3.4/dist-packages/
sudo apt-get install python3-tk

または、こちらから入手できます。(開いてコピペする場合はgraphics.py、リンクをダウンロードも可)

入手したファイルを/usr/local/lib/python3.4/dist-packages/に入れます。

Windowsユーザーの私(仕事上)はPython/Libに入れます。Visual Studioのタダ版が拡大して、オープンソース化した部分も多くなり、Microsoftも変わりつつありますね。

または、実行するpyファイルと同じディレクトリーなら問題なく動作します。

ここまでで、よく分からない場合はコメントください。

次に、コードです。

すごく雑です。今回は、main()もありません。

from graphics import *

win = GraphWin('Form Window',400,400)

message =Text(Point(160,20),'Welcome. Please answer following questions.')
message.draw(win)

quesArray = ['Enter your name','Enter your gender']
ques2Array = ['Enter your age','Enter your phone number','Enter your email address']
ansArray = []


submitBtnTxt = Text(Point(320,110),'Submit')
submitBtnTxt.draw(win)

submitBtn = Rectangle(Point(290,100),Point(350,120))
submitBtn.draw(win)

for i in range(len(quesArray)):
    submit = False
    quesMessage = Text(Point(160,50),'Q.'+str(i+1)+': '+quesArray[i])
    quesMessage.draw(win)
    inp = Entry(Point(150,70),20)
    inp.draw(win)
    while submit == False:
        click = win.getMouse()    
        if 290 <= click.getX() <= 350 and 100 <= click.getY() <=120:
            submit = True
            answer = inp.getText()
            ansArray.append(answer)
            quesMessage.undraw()
            inp.undraw()

if ansArray[1].lower() == 'male':
    quesMessage = Text(Point(160,50),'Q.3: '+ques2Array[0])
elif ansArray[1].lower() == 'female':
    quesMessage = Text(Point(160,50),'Q.3: '+ques2Array[1])
else:
    quesMessage = Text(Point(160,50),'Q.3: '+ques2Array[2])    
quesMessage.draw(win)
submit = False
inp = Entry(Point(150,70),20)
inp.draw(win)
while submit == False:
    click = win.getMouse()    
    if 290 <= click.getX() <= 350 and 100 <= click.getY() <=120:
        submit = True
        answer = inp.getText()
        ansArray.append(answer)
        quesMessage.undraw()
        inp.undraw()


message.undraw()
message =Text(Point(160,20),'Thank you.')
message.draw(win)

for i in range(len(ansArray)):
    print(ansArray[i])

if win.getMouse():
    win.close()
    

 

虱潰しに行きましょう。

from graphics import *

 

作成したgraphics.pyファイルはモジュールと言い、パイソンのスクリプトが書かれています。
このモジュールから、_で以外のすべて(*は全てをあらわします。)を取得します。

これにより、graphicsライブラリーが使用できます。

win = GraphWin('Form Window',400,400)

ライブラリーの中にあるGraphWin(タイトル,横,高さ)を使います。

GraphWinオブジェクトを変数winにおさめて色々します。

message =Text(Point(160,20),'Welcome. Please answer following questions.')
message.draw(win)

では、メッセージを表示しましょう。Text(座標,文字列)関数を使います。座標にはPoint(x,y)という関数を用います。
文字列として、今回は’’で囲ってみました。
Text()関数によってGraphicsオブジェクトのTextオブジェクトが作成されました。
変数messageにいれます。

そしてmessage.draw(win)で表示します。draw()はGraphWinオブジェクトを引数とします。なので、winをいれます。

quesArray = ['Enter your name','Enter your gender']
ques2Array = ['Enter your age','Enter your phone number','Enter your email address']
ansArray = []

質問と、答えの配列を用意しました。

submitBtnTxt = Text(Point(320,110),'Submit')
submitBtnTxt.draw(win)

submitBtn = Rectangle(Point(290,100),Point(350,120))
submitBtn.draw(win)

送信ボタンを、ウィンドウ上に表示します。
ボタンと言ってもお粗末な物で、指定された範囲内をクリックしたら次へ行くというものです。

まず、Submitとテキストを表示して、その周りに四角を表示してます。

for i in range(len(quesArray)):
    submit = False
    quesMessage = Text(Point(160,50),'Q.'+str(i+1)+': '+quesArray[i])
    quesMessage.draw(win)
    inp = Entry(Point(150,70),20)
    inp.draw(win)
    while submit == False:
        click = win.getMouse()    
        if 290 <= click.getX() <= 350 and 100 <= click.getY() <=120:
            submit = True
            answer = inp.getText()
            ansArray.append(answer)
            quesMessage.undraw()
            inp.undraw()

for i in range():ループの開始です。

submit = Falseとして、クリックに対応します。

quesMessageで質問文を表示します。

Entry(座標,横幅)はエントリーボックスを表示し、入力を取得することのできるEntryオブジェクトを作成します。

それを、inpに入れて、winに表示します。

while submit == False:    submitがFalseの間

click = win.getMouse()はGraphWinオブジェクトのメソッドであるgetMouse()を使います。
getMouse()はユーザーがクリックするまでプログラムを一時停止し、クリックされた座標をPointオブジェクトで返します。

変数clickにはPointオブジェクトを返すwin.getMouse()というものが入ってます。
Pointオブジェクトには,getX()とgetY()というメソッドがあり、座標Xと座標Yを返します。

        if 290 <= click.getX() <= 350 and 100 <= click.getY() <=120:

先ほど作成した、四角形(290,100) (350,120)の座標の中になるようにします。
if 290 <= win.getMouse().getX() <= 350 and 100 <=win.getMouse().getY() <=120:
変数click無しでも動きますよ。

こうすることによって、範囲をクリックしたら、と条件付きにします。

submit = Trueにして、ループを終わらせます。

answer = inp.getText()は、EntryオブジェクトのinpのメソッドであるgetText()を使って、入力された文字列を取得し、変数answerにいれます。
そして、それをansArrayの配列にいれます。

quesMessage.undraw()は、表示されていた質問文を消します。
また、どうようにinp.undraw()をして消します。

if ansArray[1].lower() == 'male':
    quesMessage = Text(Point(160,50),'Q.3: '+ques2Array[0])
elif ansArray[1].lower() == 'female':
    quesMessage = Text(Point(160,50),'Q.3: '+ques2Array[1])
else:
    quesMessage = Text(Point(160,50),'Q.3: '+ques2Array[2])    
quesMessage.draw(win)

ここでは、性別によって質問を変えています。
ansArrayの二番目の答えが、male,femaleか、またはそれ以外かで、quesMessageの中身を変えています。
そして、同じ事の繰り返しです。

 

message.undraw()
message =Text(Point(160,20),'Thank you.')
message.draw(win)

 

ここでは、最初に表示されたメッセージを一回消して、内容を変えて表示します。

for i in range(len(ansArray)):
    print(ansArray[i])

結果を、コンソールに表示します。

if win.getMouse():
    win.close()

ここでは、ユーザーのマウスクリックを待って、クリックされたらウィンドウを閉じるようにしています。

 

これで以上です。お疲れ様です。長かったですね。
今回は、おもにGUIに関して説明しました。

参考にしたものは、こちら(英語)になります。

次回は、今回のコードを綺麗に書き直してみたいと思います。




 - フリーソフト紹介 , , , ,