» CS 491 Lecture 18 – Falling Math Part II

CS 491 Lecture 18 – Falling Math Part II

November 8, 2011 by Chris Johnson. Filed under cs491 mobile, fall 2011, lectures.

Agenda

implement gestures
continuous rendering
SurfaceView

Expression

Before we dig any deeper, let’s push our expression code out to a class. I’ve provided most of it:

public class Expression implements Parcelable {
  private static Random generator = new Random();

  private int answer;
  private String expression;
  private float velocity;
  private float x;
  private float y;

  public Expression() {
    int a = 3;
    int b = 2;
    answer = a + b;
    expression = a + " + " + b;
    velocity = generator.nextFloat();
    x = 100.0f;
    y = 100.0f;
  }

  public int getAnswer() {
    return answer;
  }

  public String toString() {
    return expression;
  }

  public void setX(float x) {
    this.x = x;
  }

  public float getX() {
    return x;
  }

  public float getY() {
    return y;
  }

  public float getVelocity() {
    return velocity;
  }

  public Expression(Parcel in) {
    answer = in.readInt();
    expression = in.readString();
    x = in.readFloat();
    y = in.readFloat();
    velocity = in.readFloat();
  }

  @Override
  public int describeContents() {
    return 0;
  }

  @Override
  public void writeToParcel(Parcel out,
                            int flags) {
    out.writeInt(answer);
    out.writeString(expression);
    out.writeFloat(x);
    out.writeFloat(y);
    out.writeFloat(velocity);
  }

  public static final Parcelable.Creator CREATOR = new Parcelable.Creator() {
    public Expression createFromParcel(Parcel in) {
      return new Expression(in);
    }

    public Expression[] newArray(int size) {
      return new Expression[size];
    }
  };
}

But these problems remain:

Randomly generate an expression that evaluates to a single digit.
Allow it to fall delta seconds, acted upon by gravity.

Gestures

In Android 1.6, gestures came along. With these, your fingers can dance along the screen in custom ways. The first step is to create a library of gestures using the Gesture Builder sample that ships with the Android SDK. Install it on a device or emulator, draw your library, and add the resulting /sdcard/gestures to your raw resource directory. Load it in your Activity with:

gestures = GestureLibraries.fromRawResource(this, R.raw.gestures);
if (!gestures.load()) {
  Log.d("FALL", "couldn't load gestures :(");
}

Now, we need to allocate an area of the layout that will receive the gestures. Let’s make the whole screen a gesture overlay:

<android.gesture.GestureOverlayView
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/gesture_plate"
  android:gestureStrokeType="multiple"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent">
<!-- other views -->
</android.gesture.GestureOverlayView>

The gestureStrokeType attribute must be multiple if gestures involve finger-lifts. And now, we can start listening to gesture events:

GestureOverlayView overlay = (GestureOverlayView) findViewById(R.id.gesture_plate);
overlay.addOnGesturePerformedListener(this);

And handling them:

@Override
public void onGesturePerformed(GestureOverlayView overlay,
                               Gesture gesture) {
  ArrayList<Prediction> predictions = gestures.recognize(gesture);
  if (predictions.size() > 0 && predictions.get(0).score > 1.0) {
    // predictions.get(0).name is the winner
  }
}

Continuous rendering

Suppose we want the expression to keep falling as time passes. We’ll need a steady sequence of calls to onDraw, which we can trigger by calling invalidate() at the end of onDraw. However, this solution pushes all the updating on to the UI thread, which will make our response to other UI events sluggish.

The fix is to use a different type of View, one which is expected to be refreshed by a separate thread. This is what SurfaceView is for:

public class FallingMathSurfaceView extends SurfaceView {
  private Expression expr;

  public FallingMathSurfaceView(Context context) {
    super(context);
    initialize();
  }

  public FallingMathSurfaceView(Context context,
                                AttributeSet attrs) {
    super(context, attrs);
    initialize();
  }

  public FallingMathSurfaceView(Context context,
                                AttributeSet attrs,
                                int defStyle) {
    super(context, attrs, defStyle);
    initialize();
  }

  private void initialize() {
  }
}

We’ll need a drawing thread that updates the view, but we can’t start it until we have a valid surface to draw on. We can know when that happens by registering our SurfaceView as a SurfaceHolder.Callback. This interface defines callbacks for surface-related events:

public class FallingMathSurfaceView extends SurfaceView implements SurfaceHolder.Callback {
  private void initialize() {
    getHolder().addCallback(this);
  }

  @Override
  public void surfaceChanged(SurfaceHolder holder,
                             int format,
                             int width,
                             int height) {
  }

  @Override
  public void surfaceCreated(SurfaceHolder holder) {
  }

  @Override
  public void surfaceDestroyed(SurfaceHolder holder) {
  }
}

We can only touch the surface between surfaceCreated and surfaceDestroyed, so let’s start and end our thread in these methods.

First, starting:

@Override
public void surfaceCreated(SurfaceHolder holder) {
  updater = new UpdateThread(getHolder(), expr);
  updater.start();
}

We’ll need updater to be an instance variable, because we’ll need to kill the thread in the surfaceDestroyed method. The join call blocks, and the blocking may get interrupted before the join finishes. We cycle back around in such an event:

@Override
public void surfaceDestroyed(SurfaceHolder holder) {
  boolean isJoined = false;
  updater.kill();
  while (!isJoined) {
    try {
      updater.join();
      isJoined = true;
    } catch (InterruptedException e) {
    }
  }
}

Now, here’s our drawing thread:

class UpdateThread extends Thread {
  private SurfaceHolder holder;
  private boolean needsToStop;

  public UpdateThread(SurfaceHolder holder, Expression expr) {
    this.holder = holder;
    needsToStop = false;
  }

  public void kill() {
    needsToStop = true;
  }

  @Override
  public void run() {
    while (!needsToStop) {
      Canvas canvas = null;
      try {
        canvas = holder.lockCanvas();
        synchronized (holder) {
          // draw on canvas
        }
      } finally {
        if (canvas != null) {
          holder.unlockCanvasAndPost(canvas);
        }
      }
    }
  }
}

The key points of this code:

SurfaceHolder is the true “owner” of the drawing surface. The holder is ultimately owned by our SurfaceView, but it is through the holder that we operate on the surface.
run() is our continuous render loop.
Before we can touch the pixels of the surface, we must lock it. Once done, we must unlock it.
We arbitrate all code which touches values the drawing code depends on via holder’s lock. We’re going to get UI events from the SurfaceView at the same time as this thread is rendering, and we don’t want to change values mid-draw. We’ll need to wrap up our event handling in similar synchronized blocks.
We run until kill() is called.

From here, we can complete the following tasks:

write an update method
write a draw method
handle gesture results
handle voice results
place the expression in a random x-position (Paint.getTextBounds can help)
mixing GestureOverlayView and SurfaceView (via a FrameLayout)
handle configuration changes

Haiku

mobile firm bathroom
sign: EMPLOYEES MUST WASH HANDS
BEFORE LOGGING IN