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
New Developer
Posts: 6
Registered: ‎08-16-2014
My Device: Simulator
My Carrier: Koodo

Using colorfilter on a background image

[ Edited ]

I have been puzzled by the error message i get when i try to programmatically change the colorfilter

on a background image. I have a png which is nine-sliced, and am using it to make a button with rounded corners.

 

I want to change it from white to another colour depending on things computed in the program,

and for all my struggle i don't see any example that connects the dots.

 

I created a simple project to showcase the problem, in qml, of what i am trying to do.

 

I tried the colorfilter setting but it has no effect.

As a demo i put in something that compiles and runs, in the OnCreationCompleted() routine.

If at that location i set the background to solid red, it works, so i know the code is being run.

 

I could not find a solid case of a colorfilter being used.

This demo is just from QML but i would be happy if it was a c++ routine that sets the filterColor.

 

The border is still white. Any advice is appreciated, especially

some code that uses colorfilter programmatically. I could not get the word setColorFilter to compile in any of the many ways i tried.

 

Thanks

Steve

 

here's what's in the amd file, in case it helps...

 

#RimCascadesAssetMetaData version=1.1
source: "white_outline.png"
sliceMargins:12 12 12 12
# enable colorization by setting type to template
type: template

 

and this is the main.qml        :

 

import bb.cascades 1.3

Page {
    Container {
        background: {
            color: Color.create("#000000")
        }
        Container {
            horizontalAlignment: HorizontalAlignment.Fill
            Container {
                id: lend_button_outer
                horizontalAlignment: HorizontalAlignment.Fill
                Container {
                    id: lend_button_holder
                    horizontalAlignment: HorizontalAlignment.Fill
                    leftPadding: 2
                    rightPadding: 2
                    Container {
                       
                        id: lend_button
                        horizontalAlignment: HorizontalAlignment.Fill
                       
                        preferredHeight: 100
                       
                        background: lend_background.imagePaint
                        attachedObjects: [
                            ImagePaintDefinition {
                                id: lend_background
                               
                                imageSource: "asset:///white_outline.amd"
                            }
                        ]
                        Label {
                            id: lend_button_label
                            text: qsTr("Lend") + Retranslate.onLocaleOrLanguageChanged
                            verticalAlignment: VerticalAlignment.Center
                            horizontalAlignment: HorizontalAlignment.Center
                            textStyle.color: Color.create("#ffffff")
                            textStyle.base: SystemDefaults.TextStyles.MediumText
                        }
                        onCreationCompleted: {
                           
                            lend_background.background.colorFilter = Color.create("#ff400000");
                            //lend_background.imageSource = "asset:///white_shading.amd"
                        }
                        onTouch: {
                            if (event.isDown() || event.isMove()) {
                                // Focused, change the background
                            } else if (event.isUp()) {
                                // Unfocused
                            } else if (event.isCancel()) {
                            }
                        }
                    }
                }
            }
        }
    }
}

 

Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: Using colorfilter on a background image

Please use the 'Insert Code' button when including code in your posting, this is the clipboard icon with a 'C' in it. This way your code will be easier to read and likely to get a better response.

 

Secondly the copyright if you really need it should be assigned to you or your company not BlackBerry.


If you've been helped click on Like Button, if you've been saved buy the app. Smiley Happy

Developer of stokLocker, Sympatico and Super Sentences.
New Developer
Posts: 6
Registered: ‎08-16-2014
My Device: Simulator
My Carrier: Koodo

Re: Using colorfilter on a background image

Thanks for the pointer. Changes made.

 

Any pointers to the word colorfilter in any example code using the NDK or cascades would be helpful.

Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: Using colorfilter on a background image

[ Edited ]

It's not documented as far as I can see, what there is says that you can't use colorfilter with a template definition,

 

http://developer.blackberry.com/native/reference/cascades/bb__cascades__image.html

 

How about using a different method such as QPainter?


If you've been helped click on Like Button, if you've been saved buy the app. Smiley Happy

Developer of stokLocker, Sympatico and Super Sentences.
Highlighted
New Developer
Posts: 6
Registered: ‎08-16-2014
My Device: Simulator
My Carrier: Koodo

Re: Using colorfilter on a background image

So after a lot of research and searching, i have come up with a workaround.

 

I have yet to actually invoke the colorfilter variously referred in the documentation as setFilterColor and setColorFilter

in any way.

 

Here's what i am doing

 

Create the png with transparent pixels representing the areas whose colour i want to be able to change,

and then put the whole thing in a container and change the background color of the container behind. That

gets the desired result.

If i want to be able to multiply by the background color to get shading, i will use a partial alpha factor.

All the rest of the pixels will be coloured solid black which is the desired background colour i was going to use.

 

the QML needs to have the following line inserted:

 

id: lend_button_outer

objectName: "lend_button_outer"

 

Then it's findable. Otherwise you get a silent failure possibly with some debug output, and a null result for the next line:

 

(I don't see any way to format the below as code in this reply UI)

 

Container *lend_button_outer = root->findChild<Container*>("lend_button_outer");

ColorPaint *cpaint = newColorPaint(Color::fromARGB(0xff33cc33));

 

// this works. If the next layer had transparency, our colour will show through.

// technically partial transparency will result in multiplication too

lend_button_outer->setBackground(*cpaint);

 

 

Still hoping to find the syntax to actually apply a colorfilter to a conventional image, but i don't need it critically anymore, thanks to this workaround. Crafting the images is a bother, as you need to use

transparent instead of white for the parts to scale, and black or whatever you plan your background colour to be, for the parts which will not show through the background. So this is an ugly fix which only works

because I know the background will be black elsewhere.