Customising Qt look and feel and Python in 30 Mins

Contents

Introduction

This is a simple tutorial to show how to use Python and Qt-Designer to create your own look and feel for your applications using custom images, the Qt Resource system, and Cascading Style Sheets (CSS).


We are going to show you how you can create a look similar to the [Qt Mobile Demos]


Image:qtmobile-calc.jpg


Qt has the concept of Qt Resources, images and files that you want to be deployed with your application. It incorporates them into a special binary resource file that the application can refer to at run time, so they wont get lost as part of your application distribution, but can also be changed very easily. These images are referred to in your application using standard CSS syntax which can be edited graphically within Qt-Designer.

Assumptions

This tutorial assumes that you have a working,Pyqt and Qt-Designer environment up and working. If you have not then do this first tutorial

Qt Designer/Python for Windows XP in 30 Mins


Setup

  1. Download the mobile tarball demos from [Here]
  2. Create a folder in you home directory called customui
  3. Extract the tarball and then copy the folder from qt-labs-mobile-demos/mybudget/images/calculator into your home directory and call this folder images.
  4. Now Open Qt-Designer and create a Mainwindow object.
  5. Next we are going to create a Qt Resource file from the images that we just downloaded so that we can use them in our UI. Click on the pencil on the Resource Browser
    Image:Qt-ResourceManager.png
  6. Now Create a new resource file called customui.rc, add a blank prefix and then add all the images from our image directory using the add files icon. Save this.


image: Qt-Edit-Resources.png

You should now see all your images in the resource browser. Note that some images will appear blank as they are white foreground and you will need to mouse over them in the reosurce Browser to see them.

Thats it our images are now ready to b incorporated into our application.


Create the UI

Having created an initial main Window Object when we started Qt Designer, we are now going to create some buttons with custom images on a custom background

  1. First add a frame to your window, by dragging a frame object across from the object selector. In the Object inspector call it Frame1
  2. Add a second frame ontop of your first frame and call it Frame2
  3. Add a push button to the second frame,set its minimumSize and maximum Size to Width 120,Height 101, now copy and past 3 more of these buttons.
  4. Select all four buttons and right click, Layout->layout Horizontalally, and you should be left with something like this.


image:Qt-Designer-Layout.png


Rename each button object to PusButton1,PushButton2,PushButton3,PushButton4. Leave the labels for the moment as in the picture, though later on we will delete them.

Add Colours and Images

We are now ready to add colours and images to our UI using the stylesheet editor.

1. On the object inspector right click on our frame2 object and select Change Style sheet.


image:Qt-Object-Inspector.png


The Style sheet editor will pop up. Now cut and paste this bit of CSS into the editor.


QPushButton{ background-image: url(:/images/bt_01_off.png);}
QPushButton:pressed {background-image: url(:/images/bt_01_on.png);}
#pushButton1 {  }
#pushButton2 {  }
#pushButton3 {  }
#pushButton4 {  }

This will set up two background images for the push buttons, 1 for pressed and 1 for released, this will give nice animated effect on pressing buttons.

2. Now add foreground images to each button by clicking between the curly brackets in the CSS the click Add Resource, select the image you want to add.This will automatically add the CSS for each push button

image:Qt-Edit-Stylsheet.png

Now hit apply and you should have something that looks like this.

image:Qt-Buttons.png

Designing using resources and CSS