README.md (3404B)
1 # Google Play screenshot templates 2 3 Local versions of the eight phone and eight tablet designs on the Penpot 4 **Google Play** page. The source templates contain no app screenshots. 5 They use Taler blue (`#0042B3`), Raleway Bold, the outlined white Taler POS 6 logo, and a dark device frame (`#00134A`). 7 8 ## Setup 9 10 Run commands from the repository root. Use Python 3 with the pinned Pillow 11 dependency and `rsvg-convert` (provided by librsvg) on PATH: 12 13 ```sh 14 python3 -m venv merchant-terminal/build/artwork-venv 15 merchant-terminal/build/artwork-venv/bin/pip install -r merchant-terminal/design/google-play/requirements.txt 16 ``` 17 18 On macOS, install the PNG renderer with `brew install librsvg`. 19 Alternatively, pass `--svg-only` to generate SVGs without that renderer. 20 The bundled Raleway font is used without installing it system-wide; its license 21 is in `assets/fonts/OFL.txt`. 22 23 ## Build empty templates 24 25 ```sh 26 merchant-terminal/build/artwork-venv/bin/python merchant-terminal/design/google-play/render.py \ 27 --blank \ 28 --out merchant-terminal/build/play-store-templates 29 ``` 30 31 Each card has a self-contained SVG and an opaque RGB PNG. Phone cards are 32 1080 × 1920; tablet cards are 2560 × 1440. The screen area stays empty until a 33 screenshot is supplied. No website or manifest is generated. Use `--png-only` 34 or `--svg-only` when only one image format is needed. 35 36 ## Insert fresh screenshots 37 38 The [shared screenshot flow](../../SCREENSHOTS.md) captures and frames the 39 Play Store subset in one command: 40 41 ```sh 42 merchant-terminal/build/artwork-venv/bin/python merchant-terminal/scripts/capture-screenshots.py \ 43 --set play-store --serial emulator-5560 44 ``` 45 46 To reuse existing captures, pass `--from-captures /path/to/captures` instead of 47 `--serial`. The shared flow outputs PNGs only, using temporary SVG intermediates. 48 `cards.json` defines the eight headlines, input filenames and themes for both 49 capture selection and rendering. 50 51 The renderer remains available for editing a single template: 52 53 ```sh 54 merchant-terminal/build/artwork-venv/bin/python merchant-terminal/design/google-play/render.py \ 55 --screenshot /path/to/new-order-screen.png \ 56 --profile phone --card 01-products \ 57 --out merchant-terminal/build/play-store-single 58 ``` 59 60 The phone screen opening is 9:20; the tablet opening is 16:9. The standalone 61 renderer fits other aspect ratios without stretching, leaving margins inside the 62 frame. The shared capture flow uses matching sizes for an exact fit. 63 64 ## Edit the design 65 66 - `assets/templates/phone.svg` and `assets/templates/tablet.svg`: background, device frame, screen opening, and 67 headline/logo positions. Keep the element IDs used by the renderer. 68 - `cards.json`: eight headlines, screenshot filenames, and themes. Newlines 69 control phone headline wrapping; tablet headlines use one line. 70 - `assets/templates/taler-pos-white.svg`: outlined logo, independent of installed fonts. 71 - `assets/fonts/Raleway-Bold.ttf`: exact headline font. 72 73 The build rejects missing images, wrong orientation, overflowing headlines, and 74 PNGs larger than 8 MB. Review the generated images after changing the design or 75 screenshots. Outputs go under the ignored `merchant-terminal/build` directory; 76 keep screenshots and generated artwork out of this source folder. 77 78 The layouts are local editable copies, not a live Penpot sync. If the Penpot 79 design changes, update the SVG masters or card configuration here as well.