Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Native Development

Reply
Contributor
takaya01
Posts: 19
Registered: ‎09-29-2012
My Device: blackberry bold

draw an image

In java version there is drawimage to render an image on the screen, what would be the equivalent in native? If you know the answer, can you tell me how you know the answr, I haven't been able to find any documentation.

Developer
MikePembo951
Posts: 107
Registered: ‎02-15-2012
My Device: Blackberry Playbook 32GB

Re: draw an image

[ Edited ]

In GLES1.1:

After you've loaded the image in to the memory, you need to create a GLtexture of the image, then create some UV coords(texture coords) and some vertices (XYZ)

After this you build an orthogonal projection matrix, then in the render() function add the texture coordinates and vertices to GLES buffers then draw the array.

I understand that the native documentation isnt nearly as extensive as BB10 and cascades.

 

note: my code is certainly not perfect (as im just a student of comp science) and works fine for me but if anyone has more expenrience of native development for pb then im open to suggestions.

 

Heres my rendering code for an image:

void RenderImage(Image* imagepointer)
{
glEnable(GL_TEXTURE_2D);
glBindTexture(GL_TEXTURE_2D, imagepointer->tex);
glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
//glColor4f(1.0f, 1.0f, 1.0f, 1.0f);
glEnableClientState(GL_VERTEX_ARRAY);
glEnableClientState(GL_TEXTURE_COORD_ARRAY);
//supply pointers
glVertexPointer(2, GL_FLOAT, 0, imagepointer->vertices);
glTexCoordPointer(2, GL_FLOAT, 0, imagepointer->texcoords);
//draw
glPushMatrix();
//apply transformations
if (imagepointer->scale != NULL)
{
glScalef(imagepointer->scale, imagepointer->scale, 1.0f);
}
glTranslatef(imagepointer->x, imagepointer->y, 1.0f);
glColor4f(1.0f, 1.0f, 1.0f, 1.0f);
glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
glPopMatrix();
//finish up
glDisableClientState(GL_VERTEX_ARRAY);
glDisableClientState(GL_TEXTURE_COORD_ARRAY);
glDisable(GL_TEXTURE_2D);
}

My "Image" class is build up of a GLuint (unsigned integer) for the texture id, two arrays of floats for texture coordinates and vertices, a string for the filename, a float for scale, and "enabled" bool, and GLuint for height and width. (Also has function for delete which frees up memory from dynamic arrays after use).

 

Code for creating an orthogonal matrix: (replace surface width and height for whatever variables you use for them)

void Init_2D()
{
glDisable(GL_DEPTH_TEST);
glViewport(0, 0, surface.Width_Get(), surface.Height_Get());
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
glOrthof(0.0f, surface.Width_Get(), 0.0f, surface.Height_Get(), -1.0f, 1.0f);
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
}

 

Code for loading an image in to the Image class:

bool GetImage(Image* image)
{
int rc;
img_t img;
img_lib_t ilib = NULL;
if ((rc = img_lib_attach(&ilib)) != IMG_ERR_OK) {
fprintf(stderr, "img_lib_attach() failed: %d\n", rc);
return false;
}
/* initialize an img_t by setting its flags to 0 */
img.flags = 0;
img.format = IMG_FMT_RGBA8888;
img.flags |= IMG_FORMAT;

if ((rc = img_load_file(ilib, (char*)image->filename.c_str(), NULL, &img)) != IMG_ERR_OK) {
fprintf(stderr, "failed to load.png"); return false;
}
glEnable(GL_TEXTURE_2D);

glGenTextures(1, &image->tex);
glBindTexture(GL_TEXTURE_2D, image->tex);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);

glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, image->width, image->height, 0, GL_RGBA, GL_UNSIGNED_BYTE, img.access.direct.data);
glDisable(GL_TEXTURE_2D);
img_lib_detach(ilib);

return true;
}

 

Like I said, this code isnt perfect so it might be best to look at the "Good Citizen" project example, there you'll find methods for drawing an image.

 

 

The way I learn to develop for playbook (especially with OpenGLes):

-Read through ALL tutorials and read through ALL example code for Playbook., (Especially Good Citizen)

-Read through the code for bbutil library and make sure its doing what you want it to do if you are going to use it inn your project. (Notice it doesnt initialise a Depth buffer so if you need one you'll need to add one yourself.)

-Read through OpengLES tutorials for android and iOS (of which there are MANY MANY more than there are for Playbook)

-Use the this forum.

 

Contributor
takaya01
Posts: 19
Registered: ‎09-29-2012
My Device: blackberry bold

Re: draw an image

thanks for the replay, I should have been more specific, I was talking about BB10.

Developer
MikePembo951
Posts: 107
Registered: ‎02-15-2012
My Device: Blackberry Playbook 32GB

Re: draw an image

Native with or without Cascades.

Without cascades then code similar to above should work. 

 

I've never used cascades, only core native, but I'd recommend you to go through all the tutorials here:

https://developer.blackberry.com/cascades/sampleapps/

 

Read through the tutorials and example code slowly, ensuring you understand exactly what the code does. 

Contributor
takaya01
Posts: 19
Registered: ‎09-29-2012
My Device: blackberry bold

Re: draw an image

"Native with or without Cascades". I thought it was native or Cascades. I don't understand what the difference is. In the above example, it seems like 30 lines of code to display an image, yet in the old java way  it only took one line to dispaly an image. 

Developer
MikePembo951
Posts: 107
Registered: ‎02-15-2012
My Device: Blackberry Playbook 32GB

Re: draw an image

Cascades is native but with a UI framework on top.

Core native has no UI framework and you must build it yourself.

 

The reason native code is much longer is because you have to write all the functions yourself:

-Loading the image from a file

-Creating a GLtexture from the image

-Create XYZ and UV coordinates for the image

-Attach arrays and the gltexture to opengl and render

 

So which one to choose?:

If you are programming a complex OpenGLES 2d or 3d _game_ then core native is what you should use.

If you are porting a game from android/another platform then use core native.

If you are programming an app then use cascades.

If you don't want to worry about programming the UI and all the function to get it to work then use cascades.

 

https://developer.blackberry.com/develop/platform_choice/ndk.html

^This explains the difference.

 

Yes, in java it may take only a few line sof code to display rand image, this is because all the code providing those functions will be hidden in various libraries, but non-native code will almost always be slower than native code because it's likely the libraries are running code that is completely redundant to you/your project.