Skip to content

Instantly share code, notes, and snippets.

@brito
Created June 22, 2017 23:47
Show Gist options
  • Save brito/ef34ac673a3b4133ec7edccbd3262807 to your computer and use it in GitHub Desktop.
Save brito/ef34ac673a3b4133ec7edccbd3262807 to your computer and use it in GitHub Desktop.
Convert a base icon into 9-patch assets for Android
#!/usr/bin/env node
/**
Usage: ninepatch.js background (icon.png)
background: color to extend
icon.png: image to center, present on running directory
Convert a base icon into 9-patch assets
Outputs base composites for each resolution and .9 files
*/
(function(specification){
var background = process.argv[2],
output_dir = 'ninepatch-output/',
shell = require('child_process'),
// create directories if necessary
mkdirp = 'mkdir -p ' + output_dir;
//console.log(mkdirp);
shell.exec(mkdirp, out);
for (var density in specification){
specification[density].replace(/(\d+) (\d+)x(\d+)/,
function(spec, icon, width, height){
['port', 'land'].forEach(function(orientation){
var output = output_dir + 'display-'+orientation+'-'+density+'-splashscreen.9.png',
content = (icon * 1.6),
// coerce these strings into numbers, for maths
w = orientation == 'port' ? +width : +height,
h = orientation == 'port' ? +height: +width,
// Assemble shell command (Imagemagick)
convert = '/opt/local/bin/convert icon.png' +
// 1 Take base icon, resize for each resolution
' -gravity center -resize ' + content +
' -background "' + background + '" -flatten' +
// 2 Extend background
' -extent ' + w + 'x' + h +
// 3 Add transparent border
' -matte -bordercolor none -border 1' +
// 4 Draw 9-patch scalable (top/left) markers
' -fill black ' +
// top
'-draw "line 1,0 '+((w - content)/2)+',0" -draw "line '+((w + content + 2)/2)+',0 '+(w - 1)+',0"' +
// left
' -draw "line 0,1 0,'+((h - content)/2)+'" -draw "line 0,'+((h + content + 2)/2)+' 0,'+(h - 1)+'" ' +
// 5 Draw 9-patch fill (right/bottom) markers
// not used
// 6 Execute
output;
console.log(convert);
shell.exec(convert, out);
});
});
}
})({
// name: 'icon widthxheight'
ldpi: '36 320x426',
mdpi: '48 320x470',
hdpi: '72 480x640',
xhdpi:'96 720x960',
xxhdpi:'144 720x960',
});
function out(error, stdout, stderr) {
stdout && console.log(stdout);
stderr && console.log(stderr);
if (error)
console.log(error);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment