diff --git a/README.md b/README.md index 5778f0d..cad2c63 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,8 @@ -# cordova-splash +# cordova-splash + capacitor-splash = c2-splash -Automatic splash screen generator for Cordova. Create a splash screen once in the root folder of your Cordova project and use cordova-splash to automatically crop and copy it for all the platforms your project supports (currenty works with iOS, Android and Windows 10). +Automatic splash screen generator for *both* [Cordova](https://cordova.apache.org) and [capacitor](https://capacitor.ionicframework.com/); that's why I renamed it to *c2-splash*. :-P -The splash screen image should be 2208x2208 px with a center square of about 1200x1200 px. The image may be cropped around the center square. You can also use larger images with similar proportions. +Create a splash screen once in the root folder of your Cordova / capacitor project and use c2-splash to automatically crop and copy it for all the platforms your project supports (currently works with iOS, Android and Windows 10 (Cordova only)). ### Installation @@ -14,29 +14,48 @@ If you are using an older version of cordova (before 7.x): ### Requirements -- ImageMagick installed (*Mac*: `brew install imagemagick`, *Debian/Ubuntu*: `sudo apt-get install imagemagick`, *Windows*: [See here, install "Legacy tools"](http://www.imagemagick.org/script/binary-releases.php#windows)) -- At least one platform was added to your project ([cordova platforms docs](http://cordova.apache.org/docs/en/edge/guide_platforms_index.md.html#Platform%20Guides)) -- Cordova's config.xml file must exist in the root folder ([cordova config.xml docs](http://cordova.apache.org/docs/en/edge/config_ref_index.md.html#The%20config.xml%20File)) +- ImageMagick installed (*Mac*: `brew install imagemagick`, *Debian/Ubuntu*: `sudo apt-get install imagemagick`, *Windows*: [See here](https://www.imagemagick.org/script/download.php#windows), when installing choose the "Legacy tools" option!) +- At least one platform was added to your project ([cordova platforms docs](http://cordova.apache.org/docs/en/edge/guide_platforms_index.md.html#Platform%20Guides) or (`npx cap add`)[https://capacitor.ionicframework.com/docs/getting-started/]) +- Cordova's config.xml file must exist in the root folder ([cordova config.xml docs](http://cordova.apache.org/docs/en/edge/config_ref_index.md.html#The%20config.xml%20File)), or, when using capacitor, it looks for `capacitor.config.json` ### Usage -Create a `splash.png` file in the root folder of your cordova project and run: +Create a `splash.png` file with in the root folder of your cordova project. The splash screen image should be **2208x2208 px** with a center square of about **1200x1200 px**. The image may be **cropped** around the center square. You can also use larger images with similar proportions. As ImageMagick is used for image generation, you can also use SVG graphics. - $ cordova-splash +Then run: -You also can specify manually a location for your `config.xml` or `splash.png`: + $ c2-splash - $ cordova-splash --config=config.xml --splash=splash.png +c2-splash automatically detects whether you have a cordova or a capacitor project by looking for the `capacitor.config.json` config file. + +You also can specify manually a location for your `config.xml` / `capacitor.config.json` or `splash.png`: + + $ c2-splash --config=config.xml --splash=splash.png + +You can use the `--capacitor` option to manually choose "capacitor" mode and use `--config` to set the file name. If you run a old version of Cordova for iOS and you need your files in `/Resources/icons/`, use this option: - $ cordova-splash --xcode-old + $ c2-splash --xcode-old + +To change the output filename for android, use: + + $ c2-splash --android_filename=screen.png #### Notes: -- Your `config.ml` file will not be updated by the tool (because images are automatically created in the good folders) +- The error message `Error: spawn identify ENOENT` is printed, when the script cannot find the `identify` tool, i.e. the ImageMagick tools are not found in `PATH`. +- There are sample splash images to help you see which parts are visible in which resolution: sample.svg / sample.png + +**Cordova:** + +- Your `config.xml` file will not be updated by the tool (because images are automatically created in the good folders) - Therefore, in your `config.xml`, be sure to remove all lines looking like `` +**capacitor:** + +- For android and ios the splash images are generated in the platform directory where they are expected for building the app. *However, as I don't have a Mac at hand right now, I didn't test the paths for ios.* + ### Icons Check out [cordova-icon](https://github.com/AlexDisler/cordova-icon) diff --git a/bin/c2-splash b/bin/c2-splash new file mode 100644 index 0000000..a21be8d --- /dev/null +++ b/bin/c2-splash @@ -0,0 +1,2 @@ +#!/usr/bin/env node +require('./../index.js'); diff --git a/bin/capacitor-splash b/bin/capacitor-splash new file mode 100644 index 0000000..a21be8d --- /dev/null +++ b/bin/capacitor-splash @@ -0,0 +1,2 @@ +#!/usr/bin/env node +require('./../index.js'); diff --git a/index.js b/index.js index 1868309..456771b 100644 --- a/index.js +++ b/index.js @@ -6,14 +6,37 @@ var colors = require('colors'); var _ = require('underscore'); var Q = require('q'); var argv = require('minimist')(process.argv.slice(2)); +const CAPACITOR_CONFIG_FILE = 'capacitor.config.json'; +const CORDOVA_CONFIG_FILE = 'config.xml'; /** * @var {Object} settings - names of the config file and of the splash image */ var settings = {}; -settings.CONFIG_FILE = argv.config || 'config.xml'; +settings.CAPACITOR = argv.capacitor || fs.existsSync(CAPACITOR_CONFIG_FILE); +settings.CONFIG_FILE = argv.config || (settings.CAPACITOR ? CAPACITOR_CONFIG_FILE : CORDOVA_CONFIG_FILE); settings.SPLASH_FILE = argv.splash || 'splash.png'; settings.OLD_XCODE_PATH = argv['xcode-old'] || false; +settings.ANDROID_SPLASH_FILENAME = argv.android_filename || 'splash.png'; +// console.log("settings=",settings); + +const platform_paths = settings.CAPACITOR ? { + ios: 'ios', + android: 'android' +} : { + ios: 'platforms/ios', + android: 'platforms/android' +}; + +const platform_splash_paths = settings.CAPACITOR ? { + // todo check if this path is correct for capacitor ios + ios: settings.OLD_XCODE_PATH ? '/Resources/splash/' : '/Images.xcassets/LaunchImage.launchimage/', + android: '/app/src/main/res/' +} : { + ios: settings.OLD_XCODE_PATH ? '/Resources/splash/' : '/Images.xcassets/LaunchImage.launchimage/', + android: '/res/' +}; + /** * Check which platforms are added to the project and return their splash screen names and sizes @@ -24,17 +47,12 @@ settings.OLD_XCODE_PATH = argv['xcode-old'] || false; var getPlatforms = function (projectName) { var deferred = Q.defer(); var platforms = []; - var xcodeFolder = '/Images.xcassets/LaunchImage.launchimage/'; - - if (settings.OLD_XCODE_PATH) { - xcodeFolder = '/Resources/splash/'; - } platforms.push({ name : 'ios', // TODO: use async fs.exists - isAdded : fs.existsSync('platforms/ios'), - splashPath : 'platforms/ios/' + projectName + xcodeFolder, + isAdded : fs.existsSync(platform_paths.ios), + splashPath : platform_paths.ios + projectName + platform_splash_paths.ios, splash : [ // iPhone { name: 'Default~iphone.png', width: 320, height: 480 }, @@ -58,23 +76,23 @@ var getPlatforms = function (projectName) { }); platforms.push({ name : 'android', - isAdded : fs.existsSync('platforms/android'), - splashPath : 'platforms/android/res/', + isAdded : fs.existsSync(platform_paths.android), + splashPath : platform_paths.android + platform_splash_paths.android, splash : [ // Landscape - { name: 'drawable-land-ldpi/screen.png', width: 320, height: 200 }, - { name: 'drawable-land-mdpi/screen.png', width: 480, height: 320 }, - { name: 'drawable-land-hdpi/screen.png', width: 800, height: 480 }, - { name: 'drawable-land-xhdpi/screen.png', width: 1280, height: 720 }, - { name: 'drawable-land-xxhdpi/screen.png', width: 1600, height: 960 }, - { name: 'drawable-land-xxxhdpi/screen.png', width: 1920, height: 1280 }, + { name: 'drawable-land-ldpi/' + settings.ANDROID_SPLASH_FILENAME, width: 320, height: 200 }, + { name: 'drawable-land-mdpi/' + settings.ANDROID_SPLASH_FILENAME, width: 480, height: 320 }, + { name: 'drawable-land-hdpi/' + settings.ANDROID_SPLASH_FILENAME, width: 800, height: 480 }, + { name: 'drawable-land-xhdpi/' + settings.ANDROID_SPLASH_FILENAME, width: 1280, height: 720 }, + { name: 'drawable-land-xxhdpi/' + settings.ANDROID_SPLASH_FILENAME, width: 1600, height: 960 }, + { name: 'drawable-land-xxxhdpi/' + settings.ANDROID_SPLASH_FILENAME, width: 1920, height: 1280 }, // Portrait - { name: 'drawable-port-ldpi/screen.png', width: 200, height: 320 }, - { name: 'drawable-port-mdpi/screen.png', width: 320, height: 480 }, - { name: 'drawable-port-hdpi/screen.png', width: 480, height: 800 }, - { name: 'drawable-port-xhdpi/screen.png', width: 720, height: 1280 }, - { name: 'drawable-port-xxhdpi/screen.png', width: 960, height: 1600 }, - { name: 'drawable-port-xxxhdpi/screen.png', width: 1280, height: 1920 } + { name: 'drawable-port-ldpi/' + settings.ANDROID_SPLASH_FILENAME, width: 200, height: 320 }, + { name: 'drawable-port-mdpi/' + settings.ANDROID_SPLASH_FILENAME, width: 320, height: 480 }, + { name: 'drawable-port-hdpi/' + settings.ANDROID_SPLASH_FILENAME, width: 480, height: 800 }, + { name: 'drawable-port-xhdpi/' + settings.ANDROID_SPLASH_FILENAME, width: 720, height: 1280 }, + { name: 'drawable-port-xxhdpi/' + settings.ANDROID_SPLASH_FILENAME, width: 960, height: 1600 }, + { name: 'drawable-port-xxxhdpi/' + settings.ANDROID_SPLASH_FILENAME, width: 1280, height: 1920 } ] }); platforms.push({ @@ -96,6 +114,7 @@ var getPlatforms = function (projectName) { { name: 'SplashScreenPhone.scale-100.png', width: 480, height: 800 } ] }); + // console.info(platforms); deferred.resolve(platforms); return deferred.promise; }; @@ -172,7 +191,7 @@ var generateSplash = function (platform, splash) { deferred.reject(err); } else { deferred.resolve(); - display.success(splash.name + ' created'); + display.success(dstPath + ' created'); } }); return deferred.promise; @@ -192,11 +211,7 @@ var generateSplashForPlatform = function (platform) { splashes.forEach(function (splash) { all.push(generateSplash(platform, splash)); }); - Q.all(all).then(function () { - deferred.resolve(); - }).catch(function (err) { - console.log(err); - }); + Q.all(all).then(deferred.resolve).catch(console.log); return deferred.promise; }; @@ -284,8 +299,43 @@ var configFileExists = function () { return deferred.promise; }; +if (settings.CAPACITOR) { + configFileExists = function () { + var deferred = Q.defer(); + fs.exists(settings.CONFIG_FILE, function (exists) { + if (exists) { + display.success(settings.CONFIG_FILE + ' exists'); + deferred.resolve(); + } else { + display.error('capacitor\'s ' + settings.CONFIG_FILE + ' does not exist'); + deferred.reject(); + } + }); + return deferred.promise; + }; + + getProjectName = function() { + var deferred = Q.defer(); + fs.readFile(settings.CONFIG_FILE, function (err, data) { + if (err) { + deferred.reject(err); + } + try { + var config = JSON.parse(data); + var projectName = config.appName; + deferred.resolve(projectName); + } catch (err) { + deferred.reject(err); + } + }); + return deferred.promise; + }; +} + display.header('Checking Project & Splash'); +display.success('Mode: ' + settings.CAPACITOR ? 'capacitor' : 'cordova'); + atLeastOnePlatformFound() .then(validSplashExists) .then(configFileExists) diff --git a/sample.png b/sample.png new file mode 100644 index 0000000..c919f99 Binary files /dev/null and b/sample.png differ diff --git a/sample.svg b/sample.svg new file mode 100644 index 0000000..3cdfe8f --- /dev/null +++ b/sample.svg @@ -0,0 +1,101 @@ + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + diff --git a/yarn.lock b/yarn.lock new file mode 100644 index 0000000..81be999 --- /dev/null +++ b/yarn.lock @@ -0,0 +1,155 @@ +# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. +# yarn lockfile v1 + + +balanced-match@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767" + integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c= + +brace-expansion@^1.1.7: + version "1.1.11" + resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd" + integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA== + dependencies: + balanced-match "^1.0.0" + concat-map "0.0.1" + +colors@^0.6.2: + version "0.6.2" + resolved "https://registry.yarnpkg.com/colors/-/colors-0.6.2.tgz#2423fe6678ac0c5dae8852e5d0e5be08c997abcc" + integrity sha1-JCP+ZnisDF2uiFLl0OW+CMmXq8w= + +concat-map@0.0.1: + version "0.0.1" + resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b" + integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s= + +fs-extra@^0.30.0: + version "0.30.0" + resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-0.30.0.tgz#f233ffcc08d4da7d432daa449776989db1df93f0" + integrity sha1-8jP/zAjU2n1DLapEl3aYnbHfk/A= + dependencies: + graceful-fs "^4.1.2" + jsonfile "^2.1.0" + klaw "^1.0.0" + path-is-absolute "^1.0.0" + rimraf "^2.2.8" + +fs.realpath@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f" + integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8= + +glob@^7.1.3: + version "7.1.4" + resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.4.tgz#aa608a2f6c577ad357e1ae5a5c26d9a8d1969255" + integrity sha512-hkLPepehmnKk41pUGm3sYxoFs/umurYfYJCerbXEyFIWcAzvpipAgVkBqqT9RBKMGjnq6kMuyYwha6csxbiM1A== + dependencies: + fs.realpath "^1.0.0" + inflight "^1.0.4" + inherits "2" + minimatch "^3.0.4" + once "^1.3.0" + path-is-absolute "^1.0.0" + +graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.1.9: + version "4.2.2" + resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.2.tgz#6f0952605d0140c1cfdb138ed005775b92d67b02" + integrity sha512-IItsdsea19BoLC7ELy13q1iJFNmd7ofZH5+X/pJr90/nRoPEX0DJo1dHDbgtYWOhJhcCgMDTOw84RZ72q6lB+Q== + +imagemagick@^0.1.3: + version "0.1.3" + resolved "https://registry.yarnpkg.com/imagemagick/-/imagemagick-0.1.3.tgz#7483cea093b4d9f2e2f396857adc8821b537c56a" + integrity sha1-dIPOoJO02fLi85aFetyIIbU3xWo= + +inflight@^1.0.4: + version "1.0.6" + resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9" + integrity sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk= + dependencies: + once "^1.3.0" + wrappy "1" + +inherits@2: + version "2.0.4" + resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c" + integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ== + +jsonfile@^2.1.0: + version "2.4.0" + resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-2.4.0.tgz#3736a2b428b87bbda0cc83b53fa3d633a35c2ae8" + integrity sha1-NzaitCi4e72gzIO1P6PWM6NcKug= + optionalDependencies: + graceful-fs "^4.1.6" + +klaw@^1.0.0: + version "1.3.1" + resolved "https://registry.yarnpkg.com/klaw/-/klaw-1.3.1.tgz#4088433b46b3b1ba259d78785d8e96f73ba02439" + integrity sha1-QIhDO0azsbolnXh4XY6W9zugJDk= + optionalDependencies: + graceful-fs "^4.1.9" + +minimatch@^3.0.4: + version "3.0.4" + resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083" + integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA== + dependencies: + brace-expansion "^1.1.7" + +minimist@^1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284" + integrity sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ= + +once@^1.3.0: + version "1.4.0" + resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1" + integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E= + dependencies: + wrappy "1" + +path-is-absolute@^1.0.0: + version "1.0.1" + resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f" + integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18= + +q@^1.0.1: + version "1.5.1" + resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7" + integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc= + +rimraf@^2.2.8: + version "2.7.1" + resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec" + integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w== + dependencies: + glob "^7.1.3" + +sax@>=0.6.0: + version "1.2.4" + resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9" + integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw== + +underscore@^1.6.0: + version "1.9.1" + resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.9.1.tgz#06dce34a0e68a7babc29b365b8e74b8925203961" + integrity sha512-5/4etnCkd9c8gwgowi5/om/mYO5ajCaOgdzj/oW+0eQV9WxKBDZw5+ycmKmeaTXjInS/W0BzpGLo2xR2aBwZdg== + +wrappy@1: + version "1.0.2" + resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f" + integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8= + +xml2js@^0.4.3: + version "0.4.19" + resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.4.19.tgz#686c20f213209e94abf0d1bcf1efaa291c7827a7" + integrity sha512-esZnJZJOiJR9wWKMyuvSE1y6Dq5LCuJanqhxslH2bxM6duahNZ+HMpCLhBQGZkbX6xRf8x1Y2eJlgt2q3qo49Q== + dependencies: + sax ">=0.6.0" + xmlbuilder "~9.0.1" + +xmlbuilder@~9.0.1: + version "9.0.7" + resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-9.0.7.tgz#132ee63d2ec5565c557e20f4c22df9aca686b10d" + integrity sha1-Ey7mPS7FVlxVfiD0wi35rKaGsQ0=