LEADTOOLS WebForms and AJAX Send comments on this topic. | Back to Introduction - All Topics | Help Version 17.0.3.22
Using the TiledImageViewer control on the client side.

Perform the following steps to create a project that uses the features of the LEADTOOLS TiledImageViewer Web Control on the client side:

  1. Start Visual Studio 2005.

  2. Choose File->New->Web Site… from the menu.

  3. In the New Web Site dialog box, choose "ASP.NET Web Site" in the Templates List, and choose either "Visual C#" or "Visual Basic" in the Language drop-down list box.

  4. In the Location drop-down list box choose "File System". In the Project Name field, enter “C:\Inetpub\wwwroot\UsingTiledImageViewer_Client”, and then click OK.

    If desired, type a new location for your project or select a directory by clicking Browse and browsing to the correct directory, and then click OK.

  5. Repeat the previous step except that in the Add Reference dialog box click the Browse tab, browse to the "C:\Program Files (x86)\LEAD Technologies\LEADTOOLS 17\Bin\DotNet\Win32" folder and select the following DLL:

    • Leadtools.Web.dll.

    Now click OK to close the Add Reference dialog box.

  6. In the Solution Explorer pane right-click on the "Default.aspx" file and choose the "View Designer" from the context menu.

  7. Go to the toolbox (View->Toolbox) and drag and drop an instance of the TiledImageViewer onto the web form. If you do not have the TiledImageViewer in your toolbox, select "Tools->Choose Toolbox Items..." from the menu. Click Browse and then select the "Leadtools.Web.dll" from the "C:\Program Files (x86)\LEAD Technologies\LEADTOOLS 17\Bin\DotNet\Win32" folder. Click Open and the OK.

  8. Go to the toolbox (View-Toolbox) and from the Standard tab drag and drop 5 Labels onto the web form, and from the HTML tab drag and drop 2 Input(Text), 4 Select, 1 Image and 2 Input(Button) controls onto the web form.

  9. Change the properties of the dropped controls as follows:

    Control Property New Value
    Label1 ID Text _lblImageUrl Image Url
    Text1 ID _tbImageUrl
    Button1 ID Value _btnViewImage View Image
    Label2 ID Text _lblSizeMode SizeMode
    Select1 ID _cmbSizeMode
    Label3 ID Text _lblScaleFactor ScaleFactor
    Select2 ID _cmbScaleFactor
    Label4 ID Text _lblHorizontalAlignMode HorizontalAlignMode
    Select3 ID _cmbHorizontalAlignMode
    Label5 ID Text _lblVerticalAlignMode VerticalAlignMode
    Select4 ID _cmbVerticalAlignMode
    Button2 ID Value _btnGetRealScaleFactors Get Real Scale Factors
    Text2 ID _tbRealScaleFactors
    Image1 ID _imgThumbnail
  10. Switch to the "Default.aspx" code view (right-click default.aspx in the Solution Explorer and then select View Code) and add the following lines to the beginning of the file:

    Visual Basic

                Imports System.Drawing
                Imports Leadtools.Web.Controls
                
                
    

    C#

                using System.Drawing
                using Leadtools.Web.Controls;
                
    
  11. Update the Page_Load event handler to be as follows:

    Visual Basic

                Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
                   If (Not IsPostBack) Then
                      ' Initialize the TiledImageViewer control.
                      TiledImageViewer1.ResourcesPath = "Resources"
                      ' Load the image using default load options.
                      TiledImageViewer1.InputProfile = string.Empty
                      ' Save and display the image on the webform using default save options.
                      TiledImageViewer1.OutputProfile = string.Empty
                      ' Display the scroll bars.
                      TiledImageViewer1.ScrollBarVisible = true
                      ' use classical scrollbars style.
                      TiledImageViewer1.ScrollBarStyle = TiledImageViewerScrollBarStyle.Classic
                      ' Reset the scrollbars position.
                      TiledImageViewer1.ScrollPosition = New Point(0, 0)
                      ' Set the TileWidth and TileHeight to 250 * 250
                      TiledImageViewer1.TileWidth= 250
                      TiledImageViewer1.TileHeight = 250
                   End If
                End Sub
                
    

    C#

                protected void Page_Load(object sender, EventArgs e)
                {
                   if(!IsPostBack)
                   {
                      // Initialize the ImageViewer control.
                      TiledImageViewer1.ResourcesPath = "Resources";
                      // Load the image using default load options.
                      TiledImageViewer1.InputProfile = string.Empty;
                      // Save and display the image on the webform using default save options.
                      TiledImageViewer1.OutputProfile = string.Empty;
                      //display the scroll bars.
                      TiledImageViewer1.ScrollBarVisible = true;
                      // using classical scrollbars style.
                      TiledImageViewer1.ScrollBarStyle = TiledImageViewerScrollBarStyle.Classic;
                      // Reset the scroll positions.
                      TiledImageViewer1.ScrollPosition = new Point(0, 0);
                      // Set the TileWidth and TileHeight to 250 * 250
                      TiledImageViewer1.TileWidth= 250;
                      TiledImageViewer1.TileHeight = 250;
                   }
                }
                
    
  12. Switch to "Default.aspx" view and search for _cmbSizeMode, _cmbScaleFactor, _cmbHorizontalAlignMode, _cmbVerticalAlignMode, _btnViewImage, and _btnGetRealScaleFactors controls then change them to be as follows:

                <input id="_btnViewImage" style="width: 146px; height: 22px" type="button" value="View Image" onclick="return _btnViewImage_onclick()" />
                
                <input id="_btnGetRealScaleFactors" type="button" value="Get Real Scale Factors" onclick="return _btnGetRealScaleFactors_onclick()" />
                
                <select id="_cmbSizeMode" style="width: 476px" onchange="OnChangeSizeMode(this.selectedIndex)">
                   <option selected="selected">Normal</option>
                   <option>Stretch</option>
                   <option>FitAlways</option>
                   <option>FitWidth</option>
                   <option>Fit</option>
                </select>
                
                <select id="_cmbScaleFactor" style="width: 476px" onchange="OnChangeScaleFactor(this.options[this.selectedIndex].text)">
                   <option>1000</option>
                   <option>800</option>
                   <option>600</option>
                   <option>400</option>
                   <option>200</option>
                   <option selected="selected">100</option>
                   <option>80</option>
                   <option>60</option>
                   <option>40</option>
                   <option>20</option>
                   <option>10</option>
                   <option>5</option>
                   <option>2</option>
                </select>
                
                <select id="_cmbHorizontalAlignMode" style="width: 476px" onchange="OnChangeHorizontalAlignMode(this.selectedIndex)">
                   <option selected="selected">Near</option>
                   <option>Center</option>
                   <option>Far</option>
                </select>
                
                <select id="_cmbVerticalAlignMode" style="width: 476px" onchange="OnChangeVerticalAlignMode(this.selectedIndex)">
                   <option selected="selected">Near</option>
                   <option>Center</option>
                   <option>Far</option>
                </select>
                
    
  13. Add the following JavaScript methods to the end of "Default.aspx" after the closing tag of form (</form>) and before the closing tag of body (</body>):

                <script type="text/javascript">
                   var iurl = document.getElementById("_tbImageUrl");
                   var tn = document.getElementById("_imgThumbnail");
                   var sf = document.getElementById("_cmbScaleFactor");
                   var rsf = document.getElementById("_tbRealScaleFactors");
                
                   function _btnViewImage_onclick() 
                   {
                      View();
                   }
                   
                   function OnChangeSizeMode(m)
                   {
                      TiledImageViewer1.SetSizeMode(m);
                      TiledImageViewer1.Apply();
                      sf.disabled = (m != 0);
                   }
                
                   function OnChangeScaleFactor(s)
                   {
                      TiledImageViewer1.SetScaleFactor(s);
                      TiledImageViewer1.Apply();
                   }
                
                   function OnChangeHorizontalAlignMode(am)
                   {
                      TiledImageViewer1.SetHorizontalAlignMode(am);
                      TiledImageViewer1.Apply();
                   }
                
                   function OnChangeVerticalAlignMode(am)
                   {
                      TiledImageViewer1.SetVerticalAlignMode(am);
                      TiledImageViewer1.Apply();
                   }
                
                   function View()
                   {
                     // display just a thumbnail of the image using ImageGenerator HttpHandler.
                     tn.src = "ImageGenerator.leadgen?url="+iurl.value+"&width=96&height=96&sizemode=FitAlways";
                     // display the full image in the TiledImageViewer control.
                     TiledImageViewer1.SetImageUrl(iurl.value);
                     TiledImageViewer1.Apply();
                   }
                   
                   function _btnGetRealScaleFactors_onclick() 
                   {
                      rsf.value = "Horizontal:" + TiledImageViewer1.GetHorizontalRealScaleFactor() + ", Vertical:" + TiledImageViewer1.GetVerticalRealScaleFactor();
                   }
                   </script>
                
    
  14. Your web.config file has to tell the server how to handle the Leadtools.Web.Handlers.ImageInformation and the Leadtools.Web.Handlers.ImageGenerator requests.

    Drilling down through the file's schema, you will need to add the httpHandlers section inside the <system.web> </system.web> tag (if it is not already there), so that it looks like the following:

                   <httpHandlers>
                      <add verb="*" path="*.leadinfo" type="Leadtools.Web.Handlers.ImageInformation, Leadtools.Web"/>
                      <add verb="*" path="*.leadgen" type="Leadtools.Web.Handlers.ImageGenerator, Leadtools.Web"/>
                   </httpHandlers>
                
    
  15. Also, you have to set up the IIS to handle the requests for ".leadinfo" and ".leadgen".

    In your Site's properties dialog, click the Home Directory tab and then click Configuration.

    In the Application Configuration dialog box that appears, click Add. When the Add/Edit Application Extension Mapping dialog appears, click the Browse button beside the Executable edit box and browse to the path of the dll "aspnet_isapi.dll" (you can find it in the "C:\Windows\Microsoft.NET\Framework\v2.0.50727" folder). Enter ".leadinfo" into the Extension edit box.

    Now click OK. Repeat the previous step, except add the extension ".leadgen". Click OK in each open dialog to close the three dialogs.

  16. Now, from the "C:\Program Files (x86)\LEAD Technologies\LEADTOOLS 17\Bin\DotNet\Win32" folder copy any filter codecs you want to work with to the project's Bin folder: Leadtools.Codecs.J2k, Leadtools.Codecs.Gif, Leadtools.Tif, and Leadtools.Codecs.Cmp, ...etc.

  17. Inside the project folder create a folder named "Resources" and copy all of the java script files and images found in the "C:\Program Files (x86)\LEAD Technologies\LEADTOOLS 17\Examples\DotNet\Resources\Web" folder to this new folder.

  18. Run the project and play with it as follows:

    1. Type a path to a supported format (gif, bmp, png, jpeg, tif, cmp, ...etc) in the ImageUrl TextBox.

    2. Click ViewImage to load the image into the TiledImageViewer control.

    3. Change the se;ectopms in the drop-down list boxes and notice the differences in the displayed image.