CodeCarvings Piczard V1.2 Help
InlinePictureTrimmer - Client-side events
Send Feedback
Piczard Fundamentals - Web > PictureTrimmer > InlinePictureTrimmer > InlinePictureTrimmer - Client-side events

Glossary Item Box

CONTENTS

  1. The ControlLoad event handler
  2. The UserStateChanged event handler

Please see:

  • The Example A.313 - "Web - PictureTrimmer / InlinePictureTrimmer - Client side events"
  • The Example A.406 - "Customize Piczard / Real time crop preview"

 

 

1. The ControlLoad event handler

The ControlLoad client-side event is raised when the control GUI loads (or unloads) an image.
Tipically this happens when the webpage is loaded and the PictureTrimmer UI is initialized.

The event is also raised when an image is loaded or un-loaded on the client side (by using the control.load method or the control.unloadImage method). Please see the Example A.307 "Web - PictureTrimmer / Client side load, unload and save images"

In order to use this client-side event handler you have to write a named javascript function.
Then you have to set the property OnClientControlLoadFunction of the PictureTrimmer control to the name of the javascript function.

The OnClientControlLoadFunction property must contain only the name of a javascript function.

Two parameters are passed to the javascript function:

  1. sender - A reference to the client-side PictureTrimmer object that has raised the event
  2. args (currently unused)
ControlLoad client-side event handler example Copy Code
<script type="text/javascript">
   
//<![CDATA[

   
function InlinePictureTrimmer1_onControlLoad(sender, args)
   {
       
alert("Control loaded (image loaded=" + sender.get_imageLoaded() + ").");
   }

   
//]]>
</script>

<
ccPiczard:InlinePictureTrimmer ID="InlinePictureTrimmer1" runat="server"
   
OnClientControlLoadFunction="InlinePictureTrimmer1_onControlLoad" />

 

 

2. The UserStateChanged event handler

The UserStateChanged client-side event is raised when the state of the PictureTrimmer controls has changed.

In order to use this client-side event handler you have to write a named javascript function.
Then you have to set the property OnClientUserStateChangedFunction of the PictureTrimmer control to the name of the javascript function.

The OnClientUserStateChangedFunction property must contain only the name of a javascript function.

Two parameters are passed to the javascript function:

  1. sender - A reference to the client-side PictureTrimmer object that has raised the event
  2. args (currently unused)

You can use the client-side get_userState method to obtain the new state of the control.

UserStateChanged client-side event handler example Copy Code
<script type="text/javascript">
   
//<![CDATA[

   function InlinePictureTrimmer1_onUserStateChanged(sender, args)
   {
       var
str = "";

       
// Get the UserState
       var
userState = sender.get_userState();

       
// Get the Value
       var
value = userState.value;

       
// Get the ImageSelection
       var
imageSelection = value.imageSelection;

       
// Get the ImageTransformation
       var
imageTransformation = imageSelection.transformation
       str +=
"Resize factor:" + imageTransformation.resizeFactor + "%\r\n";
       str +=
"Rotation angle:" + imageTransformation.rotationAngle + "°\r\n";
       str +=
"Flip horizontal:" + (imageTransformation.flipH ? "yes" : "no") + "\r\n";
       str +=
"Flip vertical:" + (imageTransformation.flipV ? "yes" : "no") + "\r\n";

       
// Get the ImageCrop
       var
imageCrop = imageSelection.crop
       str +=
"Rectangle:" + (imageCrop.rectangle != null ? ("{x=" + imageCrop.rectangle.x + ",y=" + imageCrop.rectangle.y + ",width=" + imageCrop.rectangle.width + ",height=" + imageCrop.rectangle.height + "}") : "auto") + "\r\n";

       
// Get the ImageAdjustments Filter
       var
imageAdjustments = value.imageAdjustments;
       str +=
"Brightness:" + imageAdjustments.brightness + "\r\n";
       str +=
"Contrast:" + imageAdjustments.contrast + "\r\n";
       str +=
"Hue:" + imageAdjustments.hue + "°\r\n";
       str +=
"Saturation:" + imageAdjustments.saturation + "\r\n";

       
// Get the UIParams
       var
uiParams = userState.uiParams;
       str +=
"Zoom factor:" + (uiParams.zoomFactor != null ? uiParams.zoomFactor + "%" : "auto") + "\r\n";
       str +=
"Picture scroll horizontal:" + (uiParams.pictureScrollH != null ? uiParams.pictureScrollH : "auto") + "\r\n";
       str +=
"Picture scroll vertical:" + (uiParams.pictureScrollV != null ? uiParams.pictureScrollV : "auto") + "\r\n";
       str +=
"Command panel scroll vertical:" + uiParams.commandPanelScrollV + "\r\n";
 
       
// Display the current state
       alert(str);
   }

   
//]]>
</
script>

<
ccPiczard:InlinePictureTrimmer runat="server" ID="InlinePictureTrimmer1"
   
OnClientUserStateChangedFunction="InlinePictureTrimmer1_onUserStateChanged" />

Please see also the Example A.304 - "Web - PictureTrimmer / UserState & PictureTrimmer Value"

©2013 Sergio Turolla. All Rights Reserved.