nativescript-cli icon indicating copy to clipboard operation
nativescript-cli copied to clipboard

resources generate images support

Open squidink7 opened this issue 3 years ago • 1 comments
trafficstars

Is your feature request related to a problem? Please describe.

When adding a new image resource to your project, it would be handy to be able to add one without going through https://images.nativescript.rocks/ or manually creating your own and placing them in the right folders.

Describe the solution you'd like

An extension of the resources generate command could be used that would act almost identically to the generate icons command, however it would use the original file name instead of "icon" when creating the different image sizes.

Describe alternatives you've considered

Making the generate icons command take another (optional) argument which allows an output name to be specified would also solve this issue

Anything else?

No response

Please accept these terms

squidink7 avatar Jan 18 '22 01:01 squidink7

i have a sh script which does that really well. Maybe it can be ported to the cli. Or published in another npm package?

#!/bin/bash

function usage() {
	echo "usage: $0 <image-filename> [--output=output-directory]";
	exit 1;
}

image=""
output="."
width="-1"
height="-1"
density="-1"
outputExt=""

while [ $# -gt 0 ]; do
  case "$1" in
    -o|--output=*)
      output="$2"
      ;;
    -w|--width=*)
      width="$2"
      ;;
    -e|--ext=*)
      outputExt="$2"
      ;;
    -h|--height=*)
      height="$2"
      ;;
    -d|--density=*)
      density="$2"
      ;;
    *)
	  image="$1"
  esac
  shift
done
[ "$image" ] || usage

nameWithExt=${image##*/}
name=${nameWithExt%.*}
extension="${nameWithExt##*.}"

devices=iOS,Android #,windows-phone,bada,bada-wac,blackberry,webos
eval mkdir -p "$output/{$devices}"

# Show the user some progress by outputing all commands being run.
# set -x

# Setting IFS (input field separator) value as ","
IFS='x'

# Reading the split string into array

if [ "$extension" = "svg" ]; then
	if [ "$outputExt" = "" ]; then
		outputExt="png"
	fi
	TEMP_DIR=`mktemp -d`
	rsvg-convert -h $height -w $width "$image" > $TEMP_DIR/$name.$outputExt
	image="$TEMP_DIR/$name.$outputExt"
	echo "svgGeneratedImage $image"
fi
echo "image $image"
imageSize=$(convert "$image" -format "%wx%h" info:)
read -ra sizes <<< "$imageSize"

echo "width $width"
echo "height $height"
echo "image $image"

if [ "$width" -gt "0" ]; then
	echo "hanlding width $width"
  	echo "sizes[0] ${sizes[0]}"
  	echo "sizes[1] ${sizes[1]}"
	ratio="$(echo "(`expr ${sizes[0]}` / `expr ${sizes[1]}`)" | bc -l)"
  	echo "ratio $ratio"
	sizes[0]=$width
	sizes[1]="$(echo "(`expr $width` / `expr $ratio`+0.5)/1" | bc )"
fi
if [ "$height" -gt "0" ]; then
	echo "hanlding height $height"
  	echo "sizes[0] ${sizes[0]}"
  	echo "sizes[1] ${sizes[1]}"
	ratio="$(echo "(`expr ${sizes[0]}` / `expr ${sizes[1]}`)" | bc -l)"
  	echo "ratio $ratio"
	sizes[1]=$height
	sizes[0]="$(echo "(`expr $height` * `expr $ratio`+0.5)/1" | bc )"
  	echo "width ${sizes[0]}"
  	echo "height ${sizes[1]}"
fi

function convertImage() {
	local factor="$1"
	local output="$2"
	
	convert "$image" -background none -density "$density" -resize "$(getSize $factor)" "$output"
	# opti "$output"
}
function getSize() {
	local factor="$1"
	echo "$(echo "(`expr ${sizes[0]}`* $factor+0.5)/1" | bc)x$(echo "(`expr ${sizes[1]}`* $factor+0.5)/1" | bc)"
}

function opti() {
  optipng -nb -nc "$*";
  advpng -z4 "$*";
  pngcrush -rem gAMA -rem alla -rem cHRM -rem iCCP -rem sRGB -rem time -ow "$*";
}

function androidConvertIcon() {
	drawables=drawable,drawable-ldpi,drawable-mdpi,drawable-hdpi,drawable-xhdpi,drawable-xxhdpi,drawable-xxxhdpi
	eval mkdir -p "$output/Android/src/main/res/{$drawables}"

	convertImage "0.1875" "$output/Android/src/main/res/drawable-ldpi/$name.$outputExt"
	convertImage "0.25" "$output/Android/src/main/res/drawable-mdpi/$name.$outputExt"
	convertImage "0.375" "$output/Android/src/main/res/drawable-hdpi/$name.$outputExt"
	convertImage "0.5" "$output/Android/src/main/res/drawable-xhdpi/$name.$outputExt"
	convertImage "0.75" "$output/Android/src/main/res/drawable-xxhdpi/$name.$outputExt"
	convertImage "1" "$output/Android/src/main/res/drawable-xxxhdpi/$name.$outputExt"
}

function iosConvertIcon() {
	convertImage "0.33" "$output/iOS/$name.$outputExt"
	convertImage "0.66" "$output/iOS/$name@2x.$outputExt"
	convertImage "1" "$output/iOS/$name@3x.$outputExt"
}
if [ "$outputExt" = "" ]; then
	outputExt="$extension"
fi
androidConvertIcon

iosConvertIcon

farfromrefug avatar Feb 14 '22 21:02 farfromrefug