Skip to main content

Ralsina.Me — Roberto Alsina's website

PyQt by Example (Session 3)

Designer is a Good Resource

Requirements

If you have not done it yet, please check the pre­vi­ous ses­sion­s:

All files for this ses­sion are here: Ses­sion 3 at GitHub

Designer is a Good Resource

To­day we are go­ing to make our ap­pli­ca­tion look bet­ter, and in­tro­duce some new things, like re­source files.

When we fin­ished Ses­sion 2, our main win­dow looked like this:

/static/tut2-window3.png

Not a good look­ing ap­pli­ca­tion.

There are sev­er­al things wrong with that pic­ture. Let's tack­le them one at a time, us­ing Qt De­sign­er.

Window Title

/static/tut3-wrong1.png

It is a Main­Win­dow, but it's not called Main­Win­dow!

That's just wrong. While I have not yet cho­sen a name for this ex­am­ple ap­pli­ca­tion, it's sil­ly to have the win­dow ti­tle (and taskbar en­try!) say "Main­Win­dow"!

Here's how you change ob­jet prop­er­ties in De­sign­er.

First, you se­lect the ob­ject you want to mod­i­fy. You can do that by click­ing on it, or by se­lect­ing it from the Ob­ject In­spec­tor. For some wid­gets one or the oth­er is eas­i­er. For ex­am­ple, it may be hard to find emp­ty space in a win­dow to click and se­lect the win­dow it­self, or click in a very small wid­get, like a sep­a­ra­tor. In those cas­es, just use the In­spec­tor.

Once you have the right ob­ject se­lect­ed, look at the Prop­er­ty Ed­i­tor.

There is a list of prop­er­ties (ob­vi­ous ;-) sep­a­rat­ed by ti­tles like "QOb­jec­t" or "QWid­get". Don't wor­ry about those ti­tles much, just look for what you need, (it of­ten is pret­ty ob­vi­ous!).

In our case it's the win­dowTi­tle prop­er­ty.

/static/tut3-windowtitle.png

I will not be writ­ing these de­tailed ex­pla­na­tions and pic­tures for each prop­er­ty. I trust you can find them if I tell you "The win­dowTi­tle prop­er­ty of the Main­Win­dow Ob­jec­t".

Let's change that to "Todo".

Application Icon

/static/tut3-wrong2.png

Gener­ic icon.

The win­dow icon is the de­fault gener­ic icon. This is im­por­tant be­cause it ap­pears in the taskbar along the win­dow ti­tle, and if you are us­ing it in some op­er­at­ing sys­tems or con­fig­u­ra­tions, the us­er may on­ly see the icon!

Find­ing icons to use in your ap­pli­ca­tions is a big prob­lem. There are sev­er­al things you can do:

  1. Hire a graph­ics de­sign­er to do icons for you.

    This, of course, is rather ex­pen­­sive, spe­­cial­­ly if you are a hob­by­ist.

  2. Search the web and see what you can find.

    For ex­am­­ple, if I look for "to­­do icon" in google, I find many, some re­al­­ly nice. How­ev­er, many of those are sub­­­ject to copy­­right, so it's a bet­ter idea to look for them in places like wik­i­me­­dia com­­mons:

    http://upload.wikimedia.org/wikipedia/commons/b/bb/ToDo.jpg

    Or maybe Open Cli­­part:

    http://openclipart.org/people/CoD_fsfe/CoD_fsfe_calendar.png

    But my point is: those two icons are not all that awe­­some, and search­ing for a nice one is go­ing to take a while. If you will need 10 or 15 icons in your ap­­pli­­ca­­tion, the prob­lem is even worse, be­­cause you want the icons to be con­­sis­­tan­t!

  3. Find a set of KDE (or maybe GNOME) icons you like, and steal con­­sis­­ten­t­­ly. This is my pre­­ferred so­lu­­tion.

    I pre­fer KDE icons be­­cause I use a KDE desk­­top but there's no rea­­son to avoid GNOME icon themes. You can find KDE icons in kde-look.org and GNOME icons at gnome-look.org

    An added perk is that all KDE (or GNOME) icon themes have con­­sis­­tent in­­ter­­nal names. That way you can lat­er on switch to an­oth­er theme very easy.

