diff options
Diffstat (limited to 'kjsembed/docs/examples/imageinfo')
17 files changed, 309 insertions, 0 deletions
diff --git a/kjsembed/docs/examples/imageinfo/README b/kjsembed/docs/examples/imageinfo/README new file mode 100644 index 00000000..3940153a --- /dev/null +++ b/kjsembed/docs/examples/imageinfo/README @@ -0,0 +1,22 @@ +A number of utilities showing the facilties for dealing with image +files. The scripts here are independent from each other. + +imageinfo.js Prints the width, height, depth and format of + images that are in a supported format. This script + is a good example of how to process arguments + passed on the command line. + +imagescale.js Loads an image, scales it to the specified size, + then saves using the specified name and format. + +imagegallery.js Creates an image gallery from a list of images + specified on the command line. This script brings + together the facilities used in the other examples + to create a tool that is useful in the real world. + +imagegallery.sh Creates a gallery sorted by the timestamps of the + image files. This is a very simplistic example of + how you can combine kjscmd with shell scripts. + +example* thumb-* Example output from the image gallery script. + diff --git a/kjsembed/docs/examples/imageinfo/example.html b/kjsembed/docs/examples/imageinfo/example.html new file mode 100644 index 00000000..c5b5fd69 --- /dev/null +++ b/kjsembed/docs/examples/imageinfo/example.html @@ -0,0 +1,44 @@ +<html> +<head> +<title>Image Gallery</title> +</head> +<body> +<h1 align="center">Image Gallery</h1> +<hr> +<p>Here are some images, the larger ones have been scaled down to ensure this page loads quickly. Click on an image or filename to see it full size.</p> +<table border=0 width="90%" cellpadding="12" cellspacing="1"> +<tr> +<td align="center"><a href="example1.png"><img border=0 width=197 height=160 src=thumb-example1.png></a></td> +<td width="60%" valign="top" align="justify"><b><a href="example1.png">example1.png</a></b> (848x686)<p>This image shows the results of running the imagegallery script. As you can +see the script automatically creates thumbnails (using QImage::smoothScale() +for quality) and includes image descriptions if present. The descriptions can +include HTML markup <b>like</b> <i>this</i>, and even +<a href="http://xmelegance.org/kjsembed/">links</a>. + +</p> +</td> +</tr> +<tr> +<td align="center"><a href="example2.png"><img border=0 width=217 height=160 src=thumb-example2.png></a></td> +<td width="60%" valign="top" align="justify"><b><a href="example2.png">example2.png</a></b> (340x250)<p>This image shows +<a href="http://developer.kde.org/documentation/library/cvs-api/classref/kdeui/KPassivePopup.html">KPassivePopup</a> +telling a user they have new mail. The popup is adject to the source of the +message (in this example that is <a href="http://kmail.kde.org/">KMail</a>) and +<i>does not steal the focus</i>, or otherwise interfere with whatever the user is +currently doing. The dialog is automatically hidden after a timeout (or if the +user clicks on it). +</p> +</td> +</tr> +<tr> +<td align="center"><a href="example3.png"><img border=0 width=203 height=160 src=thumb-example3.png></a></td> +<td width="60%" valign="top" align="justify"><b><a href="example3.png">example3.png</a></b> (274x215)<p><i>No Description</i></p> +</td> +</tr> +<tr> +<td align="center"><a href="example4.png"><img border=0 width=158 height=160 src=thumb-example4.png></a></td> +<td width="60%" valign="top" align="justify"><b><a href="example4.png">example4.png</a></b> (560x567)<p><i>No Description</i></p> +</td> +</tr> +</table> +</body></html> diff --git a/kjsembed/docs/examples/imageinfo/example1.htm b/kjsembed/docs/examples/imageinfo/example1.htm new file mode 100644 index 00000000..b18ff23c --- /dev/null +++ b/kjsembed/docs/examples/imageinfo/example1.htm @@ -0,0 +1,6 @@ +This image shows the results of running the imagegallery script. As you can +see the script automatically creates thumbnails (using QImage::smoothScale() +for quality) and includes image descriptions if present. The descriptions can +include HTML markup <b>like</b> <i>this</i>, and even +<a href="http://xmelegance.org/kjsembed/">links</a>. + diff --git a/kjsembed/docs/examples/imageinfo/example1.png b/kjsembed/docs/examples/imageinfo/example1.png Binary files differnew file mode 100644 index 00000000..53408e63 --- /dev/null +++ b/kjsembed/docs/examples/imageinfo/example1.png diff --git a/kjsembed/docs/examples/imageinfo/example2.htm b/kjsembed/docs/examples/imageinfo/example2.htm new file mode 100644 index 00000000..651048b3 --- /dev/null +++ b/kjsembed/docs/examples/imageinfo/example2.htm @@ -0,0 +1,7 @@ +This image shows +<a href="http://developer.kde.org/documentation/library/cvs-api/classref/kdeui/KPassivePopup.html">KPassivePopup</a> +telling a user they have new mail. The popup is adject to the source of the +message (in this example that is <a href="http://kmail.kde.org/">KMail</a>) and +<i>does not steal the focus</i>, or otherwise interfere with whatever the user is +currently doing. The dialog is automatically hidden after a timeout (or if the +user clicks on it). diff --git a/kjsembed/docs/examples/imageinfo/example2.png b/kjsembed/docs/examples/imageinfo/example2.png Binary files differnew file mode 100644 index 00000000..902af717 --- /dev/null +++ b/kjsembed/docs/examples/imageinfo/example2.png diff --git a/kjsembed/docs/examples/imageinfo/example3.png b/kjsembed/docs/examples/imageinfo/example3.png Binary files differnew file mode 100644 index 00000000..c2b98665 --- /dev/null +++ b/kjsembed/docs/examples/imageinfo/example3.png diff --git a/kjsembed/docs/examples/imageinfo/example4.png b/kjsembed/docs/examples/imageinfo/example4.png Binary files differnew file mode 100644 index 00000000..9c2d9ae3 --- /dev/null +++ b/kjsembed/docs/examples/imageinfo/example4.png diff --git a/kjsembed/docs/examples/imageinfo/imagegallery.js b/kjsembed/docs/examples/imageinfo/imagegallery.js new file mode 100755 index 00000000..4cc5bc2d --- /dev/null +++ b/kjsembed/docs/examples/imageinfo/imagegallery.js @@ -0,0 +1,113 @@ +#!/usr/bin/env kjscmd + +// +// Script to create an image gallery for a set of images. +// + +var default_title = 'Image Gallery'; +var default_intro = 'Here are some images, the larger ones have been scaled down to ' + + 'ensure this page loads quickly. Click on an image or filename ' + + 'to see it full size.'; +var default_width = 250; +var default_height = 160; + +function write_header( title, intro ) +{ + println( '<html>' ); + println( '<head>' ); + println( '<title>'+title+'</title>' ); + println( '</head>' ); + println( '<body>' ); + println( '<h1 align="center">'+title+'</h1>' ); + println( '<hr>' ); + println( '<p>'+intro+'</p>' ); + println( '<table border=0 width="90%" cellpadding="12" cellspacing="1">' ); +} + +function write_footer() +{ + println( '</table>' ); + println( '</body></html>' ); +} + +function write_image( name, w, h, thumb, tw, th, desc ) +{ + println( '<tr>' ); + + print( '<td align="center">' ); + print( '<a href="'+name+'">' ); + print( '<img border=0 width='+tw+' height='+th+' src="'+thumb+'">' ); + print( '</a>' ); + println( '</td>' ); + + print( '<td width="60%" valign="top" align="justify">' ); + print( '<b><a href="'+name+'">'+name+'</a></b>'+' ('+w+'x'+h+')' ); +// println( '<hr>' ); + println( '<p>'+desc+'</p>' ); + println( '</td>' ); + + println( '</tr>' ); +} + +// Create a thumbnail and write the img tag. +function process_image( name, desc ) +{ + var img = new Image(); + img.load( name ); + if ( !img.isOk() ) { + warn( 'Failed to load image '+name); + return null; + } + + var w = img.width(); + var h = img.height(); + + if ( (w > default_width) || (h > default_height) ) { + img.smoothScaleMin( default_width, default_height ); + } + + var tw = img.width(); + var th = img.height(); + + var thumb = 'thumb-'+name; + img.save( thumb ); + + if ( !img.isOk() ) { + warn( 'Failed to save thumbnail '+thumb); + return null; + } + + write_image( name, w, h, thumb, tw, th, desc ); +} + +if ( application.args.length == 0 ) { + System.stderr.println( 'Usage:' ); + System.stderr.println( '\timagegallery imgfile ...' ); +} +else { + write_header( default_title, default_intro ); + + for ( var i = 0 ; i < application.args.length ; i++ ) { + var name = application.args[i]; + if ( name.match( /^thumb-/ ) ) { + // Ignore thumbnails + } + else { + + var desc_file = name.replace( /\.[^\.]+$/, '.htm' ); + var desc; + try { + desc = System.readFile( desc_file ); + } + catch(x) { + desc = '<i>No Description</i>'; + } + process_image( name, desc ); + } + } + + write_footer(); +} + + + diff --git a/kjsembed/docs/examples/imageinfo/imagegallery.sh b/kjsembed/docs/examples/imageinfo/imagegallery.sh new file mode 100755 index 00000000..cf3952c4 --- /dev/null +++ b/kjsembed/docs/examples/imageinfo/imagegallery.sh @@ -0,0 +1,8 @@ +#!/bin/sh + +# +# Uses imagegallery.js to create a thumbnail page where the newest +# images are shown first. +# + +./imagegallery.js `ls --color=never -1 -t $* | xargs echo -n` diff --git a/kjsembed/docs/examples/imageinfo/imageinfo.js b/kjsembed/docs/examples/imageinfo/imageinfo.js new file mode 100755 index 00000000..957b1a49 --- /dev/null +++ b/kjsembed/docs/examples/imageinfo/imageinfo.js @@ -0,0 +1,37 @@ +#!/usr/bin/env kjscmd + +// +// Script to load an image and report some info about it. +// + +function image_info( name ) +{ + var img = new Image(); + img.load( name ); + if ( !img.isOk() ) { + return null; + } + + return img.width()+' x '+img.height()+' x '+img.depth()+ '\t'+img.format(); +} + +if ( application.args.length == 0 ) { + System.err.println( 'Usage:' ); + System.err.println( '\timageinfo imgfile ...' ); +} +else { + for ( var i = 0 ; i < application.args.length ; i++ ) { + var prefix = ''; + if ( application.args.length > 1 ) { + prefix = application.args[i] + ':\t'; + } + + var msg = image_info( application.args[i] ); + if ( msg ) { + System.err.println( prefix + msg ); + } + } +} + + + diff --git a/kjsembed/docs/examples/imageinfo/imagescale.js b/kjsembed/docs/examples/imageinfo/imagescale.js new file mode 100755 index 00000000..51ead9b5 --- /dev/null +++ b/kjsembed/docs/examples/imageinfo/imagescale.js @@ -0,0 +1,28 @@ +#!/opt/kde3/bin/kjscmd + +// +// Load an image, scale it, and save it in the specified format. +// + +if ( application.args.length >= 3 ) { + var infile = application.args[0]; + var outfile = application.args[1]; + var scale = application.args[2]; + + var img = new Image(); + img.load( infile ); + if ( img.isOk() ) { + if ( application.args.length > 3 ) { + img.format = application.args[3]; + } + + img.smoothScale( img.width*(scale/100.0), img.height*(scale/100.0) ); + img.save( outfile ); + } +} +else { + System.out.println( 'Usage:' ); + System.err.println( '\timagescale imgfile outfile percent [format]' ); +} + + diff --git a/kjsembed/docs/examples/imageinfo/thumb-example1.png b/kjsembed/docs/examples/imageinfo/thumb-example1.png Binary files differnew file mode 100644 index 00000000..79eca5d7 --- /dev/null +++ b/kjsembed/docs/examples/imageinfo/thumb-example1.png diff --git a/kjsembed/docs/examples/imageinfo/thumb-example2.png b/kjsembed/docs/examples/imageinfo/thumb-example2.png Binary files differnew file mode 100644 index 00000000..f4c805e7 --- /dev/null +++ b/kjsembed/docs/examples/imageinfo/thumb-example2.png diff --git a/kjsembed/docs/examples/imageinfo/thumb-example3.png b/kjsembed/docs/examples/imageinfo/thumb-example3.png Binary files differnew file mode 100644 index 00000000..7a449b6c --- /dev/null +++ b/kjsembed/docs/examples/imageinfo/thumb-example3.png diff --git a/kjsembed/docs/examples/imageinfo/thumb-example4.png b/kjsembed/docs/examples/imageinfo/thumb-example4.png Binary files differnew file mode 100644 index 00000000..42fb6022 --- /dev/null +++ b/kjsembed/docs/examples/imageinfo/thumb-example4.png diff --git a/kjsembed/docs/examples/imageinfo/thumbs.html b/kjsembed/docs/examples/imageinfo/thumbs.html new file mode 100644 index 00000000..674dcfe5 --- /dev/null +++ b/kjsembed/docs/examples/imageinfo/thumbs.html @@ -0,0 +1,44 @@ +<html> +<head> +<title>Image Gallery</title> +</head> +<body> +<h1 align="center">Image Gallery</h1> +<hr> +<p>Here are some images, the larger ones have been scaled down to ensure this page loads quickly. Click on an image or filename to see it full size.</p> +<table border=0 width="90%" cellpadding="12" cellspacing="1"> +<tr> +<td align="center"><a href="example1.png"><img border=0 width=197 height=160 src="thumb-example1.png"></a></td> +<td width="60%" valign="top" align="justify"><b><a href="example1.png">example1.png</a></b> (848x686)<p>This image shows the results of running the imagegallery script. As you can +see the script automatically creates thumbnails (using QImage::smoothScale() +for quality) and includes image descriptions if present. The descriptions can +include HTML markup <b>like</b> <i>this</i>, and even +<a href="http://xmelegance.org/kjsembed/">links</a>. + +</p> +</td> +</tr> +<tr> +<td align="center"><a href="example2.png"><img border=0 width=217 height=160 src="thumb-example2.png"></a></td> +<td width="60%" valign="top" align="justify"><b><a href="example2.png">example2.png</a></b> (340x250)<p>This image shows +<a href="http://developer.kde.org/documentation/library/cvs-api/classref/kdeui/KPassivePopup.html">KPassivePopup</a> +telling a user they have new mail. The popup is adject to the source of the +message (in this example that is <a href="http://kmail.kde.org/">KMail</a>) and +<i>does not steal the focus</i>, or otherwise interfere with whatever the user is +currently doing. The dialog is automatically hidden after a timeout (or if the +user clicks on it). +</p> +</td> +</tr> +<tr> +<td align="center"><a href="example3.png"><img border=0 width=203 height=160 src="thumb-example3.png"></a></td> +<td width="60%" valign="top" align="justify"><b><a href="example3.png">example3.png</a></b> (274x215)<p><i>No Description</i></p> +</td> +</tr> +<tr> +<td align="center"><a href="example4.png"><img border=0 width=158 height=160 src="thumb-example4.png"></a></td> +<td width="60%" valign="top" align="justify"><b><a href="example4.png">example4.png</a></b> (560x567)<p><i>No Description</i></p> +</td> +</tr> +</table> +</body></html> |
