A good example of Extension for App Inventor

If you want to create your own blocks (Extensions blocks) with App Inventor, how about referring to the example below. It is an ImageProcessor Extension published on the MIT App Inventor site. This makes two images to be combined into one.
http://appinventor.mit.edu/extensions/

It is said to be "Unsupported" materials, but intelligible Java source code has been released. The main functions of this extension are as follows:

• Fetch two images into the application, then creates an image combining the two.
• Give a weight to decide which image to adopt strongly.
• For all the pixels, for each of the elements of R, G, B, A, both images are combined according to the weight. It is as follows: (pixel in image C) = weight * (pixcel in image A) + (1 - weight) * (pixcel in image B)
• Writes the image of the join result to external storage. In doing so, give write permission with annotation @UsesPermissions.

From the Java source code of this Extension, you can learn the following basic items:

• Basic operation of pixels of an image
• How to make a function block with and without return value
• Generation of user event and its processing
• How to set properties (image size, weight,  etc.)

After understanding this Java source program, I made a very simple application using this extension. The following figure shows the entire source program of this application. Of course, thanks to this Exrensions block, this is extremely consice. Furthermore, after preparing the Java source list, you do not need to set up the build environment yourself. The following cloud builder will take care of everything.

http://editor.appybuilder.com/

Complete source program using Extensions blocks

Two examples of execution result of this application are shown below. The images as expected were obtained. How fun this is!

Original images(above) and the combined image(blow)

I would like to introduce my second version Extension which is a little advanced now.

With this experience as a clue, you want to develop yet another unique Extensions. The following reference sites would help you.

# How to make Extension concretely
http://ai2.appinventor.mit.edu/reference/other/extensions.html
# Java source code for existing blocks in App Inventor
https://github.com/mit-cml/appinventor-sources/tree/master/appinventor/components/src/com/google/appinventor/components/runtime

Creating my own extension blocks for App Inventor

MIT App Inventor for efficiently developing mobile applications has functions named Extensions that users can develop their own blocks. If you know Java, in principle you can do that, but in fact it's not so easy. Development methods for Extensions are presented in several sites, among which the AppyBuilder Code Editor shown in the following is extremely easy to use and useful:
https://amerkashi.wordpress.com/2018/11/26/appybuilder-code-editor/
http://Editor.AppyBuilder.com

Anyway, here we will create a simple and unique block with Extensions. The figure below is a hearing training application using English news. There is a counter to record how many times you have heard a particular news. Of course, even when resuming after turning off the power of smartphone, that counter must be continued. In other words, it must be created as a persistent counter.

Persistent counter in a real app

We will proceed with a simple application that extracts only this persistent counter portion as follows.

Persistent counter for an examination

If you use TinyDB, you can easily create such a counter as shown below. However, to do that, first you need to read the value of the counter (tag) from TinyDB, add 1 to it, and store the result in TinyDB again. This is very troublesome, because this counter is supposed to be used in many situations.

Persistent counter made with normal TinyDB (built-in)

To alleviate this complexity, we have created a new block to "count up one tag value" that is not found in the conventional Tiny DB. Including the original TinyDB functions, I made this name FoYoDB. As you can see, count-up part became very neat!

Persistent counter made with new FoYoDB (Extension)

In order to have versatility in this FoYoDB, we also made a block that allows you to arbitrarily specify "step value for counting up" as follows. This time, we created Extensions to extend original TinyDB, but from now on we would like to tackle the development of Extensions with higher originality.

All blocks created as an extension FoYoDB