Image Manager for Image Gallery

Introduction

Many image gallery-type web applications provide features to change image attributes to view image with different attributes; for example, the user can rotate, zoom, change grayscale, or mirror image or increase/decrease opacity, and so forth. I have developed this smart custom control that lets you do all these operations by selecting image attributes from a context menu.

Background

While looking at Silverlite's controls for animation, this idea came to mind. The control uses Microsoft filters. These filters are IE specific.

Using the Code

The complete code and assemblies are attached. One can download ImageControl.dll and add references to their project. Once you put the control on your page, you can assign various properties to control the attribute set in the context menu. Following are the properties exposed.

  • ImageUrl
  • ShowRotateLeft
  • ShowRotateRight
  • ShowGrayScale
  • ShowMirror
  • ShowOpaccity
  • ShowInvert
  • ShowZoomIn
  • ShowZoomOut
  • LeftRotateImage
  • RightRotateImage
  • ZoomInImage
  • ZoomOutImage
  • ImageHeight
  • ImageWidth
  • ContextMenuTableClass
  • ContextMenuMouseOverClass
  • ContextMenuMouseOutClass
public class ImageManager : WebControl
{
   #region Private members
      private bool _ShowRotateLeft;
      private bool _ShowRotateRight;
      private bool _ShowGrayScale;
      private bool _ShowMirror;
      private bool _ShowInvert;
      private bool _ShowOpaccity;
      private bool _ShowZoomIn;
      private bool _ShowZoomOut;
      private string _ImageUrl    = "~/M4.jpg";
      private int _ImageHeight    ;
      private int _ImageWidth     ;
      private int _BorderWidth = 1;
      private string _LeftRotateImage;
      private string _RightRotateImage;
      private string _ZoomInImage;
      private string _ZoomOutImage;
      private string _ContextmenuDivID ;

      private string _ContextMenuTableClass = "tabContext";
      private string _ContextMenuMouseOverClass = "Mover";
      private string _ContextMenuMouseOutClass  = "MOut";
      private string _ImageClientID;
   #endregion

   #region Properties
   [Category("Data"),
    DefaultValue(true),
    Description("Image Url")]
   public string ImageUrl
   {
      get { return _ImageUrl; }
      set { _ImageUrl = value; }
   }
   //[Category("Data"),
   // DefaultValue(true),
   // Description("Image Border")]
   //public int BorderWidth
   //{
   //   get { return _BorderWidth; }
   //   set { _BorderWidth = value; }
   //}

   [Category("Contextmenu"),
    DefaultValue(true),
    Description("Show LeftRotate")]
   public bool ShowRotateLeft
   {
      get { return _ShowRotateLeft; }
      set { _ShowRotateLeft = value; }
   }

   [Category("Contextmenu"),
    DefaultValue(true),
    Description("Show Show Rotate Right")]
   public bool ShowRotateRight
   {
      get { return _ShowRotateRight; }
      set { _ShowRotateRight = value; }
   }

   [Category("Contextmenu"),
    DefaultValue(true),
    Description("Show Show GrayScale")]
   public bool ShowGrayScale
   {
      get { return _ShowGrayScale; }
      set { _ShowGrayScale = value; }
   }

   [Category("Contextmenu"),
    DefaultValue(true),
    Description("Show Show Mirror")]
   public bool ShowMirror
   {
      get { return _ShowMirror; }
      set { _ShowMirror = value; }
   }

   [Category("Contextmenu"),
    DefaultValue(true),
    Description("Show Show Opaccity")]
   public bool ShowOpaccity
   {
      get { return _ShowOpaccity; }
      set { _ShowOpaccity = value; }
   }

   [Category("Contextmenu"),
    DefaultValue(true),
    Description("Show Show Invert")]
   public bool ShowInvert
   {
      get { return _ShowInvert; }
      set { _ShowInvert = value; }
   }

   [Category("Contextmenu"),
    DefaultValue(true),
    Description("Show Show ZoomIn")]
   public bool ShowZoomIn
   {
      get { return _ShowZoomIn; }
      set { _ShowZoomIn = value; }
   }

   [Category("Contextmenu"),
    DefaultValue(true),
    Description("Show Show ZoomOut")]
   public bool ShowZoomOut
   {
      get { return _ShowZoomOut; }
      set { _ShowZoomOut = value; }
   }

   [Category("Contextmenu"),
    DefaultValue(true),
    Description("Left Rotate Image path")]
   public string LeftRotateImage
   {
      get { return _LeftRotateImage; }
      set { _LeftRotateImage = value; }
   }

   [Category("Contextmenu"),
    DefaultValue(true),
    Description("Right Rotate Image path")]
   public string RightRotateImage
   {
      get { return _RightRotateImage; }
      set { _RightRotateImage = value; }
}

