ImageKitWebPanWindow.htm

The PanWindow control is used in conjuction with the ImageKit control. The PanWindow control is a web server control that displays an entire image when only a portion of that image is displayed in the ImageKit control. Moving the view finder in the PanWindow control scrolls the image in the ImageKit control.

To scroll an image using the PanWindow control, click the control. The image in the ImageKit control will automatically be centered at the mouse click location. The view finder in the PanWindow control can now be moved with the mouse. By moving the view finder with the mouse, the image displayed within the ImageKit control is scrolled. To stop the scrolling action and release the view finder in the PanWindow, click the PanWindow control again. The view finder will be released by the mouse and scrolling stops.

The following section explains the major points to consider when using the PanWindow control.

Using the ImageKit.WPF.Web PanWindow control

The steps for using the PanWindow control are as follows:

1. Add the ImageKit and PanWindow controls to the toolbox

The ImageKit installer will automatically add the ImageKit and PanWindow controls to the toolbox. These controls can also be added to the toolbox manually using the following steps:

   1. Right click your mouse in the "Toolbox" and choose to "Add Tab".
   2. After naming the new tab, right click it and select "Choose Items"
   3. Click the "Browse" button and select "Newtone.ImageKit.WPF.Web.ImageKit.dll"
   4. Click the "OK" button

The WebForm ImageKit and PanWindow controls are now registered in the toolbox.

2. Place the ImageKit and PanWindow controls on your form

Using your mouse, drag the ImageKit control on to the WebForm. The ImageKit control will appear in the top left corner in its default size. Before changing the ImageKit control's size or location, set the control's position to absolute. Depending on your version of Visual Studio, the steps for doing this is slightly different. For more details, see the sections explaining the use of the ImageKit control in different versions of Visual Studio. To manually set the position of the ImageKit control to absolute, open the html source and in the ImageKit control's tag enter "position: absolute;" under the Style declaration.

<cc1:ImageKit ID="ImageKit1" runat="server" style="position: absolute;" />

After you have set the position to absolute, you will be able to set the size and location of the ImageKit control on your webform. Repeat the same process for the PanWindow control, setting the position to absolute, then setting the PanWindow control's location and the size. The html code gereated in your web page will look something like this...

<cc1:ImageKit ID="ImageKit1" runat="server" height="600px" width="600px" 
     style="position: absolute; left:20px; top:20px; height:600px; width:600px;" />

<cc1:PanWindow ID="PanWindow1" runat="server" height="120px" width="120px" 
     style="position: absolute; left:670px; top:20px; height:120px; width:120px;" />

IMPORTANT: Be sure that the height and width values of the ImageKit and PanWindow controls are written in older html format (i.e. height="600px" width="600px"). The ImageKit and PanWindow controls need access to these values to calculate the size and relationship between the image in the PanWindow and ImageKit controls.

3. Set the Http Handler

The ImageKit and PanWindow controls stream images to the browser where they are displayed. To enable streaming, you must set an http handler. There are two ways to do this. One way is to set the http handler in the web application's web.config file. The other way is to add the IkStream.ashx file to your web project.

Using the Web.Config File:

In VS2010 or earlier, open the web.config file and place the following code within the web.config file

<system.web>

     <httpHandlers>

          <add verb="*" path="IkStream.ashx" type="Newtone.ImageKit.Web.IkStream" />

     </httpHandlers>

</system.web>

For VS2012 or later, use this code in the web.config file

<system.webServer>

     <handlers>

          <add verb="*" path="IkStream.ashx" name="IkStream" type="Newtone.ImageKit.Web.IkStream" />

     </handlers>

</system.webServer>

Using the IkStream.ashx file:

Instead of adding the http handler code to web.config, you can add the http handler as a file. The ImageKit ships with an http handler file called IkStream.ashx. Simply copy this file to a directory within the scope of your web application then add it to your Visual Studio project. Do this by right clicking the Solution Explorer and choosing "Add" --> "Existing Item" and then browse to the IkStream.ashx file.

You can find the IkStream.ashx file in the folder called "System" under the directory where you installed the ImageKit.

4. Set the code to load and display the image.

Below is an example of code that streams a TIF file from the server to the client browser. The code is under the Page_Load event.

[Visual Basic]

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

    ImageKit1.Url = "abc.tif"

    ImageKit1.LoadImageFromFile()
    ImageKit1.ScrollBars = True

    ImageKit1.DisplayMode = Newtone.ImageKit.WPF.Web.DisplayMode.ActualSize
    ImageKit1.Display()
    ImageKit1.Link = PanWindow1.Link
    ImageKit1.ShowPanWindow()

End Sub

[C#]

private void Page_Load(object sender, System.EventArgs e)

{

    ImageKit1.Url="abc.tif";

    ImageKit1.LoadImageFromFile();
    ImageKit1.ScrollBars = true;

    ImageKit1.DisplayMode = Newtone.ImageKit.Web.DisplayMode.ActualSize;
    ImageKit1.Display();
    ImageKit1.Link = PanWindow1.Link;
    ImageKit1.ShowPanWindow();

}

Be sure that the image being loaded is within the scope of the web application. This means that the image must be in the web application's root folder or in a subfolder that is accessible by the web application. The path to the image is set in the ImageKit1.Url property. In the case above, because the image is in the root directory, the relative virtual path is just the file name of the image. Note: The Url property must be set with a virtual path within the scope of the web application. It cannot be set with a physical path. For more information, please refer to the Url property.

Make sure the ImageKit control's DispMode property is set to ActualSize display.

Set the ImageKit control's Link property to the PanWindow control's link property.

Execute the ImageKit control's ShowPanWindow method.

5. Add the JavaScript events to the html code so that the ImageKit and PanWindow controls can to work together in the client browser.

Add the JavaScript enablePanWindow function to the webpage. This JavaScript function registers the JavaScript events used by the PanWindow and ImageKit Controls. In this example, we added the enablePanWindow function to the <body> tag's onload event.

     </head>

          <body onload = "enablePanWindow('ImageKit1', 'PanWindow1');">

          <form id="form1" runat="server">

               <div>

                    <cc1:ImageKit ID="ImageKit1" runat="server" height="600px" width="600px" 
                         style="position: absolute; left:20px; top:20px; height:600px; width:600px;" />

                    <cc1:PanWindow ID="PanWindow1" runat="server" height="120px" width="120px" 
                         style="position: absolute; left:670px; top:20px; height:120px; width:120px;" />

               </div>

          </form>

     </body>

</html>

The enablePanWindow function accepts two parameters which are the html ids of the ImageKit and PanWindow controls respectively. To disable the ImageKit and PanWindow JavaScript events, execute the disablePanWindow function