[SailfishDevel] Resolution-independent in-app icons

Osmo Salomaa otsaloma at iki.fi
Thu Jul 21 19:36:39 UTC 2016


On 21.07.2016 14:30, Joona Petrell wrote:
> We use Jolla 1 as our base configuration, other devices are scaled
> from there.
 >
> 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

Thanks. This was very helpful. I assume these z-values are the same as 
Theme.pixelRatio?

For anyone interested, below is what I ended up doing, at least for now. 
A Python script to generate PNGs from SVGs, e.g. position.svg to 
position at 1.00.png, position at 1.25.png, etc. and a JavaScript function for 
use in QML to load the closest match. My current need was just icons on 
a map, meaning I don't have to match Sailfish's standard sizes, I just 
wanted the icons to scale relative to the pixel ratio. Tested on Jolla 1 
and tablet, seemed to work as expected.

#!/usr/bin/env python3
import glob, os, xml.dom.minidom
for svg in glob.glob("*.svg"):
     doc = xml.dom.minidom.parse(svg)
     doc = doc.getElementsByTagName("svg")[0]
     width = int(doc.getAttribute("width"))
     height = int(doc.getAttribute("height"))
     assert width > 0 and height > 0
     for ratio in [1.00, 1.25, 1.50, 1.75, 2.00]:
         png = "{}@{:.2f}.png".format(svg[:-4], ratio)
         os.system("inkscape -f {} -e {} -C -w {:.0f} -h {:.0f}"
                   .format(svg, png, ratio*width, ratio*height))

function getIcon(name) {
     var ratios = [1.00, 1.25, 1.50, 1.75, 2.00];
     var minIndex = -1, minDiff = 1000;
     for (var i = 0; i < ratios.length; i++) {
         var diff = Math.abs(Theme.pixelRatio - ratios[i]);
         minIndex = diff < minDiff ? i : minIndex;
         minDiff = Math.min(minDiff, diff);
     }
     var ratio = ratios[minIndex].toFixed(2);
     return "icons/%1@%2.png".arg(name).arg(ratio);
}

-- 
Osmo Salomaa <otsaloma at iki.fi>


More information about the Devel mailing list