2011/10/22

PyQtでラーメンタイマー

リアクション: 
ラーメンタイマー
PyQtでラーメンタイマーを作ってみました。

ラーメンタイマーとは、お湯を入れてラーメンが出来るまでの3分を計るものです。
動画がジャスト3分の物もそう言いますが、今回はきっちり3分計るものです。


参考にさせていただいたのは、こちらです。

PyQtではじめるGUIプログラミング

というか、ほぼおんぶに抱っこ。人の褌で相撲を取るってやつです。感謝いたします。どうもありがとう!

このままやるだけだとちょっとつまらないので、PyQtにせっかく入っている初級者用と見せかけて実は上級者用らしいQt Designerを使ってやってみたいと思います(◉◞౪◟◉`)ニコッ


Qt Desinerを起動
インストールされた、PyQtから、Designerを選びます。











フォーム選択ダイアログ
立ち上がったら、フォーム選択ダイアログが出るので、templates\forms の、Main Window を選択して、作成ボタンを押します。












メニューバーとステータスバーを削除
今回は使用しないので、メニューバーとステータスバーを削除しておきます。
右クリックで、コンテキストメニューが出ますので、それぞれを削除です。









UIの配置
次に、UI部分の配置をします。

一番上に、LCD Numberを配置。

二番目に、Grid Layoutを配置してから

三番目に、Push Buttonを、Grid Layoutの中に4つ放り込みます。
放り込み方が難しいかもしれませんが、1つボタンを放り込んだあと、さらに新しいボタンをLayoutの右端に置くと、青い縦ラインが出るので、そのままドロップすると、横並びになります。
下のほうに入れ込むと、下部分に青い横ラインが出るので、その場所にドロップです。


縦に整列
全て配置し終わったら、UIを綺麗に整頓します。

MainWindowをクリックして、選択をMainWindowにします。
ボタンなどのUIが無いところで、何も選択されていない状態で右クリックして、コンテキストメニューを開きます。
ちょっとここポイントです!

右クリック → レイアウト → 垂直に並べる

を選択します。


整列しました
うまくいけば、右図のような配置になります。

失敗しても根性です。

ウィンドウの右下端をドラッグしても、レイアウトがキープされているのが分かります。







ボタン名とオブジェクト名を変更
ボタン名とオブジェクト名を変更します。
右側のオブジェクトインスペクタにあるpushButtonを選ぶと、対応して選択されるので、見ながら変更していってください。
オブジェクト名は、後々スクリプト編集するときに使うので、覚えておいてください。





シグナル/スロットの設定
次は、ボタンの挙動を作るために、シグナル/スロットを設定します。
右図の手順で、STARTボタンにシグナル/スロットの設定をします。






シグナル/スロットの設定その2
右下にある、シグナル/スロットエディタで、項目を増やしボタンとスロットを設定します。
ダブルクリックで、プルダウンが出るので、選んでください。
全てのボタンに対して行ってください。

ここまでくれば、UIは完成。

ramen_timer.ui

で保存します。

ここまでは、簡単に誰でも作れますね(☉౪ ⊙)プギャー!!!!

後は、タイマーの設定、ボタンを押したときの挙動をスクリプト編集で、実装していきます。
(Qt Designerって、スロットのコード編集って出来ないですよね?知ってる方いらっしゃいましたら教えてください。)

Shift+右クリックからコマンドウィンドウを起動
Qt Designerから作られたファイルは、uiファイルです。
これをpyファイルに変換します。
先ほど作成したuiファイルのフォルダで、Shift+右クリックからコマンドウィンドウを起動します。




コマンドプロンプトで、次のコマンドを実行して、uiからpyに変換します。

pyuic4 -i 0 -x ramen_timer.ui -o ramen_timer.py

オプションの -i は、インデントのスペースの数を表しています。0にするとインデントがタブになるので、これが嫌な方は、無くてもOKです。
SoftimageのScript Editorは、インデントがタブになってしまうので、そっちで編集する方はつけたほうがいいでしょう。

出来上がったコードは、こんな感じ。



次に、__init__メソッドを追加します。
Ui_MainWindowクラスに、countというアトリビュートを加えます。
このcountの値を減らしてカウントダウンさせます。



そのあと、QTimerオブジェクトを入れ込みます。
setupUiの一番上に追加します。
後述しますが、時間が来たらLCDNumberの値を減らすメソッドを実行させるためです。
今回は、180.00で表示させようと思うので、10msで0.01カウント減らします。
ですので、setIntervalに10を入れ、インターバルが経過したら、カウントを0.01減らすといった内容です。



次に、LCDNumberの値を初期値180.00を表示されるメソッドを書き込みます。
このメソッドは、後述します。
書く場所は、setupUiメソッドの一番下です。



準備が出来たので、シグナル/スロットのメソッドを書き加えます。
全部で5つあります。



update_display
LCDNumberにカウント表示させます。
countの値に100を割って、その値をアップデートです。

do_countdown
countの値を1減らして、update_displayします。
countの値が0以下なったら、stop_countdownを呼びます。

start_countdown
countが0より大きかったら、QTimerをスタートさせます。

stop_countdown
QTimerをストップします。
これによって、カウントが減らなくなります。

reset_countdown
QTimerをストップすると共に、countの値を18000にします。
あとで、100割るためです。
その後、update_displayで、表示を元に戻します。

ここまで来ればほぼ完璧です。pyファイルを単体でつつけば、ラーメンタイマーの完成!
しかし、Softimageで動かすことを考えると、もう少し編集が必要です。
まず、1行目の

# -*- coding: utf-8 -*-

を削除します。
その後、一番下のほうにある

if __name__ == "__main__":

を削除して、そこから下のインデントを揃えます。
最後に一番下の

sys.exit(app.exec_())



app.exec_()

に変更です!

これで、全ての機能が入りました!!!!
編集したコードは、こんな感じです。



おめでとうございます!
これで、PyQtラーメンタイマーチュートリアルは終了となります。
長々とありがとうございました。

このコードをScript Editorや、Script Libraryから実行して、完璧にうまいラーメン作ってみてくださいね~(´☣౪☣)ハフー



0 件のコメント: