locked
GDI+ Best Practise - Save Image/Dynamic Creation? RRS feed

  • Question

  • User-1487497583 posted

    Hi,

    I have created some code using GDI+ that creates a Graph. The Graph pulls data from a database. Basically what is happening at the moment is that each time a user goes to a dynamically generated page i.e. .aspx?ID=54 data is pulled out of the database in regards to say ID 54. My Graph is then saved as a JPEG image called "imagegraph.jpeg". In the .aspx page I then reference "imagegraph.jpeg" in an ASP Image Control. This is working fine for me. However I am slightly concerned what would happen when my site begins to gather more visitors. So I was just wondering if anyone can forsee any problems with this approach (am I going to run into serious difficulties if more than two users are accessing the site at the same time?) and if it is best practise to save the image like this or is there is a way to dynamically create the image without needing to save the Image as a Jpeg.

    Thanks

    Daniel 

    Saturday, November 8, 2008 11:21 AM

Answers

  • User815917640 posted

    You will need to pass 4 values via querystring to the dynamic image generation page. This page generates image in memory not on hard drive. So, there will be no problem with concurrent users using it.

    What you will have to do in your static page is get values of TechGraph, AthGraph, MentGraph, IntellGraph. Then you will pass this 4 values via querystring to the dynamic image generation page. The dynamic page will grab this values from querystring and generate the graph just for that user.

    For Ex:

    'My static page 

    Image1.ImageUrl = "DynamicPage.aspx?Tech=" & TechGraph & "&Ath=" & AthGraph & "&Ment=" & MentGraph & "&Intell=" & IntellGraph

     

    Then in your dynamic page, instead of using findControl you will get values from querystring:

            Dim TechGraph As Integer = Request.QueryString("Tech")
    Dim AthGraph As Integer = Request.QueryString("Ath")
    Dim MentGraph As Integer = Request.QueryString("Ment")
    Dim IntellGraph As Integer = Request.QueryString("Intell")

     

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, November 10, 2008 1:27 PM

