Buzz

A portable photo booth built on top of Electron, React and Raspberry Pi.

Disclaimer: I use this repository as a playground for different web experiments. Don't look at the code expecting to find a canonical code example or any good practice 😃.

Running this project:

This repository is built on top of Electron and React using Yarn for dependency management. Thanks to these tools you can easily run this project on your computer running the following commands:

yarn install
yarn run dev // Starts a webpack-dev-server instance with our react application inside and the electron app showing this applicaiton. This command is ideal for development purposes.
yarn start // Starts a webpack-dev-server instance with our react application running on a browser.

As we are using React as a core component for this project and our usage of Electron is really simple we'd recommend you to use yarn start while developing the app so you can easily apply any change to the code during the development stage. When developing any feature directly related to Electron you'll have to use yarn run dev.

Building this project:

As this project is built on top of Electron 1.7.12 we can easily generate distribution binaries for may different platforms. The only version I've got working on Raspbian for now is 1.7.12, that's why we are still using this Electron version. We've configured this project to easily generate the distribution binaries executing the following command:

yarn dist

You can generate a build for OSX or Raspberry Pi separatelly if needed executing these commands:

yarn distMac
yarn distRaspberry

Remember, you'll have to execute yarn install first.

After these commands execution you will find the application executable files into the dist folder

Executing tests:

This project contains some tests written using Jest. You can easily run the tests by executing one of the following commands:

yarn test // Executes every test inside the src folder.
yarn test --updateSnapshot // Executes every test inside the src folder recording snapshots again.
yarn buildForTests // Builds the app for testing purposes.
yarn verifyScreenshotTests // Executes every test in record mode.
yarn recordScreenshotTests // Executes every test in record mode.
yarn test --watch // Watch files for changes and rerun tests related to changed files.
yarn test --watchAll // Watch files for changes and rerun every test.
yarn test --testRegex "String calculator spec*" //Executes tests matching with the regex passed as param.

This repository contains some tests written using a testing strategy named visual regression testing or screenshot testing. Under the hood, we are using spectron and jest-image-snapshot in order to run the app, take the screenshot and compare them with the baseline images. However, a library used by jest-image-snapshot is not compatible with node-9 so we need to force node-8 to be able to run our tests. Sorry for the inconveniences, here you can find more information about the bug. And here the original issue named: Image comparison of snapshots crashes node v9.2.0.

The rest of the tests in this repository are placed inside the src folder and are regular unit and integration tests.

Linter:

This repository uses eslint in order to check if the js code written matches the checkstyle configured. You can check if everything is ok by executing yarn lint and automatically fix the issues by executing yarn fixLint if needed.

Configuring this project:

This project uses Firebase in order to sing in the user and upload the pictures so if you want to build a custom version of this project you'll need to follow the following steps. Without a Firebase project associated you won't be able to run the project properly.

Steps to create a Firebase account:

• Go to your Firebase Console and create a project.
• After creating a project, click on "Add Firebase to your web app".
• Go to the authentication menu and enable Google as an authenticator provider.
• Back to the application screen copy the config values you'll see if you tap on the button named "Add Firebase to your web application". You should the following config values:

var config = {
    apiKey: "AIzaSyAFF1HzzasdffNzysOQqKbNfm4K7Wtasdf",
    authDomain: "my-app.firebaseapp.com",
    databaseURL: "https://my-app.firebaseio.com",
    projectId: "my-app",
    storageBucket: "my-app.appspot.com",
    messagingSenderId: "123240264111"
}

• Paste the previously copied values into a file named .env.development and .env.production inside root folder as follows:

REACT_APP_FIREBASE_API_KEY="AIzaSasfd1HzzpgX6fNzysOQqKbNfm4K7Wtasdf"
REACT_APP_FIREBASE_AUTH_DOMAIN="my-app.firebaseapp.com"
REACT_APP_FIREBASE_DATABASE_URL="https://my-app.firebaseio.com"
REACT_APP_FIREBASE_PROJECT_ID="my-app"
REACT_APP_FIREBASE_STORAGE_BUCKET="my-app.appspot.com"
REACT_APP_FIREBASE_MESSAGING_SENDER_ID="123240261111"

