Difference between revisions of "Projects/Usability/HIG/UI Files"

< Projects‎ | Usability‎ | HIG
Jump to: navigation, search
m (Text replace - "</code>" to "</syntaxhighlight>")
(HIG moved to community)
 
Line 1: Line 1:
The aim of this tutorial is to explain how to create and modify screenshots for the [http://techbase.kde.org/Projects/Usability/HIG KDE Human Interface Guidelines].
+
{{ Moved To Community | KDE_Visual_Design_Group/HIG/UI Files }}
 
 
==UI Files==
 
 
 
UI files are used by '''Qt Designer''' and '''Qt Creator''' for designing ''User Interfaces''.
 
If you want to modify them, you should use Qt Designer, but this is off topic and I link some tutorials for you:
 
 
 
* [http://sector.ynet.sk/qt4-tutorial/my-first-qt-gui-application.html A C++ tutorial]
 
And a very very good video-tutorial for Python:
 
* [http://www.youtube.com/watch?v=LYF0spYkXUs&feature=related Part I]
 
* [http://www.youtube.com/watch?v=E7Ud6FonsR4 Part II]
 
 
 
==How to compile UI files==
 
 
 
In order to use your interfaces, you have to compile these files into a Python or C++ application. For this tutorial I have chosen Python.
 
 
 
Obviously, you need Python. On KUbuntu, it can be installed with this command (in your terminal):
 
<syntaxhighlight lang="text">
 
$ sudo apt-get install python2.6
 
</syntaxhighlight>
 
 
 
You have to compile your .ui files with the '''pyuic4''' tool. Make sure you have the '''pyqt4-dev-tools''' package installed. On KUbuntu, just open the terminal and type:
 
<syntaxhighlight lang="text">
 
$ sudo apt-get install pyqt4-dev-tools
 
</syntaxhighlight>
 
 
 
This will check if the package is installed. If not it will installed automatically.
 
 
 
Now you can compile the .ui file into a Python file! Simply run the following command:
 
<syntaxhighlight lang="text">
 
$ pyuic4 -x -o output.py input.ui
 
</syntaxhighlight>
 
 
 
Notes:
 
* '''''-x''''' tells pyuic4 to generate extra code to directly test and display the GUI
 
* '''''-o''''' sets the output file
 
 
 
To display the GUI, you only have to run Python:
 
<syntaxhighlight lang="text">
 
$ python2.6 output.py
 
</syntaxhighlight>
 
 
 
 
 
==Example==
 
 
 
Let's compile '''''Tabs and Pages in Dialogs/Tabs_pages3.ui''''' from [http://techbase.kde.org/File:HIG-UI-Files.tar.gz this tarball]. Decompress the tarball and run:
 
<syntaxhighlight lang="text">
 
$ cd path/to/the/extracted/tarball
 
$ pyuic4 -x -o Tabs_pages3.py 'Tabs and Pages in Dialogs/Tabs_pages3.ui'
 
</syntaxhighlight>
 
 
 
Now run it through Python:
 
<syntaxhighlight lang="text">
 
$ python2.6 Tabs_pages3.py
 
</syntaxhighlight>
 
 
 
Here is a screenshot:
 
 
 
[[File:UI-Package-Example.png]]
 
 
 
==How to take and annotate a screenshot==
 
 
 
To take a screenshot, you can use [http://docs.kde.org/development/en/kdegraphics/ksnapshot/index.html KSnapshot], which is included in standard KDE distributions.
 
Search KSnapshot in ''Applications > Graphics > Screen Capture Program (KSnapshot)'' and set the options up. I use these options:
 
* ''Capture Mode'' -> Window Under Cursor
 
* ''Snapshot Delay'' -> 1-2 seconds
 
* ''Include window decorations'' -> True
 
 
 
If you need extra space (for annotations, for example) you may want to use:
 
* ''Capture Mode'' -> Region
 
 
 
Now press ''New Snapshot'', take your snapshot and save it somewhere.
 
If you want to annotate your screenshot you can use [http://www.gimp.org/ Gimp]. Install it with this simple command:
 
<syntaxhighlight lang="text">
 
$ sudo apt-get install gimp
 
</syntaxhighlight>
 
 
 
Open it and start drawing! I usually use brushes to draw circles, arrows, etc., pencil to draw sharp lines and text tool to insert text:
 
 
 
[[File:Gimp-Screenshot.png]]
 
 
 
Notes:
 
# Text Tool
 
# Pencil
 
# Brush
 
 
 
You can also use [http://inkscape.org/ Inkscape], a tool similar to Gimp. As above, you can install typing:
 
<syntaxhighlight lang="text">
 
$ sudo apt-get install inkscape
 
</syntaxhighlight>
 
 
 
==How to create an archive==
 
 
 
In this tutorial I will use [http://docs.kde.org/stable/en/kdeutils/ark/index.html Ark], but you can use any software you like!
 
 
 
Ark is a very simple program: open it and create a new archive clicking on ''New''. Click on ''Add folder'' and select the folder containing the .ui files and all the screenshots.
 
 
 
[[File:Ark-Screenshot.png]]
 
 
 
 
 
In order to upload the archive you have to sign up [http://techbase.kde.org/ KDE TechBase]. Then you can upload your tarball [http://techbase.kde.org/File:HIG-UI-Files.tar.gz here], clicking ''Upload a new version of this file''.
 
 
 
<U>Very Important</U>, you have to keep the same filename, i.e. '''''HIG-UI-Files.tar.gz'''''.
 

Latest revision as of 12:09, 4 August 2016

This page is now on the community wiki.


This page was last edited on 4 August 2016, at 12:09. Content is available under Creative Commons License SA 4.0 unless otherwise noted.