Jannik/Schnappix
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: update README to reflect current codebase and settings

Browse Source
This commit is contained in:
Jannik
2026-06-13 23:23:12 +02:00
parent b2e3dfa7fc
commit 50d6eab5ab
1 changed files with 41 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+41 -93
View File
@@ -8,14 +8,14 @@ Schnappix is a tablet-optimized Photobooth application built with React Native a
- **Multiple Photos & Collages**: Capture single or multiple photos and review them in a generated collage. - **Multiple Photos & Collages**: Capture single or multiple photos and review them in a generated collage.
- **Sticker / Emoji Editor**: Add emojis, date/time stamps, and event text as draggable, resizable, rotatable stickers on your photos — just like on social media. - **Sticker / Emoji Editor**: Add emojis, date/time stamps, and event text as draggable, resizable, rotatable stickers on your photos — just like on social media.
- **Photo Frames**: Overlay transparent PNG frames on photos. Admin can set frames to off, always-on, or user-selectable. - **Photo Frames**: Overlay transparent PNG frames on photos. Admin can set frames to off, always-on, or user-selectable.
- **Continuous Shooting (Burst Mode)**: Automatically capture multiple photos in sequence (2–5 shots, configurable interval) for collage printing. - **Continuous Shooting (Burst Mode)**: Automatically capture multiple photos in sequence (1–5 shots, configurable interval) for collage printing.
- **Date/Time Overlay**: Optionally stamp the date and/or time on every photo, with configurable position. - **Date/Time Overlay**: Optionally stamp the date and/or time on every photo, with configurable position.
- **Camera Flash Effect**: Full-screen white flash animation on every capture for an authentic photo booth feel. - **Camera Flash Effect**: Full-screen white flash animation on every capture for an authentic photo booth feel.
- **Direct Printing**: Built-in support for IPP (Internet Printing Protocol) network printers to instantly print captured moments. - **Direct Printing**: Built-in support for IPP (Internet Printing Protocol) network printers to instantly print captured moments.
- **Kiosk Mode**: Custom native Android implementation to lock the tablet down to the Schnappix app, preventing users from exiting the photobooth. - **Kiosk Mode**: Custom native Android implementation to lock the tablet down to the Schnappix app, preventing users from exiting the photobooth.
- **USB Camera Support**: Extends standard camera capabilities to support external USB cameras for higher quality photos. - **USB & Front Camera Support**: Extends standard camera capabilities to support external USB cameras or standard device front/rear cameras, toggleable in settings.
- **Admin Dashboard**: Secure administrative screen (protected by an admin password) to configure all settings on the fly. - **Admin Dashboard**: Secure administrative screen (protected by an admin password) to configure all settings on the fly.
- **Offline Storage**: Saves captured photos directly to the device's local storage and gallery. - **Offline Storage (MediaStore API)**: Saves captured photos directly to the device's local gallery (`Schnappix - <EventName> - Collagen` and `Schnappix - <EventName> - Originale`).
## Tech Stack ## Tech Stack
@@ -29,7 +29,7 @@ Schnappix is a tablet-optimized Photobooth application built with React Native a
- `react-native-gesture-handler`: Sticker drag, pinch, and rotate gestures - `react-native-gesture-handler`: Sticker drag, pinch, and rotate gestures
- `@fortawesome/react-native-fontawesome`: All in-app icons via Font Awesome - `@fortawesome/react-native-fontawesome`: All in-app icons via Font Awesome
- `react-native-svg`: SVG rendering for icon support - `react-native-svg`: SVG rendering for icon support
- Custom native Expo plugins (`withKioskAdmin`, `withUsbCamera`, `withSettingsRepositories`) for extended Android capabilities. - Custom native Expo plugins (`withKioskAdmin`, `withUsbCamera`, `withLocalAars`) for extended Android capabilities.
## Getting Started ## Getting Started
@@ -63,30 +63,14 @@ Schnappix is a tablet-optimized Photobooth application built with React Native a
npm run android npm run android
``` ```
## Project Structure ## Development & Build Rules
```text Schnappix follows strict architecture and workflow rules:
Schnappix/
├── App.tsx # Main entry point, navigation, GestureHandlerRootView 1. **Versioning**: Versioning format is `23.01.X`, where `X` matches the `versionCode` in `app.json`.
├── Icon.png # App icon (neon synthwave photo booth) 2. **Build Outputs**: Apps must always be built as BOTH `.apk` and `.aab`. Naming syntax is `Schnappix_v23.01.X.apk` and `Schnappix_v23.01.X.aab`.
├── app.json # Expo configuration and plugin registration 3. **Package Name**: Must strictly remain `de.orfel.schnappix`.
├── assets/ 4. **Git Workflow**: Always commit and push at the end of interactions (`git add .`, `git commit`, `git push`). Retry `git push` if it fails due to authentication errors.
│ └── frames/ # Photo frame PNG overlays (user-provided)
├── plugins/ # Custom Expo config plugins for Android features
├── modules/ # Custom native modules (kiosk-mode, usb-camera)
└── src/
├── components/ # Reusable UI components
│ ├── Icon.tsx # Font Awesome icon wrapper
│ ├── DraggableSticker.tsx # Gesture-based sticker (pan, pinch, rotate)
│ ├── StickerTray.tsx # Emoji/sticker picker tray
│ ├── FrameOverlay.tsx # Frame PNG overlay renderer
│ └── FramePicker.tsx # Frame selection UI
├── data/
│ └── frames.ts # Frame asset registry
├── screens/ # UI Screens (Camera, Preview, Admin)
├── services/ # Core logic (printer.ts, settings.ts, storage.ts)
└── styles/ # Global theme (neon synthwave palette)
```
## Configuration ## Configuration
@@ -96,23 +80,25 @@ When the app is first launched, you can access the **Admin Dashboard** by tappin
| Setting | Description | Default | | Setting | Description | Default |
|---|---|---| |---|---|---|
| **Drucker IP-Adresse** | Local IP of the Canon CP1300 printer | `192.168.1.100` | | **Drucker IP-Adresse** | Local IP of the IPP printer (e.g., Canon CP1300) | `192.168.1.100` |
| **Countdown-Dauer** | Seconds before photo capture | `3` | | **Countdown-Dauer** | Seconds before photo capture | `3` |
| **Admin-Passwort** | PIN to access admin panel | `1234` | | **Admin-Passwort** | PIN to access admin panel | `1234` |
| **Begrüßungstext** | Welcome text on the home screen | `Willkommen zu unserer Feier!` | | **Begrüßungstext** | Welcome text on the home screen | `Zeit für ein Erinnerungsfoto!` |
| **Event-Name** | Event text for the date sticker (e.g. `Jannik's Party`) | _(empty)_ | | **Footer-Text** | Footer text on the home screen | `Display tippen! • Lächeln! • Foto schnappen!` |
| **Serienbild-Anzahl** | Number of photos per burst (1 = single shot) | `1` | | **Event-Name** | Event text for the date sticker & generated folder names | _(empty)_ |
| **Serienbild-Anzahl** | Number of photos per burst (1 = single shot, 2-5 = burst) | `1` |
| **Serienbild-Abstand** | Seconds between burst shots | `5` | | **Serienbild-Abstand** | Seconds between burst shots | `5` |
| **Fotorahmen-Modus** | `Aus` / `Immer an` / `Verfügbar` | `Aus` | | **Fotorahmen-Modus** | `Aus` / `Immer an` / `Verfügbar` | `Verfügbar` |
| **Datum-Einblendung** | `Aus` / `Nur Datum` / `Datum + Uhrzeit` | `Aus` | | **Datum-Einblendung** | `Aus` / `Nur Datum` / `Datum + Uhrzeit` | `Aus` |
| **Datum-Position** | Placement of the auto date stamp | `Unten rechts` |
| **Kiosk-Modus** | Lock the tablet to the Schnappix app | `Aus` | | **Kiosk-Modus** | Lock the tablet to the Schnappix app | `Aus` |
| **Frontkamera nutzen** | Toggles between front and rear/USB camera | `Aus` |
| **Logs aktivieren** | Enables detailed app logging | `An` |
--- ---
## Kiosk Mode (Device Owner) Setup ## Kiosk Mode (Device Owner) Setup
To use the **true Kiosk Mode** (Lock Task Mode) without system confirmation prompts, the Schnappix app must be set as the Android "Device Owner". This requires connecting the tablet to a PC via USB and using `adb`. To use the **true Kiosk Mode** (Lock Task Mode) without system confirmation prompts, the Schnappix app must be set as the Android "Device Owner". It does NOT use external MDM software.
**Prerequisites:** **Prerequisites:**
1. The Android tablet must have no other accounts (like a Google Account) configured. It is highly recommended to start with a factory-reset device. 1. The Android tablet must have no other accounts (like a Google Account) configured. It is highly recommended to start with a factory-reset device.
@@ -132,6 +118,17 @@ If successful, the terminal will output `Success: Device owner set to package de
--- ---
## Photo Saving (MediaStore API)
Schnappix uses modern Android MediaStore API (`writeOnly = true` via `expo-media-library`) to save photos directly to the gallery, avoiding legacy file permission prompts.
Photos are neatly organized into two directories based on your configured `Event-Name`:
- `Schnappix - <EventName> - Collagen`
- `Schnappix - <EventName> - Originale`
*Note: Do NOT attempt to force legacy `WRITE_EXTERNAL_STORAGE` or `READ_EXTERNAL_STORAGE` on Android 13+, as it will fail.*
---
## Photo Frames — Setup Guide ## Photo Frames — Setup Guide
Schnappix supports custom photo frame overlays. Frames are transparent PNG images that are layered on top of photos before saving or printing. Schnappix supports custom photo frame overlays. Frames are transparent PNG images that are layered on top of photos before saving or printing.
@@ -141,68 +138,22 @@ Schnappix supports custom photo frame overlays. Frames are transparent PNG image
| Property | Requirement | | Property | Requirement |
|---|---| |---|---|
| **Format** | PNG with **alpha channel** (transparency) | | **Format** | PNG with **alpha channel** (transparency) |
| **Resolution** | **1500 × 1000 px** (3:2 landscape ratio, matches landscape tablet display and print output) | | **Resolution** | **1500 × 1000 px** (3:2 landscape ratio, matches tablet display and print output) |
| **Color mode** | sRGB, 8-bit |
| **Transparency** | The photo area **must be fully transparent** (alpha = 0) | | **Transparency** | The photo area **must be fully transparent** (alpha = 0) |
| **Safe zone** | Keep transparent "window" at least **60 px** inset from edges |
| **File size** | Keep each file under **500 KB** for fast rendering | | **File size** | Keep each file under **500 KB** for fast rendering |
| **Naming** | `frame_<name>.png` (e.g. `frame_balloons.png`, `frame_neon.png`) | | **Naming** | `frame_<name>.png` (e.g. `frame_balloons.png`) |
### Frame Layout Example
```
┌──────────────────────────┐
│ 🎈🎈 🎈🎈 │ ← Decorative artwork (opaque pixels)
│ │
│ ┌──────────────────┐ │
│ │ │ │
│ │ TRANSPARENT │ │ ← Photo shows through here (alpha = 0)
│ │ (alpha=0) │ │
│ │ │ │
│ └──────────────────┘ │
│ │
│ ★ EVENT NAME ★ │ ← Bottom text / artwork (opaque pixels)
└──────────────────────────┘
1500 × 1000 px
```
### How to Add Frames ### How to Add Frames
1. **Create your frame PNG** according to the specifications above. Use any image editor (Photoshop, GIMP, Figma, Canva) that supports transparency export. 1. **Place the file** in the `assets/frames/` directory.
2. **Register the frame** in `src/data/frames.ts`:
2. **Place the file** in the `assets/frames/` directory:
```
assets/frames/frame_balloons.png
assets/frames/frame_party_name.png
assets/frames/frame_neon.png
```
3. **Register the frame** in `src/data/frames.ts`:
```typescript ```typescript
export const FRAMES: FrameDefinition[] = [ export const FRAMES: FrameDefinition[] = [
{ id: 'balloons', name: 'Luftballons', asset: require('../../assets/frames/frame_balloons.png') }, { id: 'balloons', name: 'Luftballons', asset: require('../../assets/frames/frame_balloons.png') },
{ id: 'party_name', name: 'Party Name', asset: require('../../assets/frames/frame_party_name.png') },
{ id: 'neon', name: 'Neon Glow', asset: require('../../assets/frames/frame_neon.png') },
]; ];
``` ```
3. **Rebuild the app** (`npx expo prebuild --clean --platform android` & `npm run android`).
4. **Rebuild the app** (asset changes require a rebuild): 4. **Select the frame mode** in the Admin Dashboard.
```bash
npx expo prebuild --clean --platform android
npm run android
```
5. **Select the frame mode** in the Admin Dashboard:
- **Aus** — No frames
- **Immer an** — A specific frame is always applied (admin picks which one)
- **Verfügbar** — Guests can choose a frame from the picker in the preview screen
### Tips for Designing Frames
- **Test at print size**: The Canon CP1300 prints at 6×4 inches (roughly 1500×1000 px at 250+ DPI). Make sure your frame elements are sharp at this resolution.
- **Leave enough transparent space**: Guests' faces should not be covered. Keep decorative elements on edges and corners.
- **Use subtle borders**: A thin border or vignette effect around the transparent window helps frames look polished.
- **Match the event**: Create themed frames for weddings, birthdays, corporate events, etc.
--- ---
@@ -210,13 +161,10 @@ Schnappix supports custom photo frame overlays. Frames are transparent PNG image
The preview screen includes a social-media-style sticker editor. Guests can: The preview screen includes a social-media-style sticker editor. Guests can:
- **Add emojis**: Tap the "Sticker" button to open the emoji tray with 30 curated party emojis - **Add emojis**: Tap the "Sticker" button to open the emoji tray with curated party emojis.
- **Drag** stickers anywhere on the photo - **Transform**: Drag stickers anywhere, pinch to resize, and two-finger rotate.
- **Pinch to resize** stickers - **Delete**: Tap to select, then press × to delete.
- **Two-finger rotate** stickers - **Dynamic Stickers**: Date, Time, and Event text automatically generate based on your Admin settings.
- **Tap to select**, then press × to delete
- **Add date/time stickers**: Always available — tap "Datum" or "Datum + Uhrzeit" in the tray
- **Add event sticker**: Shows event name + date (if configured in admin)
All stickers are rendered inside the capture area, so they appear in the saved and printed output. All stickers are rendered inside the capture area, so they appear in the saved and printed output.