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 Contributor
Posts: 7
Registered: ‎03-28-2013
My Device: bold - 9900
My Carrier: etisalat
Accepted Solution

Picture editor; how to track touch

hi,

firstly i chose to develop a BlackBerry 10 app for my masters project and needed a little help. i hope you guys can help.

 

Requirement:

i shud be able to paint over a photo to select that area. then be able to blur out that portion of the image. example, painting the background and blurring it out.

 

can anybody please help me as to how i can achieve this?

Thank you

Developer
Posts: 133
Registered: ‎05-10-2013
My Device: Blackberry Z10
My Carrier: -

Re: Picture editor; how to track touch

You could read the screen to a bitmap/pixmap, get the location of your touch(es), randomize the pixel colours and locations with a bit of math and a few for loops (or any other method really) and post it back to the screen wiht the modifications. If you need help with the execution, feel free to come back anytime to this thread and ask.

----------------------------------------
Remember to mark the thread as solved at the post that solved your problem, and if you like a post, like it!
Contributor
Posts: 13
Registered: ‎06-17-2013
My Device: Z10, STL100-2
My Carrier: Telenor

Re: Picture editor; how to track touch

It's basically what you wrote - 

 

1) Create an image that will be used as a mask

2) Update mask image with touch input 

3) For each pixel in the mask, blur the original image to a image buffer

4) Replace original image with the buffered image

 

How to blur is widely available online so search for it.

A crude approach would be to simply gather all points around the current pixel and average the value. Smiley Happy 

 

How to draw images or manipulate them in Cascades can be found here.

 

Happy coding! Smiley Very Happy

New Contributor
Posts: 7
Registered: ‎03-28-2013
My Device: bold - 9900
My Carrier: etisalat

Re: Picture editor; how to track touch

thank you so much. ill come back as i keep working. i know i am gonna get lost Smiley Tongue

New Contributor
Posts: 7
Registered: ‎03-28-2013
My Device: bold - 9900
My Carrier: etisalat

Re: Picture editor; how to track touch

i do understand changing the drawing part. but how do change them according to the touch? i mean how can i convert the painted(by touch) area into a mask? any ideas on that? Smiley Frustrated i apologize as i am very new to this platform.

thank you so much for the help

Highlighted
Developer
Posts: 133
Registered: ‎05-10-2013
My Device: Blackberry Z10
My Carrier: -

Re: Picture editor; how to track touch

This code:

 

        screen_context_t screen_ctx;
	screen_pixmap_t screen_pix;
	screen_buffer_t screen_buf;
	int size[2] = { 768, 1280 };
	int val;
	char *pointer = NULL;
	int stride;
	/* Create the privileged context so that the display properties can be accessed. */
	screen_create_context(&screen_ctx, SCREEN_APPLICATION_CONTEXT);
	/* Create pixmap for the screen shot. */
	screen_create_pixmap(&screen_pix, screen_ctx);
	/* Set usage flag. */
	val = SCREEN_USAGE_READ | SCREEN_USAGE_NATIVE;
	screen_set_pixmap_property_iv(screen_pix, SCREEN_PROPERTY_USAGE, &val);
	/* Set format. */
	val = SCREEN_FORMAT_RGBA8888;
	screen_set_pixmap_property_iv(screen_pix, SCREEN_PROPERTY_FORMAT, &val);
	/* Set the pixmap buffer size. */
	screen_set_pixmap_property_iv(screen_pix, SCREEN_PROPERTY_BUFFER_SIZE, size);
	/* Create the pixmap buffer and get a handle to the buffer. */
	screen_create_pixmap_buffer(screen_pix);
	screen_get_pixmap_property_pv(screen_pix, SCREEN_PROPERTY_RENDER_BUFFERS,
	                                            (void **)&screen_buf);
	/* Get the pointer to the buffer. */
	screen_get_buffer_property_pv(screen_buf, SCREEN_PROPERTY_POINTER, (void**)&pointer);
	/* Get the stride. */
	screen_get_buffer_property_iv(screen_buf, SCREEN_PROPERTY_STRIDE, &stride);
		angleF = 0.0;
	    bps_initialize();
	    if (sensor_is_supported(SENSOR_TYPE_GRAVITY))
    {
        sensor_request_events(SENSOR_TYPE_GRAVITY);
    }
    int nbytes;
    Window *winId = Application::instance()->mainWindow();
    /* Take the display screen shot. */
    screen_read_window(winId->handle(), screen_buf, 0, NULL ,0);

 will create a screen buffer of your screen. You can get the touch event locations of the moving finger (the pixel numbers), add them to a list or whatever, then get a general rgb value for the area like so:

 

screen_get_buffer_property_pv(screen_buf, SCREEN_PROPERTY_POINTER, (void **) &ptr);

            	for (int i = 0; i < size[1]; i++, ptr += stride) {
            	        for (int j = 0; j < size[0]; j++) {
            	            // do your pixel reading here: r = ptr[j*4], g=ptr[j*4+1], b=ptr[j*4+2], alpha = ptr[j*4+3]
            	            }
            	        }
            	}

 Note that the above code is for an entire screen, so you'll have to modify accordingly. Once you have a general rgb value, divide by total # of pixels you went through to get a certain rgb (or pick another method which might be simpler). Restart the loop to repaitn the same pixels with the same color. Bam! youll have a uniform color wherever you pressed.

 

----------------------------------------
Remember to mark the thread as solved at the post that solved your problem, and if you like a post, like it!
New Contributor
Posts: 7
Registered: ‎03-28-2013
My Device: bold - 9900
My Carrier: etisalat

Re: Picture editor; how to track touch

thank you so much Smiley Very Happy for all the help

New Contributor
Posts: 7
Registered: ‎03-28-2013
My Device: bold - 9900
My Carrier: etisalat

Re: Picture editor; how to track touch

Rasmadrak, thanks for the help. It sounds fairly simple. But I am unable to find any masking documents. Can you please layout those same steps with help? In the sense how do I achieve those steps?

I was considering the following flow.
1.When user opens a photo two photos are added to the view. Original and on top a blurred one.
2. When user clicks on a certain point, a circle is created which masks and shows the photo behind I.e the original.

Is this proper? If it is, how do I get the masking? I am so lost Smiley Sad
New Contributor
Posts: 7
Registered: ‎03-28-2013
My Device: bold - 9900
My Carrier: etisalat

Re: Picture editor; how to track touch

Dr. Shavargo, I did try your suggestion, it seems too tough. I just have to make a simple one. Even a circle area of sharpness is fine, rather painting. Just don't know how to do. Something easier please? Smiley Indifferent
Contributor
Posts: 13
Registered: ‎06-17-2013
My Device: Z10, STL100-2
My Carrier: Telenor

Re: Picture editor; how to track touch

The image is built around a big array of bytes, and the mask is just the same.

In the link i posted there's a tutorial/code on how to generate an image. I suggest you check it out. Smiley Happy 

 

Here's some pseudo code for one (rather slow) way of accomplishing what you want :

1) Load image into a image-buffer (ImageView)

2) Create a mask-array and a buffer-array

3) Paint the mask by adding values to the mask-array

4) For each pixel that is non-zero in the mask, fetch the surrounding pixels from the image

5) average the pixels or apply blur of choice and add the newly generated pixel to the buffer-array

6) copy buffer data to image data

 

You could go all fancy by using the color value of the mask to apply various amount of blur etc.