Modern Look

Overview

The goal of this Slicer Labs project is to modernize Slicer's graphical user interface that supports:

1. High-resolution displays
2. Dark and light mode
3. Consistent icons style
4. Contemporary look (in these years: minimalistic, flat, dark background)

High-resolution displays

Traditionally, most desktop icons size is 24x24 pixels. To make these icons appear crisp, line edges must not be interpolated (must be exactly 1, 2, ... pixel wide).

On high-DPI displays, icons with 24x24 pixels do not appear nicely, as they need to be upscaled very significantly. If they are upscaled with smooth interpolation then the edges appear blurry. If they are upscaled without interpolation then the edges appear jagged.

Tested solutions:

• Option A: Add second (and potentially and third or even more) higher-resolution icons, which have 48x48 (and 72x72, ...) size and name them by adding special suffix in the filename: basename@2x.png (basename@3x.png). For example, if the user specifies a QIcon with the name basename.png then - depending on the display resolution - Qt will load basename.png, basename@2x.png, or basename@3x.png.
• Option B: Create SVGs that are pixel-perfect at the base size (24x24). Qt can generate sharp bitmaps from this at the correct resolution (sharp on both normal and high-DPI displays). This would make things simpler, as after changing an svg file there would be no need to export base and @2x png files, and only one file (.svg) would need to be stored in version control instead of 3 (.svg, .png, @2x.png).

If a widget requires setting of a QPixmap then this mechanism does not work automatically, as a QPixmap can only store a single image. In this case, a QIcon can be created and the pixmap can be retrieved by requesting an image of the size of the base image size (first name found). To handle dragging of windows between normal and hi-DPI screens, all the pixmaps would need to be manually replaced. Qt should handle this (QLabel should have a setIcon method instead of just setPixmap), maybe future versions will. Another option would be to use a QPushButton to display bitmaps (with no border, clicking disabled, etc).

Device pixel ratio for the application (on Windows, at least) is determined by which screen the application was started on. Image quality will be optimal on that screen, but if the application is dragged to another screen with a different device pixel ratio then sizes of widgets will be correct but icons, text, etc. will appear blurry.

Dark and light mode

Icons need to be well visible over both light and dark backgrounds.

It could be possible to switch icons when the user switches between dark and light mode, but it seems simpler to use colors that are well visible over both dark and light background.

Consistent icons style

To have a uniform, consistent look of the application, it is important to:

• Use a consistent color scheme (limited number of colors) and style (flat/3D, shadow/no shadows, outline/line/filled).
• The style should be maintainable in the long term: it should be easy to create new icons consistent with the current icons.
• If building icons from icon sets, there should be no restrictions (due to intellectual property rights) on usage of the icons.

Starting designing all icons from scratch is a very large task. Instead, we can build our icons by using/modifying/combining icons from large freely-usable collections, such as Google material design icon set (with Apache License 2.0).

If we cannot find an icon in Google's collection then we can buy usage rights to other collections. For example, roundicons offers 45000 icons with all usage rights that we need (the icons can be used in Slicer by everyone who use Slicer or create Slicer-based products; we can store the original or modified SVG files in our public repository of all the icons that we use in the application -- this is confirmed by email communication with Roundicons' founder; any time 25 developers can access the full icon collection; all for a one-time fee of about $500). Roundicons contains icons of many different styles, including some that are very similar to Google material design and use the same base size of 24x24 pixels.

The style is maintainable in the long term by using well-defined process for creating the icons, using only easily-available tools. For example, Inkscape can be used to edit (recolor, combine, etc.) SVG images and then export it at the required resolutions to PNG format.

Contemporary look

The application should look similar to most modern desktop and web applications - utilizing simple design elements, with no shadows and gradients.

It is not clear if there is a Qt theme that could helpful for this, or we should customize the color scheme of the theme. Creating and maintaining a custom theme would be probable too much effort and there would be a high risk of rendering issues due to our customizations.