Selection Tool on images and Pixelate filter

[Boz]

Hi

I'm trying to develop a fairly simple app. Problem is I do not know how can I create a selection tool. I want to give the user this tool in order to select different parts of the picture he uploads.
Second thing is how do I add a pixelization effect (mosaic) in that selection.

Cheers!

[Taifun]

you only can pick complete pictures using the image picker component

there is no image filter component available, but 

you could write your own extension and create a block yourself...

more information about how to create an extension see the App Inventor Extensions document

however that will be more advanced and will require some Java skills...

Taifun

---

Trying to push the limits of App Inventor! Snippets, Tutorials and Extensions from Pura Vida Apps by Taifun. 

[Italo]

The pixelation filter is actually an easy procedure that can be made with App Inventor. The only problem is its speed. You can expect at least 1 or 2 seconds wait to pixelate the whole screen.

If your canvas is smaller, it will work faster. Also if the pixelation size is bigger, it will be faster, since it skips more pixels.

Take a look at it, try to understand what each block does:

 

[Abraham Getzler]

+1 @Italo

ABG

[Italo]

Ok, I got carried away and did the whole thing (graphics is my weakness, you know). I'm not going to upload the aia because I want you to learn how it works, so I'll upload the image of the blocks and you will have to build it.

Here's a video of how it works for the user:

https://drive.google.com/file/d/0B7MXCp1_0y6hSUZRbFBVbkNDdWM/view?usp=sharing

And here are the blocks. You create the aia and study what you see in the blocks. Deal?

[Abraham Getzler]

to select different parts of the picture

Easiest way would be to use a semitransparent ball  that can be dragged

around the canvas, with a radius slider.

ABG

[Taifun]

great solution @Italo!

Taifun

[Boz]

Oh wow did not expect such detailed response, I appreciate it. Thanks a ton!

I appear to be stuck, see picture for explanation. How do I get the orange canvas and sizeofpixelation blocks?

[Italo]

Click on the blue button, to the left of the procedure name. That way you create the parameters for that procedure.

[Boz]

Another bump... I see no such block anywhere, containing the word ''component''

[Taifun]

that's one of the advanced blocks, you find them in the Any Component drawer

see also

How to work with the advanced features

Taifun

[Boz]

Great! It works! Thank you!

All I need now is to implement a color picker (maybe this one http://websnare.com/media/k2/items/cache/8dc425b2acbf9c68064b8a63eae1ffbc_M.jpg  ) a way to allow browsing to the camera photos to open them in the app and to take photo and open it in the app and be able to draw on it. The ''brush'' should probably have 2 sizes, medium and small(for details)

Hope it's doable, please pardon me, my English is not flawless. 

[Hossein Amerkashi]

@Italo

Great job.

Hossein

[Italo]

@Abraham, @Taifun and @Hossein : Thank you!

@Boz : You are welcome. I hope you learned how it works.

The reason why I used lines to draw the big pixels instead of actual pixels, it's because when using lines, you can modify the procedure to add vertical and horizontal size of the pixelation output. If you have a time, and learned how it works, think about implementing that.

Your image for a color picker doesn't have white, black or grays. Search the forum for "A better color picker". You will get the aia this time, it's in the App Inventor Gallery.

All the other features you want to add to your project are perfectly doable. Keep going and let us know how it's coming.

[Boz]

I do not need black and white, need more brown(skin) tones... I think this one might be perfect

I think I've managed to browse photos and display them on the canvas

Found another tutorial but it's confusing https://www.youtube.com/watch?v=SeDt6V2dgM8
Where do I put another canvas? On the second screen? I want the palette to act like a popup when clicking the ''select color'' button.

[Italo]

You can use a second screen and save the color selected in a TinyDB tag, that way you can read it when you are back in the drawing screen. (Do not open screen1 again, just close the palette screen to go back to screen1)

Or you can create an initially hidden arrangement that only shows up when the user needs the palette. And set it hidden again once the user selects a color.

Your choice.

[Boz]

Not quite sure what I'm doing. I see TinyDB tag options, please, how do I proceed?

[Italo]

TinyDB tutorial: https://sites.google.com/site/stevozip/home/AI2/tinydb

[Boz]

It's over my head...  the tutorial is about lists
This is from screen 2

[Taifun]

my recommendation is to go one step back and first learn the basics before continuing...

A very good way to learn App Inventor is to read the free Inventor's Manual here in the AI2 free online eBook   http://www.appinventor.org/book2 ... the links are at the bottom of the Web page.  The book 'teaches' users how to program with AI2 blocks.

There is a free programming course here http://www.appinventor.org/content/CourseInABox/Intro  and the aia files for the projects in the book are here:  http://www.appinventor.org/bookFiles  

How to do a lot of basic things with App Inventor are described here:  http://www.appinventor.org/content/howDoYou/eventHandling  .

Also do the tutorials http://appinventor.mit.edu/explore/ai2/tutorials.html to learn the basics of App Inventor, then try something and follow the

 Top 5 Tips: How to learn  App Inventor

You will not find a tutorial, which does exactly what you are looking for. But doing the tutorials (not only reading a little bit) help you to understand, how things are working. This is important and this is the first step to do.

Taifun

---

Trying to push the limits of App Inventor! Snippets and Tutorials from Pura Vida Apps by  Taifun.         

[Boz]

Problem with the Canvas...duplicate. I want to be able to draw lines. A solution for this please?

[Abraham Getzler]

This looks like deja vu all over again.

You already have a dragged event for that same canvas in the same blocks shot,

with blocks to draw a line.

Maybe you need some other input like a global variable to test before deciding how to treat

the drag in the original drag event?

ABG

[Italo]

Yes, like Abraham said, you can't duplicate events. Instead make a tools palette and depending on the tool selected, change the value of a variable and in the Canvas.Dragged event evaluate which tool is active. Then do what that tool is supposed to do.

[Boz]

Tools palette? Where is it?
This is all too overwhelming, I have a feeling that I'll just abandon this

[Italo]

Tools palette? Where is it?

Nowhere. I'm talking about you creating it!

A tools palette is basically an arrangement with buttons, each button, changes the value of a variable. That variable is checked every time the user drags the finger on the screen.

Example: If the user clicks on the LINES tool, set the variable to "LINES". If he/she clicks on the PIXELATE tool, change the value of that variable to "PIXELATE".

Inside the Canvas1.Dragged event, place an IF block, IF (the variable) = "PIXELATE" then do the selection procedure I gave you, ELSE IF (the variable) = "LINES" then draw a line from the beginning of the dragging to currentX, CurrentY.

Keep adding ELSE IF for each tool you decide to create in your app. 

But mostly, I think you are trying to run before learning to walk.

Do some more tutorial please. This is a little more advanced and it's easier to understand if you know the basics.