Changing Background Colors for Panes
Let's assume that you want to give the user quick instructions on how to use Image Uploader. It is quite difficult to explain to an untrained user what the folder pane is and what the upload pane is. To make it easier, you need to mark the panes of Image Uploader in some way, so that you could refer to them in your instructions.
The most obvious way for the user would be marking each pane with some color like on the screenshot below. In this case the instructions would look like these:
- Find a necessary folder in the red pane.
- Select necessary files in the green pane.
- Drag them to the blue pane.
To color the panes just add the corresponding properties when initializing Image Uploader object as in the code sample below.
<script type="text/javascript" src="iuembed.js"> </script>
<script type="text/javascript">
var iu = new ImageUploaderWriter("ImageUploader", 770, 500);
// ...Other params...
iu.addParam("TreePaneBackgroundColor", "#FF1493");
iu.addParam("FolderPaneBackgroundColor", "#90EE90");
iu.addParam("UploadPaneBackgroundColor", "#ADD8E6");
// ...Other params...
iu.writeHtml();
</script>
Color values should be provided either as HTML color codes (hex values), or as names ("white," "red," and so on).
You may also add extra borders around panes as on the screenshot above. The idea is extremely simple. Just put Image Uploader into a table and wrap it with cells of necessary colors. The only problem is to synchronize cell widths and heights when the panes are resized after moving splitters. To handle it correctly you can use the PaneResize event of Image Uploader. Add the event handler, which recalculates cell sizes and applies necessary changes. The completed listing may look as follows.
<html>
<head>
<script type="text/javascript" src="iuembed.js"> </script>
<title>Aurigma Image Uploader</title>
<style type="text/css">
.color1{
background-color:#FF3300;
}
.color2{
background-color:#67CB33;
}
.color3{
background-color:#0082D6;
}
.colorSeparator{
background-color:gray;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" width="790" ID="Table1">
<tr>
<td class="color1" width="10" height="10">
<img src="Images/spacer.gif" width="10" height="10">
</td>
<td class="color1">
<img src="Images/spacer.gif" width="220" height="10" id="ImgHor1">
</td>
<td class="colorSeparator" width="6" height="10">
<img src="Images/spacer.gif" width="6" height="10">
</td>
<td class="color2">
<img src="Images/spacer.gif" width="546" height="10" id="ImgHor2">
</td>
<td class="color2" width="10" height="10">
<img src="Images/spacer.gif" width="10" height="10">
</td>
</tr>
<tr>
<td class="color1">
<img src="Images/spacer.gif" width="10" height="10">
</td>
<td colspan="3">
<script type="text/javascript">
//Resize frame element on pane resize
function ImageUploader_PaneResize() {
document.getElementById("ImgHor1").width =
getImageUploader("ImageUploader").getTreePaneWidth();
document.getElementById("ImgHor2").width = getImageUploader("ImageUploader").width -
getImageUploader("ImageUploader").getTreePaneWidth() - 6;
document.getElementById("ImgVer1").height =
getImageUploader("ImageUploader").getFolderPaneHeight();
}
var iu = new ImageUploaderWriter("ImageUploader", 770, 500);
iu.addParam("Layout", "ThreePanes");
iu.addParam("FolderView", "Thumbnails");
iu.addParam("UploadView", "Thumbnails");
iu.addParam("UploadThumbnail1FitMode", "fit");
iu.addParam("UploadThumbnail1Width", "120");
iu.addParam("UploadThumbnail1Height", "120");
iu.addParam("UploadThumbnail1JpegQuality", "60");
iu.addParam("BackgroundColor", "#FFFFFF");
iu.addParam("TreePaneBackgroundColor", "#FF1493");
iu.addParam("FolderPaneBackgroundColor", "#90EE90");
iu.addParam("UploadPaneBackgroundColor", "#ADD8E6");
iu.addParam("ShowStatusPane", "false");
iu.addParam("ShowDebugWindow", "true");
iu.addParam("Action", "Default.asp");
iu.addParam("RedirectUrl", "PictureGallery.asp");
iu.addParam("TreePaneWidth", "220");
iu.addEventListener("PaneResize", "ImageUploader_PaneResize");
iu.writeHtml();
</script>
</td>
<td class="color3" valign="top">
<table cellpadding="0" cellspacing="0" border="0" width="10" ID="Table2">
<tr>
<td class="color2" width="10">
<img src="Images/spacer.gif" width="10" height="300" id="ImgVer1">
</td>
</tr>
<tr>
<td class="colorSeparator" width="10" height="6">
<img src="Images/spacer.gif" width="10" height="6">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="color1" width="10" height="10">
<img src="Images/spacer.gif" width="10" height="10">
</td>
<td class="color1">
<img src="Images/spacer.gif" width="10" height="10">
</td>
<td class="colorSeparator" width="6" height="10">
<img src="Images/spacer.gif" width="6" height="10">
</td>
<td class="color3">
<img src="Images/spacer.gif" width="10" height="10">
</td>
<td class="color3" width="10" height="10">
<img src="Images/spacer.gif" width="10" height="10">
</td>
</tr>
</table>
</body>
</html>