Histogram and image graph applet (v1.0)

Centre for Computational Geography
University of Leeds

This Applet displays a greyscale image and a histogram of its values. Under the histogram is a scrollbar which allows you to highlight a proportion of the histogram. The equivalent areas on the image are highlighted symultaneously.

For an example see this webpage.

To use the applet, you'll need the archive file pyramidgraph1_0.jar, and at least one greyscale image file. The applet potentially takes three image files - the main image with greyscale data in it. This can be continuously graded, but can also be discrete categories. In addition the applet can take in a mask file, which should be black in the areas that are to be masked out and white elsewhere. The black areas aren't counted in the histogram, and show up as the applet's background colour. The final file is the overlay. This is for hiding non-highlighted areas, and also shows up as the data is loading. Essentially it's what the user sees first, and as areas are highlighted they shine through it with their original greyscale intensity, but highlighted with some colour. The files used for the example are ltill.gif for the main data, mask.gif for the mask and overlay.gif for the overlay.

Look at the source code of the example to see how to broadly set up the applet. The details are given for an applet set up with the archive, webpage and data files in the same directory.

The PARAM tags control the applet, and can be used as follows (default values given)...

Essential tags

<PARAM name="imageFile" value="">
The PARAM must be set to the name of a greyscale gif or jpeg.

<PARAM name="imageConversion" value="0">
This converts pixel greyscale values (0 to 255) into other values. For example, is value="2.5" the histogram will show a max value of 637.5 (255 * 2.5). As the histogram scrollbar is moved, the appropriate value is also displayed. It should be noted that only the range of pixel greyscales used will be used to create the histogram, not all the values between 0 and 255.

<PARAM name="imageHeight" value="">
This should be set to the image height in pixels.

<PARAM name="imageWidth" value="">
This should be set to the image width in pixels.

Additional tags

<PARAM name="overlayFile" value="">
The PARAM should be set to the name of a gif or jpeg. If present, this image will be shown in all the areas not selected by the scrollbar. i.e. The imageFile will shine through it at different levels depending on the scrollbar. If present this is also the image displayed as the applet loads. It is best, therefore, if any areas that will eventually be masked are the same colour as the applet background. In the absence of this file/PARAM, the whole of the imageFile will be shown, and the scrollbar will highlight areas rather than shining them through the overlayFile.

<PARAM name="imageMaskFile" value="">
This should be set to the name of a black and white gif or jpeg. The image should be the same size as the main image. Black areas will mask out information on the main image, i.e. they will not appear in the histogram totals, or be shown on the map. Instead, these areas will pick up the background colour of the applet. If the file/PARAM is absent nothing will appear.

<PARAM name="reverseFigures" value="false">
Reverses the figures given by the scrollbar to the maximum value minus the scrollbar position if needed.

<PARAM name="reverseGraph" value="false">
Reverses the graph if needed. This should probably be used with reverseFigures, depending on your data.

<PARAM name="barWidth" value="1">
This is the width of the bars on the histogram. The PARAM can be used to make the histogram look better filled, or to overlap the bars.

<PARAM name="imageShade" value="blue">
The should be set to either "red", "green", or "blue", depending on which colour you want the map shading. The shading will reflect the original brightness of the greyscale image, but with the appropriate colour tint.

<PARAM name="graphShade" value="">
The should be set to either "red", "green", or "blue", depending on which colour you want the histogram shading. The shading will reflect the original brightness of the greyscale histogram, but with the appropriate colour tint.

<PARAM name="background" value="#ffffff">
This sets the background colour for the applet. The value should be a hash symbol followed by a web hex colour. If the colour information is missing, the background is set to white.

This applet may be freely used by academic and non-profit, non-governmental organisations, as well as private individuals. Other organisations should contact the CCG for information on its use. The applet is offered "as is" and with no guarantees, but feel free to drop us a line if you find any problems or want some advice.

For further information about this applet and the source code, contact Dr Andy Evans.

[CCG homepage] [School of Geography homepage]