BadaDev » bada Tutorial: displaying a transparent image on a form

bada Tutorial: displaying a transparent image on a form

wit, December 14th, 2009

bada, c++, example, ide, images, media, sdk, tutorial

Here’s a quickie that might save you some time in the future. Take a look at the other tutorial (if you haven’t already) so you get the basics, before you read on. The idea is to have a simple form and draw/show a PNG image (that has some transparency) on the form.

You start with a bare-bone bada application’s project generated through the wizard. Create an empty form. Declare in the app’s class’ header some private pointers for the Frame and the Form (as described in the other tutorial) . Finally include FMedia.h and use its namespace – also do not forget to link to FMedia library as described on our bada forum.

#include <FApp.h>
#include <FBase.h>
#include <FGraphics.h>
#include <FMedia.h>
#include <FIo.h>
#include <FLocales.h>
#include <FText.h>
#include <FSystem.h>
#include <FUi.h>

using namespace Osp::App;
using namespace Osp::Base;
using namespace Osp::Graphics;
using namespace Osp::Media;
using namespace Osp::Io;
using namespace Osp::Locales;
using namespace Osp::System;
using namespace Osp::Text;
using namespace Osp::Ui;
using namespace Osp::Ui::Controls;

When you are done, you only need to modify the OnForeground function of the app’s class.

void
TestApp::OnForeground(void)
{
    // 1.  First draw the frame itself (+ all child elements/controls)
    pFrame->Draw();

    // 2. Declare some stuff we will need for drawing
    result r;
    Canvas *canvas;
    Bitmap* bitmap;
    Image* bitmapDecoder = new Image();

    // 3. Construct the decoder
    r= bitmapDecoder->Construct();
    if(IsFailed(r))
    {
        AppLog("Failed to construct decoder!");
    }

    // 4. decode the image with alphas (to allow transparency)
    bitmap = bitmapDecoder->DecodeN(L"/Home/Res/Graphique.png", BITMAP_PIXEL_FORMAT_ARGB8888);
    if(!bitmap)
    {
        AppLog("Failed to decode image!");
    }

    // 5. Get the drawing canvas of the main form
    canvas = pForm->GetCanvasN();

    // 6. Draw on the form through the canavs
    // (note: all child elements of the form itself have already been drawn at 1.
    //        this means that we are drawing on top of everything else on this form)
    canvas->DrawBitmap(*(new Point(40,100)),*bitmap);

    // 7. Finally show the frame (including the children... like the form)
    //    on the screen
    pFrame->Show();

    // notice the N in GetCanvasN in 5. ? It means we have to get rid of the
    // canvas manually to avoid memory leaking!
    delete canvas;
    delete bitmap;
    delete bitmapDecoder;
}

You will need to put the image in the /Home/Res/ folder of your project (create a Res folder in the Home folder). EDIT: Before I forget it – you do need special privilege for this app, too, since you are reading an image file from the filesystem. Later on you’ll be able to download manifests from the official bada developers site. For now you’ll have to edit the manifest.xml with a text editor. Add the following lines in the privileges section.

<Privileges>
    <Privilege>
        <Name>IMAGE</Name>
        <GroupId>devicegr48</GroupId>
    </Privilege>

</Privileges>

Build it, run it, enjoy it!

Related posts:

39 Responses to “bada Tutorial: displaying a transparent image on a form”
By Adrian on Dec 14, 2009 | Reply

Thanks for yet another great tutorial. BTW can you send me a copy of the SDK and IDE to my e-mail please?
By wit on Dec 14, 2009 | Reply

Thank you for your comment, Adrian! It is much appreciated! Sorry, I cannot do what you asked me to. I have sent you an email.
By question on Dec 14, 2009 | Reply

when will be registration possible?
Currently I get an error at samsungmobile.com
By Adrian on Dec 14, 2009 | Reply

Thanks for the fast reply anyway. I asked someone on the forum to send me a link to download the SDK and IDE. Maybe he will be kind enough to send it to me. Else I’ll just have to wait for the official launch
By Adrian on Dec 14, 2009 | Reply

@question:
Registration is possible right now at http://developer.bada.com, however the bada SDK and IDE are not available to the public yet.
By question on Dec 14, 2009 | Reply

Well, if I try to register, I get a js box with “fail to register..” (FF & IE)
By Adrian on Dec 14, 2009 | Reply

Maybe there’s something wrong with bada’s developer site, because I heared another person not being able to signup.

I tried to register a new account now and it asks for my Samsung Innovator account. It didn’t ask it a few days ago when I signed up, so they are definately working at their bada site. Maybe preparing for the launch of the SDK to the public.
By Adrian on Dec 14, 2009 | Reply

