XIO ® applets

XIOview V1.5 Image Zoom Applet - TRIAL VERSION - Example Implementations

Please consider to  license XIOview ». For more information about this applet visit  www.XIO.biz ».

GENERAL »
PARAMETERS »
DEMO 1 »
CODE 1 »
DEMO 2 »
CODE 2 »
DEMO 3 »
CODE 3 »
DEMO 4 »
CODE 4 »
DEMO 5 »
CODE 5 »

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.


Copyright © 2004-2005 by Martin Rieger, XIO® Software. XIO® is a registered trademark of Martin Rieger.
Java™ is a registered trademark of Sun Microsystems, Inc.. All other trademarks are properties of their respective owners.