Loading large images, zooming and saving example revised

[DK_PETER]

Greetings good folks!

This example was made due to my surprise
when I read, that some excellent users needed
a canvas with humongous sizes.
After some nice explanations from lord and PB
I thought I might take up the challenge.
;---------------------------------
Code revised Aug. 29
Added simple scroll using arrow keys to both examples.
Example: WindowedScreen() . The best way ever! Fast when scrolling.

Code: Select all

;NOTE: BOTH EXAMPLES REVISED: DUE TO SEVERE SLEEP DEPRIVATION, THERE
;WERE A SERIOUS MEMORY LEAK AND REDUNDANT CODE PRESENT.
;THIS IS NOW FIXED FOR BOTH EXAMPLES. 
;Sorry for the inconvenience..
;Initial loading may take a little time.
;You can save the current image.
;F2 Loads an image
;F3 lets you save an image
;Left click mouse button to zoom
;Right click mouse to zoom out.
;Arrow keys to scroll. Works in zoom mode only - naturally.
;Have fun.
;Best regards
;Peter nickname DK_Peter

UsePNGImageDecoder()
UsePNGImageEncoder()
UseJPEGImageDecoder()
UseJPEGImageEncoder()
UseTIFFImageDecoder()
UseTGAImageDecoder()

InitSprite()
InitMouse()
InitKeyboard()

Structure MegaPic_Data
	The_Map.i
	The_TmpMap.i
	The_MapName.s
	ScaleIndexX.f
	ScaleIndexY.f
	InOut.i
	halfx.i
	halfy.i
	width.i
	height.i
EndStructure

Global main.i, Displaymap.i, mpic.MegaPic_Data, pt.POINT, pt2.POINT
Global SpriteX.i

Declare LoadMyBigMap()
Declare SaveMyMapSection()
Declare ScaleNewPoint(*pt.POINT)
Declare ZoomOut()

