Add photo slideshow option to balena dash

Change-type: minor
Signed-off-by: Daniel Andrade <daniel@balena.io>

README.md

@@ -7,6 +7,7 @@ Try our simple [balenaCloud](https://www.balena.io/cloud) starter project to set
 * [Using WiFi Connect](#using-wifi-connect)
 * [Controlling content](#controlling-content)
 * [Automate backlight switching](#automate-backlight-switching)
+* [Photo slideshow feature](#photo-slideshow-feature)
 
 ## Introduction
 
@@ -71,5 +72,57 @@ To use automatic backlight switching you’ll need to configure a few service va
 
 The `BACKLIGHT_ON` and `BACKLIGHT_OFF` variables accept standard cron syntax; take a look at https://crontab.guru if you’re not familiar. For more instructions check out [our blog post](https://www.balena.io/blog/automate-the-backlight-timer-on-your-balenadash-display/).
 
+## Photo slideshow feature
+
+One extra feature implemented on balenaDash is the ability to use it to display a photo slideshow. Out of the box you can use [Google Photo Albums](https://photos.google.com), [Dropbox Photo Album](https://www.dropbox.com) and [Apple Photos](https://www.icloud.com/). The images are downloaded automatically and auto updated in case of changes.
+
+The main objective of this project is to create a physical photo album that is easy to build, configure, and maintain. Once configured, there is nothing else you need to worry about. If you edit the album, add new or delete photos, as soon as the device restarts it will be updated with the last changes.
+
+This is the perfect gift for family and friends. Give a smart photo album to your mother or grandmother so that they can keep up with your baby pictures, for example.
+
+### Installation and configuration
+
+If you are using the official Raspberry Pi 7 inch display, you can follow [this tutorial](https://www.balena.io/blog/assembling-the-official-raspberry-pi-touchscreen) to assemble and configure the screen to your device.
+
+Depending on the orientation of the majority of your photos, you can choose to have the display on horizontal or vertical mode. On **Fleet Configuration** add a variable called `BALENA_HOST_CONFIG_display_rotate` with value `2` for horizontal or `1` for vertical.
+
+#### Google Photos Albums
+
+![](https://raw.githubusercontent.com/balena-io-playground/balena-dash-google-photos/master/media/google_photos.gif)
+
+Go to [https://photos.google.com](https://photos.google.com) and select the album that you want to share.
+
+Click in the share button, click in the `Create link` button and copy the the url. 
+Example: **https://photos.app.goo.gl/rAnDoMvAlUe123**.
+
+#### Dropbox Photo Albums
+
+![](https://raw.githubusercontent.com/balena-io-playground/balena-dash-google-photos/master/media/dropbox.gif)
+
+On the [dropbox](https://www.dropbox.com/home) website, go to the folder that contains the photos and click on `Share Folder` and then `Copy link`. This will the URL you will need to add to balenaCloud.
+
+#### Apple iCloud Photo Album
+
+Create a photo album and copy the share url, similar to `https://www.icloud.com/sharedalbum/#ALBUM-ID`
+
+#### Setting up the photo album
+
+* On balenaCloud, go to **Device variables D(x)** and add the following:
+
+| ENV VAR                 | Description                                                                                                                                           | Options                                        | Default       |
+|-------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------|---------------|
+| GALLERY_URL             | Gallery URL for **google photos**, **dropbox images**, or **apple photos**                                                                            |                                                |               |
+| GALLERY_SLIDESHOW_DELAY | Slideshow delay in milliseconds                                                                                                                       |                                                | 10000         |
+| GALLERY_IMAGE_STYLE     | `Contain` shows the entire image on the screen. `Cover` zooms the image filling the entire screen.                                                    | contain,  cover                                | cover         |
+| GALLERY_EFFECT          | Transition effects                                                                                                                                    | fade,  horizontal,  vertical,  kenburns, false | fade          |
+| CRON_SCHEDULE           | Cron scheduler to reload images to get changes                                                                                                        |                                                | 0 */12 * * *  |
+| RESIZE_WIDTH            | * Resize image width or height (larger side) in pixels                                                                                                |                                                | 1000px        | 
+| COMPRESS_QUALITY        | * Image compression                                                                                                                                   | 0 - 100                                        | 90            | 
+
+    * Only available for iCloud photos
+
+Note that after some performance tests on the Raspberry Pi 2 & 3, the combination of `GALLERY_IMAGE_STYLE = contain` and `GALLERY_EFFECT = fade or kenburns` can make the transition effects choppy.
 
 ### For a complete tutorial on how to use balenaDash, please check out our blog post at [https://www.balena.io/blog/make-a-web-frame-with-raspberry-pi-in-30-minutes/](https://www.balena.io/blog/make-a-web-frame-with-raspberry-pi-in-30-minutes/)
+
+

docker-compose.yml

@@ -18,3 +18,9 @@ services:
     labels:
       io.balena.features.dbus: '1'
       io.balena.features.firmware: '1'
+  photos:
+    privileged: true
+    restart: always
+    build: ./photos
+    ports:
+      - "8888:8888"

photos/.gitignore

@@ -0,0 +1,14 @@
+# Temporary files.
+.#*
+package-lock.json
+
+# Log files.
+*.log
+
+# Don't push node_modules - we want the build server to install these.
+node_modules/
+apple/
+dropbox/
+temp.js
+#OSX hidden metadata file
+.DS_Store

photos/Dockerfile.template

@@ -0,0 +1,17 @@
+FROM balenalib/%%BALENA_MACHINE_NAME%%-node:11-buster-build
+
+# Defines our working directory in container
+WORKDIR /usr/src/app~
+
+# Copies the package.json first for better cache on later pushes
+COPY package.json package.json
+
+# This install npm dependencies on the balena build server,
+# making sure to clean up the artifacts it creates in order to reduce the image size.
+RUN JOBS=MAX npm install --production --unsafe-perm && npm cache verify && rm -rf /tmp/
+
+# This will copy all files in our root to the working  directory in the container
+COPY . ./
+
+# server.js will run when container starts up on the device
+CMD ["npm", "start"]

photos/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "album-slideshow",
+  "version": "1.0.0",
+  "description": "Album Slideshow.",
+  "main": "server.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "node server.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/balena-io-projects/balena-dash.git"
+  },
+  "keywords": [
+    "webserver",
+    "nodejs",
+    "expressjs"
+  ],
+  "author": " Daniel Andrade <daniel@balena.io>",
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/balena-io-projects/balena-dash/issues"
+  },
+  "homepage": "https://github.com/balena-io-projects/balena-dash#readme",
+  "dependencies": {
+    "cors": "^2.8.5",
+    "ejs": "*",
+    "express": "*",
+    "lodash.chunk": "^4.2.0",
+    "request": "^2.88.0",
+    "request-promise-native": "^1.0.3",
+    "sharp":"0.22.1",
+    "node-schedule": "1.3.2"
+  }
+}