I managed to create a new account. I completed all the fields and after that I clicked “Membership Authentification”. In the new window that opened I clicked “Sign up for a new ID”.

That’s it! Just press “Save my profile” and check your e-mail.
By Ivo on Mar 19, 2010 | Reply

Hi, I’m tryng to set a background image for the application I’m working on, but I can’t. I’ve tryed setting the image as background image of a label of my main form but it alway appears on the top of the others controls.
My application has a tabbed form that contains different panels that are hidden/shown according to the selected tab.Do you have any suggestion on how this can be done?
Is there any way to specify a hierarchy for the controls I’m using? Which control is the one in foreground if there are several visibles?
By wit on Mar 19, 2010 | Reply

… Well it depends on how you do all that stuff that you mention

If you followed this tutorial (and it is somewhat old already and needs a newer/cleaner version) then I think I know where the problem is.

could you try putting

pFrame->Draw();

at the end, just on the line before

pFrame->Show();

like:
```
// rest of code drawing the image here

pFrame->Draw();
pFrame->Show();
```
Try it. The thing is that pFrame->Draw() sends a drawing signal to all children including forms and controls. And only after that we start drawing the image, thus putting it on top. If we put pFrame->Draw() after that, then the image shall appear in the background.

There are a far more elegant ways of doing this, though, by overriding the OnDraw(). Maybe I’ll get a short tutorial out one of these days.

Regarding the z-index of the controls, I think it is natural, meaning: what you put last in the GUI designer (or in the code) will be on top of the rest.
By God on Apr 23, 2010 | Reply

I have edited the manifest xml file however I still get errors complaining about priviliges

0012.812,INFO,-01,-01,OspMain (24) > Application started.

0012.928,EXCEPTION,03,92,Osp::Ui::Control::SetBounds (417) > The control has not been constructed yet.

0013.051,EXCEPTION,-01,92,PrivilegeStore_retrievePrivilege (963) > [DataNotFoundException] Application has no privilege.

0013.051,EXCEPTION,03,92,Osp::Media::Image::DecodeN (104) > [E_PRIVILEGE_DENIED] Propagated.

0013.068,EXCEPTION,-01,92,PrivilegeStore_retrievePrivilege (963) > [DataNotFoundException] Application has no privilege.

0013.069,EXCEPTION,03,92,Osp::Media::Image::DecodeN (104) > [E_PRIVILEGE_DENIED] Propagated.

0013.069,INFO,03,92,Form1::OnInitializing (48) > Failed to decode images!

0654.117,INFO,-01,-01,OspMain (39) > Application finished.
By wit on Apr 23, 2010 | Reply

