martes, 1 de abril de 2014

Poner icono y splash screen a tu aplicación Cordova

Recientemente introducido en el fantástico mundo de Cordova y sus puñeteros bugs he dado con la formula para copiar en la plataforma android los iconos y splash screen que tenemos en nuestra carpeta www/res

Lo primero de todo cambiar los iconos y splash que deseemos en www/res

Luego ir a la carpeta hooks (se encuentra en la raíz de vuestro proyecto) y añadir una carpeta con el nombre after_prepare. Para más información sobre los distintos hooks ir a: https://github.com/apache/cordova-cli/blob/master/templates/hooks-README.md


Dentro de dicha carpeta crear el fichero copy_android_assets.js

Dentro de él escribiremos:
#!/usr/bin/env node
var path = require( "path" ),
    fs = require( "fs" ),
    xml2js = require('xml2js');
    shell = require('shelljs'),
    rootdir = process.argv[ 2 ],
    iconroot = rootdir + "/www/res/icon/android",
    screenroot = rootdir + "/www/res/screen/android",
    androidroot = rootdir + "/platforms/android";

try {
    fs.lstatSync( androidroot ).isDirectory();
}
catch( e ) {
    console.log( "android platform does not exist. nothing to do here." );
    process.exit(0);
}

// incase there are any spaces in the projectname
var parser = new xml2js.Parser();
var projectname = '';
try {
    fs.readFile(rootdir + "/config.xml", function(err, data) {
        if (err) throw err;

        parser.parseString(data, function (err, result) {
            if (err) throw err;

            projectname = result.widget.name[0].replace(" ", "\\ ");
            startCopyFiles(screenroot, 'splash');
            startCopyFiles(iconroot, 'icon');

            // end of script
            console.log( "Copied all android assets." );
            process.exit(0);
        });
    });
} catch( e ) {
    console.log( "could not read and parse the config.xml file." );
    process.exit(0);
}

function startCopyFiles(path, defaultname, callback) {
    var folderDestination = androidroot + '/res/drawable';
    var files = shell.ls(path + '/*.png');
    var fileSizeRegex = /.*-(ldpi|mdpi|xhdpi|hdpi).*/;

    if (files.length > 0) {
        for (var i = 0; i < files.length; i++) {
            var fileToCopy = files[i];
            var size = fileSizeRegex.exec(fileToCopy)[1];
            if (size == 'hdpi') // use this size to the default icon
                shell.cp('-Rf', fileToCopy, folderDestination + '/' + defaultname + '.png');

            console.log("copying " + fileToCopy + "... ");
            shell.cp('-Rf', fileToCopy, folderDestination + '-' + size + '/' + defaultname + '.png');
            console.log("to " + folderDestination + '-' + size + '/' + defaultname + '.png');
        }
    }
}

Luego nos faltarán un par de cosillas que las instalamos ejecutando estos comandos:

npm install -g xml2js
npm install -g shelljs

Si al compilar el proyecto nos dice que no encuentra el modulo shelljs es porque no tenemos en las variables de entorno la siguiente variable:

NODE_PATH = [USER_HOME]\AppData\Roaming\npm\node_modules

Sustituir [USER_HOME] por la ruta a vuestro home. Espero no tener que aclarar que esto es para windows, en el caso de linux supongo que será muy similar.

Este script lo he creado basándome en el trabajo de https://github.com/cdibened/cordova-hooks. No os recomiendo su uso porque están desactualizados y no tiene soporte para leer el nuevo fichero config.xml que tiene Cordova para configurar todo.

No hay comentarios:

Publicar un comentario