Playing with the N95 - Use LBS API and so more

In this second tutorial, now we know how to get our Location, we will use it to draw some maps, centered on our location.

This tutorial will just describe a simple Application which draw maps we had generated before, no download in the App here, so the bottleneck will be the data, here I'll just use a few maps around my house I've generated but if you to make a application which cover a big landscape you'll have to find another solution, or pass long time with making maps..

So, First, what are this maps :
The important thing with the maps is that they need to be geolocated, we must know the location of 2 point in the map. So with every image you need to have 2 Location, not very convenient, a simple solution is to use images which are contiguous are have all the same size, so we just need to have one image with 2 Geo located point, and we can guess the Location on all other images, with numerated them with an X and an Y index :

I've made the choice to use OpenGLES API (3D API) for drawing maps, so these ones need to have width and height power of two : 16,32,64,128,256,512.... and use square maps are useful for computing coordinate so I will use 256x256 image.

To identify maps we will have to named the according their X and Y offset, so here is the naming rules I choose for this App :
maps_%d_%d.png :

• X:0 and Y:0 will be saved under maps_0_0.png
• X:1 and Y:0 will be saved under maps_1_0.png
• X:-1 and Y:-1 will be saved under maps_-1_-1.png
• etc...

So Basically, how maps will be drawn by the Application :
When we have our Location, thanks to the part 1 of this tutorial , first thing is to know on wich map we are. To do this we calculate the distance between our Location and the Origin Point of (0,0) maps, the red point, and we divise these distances, along X and Y axes, by the size of one maps. This will give us the indexes, X and Y, of the maps on which we are located.

After we draw this maps, with calculate the good pos on the screen to have our location centerd on the screen.
Finally we draw the maps adjacent to this one :

Perhaps it's not very clear but you'll see calculation will be quite simple.

The next step I'd Like to explain is why I'll use 3D to draw the maps. The problem of using fixed size image is that it's not very convenient to do zoom in or out on the maps, we need, once to resize the maps and, twice, to make new calculation to know were drawing the maps on the screen. With using 3D drawing, the Open GL ES API will do that for us. We just have to draw the maps on a plane, which is for example along an XY plane, and when we move this plane along Z axe we do zoom in or out, the closer we are from the origin, the more we zoom :

So with this solution we don't have to manage zoom, cool isn't it?
And drawing maps on a plane in 3D is nearly the same than drawing on the screen.

Ok last thing we need to know before start the code is how managing texture. Texture in 3D are image which, in our case, will be drawn on a squared plane, there'll be a plane for each texture/maps we will draw.
A CTextureManager class will be create which will load the maps file and transform them to OpenGLES textures.

Ok so let's go with code.

First we will reuse the CActivePositionner we use in the First Part, http://www.newlc.com/playing-n95, but with modifying it a little : We had it a Real Observer to pass the Position to our App :

For this App we will create a standard App/View/UI/Document App And most of the code will be in the View Class.
This class will henerits MGPsObserver to gat GPS Location, via SetPos and SetError method.
The view class will use some variable to be able to draw the maps according to the position which are :

iXIdx and iYIdx are x and y indexes of the maps and iDeltaX and iDeltaY are the position of the phone on this map, relative position with a value between 0 and 1.
These variables are updated in the SetPos method, when we have our Location, and use in the Draw method.

we will use also two TReal32 iWidth and iHeight with represent the size, in meters, of a maps, we need them to calculate the precedents variables.

So Now let's see the principals methods of the CMapGpsAppView class :

First we use constants which will represent the Top Left and Bottom Right coordinates of the (0,0) maps, red and blue dot above.
And also a constant defining the path which are located the maps:

The ConstructL methods

in which we
- Initialise OpenGLES :

- Create a Texture Manager to Load and Store maps, we will see this class after

- Create our CActivePositionner

- Calc the iWidth and iWidth value for a Maps, according the KPosTL and KPosBR constants

- And finally create a PeriodicTImer which will call a 3D Specific method for Draw, in OpenGLES we can't use the standard Draw method so we need to do this, here we choose to redraw every 100ms ( 10 time / seconds )

Perhaps the OpenGLES initialisation seems a bit complicated but just look at some OpenGL tutorial and you'll see it's quite simple.

Next methods the SetPos :

Here we just calc the distance along x and y axes form our location and the Top Left Position of the (0,0) maps, and divise them by the iWidth and iHeight size of a maps. The rest of this division will give the iDeltaX ans iDeltaY value

- Last important method, the Draw methods

Don't be afraid by this methods, it just :

• Clear the screen with glClear
• Start a Loop to Draw the central map and the one which are adjacent, so the "for (int x = -1;x<=1;x++) and for (int y = -1;y<=1;y++) "
• Declare 2 triangles to make a square in pfVertices, which are decaled by the iDeltaX and iDeltaY value calc in SetPos to make our position be in the center of the screen
• Format a string to get a the good maps with "str.Format"
• Declare some texture coordinate to draw the maps on the square in afTexCoord
• Load and Select the maps to bedrawn with iTxtManager->SelectTexture
• If the maps is Loaded Draw it with glEnableClientState(GL_TEXTURE_COORD_ARRAY) and glTexCoordPointer(2,GL_FLOAT,0,afTexCoord);
• Finally draw this with glDrawArrays and put that on the screen with eglSwapBuffers

Ok OpenGLES language has to be understood but there is some example in the S60 SDK, just play a little with them and you'll understand everything.
That's all important methods for the CMapGpsAppView class.

Now just have a look on the CTextureManager class. It has an Array In which it save the images it has already loaded and when we ask it for an image, it first parse the array to find the image, and select it for OpenGLES if founded. If non founded the image is added in the array and then loaded.

The Array is CPointerArray which contains some CTexture object which are defined like that :

CTextureManager is an ActiveObject which use the CImageDecoder to load the image.
There is two important method for this class :
First the SelectTexture which look for the image and add it in the array if not founded :

And the RunL methods which Get the image decoded with CImageDecoder and transform it into OpenGLES Format and Lauch another Image Decoding if there is pending image in the array:

Ok that's All
I hope this tutorial is still clear and that the 3D drawing don't not confuse you too much
But I really thinks that 2D drawing, with gc.BitBlt methods wouldn't have easier to understant because we would have take the maps pixels resolution into account and it's not simple, here we don't care, because image are just drawn on a square.

--
MarCo