none
Msagl/Glee Asp.net Tutorial RRS feed

  • General discussion

  • Hi guys, my name is Luca Del Tongo and i'm an italian computer science student. This post come from a personal project where i have extensively used glee library to create some graph containing automata. So now i will guide you on how to use msglee to provide images using asp.net code.

    There are a couple of approaches to serve dynamic server side generated images using asp.net. In this post i will discuss the use of an httphandler to accomplish our task.

    So suppose we want to show on our standard .aspx page an image generated using msglee combined with our httphandler.

    In our .aspx code we can declare an asp.net image control setting its imageUrl property to the handler we are going to definre

     

     

    //default.aspx

    <asp:Image ID="ImageParseTree" ImageUrl="~/GleeGraphHandler.ashx" runat="server"/>

     

    Now we will create an httphandler, let's call it GleeGraphHandler.ashx

    //GleeGraphHandler.ashx

    public

     

    class GleeGraphHandler : IHttpHandler {

     

     

    public void ProcessRequest (HttpContext context) {

     

    Microsoft.Glee.Drawing.

    Graph graph = new Microsoft.Glee.Drawing.Graph("customGraph");

    graph.AddEdge(

    "0", "1");

    graph.AddEdge(

    "1", "3");

    Microsoft.Glee.GraphViewerGdi.

    GraphRenderer renderer = new Microsoft.Glee.GraphViewerGdi.GraphRenderer(graph);

    renderer.CalculateLayout();

    System.Drawing.

    Bitmap img = new System.Drawing.Bitmap((int)graph.Width, (int)graph.Height , System.Drawing.Imaging.PixelFormat.Format32bppPArgb);

    renderer.Render(img);

     

     

     

    //Set Image codec of JPEG type, the index of JPEG codec is "1"

    System.Drawing.Imaging.

    ImageCodecInfo codec = System.Drawing.Imaging.ImageCodecInfo.GetImageEncoders()[1];

     

    //Set the parameters for defining the quality of the image to improve rendering phase... here it is set to 100%

    System.Drawing.Imaging.

    EncoderParameters eParams = new System.Drawing.Imaging.EncoderParameters(1);

    eParams.Param[0] =

    new System.Drawing.Imaging.EncoderParameter(System.Drawing.Imaging.Encoder.Quality, 100L);

     

    System.Drawing.Imaging.

    ImageCodecInfo[] codecs = System.Drawing.Imaging.ImageCodecInfo.GetImageEncoders();

    img.Save(context.Response.OutputStream,codecs[1] , eParams);

     

    }

     

     

    public bool IsReusable {

     

    get {

     

    return true;

    }

    }

    The handler in a real scenario should set also proper response content type, howewer what we do in the handler is to create our graph object than render it on an image using GraphRenderer and improve the poor quality generated image before flushing the content back to the client (our asp.net image control) who request the image.

    I hope you find this little tutorial i want personally thanks Lev for his support and beleving in my small project. If there are some other students out there i'll leave you the link of a real world web application where i used this technique.

    It's still a work in progress www.regex2automaton.org 

     

    Thursday, May 6, 2010 7:57 PM

All replies

  • Very nice! 

     

    Thank you for sharing :)

    Wednesday, June 30, 2010 11:50 AM
  • Thanks for sharing Luca.

    I want to create graph using glee and the node generate from database sql server. Can you give me the sample code? thanks before.

    Monday, July 25, 2011 6:06 AM
  • Thanks for sharing Luca.

    I want to create graph using glee and the node generate from database sql server. Can you give me the sample code? thanks before.

    Hi Boonik,

    I do not have code to create node from sql server and I'm not sure about your scenario but if you want to render sql server nodes on asp.net page you could extend httphandler functionality using for example a data access layer that let you retrieve your data from sql tables and then once you have your data in memory create msglee graph as I show in ProcessRequest code above.

    Here is a snippet of code to get the overall idea:

     
          void IHttpHandler.ProcessRequest(HttpContext context)
          {
            try
            {        
              string url = Convert.ToString(context.Request.Url);        
              connString = Properties.Settings.Default.ConnectionString;
              dal = new DAL.DAL(connString);
      
     
              //Handling CRUD
              switch (context.Request.HttpMethod)
              {
                case "GET":
                  //Perform READ Operation from Sql Server using DAL component          
    
             //HTTP Request REST Style - Example:    \\http://localhost/RestGleeWebService/node?id=3550.
            try
            {
              int nodeId= Convert.ToInt16(context.Request["id"]);
              
              //HTTP Request Type - GET"
              //Performing Operation - READ"
              //Data sent via query string
              //POST - Data sent as name value pair and resides in the <form section> of the browser
              node = dal.GetNode("nodeId");
                          
    
    Graph graph = new Microsoft.Glee.Drawing.Graph("customGraph");
    
    graph.AddEdge(
    
    node.Id, otherNode.Id);
    
    
    Microsoft.Glee.GraphViewerGdi.
    
    GraphRenderer renderer = new Microsoft.Glee.GraphViewerGdi.GraphRenderer(graph);
    
    renderer.CalculateLayout();
    
    System.Drawing.
    
    Bitmap img = new System.Drawing.Bitmap((int)graph.Width, (int)graph.Height , System.Drawing.Imaging.PixelFormat.Format32bppPArgb);
    
    renderer.Render(img);
    
    //Set Image codec of JPEG type, the index of JPEG codec is "1"
    
    System.Drawing.Imaging.
    
    ImageCodecInfo codec = System.Drawing.Imaging.ImageCodecInfo.GetImageEncoders()[1];
    
     
    
    //Set the parameters for defining the quality of the image to improve rendering phase... here it is set to 100%
    
    System.Drawing.Imaging.
    
    EncoderParameters eParams = new System.Drawing.Imaging.EncoderParameters(1);
    
    eParams.Param[0] =
    
    new System.Drawing.Imaging.EncoderParameter(System.Drawing.Imaging.Encoder.Quality, 100L);
    
     
    
    System.Drawing.Imaging.
    
    ImageCodecInfo[] codecs = System.Drawing.Imaging.ImageCodecInfo.GetImageEncoders();
    
    img.Save(context.Response.OutputStream,codecs[1] , eParams);
    
    
              
            }
            catch (Exception ex)
            {
             WriteResponse("Error in READ");
             errHandler.ErrorMessage = dal.GetException();
             errHandler.ErrorMessage = ex.Message.ToString();        
           }
                  
    
                  break;
                default:
                  break;
              }
            }
            catch (Exception ex)
            {
              
              errHandler.ErrorMessage = ex.Message.ToString();
              context.Response.Write(yourErrorHandler.ErrorMessage);        
            }
          }
      
    
     
     }
    


    Then on your asp.net page you could use javascript or jquery to display the data or do a full page load and show output result.

    All my best,

    Luca

     

    Tuesday, July 26, 2011 10:57 AM
  • Thanks!! It was very very helpful to me )
    Wednesday, December 7, 2011 11:52 PM
  • Hi badrepent, and others,

     

    thanks for the ode it is very helpful and I implemented it very nicely.  Now there is one feature that would additionally be great to have: hyperlinks to the nodes on the image.  Not being  a web guy, I know roughly it could be implemented with HTML image and map, with mapping of the node coordinates to image coords, but... it would take me loads of time.  Does anyone have anything like this implemented?  Thanks


    Dino
    Saturday, January 28, 2012 8:51 PM