Hmmm, strange…
what if you leave out the GroupId thing? Like:
```
<Privileges>
    <Privilege>
        <Name>IMAGE</Name>
    </Privilege>
</Privileges>
```
Also, please note that this is an older post and things have slightly changed regarding the directories (http://www.badadev.com/working-with-files-and-directories-in-bada-part-1/).
If you placed your image (my.png) in the Home directory, then the path is “/Home/my.png”. If you placed it in the Res directory, then the path is “/Res/my.png”
By Gawcio on May 13, 2010 | Reply

It seems that GetAppId() and GetAppSecret() methods of your application must return values that match .. and … from your manifest.xml respectively. Check this.

(lost few hours to find this mismatch out, and after correcting it finally works!!!)
By Gawcio on May 13, 2010 | Reply

Oops something is missing. Should be:

“… match Id and Secret elements from your manifest.xml …”
By wit on May 14, 2010 | Reply

Hi Gawico,
this is a very old tutorial from early versions of the SDK! Things change!

I would not recommend use the code literally, but rather take and understand the essence. Then look up the API and make your own implementation!
By praveen kumar on May 17, 2010 | Reply

hiiiiiii
it was great to see the sample example for the transparent image but while im trying this code i was getting an error at getting the drawing canvas at the main form while im doing that the error was coming as form was not declared in the above scope can any body give me suggestions hw to solve it
By praveen kumar on May 17, 2010 | Reply

hiii Adrian,
this is praveen im getting an error in the making of transparent code the error is getting the drawing canvas at the main form while im doing that the error was coming as form was not declared in the above scope can u give me suggestions hw to solve it
By gaurav on May 25, 2010 | Reply

how we can add the zooming effect in picture..?
By geniass on May 25, 2010 | Reply

When I try this i get these errors:
Description Resource Path Location Type
undefined reference to `_imp___ZN3Osp5Media5ImageC1Ev’ testGame.cpp /testGame/src line 75 C/C++ Problem

Description Resource Path Location Type
undefined reference to `_imp___ZNK3Osp5Media5Image7DecodeNERKNS_4Base6StringENS_8Graphics17BitmapPixelFormatE’ testGame.cpp /testGame/src line 76 C/C++ Problem

on the lines of bitmap->DecodeN(…);

What could be the problem???????????
By gaurav on May 26, 2010 | Reply

may be problem is because you are not adding the graphics header file or not adding the IMAGE in mainfest.xml.
By wit on May 26, 2010 | Reply

geniass, you forgot to link the FMedia library.
http://forums.badadev.com/viewtopic.php?f=4&t=13

gaurav, you can make the picture bigger by using
```
result  DrawBitmap (const Rectangle &destRect, const Bitmap &srcBitmap, const Rectangle &srcRect;
```
of the Canvas. Just make the destination rectangle bigger. If you want interactive zooming through user input, you’ll have to develop it yourself
By geniass on May 26, 2010 | Reply

Thank you wit. THis was the problem. I thought it was something like this but I didn’t know how to fix it.
By Ice on May 27, 2010 | Reply

would you tell me how to use decodeurl function for getting remote pictures? i have no place to put listner. thanks a lot.
By wit on May 27, 2010 | Reply

Ice, what do you mean you have no place to put the listener? In the worst of cases you can implement the Osp::Media::IImageDecodeUrlEventListener in your form’s class.
```
class MyForm :
   public Osp::Ui::Controls::Form,
   public Osp::Media::IImageDecodeUrlEventListener
{
   // a lot of declarations here
   virtual void  OnImageDecodeUrlReceived (RequestId reqId, Osp::Graphics::Bitmap *pBitmap, result r, const Osp::Base::String errorCode, const Osp::Base::String errorMessage);
};
```
Then when you request the image from somewhere within your form’s code, you can simply pass *this as parameter for the listener.

when the image is downloaded/decoded, your callback function will be called OnImageDecodeUrlReceived(), providing you with the Bitmap for further processing.
By Lee Murray on Jun 2, 2010 | Reply

I am using tabs and I can’t get this example to work.
By Lee Murray on Jun 2, 2010 | Reply

in fact, how can I set a background image on a scroll panel?
By Preety on Jun 24, 2010 | Reply

i am unable to show the background image. kindly suggest something. i have written the above code in OnInitializing() method and also called Draw() , Show() method in the end..
plz help.

thanks
Preety
By wit on Jun 24, 2010 | Reply

The code above is pretty old. SDK has changed a lot in the last few months!

To draw an image on the form’s background you may want to:

1. Load the image in OnInitializing()

2. Override OnDraw() and draw the image there

… I need to post a new version of this tutorial… soon
By kassel on Jun 24, 2010 | Reply

Hi
i tried to separate the code into a self class passing the form, and added a iumage inside a panel.
But didn’t show anything.
Grrr, can give anyone an idea, url , code…
lot tnks
By Preety on Jun 29, 2010 | Reply

Kindly post some latest example sooner.

Thanks
Regards
Preety
By slash on Jul 15, 2010 | Reply

i have tested the exampland every things works great, no compilation error, nothing, but image is not showing. The output tab is not showing any kind of error. here is the image :
http://img684.imageshack.us/img684/9718/screenpie.png
if i do have to change my code and use OnInitializing() & OnDraw(), how could i do that?
and thanks in advance
By elp3rr0 on Jul 16, 2010 | Reply

hi,
when i do pImage = new Image();
show this error:
undefined reference to `_imp___ZN3Osp5Media5ImageC1Ev’

but i have included the #include , and added the line

IMAGE

on the manifest.xml

and the last test was reinstal the sdk, but doesn´t work.
By elp3rr0 on Jul 16, 2010 | Reply

sorry it was solved changuing of pc…
By jakimushka on Jul 27, 2010 | Reply

Hi, maybe we have memory leak at this line? We get memory from heap for point, but not release it. Or it’s Ok?

canvas->DrawBitmap(*(new Point(40,100)),*bitmap);
By wit on Jul 28, 2010 | Reply

jakimushka, yes, you are right.
This tutorial is very old and I made many mistakes back then
By jakimushka on Jul 28, 2010 | Reply

ok, thanks
And how are you think how will be better to implement main loop for game?
I think to create something like

class Game : public Thread
{
void Update();
void Draw();
Object* Run();
};

Game::Run(void)
{
Update();
Draw();
}
Is it good way, or will be better use timers, or thomesthing else?