You can find a complete guide explaining how to do configure the Firebase project here.

As we are using Firebase to persist the pictures taken remember you'll have to enable Firebase storage and configure the storage rules after creating your app:

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read;
      allow write: if request.auth != null;
    }
  }
}

As we are using Firebase to persist the user information related to the pictures taken remember you'll have to configure Firebase database access rules after creating your app as follows:

{
  "rules": {
    "$user_id": {
        ".read": "$user_id === auth.uid",
        ".write": "$user_id === auth.uid",
      }
  }
}

Other configurable values

There are some values we can configure in our small application. This table contains the keys, descriptions and default values for every configurable item in our app:

Email service:

When a new picture is taken, Buzz will automatically share it with you by email. In order to accomplish this task you'll need to create a free Gmail account and paste the user and pass into a file named functions/.emailConfig.json file as follows:

{
    "user": "[email protected]",
    "pass": "myGmailPassword"
}

Firebase Cloud Functions:

Part of the project is implemented using Firebase Cloud Functions. An example is how the pictures taken are sent to the user logged in email after saving the picture. In order to configure your Firebase project you'll need to follow these steps:

Initialize Firebase CLI Tools

yarn install
yarn firebase init # You'll have to configure the already created project adding support for the functions feature.
yarn firebase login # You'll have to introduce your Google credentials :smiley:
cd functions
yarn install # Firebase functions has some dependencies we can manage thanks to yarn!
cd ..
yarn firebase deploy

If you change part of the function configuration remember can deploy it again by executing yarn firebase deploy.

Remember that as we need access to the internet from the Firebase Cloud Functions you'll need to set up your Google Cloud Platform account billing in order to get the functions being executed properly. You can find more information here.

Raspberry Pi Application

This project was designed to run into a Raspberry Pi. In order to get the project up and running you should follow the next steps:

