maya,mel,python,qt,script,UI皆さん、こんにちは。DesignerでUIを作る方法を紹介します。QtUIを作成すれば、色々なプラットホームで同じUIを使うことが出来ます。Designerを立ち上げます。Qtの単体の場合は、Qtインストールフォルダ\bin\designer.exeが入っています。Maya2012の場合はMayaインストールフォルダ/bin/にdesigner.exeがあります。Designerを立ち上ると下の画面が表示されます。Windowを選択し、作成ボタンを押します。SliderをドラッグしてFrame内にドロップします。UIが出来たら、フォームからPreviewを選択、またはCTRL+Rを押します。作ったUIをテストしてみます。今の段階ではウィンドウを大きくしても画面のボタンなどがスケールされません。先にフレームをWindowに固定します。Layoutボタンを押してください。1回PreviewするとFrameがWindowと一緒にスケールされます。Widgetにグループされたからです。オブジェクトインスペクタで確認できます。グループ前グループ後グループされていないアイコングループされたアイコン次にフレームの中に入っているボタン等をLayoutします。Layoutボタンを押してください。この様に表示が変わります。Layoutボタンを押してください。この様に表示が変わります。Layoutボタンを押してください。PreviewをしてWindowを拡大するとすべてのコントロールがWindowのサイズによってスケールされます。Spacer使います。下図の「ここに入力」をダブル・クリックして、”File”と入力してEnterを押します。次に下の図のところに”Exit”と入力。TextLabelに好きな名前を入力。「スタイル・シート」スタイルシートを使ってメニューに画像を張ったり、backgroundの色などを変更出来ます。修正したいオブジェクトをWindowまたはオブジェクトインスペクタで選択します。RMB(右クリック)で「スタイルシートを変更...」を選びます。下の図のようなスタイルシート・エディターが表示されます。ここにCSSぽいコードを入力し、カスタマイズ出来ます。色を変更して見ましょう。Colorの横の↓を押して、background-colorを選びます。好きな色に変更し、下の図のボタンで確認します。色は変わりましたがすべての子供の色も変わりました。好みでない場合は、CSSで修正します。今回、QFrameを選択し、そのスタイル・シートを修正しているので、そこに書き込みます。QFrame{}で現在のコードを囲んでください。下の図のように...QFrameだけ色が変わりました。frameのスタイル・シートでPushButtonの色を管理できますし、PushButtonのスタイル・シートに入力も可能です。次を分かりやすくするのに今だけPushButtonをframe内と外に追加してください。ボタンをドラッグして、frameの中下に青い線が表示されたらドロップしてください。結果は下の図のようになります。1つのボタンをフレームの外に...結果はこちら先ほどのQFrameスタイル・シートを開き、下記のCSSを書きましょう。255);}結果はこちらQFrameスタイル・シートを使っているのでQFrameの子供の色が変わります。1つのボタンを変えたい場合、コードを少し変更。etc.>結果はこちらではframeの外にあるボタンをどうやって色を変えるのでしょうか?直接、PushButton_3のスタイル・シートを開いてbackground-colorを設定するか、その親のスタイル・シートを入力するか、という事になります。親の場合は、centralwidgetcentralwidgetのスタイル・シートを修正。結果を見るとframeの中の色設定を行っていないボタンも変わってしまいました。これもボタンを指定すれば直ります。複数のframeがある場合、その中のボタンをframe単位で管理したい時はこのような書き方も出来ます。QPushButton{}>は「すべて下のQPushButton」の意味となります。すべてのframeのボタンを違う色に設定するのは簡単です。※この書き方はPreviewしないと表示されません。親子関係を理解できたでしょうか?1centralwidgetのスタイル・シートを消す。2追加した色が付いているボタンも消す。3QFrameのスタイル・シートを開いて下記のように修正。「画像をボタンに張る」uiファイルをMayaで実行する場合、1直接ボタンに画像を張って、2のResourceをとばします。uiファイルを最後にPyQTに変換する場合は1をとばして2のResourceを行って下さい。直接ボタンに画像を張る場合はボタンを選択し、下の図が示しているところをクリックして画像が入っているフォルダに移動し、選択します。2Resourceボタンに画像を張る時、Resourceを作るとパフォーマンスがよくなります。uiを保存している場所にimagesフォルダを作って、使う画像を入れて置きます。Browserがあり、そこで画像を読み込みます。Windowが表示されます。下の新規Resourceを作成するボタンを押し、.qrcファイルを先ほど作ったimagesフォルダに保存します。作られたResourceが表示されます。そこから1Prefix追加ボタンを押し、名前をimagesにします。2追加ファイルのボタンを押し、使いたい画像を全部選択、画像を登録します。Browserに表示されます。これが終われば画像をQtに使います。frameのスタイル・シートを開いて、下記を入力。imagesは先ほどのPrefixの名前。folder.pngは登録したイメージ名に書き換えてください。リピートをすべてのframeに行いたくない場合、下記のコードを追加します。none;}Previewしてボタンを押すと色は変わりません。その機能を追加します。QPushButtonを何回も書きたくないので、コードは今回分けて書きます。UIの見た目は完了です。これで細かいUIを作れるはずです。シグナル・スロットを設定ボタンを押すとどのように動くかを設定します。下の図は簡単な説明です。ボタンを押すとUIに入っているWidgetをどのように機能するかを設定出来ます。下図のようにPushボタンをlineEditにドラッグします。下図のような画面が出ます。PushボタンをクリックするとlineEditがどのように動くかを選択できます。クリックしたらlineEditに入っているテキストが消える設定はこちら:今回はリンクは設定しないままにしてください。上記の方法で設定出来まい項目もあります。File->Exitにclose()をリンクしてみてください。機能的にDesignerのシグナル・スロットモードで出来ないのが分かります。その場合、シグナル/スロットエディタを使います。Browserの下にシグナル/スロットエディタのタブを押す。プラス・ボタンを押してシグナル・スロットを追加します。プルダウンで設定します。設定はこちら:今回、Mayaで使うのでこれでUI作成を終わりにします。uiファイルを保存します。QtやPyQTが使えるソフトでUIを使えます。スタンドアロン・アプリでも大丈夫です。PyQtの場合、uiファイルを”pyuic4′′にかけてPyQtに変換する必要がありますが、説明が長くなるので割愛します。DesignerのuiファイルをMayaで使う場合、限られたmelしか対応してないのを理解する必要があります。下記はMaya2011で用意されているQtとMelの対応表です。ダイナミックプロパティの追加。ボタンを押して、Mayaのコマンドを実行するにはダイナミックプロパティを追加する必要があリます。ボタンを選択して、プロパティエディタでプラスのボタンを押してStringを選択します。Melを設定したい場合、続けて1を読んで2をとばします。Pythonの場合、1をとばして2を読んで下さい。1Mel下図のようなWindowが表示されるので、「-command」を入力。「-command」のプロパティが作成されます。そこに実行するMelを入力します。"fileBrowserCommand(\"lineEdit\")"上記のコードの”lineEdit”は真ん中の空欄のWidgetです。fileBrowserCommandのMelを下記のように作って、Melのパスに保存してください。$openedFile[0];}後はuiをMelで読み込むだけです。スクリプト・エディタに下記を書いて実行。$dialog;UIが表示されましたが設定していな色はMaya設定になります。そのため、見づらくなるかもしれませんが、フレームのスタイル・シートを修正すれば大丈夫です。255)}horizontalSlider(スライダ)はまだ設定していないので機能しません。同じようにダイナミックプロパティを追加します。スライダを選択、プロパティエディタでプラスのボタンを押してStringを選択。「-dragCommand」を入力。コードでtimesliderを動くようにします。#1"もう1回uiファイルを読み込み、スライダを動かすとtimeSliderが一緒に動きます。サンプル・ファイル右クリックで保存し、上記のload方法を確認。下図のWindowが表示されるので、「+command」を入力します。「+command」のプロパティが作成されます。そこに実行するpythonを入力します。(\"lineEdit\")"上記のコードの”lineEdit”は真ん中の空欄のWidgetです。いう名前でpythonのパスに保存してください。openedFile[0]Melと違ってPythonはmoduleをimportする必要があります。UIを立ち上げる時にmoduleをimportするのがいいかと思います。今回はfileBrowserCommandをimportします。似ているので今回はパスします。うまく実行出来ない場合はダイナミックプロパティ名を確認してみてください。melは「-command」とし、pythonは「+command」とする必要があります。1つのUIにmelとpythonのダイナミックプロパティを作っても大丈夫です。最後にUIを好きなところにドッキングしたり、フローティングWindowにしたり出来ます。下記の図の部分を選択して、インタフェース上で移動してみてください。QtDesignerの詳しい使い方はtakさんの記事にあるので、今回はMBでの.uiファイルの使いかたです。(※必須):Website:Comment:コメントは承認制ですので、即時に反映されません。上に表示された文字を入力してください。月別アーカイブ2018年5月2017年1月2月3月4月6月10月11月2016年1月2月3月4月5月6月7月8月10月11月12月2015年1月2月3月4月5月6月7月8月9月10月11月12月2014年1月2月3月4月5月6月7月8月9月10月11月12月2013年1月2月3月4月5月6月7月8月9月10月11月12月2012年2月3月4月5月6月7月8月9月10月11月12月2011年1月2月3月4月5月6月7月8月9月10月11月12月2010年12月Footer。