GUI

Table of Contents

• Introduction
• SVG vector icon designs
• Icon filenames:

Introduction

The GUI is based on Qt Widgets.

Relevant files:

• Icons: data/gui/*.png
• List of icons: data/gui/guiRes.qrc
• Interface CSS: data/gui/normalStyle.css
• SVG file with vector icons: data/gui/icons.svg
• Qt UI files: src/gui/*.ui
• SVG files with vector icons for plugins: plugins/.../icons.svg
• Qt UI files for plugins: plugins/.../*.ui

The structure of widgets inside every window should be defined in *.ui files. But the style should be defined in normalStyle.css. The icon used for each icon is usually defined in *.ui files too.

When making mistakes in the stylesheet (/data/normalStyle.css), errors may be silent. Enable debug logging by adding a ~/.config/QtProject/qtlogging.ini:

[Rules]
 .debug=true
qt.*.debug=false

SVG vector icon designs

Every icon was drawn with Inkscape in SVG, and then exported to PNG.

There is a lot of documentation inside the data/gui/icons.svg SVG file itself, in the documentation layer.

Notes:

• When designing small icons it is very important to align the elements to a 1px by 1px grid. Otherwise exported icons will look a little blurry because of antialiasing. This is not an Inkscape limitation, icons should be pixel-perfect.
• For blurs and shadows we use the Filters -> Shadows and Glows -> Drop shadow tool. Blurs in Inkscape are quite strange, each blur element has a bounding box. It is important to make the bounding box big enough so a cut is not visible. Also important to make the bounding box small enough so the blur does not extend outside the icon (icons are located one next to the other, blur can get into other icons!). To adjust the bounding box use Filters -> Filter Editor -> Filter General Settings.

• Blurs in Inkscape have some kind of bug. Let's say that we want a blur with amount equal to 0.5 units, the result is different depending on the kind of object, each one of these will look different:

  • Objects like rectangles
  • Paths (even if the path has a rectangular shape)
  • Groups of objects (even if you just did a group of a single element)

  This is the reason why you should always create a group before applying a blur, even if you have only one element. This way, a blur of 0.5 units will have a consistent look across icons.

Icon filenames:

Every kind of icon has a different prefix on the filename. E.g. bbtHelp-off.png and bbtSearch-on.png

• bbt: Left bar buttons, also named actions. Each one has an on and off state.
• bt: Bottom bar buttons. Each one has an on and off state.
• btbg: Backgrounds of bottom bar buttons.
• tab: Buttons on window tabs. A version for the selected and the unselected tabs.
• uibt: Images for classic UI buttons. Each one has a normal and a disabled state used when the button is greyed out.
• uie: UI elements, things that go inside of UI windows like checkboxes.
• misc: Some more misc images.