code style/efficiency question: text file templates

[Kiril Karaatanasov]

I actually have a small Pytohn program along with couple of HTML forms
to do this. I were also trying to resolve this dilema until I found
out how it is realy easy to do.

You need to do one copy of the HTML document that has all deisgn
gadgets it needs (In my case these were three files since I did couple
of frames one for preview and one for regular size).

Then you need to replace the customizable places with document.write
statements, that fetch data from an array. This seems to be compatible
with all browsers.

Last step is to declare the array in an outer script file .js. This
can be loaded at the user machine.

then I created a Pytoh program that basicly goes through all jpeg
files in a directory, creates thumbnails in one subdirectory and
640x480 images in another subdirectory, then it writes the names of
the pictures in to the .js file. Thus the image viewer web app is
automaticly generated. You may add to the python code statements to
write blank strings associated with each image to add comments there
manually afterwards. Or if you have a way to connect filenames to a
string table do it automaticly :o))) The possiblities are limitless.

In my opinion nanoseconds in an esentially not optimized sequence do
not matter. These matter only when your app is well designed and is
sure to be capable to do the job.

In my opinion binding data to UI should take place as late as possible
e.g. on the client computer. This minimizes the effort one needs to do
when data or look&feel is updated e.g. if you generate static HTML's
this might be good for some cases, but once changes ocur all files
need be updated the more files that get up[dated the higher the risk
that something will go wrong.

Here are some relevant pieces of code. If you eed the whole thing drop
me a line.

The .py progie:


def process(path):
    os.mkdir("thumbs")
    os.mkdir("images")
    indx=0
    f=file("script.js","w")
    c = []
    for i in os.listdir(path):
            ar = i.split(".")
            if len(ar) > 1 and (ar[1]=="jpg" or ar[1]=="JPG"):
                    print i
                    c.append('ar[' + str(indx) + '] = "' + i + '";\n')
                    indx = indx + 1
                    process_image(i)
    f.write('var ar = new Array(' + str(len(c)) + ');')
    for i in c:
            f.write(i)



The .js result file

var ar = new Array(20);ar[0] = "PICT0031.JPG";
ar[1] = "PICT0032.JPG";
ar[2] = "PICT0033.JPG";
ar[3] = "PICT0034.JPG";
ar[4] = "PICT0035.JPG";
ar[5] = "PICT0036.JPG";
ar[6] = "PICT0037.JPG";
ar[7] = "PICT0038.JPG";
ar[8] = "PICT0039.JPG";
ar[9] = "PICT0040.JPG";

Here is the script loading in the main frame

<SCRIPT LANGUAGE="JavaScript" src="script.js">

Here is part of the index frame that displays thumbnails

<SCRIPT LANGUAGE="JavaScript">
<!--

function setImage(img){
	window.top.main.index=img;
	window.top.main.update();
}
var ar = window.top.ar;


for(i=0;i<ar.length;i++)
	document.write('<TR><TD><A HREF="javascript:setImage(' + i +
');"><IMG SRC="thumbs/' + ar[i] + '"></TD/TR>');

//-->
</SCRIPT>


The package is easy to use and modify. All you need to do is 

Copy the HTMLs and .py file into the image directory 
Double click the python file. 
Wait for a while.
Open the index.html to see what has happened

When desing changes you need to put fine touch on the HTML's. When new
pictures are to be added or old remove just copy the pictures and
click on the .py file


Simple and powerfull design is foremost important.