Image Effects

In this tutorial we'll see how to use NoCode plugins.

Recommendation

It's recommended to follow the Hello Pal tutorial before this one.

What to do?

In this sample, we'll let the user select a photo from her album or capture a photo by device's camera and then apply some filters to those photos.

Create a new project

Let's start by creating a new project. Name it Image Effects or whatever you want. We'll start with a Blank Template and we won't include DevPal Android content.

For more information about creating a new DevPal project, click here.

Add a new screen

We need to add at least one screen. In the Activities tab, click the New blank activity button. You can give any title and description to this newly created screen. For this sample, we name it Main.

For more information about adding screens to your project, click here.

UI Design

To open the Design and NoCode window, just click the newly created screen.

Switch to the Android XML tab and copy&paste the XML below to the text editor on this tab.


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:orientation="vertical">


   <Button
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Choose photo"
       android:id="@+id/button_ChoosePhoto"
       android:layout_margin="10dp"
       android:layout_gravity="center_horizontal"/>

   <Button
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Take a photo"
       android:id="@+id/button_TakePhoto"
       android:layout_margin="10dp"
       android:layout_gravity="center_horizontal"/>


   <ImageView
       android:id="@+id/imageViewPhoto"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:maxHeight="200dp"
       android:maxWidth="200dp"
       android:layout_weight="1"
       android:layout_gravity="center"/>


   <LinearLayout
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_gravity="center_horizontal">

   <Button
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Grayscale"
       android:id="@+id/button_Grayscale"
       android:layout_margin="10dp"
       android:layout_gravity="center_horizontal"/>

      <Button
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="Invert"
          android:id="@+id/button_Invert"
          android:layout_margin="10dp"
          android:layout_gravity="center_horizontal"/>

   </LinearLayout>

</LinearLayout>

Here we have some Buttons and an ImageView to display the photo.

Within a second, DevPal Studio will parse the xml you've pasted and it will be ready to use the UI elements in NoCode section.

NoCode

Before going any further it's recommended to read the NoCode basics here if you haven't yet.

Now, we're done with the UI design and it's time to NoCode!

Here are the variables generated from our UI:

Vars

What we want to do first is to let the user choose a photo from her album and display this photo on the ImageView. So drag&drop the button_ChoosePhoto variable to the NoCode Graph and select Get with default event.

Now, click the output execution pin of newly created NoCode item and drag it to an empty area. The NoCode item list will be displayed. Search for "album", "photo", "image", or "gallery". Whichever you search for, you'll find the item Imaging -> Select Image From Album in the list. Just select it.

Choose photo

You see that it just needs a Chooser title which will displayed to the user when choosing a photo. Type anything here.

There are 3 output pins:

  • Selected and Cancelled output execution pins will be called when the user selects a photo or cancels the selecting process respectively.
  • Selected image output pin is the photo the user chooses. Its data type is Bitmap. (You can see descriptions and datatypes by hovering mouse over the pins' titles)

Displaying the selected photo

We want to display the selected photo to the user by the ImageView. So let's get our ImageView first by dragging the imageViewPhoto variable to and empty area and by selecting Get from the menu.

Now, we have our ImageView ready to use. Drag from this getter item and search for Bitmap because the Selected image pin of the Select image from album item is a Bitmap. Select the ImageView Methods -> Set image bitmap.

Set Bitmap

To make it work, connect the Selected image pin to the Bitmap pin as seen below.

Set Bitmap full

Holding reference to the selected photo

Because we'll need to apply some effects to the selected photo and refresh the ImageView control to display this effect-applied photo, we better hold a reference of the selected photo once and use it anywhere.

To do so, let's create a new variable named Selected Photo and set its data type to Bitmap.

Selected photo var

What we need to do is to set this variable's value to the Selected image pin of the Select image from album item.

Selected photo var

That's it. Now we'll use Selected Photo variable whenever we need to access the current photo.

Take a photo from camera

We also let the user to take a photo from device camera. It's very similar to what we've done for selecting photo from gallery. Instead of Select image from album, we'll use Get photo from camera item. Below is the NoCode for this functionality.

Take photo

Did you know?

You can duplicate a NoCode item by copying and pasting it anywhere in the NoCode graph. Just select a NoCode item and press Ctrl-C to copy and Ctrl-V to paste.

Image Effects NoCode Plugin

Now it's time to apply image effects to the selected photo.

We'll use a NoCode plugin named Image Effects that is coming with DevPal Studio as a built-in plugin.

For more information about NoCode plugins please read this document

To use a NoCode plugin, we need to import it first. Just click the Use NoCode Plugins button on the toolbar and check the plugins you want to import. For this project, we'll use the Image Effects plugin, so click the checkbox of this plugin.

Plugin import

Once you import a NoCode plugin, its methods, its data types etc. will be available to use. You'll see its methods in the NoCode Items List when you open it by right clicking an empty area.

Plugin methods

Grayscale Image

First let's try the Grayscale Image method of the Image Effects plugin. When you add this NoCode item and look at the Source pin you'll see that its data type is a Bitmap. So we can connect our Selected Photo variable to this pin.

Instead of getting the variable and connecting it to the pin, we can click the little rectangle next to the Source pin and select Select from variables option. This will display variables of this data type. Choose our Selected photo variable from the list.

Select var

Also the Result pin is a Bitmap too. This means that we can set this result to the ImageView control directly.

The NoCode for Grayscale part shown below.

Grayscale full

Invert Image

This one is very similar to Grayscale Image. Instead of Grayscale Image, select the Invert Image NoCode item from the list.

Invert full

Full NoCode graph

At this point, click Save and Compile buttons and be sure it compiles without errors.

Here is the full NoCode graph of this app.

Full NoCode

Although this is really a simple graph for such a relatively complex application, we can even optimize the NoCode graph.

Note

Optimizing the NoCode graph is just a visual optimizing, does not affect the generated code.

Collapsing items

We can collapse some NoCode items so they won't allocate space on the graph. Collapsing items typically applies to variable getter items. So in this graph we can only collapse the imageViewPhoto getter items.

To collapse an item right click the getter item's pin title or pin itself and select Collapse.

Collapse menu

Next version feature

Automating the optimizing a NoCode graph is in our to-do list. So there might be a feature called Auto redesign NoCode graph in the next version.

When we've done with collapsing, the full NoCode Graph seems like this:

Full NoCode Optimized

Running the app

We're ready to run the app on a device or an emulator.

Before running the app, you need to make sure that an Android device is connected to your computer or an Android emulator is running. For more information about running an app, please click here.

To run our app, just click the Run button on the Build toolbar on the main screen. This will build the app and generate the .apk file and then runs it on the connected device or an emulator.