Helpful Information

Category: Coding tips & tutorials threads

Writing a javascript array using a batch file

Many times we want to write out an array of images from a directory when making up a javascript. This batch file will do it for you on most modern computers, helpful if many images are involved:

@echo off
if '%1'=='w' (
echo array_name[%i%]='path%2'; >> array_it.js
set /a i=i+1
) else (
echo array_name=[]; > array_it.js
set /a i=0
for %%p in (.jpg, .gif, *.png) do (
call make_array.bat w %%p
)
set i
set i=
)

If you wish to have a path to the files included in each array entry, change path in the above to the desired path. Otherwise, delete it. Save as a plain text file and name it make_array.bat - When run in a folder containing image files, it will make a file in that folder named array_it.js containing the array array_name.

Wow you're venturing into batch scripting now John? :)

Nice ;)

Wow you're venturing into batch scripting now John? :)

That's pretty much how I cut my teeth.

Nice ;)

Thanks.

And the bash (-compatible) equivalent:
#!/bin/sh

num=0

arrname="images"
[ -n "$1" ] && arrname="$1"

imgpath=""
[ -n "$2" ] && imgpath="$2"

file="array_it.js"
[ -n "$3" ] && file="$3"

for i in *
do
[ -z `file -i "$i" | grep ': image/'` ] && continue
echo "$arrname[$num] = \"$imgpath$i\";" >> "$file"
num=`expr $num + 1`
doneOptional parameters are the array name, the path to prepend, and the filename, in that order. Handles all images. Requires file(1).

I've refined this approach to generate calls to a function that will feed it the image name, width, height and the color #000000. This is primarily an exercise for another thread I am helping out in. OK, the batch file is mostly unchanged but it can now be named anything you like, here is the code:

@echo off
if '%1'=='w' (
echo array_name[%items%]='%2'; >> array_it.js
set /a items=items+1
) else (
echo array_name=[]; > array_it.js
set /a items=0
for %%p in (.jpg, .gif, *.png) do (
call %0 w %%p
)
set items
set items=
)

Run the above batch file in a directory containing only the images that you want to later use with the function. It can have other files in it, as long as they are not images. Then put this HTML file in that directory:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="array_it.js" type="text/javascript">

</script>
</head>
<body>
<script type="text/javascript">
function loadI(im, num){
var preI=new Image();
preI.src=im;
array_name[num]=[array_name[num], preI]
}
for (var i_tem = 0; i_tem < array_name.length; i_tem++)
loadI(array_name[i_tem], i_tem);
for (i_tem = 0; i_tem < array_name.length; i_tem++)
document.write('newWindow(\''+array_name[i_tem][0]+'\', '+array_name[i_tem][1].width+', '+array_name[i_tem][1].height+', \'#000000\')<br>\n');
</script>
</body>
</html>

and load it into your browser. You may have to refresh it once to get the dimensions to come up for all images. Then simply cut and paste the calls you will see on it as desired.