feat: introduce assets generation

Introduce ``generate-icons`` and ``generate-splashscreens`` commands to generate assets needed for iOS and Android.
The operations are as follow:
 - Icons:
  - For all platforms we just resize the provided image.
 - Splash screens:
  - For Android we generate 2 png for each dpi: blank with background(background.png) and resized image based on provided image(logo.png). During the app start the logo overlays the background.
  - For iOS we generate 1 png for each dpi which has resized and centered image on the background.

All resources with corresponding sizes and operations are described in image-definitions.ts.

Added image-generation-test.png in order to provide easy way to test this functionality.

For image resizing we use https://github.com/oliver-moran/jimp.

Author: ivanovit

.vscode/launch.json

@@ -22,7 +22,9 @@
 			// "args": [ "run", "android", "--path", "cliapp"]
 			// "args": [ "debug", "android", "--path", "cliapp"]
 			// "args": [ "livesync", "android", "--path", "cliapp"]
-			// "args": [ "livesync", "android", "--watch", "--path", "cliapp"]
+			// "args": [ "livesync", "android", "--watch", "--path", "cliapp"],
+			// "args": [ "generate-icons", "./test/image-generation-test.png", "--path", "cliapp" ],
+			// "args": [ "generate-splashscreens", "./test/image-generation-test.png", "--path", "cliapp", "--background", "black" ],
 		},
 		{
 			// in case you want to debug a single test, modify it's code to be `it.only(...` instead of `it(...`

lib/bootstrap.ts

@@ -161,3 +161,7 @@ $injector.require("terminalSpinnerService", "./services/terminal-spinner-service
 $injector.require('playgroundService', './services/playground-service');
 $injector.require("platformEnvironmentRequirements", "./services/platform-environment-requirements");
 $injector.require("nativescriptCloudExtensionService", "./services/nativescript-cloud-extension-service");
+
+$injector.requireCommand("generate-icons", "./commands/generate-assets")
+$injector.requireCommand("generate-splashscreens", "./commands/generate-assets")
+$injector.requirePublic("assetsGenerationService", "./services/assets-generation/assets-generation-service");

lib/commands/generate-assets.ts

@@ -0,0 +1,50 @@
+import { StringCommandParameter } from "../common/command-params";
+
+export abstract class GenerateCommandBase implements ICommand {
+	public allowedParameters: ICommandParameter[] = [new StringCommandParameter(this.$injector)];
+
+	constructor(protected $options: IOptions,
+		protected $injector: IInjector,
+		protected $projectData: IProjectData,
+		protected $assetsGenerationService: IAssetsGenerationService) {
+			this.$projectData.initializeProjectData();
+	}
+
+	public async execute(args: string[]): Promise<void> {
+		const [ imagePath ] = args;
+		const resourcesPath = this.$projectData.getAppResourcesDirectoryPath();
+		await this.generate(imagePath, resourcesPath, this.$options.background)
+	}
+
+	protected abstract generate(imagePath: string, resourcesPath: string, background?: string): Promise<void>
+}
+
+export class GenerateIconsCommand extends GenerateCommandBase implements ICommand {
+	constructor(protected $options: IOptions,
+		$injector: IInjector,
+		$projectData: IProjectData,
+		$assetsGenerationService: IAssetsGenerationService) {
+			super($options, $injector, $projectData, $assetsGenerationService);
+	}
+
+	protected async generate(imagePath: string, resourcesPath: string, background?: string): Promise<void> {
+		await this.$assetsGenerationService.generateIcons(imagePath, resourcesPath);
+	}
+}
+
+$injector.registerCommand("generate-icons", GenerateIconsCommand);
+
+export class GenerateSplashScreensCommand extends GenerateCommandBase implements ICommand {
+	constructor(protected $options: IOptions,
+		$injector: IInjector,
+		$projectData: IProjectData,
+		$assetsGenerationService: IAssetsGenerationService) {
+			super($options, $injector, $projectData, $assetsGenerationService);
+	}
+
+	protected async generate(imagePath: string, resourcesPath: string, background?: string): Promise<void> {
+		await this.$assetsGenerationService.generateSplashScreens(imagePath, resourcesPath, background);
+	}
+}
+
+$injector.registerCommand("generate-splashscreens", GenerateSplashScreensCommand);

lib/declarations.d.ts

@@ -463,6 +463,7 @@ interface IOptions extends ICommonOptions, IBundleString, IPlatformTemplate, IEm
 	liveEdit: boolean;
 	chrome: boolean;
 	inspector: boolean; // the counterpart to --chrome
+	background: string
 }
 
 interface IEnvOptions {
@@ -794,3 +795,26 @@ interface INativescriptCloudExtensionService {
 	 */
 	install(): Promise<IExtensionData>;
 }
+
+
+/**
+ * Describes service used for assets generation
+ */
+interface IAssetsGenerationService {
+	/**
+	 * Generate icons for iOS and Android
+	 * @param {string} imagePath Path to the image that will be used for generation
+	 * @param {string} resourcesPath Path to the app resources
+	 * @returns {Promise<void>}
+	 */
+	generateIcons(imagePath: string, resourcesPath: string): Promise<void>;
+
+	/**
+	 * Generate splash screens for iOS and Android
+	 * @param {string} imagePath Path to the image that will be used for generation
+	 * @param {string} resourcesPath Path to the app resources
+	 * @param {string} background Background color that will be used for background. Defaults to #FFFFFF
+	 * @returns {Promise<void>}
+	 */
+	generateSplashScreens(imagePath: string, resourcesPath: string, background?: string): Promise<void>;
+}

lib/options.ts

@@ -38,7 +38,8 @@ export class Options extends commonOptionsLibPath.OptionsBase {
 			chrome: { type: OptionType.Boolean },
 			inspector: { type: OptionType.Boolean },
 			clean: { type: OptionType.Boolean },
-			watch: { type: OptionType.Boolean, default: true }
+			watch: { type: OptionType.Boolean, default: true },
+			background: { type: OptionType.String }
 		},
 			$errors, $staticConfig, $settingsService);
 

lib/services/assets-generation/assets-generation-service.ts

@@ -0,0 +1,80 @@
+import * as path from "path";
+import * as Jimp from "jimp";
+import * as Color from "color";
+import { Icons, SplashScreens, Operations } from "./image-definitions"
+
+export class AssetsGenerationService implements IAssetsGenerationService {
+	constructor(private $logger: ILogger) {	
+	}
+	
+	public async generateIcons(imagePath: string, resourcesPath: string): Promise<void> {
+		this.$logger.info("Generating icons ...");
+		await this.generateImagesForDefinitions(imagePath, resourcesPath, Icons)
+		this.$logger.info("Icons generation completed.");
+	}
+
+	public async generateSplashScreens(imagePath: string, resourcesPath: string, background?: string): Promise<void> {
+		this.$logger.info("Generating splash screens ...");
+		await this.generateImagesForDefinitions(imagePath, resourcesPath, SplashScreens, background)
+		this.$logger.info("Splash screens generation completed.");
+	}
+
+	private async generateImagesForDefinitions(imagePath: string, resourcesPath: string, definitions: any[], background: string = "white") : Promise<void> {
+		for (let definition of definitions) {
+			const operation = definition.operation || Operations.Resize;
+			const scale = definition.scale || 0.8;
+			const outputPath = this.convertToAbsolutePath(resourcesPath, definition.path);
+
+			switch (operation) {
+				case Operations.OverlayWith:
+					const imageResize = Math.round(Math.min(definition.width, definition.height) * scale);
+					const image = await this.resize(imagePath, imageResize, imageResize);
+					await this.generateImage(background, definition.width, definition.height, outputPath, image);
+					break;
+				case Operations.Blank:
+					await this.generateImage(background, definition.width, definition.height, outputPath);
+					break;
+				case Operations.Resize:
+					const resizedImage = await this.resize(imagePath, definition.width, definition.height);
+					resizedImage.write(outputPath);
+					break;
+				default:
+					throw new Error(`Invalid image generation operation: ${operation}`);
+			}
+		}
+	}
+
+	private async resize(imagePath: string, width: number, height: number) {
+		const image = await Jimp.read(imagePath);
+		return image.scaleToFit(width, height);
+	}
+
+	private generateImage(background: string, width: number, height: number, outputPath: string, overlayImage?: Jimp) {
+		//Typescript declarations for Jimp are not updated to define the constructor with backgroundColor so we workaround it by casting it to <any> for this case only.
+		let J = <any>Jimp;
+		const backgroundColor = this.getRgbaNumber(background);
+		let image = new J(width, height, backgroundColor);
+
+		if (overlayImage) {
+			const centeredWidth = (width - overlayImage.bitmap.width) / 2;
+			const centeredHeight = (height - overlayImage.bitmap.height) / 2;
+			image = image.composite(overlayImage, centeredWidth, centeredHeight);
+		}
+
+		image.write(outputPath)
+	}
+
+	private convertToAbsolutePath(resourcesPath: string, resourcePath: string) {
+		return path.isAbsolute(resourcePath) ? resourcePath : path.join(resourcesPath, resourcePath);
+	}
+
+	private getRgbaNumber(colorString: string) : number {
+		const color = new Color(colorString);
+		const colorRgb = color.rgb();
+		const alpha = Math.round(colorRgb.alpha() * 255);
+
+		return Jimp.rgbaToInt(colorRgb.red(), colorRgb.green(), colorRgb.blue(), alpha);
+	}
+}
+
+$injector.register("assetsGenerationService", AssetsGenerationService);