スキップしてメイン コンテンツに移動

QWidget の選択時のデザインを CSS で変える方法

ひさびさに書きやすいネタができたので、１ヶ月ぶりくらいに書きます。

ここ１ヶ月の作業内容


タイトルのとおりなのですが、
テーマがいきなりマニアックでとまどったり、
デスチェリー農場の続編はどうしたんだよおおおお！
とか新作を楽しみにしている生命が宇宙のどこかにいるかもしれないので
あらかじめ書いておくと、

ここ１ヶ月は日記ソフトを作ろうと
python + pyside + sqlite の勉強をしていました。

勉強というか、ウィンドウ起動から初めて、
GUI をせっせと作ったり、ファイル保存と復元を作ったりしてます。
Copy & Paste や Redo/Undo など未実装の処理も多くあります。

今回は、タブ遷移とかクリックで選択されたウィジェットの、
背景色が変わるとか、
枠線が出るとか
そんな設定を CSS で実現します。

PySide と CSS について

PySide は前も Raspberry Pi 2 で使う mount コマンドの GUI ツールで使いました。
Python の GUI フレームワークです。

さすがに HSP ほど簡単にウィンドウを出すことはできませんが、
かなり楽だし、 GUI の種類や機能もかなり充実しています。

ある程度 GUI を作っていて、
こんな露骨なウィンドウだと受けが悪いんじゃないかな
と思いました。
なんか今っぽいおしゃれなデザインにしたい。
そんな誘惑にかられて調べていると、 CSS でお手軽にデザインを変更できることがわかりました。

QWidget 派生のオブジェクトを作る際に、 setStyleSheet(str_css)で css を読み込ませることで簡単に実現できます。
次の例では file.css というファイルに書いた css を QWidget 派生クラスのオブジェクトに読み込ませます。

# css の読み込み
with open("file.css","r") as f:
    self.setStyleSheet("".join(f.readlines()))


いろいろな GUI の部品ごとに css の書き方の例もありました。

Qt Style Sheets Examples | Qt 4.8


QComboBox も css に次のように書くことでおしゃれになりました。
上記の書き方の例の QComboBox のスタイルシートを使っています。



QComboBox {
border: 1px solid gray;
border-radius: 3px;
padding: 1px 18px 1px 3px;
min-width: 6em;
}

QWidget への CSS の適用


簡単に css でデザインを変えられるのですが、 QWidget にはなぜかすぐには適用されません。
正確には QWidget を派生したカスタムウィジェットクラスです。

QWidget:focus {
border: 3px solid green;
background-color: #EEFFEE;
}
こんな感じの css を読み込ませることで、
選択時にフォーカスした QWidget のデザインが変わります。
フォーカスイベントで色を自分で塗るような処理を書かなくても css で設定することでできるのはとても楽だし、変更も容易で魅力的です。

ただし、すぐにはこれを反映してくれません。
２つの手続きが必要でした。

手続き１　選択されるようにする。

QComboBoxなどは配置するだけで、選択ができます。タブストップもします。
しかし、その土台となる QWidget は選択できないようになっています。
まずはこの設定を setFocusPolicy() で変更します。

フォーカスポリシーは、タブ選択(TabFocus)、クリック選択(ClickFocus)、両方の選択(StrongFocus)、フォーカスしない(NoFocus) から選びます。

QWidget 派生クラスの __init__ やメンバ関数で次のように呼び出します。

class InputWidget(QtGui.QWidget) :
    def __init__(self):
QtGui.QWidget.__init__(self)
        self.setFocusPolicy(QtCore.Qt.StrongFocus)

手続き２　描画処理で css に対応する。

wiki になにやらそれらしいコードがあります。


あいにく C++ だったので、 pyside 用に書き換えて実行するとうまくいきました。

QWidget 派生のメンバ関数として、次の関数をオーバーライドします。

class InputWidget(QtGui.QWidget) :
def paintEvent(self, qPaintEvent):
   # css のウィジェットの背景色や focus の設定を反映するために必要なオーバーライド
   painter = QtGui.QPainter(self)
   option = QtGui.QStyleOption()
   option.initFrom(self)
   self.style().drawPrimitive(QtGui.QStyle.PE_Widget, option, painter, self)
   return

結果



クリックすることで、緑色の枠で囲んで背景色も変更できました。
少しコードを追加する必要はありますが、
 css で外部からいつでもデザインが変えられるこの機能は強力だと思います。

あとがき

１ヶ月ぶりにブログを書いて、なぜかほっとしています。
別にノルマがあるわけじゃないのに何なんだろう。。。

引き続きしばらくは日記ソフトを作ってみようと思います。
結果の図でちょろっと見せたのがそのソフトです。
まだ、かなり作りかけですが、日記だけどＧＵＩをばりばり使って簡単に入力ができるようにしようと思っています。(｀・ω・´)

完成するかどうかもわからないので、ぽしゃってしまうかもしれません。
だけど、この PySide + CSS の強力なデザインのための Tips が書けただけでも成果はあったと思います。

これが一段落したら、またゲーム製作もやってみたいです。



ラベル:

コメント

コメントを投稿

このブログの人気の投稿

QTableView で表を表示してみる