   [Category("Contextmenu"),
    DefaultValue(true),
    Description("ZoomIn Image path")]
   public string ZoomInImage
   {
      get { return _ZoomInImage; }
      set { _ZoomInImage = value; }
   }

   [Category("Contextmenu"),
    DefaultValue(true),
    Description("ZoomOut Image path")]
   public string ZoomOutImage
   {
      get { return _ZoomOutImage; }
      set { _ZoomOutImage = value; }
   }

   [Category("Contextmenu"),
    DefaultValue(true),
    Description("Image Height")]
   public int ImageHeight
   {
      get { return _ImageHeight; }
      set { _ImageHeight = value; }
   }

   [Category("Contextmenu"),
    DefaultValue(true),
    Description("Image Width")]
   public int ImageWidth
   {
      get { return _ImageWidth; }
      set { _ImageWidth = value; }
   }

   [Category("Contextmenu"),
    DefaultValue(true),
    Description("ContextMenu Table Css Class")]
   public string ContextMenuTableClass
   {
      get { return _ContextMenuTableClass; }
      set { _ContextMenuTableClass = value; }
   }

   [Category("Contextmenu"),
    DefaultValue(true),
    Description("ContextMenu Mouse Over Css Class")]
   public string ContextMenuMouseOverClass
   {
      get { return _ContextMenuMouseOverClass; }
      set { _ContextMenuMouseOverClass = value; }
   }

   [Category("Contextmenu"),
    DefaultValue(true),
    Description("ContextMenu Mouse Out Css Class")]
   public string ContextMenuMouseOutClass
   {
      get { return _ContextMenuMouseOutClass; }
      set { _ContextMenuMouseOutClass = value; }
   }
   #endregion

