Pan and Zoom Very Large Images

This is very strange.

Without seeing the code, I can only make a guess. However, I would first check that you didn't accidentally lose event handling on mouse down and mouse move for the control. You can use break points to verify that the events are being caught. You might also make sure that the control has focus when you're attempting to pan and zoom with the mouse and that something else in the project isn't the shifting focus on you. If the control is losing focus, then this can prevent the mouse wheel event from firing.

If I think of anything else, I'll post it. Let me know how it goes.

Thanks,
Tony

It's only when you look at an ant through a magnifying glass on a sunny day that you realise how often they burst into flames.

Here I'm back again Smile | :)

the modification of the Sub ImageViewer_MouseWheel has still no effect, i don't know why.
But now i have extended the imageViewer control, so that i can zoom by drawing a rectangle, with this i don't need a centered zooming with the mouse wheel. And i added a button to fit the image into the imageviewer control.

It was a little hard for me (i'm still a newbie in vb.net Laugh | :laugh:

) but now it works.

But sometimes it takes a loooooong time after zooming until the image is redrawn.
But at the moment i will need it to view tiff files which are not too big (only black and white, 200 dpi, about 200 kByte...) so i think it will be good enough for this.

Thank you again.

hi good day..can you add graphics here? for example opening an image map then digitize/trace boundaries...like in GIS application? vectors and images in the same control?

Yes, this is quite doable. Since you have access to the graphics object, you could overlay anything you like over the image. The trick would be keeping up with the coordinates of whatever you are drawing, as well as the zoomfactor and only drawing your objects when they are in view. I've just recently modified this control to plot GPS positions and movements as requested by another reader of this article and it works great.

It's only when you look at an ant through a magnifying glass on a sunny day that you realise how often they burst into flames.

Can you please send me that GPS example. I'm trying to do exatly the same thing. I'd like to paste some GIS points onto it.

by the way:
Great control. I did something like that (without zooming) in VB6, but since controls got more sophisticated and using more RAM (picturebox) the control didn't work any more (VS2003, 2005).

tx

Matej

Please see the response to Tom Dwyer. This should help get you going.

It's only when you look at an ant through a magnifying glass on a sunny day that you realise how often they burst into flames.

Anthony,
I have been using your control for the last couple of months and it is doing quite well. Could you post the modifications that you use for the overlays? If it is too big can you email it to me?
Thanks
Tom

Ok, here's what I did. Please note, this is not production ready code, but is merely an attempt to demonstrate one possible way of overlaying map points.

clsMapPoint to the Imageviewer project. It looks like this:
'---------------------------------------------------------------
Public Class clsMapPoint
Private m_Location As System.Drawing.Point = New System.Drawing.Point(0, 0)
Private m_Name As String = ""
Private m_Description As String = ""
Private m_brush As System.Drawing.Brush = Brushes.Blue
Private m_Bitmap As New System.Drawing.Bitmap(20, 20)
Private m_currentRectangle As Rectangle
Private m_Width As Integer = 10
Private m_Height As Integer = 10
Private m_Highlight As Boolean

Public Property Location() As System.Drawing.Point
Get
Return m_Location
End Get
Set(ByVal value As System.Drawing.Point)
m_Location = value

End Set
End Property

Public Property Name() As String
Get
Return m_Name
End Get
Set(ByVal value As String)
m_Name = value
End Set
End Property

Public Property Description() As String
Get
Return m_Description
End Get
Set(ByVal value As String)
m_Description = value
End Set
End Property

Public Property BrushColor() As System.Drawing.Brush
Get
Return m_brush
End Get
Set(ByVal value As System.Drawing.Brush)
m_brush = value
End Set
End Property

Public Property Width() As Integer
Get
Return m_Width
End Get
Set(ByVal value As Integer)
m_Width = value
End Set
End Property

Public Property Height() As Integer
Get
Return m_Height
End Get
Set(ByVal value As Integer)
m_Height = value
End Set
End Property

Friend Function GetImage() As System.Drawing.Bitmap
Dim g As Graphics
g = Graphics.FromImage(m_Bitmap)
g.Clear(Color.Transparent)
Dim CurrentBrush As System.Drawing.Brush
If Highlight Then
CurrentBrush = Brushes.Red
Else
CurrentBrush = BrushColor
End If
g.FillEllipse(CurrentBrush, 0, 0, m_Width, m_Width)
Return m_Bitmap
End Function

Public Property Highlight()
Get
Return m_Highlight
End Get
Set(ByVal value)
m_Highlight = value
End Set
End Property
End Class

'---------------------------------------------------------------
'---------------------------------------------------------------

Second, I modified the MapViewerControl:

'---------------------------------------------------------------
'---------------------------------------------------------------

Public Class MapViewer
'Member Variables
Private m_MouseButtons As System.Windows.Forms.MouseButtons = Windows.Forms.MouseButtons.Left
Private m_OriginalImage As System.Drawing.Bitmap
Private m_PanStartPoint As System.Drawing.Point
Private m_Origin As New System.Drawing.Point(0, 0)
Private m_CenterPoint As New System.Drawing.Point(0, 0)
Private g As Graphics
Private SrcRect As System.Drawing.Rectangle
Private DestRect As System.Drawing.Rectangle
Private m_ZoomOnMouseWheel As Boolean = True
Private m_ZoomFactor As Double = 1.0
Private m_MapPoints As New Collections.Generic.SortedList(Of String, clsMapPoint)
Private M_MapPointPen As New System.Drawing.Pen(Color.Aquamarine)

Public Event MapPointClicked(ByVal MP As clsMapPoint)

Public Sub New()
' This call is required by the Windows Form Designer.
InitializeComponent()
' Add any initialization after the InitializeComponent() call.
Me.SetStyle(ControlStyles.OptimizedDoubleBuffer, True)
Me.SetStyle(ControlStyles.AllPaintingInWmPaint, True)
End Sub

#Region "Public/Private Shadows"
Public Shadows Property Image() As System.Drawing.Image
Get
Return m_OriginalImage
End Get
Set(ByVal Value As System.Drawing.Image)
If Value Is Nothing Then
m_OriginalImage = Nothing
Exit Property
End If
Dim r As New Rectangle(0, 0, Value.Width, Value.Height)
m_OriginalImage = Value
'Clone the image so we can set the pixelformat.
' This improves performance quite a bit
m_OriginalImage = m_OriginalImage.Clone(r, Imaging.PixelFormat.DontCare)
'Force a paint
Me.Invalidate()
End Set
End Property

Public Shadows Property initialimage() As System.Drawing.Image
Get
Return m_OriginalImage
End Get
Set(ByVal value As System.Drawing.Image)
Me.Image = value
End Set
End Property

Public Shadows Property BackgroundImage() As System.Drawing.Image
Get
Return Nothing
End Get
Set(ByVal Value As System.Drawing.Image)

End Set
End Property

#End Region

#Region "Protected Overrides"

Protected Overrides Sub OnPaint(ByVal e As PaintEventArgs)
e.Graphics.Clear(Me.BackColor)
DrawImage(e.Graphics)
MyBase.OnPaint(e)
End Sub

Protected Overrides Sub OnSizeChanged(ByVal e As EventArgs)
DestRect = New System.Drawing.Rectangle(0, 0, ClientSize.Width, ClientSize.Height)
MyBase.OnSizeChanged(e)
End Sub

#End Region

#Region "Public Properties"
Public Property MapPoints() As Collections.Generic.SortedList(Of String, clsMapPoint)
Get
Return m_MapPoints
End Get
Set(ByVal value As Collections.Generic.SortedList(Of String, clsMapPoint))
m_MapPoints = value
End Set
End Property

Public Property PanButton() As System.Windows.Forms.MouseButtons
Get
Return m_MouseButtons
End Get
Set(ByVal value As System.Windows.Forms.MouseButtons)
m_MouseButtons = value
End Set
End Property

Public Property ZoomOnMouseWheel() As Boolean
Get
Return m_ZoomOnMouseWheel
End Get
Set(ByVal value As Boolean)
m_ZoomOnMouseWheel = value
End Set
End Property

Public Property ZoomFactor() As Double
Get
Return m_ZoomFactor
End Get
Set(ByVal value As Double)
m_ZoomFactor = value
If m_ZoomFactor > 16 Then m_ZoomFactor = 16
If m_ZoomFactor < 0.05 Then m_ZoomFactor = 0.05

Me.Invalidate()
End Set
End Property

Public Property Origin() As System.Drawing.Point
Get
Return m_Origin
End Get
Set(ByVal value As System.Drawing.Point)
m_Origin = value
Me.Invalidate()
End Set
End Property
#End Region

