[SailfishDevel] Resolution-independent in-app icons

[Michal]

Hi Joona,

> 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.
>
> 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

Thank you for above explanation - it is extremely useful. Let say I
would like to create my custom set of icons for my app. Is there any
good approach to figure out (in C++), which icon set is used in the
system, which Zx.x?

br,
Michal

W dniu 21.07.2016 o 13:30, Joona Petrell pisze:
> 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
> _______________________________________________
> SailfishOS.org Devel mailing list
> To unsubscribe, please send a mail to devel-unsubscribe at lists.sailfishos.org
>