Mobile Development Capstone Project: Class Overview 11/25/2020

 So, I finally got the application working properly, and I will continue following the same mobile vision tutorial to get this working. Hopefully, by tonight, I can start apply these mobile vision algorithms to the Thermometer project. 

I am first going to try to detect facial features in photos using this link.

First, I create the Face Detector with the OnCreate() method. 

FaceDetector detector = new FaceDetector.Builder(context)

    .setTrackingEnabled(false)

    .setLandmarkType(FaceDetector.ALL_LANDMARKS)

    .build();

The next step in this process is to create a frame instance supply to the detector in the bitmap. 

Frame frame = new Frame.Builder().setBitmap(bitmap).build();

and we call this synchronously as follows: 

SparseArray<Face> faces = detector.detect(frame);

we try to iterate through the collection of faces, as follows: 

for (int i = 0; i < faces.size(); ++i) {

    Face face = faces.valueAt(i);

    for (Landmark landmark : face.getLandmarks()) {

        int cx = (int) (landmark.getPosition().x * scale);

        int cy = (int) (landmark.getPosition().y * scale);

        canvas.drawCircle(cx, cy, 10, paint);

    }

}

I rerun the code again to see if it works. And now I'm going to the youtube tutorial. 

I decided to use this video, even though it is outdated and from 2018. 

I first make a project called BarcodeDetect. I first get my link from this and copy the mobile vision line com.google.android.gms:play-services-vision:20.1.2 and paste it in the gradle file. I then make sure the SDK tools are checked in using Tools -> Settings -> SDK Manager. Everything is updated, so this is pretty good. 

Next, we make changes to the layout file. Then we go to activity_main.xml. Get rid of the text and subsequently add a button to this file. I also add an imageview in the file and wrap the content. 

This is the main.xml here: 

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    tools:context=".MainActivity">

    <Button

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Process"

        android:id= "@+id/button"

        android:layout_alignParentStart="true"

        android:layout_alignParentEnd="true"

    />

    <ImageView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:id="@+id/imgView"/>

</RelativeLayout>

I then go to file -> show in explorer, and get my picture from Myrtle beach. After this, I go to the main activity and define a button and reference to these buttons and find the button id. Then, I set the button's on click listener. Then, I draw a red rectangle for the image processing phases. I reference both the button and image View here. 

I set some options and have the options to be immutable. 

I decide to use this code as reference.  

and this is my picture (bad selfie, but does the job:)

package ece.wisc.barcodedetection;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

import android.graphics.Bitmap;

import android.graphics.BitmapFactory;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.graphics.RectF;

import android.graphics.drawable.BitmapDrawable;

import android.support.v4.*;

import android.support.*;

import android.os.Bundle;

import android.util.SparseArray;

import android.view.View;

import android.widget.Button;

import android.widget.ImageView;

import com.google.android.gms.vision.Frame;

import com.google.android.gms.vision.face.Face;

import com.google.android.gms.vision.face.FaceDetector;

public class MainActivity extends AppCompatActivity {

    //items on app

    private Button btn;

    private ImageView myImageView;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        btn = findViewById(R.id.button);

        myImageView = findViewById(R.id.imgView);

        btn.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View v) {

                BitmapFactory.Options options = new BitmapFactory.Options();

                options.inMutable = true;

                Bitmap myBitmap = BitmapFactory.decodeResource(

                        getApplicationContext().getResources(),

                        R.drawable.test1,

                        options

                );

                Paint myRectPaint = new Paint();

                myRectPaint.setStrokeWidth(5);

                myRectPaint.setColor(Color.RED);

                myRectPaint.setStyle(Paint.Style.STROKE);

                Bitmap tempBitmap = Bitmap.createBitmap(myBitmap.getWidth(), myBitmap.getHeight(),

                        Bitmap.Config.RGB_565);

                Canvas tempCanvas = new Canvas(tempBitmap);

                tempCanvas.drawBitmap(myBitmap, 0, 0, null);

                FaceDetector faceDetector = new

                        FaceDetector.Builder(getApplicationContext()).setTrackingEnabled(false)

                        .build();

                if(!faceDetector.isOperational()) {

                    new AlertDialog.Builder(v.getContext()).setMessage("Could not set up the face detected!").show();

                    return;

                }

                Frame frame = new Frame.Builder().setBitmap(myBitmap).build();

                SparseArray<Face> faces = faceDetector.detect(frame);

                for (int i = 0; i < faces.size(); i++) {

                    Face thisFace = faces.valueAt(i);

                    float x1 = thisFace.getPosition().x;

                    float y1 = thisFace.getPosition().y;

                    float x2 = x1 + thisFace.getWidth();

                    float y2 = y1 + thisFace.getHeight();

                    tempCanvas.drawRoundRect(new RectF(x1, y1, x2, y2), 2, 2, myRectPaint);

                }

                myImageView.setImageDrawable(new BitmapDrawable(getResources(), tempBitmap));

            }

        });

    }

}

Unfortunately, this is resulting in the following issue:

Cannot resolve symbol 'gms'

and to solve this I went to the stack overflow library: 

this question

what I CAN do is to visit my build profile and subsequently get the compilation for 'gms' done properly. I will try to perform exactly this task. This worked exactly as I wanted when I built with the base library.

I built things and the result looks like this: 

with nothing working at all, which is incredibly frustrating.

The app stopped working, so I am checking to see if the imageviews initialized correctly.

Now it cannot set up face detected, and I have no idea why. I might download the github and see tomorrow if I can make any significant modifications.