タイトルは駄洒落を狙っているわけではありません。 こんばんわ SakuraCrowd です。 今回は今作っているソフトの経過報告です。 最近のブログのパターンは、 「ＸＸＸ作ったよ。これがスクリーンショットね。あとこんなこと思ったよ。」 という流れですが、 今日はできていないソフトの部分的な話なので、 いつもよりもプログラムちっくな話になると思います。(´Ծ_Ծ´)ﾒｶﾞﾈﾉﾄｷﾊﾏｼﾞﾒﾌﾞｯﾃﾙ QTableView は GUIライブラリ Qt のクラスです。 それを Python で使うための PySide というライブラリを使っています。 某表計算ソフト っぽい表の GUI です。 このデータの日付が 09/01 なのでおそらくその日に   QTableView 使うぞ！(｀・ω・´) とサンプルデータを作ったのでしょう。 Qt Designer という GUI エディタを使うとポトペタでウィンドウを設計できます。 選択できる GUI の中に QTableView と QTableWidget があります。 どちらも上のような表の GUI です。 QTableWidget は 簡単 に値をいれたりできます。 Qt Designer 上で直接編集 することができるので、 サンプルの表を簡単に作ることができます。 それに対して、 QTableView は Qt Designer 上では値を編集できません。たぶん。 QTableView の強みは MVC の構造 を使えることです。 名前のとおり QTableView は View です。 これにデータを管理している Model オブジェクトを設定して使います。 Model クラスを作る手間がかかりますが、 GUI の細かな操作をしなくても Model に応じた表を表示してくれます。 Model は QAbstractTableModel を 継承 して作ります。 コンストラクタで基底クラスの処理を呼び出し、いくつかの純粋仮想関数をオーバーライドします。 def __init__ ( self , parent= None , *args):...
コメントを投稿
続きを読む

LibreOffice Writer 文書の差分 (WinMerge x TortoiseGit) + 社畜PCの原因と対策

お久しぶりです。皆様におかれましてはお風邪などをひかれてはいませんでしょうか。 春と秋だけあればいいのにヽ(`Д´)ﾉとつい思ってしまう SakuraCrowd です。 今日はいつものような製作日記ではなく、ちょっとした役立つメモを書きました。 タイトルにもあるとおり、 TortoiseGit への WinMerge の導入の仕方です。 今まではソースコードくらいしか差分で確認しなかったので、 TortoiseGit 標準の Diff ツールで問題なかったのですが、 LibreOffice の Writer が最近自分の中で便利だと話題になっていて、それを差分表示するためにちょっと調べてみました。 ＃Writer は、文章書いて、ちょっと絵をいれたり表を作るのに便利だと思います。 ＃リッチテキストのエディタを探していて、これが一番よさそうな気がしたので使ってます。 それとブログを書くときはあまり長く書かないつもりだった、 Win7 PC が社畜PCになってしまった際の原因と対策も後半に書きました。割と有用な情報かもしれませんので、時間がありましたらご覧下さい。 まずは TortoiseGit で Writer の odt ファイルを管理して、差分も普通に表示させる方法です。 WinMerge(+plugin) 導入手順 すでに TortoiseGit はインストールしてある前提ではなします。 １．信頼と実績の窓の杜様から WinMerge 日本語版をダウンロードします。 WinMerge - 窓の杜ライブラリ 私の PC は 64 ビット版なのでそちらを選びました。 ２．WinMerge をインストールします。 フォルダを指定し普通にインストールできます。 インストール直前の設定で TortoiseGit をチェックしておくと自動的に TortoiseGit の利用する Diff ツールの設定を置き換えてくれるようです。 これの設定は TortoiseGit の設定の Diff ツールの項目で確認できます。 ３．LibreOffice Writer のファイルを読むためのプラグインをダウンロードします。 ぐぐって出てくる英語版のＤＬサイトは応答がなかったりしましたが、日本...
コメントを投稿
続きを読む

HSPで画像の重ね合わせをしてみた

あいにくの曇り空だったが、 スーパームーン を少し見ることができた。 なんとなくだが、月明かりがいつもよりも強い気がする。 中秋の名月とほぼ同時に月が地球に 接近するのは稀らしいので何かありがたい(-人-) 先週ブログを書いていたときに、 ハロウィン にちなんだゲームを作りたいなー と思っていて、ふわっとした企画を考えて、少し作り始めた。 まだできるかどうかわからないけど、初めて HSP で絵を出せたのがうれしいのでブログを書いてみる。 HSP 自体はだいぶ前から知っていて、ちょっとしたＧＵＩのツールを作ったりしていた。 GUIアプリケーションをここまで短く実装できる言語は自分の中ではこれが一番だと思う。 もっと短くできるかもしれないが、ビギナーな私でもこのくらい短くかける。 screen 0, 160, 64 // ウィンドウ作成 button "greet", *OnGreet // ボタン作成＆イベント関連付け stop *OnGreet // イベント dialog "Hello!" stop バージョンアップして今では WebGL や 　iOS や Android でも実行できる。 そのときは HSP3Dish という環境を使うために  #include "hsp3dish.as" 　でスクリプトを読み込む。 　参照： HSP3Dish プログラミングマニュアル・基本仕様ガイド 制限として、拡張プラグインやCOM/Variant型や外部DLL呼び出しやモジュール変数については未サポートのようだ。 ゲームでスプライトを用いるため es_set などのスプライト用の関数を使いたかったが、これは hspdx という拡張プラグインなので HSP3Dish には対応していないと思う。 そんな理由から、スプライト系の処理を自作しようと思う。 先週ちまちまとドット絵を描いたので、それを HSP のウィンドウに描画してみた。 なんかドット絵を作っている最中は、わりと良く思えたのに、 ウィンドウに出してみると何か微妙 (´・ω・｀) ちなみに、キャラは４コマにも描いている大砲ゲーム「お団子キャノン」に出てくるキャラクターだ。 キャラの...
コメントを投稿
続きを読む