tristansokol/kind-photo-bot

Build Your Own Cash flow Positive Photobooth!

This repo was used for a workshop during DroidCon SF 2017

Step 1: Set up

1. Clone this repository: git clone https://github.com/square/kind-photo-bot.git
2. Open the project with Android Studio (3.0)
3. Connect a device and run the app

The provided code contains MainActivity, which has just one button which starts the SnapActivity. SnapActivity displays a preview of the front-facing camera and renders some effects on top. Take a look at the code!

Step 2: Add Payments

The button in MainActivity currently launches the SnapActivity. Instead, we want the photobooth app require a $1 payment before starting SnapActivity. To do that, we'll integrate with the Square Point of Sale API.

To get started with the API:

1. Download the Square Point of Sale app on your device.
2. Open the app and log in or sign up for a Square merchant account. Don't worry about linking your bank account for now, and you can skip the step about getting a Square reader shipped (we're providing those).
3. Sign in with your new Square account and register your new application on Square's developer portal.

• To register your application, click New Application, enter a name, and click Create App. This is your developer portal, and you'll need to come back here later. For now, take note of your Application ID under the Credentials tab

4. Follow the instructions for getting started with the Point of Sale API for Android here NOTE: you can start with the second step (Obtain your app's SHA-1 fingerprint) since we've already registered our Application name.
5. Following the instructions in the documentation, link up the button in MainActivity to a POS API call in the MainActivity's onCreate method. Receive the result from the Point of Sale transaction in the onActivityResult method.
6. If the transaction result was a success, start the Photobooth activity.
7. Try it out! You can test by taking cash payments, or use the provided Square readers to take card payments and refund yourself later.

Step 3: Take Pictures

1. Add a button in SnapActivity to take a picture using CameraSource#takePicture
2. In the picture callback, you're provided with a byte[] containing the captured photo. Here's how we turn it into the final bitmap to print.

• Use BitmapFactory#decodeByteArray to turn the byte[] into a Bitmap. Don't forget to use add the inMutable option so that we can draw on the Bitmap.
• Create a new FaceDetector. Set the mode to FaceDetector.ACCURATE_MODE for better results.
• Create a Frame wrapping the Bitmap and FaceDetector#detect to find all the faces.
• Create a Canvas around the Bitmap to draw on it.
• Find the selected FaceGraphic by calling GraphicFactory.values()[SnapActivity.graphicIndex] and draw the graphic on the Canvas. Use Scaler.ISO when drawing (we're not drawing on the scaled-down camera preview any more)
• Release the FaceDetector
• Display the photo in a Toast. Create a toast.xml layout that contains an ImageView with id picture_view, then:

Toast toast = new Toast(activity);
toast.setGravity(Gravity.CENTER_VERTICAL, 0, 0);
toast.setDuration(Toast.LENGTH_SHORT);
LayoutInflater inflater = LayoutInflater.from(activity);
View toastView = inflater.inflate(R.layout.toast, null);
ImageView pictureView = content.findViewById(R.id.picture_view);
pictureView.setImageBitmap(bitmap);
toast.setView(toastView);
toast.show();

Step 4: Add printing

1. Visit this Google Cloud Print link and sign in with the Google account on your device. This will make our printer available on your device.
2. Display the printer selection activity using PrintHelper:

  PrintHelper photoPrinter = new PrintHelper(activity);
  photoPrinter.setScaleMode(PrintHelper.SCALE_MODE_FIT);
  photoPrinter.printBitmap("awesome_photo.jpg", bitmap, () -> activity.finish());

Congrats, you're done!!!

If you have more time:

• Add more filters. Use our existing FaceGraphic classes as examples.
• Use the shutter callback to add feedback when the photo gets taken.
• Add a countdown to the camera snap on the SnapActivity
• Print using Google Cloud Printing
• Tweet the finished photos using Twitter Kit
• Enable Kiosk mode and prevent users from existing using Activity#startLockTask