Image Manipulation

Hi all,

I’m looking at loading and viewing images, specifically map tiles. I have all the required tiles stored locally and available to the app; they average 1-2 mb each in size.

I can load them onto a canvas just fine, but now Im looking at being able to move around, using either a mouse drag or direction buttons. The issue is when moving from the edge of one tile to the edge of the next. Kinda like stitching them together as and when the user moves in the appropriate direction.

Any thoughts on how this can be achieved ?

Hi

Have a look at the Example Projects in the Xojo distribution. In the Graphics and Multimedia folder, there’s one called CanvasDrawDrag that looks pretty close to what you need.

Regards - Richard.

[quote=142298:@Stephen Thomas]Hi all,

I’m looking at loading and viewing images, specifically map tiles. I have all the required tiles stored locally and available to the app; they average 1-2 mb each in size.

I can load them onto a canvas just fine, but now Im looking at being able to move around, using either a mouse drag or direction buttons. The issue is when moving from the edge of one tile to the edge of the next. Kinda like stitching them together as and when the user moves in the appropriate direction.

Any thoughts on how this can be achieved ?[/quote]

Stephen,

This is an example app I wrote for another Xojo coder. It has exactly what you need on the canvas for moving your images around.
https://www.dropbox.com/s/563p96nuhdtq9tc/VisualCalculus.zip?dl=0

Hth

[quote=142329:@Mike Cotrone]Stephen,

This is an example app I wrote for another Xojo coder. It has exactly what you need on the canvas for moving your images around.
https://www.dropbox.com/s/563p96nuhdtq9tc/VisualCalculus.zip?dl=0

Hth[/quote]

Mike, that zip file is empty Im afraid.

[quote=142326:@Richard Herd]Hi

Have a look at the Example Projects in the Xojo distribution. In the Graphics and Multimedia folder, there’s one called CanvasDrawDrag that looks pretty close to what you need.

Regards - Richard.[/quote]

Hi Richard,

Spotted those examples. I need to move the entire image though rather than items within it, if that makes sense ?

Well that stinks. Sorry about that. Ill try to find some additional examples.

If you consider the overall image as a set of smaller tiles (maybe 64 x 64 or larger)

Then moving ‘the image’ becomes a question of ‘painting the visible bit’

There have been a number of coding examples of using OpenGL to do this kind of world mapping in recent months, but if you want to go pure Xojo, the technique is to know where each ‘virtual’ tile gets its ‘actual’ information from.

Then , having ‘dragged’ the image, or used the scrollbar, you can redraw the visible tiles in the paint event
This implies a ‘drag and wait for paint’ experience, but that seems to be exactly how most map viewers I have seen do the job too.

You could smooth the experience by creating an off screen image 9 times the size of the visible window, so that you can drag ‘the whole image’ smoothly.
Assuming the user can only drag a visible window to the left or right by the width of the window, then you redraw the 9 areas as soon as they let go of the mouse and reset your base co-ordinates

I saw something in the Books (pds) while searching something else. Load a pdf at a time and search KeyDown or Arrow and you will find it (probably not in Book 1).

[quote=142396:@Jeff Tullin]If you consider the overall image as a set of smaller tiles (maybe 64 x 64 or larger)

Then moving ‘the image’ becomes a question of ‘painting the visible bit’

There have been a number of coding examples of using OpenGL to do this kind of world mapping in recent months, but if you want to go pure Xojo, the technique is to know where each ‘virtual’ tile gets its ‘actual’ information from.

Then , having ‘dragged’ the image, or used the scrollbar, you can redraw the visible tiles in the paint event
This implies a ‘drag and wait for paint’ experience, but that seems to be exactly how most map viewers I have seen do the job too.

You could smooth the experience by creating an off screen image 9 times the size of the visible window, so that you can drag ‘the whole image’ smoothly.
Assuming the user can only drag a visible window to the left or right by the width of the window, then you redraw the 9 areas as soon as they let go of the mouse and reset your base co-ordinates[/quote]

I was pondering this exact method last night.

The ‘process’ being something like this:

Load initial map tile and display/centre it
Using this as a centre tile, load the 8 surrounding ones and create one larger one in memory
When the user has scrolled past what would be the edge of the original, display the bigger in memory image at the same coordinates as the last known ones
Whenever we get to within 2 canvas widths or less of the edge of the ‘large’ image, repeat the process of building a big image ready to swap them over.
When a swap occurs, destroy the original image.

If the creation of the new image can be completed in advance, then swapping from the existing one to the new one should be fairly smooth.

As for creating the larger images in memory, something along these lines:

Get the size for each map tile on disk
Create an equally sized memory block
Create a binary stream
Load the contents of the map tile to the memoryblock using the binary stream
Repeat until all 9 are loaded
Since the tiles are all exactly the same size in pixels, create a single in-memory image, 3 x 3 tiles in size, and paint the individual tiles onto it
Deallocate the 9 individual memory blocks to free up memory

Looking again at the map tile sizes this morning, they do vary depending on the content; the largest is 7.7mb.

So a single large image would be no more than 70 mb in size. That should be a doddle for Xojo to manipulate. So much so, that I think you could possibly even pre-empt to the extent of creating the large tiles in advance for all four directions, since the user could actually change their mind and scroll a different direction after all.

Creating 4 x large images in memory, total no more than 280 mb should be achievable; Ive seen some people manipulating single images much larger than this.

I think the trick here is making the right decision in determining when to create the next large image, based on the users scroll activities.

There are a maximum of 800 map tiles in total so far to cover the planned geographical region Im interested in. So whatever works for this, could easily work on a much larger scale too.

To add to the above, it would be fairly easy to create a small sqlite table (Or even hard code into the app itself), a list of all known map tiles, together with the surrounding 8 that are required in each case. That would help reducing the logic required to determine which tiles to load.

There is some good information already known about this whole process.

1 The map tiles are all exactly the same size in pixels.
2 The map tiles have a consistent naming convention.
3 Each time we create the large image, it will only ever be exactly 9 x tiles to load.
4 We know the maximum file size of all the map tiles.

Based on just the above, a test run could determine the maximum time required to assemble a single large image, based on the worst case scenario. That assembly time can then be considered in the determination rules used for actually triggering the assembly routine.

Graphics.DrawPicture will be at the heart of the process.

The georeferencing data is available for every map tile.

The broader system will intially supply either 12 figure UK map references (Accurate to within 1 metre) or WGS84 Latitude/Longitude values which are accurate to within just a few millimetres. I already have a fully working and tested geoconversion engine that converts between the two.