Then there is the icons file for­mat. If the icon theme you like is avail­able in SVG for­mat, that's good. SVG is scal­able, which means the icons will look good at all sizes with­out the need to in­clude mul­ti­ple copies in dif­fer­ent sizes.

In this tu­to­ri­al I will use icons from the Rein­hardt set. Why? I like them, and the style is sim­ple enough that I feel I can hack a fit­ting icon us­ing Inkscape if need­ed (as I did in this case, see be­low).

This is how the fold­er icon from Rein­hardt looks at dif­fer­ent sizes, com­pared with Snow­ish, a PNG icon the­me:

/static/tut3-compsize.png

The Rein­hardt SVG fold­er icon: nice at all sizes. The Snow­ish PNG fold­er icon: from love­ly to blobly.

So, in short: choose an icon theme you like, and use on­ly icons from that the­me, if pos­si­ble.

For this ap­p's icon, I made this out of a piece of "mark_as_ham.svg" and some green colour:

/static/tut3-todo_icon.png

The re­al icon does­n't have those cute shad­ows, that's an ar­ti­fact of my pret­ty-screen­shot-script but I left it be­cause it looks way too nice ;-)

So, af­ter all this icon talk, how do we use it? Well... that needs yet more talk, be­cause there are two ways: use icon files and use a re­source file.

  • Icon files:

    In De­sign­er, go to the win­­dow­I­con prop­er­­ty of Main­Win­­dow. Click on the down ar­row. Se­lect "Choose File". The bad news: do­ing this makes pack­­ag­ing and dis­­tri­bu­­tion a bit hard­er lat­er on. The worse news: this will not work with a SVG icon. So for­get about it.

  • Re­­source file:

    In De­sign­er, go to the win­­dow­I­con prop­er­­ty of Main­Win­­dow. Click on the down ar­row. Se­lect "Choose Re­­source". You will see a rather em­p­­ty win­­dow.

/static/tut3-resource1.png

The emp­ty re­source win­dow

A re­source file is a XML file that con­tains ref­er­ences to all the icons you want to use. Lat­er, this is com­piled to a python mod­ule, which you can use from your ap­pli­ca­tion. As long as that python mod­ule is dis­trib­uted along with the oth­er­s, you will be fine, so there is nev­er a prob­lem of not find­ing an icon, or wor­ry­ing about where they are in­stalled. Things will just work. So it's worth a bit of ef­fort get­ting this right.

Here's how I do it:

  1. Click on the pen­­cil but­­ton in the top right to get to the "Ed­it Re­­sources" win­­dow.

    /static/tut3-resource2.png

    The em­p­­ty re­­source ed­i­­tor win­­dow

  2. Click on the "New Re­­source File" but­­ton in the bot­­tom-left. Call it "i­­con­s" (or what­ev­er you wan­t)

  3. Click in the "Add pre­­fix" but­­ton (fourth from the left­­). I called my pre­­fix "/"

  4. Click in the "Add files" but­­ton (fifth from the left­­). Add to­­do.svg (fi­­nal­­ly!), click OK.

Steps 1, 2 and 3 are on­ly need­ed the first time you use an icon. To add the icons we will use lat­er it's just step 4.

So now your re­source win­dow looks like this:

/static/tut3-resource3.png

There is an icon here!

Choose it, and that's it, the win­dow has the right icon! Well ... not re­al­ly.

First com­pile the UI. Re­mem­ber we need to do this when­ev­er we change some­thing us­ing de­sign­er!

$ pyuic4 window.ui -o windowUi.py

Then run the pro­gram:

$ python main.py
Traceback (most recent call last):
File "main.py", line 11, in <module>
    from windowUi import Ui_MainWindow
