Create a preview endpoint for watchfaces and watchapps (#54)

Signed-off-by: Stasia Michalska <[email protected]>

Author: hellcp

Dockerfile

@@ -1,5 +1,5 @@
 FROM python:3.6-alpine
-RUN apk add --update build-base libffi-dev zlib-dev jpeg-dev
+RUN apk add --update build-base libffi-dev zlib-dev jpeg-dev freetype-dev
 RUN apk add --update postgresql-dev
 COPY requirements.txt requirements.txt
 RUN pip install -r requirements.txt

appstore/__init__.py

@@ -20,6 +20,8 @@
 from .developer_portal_api import init_app as init_developer_portal_api
 from .commands import init_app as init_commands
 from .utils import init_app as init_utils
+from .image import init_app as init_image
+from .locker import locker
 
 app = Flask(__name__)
 app.config.update(**config)
@@ -37,6 +39,7 @@
 init_dev_portal_api(app)
 init_developer_portal_api(app)
 init_commands(app)
+init_image(app)
 
 @app.route('/heartbeat')
 @app.route('/appstore-api/heartbeat')

appstore/api.py

@@ -1,14 +1,15 @@
 import urllib.parse
 
-from flask import Blueprint, request, jsonify, abort, url_for
+from flask import Blueprint, request, jsonify, abort, url_for, make_response
 from flask_cors import CORS
 from sqlalchemy import and_
 
 from sqlalchemy.orm.exc import NoResultFound
 
-from appstore.utils import jsonify_app, asset_fallback, generate_image_url, get_access_token, HARDWARE_SUPPORT
+from appstore.utils import jsonify_app, asset_fallback, generate_image_url, get_access_token, plat_dimensions, HARDWARE_SUPPORT
 from .models import App, Collection, HomeBanners, Category, db, Release
 from .settings import config
+from .image import generate_preview_image
 
 parent_app = None
 api = Blueprint('api', __name__)
@@ -67,6 +68,25 @@ def apps_by_id(key):
     return generate_app_response(app)
 
 
+@api.route('/apps/id/<key>/preview')
+def app_image_by_id(key):
+    app = App.query.filter_by(id=key).one_or_none()
+    screenshots = {}
+    for hw in ['aplite', 'basalt', 'chalk', 'diorite', 'emery', 'flint']:
+        if hw in app.asset_collections:
+            screenshot = app.asset_collections[hw].screenshots[0]
+            if screenshot:
+              screenshots[hw] = generate_image_url(screenshot, *plat_dimensions[hw], True)
+
+    icon = None
+    if app.type == 'watchapp':
+        icon = generate_image_url(app.icon_large, 80, 80, True)
+    png = generate_preview_image(title=app.title, developer=app.developer.name, icon=icon, screenshots=screenshots)
+    response = make_response(png)
+    response.headers.set('Content-Type', 'image/png')
+    return response
+
+
 @api.route('/apps/dev/<dev>')
 def apps_by_dev(dev):
     hw = request.args.get('hardware', 'basalt')

appstore/image.py

@@ -0,0 +1,164 @@
+import os
+import io
+import requests
+
+from flask import Flask
+from PIL import Image, ImageDraw, ImageFont, ImageChops
+from math import ceil
+
+from .utils import valid_platforms
+
+parent_app = None
+
+canvas_size = (780, 520)
+
+background_color=(255, 71, 0)
+overlay_color=(55, 58, 60)
+text_color=(255, 255, 255)
+
+overlay_box=(0, 392, 780, 520)
+icon_position=(24, 416)
+base_title_position=(36, 404)
+base_author_position=(36, 460)
+base_text_space=530
+logo_position=(576, 418)
+
+def platform_borders(platform):
+    if platform == 'emery':
+        return {
+            'image': Image.open(os.path.join(parent_app.static_folder, 'emery-border.png')).convert("RGBA"),
+            'fallback': Image.open(os.path.join(parent_app.static_folder, 'fallback-emery.png')).convert("RGBA"),
+            'offset': (65, 79)
+        }
+
+    if platform == 'diorite' or platform == 'flint':
+        return {
+            'image': Image.open(os.path.join(parent_app.static_folder, 'diorite-border.png')).convert("RGBA"),
+            'fallback': Image.open(os.path.join(parent_app.static_folder, 'fallback-bw.png')).convert("RGBA"),
+            'offset': (54, 110)
+        }
+
+    if platform == 'basalt':
+        return {
+            'image': Image.open(os.path.join(parent_app.static_folder, 'basalt-border.png')).convert("RGBA"),
+            'fallback': Image.open(os.path.join(parent_app.static_folder, 'fallback-basalt.png')).convert("RGBA"),
+            'offset': (88,111)
+        }
+
+    if platform == 'chalk':
+        return {
+            'image': Image.open(os.path.join(parent_app.static_folder, 'chalk-border.png')).convert("RGBA"),
+            'fallback': Image.open(os.path.join(parent_app.static_folder, 'fallback-chalk.png')).convert("RGBA"),
+            'offset': (71,105)
+        }
+
+    return {
+        'image': Image.open(os.path.join(parent_app.static_folder, 'aplite-border.png')).convert("RGBA"),
+        'fallback': Image.open(os.path.join(parent_app.static_folder, 'fallback-bw.png')).convert("RGBA"),
+        'offset': (68,106)
+    }
+
+def preferred_grouping(platforms):
+    order = [['diorite', 'emery'], ['flint', 'emery'], ['basalt', 'emery'], ['chalk', 'emery'],
+        ['basalt', 'diorite'], ['basalt', 'flint'], ['basalt', 'chalk'], ['basalt', 'aplite'],
+        ['flint'], ['emery'], ['diorite'], ['chalk'], ['basalt'], ['aplite']]
+    for selection in order:
+      if len(selection) == len(selection & platforms):
+        return selection
+
+def load_image_from_url(url, fallback):
+    try:
+        resp = requests.get(url, timeout=5)
+        resp.raise_for_status()
+        return Image.open(io.BytesIO(resp.content)).convert("RGBA")
+    except Exception as e:
+        if fallback:
+            return fallback
+        raise e
+
+def draw_text_ellipsized(draw, text, font, xy, max_width):
+    if draw.textlength(text, font=font) <= max_width:
+        draw.text(xy, text, font=font, fill=text_color)
+        return
+
+    ellipsis = "…"
+    ellipsis_width = draw.textlength(ellipsis, font=font)
+
+    trimmed = ""
+    for char in text:
+        if draw.textlength(trimmed + char, font=font) + ellipsis_width <= max_width:
+            trimmed += char
+        else:
+            break
+
+    draw.text(xy, trimmed + ellipsis, font=font, fill=text_color)
+
+def platform_image_in_border(canvas, image_url, top_left, platform):
+    border = platform_borders(platform)
+    img = load_image_from_url(image_url, border['fallback'])
+
+    if platform == 'chalk':
+        chalk_mask = Image.open(os.path.join(parent_app.static_folder, 'chalk-mask.png')).convert('L')
+        img.putalpha(chalk_mask)
+
+    ix = top_left[0] + border['offset'][0]
+    iy = top_left[1] + border['offset'][1]
+
+    canvas.alpha_composite(img, (ix, iy))
+
+    canvas.alpha_composite(border['image'], top_left)
+
+def generate_preview_image(title, developer, icon, screenshots):
+    canvas = Image.new("RGBA", canvas_size, background_color)
+    draw = ImageDraw.Draw(canvas)
+
+    logo=Image.open(os.path.join(parent_app.static_folder, 'rebble-appstore-logo.png')).convert('RGBA')
+
+    draw.rectangle(overlay_box, fill=overlay_color)
+    canvas.alpha_composite(logo, logo_position)
+
+    platforms = preferred_grouping(screenshots.keys())
+    start_x = ceil((canvas.width - sum(platform_borders(platform)['image'].width for platform in platforms)) / 2)
+
+    for platform in platforms:
+        platform_image_in_border(
+            canvas=canvas,
+            image_url=screenshots[platform],
+            top_left=(start_x, 0),
+            platform=platform
+        )
+        start_x += platform_borders(platform)['image'].width
+
+    title_position = base_title_position
+    author_position = base_author_position
+    text_space = base_text_space
+
+    icon_image = None
+    try:
+        icon_image = load_image_from_url(icon, None)
+    except Exception as e:
+        icon_image = None
+
+    if icon_image:
+        icon_mask = Image.open(os.path.join(parent_app.static_folder, 'icon-mask.png')).convert('L')
+
+        icon_image.putalpha(ImageChops.multiply(icon_mask, icon_image.split()[3]))
+        canvas.alpha_composite(icon_image, icon_position)
+        title_position = (title_position[0] + 88, title_position[1])
+        author_position = (author_position[0] + 88, author_position[1])
+        text_space -= 88
+
+    font_large = ImageFont.truetype(os.path.join(parent_app.static_folder, 'Lato-Bold.ttf'), 48)
+    font_small = ImageFont.truetype(os.path.join(parent_app.static_folder, 'Lato-Regular.ttf'), 32)
+
+    draw_text_ellipsized(draw, title, font_large, title_position, text_space)
+    draw_text_ellipsized(draw, developer, font_small, author_position, text_space)
+
+    buffer = io.BytesIO()
+    canvas.save(buffer, format='PNG')
+    buffer.seek(0)
+    return buffer.getvalue()
+
+def init_app(app):
+    global parent_app
+    parent_app = app