All replies

  • User815917640 posted

    It's a standard practice to use a separate web form to generate a dynamic image and use the URL of that page when creating an image.

    The page the generates a dynamic image, will output a image in jpeg format. You need to use memory stream to do that. Then call set the imageurl property of the image control to dynamic aspx page.

     


    Here's the example of a dynamic page: 

    http://blogs.msdn.com/jrule/archive/2004/08/16/215393.aspx

     

     

    Sunday, November 9, 2008 8:43 AM
  • User-1487497583 posted

    Hi,

    Thanks for your reply. Is it only standard practise to use a seperate web from to generate a dynamic image i.e. if the user enters a number the graph changes?

    At the moment my graphs are static but based on information coming from a database e.g. user 1 may have values 2,3,4,5 and user 2 may have values 5,4,3,2. I have copied my code below - the event is fired at the start of Page Load. My approach seems to be working when I am testing it (although there is about a 1 second delay for the graph to change from the old values to the new values). I am unsure however if generating the image in a seperate web form would give me any benefits from what I am doing as the image still needs to be based on the database values and saved? Also if another user is online at the same time and goes to a page won't this change the graph to their values for me as well? I am a complete novice when it comes to GDI+ however and so my assumptions could be completely wrong.

        Private Sub DrawGraph()
            'First, we create a new Bitmap object, passing the width and height of 
            'the graphic we wish to create, 225x200 pixels in this case.
            Dim objBitmap As New Bitmap(225, 200)
    
            'Now we need to create a Graphics object in order to be able to draw 
            'on our newly created bitmap. We use the FromImage call of the Graphics object for this purpose.
            Dim objGraphic As Graphics = Graphics.FromImage(objBitmap)
    
            'Next, we need to create some brushes so we can paint on our canvas. 
            'We create 4 brushes one for each bar on our bar chart (red, blue and green) and 
            'white for the background colour. We also create a black pen to draw the horizontal 
            'and vertical axis on the chart.
            Dim blackBrush As New SolidBrush(Color.Black)
            Dim whiteBrush As New SolidBrush(Color.White)
            Dim grayBrush As New SolidBrush(Color.Gray)
            Dim blackPen As New Pen(Color.Black, 2)
            Dim bluePen As New Pen(Color.Navy, 3)
            Dim horzFont As New Font("Verdana", 10, FontStyle.Regular)
    
            'When you create a new bitmap, the background colour is set to black so we call FillRectangle 
            'to paint the whole of the background white.
            objGraphic.FillRectangle(whiteBrush, 0, 0, 225, 200)
    
            'Now that we have a white bitmap and some brushes, we can get painting. We use the 
            'DrawLine method to draw the horizontal and vertical axis.
            objGraphic.DrawLine(blackPen, New Point(0, 100), New Point(225, 100))
            objGraphic.DrawLine(blackPen, New Point(112, 0), New Point(112, 225))
    
            'Add Text onto Image
            'Intelligence
            objGraphic.DrawString("Intelligence", horzFont, grayBrush, 5, 80)
            objGraphic.DrawString("5", horzFont, grayBrush, 5, 100)
            objGraphic.DrawString("4", horzFont, grayBrush, 25, 100)
            objGraphic.DrawString("3", horzFont, grayBrush, 45, 100)
            objGraphic.DrawString("2", horzFont, grayBrush, 65, 100)
            objGraphic.DrawString("1", horzFont, grayBrush, 85, 100)
    
            'Athleticism
            objGraphic.DrawString("Athleticism", horzFont, grayBrush, 145, 80)
            objGraphic.DrawString("5", horzFont, grayBrush, 200, 100)
            objGraphic.DrawString("4", horzFont, grayBrush, 180, 100)
            objGraphic.DrawString("3", horzFont, grayBrush, 160, 100)
            objGraphic.DrawString("2", horzFont, grayBrush, 140, 100)
            objGraphic.DrawString("1", horzFont, grayBrush, 120, 100)
    
            'Technical
            objGraphic.TranslateTransform(90, 0)
            objGraphic.RotateTransform(90)
            objGraphic.DrawString("Technical", horzFont, grayBrush, 20, -45)
            objGraphic.RotateTransform(-90)
            objGraphic.DrawString("5", horzFont, grayBrush, 5, 0)
            objGraphic.DrawString("4", horzFont, grayBrush, 5, 20)
            objGraphic.DrawString("3", horzFont, grayBrush, 5, 40)
            objGraphic.DrawString("2", horzFont, grayBrush, 5, 60)
            objGraphic.DrawString("1", horzFont, grayBrush, 5, 80)
    
            'Mental
            objGraphic.TranslateTransform(90, 0)
            objGraphic.RotateTransform(90)
            objGraphic.DrawString("Mental", horzFont, grayBrush, 135, 45)
            objGraphic.RotateTransform(-90)
            objGraphic.DrawString("5", horzFont, grayBrush, -85, 185)
            objGraphic.DrawString("4", horzFont, grayBrush, -85, 165)
            objGraphic.DrawString("3", horzFont, grayBrush, -85, 145)
            objGraphic.DrawString("2", horzFont, grayBrush, -85, 125)
            objGraphic.DrawString("1", horzFont, grayBrush, -85, 105)
    
            Dim TechGraphData As Label = dvGraphData.FindControl("Technical")
            Dim TechGraph As Integer = TechGraphData.Text
            Dim AthGraphData As Label = dvGraphData.FindControl("Athleticism")
            Dim AthGraph As Integer = AthGraphData.Text
            Dim MentGraphData As Label = dvGraphData.FindControl("Mental")
            Dim MentGraph As Integer = MentGraphData.Text
            Dim IntellGraphData As Label = dvGraphData.FindControl("Intelligence")
            Dim IntellGraph As Integer = IntellGraphData.Text
    
            Dim TechPoint As Point
            Dim AthPoint As New Point
            Dim MentPoint As New Point
            Dim IntellPoint As New Point
    
            Select Case TechGraph
                Case 5
                    TechPoint = New Point(-69, 5)
                Case 4
                    TechPoint = New Point(-69, 25)
                Case 3
                    TechPoint = New Point(-69, 45)
                Case 2
                    TechPoint = New Point(-69, 65)
                Case 1
                    TechPoint = New Point(-69, 85)
            End Select
    
            Select Case AthGraph
                Case 5
                    AthPoint = New Point(30, 100)
                Case 4
                    AthPoint = New Point(10, 100)
                Case 3
                    AthPoint = New Point(-10, 100)
                Case 2
                    AthPoint = New Point(-30, 100)
                Case 1
                    AthPoint = New Point(-50, 100)
            End Select
    
            Select Case MentGraph
                Case 5
                    MentPoint = New Point(-69, 195)
                Case 4
                    MentPoint = New Point(-69, 175)
                Case 3
                    MentPoint = New Point(-69, 155)
                Case 2
                    MentPoint = New Point(-69, 135)
                Case 1
                    MentPoint = New Point(-69, 115)
            End Select
    
            Select Case IntellGraph
                Case 5
                    IntellPoint = New Point(-170, 100)
                Case 4
                    IntellPoint = New Point(-150, 100)
                Case 3
                    IntellPoint = New Point(-130, 100)
                Case 2
                    IntellPoint = New Point(-110, 100)
                Case 1
                    IntellPoint = New Point(-90, 100)
            End Select
    
            objGraphic.DrawLine(bluePen, TechPoint, AthPoint)
            objGraphic.DrawLine(bluePen, AthPoint, MentPoint)
            objGraphic.DrawLine(bluePen, MentPoint, IntellPoint)
            objGraphic.DrawLine(bluePen, IntellPoint, TechPoint)
    
            'And finally we save our bitmap in GIF format and send it back to the browser.
            'objBitmap.Save(Response.OutputStream, ImageFormat.Jpeg)
    
            objBitmap.Save("C:\Users\Dan\Documents\Football Scouting Network v2\App_Themes\/FSN/PlayerGraph\GraphImage.jpeg")
    
        End Sub

     

    Thanks again for any help

    Daniel
     

    Monday, November 10, 2008 5:20 AM
  • User815917640 posted

    You will need to pass 4 values via querystring to the dynamic image generation page. This page generates image in memory not on hard drive. So, there will be no problem with concurrent users using it.

    What you will have to do in your static page is get values of TechGraph, AthGraph, MentGraph, IntellGraph. Then you will pass this 4 values via querystring to the dynamic image generation page. The dynamic page will grab this values from querystring and generate the graph just for that user.

    For Ex:

    'My static page 

    Image1.ImageUrl = "DynamicPage.aspx?Tech=" & TechGraph & "&Ath=" & AthGraph & "&Ment=" & MentGraph & "&Intell=" & IntellGraph

     

    Then in your dynamic page, instead of using findControl you will get values from querystring:

            Dim TechGraph As Integer = Request.QueryString("Tech")
    Dim AthGraph As Integer = Request.QueryString("Ath")
    Dim MentGraph As Integer = Request.QueryString("Ment")
    Dim IntellGraph As Integer = Request.QueryString("Intell")

     

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, November 10, 2008 1:27 PM
  • User-1487497583 posted

    ok I will try this out. Thank you for your help. 

    Tuesday, November 11, 2008 2:19 PM