Code for Demonstration 4
Code for image loading and the used RGB control interface.
This page shows how to load new images during the applet's runtime and illustrates the implementation of the
JavaScript-RGB interface used in demonstration 4.
Applet code:
<applet code="biz.xio.XIOview" archive="CODE/XIOview.jar" codebase="../" name="applet1"
width="200px" height="200px" alt="XIOview 1.5 Java Applet (requires a Java-enabled browser)">
<param name="cabbase" value="CODE/XIOview.cab">
<param name="license_key" value="ENTER YOUR LICENSE KEY HERE">
<param name="image" value="images/flower1.jpg">
<param name="zoom" value="75%">
<param name="zoom_range" value="50%-200%">
<param name="zoom_area_width" value="65%">
<param name="zoom_area_height" value="50%">
<param name="zoom_permanent" value="true">
<param name="zoom_selection" value="false">
<!-- Text below is shown if Java is not currently supported or activated. -->
<p>
The interactive content of this page requires a Java-enabled
browser.<br>
Please check your browser's settings and activate Java.<br>
If your browser has no built in Java plug-in you can obtain one at
<a href="http://www.java.com">www.java.com</a>.
</p>
</applet>
Additionally used applet-parameters:
- "zoom_selection": Sets, if the selection-marker for the to-be-zoomed-image-area will be
displayed. Here it is turned off.
JavaScript code for image loading:
<!-- more html code -->
<p class="txt" style="text-align:center">
<a class="control" href="JavaScript:document.applet1.setCfg('image=images/flower1.jpg')">flower1</a>
<a class="control" href="JavaScript:document.applet1.setCfg('image=images/flower2.jpg')">flower2</a>
<a class="control" href="JavaScript:document.applet1.setCfg('image=images/flower3.jpg')">flower3</a>
</p>
<!-- more html code -->
For loading new images again a JavaScript-call of XIOview's "setCfg(...)" or
"setConfiguration(...)"-method is used, specifying a correct relative image path.
JavaScript code for RGB-channel controls:
The following code is a bit more complicated. Consider it as one possibility for implementing a
certain type of user interface.
As mentioned earlier, the JavaScript-interface of XIOview gives you total freedom to design and
implement your own application-optimized user interface.
<!-- more html code -->
<head>
<!-- more html code -->
<script type="text/javascript">
<!--
function increment(input_object){
var incremented_value = parseInt(input_object.value) + 10;
if (incremented_value > 200){
incremented_value = 200;
}
input_object.value = incremented_value;
document.applet1.setCfg("image_rgb =" + document.script_control.input_red.value + "," + document.script_control.input_green.value + "," + document.script_control.input_blue.value);
document.applet1.setCfg("zoom_rgb =" + document.script_control.input_red.value + "," + document.script_control.input_green.value + "," + document.script_control.input_blue.value);
}
function decrement(input_object){
var incremented_value = parseInt(input_object.value) - 10;
if (incremented_value < 0){
incremented_value = 0;
}
input_object.value = incremented_value;
document.applet1.setCfg("image_rgb =" + document.script_control.input_red.value + "," + document.script_control.input_green.value + "," + document.script_control.input_blue.value);
document.applet1.setCfg("zoom_rgb =" + document.script_control.input_red.value + "," + document.script_control.input_green.value + "," + document.script_control.input_blue.value);
}
function setDefault(input_object, default_value){
input_object.value = default_value;
document.applet1.setCfg("image_rgb =" + document.script_control.input_red.value + "," + document.script_control.input_green.value + "," + document.script_control.input_blue.value);
document.applet1.setCfg("zoom_rgb =" + document.script_control.input_red.value + "," + document.script_control.input_green.value + "," + document.script_control.input_blue.value);
}
-->
</script>
<!-- more html code -->
</head>
<!-- even more html code -->
<form name="script_control" action="">
<!-- more html code -->
<p class="txt" style="text-align:center">
<a class="control" href="JavaScript:decrement(document.script_control.input_red)"> - </a>
<a class="control" href="JavaScript:increment(document.script_control.input_red)"> + </a>
<input type="text" name="input_red" width="20" value="100" size="3" maxlength="3" readonly="readonly" />%
<a class="control" href="JavaScript:setDefault(document.script_control.input_red, 100)">default</a>
</p>
<!-- more html code -->
<!-- ADD GREEN AND BLUE CHANNEL CONTROLS HERE -->
</form>
<!-- more html code -->
The preceding code fragment shows parts of the JavaScript RGB-control interface used in the example.
It basically consists of two parts:
(1) JavaScript-methods defined inside the <head>-tags of the HTML-document
(2) JavaScript-links which call these methods and an input-field inside <form>-tags,
which contains the current percentage-value for one RGB-channel
If the visible "+", "-", or "default" JavaScript-link is clicked the
previously defined JavaScript-methods ("increment(...)", "decrement(...)", and
"setDefault(...)") will be called. These methods receive the full object-name of the
input-field to which the clicked link is associated to.
In turn, these methods will modify (increment, decrement, ...) the value in this input-field and then
call XIOview's setCfg(...)-method using the current values from all input-fields
(for red, green and blue channel) as new parameter-assignments.
Note that the <form>-tag and the <input />-tag contains a "name"-attribute.
The values assigned there are needed for object-referencing. Identical references are marked
with the same color.
|