[SailfishDevel] Resolution-independent in-app icons

Joona Petrell joona.petrell at jolla.com
Thu Jul 21 11:30:10 UTC 2016


Hi,

Yeah avoid scaling graphics on the device. The result is often not optimal, and both the scaling and loading unnecessarily big graphics downgrades the performance of your app.

> is there some SFOS image resizing script I can run on RPM's post-install 

We have resizing tool called sailfish-svg2png, used for all platform graphics, but it is currently internal only. We should make the tool public and provide a simple app example.

It is basically just a wrapper around QSvgRenderer:

QSvgRenderer renderer(source.svg);
QImage out(QSize(targetSize, targetSize), QImage::Format_ARGB32_Premultiplied);
out.fill(0);

QPainter painter(&out);
painter.setRenderHint(QPainter::Antialiasing);
painter.setRenderHint(QPainter::TextAntialiasing);
painter.setRenderHint(QPainter::SmoothPixmapTransform);
renderer.render(&painter, out.rect());
out.save(target.png)

QtSvg supports static features of SVG 1.2 Tiny, which with exception of masking covers most primitives an icon designer would want.

> Or should I just roll my own solution that packs in icons of
> different sizes and loads the closest match at runtime?

Yes this is the currently the only way. Unfortunately we lack proper documentation and examples here too.

I'll improve the Silica documentation, but read below for a short introduction. 

We use Jolla 1 as our base configuration, other devices are scaled from there. 5" HD phone like Jolla C uses z1.25, ~8" HD tablet like Jolla Tablet uses z1.5-large, 5.5" full HD Turing Phone uses z1.75. There are also other size variants for community ported devices. A good multiplier depends on the physical size of the display and display resolution. Tablet uses different scaling values for each category to avoid overly large icons on a large physical display, but most phone variants use the same multiplier for all icons.

z1.0 small 32x32, medium 64x64, large 96x96, app icon 86x86
z1.25 small 40x40, medium 80x80, large 120x120, app icon 108x108
z1.5 small 48x48 medium 96x96, large 144x144, app icon 128x128
z1.5-large small 48x48, medium 72x72, large 108x108, app icon 128x128 (tablet)
z1.75 small 56x56, medium 112x112, large 168x168, app icon 150x150
z2.0 small 64x64, medium 128x128, large 192x192, app icon 172x172

In addition some apps use larger graphic elements (e.g. Weather app has large weather graphics), those are scaled but don't follow any specific category, but we try to follow nice multipliers of two like 128x128 and 256x256. Large billboard-style graphics often follow the display width (qHD 540px, HD 720px, Full HD 1080px) and are not directly tied to scaling ratios.

Notification icons (icon-lock-* shown on Events and Lock Screen) and cover action icons (icon-cover-* shown on app active covers) follow small variant.

When possible it is easiest to use automatically scaled platform icons:

https://sailfishos.org/develop/docs/jolla-ambient/

Cheers,

Joona

________________________________________
From: devel-bounces at lists.sailfishos.org [devel-bounces at lists.sailfishos.org] on behalf of Nils Jeisecke [njeisecke at saltation.de]
Sent: 21 July 2016 11:25
To: Sailfish OS Developers
Subject: Re: [SailfishDevel] Resolution-independent in-app icons

Hi,

On Wed, Jul 20, 2016 at 10:27 PM, Osmo Salomaa <otsaloma at iki.fi> wrote:
> I tried using a large PNG or SVG and having QML scale that to one of the
> Theme.iconSize* constants, but the result of such downscaling is not smooth,
> even when using Image's smooth=true

Did you try to use the sourceSize Property for scaling?

Nils
_______________________________________________
SailfishOS.org Devel mailing list
To unsubscribe, please send a mail to devel-unsubscribe at lists.sailfishos.org


More information about the Devel mailing list