Procedure Openmain(x = 0, y = 0, width = 1024, height = 768, Title.s = "Big Maps, Very big maps")
  main = OpenWindow(#PB_Any, x, y, width, height, "", #PB_Window_SystemMenu|#PB_Window_ScreenCentered)
  OpenWindowedScreen(WindowID(main),0,0,width, height,0,0,0,#PB_Screen_SmartSynchronization)
  mpic\width = width
  mpic\height = height
  mpic\halfx = width / 2
  mpic\halfy = height / 2
	; create cursor
	SpriteX = CreateSprite(#PB_Any, 50,50,#PB_2DDrawing_AlphaBlend)
	StartDrawing(SpriteOutput(SpriteX))
	DrawingMode(#PB_2DDrawing_Outlined)
	Circle(25, 25, 20, $6F88CD)
	StopDrawing()
EndProcedure

Procedure LoadMyBigMap()
	Patt.s = "JPG files (*.jpg)|*.jpg|PNG files (*.png)|*.png|Bitmap files(*.bmp)|*.bmp"
	mpic\The_MapName = OpenFileRequester("Select map to load..","",patt,0)
	If mpic\The_MapName <> ""
		If IsImage(mpic\The_Map) > 0
			FreeImage(mpic\The_Map)
		EndIf
		If IsImage(Displaymap) > 0
			FreeImage(Displaymap)
		EndIf
		
		mpic\The_Map = LoadImage(#PB_Any, mpic\The_MapName)
		
		If IsImage(mpic\The_Map)	;Image is valid
			Index = 0 ;FullMap
			mpic\The_TmpMap = CreateImage(#PB_Any, mpic\width, mpic\height, 32,0)
			StartDrawing(ImageOutput(mpic\The_TmpMap))
			DrawImage(ImageID(mpic\The_Map), 0, 0, mpic\width, mpic\height)
			StopDrawing()
			
			Displaymap = CopyImage(mpic\The_TmpMap, #PB_Any)
			mpic\ScaleIndexX = ImageWidth(mpic\The_Map) / mpic\width
			mpic\ScaleIndexY = ImageHeight(mpic\The_Map) / mpic\height
			mpic\InOut = 0  ;Full image scaled down otherwise 1 if zoomed
		Else
			MessageRequester("Error!", "Error loading image")
		EndIf
	EndIf
	ProcedureReturn #True
EndProcedure

Procedure ZoomOut()
	If IsImage(Displaymap)
		FreeImage(Displaymap)
	EndIf
	If IsImage(mpic\The_TmpMap) > 0
		Displaymap = CopyImage(mpic\The_TmpMap, #PB_Any)
	EndIf
EndProcedure

Procedure SaveMyMapSection() ;type 0 = png : type 1 = jpg : type 2 = bmp
	Protected Savename.s
	Patt.s = "JPG files (*.jpg)|*.jpg|PNG files (*.png)|*.png|Bitmap files(*.bmp)|*.bmp"
	Savename = SaveFileRequester("Save part as...","",patt, 0)
	Select SelectedFilePattern()
		Case 0 ; Png
			ret = SaveImage(Displaymap, Savename + ".png", #PB_ImagePlugin_PNG)
		Case 1 ; Jpg
			ret = SaveImage(Displaymap, Savename + ".jpg", #PB_ImagePlugin_JPEG, 8)
		Case 2 ; Bitmap
			ret = SaveImage(Displaymap, Savename + "bmp", #PB_ImagePlugin_BMP)
	EndSelect
	ProcedureReturn #True
EndProcedure

Procedure  ScaleNewPoint(*pt.POINT)
	Protected NewGridX.i, NewGridY.i
	
	If IsImage(mpic\The_Map) = 0 Or IsImage(Displaymap) = 0
		ProcedureReturn 
	EndIf
	
	NewGridX = *pt\x * mpic\ScaleIndexX  ;Get the nearest position on real map
	NewGridY = *pt\y * mpic\ScaleIndexY  ;
	
	If NewGridX - mpic\halfx < 0
		NewGridX = 0
	ElseIf NewGridX + mpic\halfx > ImageWidth(mpic\The_Map)
		NewGridX = ImageWidth(mpic\The_Map) - mpic\width
	Else
		NewGridX - mpic\halfx
	EndIf
	
	If NewGridY - mpic\halfy < 0
		NewGridY = 0
	ElseIf NewGridY + mpic\halfy > ImageHeight((mpic\The_Map))
		NewGridY = ImageHeight(mpic\The_Map) - mpic\height
	Else
		NewGridY - mpic\halfy
	EndIf
	FreeImage(Displaymap)   ;forgot this one - memory leak.
	Displaymap = GrabImage(mpic\The_Map, #PB_Any, newGridx , newgridy, ScreenWidth(), ScreenHeight())
EndProcedure


Procedure Run_Main()
Repeat
	ClearScreen(0)		
	event = WaitWindowEvent()
	If IsImage(Displaymap) > 0
		StartDrawing(ScreenOutput())
		DrawImage(ImageID(Displaymap),0,0)
		StopDrawing()
	EndIf
	
	ExamineMouse()
	
	If MouseButton(#PB_MouseButton_Left) 	And mpic\InOut = 0 ;Check the position and map zoom
		pt\x = MouseX() + 25 
		pt\y = MouseY() + 25
		ScaleNewPoint(pt)
		mpic\InOut = 1
	EndIf
	
	DisplayTransparentSprite(SpriteX, MouseX(), MouseY())
	
	If MouseButton(#PB_MouseButton_Right) And mpic\InOut = 1
		ret = ZoomOut()
		mpic\InOut = 0
	EndIf	
	
	ExamineKeyboard()
	
	If KeyboardReleased(#PB_Key_F2)
		ReleaseMouse(1)
		ret = LoadMyBigMap()
		ReleaseMouse(0)
	EndIf
	
	If KeyboardReleased(#PB_Key_F3)
		ReleaseMouse(1)
		ret = SaveMyMapSection()
		ReleaseMouse(0)
	EndIf
	
	If mpic\InOut = 1 ;Added simple scroller to the map.
		If KeyboardPushed(#PB_Key_Left)
			pt\x - 1 ;Change one point and scale up to normal size..It might stand still for a few seconds
							 ;depending on image size and/or point position.
			ScaleNewPoint(pt)
		EndIf
		If KeyboardPushed(#PB_Key_Right)
			pt\x + 1
			ScaleNewPoint(pt)
		EndIf
		If KeyboardPushed(#PB_Key_Up)
			pt\y - 1
			ScaleNewPoint(pt)
		EndIf
		If KeyboardPushed(#PB_Key_Down)
			pt\y + 1
			ScaleNewPoint(pt)
		EndIf
	EndIf	
	FlipBuffers()
Until KeyboardPushed(#PB_Key_Escape) Or event = #PB_Event_CloseWindow
EndProcedure

Openmain()
Run_Main()
End

Example for canvas: Scroller works, but not nearly as smoothly as WindowedScreen naturally.

Code: Select all

UsePNGImageDecoder()
UsePNGImageEncoder()
UseJPEGImageDecoder()
UseJPEGImageEncoder()
UseTIFFImageDecoder()
UseTGAImageDecoder()

Structure MegaPic_Data
	The_Map.i
	The_TmpMap.i
	The_MapName.s
	ScaleIndexX.f
	ScaleIndexY.f
	InOut.i
	halfx.i
	halfy.i
	width.i
	height.i
EndStructure

Global Main, LoadButton, SaveButton, MapCanvas
Global Displaymap.i, mpic.MegaPic_Data, pt.POINT, pt2.POINT

Declare OpenMain(x = 0, y = 0, width = 849, height = 657)
Declare LoadMyBigMap()
Declare ZoomOut()
Declare SaveMyMapSection() ;type 0 = png : type 1 = jpg : type 2 = bmp
Declare ScaleNewPoint(*pt.POINT)

Procedure OpenMain(x = 0, y = 0, width = 849, height = 657)
  Main = OpenWindow(#PB_Any, x, y, width, height, "Loading large images and save example", #PB_Window_SystemMenu | #PB_Window_MinimizeGadget | #PB_Window_TitleBar | #PB_Window_ScreenCentered)
  LoadButton = ButtonGadget(#PB_Any, 3, 0, 87, 21, "Load")
  SaveButton = ButtonGadget(#PB_Any, 100, 0, 87, 21, "Save")
  MapCanvas  = CanvasGadget(#PB_Any, 3, 24, 846, 633, #PB_Canvas_DrawFocus|#PB_Canvas_Keyboard)
  
  mpic\width = GadgetWidth(MapCanvas)
  mpic\height = GadgetHeight(MapCanvas)
  mpic\halfx = mpic\width  / 2
  mpic\halfy = mpic\height / 2
EndProcedure

Procedure LoadMyBigMap()
	Patt.s = "JPG files (*.jpg)|*.jpg|PNG files (*.png)|*.png|Bitmap files(*.bmp)|*.bmp"
	mpic\The_MapName = OpenFileRequester("Select map to load..", "", patt, 0)
	If mpic\The_MapName <> ""
		If IsImage(mpic\The_Map) > 0
			FreeImage(mpic\The_Map)
		EndIf
		
		If IsImage(Displaymap) > 0
			FreeImage(Displaymap)
		EndIf
		
		mpic\The_Map = LoadImage(#PB_Any, mpic\The_MapName)
		
		If IsImage(mpic\The_Map) > 0	;Image is valid
			mpic\The_TmpMap = CreateImage(#PB_Any, mpic\width, mpic\height, 32,0)
			StartDrawing(ImageOutput(mpic\The_TmpMap))
			DrawImage(ImageID(mpic\The_Map), 0, 0, mpic\width, mpic\height)
			StopDrawing()
			
 			Displaymap = CopyImage(mpic\The_TmpMap, #PB_Any)
			mpic\ScaleIndexX = ImageWidth(mpic\The_Map) / mpic\width
			mpic\ScaleIndexY = ImageHeight(mpic\The_Map) / mpic\height
			mpic\InOut = 0  ;Full image scaled down otherwise 1 if zoomed
			
			StartDrawing(CanvasOutput(MapCanvas))
			DrawImage(ImageID(mpic\The_TmpMap), 0, 0, mpic\width, mpic\height)
			StopDrawing()
		Else
			MessageRequester("Error!", "Error loading image (not enough memory)")
		EndIf
	EndIf
	ProcedureReturn #True
EndProcedure

Procedure ZoomOut()
	If IsImage(Displaymap)
		FreeImage(Displaymap)
	EndIf
	If IsImage(mpic\The_TmpMap)
		Displaymap = CopyImage(mpic\The_TmpMap, #PB_Any)
		StartDrawing(CanvasOutput(MapCanvas))
		DrawImage(ImageID(Displaymap), 0, 0, mpic\width, mpic\height)
		StopDrawing()
	EndIf	
EndProcedure

Procedure SaveMyMapSection() ;type 0 = png : type 1 = jpg : type 2 = bmp
	Protected Savename.s
	Patt.s = "JPG files (*.jpg)|*.jpg|PNG files (*.png)|*.png|Bitmap files(*.bmp)|*.bmp"
	Savename = SaveFileRequester("Save part as...","",patt, 0)
	Select SelectedFilePattern()
		Case 0 ; Png
			ret = SaveImage(Displaymap, Savename + ".png", #PB_ImagePlugin_PNG)
		Case 1 ; Jpg
			ret = SaveImage(Displaymap, Savename + ".jpg", #PB_ImagePlugin_JPEG, 8)
		Case 2 ; Bitmap
			ret = SaveImage(Displaymap, Savename + ".bmp", #PB_ImagePlugin_BMP)
	EndSelect
	ProcedureReturn #True
EndProcedure

Procedure  ScaleNewPoint(*pt.POINT)
	Protected NewGridX.i, NewGridY.i
	
	If IsImage(mpic\The_Map) = 0
		ProcedureReturn 
	EndIf
	
	NewGridX = *pt\x * mpic\ScaleIndexX  ;Get the nearest position on real map
	NewGridY = *pt\y * mpic\ScaleIndexY  ;
	
	If NewGridX - mpic\halfx < 0
		NewGridX = 0
	ElseIf NewGridX + mpic\halfx > ImageWidth(mpic\The_Map)
		NewGridX = ImageWidth(mpic\The_Map) - mpic\width
	Else
		NewGridX - mpic\halfx
	EndIf
	
	If NewGridY - mpic\halfy < 0
		NewGridY = 0
	ElseIf NewGridY + mpic\halfy > ImageHeight((mpic\The_Map))
		NewGridY = ImageHeight(mpic\The_Map) - mpic\height
	Else
		NewGridY - mpic\halfy
	EndIf
	If IsImage(Displaymap) > 0
		FreeImage(Displaymap)
	EndIf
	Displaymap = GrabImage(mpic\The_Map, #PB_Any, NewGridX , NewGridY, mpic\width, mpic\height)
	StartDrawing(CanvasOutput(MapCanvas))
	DrawImage(ImageID(Displaymap), 0, 0, mpic\width, mpic\height)
	StopDrawing()
EndProcedure

Procedure Main()
	Repeat	
		ev = WaitWindowEvent()
		et = EventType()
		Select ev
	    Case #PB_Event_Gadget
	    	Select EventGadget()
	    		Case LoadButton
	    			LoadMyBigMap()
	    		Case SaveButton
	    			SaveMyMapSection()
	    		Case MapCanvas
	    			If et = #PB_EventType_LeftClick And mpic\InOut = 0
		    			pt\x = GetGadgetAttribute(MapCanvas, #PB_Canvas_MouseX)
		    			pt\y = GetGadgetAttribute(MapCanvas, #PB_Canvas_MouseY)
							ScaleNewPoint(pt)
							mpic\InOut = 1
						EndIf
						If et = #PB_EventType_RightClick And mpic\InOut = 1
							ret = ZoomOut()
							mpic\InOut = 0
						EndIf
						If et = #PB_EventType_KeyDown And mpic\InOut = 1
							keyVar = GetGadgetAttribute(MapCanvas, #PB_Canvas_Key)
							If keyVar = #PB_Shortcut_Left
								pt\x - 1
								ScaleNewPoint(pt)
							EndIf
							If keyVar = #PB_Shortcut_Right
								pt\x + 1
								ScaleNewPoint(pt)
							EndIf
							If keyVar = #PB_Shortcut_Up	
								pt\y - 1
								ScaleNewPoint(pt)
							EndIf
							If keyVar = #PB_Shortcut_Down
								pt\y + 1
								ScaleNewPoint(pt)
							EndIf
						EndIf
							
				EndSelect
	  EndSelect
  Until ev = #PB_Event_CloseWindow
EndProcedure

OpenMain()
Main()
End

[Mythros]

BEAUTIFUL, Peter! =D Simply BEAUTIFUL! =)

[tinman]

Some larger images at http://visibleearth.nasa.gov/view.php?id=73826 - 21600 * 10800

If you want a really large image you can put the tiled images together for a total of 86400 * 43200 :)

[DK_PETER]

@tinman

HOLY CRAP, tinman! That's some heavy duty images..Took me almost 9 minutes to download a 21600*21600 image!
Edit 2: Well, didn't have a problem loading the 21600*21600 image this morning. Just noticed, that I had a couple of
programs running, which were a bit eager to swallow some memory.

[Lord]

Just tried your code with an image of 29960x16960.
Result: "Unable to load image".

Instead loading an image I inserted in LoadMyBigMap()

CreateImage(#PB_Any, 29960, 16960)
instead of
LoadImage(#PB_Any, mpic\The_MapName)

Same result.
My code using canvas works with this size.

If I remeber correct, Images are more restrictive than
Canvas.

[falsam]

Hello DK_PETER. Good Job buttt ..... Bug when you click with the right mouse button without image. Disabled right click when the image is not loaded.

[DK_PETER]

@falsam.
Oooops!! Fixed.
Thanks for the 'heads up'.

Best regards
Peter

[DK_PETER]

@Lord.

It's a memory issue. On my machine I can, without any trouble load
an image of 21600*21600. (8 GB ram).
On my buddy's pc, I loaded an image of 30000*30000. He has 32 BG ram.
After that test, I couldn't see the point of going any further.

Best regards
Peter

[Lord]

Hi Peter!

...
It's a memory issue. On my machine I can, without any trouble load
an image of 21600*21600. (8 GB ram).
On my buddy's pc, I loaded an image of 30000*30000. He has 32 BG ram.
...

That's confusing.
Fred wrote:

"You should be limited to 2GB image backend, PB use DIB on Windows:

http://social.msdn.microsoft.com/Forums ... sical-ram-

Is Fred wrong?

As I already wrote, I can go up to approximately 29000x19000 pixel
on my 16 GB machine. Thats ~ 1.6 GB needed. Then CanvasOutput()
starts still to return a handle, but canvas is not permanent.
CanvasGadget can still be greater (close to consume 2 GB). So I
accepted Freds statement.
21000x21000 takes about 1.3 GB. So this is ona a 8-GB-machine no
surprise. But 30000x30000 on 32 GB ? That will consume 2.7 GB!
How did you do that? And who is right?

I still just want to use a canvas as large as possible. The goal is
37520x24240 pixel, but this would use >2.7GB (2GB limit???).

What OS is was used on your buddy's machine?

[DK_PETER]

@Lord

Hi Lord.

I must admit, I didn't see the result for myself. I sent him the test file and asked him to test it out
with the biggest possible pictures he could produce before a fail occured.
I would NEVER dream questioning the authors of PureBasic, when it comes to limits, so when he
explains, that that's the limit, then the debate is over.
I'm going to visit my friend this week-end and see, if he really did load an image of 30000*30000
or kick his butt, if he's done something other than what I've told him to do. (Which I serieouly
believe, that he did - now).

Edit: He's got: Windows 7 ultimate 64 bit, 32 BG, ASUS GeForce GTX Titan - 6GB GDDR5

Best regards
Peter

[Lord]

Hi Peter!

...
I must admit, I didn't see the result for myself. I sent him the test file and asked him to test it out
with the biggest possible pictures he could produce before a fail occured.
...
I'm going to visit my friend this week-end and see, if he really did load an image of 30000*30000
...

And make sure he uses a program written in PureBasic using one large CanvasGadget.
I also have no problem to open large pictures using (for example) the windows picture viewer.

[DK_PETER]

Hi Peter!
And make sure he uses a program written in PureBasic using one large CanvasGadget.
I also have no problem to open large pictures using (for example) the windows picture viewer.

I'll make sure to bring such an example too.
I'll post my findings, when I I know more.

[wilbert]

On OS X I have Photoshop Elements from Adobe.
The maximum image size it supports is 30000 x 30000 pixels.
Since OS X always uses 32 bit, you would expect it to use 3.35 GiB or something like that.
Instead it uses the physical memory it is allowed to use and uses virtual memory to be able to work with such a large image.

Since the canvas doesn't support virtual memory (as far as I know), creating a 37520x24240 pixel canvas (if PureBasic would allow it) from my point of view is only acceptable for a private application running on your own computer.

[Lord]

...
Since the canvas doesn't support virtual memory (as far as I know), creating a 37520x24240 pixel canvas (if PureBasic would allow it) from my point of view is only acceptable for a private application running on your own computer.

But a programming language should allow to use the physical resources
without artifical limits or delivering doubtful handles.
In my case it is a private application on my own computer, but I don't
see, why somebody shouldn't use the resources available if the real
limit of memory and the real limit of canvas is tested (what ever comes
first) and used.

[wilbert]

In my case it is a private application on my own computer, but I don't
see, why somebody shouldn't use the resources available if the real
limit of memory and the real limit of canvas is tested (what ever comes
first) and used.

For a private application I completely agree.
But if I would buy an application, start that as the first application I'm running and it consumes everything available so I can't start another application, I would complain to the creator about it unless I'm warned in advance that it operates this way.