#Region "Public Methods"

Public Sub ShowActualSize()
m_ZoomFactor = 1
Me.Invalidate()
End Sub

Public Sub ResetImage()
m_Origin.X = 0
m_Origin.Y = 0
m_ZoomFactor = 1.0
Me.Invalidate()
End Sub

Public Sub ForceRefresh()
Me.Invalidate()
End Sub

#End Region

Private Sub DrawImage(ByRef g As Graphics)
If m_OriginalImage Is Nothing Then Exit Sub
SrcRect = New System.Drawing.Rectangle(m_Origin.X, m_Origin.Y, ClientSize.Width / m_ZoomFactor, ClientSize.Height / m_ZoomFactor)
g.InterpolationMode = Drawing2D.InterpolationMode.NearestNeighbor
g.SmoothingMode = Drawing2D.SmoothingMode.None
g.PixelOffsetMode = Drawing2D.PixelOffsetMode.None
g.DrawImage(m_OriginalImage, DestRect, SrcRect, GraphicsUnit.Pixel)
Drawpoints(g)
End Sub

Private Sub Drawpoints(ByRef g As Graphics)
Dim TranslatedPoint As System.Drawing.Point
For Each mp As clsMapPoint In MapPoints.Values
Dim mpImage As Bitmap = mp.GetImage
If SrcRect.Contains(mp.Location.X, mp.Location.Y) Then
TranslatedPoint = New System.Drawing.Point((mp.Location.X - m_Origin.X) * m_ZoomFactor, (mp.Location.Y - m_Origin.Y) * m_ZoomFactor)
g.DrawImageUnscaled(mpImage, TranslatedPoint)
End If
Next
End Sub

Private Function TranslatePoint(ByVal Loc As System.Drawing.Point) As System.Drawing.Point
Dim p As System.Drawing.Point
p.X = m_Origin.X + (Loc.X / m_ZoomFactor)
p.Y = m_Origin.Y + (Loc.Y / m_ZoomFactor)
Return p

End Function

Private Function translateLength(ByVal length As Integer) As Integer
Return length / m_ZoomFactor
End Function

Private Sub MapViewer_MouseClick(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles Me.MouseClick
If e.Button = Windows.Forms.MouseButtons.Left Then
Dim mpRect As Rectangle
Dim TranslatedPoint As System.Drawing.Point
TranslatedPoint = TranslatePoint(e.Location)
For Each mp As clsMapPoint In m_MapPoints.Values
mpRect = New Rectangle(mp.Location.X, mp.Location.Y, _
translateLength(mp.Width), translateLength(mp.Height))

If mpRect.Contains(TranslatedPoint) Then
For Each mp2 As clsMapPoint In m_MapPoints.Values
mp2.Highlight = False
Next
mp.Highlight = True
Me.Invalidate()
RaiseEvent MapPointClicked(mp)
Exit For
End If
Next
End If
End Sub

Private Sub ImageViewer_MouseDown(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles MyBase.MouseDown
m_PanStartPoint = New Point(e.X, e.Y)
Me.Focus()
End Sub

Private Sub ImageViewer_MouseMove(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles MyBase.MouseMove
If e.Button = m_MouseButtons Then
Dim DeltaX As Integer = m_PanStartPoint.X - e.X
Dim DeltaY As Integer = m_PanStartPoint.Y - e.Y

'Set the origin of the new image
m_Origin.X = m_Origin.X + (DeltaX / m_ZoomFactor)
m_Origin.Y = m_Origin.Y + (DeltaY / m_ZoomFactor)

'reset the startpoints
m_PanStartPoint.X = e.X
m_PanStartPoint.Y = e.Y

'Force a paint
Me.Invalidate()
End If
End Sub

Private Sub ImageViewer_MouseWheel(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles MyBase.MouseWheel
If Not ZoomOnMouseWheel Then Exit Sub
' Get center point
m_CenterPoint.X = m_Origin.X + SrcRect.Width / 2
m_CenterPoint.Y = m_Origin.Y + SrcRect.Height / 2

'set new zoomfactor
If e.Delta > 0 Then
ZoomFactor = Math.Round(ZoomFactor * 1.1, 2)
ElseIf e.Delta < 0 Then
ZoomFactor = Math.Round(ZoomFactor * 0.9, 2)
End If

'Reset the origin to maintain center point
m_Origin.X = m_CenterPoint.X - ClientSize.Width / m_ZoomFactor / 2
m_Origin.Y = m_CenterPoint.Y - ClientSize.Height / m_ZoomFactor / 2
End Sub
End Class

'---------------------------------------------------------------
'---------------------------------------------------------------
I created a test harness to demonstrate how to use it.
Basically, I have the imageviewer, then 3 text boxes, and a button on the form.

They are named:
MapViewer1
txtName
txtX
txtY
Button1

Form1 contains the following code:
'---------------------------------------------------------------
'---------------------------------------------------------------

Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
Me.MapViewer1.Image = New Bitmap("c:\test.jpg")

Dim mp As MapImageViewer.clsMapPoint
Dim x As Integer
For x = 0 To 50
mp = New MapImageViewer.clsMapPoint
mp.Location = New Drawing.Point(Rnd() * 1000, Rnd() * 1000)
mp.Name = x
mp.Description = x
mp.BrushColor = Brushes.MediumBlue
Me.MapViewer1.MapPoints.Add(mp.Name, mp)
Next
End Sub

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
Dim mp As MapImageViewer.clsMapPoint
If MapViewer1.MapPoints.ContainsKey(txtName.Text) Then
mp = MapViewer1.MapPoints(txtName.Text)
mp.Location = New System.Drawing.Point(txtX.Text, txtY.Text)
Else
mp = New MapImageViewer.clsMapPoint
mp.Name = txtName.Text
mp.Location = New System.Drawing.Point(txtX.Text, txtY.Text)
MapViewer1.MapPoints.Add(mp.Name, mp)
End If
MapViewer1.Refresh()
End Sub

Private Sub MapViewer1_MapPointClicked(ByVal MP As MapImageViewer.clsMapPoint) Handles MapViewer1.MapPointClicked
txtName.Text = MP.Name
txtX.Text = MP.Location.X
txtY.Text = MP.Location.Y
End Sub

'---------------------------------------------------------------
'---------------------------------------------------------------
I hope that helps get you started.
'---------------------------------------------------------------
'---------------------------------------------------------------

It's only when you look at an ant through a magnifying glass on a sunny day that you realise how often they burst into flames.

The code above could be used to track vehicles, rescue workers, or anything else with a GPS. The trick is to know the Lat. and Long. of the top left corner of the map, as well as the bottom right corner of the map. After that, you can calculate the x and y coordinates of any Lat,long on the the map.

Once you have a collection of points, you can retrieve a point in the collection, update it's location, and the map will refresh. with the point moved to the new location.

Also, you can click on one of the points, and retrieve information about that point. The point is also highlighted to indicate that it is the currently sellected point.

It's only when you look at an ant through a magnifying glass on a sunny day that you realise how often they burst into flames.

BTW, great thing you'we got there!
I think it will be even nicer if you try to keep the zoomfactor ratio when you are zooming in and out. So that when you zoom from 100% to 110% and then zoom out you get back to 100%. But that's just my opinion.

ZZ

It is a good idea. I recently had the same thought but hadn't fixed it yet.

It's only when you look at an ant through a magnifying glass on a sunny day that you realise how often they burst into flames.

I have some very large tif file of 630MB with 31399 x 19625 px of 8bit/px. I have to open them to read Pixel values of these images but am getting an error of out of memory.....

I tried with some other images of 290mb 24bit/px of dimension 10000x10000 px. these opened in the application that you given and also the key feature of zoom and pan did work very well Smile | :)

.

also want to know if there is any feature in C# to read the header of the any given image format..

Hope u can help me..!!!

Thanks and Regards

Abhay

Abhay,

I, too, work with huge TIFF images and I've struggled with how to work effectively with them. My images are larger even than yours: in the several gigabyte range (e.g., 44,000 x 52,800 pixels at 24 bits/pixel works out to just under 7 GB in RAM. Oy!).

LeadTools is one of the third-party .NET 2.0 libraries I've tried to get a grip on a portion of the image at once. The package does, indeed, allow you to select just a portion of the image without having to read the whole thing into RAM first. I have found that if the image is saved with the CMYK color space that the performance of LeadTools doesn't cut the mustard. I tried extracting four 8192x8192 pixel blocks from that large image using LeadTools on a 2.8 gigahertz, 2 GB RAM system. It took two hours to extract and save those four pieces!

Our network administrator is talking now about setting up a server with great huge gobs of RAM so that he can tell Windows to use RAM instead of disk for the virtual memory. Maybe then when a huge image is being read into RAM, the faster performance of RAM used as virtual memory will allow the whole image to be read into memory: some in RAM and some into virtual memory.

I've looked at "rolling my own" image processor using the Libtiff C library. The TIFF specification is very flexible but also very accessible, I think. Just have to find time to attempt it.

There's a decent TIFF image header information utility available: http://www.awaresystems.be/imaging/tiff/astifftagviewer.html .

I hope this helps.

Steve Erbach
Neenah, WI
http://TheTownCrank.blogspot.com

Sorry for not answering sooner... my computer motherboard appears to be going bad. I can only log on for about 15 minutes or so before everything crashes. I can't reboot for at least an hour when it happens. At the moment, the computer is working very well, but that could change any moment.

On to your questions:

I've not had the opportunity to open anything that size. I will need to investigate and see what the issues are and see if I can come up with something.

Some thoughts though...
Many file formats are compressed on disk, and I think it would be very involved to open only a part of the file to display without having to decompress the whole file. I don't think that tiff is compressed ( I have to research it though) so It might not be as difficult as reading only a small part of, say, a JPG image.

Also, performance would suffer if you tried live panning since you would have to read from the disk more often. Perhaps you could load a large enough portion though so that you could pan to an extent, then when you reached the border of the section loaded, load up the next section and continue panning. That's a possibility.

I will look in to this and let you know if I come up with anything. In the meantime, if you figure something out, let me know here. The information could be invaluable to many readers here.

Thanks,
Tony

It's only when you look at an ant through a magnifying glass on a sunny day that you realise how often they burst into flames.

This is a great example! The only thing it needs is scrollbars added. Do you have the code for that or can you give me a general idea how to accomplish it? Any help would be greatly appreciated. Thanks

Sorry for not answering sooner... my computer motherboard appears to be going bad. I can only log on for about 15 minutes or so before everything crashes. I can't reboot for at least an hour when it happens.

Yes, I can help you with scrollbars, but I won't be able to do anything until I get my new motherboard (tomorrow). I'll let you know... Should be able to have a demo in a few days.

It's only when you look at an ant through a magnifying glass on a sunny day that you realise how often they burst into flames.

Sorry, I've been distracted the last week and never got to this. I will see what I can do today for you.

It's only when you look at an ant through a magnifying glass on a sunny day that you realise how often they burst into flames.

Grrrr.... I'm working almost 'round the clock. I've had no time to do anything for anyone on this control. I am sorry. Not sure when I can get to it yet.

It's only when you look at an ant through a magnifying glass on a sunny day that you realise how often they burst into flames.

Can you give me some direction as to how to create scrollbars with your control? Thanks

I've just started writing the control with Scrollbars. Should have it out this week.

It's only when you look at an ant through a magnifying glass on a sunny day that you realise how often they burst into flames.

Scroll bars have been implemented.

Please check it out

It's only when you look at an ant through a magnifying glass on a sunny day that you realise how often they burst into flames.

This is really very nice, better than your previous example.

Can you think of a way to modify the zoom code so that the image stays centered?

Tom

Sorry for not getting back with you sooner. It has been a busy day.

Yes, keeping the image centered shouldn't be too dificult. You'd have to calculate the origin based on the point you want to keep centered. The origin is what defines the top left corner of the control as it relates to the original image. Then, in the OnPaint event, set the source rectangles coordinates accordingly.

I don't have a lot of time to put together a snippet as I have to get ready to go to a funeral this weekend (Great-Uncle). If you need further help with this, I can see about putting something together for you this next week.

It's only when you look at an ant through a magnifying glass on a sunny day that you realise how often they burst into flames.

Hi Anthony,
I have been working on this issue and have made more false starts than I care to count. Could you put together a snippet to get me on the right track?
TIA
Tom

Sure can. I'm at work now, but I will try to get you something tonight or in the morning... perhaps sooner though Wink | ;-)

It's only when you look at an ant through a magnifying glass on a sunny day that you realise how often they burst into flames.

Pan and Zoom Very Large Images

Introduction

How It Works

Public Properties

Public Shadows

Public Methods

Default Behavior

Customized Usage

Scrollbars

Double Buffering

Just In Time Painting?

Panning the Image

Conclusion

Please Note...

Revisions and Bug Fixes ...

TO DO

License

Comments and Discussions