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 5

Gamma / inversion filtering and examples for instant multi-parameter-modification.



Applet code:

<applet code="biz.xio.XIOview" archive="CODE/XIOview.jar" codebase="../" name="applet1" width="220px" height="240px" 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/bridge.jpg">

<param name="zoom_range"            value="50%-200%">
<param name="zoom_area_width"       value="100px">
<param name="zoom_area_height"      value="60%">
<param name="zoom_inverted"         value="true">

<param name="filename_show"         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_inverted": Switches inversion settings for the zoomed image area (here activated).

- "filename_show": In this example showing the image filename during the loading process was disabled.




JavaScript code for gamma correction and inversion-controls:

<!-- more html code -->

<p class="txt" style="text-align:center">

<b>-</b>

  <a class="control" href="JavaScript:document.applet1.setCfg('image_gamma=0.4 + zoom_gamma=0.4')">X</a>

  <a class="control" href="JavaScript:document.applet1.setCfg('image_gamma=0.5 + zoom_gamma=0.5')">X</a>

  <a class="control" href="JavaScript:document.applet1.setCfg('image_gamma=0.6 + zoom_gamma=0.6')">X</a>

  <a class="control" href="JavaScript:document.applet1.setCfg('image_gamma=0.8 + zoom_gamma=0.8')">X</a>

  <a class="control" href="JavaScript:document.applet1.setCfg('image_gamma=1.0 + zoom_gamma=1.0')"><b>1.0</b></a>

  <a class="control" href="JavaScript:document.applet1.setCfg('image_gamma=1.5 + zoom_gamma=1.5')">X</a>

  <a class="control" href="JavaScript:document.applet1.setCfg('image_gamma=2.0 + zoom_gamma=2.0')">X</a>

  <a class="control" href="JavaScript:document.applet1.setCfg('image_gamma=3.0 + zoom_gamma=3.0')">X</a>

  <a class="control" href="JavaScript:document.applet1.setCfg('image_gamma=4.0 + zoom_gamma=4.0')">X</a>

<b>+</b>

</p>


<!-- more html code -->


<p class="txt" style="text-align:center">

  <a class="control" href="JavaScript:document.applet1.setCfg('image_inverted=false + zoom_inverted=true')"><b>zoom</b></a>

  <a class="control" href="JavaScript:document.applet1.setCfg('image_inverted=true + zoom_inverted=false')">image</a>

  <a class="control" href="JavaScript:document.applet1.setCfg('image_inverted=true + zoom_inverted=true')">both</a>

  <a class="control" href="JavaScript:document.applet1.setCfg('image_inverted=false + zoom_inverted=false')">none</a>

</p>

<!-- more html code -->

The text-links shown here are used to implement the gamma-correction and inversion-filtering controls in demonstration #5. Coding is quite analogous to example #3: After mouse-clicking on one of the links, the "setCfg(...)"-method of the XIOview applet is called with the new parameter-assignments in brackets.



JavaScript code for multi-parameter-modification:

<!-- more html code -->

<p class="txt" style="text-align:center">

  <a class="control" href="JavaScript:document.applet1.setCfg('image = images/grafitti.jpg + zoom=50% + image_inverted=false + zoom_inverted=false + image_grayscale=true + zoom_area_width=125px + zoom_area_height=125px')"><b>&raquo;</b></a>

</p>

<!-- more html code -->

<p class="txt" style="text-align:center">

  <a class="control" href="JavaScript:document.applet1.setCfg('background_color=255,120,0 + image_rgb=100%,0%,0% + image_grayscale=false + image_gamma=0.3 + zoom_rgb=0%,200%,100%')"><b>&raquo;</b></a>

</p>

<!-- more html code -->

<p class="txt" style="text-align:center">

  <a class="control" href="JavaScript:document.applet1.setCfg('image=images/bridge.jpg + zoom=100% + zoom_range=100%-200% + image_inverted=false + zoom_inverted=true + image_grayscale=false + zoom_area_width=100px + zoom_area_height=60% + background_color=128,128,128 + image_rgb=100%,100%,100% + zoom_rgb=100%,100%,100% + image_gamma=1.0')"><b>&raquo;</b></a>

</p>

<!-- more html code -->

These three JavaScript-links illustrate the possibility to change any number / combination of parameters at the same time with just one call of the "setCfg(...)" or "setConfiguration(...)"-method.
This can be very useful: For example you can load new images instantly with an image-specific configuration (e.g. image filters) as shown by the first implemented link.


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.