   #region On Init
   protected override void OnInit(EventArgs e)
      {
         _ContextmenuDivID = this.UniqueID+"_ContexuMenuDiv";
         base.OnInit(e);
   #endregion

   #region Render Method
   protected override void Render(HtmlTextWriter writer)
      {
         writer.WriteLine("<div style=\"position:absolute;
            z-index:500; display:'none';\" id='" +
            _ContextmenuDivID + "'
            onclick=\"this.style.display='none';\">");
         /*start writing Context Menu table */
         writer.WriteLine("<table class='"+
            _ContextMenuTableClass+"'>");
         if(_ShowRotateLeft)
            writer.WriteLine("<TR>
               <TD ONMOUSEOVER=\"this.className='Mover'\"
                   ONMOUSEOUT=\"className='MOut'\"
                   onclick=\"RotateLeft('"+this.ClientID+"
                                        _filterDIV');\">
            Rotate Left</TD></TR>");

         if (_ShowRotateRight)
            writer.WriteLine("<TR>
               <TD ONMOUSEOVER=\"this.className='Mover'\"
                   ONMOUSEOUT=\"className='MOut'\"
                   onclick=\"RotateRight('" + this.ClientID + "
                                         _filterDIV');\">
            Rotate Right</TD></TR>");
         if(_ShowGrayScale)
            writer.WriteLine("<TR>
               <TD ONMOUSEOVER=\"this.className='Mover'\"
                   ONMOUSEOUT=\"className='MOut'\"
                   onclick=\"ChangeScale('grayscale','" +
                      this.ClientID + "_filterDIV');\">
            GrayScale</TD></TR>");
         if (_ShowInvert)
            writer.WriteLine("<TR>
               <TD ONMOUSEOVER=\"this.className='Mover'\"
                   ONMOUSEOUT=\"className='MOut'\"
                   onclick=\"ChangeScale('invert','" +
                      this.ClientID + "_filterDIV');\">
            Invert</TD></TR>");
         if (_ShowMirror)
            writer.WriteLine("<TR>
               <TD ONMOUSEOVER=\"this.className='Mover'\"
                   ONMOUSEOUT=\"className='MOut'\"
                   onclick=\"ChangeScale('mirror','" +
                      this.ClientID + "_filterDIV');\">
            Mirror</TD></TR>");

         if (_ShowOpaccity)
         {
            writer.WriteLine("<TR>
               <TD ONMOUSEOVER=\"this.className='Mover'\"
                   ONMOUSEOUT=\"className='MOut'\"
                   onclick=\"Opac(1,'" + this.ClientID + "
                      _filterDIV');\">
               Increase Opacity</TD></TR>");
            writer.WriteLine("<TR>
               <TD ONMOUSEOVER=\"this.className='Mover'\"
                   ONMOUSEOUT=\"className='MOut'\"
                   onclick=\"Opac(2,'" + this.ClientID + "
                      _filterDIV');\">
            Decrease Opacity</TD></TR>");
         }

         if (_ShowZoomIn)
            writer.WriteLine("<TR>
               <TD ONMOUSEOVER=\"this.className='Mover'\"
                   ONMOUSEOUT=\"className='MOut'\"
                   onclick=\"ZoomIn('" + _ImageClientID + "');\">
            Zoom In</TD></TR>");

         if (_ShowZoomOut)
            writer.WriteLine("<TR>
               <TD ONMOUSEOVER=\"this.className='Mover'\"
                   ONMOUSEOUT=\"className='MOut'\"
                   onclick=\"ZoomOut('" + _ImageClientID + "');\">
            Zoom Out</TD></TR>");



            writer.WriteLine("</table>");
            /*End writing Context Menu table */
            writer.WriteLine("</div>");
            base.Render(writer);
      }
      #endregion

      #region CreateChildControls
      protected override void CreateChildControls()
      {
         Controls.Clear();
         HtmlGenericControl ogen = new HtmlGenericControl();
         ogen.ID = this.ClientID + "_filterDIV";
         ogen.Attributes.Add("style", "position:relative; width:" +
            _ImageWidth + "; height:" + _ImageHeight + ";
            background:gold; padding:2px; border:1px solid black;
            filter:progid:DXImageTransform.Microsoft.gradient(
               startColorstr='BLACK',endColorstr='yellowgreen'),
            progid:DXImageTransform.Microsoft.BasicImage(
               Rotation=0,Mirror=0,Invert=0,XRay=0,Grayscale=0,
               Opacity=1.00,Mask=0), ;");
         System.Web.UI.WebControls.Image oImage =
            new System.Web.UI.WebControls.Image();
         oImage.ID = "filterImage";
         oImage.AlternateText = "";
         if ( Height !=0)
            oImage.Height = Height;
         if (Width != 0)
            oImage.Width = Width;
         oImage.ImageUrl = _ImageUrl;
         _ImageClientID = oImage.ClientID;
         ogen.Controls.Add(oImage);
         this.Controls.Add(ogen);



         string strScripr = "<script type='text/javascript'
            language='javascript'>
            document.all('" + oImage.ClientID + "').oncontextmenu =
            function() { dopopup(event.x,event.y,'"+
            _ContextmenuDivID+"');return false; } </script>";
         this.Page.ClientScript.RegisterStartupScript(
            typeof(string),"RefisterEvent",strScripr);
         base.CreateChildControls();
      }
      #endregion

      #region Prerender
      protected override void OnPreRender(EventArgs e)
      {
         /*Add JS */
         string scriptUrl =
            Page.ClientScript.GetWebResourceUrl(this.GetType(),
            "ImageControl.ImgControl.js");
         this.Page.ClientScript.RegisterClientScriptInclude(
            typeof(string), "ImageControlJS", scriptUrl);

         /*Add CSS */
         string includeTemplate = "<link rel='stylesheet'
            text='text/css' href='{0}' />";
         string includeLocation =
            this.Page.ClientScript.GetWebResourceUrl(
               this.GetType(), "ImageControl.ImageControl.css");
         LiteralControl include =
            new LiteralControl(String.Format(includeTemplate,
               includeLocation));
         ((System.Web.UI.HtmlControls.HtmlHead)this.Page.Header).
           Controls.Add(include);
         /*End Add CSS */
         base.OnPreRender(e);
      }
      #endregion
   }

Points of Interest

Microsoft provides many filters and transitions for text as well as for images. But, to use them in an ASPX page, you have to be good at JavaScript and knowledgable of these filters. By using this control, you don't have to know details about these filters; you just drag & drop the control.



About the Author

saifi hasan

I have been in development Web Application, Web Sevices for last 3 yrs.Currently working with TCS India

Downloads

Comments

  • There are no comments yet. Be the first to comment!

Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • Protecting business operations means shifting the priorities around availability from disaster recovery to business continuity. Enterprises are shifting their focus from recovery from a disaster to preventing the disaster in the first place. With this change in mindset, disaster recovery is no longer the first line of defense; the organizations with a smarter business continuity practice are less impacted when disasters strike. This SmartSelect will provide insight to help guide your enterprise toward better …

  • Live Event Date: August 14, 2014 @ 2:00 p.m. ET / 11:00 a.m. PT Data protection has long been considered "overhead" by many organizations in the past, many chalking it up to an insurance policy or an extended warranty you may never use. The realities of today make data protection a must-have, as we live in a data driven society. The digital assets we create, share, and collaborate with others on must be managed and protected for many purposes. Check out this upcoming eSeminar and join eVault Chief Technology …

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds