Selection Tool on images and Pixelate filter

151 views
Skip to first unread message

Boz

unread,
Mar 24, 2017, 4:37:28 PM3/24/17
to MIT App Inventor Forum
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

unread,
Mar 24, 2017, 4:59:56 PM3/24/17
to MIT App Inventor Forum
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

unread,
Mar 24, 2017, 5:54:22 PM3/24/17
to MIT App Inventor Forum
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

unread,
Mar 24, 2017, 6:38:46 PM3/24/17
to MIT App Inventor Forum
+1 @Italo
ABG

Italo

unread,
Mar 24, 2017, 6:39:05 PM3/24/17
to mitappinv...@googlegroups.com
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:

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












Abraham Getzler

unread,
Mar 24, 2017, 6:42:08 PM3/24/17
to MIT App Inventor Forum
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

unread,
Mar 24, 2017, 10:13:57 PM3/24/17
to MIT App Inventor Forum
great solution @Italo!
Taifun

Boz

unread,
Mar 25, 2017, 2:32:11 PM3/25/17
to MIT App Inventor Forum


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

unread,
Mar 25, 2017, 5:35:32 PM3/25/17
to MIT App Inventor Forum
Click on the blue button, to the left of the procedure name. That way you create the parameters for that procedure.

Boz

unread,
Mar 25, 2017, 6:20:37 PM3/25/17
to MIT App Inventor Forum

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


Taifun

unread,
Mar 25, 2017, 7:05:11 PM3/25/17
to MIT App Inventor Forum
that's one of the advanced blocks, you find them in the Any Component drawer
see also
Taifun

Boz

unread,
Mar 26, 2017, 8:37:31 AM3/26/17
to MIT App Inventor Forum
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

unread,
Mar 26, 2017, 8:53:33 AM3/26/17
to MIT App Inventor Forum
@Italo

Great job.

Hossein

Italo

unread,
Mar 26, 2017, 9:23:58 AM3/26/17
to MIT App Inventor Forum
@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

unread,
Mar 26, 2017, 10:56:52 AM3/26/17
to MIT App Inventor Forum


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

unread,
Mar 26, 2017, 11:22:12 AM3/26/17
to MIT App Inventor Forum
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

unread,
Mar 26, 2017, 12:14:08 PM3/26/17
to MIT App Inventor Forum


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





Italo

unread,
Mar 26, 2017, 4:41:44 PM3/26/17
to MIT App Inventor Forum

Boz

unread,
Mar 27, 2017, 2:58:36 AM3/27/17
to MIT App Inventor Forum

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





Taifun

unread,
Mar 27, 2017, 10:03:23 AM3/27/17
to MIT App Inventor Forum
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

unread,
Mar 27, 2017, 2:16:44 PM3/27/17
to MIT App Inventor Forum



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



Abraham Getzler

unread,
Mar 27, 2017, 2:22:37 PM3/27/17
to MIT App Inventor Forum
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

unread,
Mar 27, 2017, 3:18:21 PM3/27/17
to MIT App Inventor Forum
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

unread,
Mar 27, 2017, 3:33:41 PM3/27/17
to MIT App Inventor Forum
Tools palette? Where is it?
This is all too overwhelming, I have a feeling that I'll just abandon this

Italo

unread,
Mar 27, 2017, 4:10:22 PM3/27/17
to MIT App Inventor Forum
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.
Reply all
Reply to author
Forward
0 new messages