• Create the Firebase account and project and also the Gmail account as described before.
• Clone this project executing "git clone https://github.com/pedrovgs/Buzz.git".
• Create the .env.* and .emailConfig.json files as described in the previous sections.
• Initialize the Firebase Cloud Functions. You can do this later from your laptop if needed as described before.
• Build the project by executing "yarn install && yarn distRaspberry" from the root repository folder. The executable application will be placed into the dist folder at the end of the command execution.
• Move your app binnaries to the RaspberryPi with the command scp -r dist/Buzz-linux-armv7l/* [email protected]:/home/pi/Desktop/buzz-bin.
• Get a Raspberry Pi, install a Raspbian distribution and connect it to the same WiFi your laptop is connected.
• Find your Raspberry Pi ip address by executing "ping raspberrypi.local".
• Connect to your Raspberry Pi by execting "ssh pi@YOUR_RASPBERRY_PI_IP". The "pi" user passowrd is "raspberry" by default.
• Copy the folder dist/Buzz-linux-armv7l to the Raspberry Pi. You can compress it if needed.
• Once you've copy the application to your Raspberry Pi. Execute the file named Buzz you'll find insde the folder. At this point, you should see the application up and running 😃

You can generate a equivalent application for OSX executing yarn distMac. The OSX application generated as a result of the command execution will be placed into the dist folder as well.

If needed, you can also clone this repository from your Raspberry Pi and build the whole project from scratch executing yarn install && yarn distRaspberry from the root folder.

The whole process can take a while, so be patient my firend. The result worth it! 📷

Installing emojis

The application shows some emojis as part of the user interface, but the emoji support Raspbian provides is not so good, so we've prepared an script you can execute in order to install Twitter emojis in your Raspberry Pi. You can easily install the emojis pack by executing scripts/installEmojis.sh

Camera configuration

If you've got just a regular webcam, connect it and check if it's working. If it's not working, review if you need to install some drivers distributed by the manufacturer.

But, if you've got a camera like this. Follow these steps in order to get it working:

• Connect your Raspberry Pi camera and enable the camera configuration from the Raspberry Pi configuration screen. You can find a tutorial here.
• Test your camera configuration executing this command raspistill -o image.jpg. If the camera is configured properly you should see the camera in your screen and after the command execution a picture will be saved in your Raspberry 📷.
• Install the drivers needed executing this command: sudo modprobe bcm2835-v4l2. If everything is ok, you should see a new camera interface when executing this ls -al /dev/vid*.
• Ensure the camera focus is properly configured. You can use this command: raspistill -o image.jpg in order to check if the focus is configured properly. If you'd like to keep the image on the screen while adjusting the camera focus you can execute this: raspistill -o image.jpg -t 500000 and you'll se the camera image for 50 seconds on the screen.
• Remember to configure the screen resolution in your .env files.

If for some reason the camera seems to be broken when watching the preview from Buzz this is because of a bug related to Chromium I'm waiting to be fixed. A workaround is to install another driver executing this command: sudo modprobe bcm2835-v4l2 gst_v4l2src_is_broken=1 and reboot your Raspberry Pi (this workaround did not work in my case) so I decided to get a real webcam instead of a Raspberry Pi camera.

I've got a regular webcam and it works like a charm 📷.

Screen configuration

Setting a LCD Display with support for capacitive touch is quite simple. I've got this one but feel free to get the one you prefer. You can even use a regular screen and connect a mouse to your Raspberry Pi if needed 😃. To configure your shiny LCD you should follow these steps:

Edit the /boot/config.txt file adding the following content at the end:

# Camera settings for a 800x480 screen

max_usb_current=1
hdmi_group=2
hdmi_mode=87
hdmi_mode=87
hdmi_cvt 800 480 60 6 0 0 0

If your screen has a 1024*600 resolution you should use this config:

hdmi_group=2
hdmi_mode=87
hdmi_cvt 1024 600 60 3 0 0 0
hdmi_force_hotplug=1

Then follow these steps:

* Connect the LCD usb to the Raspberry and the LCD.
* Connect the HDMI to the Raspberry Pi and the LCD.
* Turn on the Raspberry PI.

You can find a video explaining the process here.

In order to make the LCD and the user interface look better I'm sure you'd like to hide the cursor. To do this you can follow these steps:

sudo apt-get install unclutter
vi /home/pi/.config/lxsession/LXDE-pi/autostart
@unclutter -idle 0 # Add this at the end of the file
sudo reboot

A detailed tutorial can be found here.

If your screen is small, remember you can configure the album screen number of columns.

Disable screen saver

As the detail screen can be used like a infinite carousel showing the pictures you've taken using Buzz we'd recommend you to disable the Raspberry Pi screen saver adding the following content to your /etc/lightdm/lightdm.conf file under the line [SeatDefault]:

xserver-command=X -s 0 -dpms

Starting Buzz automatically

If you don't want to start your application manually everytime you reboot your Raspberry Pi you should follow these steps:

• Get the path where you Buzz distribution binary is located. Mine is: /home/pi/Development/Buzz/dist/Buzz-linux-armv7l/Buzz
• Update the content of the file /home/pi/.config/lxsession/LXDE-pi/autostart using the path you've got at the previous step adding the following line at the end:

@/home/pi/Development/Buzz/dist/Buzz-linux-armv7l/Buzz

Buzz case

If you'd like to use Buzz as a portable photo booth you can also use as a digital frame for your pictures you only need to print this screen case and this Raspberry Pi case using a 3D printer or build your own cases using wood or any other material. For now I'm using this case:

Developed By

• Pedro Vicente Gómez Sánchez - [email protected]

License

Copyright 2018 Pedro Vicente Gómez Sánchez

Licensed under the GNU General Public License, Version 3 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.gnu.org/licenses/gpl-3.0.en.html

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.