Link to home
Start Free TrialLog in
Avatar of ApexCo
ApexCoFlag for United States of America

asked on

Defining a clickable region in code behind?

I'm wondering if this is possible.

I'm using GDI+ to draw a location on an image that reflects that current location of an office. I have already defined the coordinates obviously, so is there a way to create a clickable or hover region in code behind that I can leverage on the querystring information I am passing?

Here is the code I currently have.

 Public Sub Highlight()
        Dim oCanvas As Drawing.Bitmap = Drawing.Bitmap.FromFile(Server.MapPath("App_Data\Maps\24thFloorMap.jpg"))
        Dim g As Drawing.Graphics = Drawing.Graphics.FromImage(oCanvas)
        Dim Office As Rectangle

        If OfficeNumber = "2465" Then
            Dim Office2465 As Rectangle = New Rectangle(98, 90, 48, 120)
            Office = Office2465
        End If

        g.FillRectangle(New SolidBrush(Color.FromArgb(100, 0, 128, 255)), Office)

        Response.ContentType = "image/jpeg"
        oCanvas.Save(Response.OutputStream, Drawing.Imaging.ImageFormat.Jpeg)
        Response.End()
Avatar of dmagliola
dmagliola

From your code i'm assuming you have an .aspx page that has an <img src="xxx.aspx" (or .ashx) that requests the code you just showed instead of requesting a static image.

If that's what you're doing, you won't be able to output "region" data into that same image (after all you're just feeeding a JPG file to the browser).
What you CAN do is define an area (with a good old fashioned map, or with a floating, transparent, absolutely positioned <div>) in the ASPX page that will contain this image.

One problem is the sharing of coordinate information between the two, if obtaining this coordinates involves some logic (mainly to avoid duplicating code). One way to do it is through Session variables. (Keep in mind that the image will ALWAYS load later than the containing page). Another is to add querystring values in the <img> tag, but make sure that this doesn't pose a security risk (ie. that these values you're passing are not "secrets", and that tampering with them won't break your DB / server / etc)

I'm not exactly sure what "level" of information you need for this. What you're doing up there is not trivial, so I guess this overview will be enough to point you in the right direction.
If you have any doubts, however, or I haven't explained myself well, please don't hesitate to let me know and i'll help you.
Avatar of ApexCo

ASKER

Hi and thanks for the comments.

Right now the .aspx page is completely blank and I'm feeding the image to the browser through the code above. This is required to draw the rectangle the way I have it is it not?

Also, I'm aware of using an old school <map>, but I had hesitated because I am targeting IE6 here at work so I don't think that will work. If the GDI+ code loads up after the page loads I'll cover up those coordinates with the canvas I am creating won't I? I don't even know if using a transparent PNG will work like this for me.

So since I am doing the drawing in the code behind to highlight the actual office on the map I was hoping for a way to do it within the code behind to keep it simple. Is what I'm asking for impossible?

In the end my goal is to implement some NetFlix style hovers over the office and show the person's picture, name, phone number and I can get all that through the querystring values from the referring page. My big hangup is defining the regions. Maybe I don't need to setup the oCanvas? Can the GDI+ work on an image that is defined in the .aspx page instead of within the code itself?

Thanks for your help, I appreciate it.
ASKER CERTIFIED SOLUTION
Avatar of dmagliola
dmagliola

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of ApexCo

ASKER

Interesting idea you have there, but I don't think I'm not being clear enough for you.

ASPX page:  There is no code here, simply the default skeleton you get when you create a new page. What I am doing is checking what floor they are on from the main directory page, then opening the aspx page entitled floor24.aspx. On this page there is nothing.

However, in the code-behind is where I am doing all of my work. Take a look at this again:

Public Sub Highlight()
        Dim oCanvas As Drawing.Bitmap = Drawing.Bitmap.FromFile(Server.MapPath("App_Data\Maps\24thFloorMap.jpg"))
        Dim g As Drawing.Graphics = Drawing.Graphics.FromImage(oCanvas)
        Dim Office As Rectangle

        If OfficeNumber = "2465" Then
            Dim Office2465 As Rectangle = New Rectangle(98, 90, 48, 120)
            Office = Office2465
        End If

        g.FillRectangle(New SolidBrush(Color.FromArgb(100, 0, 128, 255)), Office)

        Response.ContentType = "image/jpeg"
        oCanvas.Save(Response.OutputStream, Drawing.Imaging.ImageFormat.Jpeg)
        Response.End()

You can see that I am actually using the GDI+ to create the path and draw the image right onto the page, it's almost like doing a respond.write with the path. You can also see were I have defined the coordinates for the rectangle that I fill in with a nice blue color so it's obvious where that office is located.

The problem with using anything else on the page is that the GDI+ routine stacks the map on top of everything else I might have on there. So that is why I am looking to try and attempt this in the code-behind. If it's not possible, I might go with just creating some other kind of GDI+ area and bringing that up with name/picture/phone etc.

Do you see what I am really trying to do now? I apologize for not being clear.

Just to recap. There is no code on the aspx page, everything is being done with GDI+ in the code behind. I am aware I might be stretching it a bit, but my ideal solution would be using the coordinates I am already using in GDI+ to define that rectangle for each office, if it is even possible.

Thanks again for helping me and trying to think through this.
I do understand what you're doing. I understand it perfectly well, and I'm suggesting an alternative solution, because what you want to do is not possible.

You are feeding a JPG file to the browser.
Independently of the fact that you're doing this inseide a "page", what the browser gets is a JPG file, not an HTML file.

What you need to do is have an HTML file, that will have an <img> tag, with it's src pointing to the ASPX file you're using to generate the picture.
That way, you have a PAGE in the browser, not an image, and you can impose anything then.
If you're just feeding an image to the browser, there is nothing to do.

I really don't know how to explain this any clearer.
Avatar of ApexCo

ASKER

Ok, I'm with you now, I misunderstood what you were trying to say...the joys of intraweb communication.

I'm going to work with the solution you posed earlier and award you points based on that because I think that will do what I need in the end.

Thanks for your valuable time, it is appreciated.