File "/home/ralsina/Desktop/proyectos/pytut/session3/windowUi.py", line 41, in <module>
    import icons_rc
ImportError: No module named icons_rc

This is because you also need to compile the icons.qrc file we created. This is done using pyrcc4:

$ pyrcc4 icons.qrc -o icons_rc.py

And the icon works now :-)

/static/tut3-window4.png

The long­est ex­pla­na­tion ev­er on how to change an icon, but it worked!

Since it's boring having to remember to run pyuic4 and pyrcc4, I wrote a trivial script to handle it, build.sh. If you are in windows, a similar BAT file is trivial.

Luck­i­ly, the next two UI fix­es are much sim­pler!

Tree Decorations

At the left of our task list there is a tree dec­o­ra­tion. Since this is not meant to be a tree, they are just a waste of space. They can be re­moved with the roo­tIs­Dec­o­rat­ed prop­er­ty of the list wid­get.

/static/tut3-wrong3.png

This is re­al­ly a list, not a tree.

Wide Margins

I think the de­fault mar­gins here (4 pix­el­s) look old fash­ioned. I pre­fer 0 pix­el­s. YM­MV.

/static/tut3-wrong4.png

Per­son­al taste: too wide.

You can change them in the lay­out[­some­thing]­Mar­gin prop­er­ties of cen­tral­Wid­get.

Extra Fixes

I al­so pre­fer to set these in our QTreeWid­get:

  • al­l­­ColumnsShow­­Fo­­cus True

  • uni­­for­m­RowHeights True (bet­ter per­­for­­mance for long list­s)

  • sort­in­­gEn­abled True

  • al­ter­­nat­in­­gRow­­Col­ors True

See the docs to see what they do!

Finished!

So, af­ter run­ning build.sh, this is how the app looks now:

/static/tut3-window5.png

A clean­er look.

Coming Soon

In this ses­sion, we did no cod­ing at al­l, we just worked on de­sign­er and graph­i­cal de­tail­s. This may not seem too im­por­tant to you, if you are a hard­core coder, but trust me: it is. Mak­ing apps as pleas­ant to use and look at as you can with­in your pos­si­bil­i­ties is very im­por­tant if you want the first re­lease to make any kind of im­pact. I learned it the hard way by re­leas­ing ug­ly apps ;-)

It does­n't mat­ter if your graph­i­cal de­sign skills are lim­it­ed, like mine, try not to over­reach and do your best.

In ses­sion 4 we will dive in­to cod­ing, and make this app func­tion­al for the first time, in­tro­duc­ing one of the neat­est fea­tures in Qt: Ac­tion­s.

Further Reading

Daniel Attling / 2009-03-05 12:51:

Thank you for writing these, I enjoy them immensely. I especially like how you explain not just how to do something but the steps you made to reach that understanding.

Roberto Alsina / 2009-03-05 13:48:

Glad you like it!

Jadoti / 2011-12-02 19:01:

I might be missing something, but when I bring up the 'choose resource...' option in the windowIcon property, It brings up the 'Select Resource' window much like you have, without the pencil, and no (apparent) way to add one.  Googling on the issue brings me the Qt 4.7 documentation but what it says to do to enable to resource system doesn't seem to work here.  Any ideas?

Sana / 2011-12-03 19:40:

Corporate Identity Logo Design

Professionally
logos and corporate identities can play critical role to a business success.
That's why ADAM IT Solutions  provide
unique logo and corporate identities to our customers, which can uniquely
represent them all over the world.

Your logo… your Specific
and memorable ID

Your logo is the first
image with your customers.

 An icon or colors that represent everything behind
each company and the message that it transmits. ADAM IT Solutions creative
design team will be able to provide you with the most unique, sophisticated and
modern logo that will portray your company’s history, services and  Impression.

Sana

0561422123

employment background check / 2011-12-27 23:23:


Hi very nice article

Ed Knowles / 2012-02-14 19:39:

Brilliant thanks buddy!


Contents © 2000-2024 Roberto Alsina