Editing Customising Qt look and feel and Python in 30 Mins

Warning: You are not logged in. Your IP address will be recorded in this page's edit history.
The edit can be undone. Please check the comparison below to verify that this is what you want to do, and then save the changes below to finish undoing the edit.
Latest revision Your text
Line 1: Line 1:
-
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).
+
===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 [[http://qt.gitorious.org/qt-labs/mobile-demos Qt Mobile Demos]]
We are going to show you how you can create a look similar to the [[http://qt.gitorious.org/qt-labs/mobile-demos Qt Mobile Demos]]
 +
[[Image:qtmobile-calc.jpg]]
[[Image:qtmobile-calc.jpg]]
-
But our version will be landscape
 
-
[[Image:ncalc.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.
-
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===
-
==Assumptions==
+
This tutorial assumes that you have a working [[Category:Python|Python]],Pyqt and Qt-Designer environment up and working. If you have not then do this first tutorial  
-
 
+
-
This tutorial assumes that you have a working [[Category:Python|Python]], PyQt and Qt Designer environment up and working. If you have not then do this first tutorial  
+
[http://talk.maemo.org/showthread.php?t=43663 Qt Designer/Python for Windows XP in 30 Mins]
[http://talk.maemo.org/showthread.php?t=43663 Qt Designer/Python for Windows XP in 30 Mins]
-
==Setup==
 
-
# Download the mobile tarball demos from [[http://qt.gitorious.org/qt-labs/mobile-demos/trees/master Here]]. Windows users get zipped version [[http://www.megaupload.com/?d=M1G26TC7 here]]
+
===Setup===
 +
 
 +
# Download the mobile tarball demos from [[http://qt.gitorious.org/qt-labs/mobile-demos/trees/master Here]]
# Create a folder in you home directory called '''customui'''
# Create a folder in you home directory called '''customui'''
# 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'''.
# 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'''.
# Now Open Qt-Designer and create a Mainwindow object.
# Now Open Qt-Designer and create a Mainwindow object.
-
# 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.
+
# 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<br/>[[Image:Qt-ResourceManager.png]]
 +
# 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-ResourceManager.png]]
 
-
 
-
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]]
[[image: Qt-Edit-Resources.png]]
Line 36: Line 36:
Thats it our images are now ready to b incorporated into our application.
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
+
===Designing using resources and CSS===
-
# First add a frame to your window, by dragging a frame object across from the object selector. In the Object inspector call it Frame1
 
-
# Add a second frame ontop of your first frame and call it Frame2
 
-
# 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.
 
-
# Select all four buttons and right click, Layout->layout Horizontalally, and you should be left with something like this.
 
 +
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
-
[[image:Qt-Designer-Layout.png]]
 
-
 
-
Rename each button object to PushButton1, 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.
 
-
<source lang="css">
 
-
QPushButton{ background-image: url(:/images/bt_01_off.png);}
 
-
QPushButton:pressed {background-image: url(:/images/bt_01_on.png);}
 
-
#pushButton1 {  }
 
-
#pushButton2 {  }
 
-
#pushButton3 {  }
 
-
#pushButton4 {  }
 
-
</source>
 
-
This will set up two background images for the push buttons, one for pressed and one 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, and then select Add Resource->image from the menu, then select the image you want to add.This will automatically add the CSS for each push button.
 
-
 
-
[[image:Qt-Select-Resource.png]]
 
-
 
-
[[image:Qt-Edit-Stylsheet.png]]
 
-
 
-
Now hit apply and you should have something that looks like this.
 
-
 
-
[[image:Qt-Buttons.png]]
 
-
 
-
And the CSS in your Stylesheet editor should be this
 
-
<source lang="css">
 
-
QPushButton{ background-image: url(:/images/bt_01_off.png);}
 
-
QPushButton:pressed {background-image: url(:/images/bt_01_on.png);}
 
-
#pushButton1 {image: url(:/images/bt_label_01.png);}
 
-
#pushButton2 {image: url(:/images/bt_label_02.png);}
 
-
#pushButton3 {image: url(:/images/bt_label_03.png); }
 
-
#pushButton4 {image: url(:/images/bt_label_04.png); }
 
-
</source>
 
-
As you can see you don't need to populate the CSS attributes your self, the editor will do this for you.
 
-
 
-
Just a word on syntax. The Hash refers to a specific object ie pushButton1 etc. No Hash means all instances of that object. That way you don't need to preset the background for each individual button in this example.
 
-
 
-
3. Now lets add some background colour. Right Click frame1 in the Object Inspector and change its style-sheet. Select Add Background Colour, and select a colour. Your CSS is automatically populated. Notice that you if you don't use an object name Qt will take it to mean the current object.
 
-
 
-
[[image:Qt-Select-Colour.png]]
 
-
 
-
Heres what the css should look like
 
-
<source lang="css">
 
-
background-color: rgb(101, 101, 101);
 
-
</source>
 
-
4. Last but not least, double click on each of the Button labels and make each button lable a blank.
 
-
 
-
==Preview your UI==
 
-
 
-
Press Control R on your keyboard to preview your work and you have something like this.
 
-
 
-
[[image:Qt-Preview.png]]
 
-
 
-
notice how the background images changes when we press the buttons.
 
-
 
-
==Compile and Run the UI==
 
-
 
-
Save the Ui as customui.ui
 
-
 
-
Now compile it using pyuic4 using this command
 
-
 
-
pyuic4 -x customui.ui -o customui.py
 
-
 
-
now run the application
 
-
 
-
python customui.py
 
-
 
-
and we will get this error
 
-
 
-
  Traceback (most recent call last):
 
-
  File "customui.py", line 84, in <module>
 
-
    import customui_rc
 
-
  ImportError: No module named customui_rc
 
-
 
-
This is because the application needs to reference our resource file that contains all our images.
 
-
 
-
We need to compile the resource file "customui.rc" that we created at the top of the page. We do this using the Python resource compiler Pyrcc4, like this
 
-
 
-
pyrcc4 customui.rc -o customui_rc.py
 
-
Now we can run the application using
+
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
-
python customui.py
+
2. Add a second frame ontop of your first frame and call it Frame2
-
and presto our ui runs. As Usual the first time you run a Python app it might get a bit slow with lots of images as the system pre compiles the code.
+
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.
-
The customeui_rc.py contains all of the images our ui needs to run, and as long as we ship that with our main app, everything should work. Now copy customui.py and customui_rc.py to your [[Nokia N900|N900]] and run from a terminal
+
4. Select all four buttons and right click, Layout->layout Horizontalally, and you should be left with something like this.
-
[[image:Qt-N900Customui.png]]
 
-
Congrats you have just done your first custom ui in Python and Qt
+
[Qt-Designer-Layout.png]]
-
TODO, upload full blown ui file of calculator once I can do portrait mode :-)(mikec 12/02/10)
 
-
==Additional Resources==
+
Rename each button to PusButton1,PushButton2,PushButton3,PushButton4
-
* http://doc.trolltech.com/4.5/stylesheet.html Note that not all Qt widgets can be customised through Style Sheets. You can see the full list of widgets and their CSS options here
+
===Designing using resources and CSS===
-
* [http://graffletopia.com/stencils/567 Ui Stencil for Maemo5]
+
-
* [[Qt-Maemo|Qt for Maemo]]
+
[[Category:Qt]]
[[Category:Qt]]
-
[[Category:Python]]
 
[[Category:Development]]
[[Category:Development]]

Learn more about Contributing to the wiki.


Please note that all contributions to maemo.org wiki may be edited, altered, or removed by other contributors. If you do not want your writing to be edited mercilessly, then do not submit it here.
You are also promising us that you wrote this yourself, or copied it from a public domain or similar free resource (see maemo.org wiki:Copyrights for details). Do not submit copyrighted work without permission!


Cancel | Editing help (opens in new window)
Retrieved from "http://wiki.maemo.org/Customising_Qt_look_and_feel_and_Python_in_30_Mins"